[email protected]

Minor Changes

• 5958263: 🚀 Features:

  New Styling API: Introduced a styling API for the TagInput component and its subcomponents. This update allows developers to customize the appearance of each part of the component using a structured classNames prop. Each subcomponent, including TagList, Autocomplete, and TagPopover, can now be styled individually to match specific design requirements.

  Detailed Enhancements Include:

  • TagInput: Ability to apply custom classes to the main container and input elements.
  • TagList: Customization options for the list container and individual tags, including sortable lists.
  • Autocomplete: Extended styling capabilities for autocomplete triggers, content, command lists, and items.
  • TagPopover: Options to style the popover content and triggers separately.
  • Tag: Enhanced control over the tag container and close button styling.

[email protected]

Patch Changes

• feae754: 🐞 Bug Fixes:

  Restored Default Outside Click Behavior for TagPopover: Updated the TagPopover component to close when clicking outside its bounds, restoring the default behavior that was unintentionally overridden in previous updates. This issue arose due to modifications intended to keep the popover open under specific circumstances, such as focusing within the popover's content. The fix involved adjusting event handling to ensure that the popover's native functionality provided by Radix UI is preserved, allowing it to close as expected when focus is lost or an outside click is detected.

[email protected]

Patch Changes

• 2934d54: 🐞 Bug Fixes:

  Resolved an issue where custom className attributes were not being applied correctly to the TagInput component. The problem affected the ability to customize the background and other styles via the className property directly or through inputProps. The fix ensures that className values are now properly merged, maintaining both the component's functionality and the user-specified styles.

[email protected]

Patch Changes

• 0e63476: - Tag List Component Enhancements

  • Extended the Tag component within the TagList to accept direction and draggable properties, allowing for enhanced customization and interactivity of the tags.

  • Enhanced input field flexibility to dynamically fit and adjust within the available space, wrapping only when necessary and maintaining a minimum width for usability.

  • Additional Style Variants

    • Included new border style variants for the Tag component, providing more visual customization options to better suit diverse UI design requirements.

  • Tag Popover Adjustments

    • Fixed the dynamic adjustment of the popover’s width to ensure it properly aligns with varying screen sizes and orientation changes, enhancing the responsiveness and consistency of UI elements.

[email protected]

Patch Changes

• e09d618: 🐞 Bug Fixes:

  Dynamic Values Calculation Safety: Fixed an issue where the some state variable could be undefined when initialized

[email protected]

Minor Changes

• 36b0af1: 🚀 Features

  • Added state management for active tag index
  • Implemented keyboard navigation for tag input
  • Integrated keyboard navigation support with custom tags
  • Changed default rendering style of taglist container to be inline. Tags are now displayed in the input by default
  • Improved focus management to enhance accessibility
  • Added visual indicators for active tags

[email protected]

Patch Changes

• d1ba01e: 🐞 Bug Fixes

  • Added dynamic width calculation for the tag popover to fix and issue where the popover was taking the full width of the site body
  • Ensured the input field within the popover remains editable when the popover is open.

[email protected]

Minor Changes

• 79b539d: 🚀 Features

  • Added a popover to display the autocomplete list with dynamic width, ensuring the list options do not take up too much screen space, especially beneficial for mobile devices. by @JaleelB (f06fc3b)
  • Added a checkbox indicator to visually show selected items in the autocomplete list. by @JaleelB (f03b44c)
  • Set a maximum height for the command list to improve usability and prevent overflow issues. by @JaleelB (c65976f)

[email protected]

Patch Changes

• 0c5691f: 🐞 Bug Fixes

  • Applied a width of fit-content to the input component when includeTagsInInput is enabled.
  • Addressed an issue where the input was taking the full width of the container, causing tags to stack on top of the input.
  • Ensured that the input and tags are displayed inline, improving the user experience and layout consistency.

[email protected]

Patch Changes

• 69b6dfb: updated input styling when tags are rendered inline