@stack-spot/citric-react 0.41.1 → 0.42.0-beta.0

package/dist/components/Accordion.d.ts

@@ -67,5 +67,5 @@ export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'
  * )
  * ```
  */
-export declare const Accordion: ({ id, appearance, expanded, onChange, header, maxHeight, startExpanded, className, style, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ id, appearance, expanded, onChange, header, maxHeight, startExpanded, className, style, children, ...props }: AccordionProps) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { listToClass } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useEffect, useMemo, useState } from 'react';

package/dist/components/Alert.d.ts

@@ -14,5 +14,5 @@ export type AlertProps = React.JSX.IntrinsicElements['div'] & BaseAlertProps;
  * <Alert type="warning">My warning!</Alert>
  * ```
  */
-export declare const Alert: ({ type, className, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ type, className, children, ...props }: AlertProps) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';

package/dist/components/AsyncContent.d.ts

@@ -45,6 +45,6 @@ interface Props {
  * )
  * ```
  */
-export declare const AsyncContent: ({ loading, error, autofocus, children, loadingStyle }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const AsyncContent: ({ loading, error, autofocus, children, loadingStyle }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime.js").JSX.Element | null | undefined;
 export {};
 //# sourceMappingURL=AsyncContent.d.ts.map

package/dist/components/AsyncContent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { useEffect, useLayoutEffect } from 'react';
 import { useCitricController } from '../context/hooks.js';
 import { withRef } from '../utils/react.js';

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,211 @@
+import { ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme';
+export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
+    /**
+     * The list of options available for selection.
+     */
+    options: T[];
+    /**
+     * The current value(s) selected.
+     * - Single selection: T | null
+     * - Multiple selection: T[]
+     */
+    value: Multiple extends true ? T[] : (T | null);
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange: Multiple extends true ? (value: T[]) => void : (value: T | null) => void;
+    /**
+     * If true, enables multiple selection mode.
+     * @default false
+     */
+    multiple?: Multiple;
+    /**
+     * If true, allows the user to enter values that are not in the options list.
+     * @default false
+     */
+    freeSolo?: boolean;
+    /**
+     * If true, allows creating new options when no match is found.
+     * Shows an "Add [value]" option at the top of the list.
+     * @default false
+     */
+    creatable?: boolean;
+    /**
+     * Callback fired when a new option is created.
+     * Required when creatable is true and you want manual control.
+     */
+    onCreate?: (inputValue: string) => void;
+    /**
+     * Function to create a new option object from the input value.
+     * Required when creatable is true without onCreate and working with objects.
+     *
+     * @example
+     * ```tsx
+     * getOptionFromInput={(inputValue) => ({ id: Date.now(), name: inputValue })}
+     * ```
+     */
+    getOptionFromInput?: (inputValue: string) => T;
+    /**
+     * The input value (controlled).
+     */
+    inputValue?: string;
+    /**
+     * Callback fired when the input value changes.
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * A function to render the item label.
+     * @default "the item's toString() result."
+     */
+    renderLabel?: (option: T) => string;
+    /**
+     * A function to generate a unique key for each option.
+     */
+    renderKey?: (option: T) => string | number;
+    /**
+     * A function to render an option in the dropdown.
+     */
+    renderOption?: (option: T) => React.ReactNode;
+    /**
+     * A function to render a tag in multiple mode.
+     */
+    renderTag?: (option: T, onRemove: () => void) => React.ReactNode;
+    /**
+     * Custom filter function for options.
+     * @default filters by label includes input (case insensitive)
+     */
+    filterOptions?: (options: T[], inputValue: string) => T[];
+    /**
+     * If true, shows a loading indicator.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * If true, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * Maximum height for the dropdown panel in pixels.
+     */
+    maxHeight?: number;
+    /**
+     * Maximum number of tags to show before truncating.
+     * Only applies when multiple is true.
+     */
+    maxTagsToShow?: number;
+    /**
+     * If true, automatically highlights the first option.
+     * @default false
+     */
+    autoHighlight?: boolean;
+    /**
+     * If true, clears the input value when an option is selected.
+     * Only applies when multiple is true.
+     * @default true (for multiple)
+     */
+    clearOnSelect?: boolean;
+    /**
+     * If true, the popup will open on input focus.
+     * @default true
+     */
+    openOnFocus?: boolean;
+    /**
+     * Callback fired when an option is selected (before onChange).
+     */
+    onSelect?: (option: T | null) => void;
+    /**
+     * Text to display when no options are available.
+     */
+    noOptionsText?: string;
+    /**
+     * Text to display when loading.
+     */
+    loadingText?: string;
+    /**
+     * Callback fired when the user scrolls to the end of the options list.
+     * Useful for implementing infinite scroll/pagination.
+     *
+     * @example
+     * ```tsx
+     * <Autocomplete
+     *   options={options}
+     *   onScrollEnd={() => fetchMoreOptions()}
+     *   loading={isFetchingMore}
+     * />
+     * ```
+     */
+    onScrollEnd?: () => void;
+    /**
+     * Margin in pixels before the end of the list to trigger onScrollEnd.
+     * @default 200
+     */
+    scrollEndMargin?: number;
+    /**
+     * Color scheme for the tags (badges) in multiple mode.
+     * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
+     */
+    tagColorScheme?: ColorSchemeName;
+    /**
+     * Color palette for the tags (badges) in multiple mode.
+     * @example 'blue' | 'green' | 'red' | 'yellow' | 'purple'
+     */
+    tagColorPalette?: ColorPaletteName;
+    /**
+     * Appearance of the tags (badges) in multiple mode.
+     * @default 'circle'
+     */
+    tagAppearance?: 'square' | 'circle';
+}
+export type AutocompleteProps<T, Multiple extends boolean = false> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onSelect'> & BaseAutocompleteProps<T, Multiple>;
+/**
+ * A combination of a text input and a dropdown that suggests options as the user types.
+ * Supports both single and multiple selection modes, similar to Material-UI Autocomplete.
+ *
+ * @example
+ * Basic usage (single selection):
+ * ```tsx
+ * const [value, setValue] = useState<Option | null>(null)
+ *
+ * <Autocomplete
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderLabel={o => o.name}
+ *   renderKey={o => o.id}
+ * />
+ * ```
+ *
+ * @example
+ * Multiple selection with tags:
+ * ```tsx
+ * const [value, setValue] = useState<Option[]>([])
+ *
+ * <Autocomplete
+ *   multiple
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderLabel={o => o.name}
+ *   renderKey={o => o.id}
+ * />
+ * ```
+ *
+ * @example
+ * Free solo (allow custom values):
+ * ```tsx
+ * <Autocomplete
+ *   freeSolo
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderLabel={o => o.name}
+ * />
+ * ```
+ */
+export declare const Autocomplete: <T, Multiple extends boolean = false>(props: AutocompleteProps<T, Multiple>) => React.ReactElement;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/Autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,409 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime.js";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { applyCSSVariable } from '../../utils/css.js';
+import { defaultRenderKey, defaultRenderLabel } from '../../utils/options.js';
+import { withRef } from '../../utils/react.js';
+import { Badge } from '../Badge.js';
+import { Checkbox } from '../Checkbox.js';
+import { CitricComponent } from '../CitricComponent.js';
+import { IconButton } from '../IconBox.js';
+import { ProgressCircular } from '../ProgressCircular.js';
+import { useDisabledEffect, useFocusEffect } from '../Select/hooks.js';
+import { Row } from '../layout.js';
+/**
+ * A combination of a text input and a dropdown that suggests options as the user types.
+ * Supports both single and multiple selection modes, similar to Material-UI Autocomplete.
+ *
+ * @example
+ * Basic usage (single selection):
+ * ```tsx
+ * const [value, setValue] = useState<Option | null>(null)
+ *
+ * <Autocomplete
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderLabel={o => o.name}
+ *   renderKey={o => o.id}
+ * />
+ * ```
+ *
+ * @example
+ * Multiple selection with tags:
+ * ```tsx
+ * const [value, setValue] = useState<Option[]>([])
+ *
+ * <Autocomplete
+ *   multiple
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderLabel={o => o.name}
+ *   renderKey={o => o.id}
+ * />
+ * ```
+ *
+ * @example
+ * Free solo (allow custom values):
+ * ```tsx
+ * <Autocomplete
+ *   freeSolo
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderLabel={o => o.name}
+ * />
+ * ```
+ */
+export const Autocomplete = withRef(function Autocomplete({ options, value, onChange, multiple = false, freeSolo = false, creatable = false, onCreate, getOptionFromInput, inputValue: controlledInputValue, onInputChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderOption, renderTag, filterOptions, loading = false, disabled = false, placeholder, maxHeight, maxTagsToShow, autoHighlight = false, clearOnSelect = multiple, openOnFocus = true, onSelect, noOptionsText, loadingText, onScrollEnd, scrollEndMargin = 200, tagColorScheme, tagColorPalette, tagAppearance = 'circle', style, className, ...props }, ref) {
+    const t = useTranslate(dictionary);
+    const _element = useRef(null);
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const element = ref ?? _element;
+    const [open, setOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [internalInputValue, setInternalInputValue] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    useFocusEffect({ element, focused, setFocused, setOpen });
+    useDisabledEffect({ disabled, setOpen, setFocused });
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleClickOutside = (event) => {
+            if (element.current && !element.current.contains(event.target)) {
+                setOpen(false);
+                setFocused(false);
+            }
+        };
+        setTimeout(() => {
+            document.addEventListener('click', handleClickOutside);
+        }, 10);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [open, element]);
+    const inputValue = controlledInputValue ?? internalInputValue;
+    const setInputValue = useCallback((newValue) => {
+        if (onInputChange) {
+            onInputChange(newValue);
+        }
+        else {
+            setInternalInputValue(newValue);
+        }
+    }, [onInputChange]);
+    const defaultFilter = useCallback((opts, input) => {
+        if (!input)
+            return opts;
+        return opts.filter(option => renderLabel(option).toLowerCase().includes(input.toLowerCase()));
+    }, [renderLabel]);
+    const filter = filterOptions ?? defaultFilter;
+    const filteredOptions = useMemo(() => filter(options, inputValue), [options, inputValue, filter]);
+    const showCreateOption = useMemo(() => {
+        if (!creatable || !onCreate || !inputValue.trim())
+            return false;
+        const hasExactMatch = filteredOptions.some(option => renderLabel(option).toLowerCase() === inputValue.toLowerCase());
+        return !hasExactMatch;
+    }, [creatable, onCreate, inputValue, filteredOptions, renderLabel]);
+    const handleCreate = useCallback(() => {
+        if (!onCreate || !inputValue.trim())
+            return;
+        onCreate(inputValue.trim());
+        setInputValue('');
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [onCreate, inputValue, setInputValue]);
+    const isSelected = useCallback((option) => {
+        if (multiple) {
+            return value.some(v => renderKey(v) === renderKey(option));
+        }
+        return value !== null && renderKey(value) === renderKey(option);
+    }, [value, multiple, renderKey]);
+    const handleSelect = useCallback((option) => {
+        if (onSelect)
+            onSelect(option);
+        if (multiple) {
+            const currentValue = value;
+            const isAlreadySelected = currentValue.some(v => renderKey(v) === renderKey(option));
+            if (isAlreadySelected) {
+                const newValue = currentValue.filter(v => renderKey(v) !== renderKey(option));
+                onChange(newValue);
+            }
+            else {
+                onChange([...currentValue, option]);
+            }
+            if (clearOnSelect) {
+                setInputValue('');
+            }
+        }
+        else {
+            onChange(option);
+            setInputValue(renderLabel(option));
+            setOpen(false);
+        }
+    }, [multiple, value, onChange, renderKey, renderLabel, clearOnSelect, setInputValue, onSelect]);
+    const handleRemoveTag = useCallback((optionToRemove) => {
+        if (!multiple)
+            return;
+        const newValue = value.filter(v => renderKey(v) !== renderKey(optionToRemove));
+        onChange(newValue);
+    }, [multiple, value, onChange, renderKey]);
+    const handleInputChange = (newValue) => {
+        setInputValue(newValue);
+        if (!open && newValue) {
+            setOpen(true);
+        }
+        setHighlightedIndex(autoHighlight ? 0 : -1);
+    };
+    const handleFocus = () => {
+        setFocused(true);
+        if (openOnFocus) {
+            setOpen(true);
+        }
+    };
+    const handleBlur = (e) => {
+        if (element.current?.contains(e.relatedTarget)) {
+            return;
+        }
+        setFocused(false);
+        setOpen(false);
+        if (freeSolo && inputValue && !multiple) {
+            if (creatable && !onCreate) {
+                if (getOptionFromInput) {
+                    const newOption = getOptionFromInput(inputValue.trim());
+                    onChange(newOption);
+                }
+                else {
+                    onChange(inputValue);
+                }
+            }
+            else {
+                const exactMatch = options.find(o => renderLabel(o).toLowerCase() === inputValue.toLowerCase());
+                if (exactMatch) {
+                    handleSelect(exactMatch);
+                }
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else {
+                    setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (open) {
+                    setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0);
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (open && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+                    handleSelect(filteredOptions[highlightedIndex]);
+                }
+                else if (creatable && inputValue.trim()) {
+                    if (onCreate) {
+                        handleCreate();
+                    }
+                    else if (freeSolo && getOptionFromInput) {
+                        const newOption = getOptionFromInput(inputValue.trim());
+                        if (multiple) {
+                            const currentValue = value;
+                            const isDuplicate = currentValue.some(v => renderKey(v) === renderKey(newOption));
+                            if (!isDuplicate) {
+                                onChange([...currentValue, newOption]);
+                            }
+                            setInputValue('');
+                        }
+                        else {
+                            onChange(newOption);
+                            setInputValue(renderLabel(newOption));
+                            setOpen(false);
+                        }
+                    }
+                    else if (freeSolo) {
+                        if (multiple) {
+                            const currentValue = value;
+                            const inputAsOption = inputValue;
+                            const isDuplicate = currentValue.some(v => renderLabel(v).toLowerCase() === inputValue.toLowerCase());
+                            if (!isDuplicate) {
+                                onChange([...currentValue, inputAsOption]);
+                            }
+                            setInputValue('');
+                        }
+                        else {
+                            onChange(inputValue);
+                            setOpen(false);
+                        }
+                    }
+                }
+                else if (freeSolo && inputValue && !multiple) {
+                    const exactMatch = options.find(o => renderLabel(o).toLowerCase() === inputValue.toLowerCase());
+                    if (exactMatch) {
+                        handleSelect(exactMatch);
+                    }
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setOpen(false);
+                if (inputRef.current) {
+                    inputRef.current.blur();
+                }
+                break;
+            case 'Backspace':
+                if (multiple && !inputValue && value.length > 0) {
+                    const lastTag = value[value.length - 1];
+                    handleRemoveTag(lastTag);
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    const handleClear = () => {
+        if (multiple) {
+            onChange([]);
+        }
+        else {
+            onChange(null);
+        }
+        setInputValue('');
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    useEffect(() => {
+        if (!multiple && value && !focused) {
+            setInternalInputValue(renderLabel(value));
+        }
+    }, [value, multiple, renderLabel, focused]);
+    useEffect(() => {
+        if (autoHighlight && open && filteredOptions.length > 0) {
+            setHighlightedIndex(0);
+        }
+    }, [autoHighlight, open, filteredOptions.length]);
+    useEffect(() => {
+        if (highlightedIndex < 0 || !open)
+            return;
+        const optionsContainer = dropdownRef.current?.querySelector('.options');
+        if (!optionsContainer)
+            return;
+        const highlightedOption = optionsContainer.children[highlightedIndex];
+        if (!highlightedOption)
+            return;
+        const containerRect = optionsContainer.getBoundingClientRect();
+        const optionRect = highlightedOption.getBoundingClientRect();
+        if (optionRect.bottom > containerRect.bottom) {
+            highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+        else if (optionRect.top < containerRect.top) {
+            highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+    }, [highlightedIndex, open]);
+    useEffect(() => {
+        if (!onScrollEnd || !open)
+            return;
+        const optionsContainer = dropdownRef.current?.querySelector('.options');
+        if (!optionsContainer)
+            return;
+        const handleScroll = () => {
+            if (loading)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = optionsContainer;
+            const scrollBottom = scrollHeight - scrollTop - clientHeight;
+            if (scrollBottom <= scrollEndMargin) {
+                onScrollEnd();
+            }
+        };
+        optionsContainer.addEventListener('scroll', handleScroll);
+        handleScroll();
+        return () => {
+            optionsContainer.removeEventListener('scroll', handleScroll);
+        };
+    }, [onScrollEnd, open, filteredOptions.length, loading, scrollEndMargin]);
+    const renderTags = () => {
+        if (!multiple || value.length === 0)
+            return null;
+        const tags = value;
+        const visibleTags = maxTagsToShow && tags.length > maxTagsToShow
+            ? tags.slice(0, maxTagsToShow)
+            : tags;
+        const remainingCount = maxTagsToShow && tags.length > maxTagsToShow
+            ? tags.length - maxTagsToShow
+            : 0;
+        return (_jsxs(_Fragment, { children: [visibleTags.map(tag => {
+                    if (renderTag) {
+                        return renderTag(tag, () => handleRemoveTag(tag));
+                    }
+                    return (_jsxs(Badge, { colorScheme: tagColorScheme, colorPalette: tagColorPalette, appearance: tagAppearance, children: [renderLabel(tag), !disabled && (_jsx(IconButton, { icon: "Times", type: "button", appearance: "none", size: "xs", style: { color: 'inherit' }, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!disabled)
+                                        handleRemoveTag(tag);
+                                }, "aria-label": `${t.removeTag} ${renderLabel(tag)}`, disabled: disabled, tabIndex: 0 }))] }, renderKey(tag)));
+                }), remainingCount > 0 && (_jsxs(Badge, { colorScheme: tagColorScheme, colorPalette: tagColorPalette, appearance: tagAppearance, children: ["+", remainingCount] }))] }));
+    };
+    const showClearButton = !disabled && ((!multiple && value !== null) ||
+        (multiple && value.length > 0));
+    return (_jsxs(CitricComponent, { tag: "div", component: "autocomplete", "data-citric": "autocomplete", style: maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style, className: listToClass([
+            className,
+            open && 'open',
+            focused && 'focused',
+            disabled && 'disabled',
+            multiple && 'multiple',
+        ]), ref: element, "aria-busy": loading, ...props, children: [_jsxs("header", { onClick: () => {
+                    if (disabled)
+                        return;
+                    setFocused(true);
+                    setOpen(true);
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                    }
+                }, onFocus: () => setFocused(true), tabIndex: disabled ? undefined : 0, children: [_jsxs(Row, { gap: "4px", className: "input-container", children: [multiple && renderTags(), _jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => handleInputChange(e.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, disabled: disabled, placeholder: multiple && value.length > 0 ? '' : placeholder, autoComplete: "off", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": "autocomplete-listbox" })] }), _jsxs("div", { className: "end-adornment", children: [loading && _jsx(ProgressCircular, { size: "xs", className: "loader" }), showClearButton && (_jsx(IconButton, { icon: "Times", appearance: "none", size: "sm", type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleClear();
+                                }, disabled: disabled, "aria-label": t.clear, tabIndex: 1, style: { width: '12px', height: '12px' } })), _jsx(IconButton, { icon: open ? 'ChevronUp' : 'ChevronDown', appearance: "none", size: "md", type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setOpen((prev) => !prev);
+                                }, disabled: disabled, "aria-label": open ? t.collapse : t.expand, tabIndex: 1, style: { width: '12px', height: '12px' } })] })] }), _jsx("div", { className: "dropdown-panel", ref: dropdownRef, id: "autocomplete-listbox", role: "listbox", "aria-hidden": !open, ...(open ? {} : { inert: 'true' }), children: loading && !filteredOptions.length ? (_jsx("div", { className: "message", children: loadingText || t.loading })) : filteredOptions.length === 0 && !showCreateOption ? (_jsx("div", { className: "message", children: noOptionsText || t.noOptions })) : (_jsxs("div", { className: "options", children: [showCreateOption && (_jsxs("div", { role: "option", className: "option create-option", onMouseDown: (e) => {
+                                e.preventDefault();
+                            }, onClick: handleCreate, onMouseEnter: () => setHighlightedIndex(-1), children: [_jsx("i", { "data-citric": "icon", className: "citric-icon outline Plus" }), t.addOption.replace('{value}', inputValue)] }, "create-option")), filteredOptions.map((option, index) => (_jsxs("div", { role: "option", "aria-selected": isSelected(option), className: listToClass([
+                                'option',
+                                isSelected(option) && 'selected',
+                                highlightedIndex === index && 'highlighted',
+                            ]), onMouseDown: (e) => {
+                                e.preventDefault();
+                            }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), children: [multiple && _jsx(Checkbox, { value: isSelected(option), readOnly: true }), renderOption ? renderOption(option) : renderLabel(option)] }, renderKey(option))))] })) })] }));
+});
+const dictionary = {
+    en: {
+        removeTag: 'Remove',
+        clear: 'Clear',
+        loading: 'Loading...',
+        noOptions: 'No options',
+        collapse: 'Collapse',
+        expand: 'Expand',
+        addOption: 'Add "{value}"',
+    },
+    pt: {
+        removeTag: 'Remover',
+        clear: 'Limpar',
+        loading: 'Carregando...',
+        noOptions: 'Sem opções',
+        collapse: 'Recolher',
+        expand: 'Expandir',
+        addOption: 'Adicionar "{value}"',
+    },
+};
+//# sourceMappingURL=Autocomplete.js.map