@economic/taco 0.0.3-alpha.0 → 0.0.7-alpha.0

package/dist/esm/components/Calendar/Calendar.js

@@ -0,0 +1,150 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useState, useEffect, createElement, memo } from 'react';
+import cn from 'classnames';
+import { useLocalization } from '../Provider/Provider.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import ReactDayPicker from 'react-day-picker';
+
+var _excluded = ["onChange", "value"];
+
+var renderDay = function renderDay(day, modifiers) {
+  return modifiers.disabled ? createElement("span", {
+    className: "dot"
+  }) : day.getDate();
+};
+
+var thisYear = /*#__PURE__*/new Date().getFullYear();
+var years = [];
+
+for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+  years.push(i);
+}
+
+var Navbar = /*#__PURE__*/memo(function (_ref) {
+  var onMonthChange = _ref.onMonthChange,
+      onNextClick = _ref.onNextClick,
+      onPreviousClick = _ref.onPreviousClick,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? new Date() : _ref$value;
+
+  var _useLocalization = useLocalization(),
+      _useLocalization$text = _useLocalization.texts.calendar,
+      actions = _useLocalization$text.actions,
+      months = _useLocalization$text.months;
+
+  var handleChange = function handleChange(event) {
+    var _event$target$form = event.target.form,
+        year = _event$target$form.year,
+        month = _event$target$form.month;
+    onMonthChange(new Date(year.value, month.value));
+  };
+
+  return createElement("div", {
+    className: "flex justify-between items-center mb-2"
+  }, createElement("form", {
+    className: "inline-flex space-x-1"
+  }, createElement("select", {
+    className: "h-8 px-2",
+    name: "month",
+    onChange: handleChange,
+    value: value.getMonth()
+  }, months.map(function (month, i) {
+    return createElement("option", {
+      value: i
+    }, month);
+  })), createElement("select", {
+    className: "h-8 px-2",
+    name: "year",
+    onChange: handleChange,
+    value: value.getFullYear()
+  }, years.map(function (year) {
+    return createElement("option", {
+      value: year
+    }, String(year));
+  }))), createElement("div", null, createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-left",
+    "aria-label": actions.previousMonth,
+    onClick: function onClick() {
+      return onPreviousClick();
+    },
+    rounded: true
+  }), createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-right",
+    "aria-label": actions.nextMonth,
+    onClick: function onClick() {
+      return onNextClick();
+    },
+    rounded: true
+  })));
+});
+var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
+  var handleChange = props.onChange,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useLocalization2 = useLocalization(),
+      locale = _useLocalization2.locale,
+      texts = _useLocalization2.texts;
+
+  var _React$useState = useState(value !== null && value !== void 0 ? value : new Date()),
+      visibleMonth = _React$useState[0],
+      setVisibleMonth = _React$useState[1];
+
+  useEffect(function () {
+    if (visibleMonth !== value) {
+      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    }
+  }, [value]);
+
+  var handleDayClick = function handleDayClick(date, modifiers, event) {
+    if (modifiers.outside || modifiers.disabled) {
+      return;
+    }
+
+    handleChange(date, event);
+  };
+
+  var handleCalendarClickToday = function handleCalendarClickToday() {
+    var today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
+
+    today.setHours(12);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    handleChange(today);
+  };
+
+  var className = cn('flex bg-white text-xs p-4', otherProps.className);
+  return createElement("div", {
+    "data-taco": "calendar"
+  }, createElement(ReactDayPicker, Object.assign({}, otherProps, {
+    className: className,
+    month: visibleMonth,
+    selectedDays: value,
+    locale: locale.substring(0, 2),
+    firstDayOfWeek: 1,
+    months: texts.calendar.months,
+    weekdaysShort: texts.calendar.weekdaysShort,
+    navbarElement: function navbarElement(navProps) {
+      return createElement(Navbar, Object.assign({}, navProps, {
+        onMonthChange: setVisibleMonth,
+        value: visibleMonth
+      }));
+    },
+    onDayClick: handleDayClick,
+    onMonthChange: setVisibleMonth,
+    onTodayButtonClick: handleCalendarClickToday,
+    captionElement: function captionElement() {
+      return null;
+    },
+    todayButton: texts.calendar.actions.today,
+    showOutsideDays: true,
+    renderDay: renderDay,
+    numberOfMonths: 1,
+    ref: ref
+  })));
+});
+
+export { Calendar };
+//# sourceMappingURL=Calendar.js.map

package/dist/esm/components/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Provider';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n};\n\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\n    modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    showYearControls?: boolean;\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"flex justify-between items-center mb-2\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option value={i}>{month}</option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option value={year}>{String(year)}</option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={() => onPreviousClick()}\n                        rounded\n                    />\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={() => onNextClick()}\n                        rounded\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-4', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                showOutsideDays\n                renderDay={renderDay}\n                numberOfMonths={1}\n                ref={ref}\n            />\n        </div>\n    );\n});\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","useLocalization","texts","calendar","actions","months","handleChange","event","target","form","year","month","name","onChange","getMonth","map","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"mappings":"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"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,58 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { Root, Indicator } from '@radix-ui/react-checkbox';
+
+var _excluded = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
+var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  var checked = props.checked,
+      highlighted = props.highlighted,
+      indeterminate = props.indeterminate,
+      invalid = props.invalid,
+      label = props.label,
+      onChange = props.onChange,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('h-5 w-5 border rounded text-sm', {
+    'mr-2': !!label,
+    'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
+    'border-grey text-blue-light cursor-not-allowed': props.disabled,
+    'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
+    'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
+  }, props.className);
+  var handleChange;
+
+  if (onChange) {
+    handleChange = function handleChange(checked) {
+      return onChange(checked === 'indeterminate' ? false : checked);
+    };
+  }
+
+  var element = createElement(Root, Object.assign({}, otherProps, {
+    "data-taco": "checkbox",
+    checked: indeterminate ? 'indeterminate' : checked,
+    className: className,
+    onCheckedChange: handleChange,
+    ref: ref
+  }), createElement(Indicator, {
+    className: "flex h-full w-full"
+  }, createElement(Icon, {
+    name: indeterminate ? 'line' : 'tick',
+    className: "!h-full !w-full"
+  })));
+
+  if (label) {
+    var labelClassName = cn('flex items-center cursor-pointer', {
+      'cursor-not-allowed text-grey-dark': props.disabled
+    });
+    return createElement("label", {
+      className: labelClassName
+    }, element, label);
+  }
+
+  return element;
+});
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'h-5 w-5 border rounded text-sm',\n        {\n            'mr-2': !!label,\n            'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n            'border-grey text-blue-light cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n            'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n        },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            ref={ref}\n        >\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,gCADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFvF;AAGI,sDAAkDL,KAAK,CAACW,QAH5D;AAII,oEAAgER,WAJpE;AAKI,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALjF,GAFgB,EAShBX,KAAK,CAACS,SATU,CAApB;AAYA,MAAIG,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCV,KAAK,CAACW;AADe,KAArC,CAAzB;AAIA,WACIZ,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}

package/dist/esm/components/Combobox/Combobox.js

@@ -0,0 +1,65 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useRef, createElement } from 'react';
+import cn from 'classnames';
+import { Root, Anchor, Content } from '@radix-ui/react-popover';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Input } from '../Input/Input.js';
+import { ScrollableList } from '../Listbox/ScrollableList.js';
+import { useCombobox } from './useCombobox.js';
+import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
+
+var _excluded = ["className", "style"];
+var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
+  var externalClassName = props.className,
+      style = props.style,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useCombobox = useCombobox(otherProps, ref),
+      combobox = _useCombobox.combobox,
+      input = _useCombobox.input,
+      popover = _useCombobox.popover,
+      list = _useCombobox.list;
+
+  var internalRef = useRef(null);
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative', {
+    'yt-combobox--inline': props.inline
+  }, externalClassName);
+  return createElement("span", {
+    className: className,
+    "data-taco": "combobox",
+    style: style
+  }, createElement(Root, Object.assign({}, popover), createElement(Anchor, {
+    asChild: true,
+    ref: internalRef
+  }, createElement("div", Object.assign({}, combobox, {
+    className: "inline w-full",
+    ref: ref
+  }), createElement(Input, Object.assign({}, input, {
+    autoComplete: "off",
+    button: props.inline ? createElement(IconButton, {
+      appearance: "discrete",
+      className: "focus:!border-none focus:!shadow-none active:!border-none",
+      icon: popover.open ? 'chevron-up' : 'chevron-down',
+      onClick: function onClick() {
+        return popover.onOpenChange(true);
+      },
+      tabIndex: -1
+    }) : props.button
+  })))), createElement(Content, {
+    align: "start",
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
+      event.preventDefault();
+    },
+    sideOffset: 4
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    className: cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.open ? 0 : -1
+  })))));
+});
+
+export { Combobox };
+//# sourceMappingURL=Combobox.js.map

package/dist/esm/components/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport { State } from '../../types';\nimport './Combobox.css';\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\nexport type ComboboxProps = Omit<InputProps, 'defaultValue' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline?: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** State will change the style of the combobox **/\n    state?: State;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, style, ...otherProps } = props;\n    const { combobox, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        className=\"focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => popover.onOpenChange(true)}\n                                        tabIndex={-1}\n                                    />\n                                ) : (\n                                    props.button\n                                )\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Content\n                    align=\"start\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}\n                >\n                    <ScrollableList\n                        {...list}\n                        className={cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","style","otherProps","useCombobox","combobox","input","popover","list","internalRef","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","button","IconButton","appearance","icon","open","onClick","onOpenChange","tabIndex","align","onOpenAutoFocus","event","preventDefault","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;IAgDaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAmBC,iBAAnB,GAA+DF,KAA/D,CAAQG,SAAR;AAAA,MAAsCC,KAAtC,GAA+DJ,KAA/D,CAAsCI,KAAtC;AAAA,MAAgDC,UAAhD,iCAA+DL,KAA/D;;AACA,qBAA2CM,WAAW,CAACD,UAAD,EAAaJ,GAAb,CAAtD;AAAA,MAAQM,QAAR,gBAAQA,QAAR;AAAA,MAAkBC,KAAlB,gBAAkBA,KAAlB;AAAA,MAAyBC,OAAzB,gBAAyBA,OAAzB;AAAA,MAAkCC,IAAlC,gBAAkCA,IAAlC;;AACA,MAAMC,WAAW,GAAGZ,MAAA,CAA6B,IAA7B,CAApB;AACA,MAAMa,gBAAgB,GAAGC,6BAA6B,CAACF,WAAD,CAAtD;AACA,MAAMR,SAAS,GAAGW,EAAE,CAChB,sBADgB,EAEhB;AACI,2BAAuBd,KAAK,CAACe;AADjC,GAFgB,EAKhBb,iBALgB,CAApB;AAQA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;iBAAqB;AAAWC,IAAAA,KAAK,EAAEA;GAAxD,EACIL,aAAA,CAACiB,IAAD,oBAA2BP,QAA3B,EACIV,aAAA,CAACiB,MAAD;AAAyBC,IAAAA,OAAO;AAAChB,IAAAA,GAAG,EAAEU;GAAtC,EACIZ,aAAA,MAAA,oBAASQ;AAAUJ,IAAAA,SAAS,EAAC;AAAgBF,IAAAA,GAAG,EAAEA;IAAlD,EACIF,aAAA,CAACmB,KAAD,oBACQV;AACJW,IAAAA,YAAY,EAAC;AACbC,IAAAA,MAAM,EACFpB,KAAK,CAACe,MAAN,GACIhB,aAAA,CAACsB,UAAD;AACIC,MAAAA,UAAU,EAAC;AACXnB,MAAAA,SAAS,EAAC;AACVoB,MAAAA,IAAI,EAAEd,OAAO,CAACe,IAAR,GAAe,YAAf,GAA8B;AACpCC,MAAAA,OAAO,EAAE;AAAA,eAAMhB,OAAO,CAACiB,YAAR,CAAqB,IAArB,CAAN;AAAA;AACTC,MAAAA,QAAQ,EAAE,CAAC;KALf,CADJ,GASI3B,KAAK,CAACoB;IAblB,CADJ,CADJ,CADJ,EAsBIrB,aAAA,CAACiB,OAAD;AACIY,IAAAA,KAAK,EAAC;AACNC,IAAAA,eAAe,EAAE,yBAAAC,KAAK;AAClBA,MAAAA,KAAK,CAACC,cAAN;AACH;AACDC,IAAAA,UAAU,EAAE;GALhB,EAOIjC,aAAA,CAACkC,cAAD,oBACQvB;AACJP,IAAAA,SAAS,EAAEW,EAAE,CAAC,sEAAD;AACbV,IAAAA,KAAK,EAAE;AAAE8B,MAAAA,QAAQ,EAAEtB,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAEuB;AAA9B;AACPR,IAAAA,QAAQ,EAAElB,OAAO,CAACe,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CAtBJ,CADJ,CADJ;AAyCH,CAtDuB;;;;"}

package/dist/esm/components/Combobox/useCombobox.js

@@ -0,0 +1,290 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { v4 } from 'uuid';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import keycode from 'keycode';
+import debounce from 'lodash-es/debounce';
+import { getId } from '../Listbox/ScrollableList.js';
+import { createCustomKeyboardEvent } from '../../utils/input.js';
+import { useFlattenedData, filterData, getIndexFromValue, setInputValueByRef, findByValue, sanitizeItem, getOptionParents } from '../Listbox/util.js';
+
+var _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var debouncer = /*#__PURE__*/debounce(function (f) {
+  return f();
+}, 200);
+
+var convertToInputValue = function convertToInputValue(value) {
+  return String(value !== null && value !== void 0 ? value : '');
+};
+
+var useCombobox = function useCombobox(_ref, ref) {
+  var ariaLabelledBy = _ref['aria-labelledby'],
+      _ref$data = _ref.data,
+      unfilteredData = _ref$data === void 0 ? [] : _ref$data,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      inline = _ref.inline,
+      onChange = _ref.onChange,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      onSearch = _ref.onSearch,
+      readOnly = _ref.readOnly,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var inputRef = useProxiedRef(ref);
+  var listRef = useRef(null);
+
+  var _React$useState = useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var listId = useMemo(function () {
+    return v4();
+  }, []);
+
+  var _React$useState2 = useState(convertToInputValue(value)),
+      inputValue = _React$useState2[0],
+      setInputValue = _React$useState2[1];
+
+  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
+  var flattenedData = useFlattenedData(unfilteredData);
+  var data = useMemo(function () {
+    return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
+  }, [shouldFilterData, inputValue, flattenedData]); // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
+
+  var _React$useState3 = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
+      currentIndex = _React$useState3[0],
+      setCurrentIndex = _React$useState3[1];
+
+  var setInputValueByIndex = function setInputValueByIndex(index) {
+    if (index !== undefined) {
+      var option = data[index];
+
+      if (option && !option.disabled) {
+        setInputValueByRef(inputRef.current, option.value, 'focusout');
+      }
+    }
+  };
+
+  var setCurrentValue = function setCurrentValue(index) {
+    if (index === undefined) {
+      return;
+    }
+
+    var option = data[index]; // if the selected option is not already selected, trigger blur event
+
+    if (option.value !== value) {
+      setInputValueByIndex(index);
+    } else {
+      // if the selected option is already selected, refill input with its value
+      setInputValue(convertToInputValue(value));
+    }
+  }; // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set
+
+
+  useEffect(function () {
+    if (defaultValue && !value) {
+      setInputValueByIndex(getIndexFromValue(data, defaultValue));
+    }
+  }, [data]); // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
+
+  useEffect(function () {
+    if (value !== undefined && value !== inputValue) {
+      setInputValue(convertToInputValue(value));
+    }
+  }, [value]);
+  useEffect(function () {
+    if (onSearch) {
+      debouncer(function () {
+        onSearch(inputValue);
+      });
+    }
+  }, [inputValue]); // show listbox based on input value
+
+  useEffect(function () {
+    // don't show the popover if the internal (input) value already is the current value
+    // this prevents the popover showing after selecting a value or pressing escape
+    var isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
+
+    if (inputValue && data.length && !isCurrentValue) {
+      setCurrentIndex(0);
+
+      if (!open) {
+        setOpen(true);
+      }
+    } else {
+      setOpen(false);
+    }
+  }, [inputValue, data]);
+  useEffect(function () {
+    if (open) {
+      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
+    } else {
+      setCurrentIndex(undefined);
+    }
+  }, [open]); // event handlers
+
+  var handleInputBlur = function handleInputBlur(event) {
+    event.persist();
+
+    if (event.relatedTarget === listRef.current) {
+      event.preventDefault();
+      return;
+    }
+
+    if (onChange && event.target.value !== value) {
+      var item = findByValue(flattenedData, event.target.value);
+      event.detail = sanitizeItem(item);
+      var parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
+
+      if (parents !== null && parents.length > 0) {
+        event.detail.parents = parents;
+      }
+
+      onChange(event);
+    }
+
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  };
+
+  var handleInputChange = function handleInputChange(event) {
+    setInputValue(event.target.value);
+  };
+
+  var handleInputClick = function handleInputClick(event) {
+    if (inline || !open && inputValue && data.length) {
+      setOpen(true);
+    }
+
+    if (onClick) {
+      event.persist();
+      onClick(event);
+    }
+  };
+
+  var handleInputKeyDown = function handleInputKeyDown(event) {
+    event.persist();
+
+    switch (event.keyCode) {
+      case keycode('backspace'):
+        {
+          return;
+        }
+
+      case keycode('escape'):
+        {
+          event.preventDefault();
+          setInputValue(convertToInputValue(value));
+          setOpen(false);
+          return;
+        }
+
+      case keycode('tab'):
+      case keycode('enter'):
+        {
+          if (event.keyCode !== keycode('tab')) {
+            event.preventDefault();
+          }
+
+          setCurrentValue(currentIndex);
+          setOpen(false);
+          return;
+        }
+
+      case keycode('up'):
+      case keycode('down'):
+      case keycode('home'):
+      case keycode('end'):
+        {
+          if (open) {
+            event.preventDefault();
+          }
+
+          break;
+        }
+    } // we aren't focused on the list, so manually forward the keydown event to it
+
+
+    if (listRef.current) {
+      listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
+    }
+
+    if (inline && !open) {
+      if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+        event.preventDefault();
+        var initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
+        setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
+        setOpen(true);
+      }
+    }
+
+    if (!event.isDefaultPrevented() && onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+
+  var handleListboxChange = function handleListboxChange(index) {
+    setCurrentIndex(index);
+  };
+
+  var handleListboxClick = function handleListboxClick(event, index) {
+    event.preventDefault();
+    setCurrentValue(index);
+    setOpen(false);
+  };
+
+  var combobox = {
+    'aria-expanded': open,
+    'aria-owns': listId,
+    'aria-haspopup': 'listbox',
+    role: 'combobox'
+  };
+
+  var input = _extends({}, props, {
+    'aria-controls': listId,
+    // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions
+    // are related to the string that is present in the textbox
+    'aria-autocomplete': 'list',
+    // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element
+    'aria-activedescendant': currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,
+    'aria-labelledby': ariaLabelledBy,
+    disabled: disabled,
+    onBlur: !disabled && !readOnly ? handleInputBlur : undefined,
+    onChange: !disabled && !readOnly ? handleInputChange : undefined,
+    onClick: !disabled && !readOnly ? handleInputClick : undefined,
+    onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,
+    readOnly: readOnly,
+    ref: inputRef,
+    type: 'text',
+    value: inputValue || ''
+  });
+
+  var list = {
+    'aria-labelledby': ariaLabelledBy,
+    data: data,
+    disabled: disabled,
+    id: listId,
+    onChange: handleListboxChange,
+    onClick: handleListboxClick,
+    ref: listRef,
+    scrollOnFocus: false,
+    tabIndex: -1,
+    value: currentIndex
+  };
+  return {
+    combobox: combobox,
+    input: input,
+    list: list,
+    popover: {
+      open: open,
+      onOpenChange: setOpen
+    }
+  };
+};
+
+export { useCombobox };
+//# sourceMappingURL=useCombobox.js.map

package/dist/esm/components/Combobox/useCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: ComboboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('up'):\n            case keycode('down'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue || '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ref","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","onSearch","readOnly","props","inputRef","useProxiedRef","listRef","React","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","popover","onOpenChange"],"mappings":"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"}