Merge pull request #495 from acelaya-forks/feature/tailwind-tags-autocomplete

Create TagAutoComplete component

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [0.9.11] - 2025-06-14
+### Added
+* Add tailwind-based `TagsAutocomplete` component.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.9.10] - 2025-06-11
 ### Added
 * *Nothing*

dev/tailwind/form/InputsPage.tsx

@@ -48,6 +48,7 @@ export const InputsPage: FC = () => {
         <Input placeholder="Error input" feedback="error" />
         <Input placeholder="Disabled input" disabled />
         <Input placeholder="Readonly input" readOnly />
+        <Input placeholder="Unstyled input" variant="unstyled" />
         <LabelledInput label="Labelled input" helpText="This is the help text under the input" />
         <LabelledInput label="Error labelled input" error="This input is invalid!" />
         <Input placeholder="Large input" size="lg" />

dev/tailwind/form/SearchComboboxPage.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 import { useTimeout } from '../../../src';
-import { SearchCombobox } from '../../../src/tailwind';
+import { SearchCombobox, TagsAutocomplete } from '../../../src/tailwind';
 
 const colors = [
   { name: 'red', value: '#FF0000' },
@@ -33,7 +33,7 @@ const ColorItem: FC<typeof colors[number]> = ({ name, value }) => (
   </div>
 );
 
-export const SearchComboboxPage: FC = () => {
+const SyncSearch: FC = () => {
   const [syncSearchResults, setSyncSearchResults] = useState<Map<string, typeof colors[number]>>();
   const [syncSelectedItem, setSyncSelectedItem] = useState<typeof colors[number]>();
   const onSyncSearch = useCallback((searchTerm: string) => {
@@ -49,6 +49,26 @@ export const SearchComboboxPage: FC = () => {
     ));
   }, []);
 
+  return (
+    <div className="tw:flex tw:flex-col tw:gap-y-2">
+      <h2>Sync search</h2>
+      <SearchCombobox
+        onSearch={onSyncSearch}
+        onSelectSearchResult={setSyncSelectedItem}
+        renderSearchResult={(color) => <ColorItem {...color} />}
+        searchResults={syncSearchResults}
+        placeholder="Search colors synchronously..."
+      />
+      {syncSelectedItem && (
+        <div className="tw:flex tw:gap-3">
+          Last selected color is: <ColorItem {...syncSelectedItem} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const AsyncSearch: FC = () => {
   const { setTimeout } = useTimeout(1000);
   const [asyncSearchResults, setAsyncSearchResults] = useState<Map<string, typeof colors[number]>>();
   const [asyncSelectedItem, setAsyncSelectedItem] = useState<typeof colors[number]>();
@@ -70,38 +90,51 @@ export const SearchComboboxPage: FC = () => {
     });
   }, [setTimeout]);
 
+  return (
+    <div className="tw:flex tw:flex-col tw:gap-y-2">
+      <h2>Async search</h2>
+      <SearchCombobox
+        onSearch={onAsyncSearch}
+        onSelectSearchResult={setAsyncSelectedItem}
+        renderSearchResult={(color) => <ColorItem {...color} />}
+        searchResults={asyncSearchResults}
+        placeholder="Search colors asynchronously..."
+        loading={asyncLoading}
+      />
+      {asyncSelectedItem && (
+        <div className="tw:flex tw:gap-3">
+          Last selected color is: <ColorItem {...asyncSelectedItem} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const TagsAutocompleteExample: FC<{ immutable: boolean }> = ({ immutable }) => {
+  const [selectedTags, setSelectedTags] = useState(immutable ? [] : ['blue', 'yellow']);
+
+  return (
+    <TagsAutocomplete
+      tags={colors.map(({ name }) => name)}
+      selectedTags={selectedTags}
+      onTagsChange={setSelectedTags}
+      getColorForTag={(tag) => colors.find(({ name }) => name === tag)?.value ?? '#99A1AF'}
+      placeholder={immutable ? 'Select tags from list...' : 'Select or add tags...'}
+      immutable={immutable}
+    />
+  );
+};
+
+export const SearchComboboxPage: FC = () => {
   return (
     <div className="tw:flex tw:flex-col tw:gap-y-4">
+      <SyncSearch />
+      <AsyncSearch />
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
-        <h2>Sync search</h2>
-        <SearchCombobox
-          onSearch={onSyncSearch}
-          onSelectSearchResult={setSyncSelectedItem}
-          renderSearchResult={(color) => <ColorItem {...color} />}
-          searchResults={syncSearchResults}
-          placeholder="Search colors synchronously..."
-        />
-        {syncSelectedItem && (
-          <div className="tw:flex tw:gap-3">
-            Last selected color is: <ColorItem {...syncSelectedItem} />
-          </div>
-        )}
-      </div>
-      <div className="tw:flex tw:flex-col tw:gap-y-2">
-        <h2>Async search</h2>
-        <SearchCombobox
-          onSearch={onAsyncSearch}
-          onSelectSearchResult={setAsyncSelectedItem}
-          renderSearchResult={(color) => <ColorItem {...color} />}
-          searchResults={asyncSearchResults}
-          placeholder="Search colors asynchronously..."
-          loading={asyncLoading}
-        />
-        {asyncSelectedItem && (
-          <div className="tw:flex tw:gap-3">
-            Last selected color is: <ColorItem {...asyncSelectedItem} />
-          </div>
-        )}
+        <h2>Tags autocomplete</h2>
+        <TagsAutocompleteExample immutable={false} />
+        <TagsAutocompleteExample immutable={true} />
       </div>
     </div>
   );

src/tailwind/form/CloseButton.tsx

@@ -3,28 +3,33 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
 import type { HTMLProps } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../types';
 
 export type CloseButtonProps = {
   label?: string;
   onClick?: HTMLProps<HTMLButtonElement>['onClick'];
   className?: string;
+  size?: Size;
+  solid?: boolean;
 };
 
 export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((
-  { onClick, className, label = 'Close' },
+  { onClick, className, label = 'Close', size = 'lg', solid },
   ref,
 ) => (
   <button
     ref={ref}
     type="button"
     onClick={onClick}
     className={clsx(
-      'tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity',
       'tw:rounded-md tw:focus-ring tw:cursor-pointer',
+      {
+        'tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity': !solid,
+      },
       className,
     )}
     aria-label={label}
   >
-    <FontAwesomeIcon icon={faClose} size="xl" />
+    <FontAwesomeIcon icon={faClose} size={size === 'lg' ? 'xl' : size === 'md' ? 'lg' : undefined} />
   </button>
 ));

src/tailwind/form/Input.tsx

@@ -5,7 +5,13 @@ import type { Size } from '../types';
 
 export type BaseInputProps = {
   size?: Size;
-  feedback?: 'error',
+  feedback?: 'error';
+
+  /**
+   * Whether the input should have an opinionated style or not. Defaults to 'default'.
+   * An unstyled input can be useful to wrap or customize.
+   */
+  variant?: 'default' | 'unstyled';
 };
 
 export type InputProps =
@@ -17,6 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
   borderless = false,
   size = 'md',
   feedback,
+  variant = 'default',
   className,
   disabled,
   ...rest
@@ -25,27 +32,27 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
     <input
       ref={ref}
       className={clsx(
-        'tw:w-full',
-        {
-          'tw:focus-ring': !feedback,
-          'tw:focus-ring-danger': feedback === 'error',
-        },
-        {
+        'tw:outline-none',
+        variant === 'default' && [
+          'tw:w-full',
+          {
+            'tw:focus-ring': !feedback,
+            'tw:focus-ring-danger': feedback === 'error',
+
+            'tw:px-2 tw:py-1 tw:text-sm': size === 'sm',
+            'tw:px-3 tw:py-1.5': size === 'md',
+            'tw:px-4 tw:py-2 tw:text-xl': size === 'lg',
 
-          'tw:px-2 tw:py-1 tw:text-sm': size === 'sm',
-          'tw:px-3 tw:py-1.5': size === 'md',
-          'tw:px-4 tw:py-2 tw:text-xl': size === 'lg',
-        },
-        {
-          'tw:rounded-md tw:border': !borderless,
-          'tw:border-lm-input-border tw:dark:border-dm-input-border': !borderless && !feedback,
-          'tw:border-danger': !borderless && feedback === 'error',
+            'tw:rounded-md tw:border': !borderless,
+            'tw:border-lm-input-border tw:dark:border-dm-input-border': !borderless && !feedback,
+            'tw:border-danger': !borderless && feedback === 'error',
 
-          'tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input': disabled,
-          'tw:bg-lm-primary tw:dark:bg-dm-primary': !disabled,
-          // Use different background color when rendered inside a card
-          'tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input': !disabled,
-        },
+            'tw:bg-lm-disabled-input tw:dark:bg-dm-disabled-input': disabled,
+            'tw:bg-lm-primary tw:dark:bg-dm-primary': !disabled,
+            // Use different background color when rendered inside a card
+            'tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input': !disabled,
+          },
+        ],
         className,
       )}
       disabled={disabled}

src/tailwind/form/SearchCombobox.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import { useCallback, useId, useMemo , useRef,useState  } from 'react';
+import type { ForwardedRef, ReactNode } from 'react';
+import { forwardRef , useCallback, useId, useImperativeHandle , useMemo , useRef,useState  } from 'react';
 import { Listbox } from '../content';
 import type { SearchInputProps } from './SearchInput';
 import { SearchInput } from './SearchInput';
@@ -28,6 +28,11 @@ export type SearchComboboxProps<Item> = BaseInputProps & {
    * Defaults to `full`.
    */
   listboxSpan?: 'full' | 'auto';
+
+  /** Classes to add to the wrapping container */
+  containerClassName?: string;
+  /** Classes to add to the listbox */
+  listboxClassName?: string;
 };
 
 /**
@@ -36,20 +41,24 @@ export type SearchComboboxProps<Item> = BaseInputProps & {
  * The main difference is that the input is used only to search in the listbox, and once an item is selected, the input
  * is cleared and the listbox is closed.
  */
-export function SearchCombobox<Item>({
+function SearchComboboxInner<Item>({
   searchResults,
   onSearch,
   onSelectSearchResult,
   renderSearchResult,
   size = 'md', // SearchInput defaults its size to 'lg'. Change it to 'md'
   listboxSpan = 'full',
   onFocus,
+  containerClassName,
+  listboxClassName,
   ...rest
-}: SearchComboboxProps<Item>) {
-  const searchInputRef = useRef<HTMLInputElement>(null);
+}: SearchComboboxProps<Item>, ref: ForwardedRef<HTMLInputElement>) {
   const listboxId = useId();
   const [activeKey, setActiveKey] = useState<string>();
 
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => searchInputRef.current!);
+
   // The active key is undefined while the listbox is closed. While open, we use the explicitly set activeKey, or the
   // first key of the search results.
   const currentlyActiveKey = useMemo(
@@ -61,11 +70,11 @@ export function SearchCombobox<Item>({
     onSelectSearchResult(item);
     onSearch('');
     searchInputRef.current!.value = '';
-  }, [onSearch, onSelectSearchResult]);
+  }, [onSearch, onSelectSearchResult, searchInputRef]);
 
   return (
     <div
-      className="tw:relative"
+      className={clsx('tw:relative', containerClassName)}
       onBlur={(e) => {
         // Clears search when focus is moving away of this container, so that the listbox is closed.
         if (!e.currentTarget.contains(e.relatedTarget)) {
@@ -102,9 +111,10 @@ export function SearchCombobox<Item>({
           className={clsx(
             'tw:absolute tw:top-full tw:mt-1 tw:z-10',
             {
-              'tw:min-w-60 tw:max-w-full': listboxSpan === 'auto',
+              'tw:min-w-60': listboxSpan === 'auto',
               'tw:w-full': listboxSpan === 'full',
             },
+            listboxClassName,
           )}
           aria-label="Matching items"
           noItemsMessage="No results found matching search"
@@ -113,3 +123,7 @@ export function SearchCombobox<Item>({
     </div>
   );
 }
+
+export const SearchCombobox = forwardRef(SearchComboboxInner) as <T>(
+  props: SearchComboboxProps<T> & { ref?: ForwardedRef<HTMLInputElement> }
+) => ReturnType<typeof SearchComboboxInner>;