Changelog

v1.1.0 (2025-04-14)

Tailwind CSS v4

Components have been updated to support Tailwind CSS v4. This involved refactoring internal utility classes and state variant syntax to align with the latest version. As a result, this release is fully compatible with Phoenix 1.8. For more details on setup, see the installation guide.

Enhancements

  • [DatePicker] The toggle button now defaults to w-full, ensuring it expands to the full width of its container for a more consistent layout.
  • [Dropdown] Menu items (buttons and links) now correctly apply cursor-pointer by default, enhancing visual feedback for interactivity.
  • [Dropdown] Icons within menu items no longer apply a default text color. They now inherit color directly from the parent item, simplifying style customization and ensuring visual consistency.
  • [Autocomplete] Added a new debounce attribute to the Autocomplete component. This integer attribute, defaulting to 200 milliseconds, controls the delay before triggering the on_search event for server-side searches.

Bug Fixes

  • [Autocomplete] Fixed an issue where the autocomplete's clear button did not properly clear the input value.

Deprecations

  • The skip_conflicts: true option for component imports is now deprecated. Please use the :only and :except options for more explicit control over imported components. Refer to the installation guide for updated usage.

v1.0.25 (2025-03-31)

Enhancements

  • [Select, Autocomplete, DatePicker] The positioning of the floating elements has been changed from absolute to fixed. This prevents listbox from being clipped by parent elements with overflow: hidden.
  • [Modal, Sheet] The components now prevent unintended closure when dragging from inside to outside the dialog. This enhancement improves usability by allowing users to interact with dialog content, such as text selection, without accidentally closing the dialog when the mouse is released outside its boundaries.

v1.0.24 (2025-03-26)

Bug Fixes

  • [Select] Fixed an issue where the select component was emitting duplicate "change" events when in searchable mode.

v1.0.23 (2025-03-25)

Enhancements

  • [Autocomplete] Added support for clearing the autocomplete selection with a new clear button. The clearable attribute can now be used to enable this feature. When enabled, a clear button appears next to the input field when a selection is made. Clicking the button clears the current selection.
  • [Dropdown] Added support for disabled dropdown items. The Dropdown component now respects disabled, data-disabled, and aria-disabled attributes on menu items. Keyboard navigation and mouse interactions will skip over disabled items.
  • [Autocomplete, Select] Added support for custom header and footer content in the Select and Autocomplete components. Users can now include additional elements like action buttons or filters at the top and bottom of the listbox using the new :header and :footer slots. These slots accept a class attribute for custom styling.
  • [Select] The "Clear selection" button is now keyboard accessible with tabindex="0", allowing users to interact with it using keyboard navigation.

v1.0.22 (2025-03-13)

Enhancements

  • [Autocomplete] Search event payload now includes the input element's ID. This enhancement allows developers to more easily identify which specific autocomplete instance triggered a search event in multi-input scenarios. The id property is now available in the event payload alongside the existing query property when handling autocomplete search events.
  • [Dropdown] Added automatic closing of the dropdown menu when a menu item is clicked. This behavior improves usability by closing the menu after a selection is made, particularly useful for button-type menu items that don't trigger page navigation.

Bug Fixes

  • [Autocomplete, DatePicker] Fixed an issue where the fields were triggering premature validations during phx-change events. It now prevents validation from occurring before user interaction with the field. Fix #51.
  • [Autocomplete] Fixed an issue where the component's selection state was not properly cleared when the input was emptied. Now, when the input value is cleared (e.g., using Cmd+Backspace), the component correctly resets its internal selection state. This ensures that the component's state remains consistent with the empty input, preventing potential conflicts between the displayed value and the internal selection.
  • [Date Picker] Fixed an issue where changing the field value via LiveView did not update the DatePicker selection. The component now synchronizes correctly with LiveView updates, ensuring accurate highlighting in the calendar. Fix #54.
  • [Date Picker] Fixed an issue where the AM/PM select was not correctly updating to "PM" when a time after 12:00 PM was set.