@economic/taco 1.16.2 → 1.17.0-alpha.0

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js

@@ -1,64 +0,0 @@
-import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
-import { Icon } from '../Icon/Icon.js';
-import { Root, Indicator } from '@radix-ui/react-checkbox';
-import { useId } from '../../hooks/useId.js';
-
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  const {
-    checked,
-    highlighted,
-    indeterminate,
-    invalid,
-    label,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = useId(props.id);
-  const 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
-  });
-  let handleChange;
-  if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
-  }
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      ['aria-labelledby']: `${id}-label`,
-      id
-    };
-  }
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
-    "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    ref: ref
-  }), /*#__PURE__*/createElement(Indicator, {
-    className: "flex h-full w-full"
-  }, /*#__PURE__*/createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
-    className: "!h-full !w-full"
-  })));
-  if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-dark': props.disabled
-    }, props.className);
-    return /*#__PURE__*/createElement("span", {
-      className: labelContainerClassName
-    }, element, /*#__PURE__*/createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
-});
-
-export { Checkbox };
-//# sourceMappingURL=Checkbox.js.map

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\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)]\n        props.className,\n        {\n            'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light':\n                !props.disabled && !invalid,\n            'border-grey text-blue-light cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n            'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light':\n                invalid && !props.disabled,\n        }\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            ['aria-labelledby']: `${id}-label`,\n            id,\n        };\n    }\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            ref={ref}>\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn(\n            'flex items-center cursor-pointer gap-2',\n            {\n                'cursor-not-allowed text-grey-dark': props.disabled,\n            },\n            props.className\n        );\n\n        return (\n            <span className={labelContainerClassName}>\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelContainerClassName","htmlFor"],"mappings":";;;;;;MAyCaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQ,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC9F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,6FAA6F;;EAC7FZ,KAAK,CAACW,SAAS,EACf;IACI,kGAAkG,EAC9F,CAACX,KAAK,CAACa,QAAQ,IAAI,CAACR,OAAO;IAC/B,gDAAgD,EAAEL,KAAK,CAACa,QAAQ;IAChE,8DAA8D,EAAEV,WAAW;IAC3E,+GAA+G,EAC3GE,OAAO,IAAI,CAACL,KAAK,CAACa;GACzB,CACJ;EAED,IAAIC,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIT,KAAK,EAAE;IACPS,eAAe,GAAG;MACd,CAAC,iBAAiB,MAAMN,UAAU;MAClCA;KACH;;EAGL,MAAMO,OAAO,gBACTjB,cAACkB,IAAsB,oBACfT,UAAU,EACVO,eAAe;iBACT,UAAU;IACpBb,OAAO,EAAEE,aAAa,GAAG,eAAe,GAAGF,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBO,eAAe,EAAEJ,YAAY;IAC7Bb,GAAG,EAAEA;mBACLF,cAACkB,SAA2B;IAACN,SAAS,EAAC;kBACnCZ,cAACoB,IAAI;IAACC,IAAI,EAAEhB,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEO,SAAS,EAAC;IAAoB,CACjD,CAErC;EAED,IAAIL,KAAK,EAAE;IACP,MAAMe,uBAAuB,GAAGT,EAAE,CAC9B,wCAAwC,EACxC;MACI,mCAAmC,EAAEZ,KAAK,CAACa;KAC9C,EACDb,KAAK,CAACW,SAAS,CAClB;IAED,oBACIZ;MAAMY,SAAS,EAAEU;OACZL,OAAO,eACRjB;MAAOuB,OAAO,EAAEb,EAAE;MAAEA,EAAE,KAAKA;OACtBH,KAAK,CACF,CACL;;EAIf,OAAOU,OAAO;AAClB,CAAC;;;;"}

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

@@ -1,90 +0,0 @@
-import { forwardRef, useRef, createElement } from 'react';
-import cn from 'classnames';
-import { IconButton } from '../IconButton/IconButton.js';
-import { useLocalization } from '../Provider/Localization.js';
-import { Root, Anchor, Portal, 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 '../../hooks/useBoundingClientRectListener.js';
-
-const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
-  const {
-    className: externalClassName,
-    dialog,
-    style,
-    ...otherProps
-  } = props;
-  const {
-    combobox,
-    button,
-    input,
-    popover,
-    list
-  } = useCombobox(otherProps, ref);
-  const internalRef = useRef(null);
-  const {
-    texts
-  } = useLocalization();
-  const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn('inline-flex relative', {
-    'yt-combobox--inline': props.inline
-  }, externalClassName);
-  return /*#__PURE__*/createElement("span", {
-    className: className,
-    "data-taco": "combobox",
-    style: style
-  }, /*#__PURE__*/createElement(Root, Object.assign({}, popover), /*#__PURE__*/createElement(Anchor, {
-    asChild: true,
-    ref: internalRef
-  }, /*#__PURE__*/createElement("div", Object.assign({}, combobox, {
-    className: "inline w-full",
-    ref: ref
-  }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
-    autoComplete: "off",
-    button: props.inline ? /*#__PURE__*/createElement(IconButton
-    // In case of inline combobox, this icon button acts only as visual chevron representation,
-    // so should be taken out of screen reader scope.
-    , {
-      "aria-hidden": true,
-      appearance: "discrete",
-      className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
-      icon: popover.open ? 'chevron-up' : 'chevron-down',
-      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 ? /*#__PURE__*/createElement(IconButton, {
-      "aria-label": texts.combobox.tooltip,
-      icon: "list-search",
-      disabled: props.readOnly || props.disabled,
-      dialog: dialog,
-      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
-  })))), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, {
-    align: "start",
-    onOpenAutoFocus: event => {
-      event.preventDefault();
-    },
-    sideOffset: 4
-  }, /*#__PURE__*/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/packages/taco/src/components/Combobox/Combobox.js.map

@@ -1 +0,0 @@
-{"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 '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden={true}\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\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.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQ,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,gBACRpB,cAACyB;;;;qBAGgB,IAAI;MACjBC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAE;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,sBAAApB,KAAK,CAACR,GAAG,CAAC6B,OAAO,uDAAjB,mBAAmBC,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,GACF5B,MAAM,gBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC0B,OAAO;MAClCP,IAAI,EAAC,aAAa;MAClBQ,QAAQ,EAAElC,KAAK,CAACmC,QAAQ,IAAInC,KAAK,CAACkC,QAAQ;MAC1C9B,MAAM,EAAEA,MAAM;MACdgC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,uBAAA7B,KAAK,CAACR,GAAG,CAAC6B,OAAO,wDAAjB,oBAAmBC,KAAK,EAAE;OAC7B;MACD9B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACf+B,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEnB,KAAK,CAACP,QAAQ,CAAC0B;MAC1B,GACFM;KAEV,CACA,CACgB,eAC1BxC,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBoB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,UAAU,EAAE;kBACZ3C,cAAC4C,cAAc,oBACPhC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,uEAAuE,CAAC;IACtFb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE6B;KAAO;IAC5Cb,QAAQ,EAAEtB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -1,253 +0,0 @@
-import { useRef, useState, useMemo, useEffect } from 'react';
-import { v4 } from 'uuid';
-import { useMergedRef } from '../../hooks/useMergedRef.js';
-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 = useMergedRef(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.key) {
-      case 'Backspace':
-        {
-          return;
-        }
-      case 'Escape':
-        {
-          event.preventDefault();
-          setInputValue(convertToInputValue(value));
-          setOpen(false);
-          return;
-        }
-      case 'Tab':
-      case 'Enter':
-        {
-          if (event.key !== 'Tab') {
-            event.preventDefault();
-          }
-          setCurrentValue(currentIndex);
-          setOpen(false);
-          return;
-        }
-      case 'ArrowDown':
-        if (open) {
-          event.preventDefault();
-        } else {
-          if (!inline && buttonRef.current) {
-            buttonRef.current.click();
-          }
-        }
-        break;
-      case 'ArrowUp':
-      case 'Home':
-      case '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.key === 'ArrowUp' || event.key === 'ArrowDown') {
-        event.preventDefault();
-        const initialIndex = event.key === 'ArrowUp' ? 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/packages/taco/src/components/Combobox/useCombobox.js.map

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

@@ -1,71 +0,0 @@
-import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
-import { IconButton } from '../IconButton/IconButton.js';
-import { useLocalization } from '../Provider/Localization.js';
-import { Calendar } from '../Calendar/Calendar.js';
-import { Input } from '../Input/Input.js';
-import { useDatepicker } from './useDatepicker.js';
-import { Popover } from '../Popover/Popover.js';
-
-const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
-  const {
-    className: externalClassName,
-    onReset: handleReset,
-    style,
-    shortcuts,
-    shortcutsText,
-    ...otherProps
-  } = props;
-  const {
-    calendar,
-    input
-  } = useDatepicker(otherProps, ref);
-  const {
-    texts
-  } = useLocalization();
-  const className = cn('inline-flex w-full text-black font-normal', externalClassName);
-  return /*#__PURE__*/createElement("span", {
-    className: className,
-    "data-taco": "datepicker",
-    style: style
-  }, /*#__PURE__*/createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/createElement(Popover, null, /*#__PURE__*/createElement(Popover.Trigger, null, /*#__PURE__*/createElement(IconButton, {
-      "aria-label": texts.datepicker.expand,
-      disabled: input.disabled || input.readOnly,
-      icon: "calendar"
-    })), /*#__PURE__*/createElement(Popover.Content, null, ({
-      close
-    }) => /*#__PURE__*/createElement("div", {
-      className: "-m-3 flex"
-    }, /*#__PURE__*/createElement(Calendar, Object.assign({}, calendar, {
-      onChange: (date, event) => {
-        calendar.onChange(date, event);
-        close();
-      },
-      tabIndex: -1
-    })), shortcuts && /*#__PURE__*/createElement("div", {
-      className: "border-grey-dark flex flex-col border-l"
-    }, /*#__PURE__*/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), /*#__PURE__*/createElement("ul", null, shortcuts.map((shortcut, i) => /*#__PURE__*/createElement("li", {
-      key: i
-    }, /*#__PURE__*/createElement("button", {
-      className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
-      onClick: event => {
-        event.persist();
-        shortcut.onClick(event);
-        close();
-      }
-    }, shortcut.text)))), handleReset && /*#__PURE__*/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: event => {
-        event.persist();
-        handleReset(event);
-        close();
-      }
-    }, texts.datepicker.clear)))))
-  })));
-});
-
-export { Datepicker };
-//# sourceMappingURL=Datepicker.js.map

package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js.map

@@ -1 +0,0 @@
-{"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/Localization';\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=\"-m-3 flex\">\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-grey-dark flex flex-col border-l\">\n                                            <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                                {shortcutsText ?? texts.datepicker.shortcuts}\n                                            </span>\n                                            <ul>\n                                                {shortcuts.map((shortcut, i) => (\n                                                    <li key={i}>\n                                                        <button\n                                                            className=\"hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs\"\n                                                            onClick={event => {\n                                                                event.persist();\n                                                                shortcut.onClick(event);\n                                                                close();\n                                                            }}>\n                                                            {shortcut.text}\n                                                        </button>\n                                                    </li>\n                                                ))}\n                                            </ul>\n                                            {handleReset && (\n                                                <button\n                                                    className=\"text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs\"\n                                                    onClick={event => {\n                                                        event.persist();\n                                                        handleReset(event);\n                                                        close();\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","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","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":";;;;;;;;;MAuCaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAU,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,eACFlB,cAACmB,OAAO,qBACJnB,cAACmB,OAAO,CAACC,OAAO,qBACZpB,cAACqB,UAAU;oBACKP,KAAK,CAACQ,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ,IAAIZ,KAAK,CAACa,QAAQ;MAC1CC,IAAI,EAAC;MACP,CACY,eAClB1B,cAACmB,OAAO,CAACQ,OAAO,QACX,CAAC;MAAEC;KAAO,kBACP5B;MAAKG,SAAS,EAAC;oBACXH,cAAC6B,QAAQ,oBACDlB,QAAQ;MACZmB,QAAQ,EAAE,CAACC,IAAU,EAAEC,KAAwC;QAC3DrB,QAAQ,CAACmB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;QAC9BJ,KAAK,EAAE;OACV;MACDK,QAAQ,EAAE,CAAC;OACb,EACDzB,SAAS,iBACNR;MAAKG,SAAS,EAAC;oBACXH;MAAMG,SAAS,EAAC;OACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACQ,UAAU,CAACd,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC0B,GAAG,CAAC,CAACC,QAAQ,EAAEC,CAAC,kBACvBpC;MAAIqC,GAAG,EAAED;oBACLpC;MACIG,SAAS,EAAC,+DAA+D;MACzEmC,OAAO,EAAEN,KAAK;QACVA,KAAK,CAACO,OAAO,EAAE;QACfJ,QAAQ,CAACG,OAAO,CAACN,KAAK,CAAC;QACvBJ,KAAK,EAAE;;OAEVO,QAAQ,CAACK,IAAI,CACT,CAEhB,CAAC,CACD,EACJlC,WAAW,iBACRN;MACIG,SAAS,EAAC,oHAAoH;MAC9HmC,OAAO,EAAEN,KAAK;QACVA,KAAK,CAACO,OAAO,EAAE;QACfjC,WAAW,CAAC0B,KAAK,CAAC;QAClBJ,KAAK,EAAE;;OAEVd,KAAK,CAACQ,UAAU,CAACmB,KAAK,CAE9B,CAER,CAER,CACa;KAG5B,CACC;AAEf,CAAC;;;;"}