Autocomplete

import { Autocomplete } from "@lualtek/react-components";
 
const options = [
  {
    value: "apple",
    children: "🍎 Apple",
    decoration: (
      <UI.Chip dimension="small" color="green">
        110 Cal
      </UI.Chip>
    ),
  },
  {
    value: "banana",
    children: "🍌 Banana",
  },
  {
    value: "cherry",
    children: "🍒 Cherry",
  },
];
 
export default () => {
  return <Autocomplete label="Fruits" icon="zoom" options={options} />;
};

type OptionType = {
  /**
   * Set disabled state. The item is not interactive and grayed out.
   */
  disabled?: boolean;
 
  /**
   * Add an element to decorate the menu item. This is useful for adding extra elements
   * and informations to the menu item.
   *
   * @note Don't use interactive elements (link, buttons, etc..) as decoration
   * if `Menu.Item` is rendered as ´<button>´ (default).
   */
  decoration?: ReactNode;
 
  /**
   * Assign a string value to the menu option. This is returned when the menu item is clicked.
   */
  value: string | number;
 
  /**
   * Set the sentiment color for the item
   */
  sentiment?: "positive" | "warning" | "danger";
};
 
export type AutocompleteProps = {
  /**
   * Set the maximum height of the options list after which
   * it will scroll.
   * @default '200px'
   */
  maxHeight?: MenuProps["maxHeight"];
 
  /**
   * Set the alignment of the options list.
   * @default center
   */
  align?: PopoverContentProps["align"];
 
  /**
   * Whether the menu is forced to match the width of the field by clipping overflowing items.\
   * @default false
   */
  matchFieldWidth?: boolean;
 
  /**
   * Custom empty content to display when there are no options or
   * when the value does not match any of the options.
   * @default 'No items to show'
   */
  emptyContent?: ReactNode;
 
  /**
   * Show skeletons while loading option is set to true.
   */
  loading?: boolean;
 
  /**
   * List of options to use as suggestion
   */
  options?: OptionType[];
 
  /**
   * Callback called when an option is selected.
   */
  onClickOption?: (value: string | number, text?: string | null) => void;
};