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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        readOnly,\n        value,\n        ...props\n    }: ComboboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !inline || (inline && inputValue !== convertToInputValue(value));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('up'):\n            case keycode('down'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue || '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["convertToInputValue","value","String","useCombobox","ref","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","readOnly","props","inputRef","useProxiedRef","listRef","React","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","popover","onOpenChange"],"mappings":";;;;;;;;;;;AAiBA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD;AAAA,SAAgDC,MAAM,CAACD,KAAD,aAACA,KAAD,cAACA,KAAD,GAAU,EAAV,CAAtD;AAAA,CAA5B;;IASaE,WAAW,GAAG,SAAdA,WAAc,OAiBvBC,GAjBuB;MAGAC,sBAAnB;uBACAC;MAAMC,wCAAiB;MACvBC,oBAAAA;MACAC,gBAAAA;MAEAC,cAAAA;MAEAC,gBAAAA;MACAC,eAAAA;MACAC,iBAAAA;MACAC,gBAAAA;MACAb,aAAAA;MACGc;;AAIP,MAAMC,QAAQ,GAAGC,aAAa,CAAmBb,GAAnB,CAA9B;AACA,MAAMc,OAAO,GAAGC,MAAA,CAA+B,IAA/B,CAAhB;;AACA,wBAAwBA,QAAA,CAAe,KAAf,CAAxB;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,MAAMC,MAAM,GAAGH,OAAA,CAAc;AAAA,WAAMI,EAAI,EAAV;AAAA,GAAd,EAA4B,EAA5B,CAAf;;AACA,yBAAoCJ,QAAA,CAAuBnB,mBAAmB,CAACC,KAAD,CAA1C,CAApC;AAAA,MAAOuB,UAAP;AAAA,MAAmBC,aAAnB;;AACA,MAAMC,gBAAgB,GAAG,CAAChB,MAAD,IAAYA,MAAM,IAAIc,UAAU,KAAKxB,mBAAmB,CAACC,KAAD,CAAjF;AACA,MAAM0B,aAAa,GAAGC,gBAAgB,CAACrB,cAAD,CAAtC;AACA,MAAMD,IAAI,GAAGa,OAAA,CACT;AAAA,WAAOO,gBAAgB,GAAGG,UAAU,CAACF,aAAD,EAAgBH,UAAhB,CAAb,GAA2CG,aAAlE;AAAA,GADS,EAET,CAACD,gBAAD,EAAmBF,UAAnB,EAA+BG,aAA/B,CAFS,CAAb;;AAKA,yBAAwCR,QAAA,CACpCK,UAAU,KAAKM,SAAf,GAA2BC,iBAAiB,CAACzB,IAAD,EAAOkB,UAAP,CAA5C,GAAiEM,SAD7B,CAAxC;AAAA,MAAOE,YAAP;AAAA,MAAqBC,eAArB;;AAIA,MAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD;AACzB,QAAIA,KAAK,KAAKL,SAAd,EAAyB;AACrB,UAAMM,MAAM,GAAG9B,IAAI,CAAC6B,KAAD,CAAnB;;AAEA,UAAIC,MAAM,IAAI,CAACA,MAAM,CAAC3B,QAAtB,EAAgC;AAC5B4B,QAAAA,kBAAkB,CAACrB,QAAQ,CAACsB,OAAV,EAAmBF,MAAM,CAACnC,KAA1B,EAAiC,UAAjC,CAAlB;AACH;AACJ;AACJ,GARD;;AAUA,MAAMsC,eAAe,GAAG,SAAlBA,eAAkB,CAACJ,KAAD;AACpB,QAAIA,KAAK,KAAKL,SAAd,EAAyB;AACrB;AACH;;AAED,QAAMM,MAAM,GAAG9B,IAAI,CAAC6B,KAAD,CAAnB;;AAGA,QAAIC,MAAM,CAACnC,KAAP,KAAiBA,KAArB,EAA4B;AACxBiC,MAAAA,oBAAoB,CAACC,KAAD,CAApB;AACH,KAFD,MAEO;AACH;AACAV,MAAAA,aAAa,CAACzB,mBAAmB,CAACC,KAAD,CAApB,CAAb;AACH;AACJ,GAdD;;;AAiBAkB,EAAAA,SAAA,CAAgB;AACZ,QAAIX,YAAY,IAAI,CAACP,KAArB,EAA4B;AACxBiC,MAAAA,oBAAoB,CAACH,iBAAiB,CAACzB,IAAD,EAAOE,YAAP,CAAlB,CAApB;AACH;AACJ,GAJD,EAIG,CAACF,IAAD,CAJH;;AAOAa,EAAAA,SAAA,CAAgB;AACZ,QAAIlB,KAAK,KAAK6B,SAAV,IAAuB7B,KAAK,KAAKuB,UAArC,EAAiD;AAC7CC,MAAAA,aAAa,CAACzB,mBAAmB,CAACC,KAAD,CAApB,CAAb;AACH;AACJ,GAJD,EAIG,CAACA,KAAD,CAJH;;AAOAkB,EAAAA,SAAA,CAAgB;AACZ;AACA;AACA,QAAMqB,cAAc,GAAGvC,KAAK,KAAK6B,SAAV,IAAuB7B,KAAK,KAAK,IAAjC,IAAyCuB,UAAU,KAAKtB,MAAM,CAACD,KAAD,CAArF;;AAEA,QAAIuB,UAAU,IAAIlB,IAAI,CAACmC,MAAnB,IAA6B,CAACD,cAAlC,EAAkD;AAC9CP,MAAAA,eAAe,CAAC,CAAD,CAAf;;AAEA,UAAI,CAACb,IAAL,EAAW;AACPC,QAAAA,OAAO,CAAC,IAAD,CAAP;AACH;AACJ,KAND,MAMO;AACHA,MAAAA,OAAO,CAAC,KAAD,CAAP;AACH;AACJ,GAdD,EAcG,CAACG,UAAD,EAAalB,IAAb,CAdH;AAgBAa,EAAAA,SAAA,CAAgB;AACZ,QAAIC,IAAJ,EAAU;AACNa,MAAAA,eAAe,CAACF,iBAAiB,CAACzB,IAAD,EAAOkB,UAAP,CAAjB,IAAuC,CAAxC,CAAf;AACH,KAFD,MAEO;AACHS,MAAAA,eAAe,CAACH,SAAD,CAAf;AACH;AACJ,GAND,EAMG,CAACV,IAAD,CANH;;AASA,MAAMsB,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AACpBA,IAAAA,KAAK,CAACC,OAAN;;AAEA,QAAID,KAAK,CAACE,aAAN,KAAwB3B,OAAO,CAACoB,OAApC,EAA6C;AACzCK,MAAAA,KAAK,CAACG,cAAN;AACA;AACH;;AAED,QAAInC,QAAQ,IAAIgC,KAAK,CAACI,MAAN,CAAa9C,KAAb,KAAuBA,KAAvC,EAA8C;AAC1C,UAAM+C,IAAI,GAAGC,WAAW,CAACtB,aAAD,EAAgBgB,KAAK,CAACI,MAAN,CAAa9C,KAA7B,CAAxB;AACC0C,MAAAA,KAAa,CAACO,MAAd,GAAuBC,YAAY,CAACH,IAAD,CAAnC;AAED,UAAMI,OAAO,GAAGC,gBAAgB,CAAC1B,aAAD,EAAgBqB,IAAhB,aAAgBA,IAAhB,uBAAgBA,IAAI,CAAEM,IAAtB,CAAhC;;AAEA,UAAIF,OAAO,KAAK,IAAZ,IAAoBA,OAAO,CAACX,MAAR,GAAiB,CAAzC,EAA4C;AACvCE,QAAAA,KAAa,CAACO,MAAd,CAAqBE,OAArB,GAA+BA,OAA/B;AACJ;;AAEDzC,MAAAA,QAAQ,CAACgC,KAAD,CAAR;AACH;;AAED,QAAI5B,KAAK,CAACwC,MAAV,EAAkB;AACdxC,MAAAA,KAAK,CAACwC,MAAN,CAAaZ,KAAb;AACH;AACJ,GAxBD;;AA0BA,MAAMa,iBAAiB,GAAG,SAApBA,iBAAoB,CAACb,KAAD;AACtBlB,IAAAA,aAAa,CAACkB,KAAK,CAACI,MAAN,CAAa9C,KAAd,CAAb;AACH,GAFD;;AAIA,MAAMwD,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACd,KAAD;AACrB,QAAIjC,MAAM,IAAK,CAACU,IAAD,IAASI,UAAT,IAAuBlB,IAAI,CAACmC,MAA3C,EAAoD;AAChDpB,MAAAA,OAAO,CAAC,IAAD,CAAP;AACH;;AAED,QAAIT,OAAJ,EAAa;AACT+B,MAAAA,KAAK,CAACC,OAAN;AACAhC,MAAAA,OAAO,CAAC+B,KAAD,CAAP;AACH;AACJ,GATD;;AAWA,MAAMe,kBAAkB,GAAG,SAArBA,kBAAqB,CAACf,KAAD;AACvBA,IAAAA,KAAK,CAACC,OAAN;;AAEA,YAAQD,KAAK,CAACgB,OAAd;AACI,WAAKC,OAAO,CAAC,WAAD,CAAZ;AAA2B;AACvB;AACH;;AAED,WAAKA,OAAO,CAAC,QAAD,CAAZ;AAAwB;AACpBjB,UAAAA,KAAK,CAACG,cAAN;AACArB,UAAAA,aAAa,CAACzB,mBAAmB,CAACC,KAAD,CAApB,CAAb;AACAoB,UAAAA,OAAO,CAAC,KAAD,CAAP;AACA;AACH;;AAED,WAAKuC,OAAO,CAAC,KAAD,CAAZ;AACA,WAAKA,OAAO,CAAC,OAAD,CAAZ;AAAuB;AACnB,cAAIjB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,KAAD,CAA7B,EAAsC;AAClCjB,YAAAA,KAAK,CAACG,cAAN;AACH;;AAEDP,UAAAA,eAAe,CAACP,YAAD,CAAf;AACAX,UAAAA,OAAO,CAAC,KAAD,CAAP;AACA;AACH;;AAED,WAAKuC,OAAO,CAAC,IAAD,CAAZ;AACA,WAAKA,OAAO,CAAC,MAAD,CAAZ;AACA,WAAKA,OAAO,CAAC,MAAD,CAAZ;AACA,WAAKA,OAAO,CAAC,KAAD,CAAZ;AAAqB;AACjB,cAAIxC,IAAJ,EAAU;AACNuB,YAAAA,KAAK,CAACG,cAAN;AACH;;AACD;AACH;AA/BL;;;AAqCA,QAAI5B,OAAO,CAACoB,OAAZ,EAAqB;AACjBpB,MAAAA,OAAO,CAACoB,OAAR,CAAgBuB,aAAhB,CAA8BC,yBAAyB,CAACnB,KAAD,CAAvD;AACH;;AAED,QAAIjC,MAAM,IAAI,CAACU,IAAf,EAAqB;AACjB,UAAIuB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,IAAD,CAAzB,IAAmCjB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,MAAD,CAAhE,EAA0E;AACtEjB,QAAAA,KAAK,CAACG,cAAN;AACA,YAAMiB,YAAY,GAAGpB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,IAAD,CAAzB,GAAkCtD,IAAI,CAACmC,MAAL,GAAc,CAAhD,GAAoD,CAAzE;AACAR,QAAAA,eAAe,CAACD,YAAY,KAAKF,SAAjB,GAA6BE,YAA7B,GAA4C+B,YAA7C,CAAf;AACA1C,QAAAA,OAAO,CAAC,IAAD,CAAP;AACH;AACJ;;AAED,QAAI,CAACsB,KAAK,CAACqB,kBAAN,EAAD,IAA+BnD,SAAnC,EAA8C;AAC1C8B,MAAAA,KAAK,CAACC,OAAN;AACA/B,MAAAA,SAAS,CAAC8B,KAAD,CAAT;AACH;AACJ,GAzDD;;AA2DA,MAAMsB,mBAAmB,GAAG,SAAtBA,mBAAsB,CAAC9B,KAAD;AACxBF,IAAAA,eAAe,CAACE,KAAD,CAAf;AACH,GAFD;;AAIA,MAAM+B,kBAAkB,GAAG,SAArBA,kBAAqB,CAACvB,KAAD,EAAyCR,KAAzC;AACvBQ,IAAAA,KAAK,CAACG,cAAN;AACAP,IAAAA,eAAe,CAACJ,KAAD,CAAf;AACAd,IAAAA,OAAO,CAAC,KAAD,CAAP;AACH,GAJD;;AAMA,MAAM8C,QAAQ,GAAG;AACb,qBAAiB/C,IADJ;AAEb,iBAAaE,MAFA;AAGb,qBAAiB,SAHJ;AAIb8C,IAAAA,IAAI,EAAE;AAJO,GAAjB;;AAOA,MAAMC,KAAK,gBACJtD,KADI;AAEP,qBAAiBO,MAFV;AAGP;AACA;AACA,yBAAqB,MALd;AAMP;AACA,6BACIU,YAAY,KAAKF,SAAjB,IAA8BxB,IAAI,CAAC0B,YAAD,CAAlC,GAAmDsC,KAAK,CAAChD,MAAD,EAASpB,MAAM,CAACI,IAAI,CAAC0B,YAAD,CAAJ,CAAmB/B,KAApB,CAAf,CAAxD,GAAqG6B,SARlG;AASP,uBAAmBzB,cATZ;AAUPI,IAAAA,QAAQ,EAARA,QAVO;AAWP8C,IAAAA,MAAM,EAAE,CAAC9C,QAAD,IAAa,CAACK,QAAd,GAAyB4B,eAAzB,GAA2CZ,SAX5C;AAYPnB,IAAAA,QAAQ,EAAE,CAACF,QAAD,IAAa,CAACK,QAAd,GAAyB0C,iBAAzB,GAA6C1B,SAZhD;AAaPlB,IAAAA,OAAO,EAAE,CAACH,QAAD,IAAa,CAACK,QAAd,GAAyB2C,gBAAzB,GAA4C3B,SAb9C;AAcPjB,IAAAA,SAAS,EAAE,CAACJ,QAAD,IAAa,CAACK,QAAd,GAAyB4C,kBAAzB,GAA8C5B,SAdlD;AAePhB,IAAAA,QAAQ,EAARA,QAfO;AAgBPV,IAAAA,GAAG,EAAEY,QAhBE;AAiBPuD,IAAAA,IAAI,EAAE,MAjBC;AAkBPtE,IAAAA,KAAK,EAAEuB,UAAU,IAAI;AAlBd,IAAX;;AAqBA,MAAMgD,IAAI,GAA+B;AACrC,uBAAmBnE,cADkB;AAErCC,IAAAA,IAAI,EAAJA,IAFqC;AAGrCG,IAAAA,QAAQ,EAARA,QAHqC;AAIrCgE,IAAAA,EAAE,EAAEnD,MAJiC;AAKrCX,IAAAA,QAAQ,EAAEsD,mBAL2B;AAMrCrD,IAAAA,OAAO,EAAEsD,kBAN4B;AAOrC9D,IAAAA,GAAG,EAAEc,OAPgC;AAQrCwD,IAAAA,aAAa,EAAE,KARsB;AASrCC,IAAAA,QAAQ,EAAE,CAAC,CAT0B;AAUrC1E,IAAAA,KAAK,EAAE+B;AAV8B,GAAzC;AAaA,SAAO;AACHmC,IAAAA,QAAQ,EAARA,QADG;AAEHE,IAAAA,KAAK,EAALA,KAFG;AAGHG,IAAAA,IAAI,EAAJA,IAHG;AAIHI,IAAAA,OAAO,EAAE;AACLxD,MAAAA,IAAI,EAAJA,IADK;AAELyD,MAAAA,YAAY,EAAExD;AAFT;AAJN,GAAP;AAUH;;;;"}

package/dist/esm/components/Datepicker/Datepicker.js

@@ -0,0 +1,77 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { useLocalization } from '../Provider/Provider.js';
+import { Popover } from '../Popover/Popover.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Input } from '../Input/Input.js';
+import { useDatepicker } from './useDatepicker.js';
+
+var _excluded = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
+  var _input$disabled;
+
+  var externalClassName = props.className,
+      handleReset = props.onReset,
+      style = props.style,
+      shortcuts = props.shortcuts,
+      shortcutsText = props.shortcutsText,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useDatepicker = useDatepicker(otherProps, ref),
+      calendar = _useDatepicker.calendar,
+      input = _useDatepicker.input;
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
+  return createElement("span", {
+    className: className,
+    "data-taco": "datepicker",
+    style: style
+  }, createElement(Input, Object.assign({}, input, {
+    button: createElement(Popover, null, createElement(Popover.Trigger, null, createElement(IconButton, {
+      "aria-label": texts.datepicker.expand,
+      disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
+      icon: "calendar"
+    })), createElement(Popover.Content, null, function (_ref) {
+      var close = _ref.close;
+      return createElement("div", {
+        className: "flex -m-3"
+      }, createElement(Calendar, Object.assign({}, calendar, {
+        onChange: function onChange(date, event) {
+          calendar.onChange(date, event);
+          close();
+        },
+        tabIndex: -1
+      })), shortcuts && createElement("div", {
+        className: "border-l border-grey-dark flex flex-col"
+      }, createElement("span", {
+        className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), createElement("ul", null, shortcuts.map(function (shortcut, i) {
+        return createElement("li", {
+          key: i
+        }, createElement("button", {
+          className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
+          onClick: function onClick(event) {
+            event.persist();
+            shortcut.onClick(event);
+            close();
+          }
+        }, shortcut.text));
+      })), handleReset && createElement("button", {
+        className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
+        onClick: function onClick(event) {
+          event.persist();
+          handleReset(event);
+          close();
+        }
+      }, texts.datepicker.clear)));
+    }))
+  })));
+});
+
+export { Datepicker };
+//# sourceMappingURL=Datepicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.js","sources":["../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Provider';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: any;\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    <Popover>\n                        <Popover.Trigger>\n                            <IconButton\n                                aria-label={texts.datepicker.expand}\n                                disabled={input.disabled ?? input.readOnly}\n                                icon=\"calendar\"\n                            />\n                        </Popover.Trigger>\n                        <Popover.Content>\n                            {({ close }) => (\n                                <div className=\"flex -m-3\">\n                                    <Calendar\n                                        {...calendar}\n                                        onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\n                                            calendar.onChange(date, event);\n                                            close();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                    {shortcuts && (\n                                        <div className=\"border-l border-grey-dark flex flex-col\">\n                                            <span className=\"font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3\">\n                                                {shortcutsText ?? texts.datepicker.shortcuts}\n                                            </span>\n                                            <ul>\n                                                {shortcuts.map((shortcut, i) => (\n                                                    <li key={i}>\n                                                        <button\n                                                            className=\"w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs\"\n                                                            onClick={event => {\n                                                                event.persist();\n                                                                shortcut.onClick(event);\n                                                                close();\n                                                            }}\n                                                        >\n                                                            {shortcut.text}\n                                                        </button>\n                                                    </li>\n                                                ))}\n                                            </ul>\n                                            {handleReset && (\n                                                <button\n                                                    className=\"text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto\"\n                                                    onClick={event => {\n                                                        event.persist();\n                                                        handleReset(event);\n                                                        close();\n                                                    }}\n                                                >\n                                                    {texts.datepicker.clear}\n                                                </button>\n                                            )}\n                                        </div>\n                                    )}\n                                </div>\n                            )}\n                        </Popover.Content>\n                    </Popover>\n                }\n            />\n        </span>\n    );\n});\n"],"names":["Datepicker","React","props","ref","externalClassName","className","handleReset","onReset","style","shortcuts","shortcutsText","otherProps","useDatepicker","calendar","input","useLocalization","texts","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":"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"}

package/dist/esm/components/Datepicker/useDatepicker.js

@@ -0,0 +1,86 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+import { useLocalization } from '../Provider/Provider.js';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { setInputValueByRef } from '../../utils/input.js';
+import { format, parseFromCustomString } from '../../utils/date.js';
+
+var _excluded = ["defaultValue", "calendar", "onBlur", "onChange", "value"];
+var useDatepicker = function useDatepicker(_ref, ref) {
+  var calendar = _ref.calendar,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var inputRef = useProxiedRef(ref);
+
+  var _useLocalization = useLocalization(),
+      formatting = _useLocalization.formatting;
+
+  var _React$useState = useState(value ? format(value, formatting.date) : ''),
+      internalValue = _React$useState[0],
+      setInternalValue = _React$useState[1]; // update internal value if it changed 'externally'
+
+
+  useEffect(function () {
+    if (value) {
+      var formattedValue = format(value, formatting.date);
+
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue);
+      }
+    } else {
+      setInternalValue('');
+    }
+  }, [value]); // event handlers
+
+  var handleInputBlur = function handleInputBlur(event) {
+    event.persist();
+    var valueAsDate = parseFromCustomString(event.target.value);
+    var formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
+    event.target.value = formattedValue;
+
+    if (onChange) {
+      event.detail = valueAsDate;
+      onChange(event);
+    } else {
+      // update the internal value to use the formatted date
+      setInternalValue(formattedValue);
+    }
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
+  var handleInputChange = function handleInputChange(event) {
+    setInternalValue(event.target.value);
+  };
+
+  var handleChange = function handleChange(date) {
+    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
+  };
+
+  var inputProps = _extends({}, props, {
+    autoComplete: 'off',
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    ref: inputRef,
+    type: 'text',
+    value: internalValue
+  });
+
+  var calendarProps = _extends({}, calendar, {
+    onChange: handleChange,
+    value: value
+  });
+
+  return {
+    input: inputProps,
+    calendar: calendarProps
+  };
+};
+
+export { useDatepicker };
+//# sourceMappingURL=useDatepicker.js.map

package/dist/esm/components/Datepicker/useDatepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatepicker.js","sources":["../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format } from '../../utils/date';\nimport { useLocalization } from '../Provider/Provider';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement> };\n\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(value ? format(value, formatting.date) : '');\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        if (value) {\n            const formattedValue = format(value, formatting.date);\n\n            if (formattedValue !== internalValue) {\n                setInternalValue(formattedValue);\n            }\n        } else {\n            setInternalValue('');\n        }\n    }, [value]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(event.target.value);\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        if (onChange) {\n            (event as any).detail = valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = date => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useDatepicker","ref","calendar","onBlur","onChange","value","props","inputRef","useProxiedRef","useLocalization","formatting","React","format","date","internalValue","setInternalValue","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","detail","handleInputChange","handleChange","setInputValueByRef","current","inputProps","autoComplete","type","calendarProps","input"],"mappings":";;;;;;;;IAeaA,aAAa,GAAG,SAAhBA,aAAgB,OAEzBC,GAFyB;MACNC,gBAAAA;MAAUC,cAAAA;MAAQC,gBAAAA;MAAUC,aAAAA;MAAUC;;AAGzD,MAAMC,QAAQ,GAAGC,aAAa,CAAmBP,GAAnB,CAA9B;;AACA,yBAAuBQ,eAAe,EAAtC;AAAA,MAAQC,UAAR,oBAAQA,UAAR;;AACA,wBAA0CC,QAAA,CAAeN,KAAK,GAAGO,MAAM,CAACP,KAAD,EAAQK,UAAU,CAACG,IAAnB,CAAT,GAAoC,EAAxD,CAA1C;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;;AAGAJ,EAAAA,SAAA,CAAgB;AACZ,QAAIN,KAAJ,EAAW;AACP,UAAMW,cAAc,GAAGJ,MAAM,CAACP,KAAD,EAAQK,UAAU,CAACG,IAAnB,CAA7B;;AAEA,UAAIG,cAAc,KAAKF,aAAvB,EAAsC;AAClCC,QAAAA,gBAAgB,CAACC,cAAD,CAAhB;AACH;AACJ,KAND,MAMO;AACHD,MAAAA,gBAAgB,CAAC,EAAD,CAAhB;AACH;AACJ,GAVD,EAUG,CAACV,KAAD,CAVH;;AAaA,MAAMY,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AACpBA,IAAAA,KAAK,CAACC,OAAN;AAEA,QAAMC,WAAW,GAAGC,qBAAqB,CAACH,KAAK,CAACI,MAAN,CAAajB,KAAd,CAAzC;AACA,QAAMW,cAAc,GAAGI,WAAW,GAAGR,MAAM,CAACQ,WAAD,CAAN,IAAuB,EAA1B,GAA+B,EAAjE;AAEAF,IAAAA,KAAK,CAACI,MAAN,CAAajB,KAAb,GAAqBW,cAArB;;AAEA,QAAIZ,QAAJ,EAAc;AACTc,MAAAA,KAAa,CAACK,MAAd,GAAuBH,WAAvB;AACDhB,MAAAA,QAAQ,CAACc,KAAD,CAAR;AACH,KAHD,MAGO;AACH;AACAH,MAAAA,gBAAgB,CAACC,cAAD,CAAhB;AACH;;AAED,QAAIb,MAAJ,EAAY;AACRA,MAAAA,MAAM,CAACe,KAAD,CAAN;AACH;AACJ,GAnBD;;AAqBA,MAAMM,iBAAiB,GAAG,SAApBA,iBAAoB,CAACN,KAAD;AACtBH,IAAAA,gBAAgB,CAACG,KAAK,CAACI,MAAN,CAAajB,KAAd,CAAhB;AACH,GAFD;;AAIA,MAAMoB,YAAY,GAAG,SAAfA,YAAe,CAAAZ,IAAI;AACrBa,IAAAA,kBAAkB,CAACnB,QAAQ,CAACoB,OAAV,EAAmBf,MAAM,CAACC,IAAD,EAAOH,UAAU,CAACG,IAAlB,CAAzB,EAAkD,UAAlD,CAAlB;AACH,GAFD;;AAIA,MAAMe,UAAU,gBACTtB,KADS;AAEZuB,IAAAA,YAAY,EAAE,KAFF;AAGZ1B,IAAAA,MAAM,EAAEc,eAHI;AAIZb,IAAAA,QAAQ,EAAEoB,iBAJE;AAKZvB,IAAAA,GAAG,EAAEM,QALO;AAMZuB,IAAAA,IAAI,EAAE,MANM;AAOZzB,IAAAA,KAAK,EAAES;AAPK,IAAhB;;AAUA,MAAMiB,aAAa,gBACZ7B,QADY;AAEfE,IAAAA,QAAQ,EAAEqB,YAFK;AAGfpB,IAAAA,KAAK,EAALA;AAHe,IAAnB;;AAMA,SAAO;AACH2B,IAAAA,KAAK,EAAEJ,UADJ;AAEH1B,IAAAA,QAAQ,EAAE6B;AAFP,GAAP;AAIH;;;;"}

package/dist/esm/components/Dialog/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    draggable: boolean;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    close: () => void;\n    onClose?: () => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    close: () => {},\n    draggable: false,\n    drawer: undefined,\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    ref: null,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","close","draggable","drawer","undefined","elements","extra","onClose","props","ref","size","useCurrentDialog"],"mappings":";;AAAA;IAqBaA,aAAa,gBAAGC,aAAA,CAAmC;AAC5DC,EAAAA,KAAK,EAAE,mBADqD;AAE5DC,EAAAA,SAAS,EAAE,KAFiD;AAG5DC,EAAAA,MAAM,EAAEC,SAHoD;AAI5DC,EAAAA,QAAQ,EAAE;AACNF,IAAAA,MAAM,EAAEC,SADF;AAENE,IAAAA,KAAK,EAAEF;AAFD,GAJkD;AAQ5DG,EAAAA,OAAO,EAAE,qBARmD;AAS5DC,EAAAA,KAAK,EAAE,EATqD;AAU5DC,EAAAA,GAAG,EAAE,IAVuD;AAW5DC,EAAAA,IAAI,EAAE;AAXsD,CAAnC;IAchBC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAOX,UAAA,CAAiBD,aAAjB,CAAP;AACH;;;;"}

package/dist/esm/components/Dialog/Dialog.js

@@ -0,0 +1,94 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useMemo, Children, useState, createElement } from 'react';
+import { Root } from '@radix-ui/react-dialog';
+import { DialogContext } from './Context.js';
+import { Trigger } from './components/Trigger.js';
+import { Content, Title, Footer, Close } from './components/Content.js';
+import { Drawer } from './components/Drawer.js';
+import { Extra } from './components/Extra.js';
+
+var _excluded = ["children", "draggable", "onClose", "open", "size"];
+
+var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
+  return useMemo(function () {
+    var children = [];
+    var drawer;
+    var extra;
+    Children.forEach(initialChildren, function (child) {
+      if (child.type.displayName === 'Drawer') {
+        drawer = child;
+      } else if (child.type.displayName === 'Extra') {
+        extra = child;
+      } else {
+        children.push(child);
+      }
+    });
+    return [children, drawer, extra];
+  }, [initialChildren]);
+};
+
+var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
+  var initialChildren = props.children,
+      _props$draggable = props.draggable,
+      draggable = _props$draggable === void 0 ? false : _props$draggable,
+      onClose = props.onClose,
+      defaultOpen = props.open,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'sm' : _props$size,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
+      children = _useSeparatedChildren[0],
+      drawer = _useSeparatedChildren[1],
+      extra = _useSeparatedChildren[2];
+
+  var _React$useState = useState(defaultOpen),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var _React$useState2 = useState(false),
+      drawerOpen = _React$useState2[0],
+      setDrawerOpen = _React$useState2[1];
+
+  var context = useMemo(function () {
+    return {
+      close: function close() {
+        return setOpen(false);
+      },
+      draggable: draggable,
+      drawer: {
+        open: drawerOpen,
+        toggle: function toggle() {
+          return setDrawerOpen(function (isDrawerOpen) {
+            return !isDrawerOpen;
+          });
+        }
+      },
+      elements: {
+        drawer: drawer,
+        extra: extra
+      },
+      onClose: onClose,
+      props: otherProps,
+      size: size,
+      ref: ref
+    };
+  }, [open, drawerOpen, drawer, extra, otherProps]);
+  return createElement(DialogContext.Provider, {
+    value: context
+  }, createElement(Root, {
+    children: children,
+    open: open,
+    onOpenChange: setOpen
+  }));
+});
+Dialog.Trigger = Trigger;
+Dialog.Content = Content;
+Dialog.Title = Title;
+Dialog.Footer = Footer;
+Dialog.Extra = Extra;
+Dialog.Drawer = Drawer;
+Dialog.Close = Close;
+
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport { DialogContentProps, DialogTitleProps, DialogFooterProps, DialogCloseProps };\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps>;\n};\n\nexport const Dialog = React.forwardRef((props: DialogProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const { children: initialChildren, draggable = false, onClose, open: defaultOpen, size = 'sm', ...otherProps } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            size,\n            ref,\n        }),\n        [open, drawerOpen, drawer, extra, otherProps]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","ref","draggable","onClose","defaultOpen","open","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":"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"}