@economic/taco 1.12.2 → 1.13.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport { MenuProps, IconButton } from '../..';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mt-4 mb-2 flex\">\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAW,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AAC7D,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAI,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGAAwG,EACxGF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,iBAAIT;IAAIM,SAAS,EAAC;KAA4BG,KAAK,CAAM,EAC9DC,IAAI,gBAAGV,cAACY,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACJ,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

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

@@ -0,0 +1,52 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { Root, Indicator } from '@radix-ui/react-checkbox';
+
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  const {
+    checked,
+    highlighted,
+    indeterminate,
+    invalid,
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  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);
+  }
+  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
+    "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 labelClassName = cn('flex items-center cursor-pointer gap-2', {
+      'cursor-not-allowed text-grey-dark': props.disabled
+    }, props.className);
+    return /*#__PURE__*/createElement("label", {
+      className: labelClassName
+    }, element, label);
+  }
+  return element;
+});
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/esm/packages/taco/src/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';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\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\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    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\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 labelClassName = 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            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;MAwCaA,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;EAE9F,MAAMS,SAAS,GAAGC,EAAE,CAChB,6FAA6F;;EAC7FV,KAAK,CAACS,SAAS,EACf;IACI,kGAAkG,EAC9F,CAACT,KAAK,CAACW,QAAQ,IAAI,CAACN,OAAO;IAC/B,gDAAgD,EAAEL,KAAK,CAACW,QAAQ;IAChE,8DAA8D,EAAER,WAAW;IAC3E,+GAA+G,EAC3GE,OAAO,IAAI,CAACL,KAAK,CAACW;GACzB,CACJ;EAED,IAAIC,YAA2D;EAE/D,IAAIL,QAAQ,EAAE;IACVK,YAAY,GAAIV,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,MAAMW,OAAO,gBACTd,cAACe,IAAsB,oBACfN,UAAU;iBACJ,UAAU;IACpBN,OAAO,EAAEE,aAAa,GAAG,eAAe,GAAGF,OAAO;IAClDO,SAAS,EAAEA,SAAS;IACpBM,eAAe,EAAEH,YAAY;IAC7BX,GAAG,EAAEA;mBACLF,cAACe,SAA2B;IAACL,SAAS,EAAC;kBACnCV,cAACiB,IAAI;IAACC,IAAI,EAAEb,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEK,SAAS,EAAC;IAAoB,CACjD,CAErC;EAED,IAAIH,KAAK,EAAE;IACP,MAAMY,cAAc,GAAGR,EAAE,CACrB,wCAAwC,EACxC;MACI,mCAAmC,EAAEV,KAAK,CAACW;KAC9C,EACDX,KAAK,CAACS,SAAS,CAClB;IAED,oBACIV;MAAOU,SAAS,EAAES;OACbL,OAAO,EACPP,KAAK,CACF;;EAIhB,OAAOO,OAAO;AAClB,CAAC;;;;"}

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

@@ -0,0 +1,86 @@
+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, 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, {
+      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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\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,UAAU;MACPC,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

@@ -0,0 +1,253 @@
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { v4 } from 'uuid';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.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 = 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.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

@@ -0,0 +1 @@
+{"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 { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        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 = useProxiedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.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","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","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.map

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Provider';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: any;\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    <Popover>\n                        <Popover.Trigger>\n                            <IconButton\n                                aria-label={texts.datepicker.expand}\n                                disabled={input.disabled || input.readOnly}\n                                icon=\"calendar\"\n                            />\n                        </Popover.Trigger>\n                        <Popover.Content>\n                            {({ close }) => (\n                                <div className=\"-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;;;;"}

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

@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import { useLocalization } from '../Provider/Provider.js';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { setInputValueByRef } from '../../utils/input.js';
+import { format, parseFromCustomString } from '../../utils/date.js';
+
+const useDatepicker = ({
+  defaultValue: _,
+  calendar,
+  onBlur,
+  onChange,
+  value,
+  ...props
+}, ref) => {
+  const inputRef = useProxiedRef(ref);
+  const {
+    formatting
+  } = useLocalization();
+  const [internalValue, setInternalValue] = useState(value ? format(value, formatting.date) : '');
+  // update internal value if it changed 'externally'
+  useEffect(() => {
+    if (value) {
+      const formattedValue = format(value, formatting.date);
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue);
+      }
+    } else {
+      setInternalValue('');
+    }
+  }, [value]);
+  // event handlers
+  const handleInputBlur = event => {
+    event.persist();
+    const valueAsDate = parseFromCustomString(event.target.value);
+    const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
+    event.target.value = formattedValue;
+    if (onChange) {
+      event.detail = valueAsDate;
+      onChange(event);
+    } else {
+      // update the internal value to use the formatted date
+      setInternalValue(formattedValue);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleInputChange = event => {
+    setInternalValue(event.target.value);
+  };
+  const handleChange = date => {
+    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.target.dispatchEvent(new Event('focusout', {
+        bubbles: true
+      }));
+    }
+  };
+  const inputProps = {
+    ...props,
+    autoComplete: 'off',
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    ref: inputRef,
+    type: 'text',
+    value: internalValue
+  };
+  const calendarProps = {
+    ...calendar,
+    onChange: handleChange,
+    value
+  };
+  return {
+    input: inputProps,
+    calendar: calendarProps
+  };
+};
+
+export { useDatepicker };
+//# sourceMappingURL=useDatepicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format } from '../../utils/date';\nimport { useLocalization } from '../Provider/Provider';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement> };\n\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(value ? format(value, formatting.date) : '');\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        if (value) {\n            const formattedValue = format(value, formatting.date);\n\n            if (formattedValue !== internalValue) {\n                setInternalValue(formattedValue);\n            }\n        } else {\n            setInternalValue('');\n        }\n    }, [value]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(event.target.value);\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        if (onChange) {\n            (event as any).detail = valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = date => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useProxiedRef","formatting","useLocalization","internalValue","setInternalValue","React","format","date","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","onKeyDown","type","calendarProps","input"],"mappings":";;;;;;MAeaA,aAAa,GAAG,CACzB;EAAEC,YAAY,EAAEC,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;CAAwB,EACjFC,GAAgC;EAEhC,MAAMC,QAAQ,GAAGC,aAAa,CAAmBF,GAAG,CAAC;EACrD,MAAM;IAAEG;GAAY,GAAGC,eAAe,EAAE;EACxC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAc,CAACT,KAAK,GAAGU,MAAM,CAACV,KAAK,EAAEK,UAAU,CAACM,IAAI,CAAC,GAAG,EAAE,CAAC;;EAGrGF,SAAe,CAAC;IACZ,IAAIT,KAAK,EAAE;MACP,MAAMY,cAAc,GAAGF,MAAM,CAACV,KAAK,EAAEK,UAAU,CAACM,IAAI,CAAC;MAErD,IAAIC,cAAc,KAAKL,aAAa,EAAE;QAClCC,gBAAgB,CAACI,cAAc,CAAC;;KAEvC,MAAM;MACHJ,gBAAgB,CAAC,EAAE,CAAC;;GAE3B,EAAE,CAACR,KAAK,CAAC,CAAC;;EAGX,MAAMa,eAAe,GAAIC,KAAyC;IAC9DA,KAAK,CAACC,OAAO,EAAE;IAEf,MAAMC,WAAW,GAAGC,qBAAqB,CAACH,KAAK,CAACI,MAAM,CAAClB,KAAK,CAAC;IAC7D,MAAMY,cAAc,GAAGI,WAAW,GAAGN,MAAM,CAACM,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE;IAEnEF,KAAK,CAACI,MAAM,CAAClB,KAAK,GAAGY,cAAc;IAEnC,IAAIb,QAAQ,EAAE;MACTe,KAAa,CAACK,MAAM,GAAGH,WAAW;MACnCjB,QAAQ,CAACe,KAAK,CAAC;KAClB,MAAM;;MAEHN,gBAAgB,CAACI,cAAc,CAAC;;IAGpC,IAAId,MAAM,EAAE;MACRA,MAAM,CAACgB,KAAK,CAAC;;GAEpB;EAED,MAAMM,iBAAiB,GAAIN,KAA0C;IACjEN,gBAAgB,CAACM,KAAK,CAACI,MAAM,CAAClB,KAAK,CAAC;GACvC;EAED,MAAMqB,YAAY,GAAGV,IAAI;IACrBW,kBAAkB,CAACnB,QAAQ,CAACoB,OAAO,EAAEb,MAAM,CAACC,IAAI,EAAEN,UAAU,CAACM,IAAI,CAAC,EAAE,UAAU,CAAC;GAClF;EAED,MAAMa,aAAa,GAAIV,KAA4C;IAC/D,IAAIA,KAAK,CAACW,GAAG,KAAK,OAAO,EAAE;MACvBX,KAAK,CAACI,MAAM,CAACQ,aAAa,CAAC,IAAIC,KAAK,CAAC,UAAU,EAAE;QAAEC,OAAO,EAAE;OAAM,CAAC,CAAC;;GAE3E;EAED,MAAMC,UAAU,GAAe;IAC3B,GAAG5B,KAAK;IACR6B,YAAY,EAAE,KAAK;IACnBhC,MAAM,EAAEe,eAAe;IACvBd,QAAQ,EAAEqB,iBAAiB;IAC3BW,SAAS,EAAEP,aAAa;IACxBtB,GAAG,EAAEC,QAAQ;IACb6B,IAAI,EAAE,MAAM;IACZhC,KAAK,EAAEO;GACV;EAED,MAAM0B,aAAa,GAAkB;IACjC,GAAGpC,QAAQ;IACXE,QAAQ,EAAEsB,YAAY;IACtBrB;GACH;EAED,OAAO;IACHkC,KAAK,EAAEL,UAAU;IACjBhC,QAAQ,EAAEoC;GACb;AACL;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    onClose?: () => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    draggable: false,\n    drawer: {\n        open: false,\n        toggle: () => {},\n    },\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","closeOnEscape","draggable","drawer","open","toggle","elements","undefined","extra","onClose","props","ref","showCloseButton","size","useCurrentDialog"],"mappings":";;AAAA;MAsBaA,aAAa,gBAAGC,aAAmB,CAAgB;EAC5DC,aAAa,EAAE,IAAI;EACnBC,SAAS,EAAE,KAAK;EAChBC,MAAM,EAAE;IACJC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE;GACX;EACDC,QAAQ,EAAE;IACNH,MAAM,EAAEI,SAAS;IACjBC,KAAK,EAAED;GACV;EACDE,OAAO,EAAE,QAAQ;EACjBC,KAAK,EAAE,EAAE;EACTC,GAAG,EAAE,IAAI;EACTC,eAAe,EAAE,IAAI;EACrBC,IAAI,EAAE;CACT;MAEYC,gBAAgB,GAAG;EAC5B,OAAOd,UAAgB,CAACD,aAAa,CAAC;AAC1C;;;;"}