import { ComboBoxRoot, ComboBoxListBox, ComboBoxOption, ComboBoxSection } from './components'; import { filterByText, filterByStartsWith, filterByCaseSensitive, filterByWordBoundary, filterByFuzzy, createMultiPropertyFilter, createRankedFilter, createMultiTermFilter, createSectionAwareFilter } from './utils/filters'; /** * # ComboBox * ============================================================ * * A searchable, filterable selection component with single and multi-select support. * Built with React Aria Components for accessibility and keyboard navigation. * * @see {@link https://nimbus-documentation.vercel.app/components/inputs/combobox} * * @example * ```tsx * * * * * {(item) => {item.name}} * * * * ``` */ export declare const ComboBox: { /** * # ComboBox.Root * * The root component that provides state management and context for the combobox. * Handles selection state, input filtering, popover open/close, and keyboard navigation. * * @example * ```tsx * * * * * {(item) => {item.name}} * * * * ``` */ Root: typeof ComboBoxRoot; /** * # ComboBox.Trigger * * The trigger element that contains the input field and controls for the combobox. * Automatically renders tag group (multi-select), input field, toggle button, and clear button. * * @example * ```tsx * * * ... * * ``` */ Trigger: { ({ children, ...restProps }: import('./combobox.types').ComboBoxTriggerProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # ComboBox.Popover * * The popover container that displays the dropdown options list. * Renders in a React portal and handles positioning relative to the trigger. * * @example * ```tsx * * * {(item) => {item.name}} * * * ``` */ Popover: { ({ children, ref, ...restProps }: import('./combobox.types').ComboBoxPopoverProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # ComboBox.ListBox * * The container for dropdown options that displays filtered results. * * Use the render prop pattern - do **NOT** manually map over items as this is less performant. * * @example * ```tsx * * {(item) => {item.name}} * * ``` */ ListBox: typeof ComboBoxListBox; /** * # ComboBox.Option * * An individual selectable option within the listbox. * Displays a checkmark indicator for selected items in multi-select mode. * * @example * ```tsx * Option text * ``` * * @example Render prop pattern * ```tsx * * {({ isSelected }) => ( * Option 1 {isSelected && "✓"} * )} * * ``` */ Option: typeof ComboBoxOption; /** * # ComboBox.Section * * Groups related options together with an optional heading. * Supports render prop pattern for dynamic option rendering within sections. * * @example * ```tsx * * Option 1 * Option 2 * * ``` * * @example Render prop pattern * ```tsx * * {(item) => {item.name}} * * ``` */ Section: typeof ComboBoxSection; /** * # ComboBox.filters * * Built-in filter functions and utilities for customizing ComboBox filtering behavior. * These filters can be passed to the `filter` prop on ComboBox.Root to control how options are filtered based on user input. * * **Available Filters:** * - `filterByText`: Default substring matching (case-insensitive) * - `filterByStartsWith`: Prefix matching * - `filterByCaseSensitive`: Exact case substring matching * - `filterByWordBoundary`: Word boundary matching * - `filterByFuzzy`: Fuzzy matching (characters in order) * - `createMultiPropertyFilter`: Search across multiple object properties * - `createRankedFilter`: Custom scoring/ranking logic * - `createMultiTermFilter`: OR logic for multiple search terms * - `createSectionAwareFilter`: Preserves section structure while filtering * * @example Basic filter usage * ```tsx * import { ComboBox } from '@commercetools/nimbus'; * * function MyComponent() { * return ( * * * * * {(item) => {item.name}} * * * * ); * } * ``` * * @example Multi-property search * ```tsx * const productFilter = ComboBox.filters.createMultiPropertyFilter([ * 'name', * 'category', * 'description' * ]); * * function ProductSearch() { * return ( * * * * * {(item) => {item.name}} * * * * ); * } * ``` * * @example Section-aware filtering * ```tsx * const sectionFilter = ComboBox.filters.createSectionAwareFilter( * ComboBox.filters.filterByFuzzy * ); * * function SectionedSearch() { * return ( * * * * * {(section) => ( * * {(item) => {item.name}} * * )} * * * * ); * } * ``` */ filters: { filterByText: typeof filterByText; filterByStartsWith: typeof filterByStartsWith; filterByCaseSensitive: typeof filterByCaseSensitive; filterByWordBoundary: typeof filterByWordBoundary; filterByFuzzy: typeof filterByFuzzy; createMultiPropertyFilter: typeof createMultiPropertyFilter; createRankedFilter: typeof createRankedFilter; createMultiTermFilter: typeof createMultiTermFilter; createSectionAwareFilter: typeof createSectionAwareFilter; }; };