@economic/taco 0.0.1-alpha.8 → 0.0.2-alpha.0

package/dist/components/Combobox/useCombobox.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PopoverHTMLProps, PopoverStateReturn } from 'reakit/Popover';
 import { ComboboxProps } from './Combobox';
 import { ScrollableListPropsWithRef } from '../Listbox/ScrollableList';
 declare type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
@@ -8,8 +7,9 @@ declare type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
         ref: React.RefObject<HTMLInputElement>;
     };
     list: ScrollableListPropsWithRef;
-    popover: PopoverStateReturn & {
-        container: PopoverHTMLProps;
+    popover: {
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
     };
 };
 export declare const useCombobox: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data: unfilteredData, defaultValue, disabled, id: nativeId, inline, loading: __, onChange, onClick, onKeyDown, readOnly, value, ...props }: ComboboxProps, ref: React.Ref<HTMLInputElement>) => useCombobox;

package/dist/components/Listbox/Listbox.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ScrollableListItemValue, ScrollableListItem } from './ScrollableList';
-import './Listbox.css';
 import { State } from '../../types';
 export declare type ListboxItem = ScrollableListItem;
 export declare type ListboxValue = ScrollableListItemValue;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Orientation } from '../../types';
-export declare type RadioGroupItemValue = string | number | boolean | undefined;
+export declare type RadioGroupItemValue = string | number | boolean | null;
 export declare const getRadioGroupItemValueAsString: (value: RadioGroupItemValue) => string;
-export declare const findByValue: (values: RadioGroupItemValue[], valueAsString: string) => RadioGroupItemValue | undefined;
+export declare const findByValue: (values: RadioGroupItemValue[], valueAsString: string) => RadioGroupItemValue;
 export declare type RadioGroupItemProps<T = HTMLButtonElement> = Omit<React.ButtonHTMLAttributes<T>, 'children' | 'onSelect' | 'value'> & {
     /** Label for the radio group item */
     children: React.ReactNode;
@@ -33,7 +33,7 @@ interface ControlledRadioGroupProps extends RadioGroupBaseProps {
     /** Handler called when the value changes */
     onChange: (value: RadioGroupItemValue) => void;
     /** The current value (controlled) */
-    value: RadioGroupItemValue;
+    value?: RadioGroupItemValue;
 }
 export declare type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;
 export declare type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>> & {

package/dist/components/Select/Select.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ListboxProps } from '../Listbox/Listbox';
 import { ComboboxProps } from '../Combobox/Combobox';
-import './Select.css';
 export declare type SelectTexts = {
     /**
      * The text displayed when all options are selected when multiselect mode in on.
@@ -14,8 +13,6 @@ export declare type BaseSelectProps = ListboxProps & Omit<ComboboxProps, 'inline
      * All the selected values will be combined in a comma-seperated string as the value of the input.
      */
     multiselect?: boolean;
-    /** Optionally shows the icon for the selected option */
-    showSelectedIcon?: boolean;
 };
 export declare type SelectProps = BaseSelectProps & {
     /**
@@ -40,8 +37,6 @@ export declare const Select: React.ForwardRefExoticComponent<Pick<React.InputHTM
      * All the selected values will be combined in a comma-seperated string as the value of the input.
      */
     multiselect?: boolean | undefined;
-    /** Optionally shows the icon for the selected option */
-    showSelectedIcon?: boolean | undefined;
 } & {
     /**
      * Creates an editable select.

package/dist/components/Select/useSelect.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { SelectProps } from './Select';
 import { ListboxProps } from '../Listbox/Listbox';
-import { PopoverStateReturn, PopoverHTMLProps } from 'reakit/Popover';
 declare type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
     button: React.ButtonHTMLAttributes<HTMLButtonElement>;
     listbox: ListboxProps;
-    popover: PopoverStateReturn & {
-        container: PopoverHTMLProps;
+    input: any;
+    popover: {
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
     };
     text: string | JSX.Element;
     more?: number;
 };
-export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, disabled, emptyValue, id: nativeId, multiselect, onClick, readOnly, showSelectedIcon, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
+export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, defaultValue, disabled, emptyValue, id: nativeId, multiselect, onClick, onChange, readOnly, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
 export {};

package/dist/esm/index.css

@@ -357,20 +357,11 @@
     @apply font-semibold;
 }
 
-[data-taco='scrollable-list'][disabled] {
-    @apply pointer-events-none;
-}
-
-[data-taco='scrollable-list'][disabled],
-[data-taco='scrollable-list'][readonly] {
-    @apply cursor-not-allowed;
-}
-
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
-    @apply pl-4 border-b-2 border-grey-light; /* Listbox max-height is dependant on this border-bottom-width value! */
+    @apply border-grey-light border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
 
-[data-taco='scrollable-list'] li [data-taco='icon'] {
+[data-taco='scrollable-list'] li > [data-taco='icon'] {
     @apply mr-2;
 }
 
@@ -406,29 +397,19 @@
 [data-taco='scrollable-list'] li.yt-list__empty,
 [data-taco='scrollable-list'] li.yt-list__empty:hover,
 [data-taco='scrollable-list'] li.yt-list__empty:focus {
-    @apply bg-white text-grey-darkest italic overflow-hidden;
+    @apply text-grey-darkest overflow-hidden bg-white italic;
 }
 
 [data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
     @apply mr-2 mt-2 h-5 w-5 opacity-75;
 }
 
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button {
-    @apply yt-transparent text-grey-darkest border-0 shadow-none;
-}
-
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:hover,
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:active,
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:focus {
-    @apply yt-transparent text-black;
-}
-
-.yt-combobox [role='dialog'] {
+[data-taco='combobox'] [role='dialog'] {
     @apply z-50;
 }
 
-.yt-combobox > [aria-expanded='true'] + [role='dialog'] > ul,
-.yt-combobox > [aria-expanded='true'] + [role='dialog'] > ul:hover {
+[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
+[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
     @apply border-blue;
 }
 
@@ -453,22 +434,6 @@
     min-height: 0;
 }
 
-.yt-listbox {
-    @apply relative inline-flex w-full bg-white;
-}
-
-.yt-listbox > input {
-    display: none;
-}
-
-.yt-listbox [data-taco='scrollable-list'] {
-    max-height: calc(12rem + 2px); /* (6 * option height) + listbox border */
-}
-
-.yt-listbox [data-taco='scrollable-list'].yt-list--multiselect {
-    max-height: calc(12rem + 2px + 2px); /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
-}
-
 .yt-navigation__item a,
 .yt-navigation__item .yt-navigation__item__postfix {
     @apply text-black;
@@ -508,43 +473,6 @@
     @apply border-white text-white;
 }
 
-[data-taco='select'] > button.yt-input {
-    @apply relative inline-flex w-full items-center px-0;
-}
-
-[data-taco='select'] > button.yt-input > span:first-child {
-    @apply flex-grow truncate pl-2 text-left;
-}
-
-[data-taco='select'] > button.yt-input .yt-icon {
-    @apply pointer-events-none;
-}
-
-[data-taco='select'] > button.yt-input[disabled] .yt-icon {
-    @apply text-grey-dark;
-}
-
-[data-taco='select'][data-taco='select']--readonly > button.yt-input {
-    @apply cursor-not-allowed;
-}
-
-[data-taco='select'] > button.yt-input[aria-expanded='true'],
-[data-taco='select'] > button.yt-input[aria-expanded='true']:hover {
-    @apply border-blue;
-}
-
-[data-taco='select'] > button.yt-input[aria-expanded='true'] + .yt-listbox {
-    @apply mt-1 flex;
-}
-
-[data-taco='select'] [role='dialog'] {
-    @apply z-50;
-}
-
-[data-taco='select'] .yt-list {
-    max-width: theme('spacing.96');
-}
-
 .yt-toast:hover [data-taco='progress-bar'] {
     animation-play-state: paused;
 }

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

@@ -1,15 +1,14 @@
 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 { PopoverDisclosure, Popover } from 'reakit/Popover';
 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"],
-    _excluded2 = ["container"];
+var _excluded = ["className", "style"];
 var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
       style = props.style,
@@ -21,9 +20,6 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       popover = _useCombobox.popover,
       list = _useCombobox.list;
 
-  var container = popover.container,
-      base = _objectWithoutPropertiesLoose(popover, _excluded2);
-
   var internalRef = useRef(null);
   var selectDimensions = useBoundingClientRectListener(internalRef);
   var className = cn('inline-flex relative', {
@@ -33,28 +29,36 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     className: className,
     "data-taco": "combobox",
     style: style
-  }, createElement(PopoverDisclosure, Object.assign({}, base, {
+  }, createElement(Root, Object.assign({}, popover), createElement(Anchor, {
+    asChild: true,
     ref: internalRef
-  }), function (_ref) {
-    var ref = _ref.ref;
-    return createElement("span", Object.assign({}, combobox, {
-      className: "w-full",
-      ref: ref
-    }), createElement(Input, Object.assign({}, input, {
-      autoComplete: "off",
-      button: props.inline ? createElement(IconButton, {
-        icon: popover.visible ? 'chevron-up' : 'chevron-down',
-        onClick: popover.toggle,
-        tabIndex: -1
-      }) : props.button
-    })));
-  }), !otherProps.disabled && createElement(Popover, Object.assign({}, base, container), createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('border-blue w-auto max-w-[theme(spacing.96)] max-h-[calc(12rem+2px)]'),
+  }, 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.visible ? 0 : -1
-  }))));
+    tabIndex: popover.open ? 0 : -1
+  })))));
 });
 
 export { Combobox };

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Popover as BasePopover, PopoverDisclosure } from 'reakit/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    /** 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 { container, ...base } = popover;\n    const internalRef = React.useRef<HTMLButtonElement>(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            <PopoverDisclosure {...base} ref={internalRef}>\n                {({ ref }) => (\n                    <span {...combobox} className=\"w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        icon={popover.visible ? 'chevron-up' : 'chevron-down'}\n                                        onClick={popover.toggle}\n                                        tabIndex={-1}\n                                    />\n                                ) : (\n                                    props.button\n                                )\n                            }\n                        />\n                    </span>\n                )}\n            </PopoverDisclosure>\n            {!otherProps.disabled && (\n                <BasePopover {...base} {...container}>\n                    <ScrollableList\n                        {...list}\n                        className={cn('border-blue w-auto max-w-[theme(spacing.96)] max-h-[calc(12rem+2px)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.visible ? 0 : -1}\n                    />\n                </BasePopover>\n            )}\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","style","otherProps","useCombobox","combobox","input","popover","list","container","base","internalRef","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverDisclosure","Input","autoComplete","button","IconButton","icon","visible","onClick","toggle","tabIndex","disabled","BasePopover","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;;IA8CaA,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,MAAQC,SAAR,GAA+BF,OAA/B,CAAQE,SAAR;AAAA,MAAsBC,IAAtB,iCAA+BH,OAA/B;;AACA,MAAMI,WAAW,GAAGd,MAAA,CAAgC,IAAhC,CAApB;AACA,MAAMe,gBAAgB,GAAGC,6BAA6B,CAACF,WAAD,CAAtD;AACA,MAAMV,SAAS,GAAGa,EAAE,CAChB,sBADgB,EAEhB;AACI,2BAAuBhB,KAAK,CAACiB;AADjC,GAFgB,EAKhBf,iBALgB,CAApB;AAQA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;iBAAqB;AAAWC,IAAAA,KAAK,EAAEA;GAAxD,EACIL,aAAA,CAACmB,iBAAD,oBAAuBN;AAAMX,IAAAA,GAAG,EAAEY;IAAlC,EACK;AAAA,QAAGZ,GAAH,QAAGA,GAAH;AAAA,WACGF,aAAA,OAAA,oBAAUQ;AAAUJ,MAAAA,SAAS,EAAC;AAASF,MAAAA,GAAG,EAAEA;MAA5C,EACIF,aAAA,CAACoB,KAAD,oBACQX;AACJY,MAAAA,YAAY,EAAC;AACbC,MAAAA,MAAM,EACFrB,KAAK,CAACiB,MAAN,GACIlB,aAAA,CAACuB,UAAD;AACIC,QAAAA,IAAI,EAAEd,OAAO,CAACe,OAAR,GAAkB,YAAlB,GAAiC;AACvCC,QAAAA,OAAO,EAAEhB,OAAO,CAACiB;AACjBC,QAAAA,QAAQ,EAAE,CAAC;OAHf,CADJ,GAOI3B,KAAK,CAACqB;MAXlB,CADJ,CADH;AAAA,GADL,CADJ,EAsBK,CAAChB,UAAU,CAACuB,QAAZ,IACG7B,aAAA,CAAC8B,OAAD,oBAAiBjB,MAAUD,UAA3B,EACIZ,aAAA,CAAC+B,cAAD,oBACQpB;AACJP,IAAAA,SAAS,EAAEa,EAAE,CAAC,sEAAD;AACbZ,IAAAA,KAAK,EAAE;AAAE2B,MAAAA,QAAQ,EAAEjB,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAEkB;AAA9B;AACPL,IAAAA,QAAQ,EAAElB,OAAO,CAACe,OAAR,GAAkB,CAAlB,GAAsB,CAAC;IAJrC,CADJ,CAvBR,CADJ;AAmCH,CAjDuB;;;;"}
+{"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    /** 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":";;;;;;;;;;;IA8CaA,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/src/components/Combobox/useCombobox.js

@@ -1,8 +1,7 @@
-import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useRef, useMemo, useState, useEffect } from 'react';
+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 { usePopoverState } from 'reakit/Popover';
 import keycode from 'keycode';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
@@ -15,8 +14,7 @@ var convertToInputValue = function convertToInputValue(value) {
 };
 
 var useCombobox = function useCombobox(_ref, ref) {
-  var ariaLabel = _ref['aria-label'],
-      ariaLabelledBy = _ref['aria-labelledby'],
+  var ariaLabelledBy = _ref['aria-labelledby'],
       _ref$data = _ref.data,
       unfilteredData = _ref$data === void 0 ? [] : _ref$data,
       defaultValue = _ref.defaultValue,
@@ -31,17 +29,18 @@ var useCombobox = function useCombobox(_ref, ref) {
 
   var inputRef = useProxiedRef(ref);
   var listRef = useRef(null);
-  var popover = usePopoverState({
-    gutter: 4,
-    placement: 'bottom-start'
-  });
+
+  var _React$useState = useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
   var listId = useMemo(function () {
     return v4();
   }, []);
 
-  var _React$useState = useState(convertToInputValue(value)),
-      inputValue = _React$useState[0],
-      setInputValue = _React$useState[1];
+  var _React$useState2 = useState(convertToInputValue(value)),
+      inputValue = _React$useState2[0],
+      setInputValue = _React$useState2[1];
 
   var shouldFilterData = !inline || inline && inputValue !== convertToInputValue(value);
   var flattenedData = useFlattenedData(unfilteredData);
@@ -49,9 +48,9 @@ var useCombobox = function useCombobox(_ref, ref) {
     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$useState2 = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
-      currentIndex = _React$useState2[0],
-      setCurrentIndex = _React$useState2[1];
+  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) {
@@ -99,20 +98,20 @@ var useCombobox = function useCombobox(_ref, ref) {
     if (inputValue && data.length && !isCurrentValue) {
       setCurrentIndex(0);
 
-      if (!popover.visible) {
-        popover.show();
+      if (!open) {
+        setOpen(true);
       }
     } else {
-      popover.hide();
+      setOpen(false);
     }
   }, [inputValue, data]);
   useEffect(function () {
-    if (popover.visible) {
+    if (open) {
       setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
     } else {
       setCurrentIndex(undefined);
     }
-  }, [popover.visible]); // event handlers
+  }, [open]); // event handlers
 
   var handleInputBlur = function handleInputBlur(event) {
     event.persist();
@@ -144,8 +143,8 @@ var useCombobox = function useCombobox(_ref, ref) {
   };
 
   var handleInputClick = function handleInputClick(event) {
-    if (inline || !popover.visible && inputValue && data.length) {
-      popover.show();
+    if (inline || !open && inputValue && data.length) {
+      setOpen(true);
     }
 
     if (onClick) {
@@ -167,7 +166,7 @@ var useCombobox = function useCombobox(_ref, ref) {
         {
           event.preventDefault();
           setInputValue(convertToInputValue(value));
-          popover.hide();
+          setOpen(false);
           return;
         }
 
@@ -179,7 +178,7 @@ var useCombobox = function useCombobox(_ref, ref) {
           }
 
           setCurrentValue(currentIndex);
-          popover.hide();
+          setOpen(false);
           return;
         }
 
@@ -188,7 +187,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       case keycode('home'):
       case keycode('end'):
         {
-          if (popover.visible) {
+          if (open) {
             event.preventDefault();
           }
 
@@ -201,12 +200,12 @@ var useCombobox = function useCombobox(_ref, ref) {
       listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
     }
 
-    if (inline && !popover.visible) {
+    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);
-        popover.show();
+        setOpen(true);
       }
     }
 
@@ -223,11 +222,11 @@ var useCombobox = function useCombobox(_ref, ref) {
   var handleListboxClick = function handleListboxClick(event, index) {
     event.preventDefault();
     setCurrentValue(index);
-    popover.hide();
+    setOpen(false);
   };
 
   var combobox = {
-    'aria-expanded': popover.visible,
+    'aria-expanded': open,
     'aria-owns': listId,
     'aria-haspopup': 'listbox',
     role: 'combobox'
@@ -268,15 +267,10 @@ var useCombobox = function useCombobox(_ref, ref) {
     combobox: combobox,
     input: input,
     list: list,
-    popover: _extends({}, popover, {
-      visible: !data.length ? false : popover.visible,
-      container: {
-        tabIndex: -1,
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy,
-        unstable_initialFocusRef: inputRef
-      }
-    })
+    popover: {
+      open: open,
+      onOpenChange: setOpen
+    }
   };
 };
 

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

@@ -1 +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 { PopoverHTMLProps, PopoverStateReturn, usePopoverState } from 'reakit/Popover';\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 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: PopoverStateReturn & { container: PopoverHTMLProps };\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        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 popover = usePopoverState({ gutter: 4, placement: 'bottom-start' });\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !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    // 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 (!popover.visible) {\n                popover.show();\n            }\n        } else {\n            popover.hide();\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (popover.visible) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [popover.visible]);\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 || (!popover.visible && inputValue && data.length)) {\n            popover.show();\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                popover.hide();\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                popover.hide();\n                return;\n            }\n\n            case keycode('up'):\n            case keycode('down'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (popover.visible) {\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 && !popover.visible) {\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                popover.show();\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        popover.hide();\n    };\n\n    const combobox = {\n        'aria-expanded': popover.visible,\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            ...popover,\n            visible: !data.length ? false : popover.visible,\n            container: {\n                tabIndex: -1,\n                'aria-label': ariaLabel,\n                'aria-labelledby': ariaLabelledBy,\n                unstable_initialFocusRef: inputRef,\n            },\n        },\n    };\n};\n"],"names":["convertToInputValue","value","String","useCombobox","ref","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","readOnly","props","inputRef","useProxiedRef","listRef","React","popover","usePopoverState","gutter","placement","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","visible","show","hide","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","container","unstable_initialFocusRef"],"mappings":"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"}
+{"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 { 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 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        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 = !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    // 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":["convertToInputValue","value","String","useCombobox","ref","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","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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"}