@economic/taco 0.0.25-alpha.0 → 0.0.26-alpha.8

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

@@ -2,25 +2,32 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '.
 import { forwardRef, useRef, createElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Provider.js';
 import { Root, Anchor, Content } from '@radix-ui/react-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"];
+var _excluded = ["className", "dialog", "style"];
 var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
+      dialog = props.dialog,
       style = props.style,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
+      button = _useCombobox.button,
       input = _useCombobox.input,
       popover = _useCombobox.popover,
       list = _useCombobox.list;
 
   var internalRef = useRef(null);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
   var selectDimensions = useBoundingClientRectListener(internalRef);
   var className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
@@ -45,7 +52,19 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
         return popover.onOpenChange(true);
       },
       tabIndex: -1
-    }) : props.button
+    }) : dialog ? createElement(IconButton, {
+      icon: "list-search",
+      disabled: props.readOnly || props.disabled,
+      dialog: dialog,
+      onFocus: function onFocus() {
+        var _input$ref$current;
+
+        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
+      },
+      ref: button.ref,
+      tabIndex: -1,
+      tooltip: texts.combobox.tooltip
+    }) : undefined
   })))), createElement(Content, {
     align: "start",
     onOpenAutoFocus: function onOpenAutoFocus(event) {

package/dist/esm/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 * 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=\"!border-l-0 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;;;;"}
+{"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 './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | '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    /** 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    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\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}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\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=\"!border-l-0 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                                ) : dialog ? (\n                                    <IconButton\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={() => {\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\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","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","tabIndex","disabled","readOnly","onFocus","current","focus","tooltip","undefined","align","onOpenAutoFocus","event","preventDefault","sideOffset","ScrollableList","minWidth","width"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ 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 _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
 var debouncer = /*#__PURE__*/debounce(function (f) {
   return f();
 }, 200);
@@ -33,6 +33,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var inputRef = useProxiedRef(ref);
+  var buttonRef = useRef(null);
   var listRef = useRef(null);
 
   var _React$useState = useState(false),
@@ -194,8 +195,18 @@ var useCombobox = function useCombobox(_ref, ref) {
           return;
         }
 
-      case keycode('up'):
       case keycode('down'):
+        if (open) {
+          event.preventDefault();
+        } else {
+          if (!inline && buttonRef.current) {
+            buttonRef.current.click();
+          }
+        }
+
+        break;
+
+      case keycode('up'):
       case keycode('home'):
       case keycode('end'):
         {
@@ -260,7 +271,7 @@ var useCombobox = function useCombobox(_ref, ref) {
     readOnly: readOnly,
     ref: inputRef,
     type: 'text',
-    value: inputValue || ''
+    value: inputValue !== null && inputValue !== void 0 ? inputValue : ''
   });
 
   var list = {
@@ -275,10 +286,14 @@ var useCombobox = function useCombobox(_ref, ref) {
     tabIndex: -1,
     value: currentIndex
   };
+  var button = {
+    ref: buttonRef
+  };
   return {
     combobox: combobox,
     input: input,
     list: list,
+    button: button,
     popover: {
       open: open,
       onOpenChange: setOpen

package/dist/esm/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 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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"}
+{"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.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\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        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: Omit<ComboboxProps, 'dialog'>,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\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('down'):\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case keycode('up'):\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    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\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","buttonRef","React","listRef","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","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/components/Field/Field.js

@@ -1,33 +1,52 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, createElement } from 'react';
+import { forwardRef, useRef, createElement, cloneElement } from 'react';
 import cn from 'classnames';
+import { v4 } from 'uuid';
 
-var _excluded = ["disabled", "children", "message", "state"];
+var _excluded = ["children", "disabled", "invalid", "label", "message", "required"];
 var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
+  var _children$props$id, _children$props, _children$props$inval, _children$props2, _children$props$requi, _children$props3, _children$props4;
+
+  var children = props.children,
+      disabled = props.disabled,
+      invalid = props.invalid,
+      label = props.label,
       message = props.message,
-      state = props.state,
+      required = props.required,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
-    'text-grey-dark': disabled
+  var idRef = useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : v4());
+  var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
+  var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
+  var className = cn('flex flex-col mb-4', {
+    'pt-5': !label
   }, props.className);
-  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-darkest': !state || state === 'default',
-    'text-red': state === 'error',
-    'text-green': state === 'success',
-    'text-blue': state === 'information',
-    'text-yellow-dark': state === 'warning',
+  var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
+    'text-grey-dark': disabled
+  });
+  var messageClassName = cn('text-xs leading-normal truncate flex-none', {
+    'text-grey-darkest': !isInvalid,
+    'text-red': isInvalid,
     'opacity-50': disabled
-  }, props.className);
-  return createElement("label", Object.assign({}, otherProps, {
+  });
+
+  if (!label && !(children !== null && children !== void 0 && children.props['aria-label'])) {
+    console.warn('TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.');
+  }
+
+  return createElement("div", Object.assign({}, otherProps, {
     className: className,
-    "data-taco": "label",
+    "data-taco": "field",
     ref: ref
-  }), children, message && createElement("span", {
+  }), label && createElement("label", {
+    htmlFor: idRef.current,
+    className: labelClassName,
+    "data-taco": "label"
+  }, label, isRequired ? '*' : ''), idRef.current !== (children === null || children === void 0 ? void 0 : (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.id) ? cloneElement(children, {
+    id: idRef.current
+  }) : children, message && createElement("span", {
     className: messageClassName,
-    role: state === 'error' ? 'alert' : undefined
+    role: isInvalid ? 'alert' : undefined
   }, message));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport { State } from '../../types';\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n    /** State will change the style of the field */\n    state?: State;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, message, state, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-dark': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn(\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\n        {\n            'text-grey-darkest': !state || state === 'default',\n            'text-red': state === 'error',\n            'text-green': state === 'success',\n            'text-blue': state === 'information',\n            'text-yellow-dark': state === 'warning',\n            'opacity-50': disabled,\n        },\n        props.className\n    );\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={state === 'error' ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","message","state","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;;;IAoBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,MAAQC,QAAR,GAA8DF,KAA9D,CAAQE,QAAR;AAAA,MAAkBC,QAAlB,GAA8DH,KAA9D,CAAkBG,QAAlB;AAAA,MAA4BC,OAA5B,GAA8DJ,KAA9D,CAA4BI,OAA5B;AAAA,MAAqCC,KAArC,GAA8DL,KAA9D,CAAqCK,KAArC;AAAA,MAA+CC,UAA/C,iCAA8DN,KAA9D;;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;AACI,sBAAkBN;AADtB,GAFgB,EAKhBF,KAAK,CAACO,SALU,CAApB;AAOA,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;AACI,yBAAqB,CAACH,KAAD,IAAUA,KAAK,KAAK,SAD7C;AAEI,gBAAYA,KAAK,KAAK,OAF1B;AAGI,kBAAcA,KAAK,KAAK,SAH5B;AAII,iBAAaA,KAAK,KAAK,aAJ3B;AAKI,wBAAoBA,KAAK,KAAK,SALlC;AAMI,kBAAcH;AANlB,GAFuB,EAUvBF,KAAK,CAACO,SAViB,CAA3B;AAaA,SACIR,aAAA,QAAA,oBAAWO;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQN,IAAAA,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKC,OAAO,IACJL,aAAA,OAAA;AAAMQ,IAAAA,SAAS,EAAEE;AAAkBC,IAAAA,IAAI,EAAEL,KAAK,KAAK,OAAV,GAAoB,OAApB,GAA8BM;GAAvE,EACKP,OADL,CAHR,CADJ;AAUH,CAhCoB;;;;"}
+{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport './Field.css';\n\nexport type FieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: JSX.Element;\n    disabled?: boolean;\n    invalid?: boolean;\n    label?: string | JSX.Element;\n    message?: string | JSX.Element;\n    required?: boolean;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, disabled, invalid, label, message, required, ...otherProps } = props;\n    const idRef = React.useRef(children?.props?.id ?? uuid());\n    const isInvalid = children?.props?.invalid ?? invalid;\n    const isRequired = children?.props?.required ?? required;\n    const className = cn(\n        'flex flex-col mb-4',\n        {\n            'pt-5': !label,\n        },\n        props.className\n    );\n\n    const labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {\n        'text-grey-dark': disabled,\n    });\n\n    const messageClassName = cn('text-xs leading-normal truncate flex-none', {\n        'text-grey-darkest': !isInvalid,\n        'text-red': isInvalid,\n        'opacity-50': disabled,\n    });\n\n    if (!label && !children?.props['aria-label']) {\n        console.warn(\n            'TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.'\n        );\n    }\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"field\" ref={ref}>\n            {label && (\n                <label htmlFor={idRef.current} className={labelClassName} data-taco=\"label\">\n                    {label}\n                    {isRequired ? '*' : ''}\n                </label>\n            )}\n            {idRef.current !== children?.props?.id ? React.cloneElement(children, { id: idRef.current }) : children}\n            {message && (\n                <span className={messageClassName} role={isInvalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </div>\n    );\n});\n"],"names":["Field","React","props","ref","children","disabled","invalid","label","message","required","otherProps","idRef","id","uuid","isInvalid","isRequired","className","cn","labelClassName","messageClassName","console","warn","htmlFor","current","role","undefined"],"mappings":";;;;;;IAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;;;AAClC,MAAQC,QAAR,GAAiFF,KAAjF,CAAQE,QAAR;AAAA,MAAkBC,QAAlB,GAAiFH,KAAjF,CAAkBG,QAAlB;AAAA,MAA4BC,OAA5B,GAAiFJ,KAAjF,CAA4BI,OAA5B;AAAA,MAAqCC,KAArC,GAAiFL,KAAjF,CAAqCK,KAArC;AAAA,MAA4CC,OAA5C,GAAiFN,KAAjF,CAA4CM,OAA5C;AAAA,MAAqDC,QAArD,GAAiFP,KAAjF,CAAqDO,QAArD;AAAA,MAAkEC,UAAlE,iCAAiFR,KAAjF;;AACA,MAAMS,KAAK,GAAGV,MAAA,uBAAaG,QAAb,aAAaA,QAAb,0CAAaA,QAAQ,CAAEF,KAAvB,oDAAa,gBAAiBU,EAA9B,mEAAoCC,EAAI,EAAxC,CAAd;AACA,MAAMC,SAAS,4BAAGV,QAAH,aAAGA,QAAH,2CAAGA,QAAQ,CAAEF,KAAb,qDAAG,iBAAiBI,OAApB,yEAA+BA,OAA9C;AACA,MAAMS,UAAU,4BAAGX,QAAH,aAAGA,QAAH,2CAAGA,QAAQ,CAAEF,KAAb,qDAAG,iBAAiBO,QAApB,yEAAgCA,QAAhD;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,oBADgB,EAEhB;AACI,YAAQ,CAACV;AADb,GAFgB,EAKhBL,KAAK,CAACc,SALU,CAApB;AAQA,MAAME,cAAc,GAAGD,EAAE,CAAC,+CAAD,EAAkD;AACvE,sBAAkBZ;AADqD,GAAlD,CAAzB;AAIA,MAAMc,gBAAgB,GAAGF,EAAE,CAAC,2CAAD,EAA8C;AACrE,yBAAqB,CAACH,SAD+C;AAErE,gBAAYA,SAFyD;AAGrE,kBAAcT;AAHuD,GAA9C,CAA3B;;AAMA,MAAI,CAACE,KAAD,IAAU,EAACH,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEF,KAAV,CAAgB,YAAhB,CAAD,CAAd,EAA8C;AAC1CkB,IAAAA,OAAO,CAACC,IAAR,CACI,wJADJ;AAGH;;AAED,SACIpB,aAAA,MAAA,oBAASS;AAAYM,IAAAA,SAAS,EAAEA;iBAAqB;AAAQb,IAAAA,GAAG,EAAEA;IAAlE,EACKI,KAAK,IACFN,aAAA,QAAA;AAAOqB,IAAAA,OAAO,EAAEX,KAAK,CAACY;AAASP,IAAAA,SAAS,EAAEE;iBAA0B;GAApE,EACKX,KADL,EAEKQ,UAAU,GAAG,GAAH,GAAS,EAFxB,CAFR,EAOKJ,KAAK,CAACY,OAAN,MAAkBnB,QAAlB,aAAkBA,QAAlB,2CAAkBA,QAAQ,CAAEF,KAA5B,qDAAkB,iBAAiBU,EAAnC,IAAwCX,YAAA,CAAmBG,QAAnB,EAA6B;AAAEQ,IAAAA,EAAE,EAAED,KAAK,CAACY;AAAZ,GAA7B,CAAxC,GAA8FnB,QAPnG,EAQKI,OAAO,IACJP,aAAA,OAAA;AAAMe,IAAAA,SAAS,EAAEG;AAAkBK,IAAAA,IAAI,EAAEV,SAAS,GAAG,OAAH,GAAaW;GAA/D,EACKjB,OADL,CATR,CADJ;AAgBH,CA7CoB;;;;"}

package/dist/esm/components/IconButton/IconButton.js

@@ -12,7 +12,7 @@ var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
       rounded = _props$rounded === void 0 ? false : _props$rounded,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
+  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { appearance, icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButton(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACP,UAAD,EAAa,IAAb,CAFJ,EAGhB;AACI,oBAAgBE,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCJ,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAHgB,EAShBV,KAAK,CAACM,SATU,CAApB;;AAYA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOQ,YAAY,cACVN,UADU;AACEO,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEX;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfL,GAHe,CAAnB;AAKH,CAxByB;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { appearance, icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        getAppearanceClasses(appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButton(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACP,UAAD,EAAa,IAAb,CAHJ,EAIhB;AACI,oBAAgBE,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCJ,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACM,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOQ,YAAY,cACVN,UADU;AACEO,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEX;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfL,GAHe,CAAnB;AAKH,CAzByB;;;;"}

package/dist/esm/components/Input/Input.js

@@ -5,12 +5,13 @@ import { Icon } from '../Icon/Icon.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { getInputClasses, getButtonStateClasses } from './util.js';
 
-var _excluded = ["button", "icon", "highlighted", "onKeyDown", "state", "autoFocus"];
+var _excluded = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
 var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
       onKeyDown = props.onKeyDown,
-      state = props.state,
       autoFocus = props.autoFocus,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -53,7 +54,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
       var _button$props$disable, _cn;
 
       var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(state)] = !props.disabled, _cn), button.props.className);
+      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
       extra = cloneElement(button, {
         className: buttonClassName,
         disabled: disabled
@@ -72,7 +73,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
     }
 
     var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    return createElement("div", {
+    input = createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
     }, input, extra);

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** State will change the style of the input **/\n    state?: State;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, onKeyDown, state, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled ?? otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(state)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","onKeyDown","state","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    invalid?: boolean;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, invalid = false, onKeyDown, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    let input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled ?? otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(invalid)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        input = (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}

package/dist/esm/components/Input/util.js

@@ -1,49 +1,22 @@
 import cn from 'classnames';
 
 var getInputClasses = function getInputClasses(props) {
-  var _cn;
-
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
-    'border-grey text-opacity-25 cursor-not-allowed': props.disabled
-  }, _cn[getStateClasses(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
+    'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
+    'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
+    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,
+    'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark': !props.invalid,
+    'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': props.invalid
+  });
 };
-var getStateClasses = function getStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';
-
-    case 'error':
-      return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';
-
-    case 'warning':
-      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
-
-    case 'information':
-      return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
-
-    default:
-      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
+var getButtonStateClasses = function getButtonStateClasses(invalid) {
+  if (invalid) {
+    return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
   }
-};
-var getButtonStateClasses = function getButtonStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
-
-    case 'error':
-      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
-
-    case 'warning':
-      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
-    case 'information':
-      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-
-    default:
-      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-  }
+  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 };
 
-export { getButtonStateClasses, getInputClasses, getStateClasses };
+export { getButtonStateClasses, getInputClasses };
 //# sourceMappingURL=util.js.map

package/dist/esm/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';\n\n        case 'error':\n            return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n\n        case 'warning':\n            return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';\n\n        case 'information':\n            return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n\n        default:\n            return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,iMADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,uIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,6HAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,gHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,8GAAP;;AAEJ;AACI,aAAO,mHAAP;AAdR;AAgBH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\n                !props.invalid,\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\n                props.invalid,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n    }\n\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;IAEaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;AAChC,SAAOC,EAAE,CACL,iMADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,kCAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;AAII,gCAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;AAKI,2IACI,CAACH,KAAK,CAACK,OANf;AAOI,wIACIL,KAAK,CAACK;AARd,GAFK,CAAT;AAaH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,OAAD;AACjC,MAAIA,OAAJ,EAAa;AACT,WAAO,6HAAP;AACH;;AAED,SAAO,mHAAP;AACH;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAwDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAsDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

package/dist/esm/components/Listbox/ScrollableList.js

@@ -9,7 +9,7 @@ import { getInputClasses } from '../Input/util.js';
 import { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
 
-var _excluded = ["data", "disabled", "highlighted", "id", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "state", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
+var _excluded = ["data", "disabled", "highlighted", "id", "invalid", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
     _excluded2 = ["children", "icon"];
 var getId = function getId(id, value) {
   return id + "_" + value;