@economic/taco 1.0.5 → 1.0.6

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

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

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

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

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

@@ -0,0 +1,89 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+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", "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
+  }, externalClassName);
+  return createElement("span", {
+    className: className,
+    "data-taco": "combobox",
+    style: style
+  }, createElement(Root, Object.assign({}, popover), createElement(Anchor, {
+    asChild: true,
+    ref: internalRef
+  }, createElement("div", Object.assign({}, combobox, {
+    className: "inline w-full",
+    ref: ref
+  }), createElement(Input, Object.assign({}, input, {
+    autoComplete: "off",
+    button: props.inline ? createElement(IconButton, {
+      appearance: "discrete",
+      className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
+      icon: popover.open ? 'chevron-up' : 'chevron-down',
+      onClick: function onClick() {
+        var _input$ref$current;
+
+        popover.onOpenChange(true);
+        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
+      },
+      tabIndex: -1
+    }) : dialog ? createElement(IconButton, {
+      icon: "list-search",
+      disabled: props.readOnly || props.disabled,
+      dialog: dialog,
+      onFocus: function onFocus(event) {
+        var _input$ref$current2;
+
+        // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
+        event.preventDefault();
+        (_input$ref$current2 = input.ref.current) === null || _input$ref$current2 === void 0 ? void 0 : _input$ref$current2.focus();
+      },
+      ref: button.ref,
+      tabIndex: -1,
+      tooltip: texts.combobox.tooltip
+    }) : undefined
+  })))), createElement(Content, {
+    align: "start",
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
+      event.preventDefault();
+    },
+    sideOffset: 4
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    className: cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.open ? 0 : -1
+  })))));
+});
+
+export { Combobox };
+//# sourceMappingURL=Combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useCombobox } from './useCombobox';\r\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport './Combobox.css';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { useLocalization } from '../Provider/Provider';\r\n\r\nexport type ComboboxTexts = {\r\n    /* Tooltip shown for the dialog button */\r\n    tooltip: string;\r\n};\r\n\r\nexport type ComboboxItem = ScrollableListItem;\r\nexport type ComboboxValue = ScrollableListItemValue;\r\n\r\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\r\n    /** Array of options in combobox */\r\n    data?: ComboboxItem[];\r\n    /**\r\n     * Initial value of the input in combobox.\r\n     * This is used when combobox is mounted, if no value is provided.\r\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\r\n     */\r\n    defaultValue?: ComboboxValue;\r\n    /** Set what value should have an empty option in combobox */\r\n    emptyValue?: ComboboxValue;\r\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /** Displays loading state in listbox */\r\n    loading?: boolean;\r\n    /**\r\n     * Handler called when user chooses an option from the provided suggestions.\r\n     * Suggestions will be calculated based on the input value.\r\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\r\n     */\r\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n    /** Handler called when the user enters a query **/\r\n    onSearch?: (query: string) => void | Promise<void>;\r\n    /** Value of the input in combobox */\r\n    value?: ComboboxValue;\r\n};\r\n\r\ninterface InlineComboboxProps extends ComboboxBaseProps {\r\n    dialog?: never;\r\n    /**\r\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\r\n     * *Note* that default combobox will display matching data only when user starts typing in input.\r\n     */\r\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\r\n}\r\n\r\ninterface DialogComboboxProps extends ComboboxBaseProps {\r\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\r\n    inline?: never;\r\n}\r\n\r\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\r\n\r\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\r\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\r\n    const internalRef = React.useRef<HTMLDivElement>(null);\r\n    const { texts } = useLocalization();\r\n    const selectDimensions = useBoundingClientRectListener(internalRef);\r\n    const className = cn(\r\n        'inline-flex relative',\r\n        {\r\n            'yt-combobox--inline': props.inline,\r\n        },\r\n        externalClassName\r\n    );\r\n\r\n    return (\r\n        <span className={className} data-taco=\"combobox\" style={style}>\r\n            <PopoverPrimitive.Root {...popover}>\r\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\r\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\r\n                        <Input\r\n                            {...input}\r\n                            autoComplete=\"off\"\r\n                            button={\r\n                                props.inline ? (\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\r\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\r\n                                        onClick={() => {\r\n                                            popover.onOpenChange(true);\r\n                                            input.ref.current?.focus();\r\n                                        }}\r\n                                        tabIndex={-1}\r\n                                    />\r\n                                ) : dialog ? (\r\n                                    <IconButton\r\n                                        icon=\"list-search\"\r\n                                        disabled={props.readOnly || props.disabled}\r\n                                        dialog={dialog}\r\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\r\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\r\n                                            event.preventDefault();\r\n                                            input.ref.current?.focus();\r\n                                        }}\r\n                                        ref={button.ref}\r\n                                        tabIndex={-1}\r\n                                        tooltip={texts.combobox.tooltip}\r\n                                    />\r\n                                ) : undefined\r\n                            }\r\n                        />\r\n                    </div>\r\n                </PopoverPrimitive.Anchor>\r\n                <PopoverPrimitive.Content\r\n                    align=\"start\"\r\n                    onOpenAutoFocus={event => {\r\n                        event.preventDefault();\r\n                    }}\r\n                    sideOffset={4}\r\n                >\r\n                    <ScrollableList\r\n                        {...list}\r\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\r\n                        style={{ minWidth: selectDimensions?.width }}\r\n                        tabIndex={popover.open ? 0 : -1}\r\n                    />\r\n                </PopoverPrimitive.Content>\r\n            </PopoverPrimitive.Root>\r\n        </span>\r\n    );\r\n});\r\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","current","focus","tabIndex","disabled","readOnly","onFocus","event","preventDefault","tooltip","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;;IA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAmBC,iBAAnB,GAAuEF,KAAvE,CAAQG,SAAR;AAAA,MAAsCC,MAAtC,GAAuEJ,KAAvE,CAAsCI,MAAtC;AAAA,MAA8CC,KAA9C,GAAuEL,KAAvE,CAA8CK,KAA9C;AAAA,MAAwDC,UAAxD,iCAAuEN,KAAvE;;AACA,qBAAmDO,WAAW,CAACD,UAAD,EAAaL,GAAb,CAA9D;AAAA,MAAQO,QAAR,gBAAQA,QAAR;AAAA,MAAkBC,MAAlB,gBAAkBA,MAAlB;AAAA,MAA0BC,KAA1B,gBAA0BA,KAA1B;AAAA,MAAiCC,OAAjC,gBAAiCA,OAAjC;AAAA,MAA0CC,IAA1C,gBAA0CA,IAA1C;;AACA,MAAMC,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;;AACA,yBAAkBe,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;AACA,MAAMV,SAAS,GAAGe,EAAE,CAChB,sBADgB,EAEhB;AACI,2BAAuBlB,KAAK,CAACmB;AADjC,GAFgB,EAKhBjB,iBALgB,CAApB;AAQA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;iBAAqB;AAAWE,IAAAA,KAAK,EAAEA;GAAxD,EACIN,aAAA,CAACqB,IAAD,oBAA2BT,QAA3B,EACIZ,aAAA,CAACqB,MAAD;AAAyBC,IAAAA,OAAO;AAACpB,IAAAA,GAAG,EAAEY;GAAtC,EACId,aAAA,MAAA,oBAASS;AAAUL,IAAAA,SAAS,EAAC;AAAgBF,IAAAA,GAAG,EAAEA;IAAlD,EACIF,aAAA,CAACuB,KAAD,oBACQZ;AACJa,IAAAA,YAAY,EAAC;AACbd,IAAAA,MAAM,EACFT,KAAK,CAACmB,MAAN,GACIpB,aAAA,CAACyB,UAAD;AACIC,MAAAA,UAAU,EAAC;AACXtB,MAAAA,SAAS,EAAC;AACVuB,MAAAA,IAAI,EAAEf,OAAO,CAACgB,IAAR,GAAe,YAAf,GAA8B;AACpCC,MAAAA,OAAO,EAAE;;;AACLjB,QAAAA,OAAO,CAACkB,YAAR,CAAqB,IAArB;AACA,8BAAAnB,KAAK,CAACT,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;AACH;AACDC,MAAAA,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,GACNL,aAAA,CAACyB,UAAD;AACIE,MAAAA,IAAI,EAAC;AACLO,MAAAA,QAAQ,EAAEjC,KAAK,CAACkC,QAAN,IAAkBlC,KAAK,CAACiC;AAClC7B,MAAAA,MAAM,EAAEA;AACR+B,MAAAA,OAAO,EAAE,iBAACC,KAAD;;;AACL;AACAA,QAAAA,KAAK,CAACC,cAAN;AACA,+BAAA3B,KAAK,CAACT,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;AACH;AACD9B,MAAAA,GAAG,EAAEQ,MAAM,CAACR;AACZ+B,MAAAA,QAAQ,EAAE,CAAC;AACXM,MAAAA,OAAO,EAAEvB,KAAK,CAACP,QAAN,CAAe8B;KAX5B,CADM,GAcNC;IA7BZ,CADJ,CADJ,CADJ,EAqCIxC,aAAA,CAACqB,OAAD;AACIoB,IAAAA,KAAK,EAAC;AACNC,IAAAA,eAAe,EAAE,yBAAAL,KAAK;AAClBA,MAAAA,KAAK,CAACC,cAAN;AACH;AACDK,IAAAA,UAAU,EAAE;GALhB,EAOI3C,aAAA,CAAC4C,cAAD,oBACQ/B;AACJT,IAAAA,SAAS,EAAEe,EAAE,CAAC,uEAAD;AACbb,IAAAA,KAAK,EAAE;AAAEuC,MAAAA,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;AAA9B;AACPb,IAAAA,QAAQ,EAAErB,OAAO,CAACgB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CArCJ,CADJ,CADJ;AAwDH,CAtEuB;;;;"}

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

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

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

@@ -0,0 +1,75 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Provider.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Input } from '../Input/Input.js';
+import { useDatepicker } from './useDatepicker.js';
+import { Popover } from '../Popover/Popover.js';
+
+var _excluded = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
+  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.readOnly,
+      icon: "calendar"
+    })), createElement(Popover.Content, null, function (_ref) {
+      var close = _ref.close;
+      return createElement("div", {
+        className: "-m-3 flex"
+      }, createElement(Calendar, Object.assign({}, calendar, {
+        onChange: function onChange(date, event) {
+          calendar.onChange(date, event);
+          close();
+        },
+        tabIndex: -1
+      })), shortcuts && createElement("div", {
+        className: "border-grey-dark flex flex-col border-l"
+      }, createElement("span", {
+        className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
+      }, 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: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
+          onClick: function onClick(event) {
+            event.persist();
+            shortcut.onClick(event);
+            close();
+          }
+        }, shortcut.text));
+      })), handleReset && createElement("button", {
+        className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
+        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';\r\nimport cn from 'classnames';\r\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { useDatepicker } from './useDatepicker';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Popover } from '../Popover/Popover';\r\n\r\nexport type DatepickerTexts = {\r\n    /** Aria-label for calendar */\r\n    calendar: string;\r\n    /** Clear button text */\r\n    clear: string;\r\n    /**\r\n     * Aria-label for calendar icon button in the input.\r\n     * Calendar will open when user clicks this icon button.\r\n     */\r\n    expand: string;\r\n    /** Shortcut heading text */\r\n    shortcuts: string;\r\n};\r\n\r\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\r\n    /** [Calendar](component:calendar) component associated with the DatePicker */\r\n    calendar?: CalendarProps;\r\n    /** List of shortcuts */\r\n    shortcuts?: any;\r\n    /** Title for the shortcuts panel */\r\n    shortcutsText?: string;\r\n    /** Handler to be called when the clear button is clicked */\r\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\r\n    /**\r\n     * Date value of the calendar.\r\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\r\n     */\r\n    value?: Date;\r\n};\r\n\r\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\r\n    const { calendar, input } = useDatepicker(otherProps, ref);\r\n    const { texts } = useLocalization();\r\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\r\n\r\n    return (\r\n        <span className={className} data-taco=\"datepicker\" style={style}>\r\n            <Input\r\n                {...input}\r\n                button={\r\n                    <Popover>\r\n                        <Popover.Trigger>\r\n                            <IconButton\r\n                                aria-label={texts.datepicker.expand}\r\n                                disabled={input.disabled || input.readOnly}\r\n                                icon=\"calendar\"\r\n                            />\r\n                        </Popover.Trigger>\r\n                        <Popover.Content>\r\n                            {({ close }) => (\r\n                                <div className=\"-m-3 flex\">\r\n                                    <Calendar\r\n                                        {...calendar}\r\n                                        onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\r\n                                            calendar.onChange(date, event);\r\n                                            close();\r\n                                        }}\r\n                                        tabIndex={-1}\r\n                                    />\r\n                                    {shortcuts && (\r\n                                        <div className=\"border-grey-dark flex flex-col border-l\">\r\n                                            <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\r\n                                                {shortcutsText ?? texts.datepicker.shortcuts}\r\n                                            </span>\r\n                                            <ul>\r\n                                                {shortcuts.map((shortcut, i) => (\r\n                                                    <li key={i}>\r\n                                                        <button\r\n                                                            className=\"hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs\"\r\n                                                            onClick={event => {\r\n                                                                event.persist();\r\n                                                                shortcut.onClick(event);\r\n                                                                close();\r\n                                                            }}\r\n                                                        >\r\n                                                            {shortcut.text}\r\n                                                        </button>\r\n                                                    </li>\r\n                                                ))}\r\n                                            </ul>\r\n                                            {handleReset && (\r\n                                                <button\r\n                                                    className=\"text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs\"\r\n                                                    onClick={event => {\r\n                                                        event.persist();\r\n                                                        handleReset(event);\r\n                                                        close();\r\n                                                    }}\r\n                                                >\r\n                                                    {texts.datepicker.clear}\r\n                                                </button>\r\n                                            )}\r\n                                        </div>\r\n                                    )}\r\n                                </div>\r\n                            )}\r\n                        </Popover.Content>\r\n                    </Popover>\r\n                }\r\n            />\r\n        </span>\r\n    );\r\n});\r\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":";;;;;;;;;;;IAuCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAmBC,iBAAnB,GAA+GF,KAA/G,CAAQG,SAAR;AAAA,MAA+CC,WAA/C,GAA+GJ,KAA/G,CAAsCK,OAAtC;AAAA,MAA4DC,KAA5D,GAA+GN,KAA/G,CAA4DM,KAA5D;AAAA,MAAmEC,SAAnE,GAA+GP,KAA/G,CAAmEO,SAAnE;AAAA,MAA8EC,aAA9E,GAA+GR,KAA/G,CAA8EQ,aAA9E;AAAA,MAAgGC,UAAhG,iCAA+GT,KAA/G;;AACA,uBAA4BU,aAAa,CAACD,UAAD,EAAaR,GAAb,CAAzC;AAAA,MAAQU,QAAR,kBAAQA,QAAR;AAAA,MAAkBC,KAAlB,kBAAkBA,KAAlB;;AACA,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AACA,MAAMX,SAAS,GAAGY,EAAE,CAAC,2CAAD,EAA8Cb,iBAA9C,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;iBAAqB;AAAaG,IAAAA,KAAK,EAAEA;GAA1D,EACIP,aAAA,CAACiB,KAAD,oBACQJ;AACJK,IAAAA,MAAM,EACFlB,aAAA,CAACmB,OAAD,MAAA,EACInB,aAAA,CAACmB,OAAO,CAACC,OAAT,MAAA,EACIpB,aAAA,CAACqB,UAAD;oBACgBN,KAAK,CAACO,UAAN,CAAiBC;AAC7BC,MAAAA,QAAQ,EAAEX,KAAK,CAACW,QAAN,IAAkBX,KAAK,CAACY;AAClCC,MAAAA,IAAI,EAAC;KAHT,CADJ,CADJ,EAQI1B,aAAA,CAACmB,OAAO,CAACQ,OAAT,MAAA,EACK;AAAA,UAAGC,KAAH,QAAGA,KAAH;AAAA,aACG5B,aAAA,MAAA;AAAKI,QAAAA,SAAS,EAAC;OAAf,EACIJ,aAAA,CAAC6B,QAAD,oBACQjB;AACJkB,QAAAA,QAAQ,EAAE,kBAACC,IAAD,EAAaC,KAAb;AACNpB,UAAAA,QAAQ,CAACkB,QAAT,CAAkBC,IAAlB,EAAwBC,KAAxB;AACAJ,UAAAA,KAAK;AACR;AACDK,QAAAA,QAAQ,EAAE,CAAC;QANf,CADJ,EASKzB,SAAS,IACNR,aAAA,MAAA;AAAKI,QAAAA,SAAS,EAAC;OAAf,EACIJ,aAAA,OAAA;AAAMI,QAAAA,SAAS,EAAC;OAAhB,EACKK,aADL,aACKA,aADL,cACKA,aADL,GACsBM,KAAK,CAACO,UAAN,CAAiBd,SADvC,CADJ,EAIIR,aAAA,KAAA,MAAA,EACKQ,SAAS,CAAC0B,GAAV,CAAc,UAACC,QAAD,EAAWC,CAAX;AAAA,eACXpC,aAAA,KAAA;AAAIqC,UAAAA,GAAG,EAAED;SAAT,EACIpC,aAAA,SAAA;AACII,UAAAA,SAAS,EAAC;AACVkC,UAAAA,OAAO,EAAE,iBAAAN,KAAK;AACVA,YAAAA,KAAK,CAACO,OAAN;AACAJ,YAAAA,QAAQ,CAACG,OAAT,CAAiBN,KAAjB;AACAJ,YAAAA,KAAK;AACR;SANL,EAQKO,QAAQ,CAACK,IARd,CADJ,CADW;AAAA,OAAd,CADL,CAJJ,EAoBKnC,WAAW,IACRL,aAAA,SAAA;AACII,QAAAA,SAAS,EAAC;AACVkC,QAAAA,OAAO,EAAE,iBAAAN,KAAK;AACVA,UAAAA,KAAK,CAACO,OAAN;AACAlC,UAAAA,WAAW,CAAC2B,KAAD,CAAX;AACAJ,UAAAA,KAAK;AACR;OANL,EAQKb,KAAK,CAACO,UAAN,CAAiBmB,KARtB,CArBR,CAVR,CADH;AAAA,KADL,CARJ;IAHR,CADJ,CADJ;AAmEH,CAzEyB;;;;"}