@economic/taco 1.1.5-alpha.102 → 1.1.5-alpha.127

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './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.Content\n                    align=\"start\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}\n                >\n                    <ScrollableList\n                        {...list}\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;;IA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,IAAmBC,iBAAnB,GAAuEF,KAAvE,CAAQG,SAAR;MAAsCC,MAAtC,GAAuEJ,KAAvE,CAAsCI,MAAtC;MAA8CC,KAA9C,GAAuEL,KAAvE,CAA8CK,KAA9C;MAAwDC,UAAxD,iCAAuEN,KAAvE;;EACA,mBAAmDO,WAAW,CAACD,UAAD,EAAaL,GAAb,CAA9D;MAAQO,QAAR,gBAAQA,QAAR;MAAkBC,MAAlB,gBAAkBA,MAAlB;MAA0BC,KAA1B,gBAA0BA,KAA1B;MAAiCC,OAAjC,gBAAiCA,OAAjC;MAA0CC,IAA1C,gBAA0CA,IAA1C;;EACA,IAAMC,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;;EACA,uBAAkBe,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,IAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,IAAMV,SAAS,GAAGe,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBjB,iBALgB,CAApB;EAQA,OACIH,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAAWE,KAAK,EAAEA;GAAxD,EACIN,aAAA,CAACqB,IAAD,oBAA2BT,QAA3B,EACIZ,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,EACId,aAAA,MAAA,oBAASS;IAAUL,SAAS,EAAC;IAAgBF,GAAG,EAAEA;IAAlD,EACIF,aAAA,CAACuB,KAAD,oBACQZ;IACJa,YAAY,EAAC;IACbd,MAAM,EACFT,KAAK,CAACmB,MAAN,GACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXtB,SAAS,EAAC;MACVuB,IAAI,EAAEf,OAAO,CAACgB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLjB,OAAO,CAACkB,YAAR,CAAqB,IAArB;QACA,sBAAAnB,KAAK,CAACT,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,GACNL,aAAA,CAACyB,UAAD;oBACgBT,KAAK,CAACP,QAAN,CAAeyB;MAC3BP,IAAI,EAAC;MACLQ,QAAQ,EAAElC,KAAK,CAACmC,QAAN,IAAkBnC,KAAK,CAACkC;MAClC9B,MAAM,EAAEA;MACRgC,OAAO,EAAE,iBAACC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA5B,KAAK,CAACT,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEQ,MAAM,CAACR;MACZ+B,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAElB,KAAK,CAACP,QAAN,CAAeyB;KAZ5B,CADM,GAeNM;IA9BZ,CADJ,CADJ,CADJ,EAsCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;IACNC,eAAe,EAAE,yBAAAJ,KAAK;MAClBA,KAAK,CAACC,cAAN;;IAEJI,UAAU,EAAE;GALhB,EAOI3C,aAAA,CAAC4C,cAAD,oBACQ/B;IACJT,SAAS,EAAEe,EAAE,CAAC,uEAAD;IACbb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;;IACrCb,QAAQ,EAAErB,OAAO,CAACgB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CAtCJ,CADJ,CADJ;AAyDH,CAvEuB;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\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.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.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;;IA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,IAAmBC,iBAAnB,GAAuEF,KAAvE,CAAQG,SAAR;MAAsCC,MAAtC,GAAuEJ,KAAvE,CAAsCI,MAAtC;MAA8CC,KAA9C,GAAuEL,KAAvE,CAA8CK,KAA9C;MAAwDC,UAAxD,iCAAuEN,KAAvE;;EACA,mBAAmDO,WAAW,CAACD,UAAD,EAAaL,GAAb,CAA9D;MAAQO,QAAR,gBAAQA,QAAR;MAAkBC,MAAlB,gBAAkBA,MAAlB;MAA0BC,KAA1B,gBAA0BA,KAA1B;MAAiCC,OAAjC,gBAAiCA,OAAjC;MAA0CC,IAA1C,gBAA0CA,IAA1C;;EACA,IAAMC,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;;EACA,uBAAkBe,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,IAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,IAAMV,SAAS,GAAGe,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBjB,iBALgB,CAApB;EAQA,OACIH,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAAWE,KAAK,EAAEA;GAAxD,EACIN,aAAA,CAACqB,IAAD,oBAA2BT,QAA3B,EACIZ,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,EACId,aAAA,MAAA,oBAASS;IAAUL,SAAS,EAAC;IAAgBF,GAAG,EAAEA;IAAlD,EACIF,aAAA,CAACuB,KAAD,oBACQZ;IACJa,YAAY,EAAC;IACbd,MAAM,EACFT,KAAK,CAACmB,MAAN,GACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXtB,SAAS,EAAC;MACVuB,IAAI,EAAEf,OAAO,CAACgB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLjB,OAAO,CAACkB,YAAR,CAAqB,IAArB;QACA,sBAAAnB,KAAK,CAACT,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,GACNL,aAAA,CAACyB,UAAD;oBACgBT,KAAK,CAACP,QAAN,CAAeyB;MAC3BP,IAAI,EAAC;MACLQ,QAAQ,EAAElC,KAAK,CAACmC,QAAN,IAAkBnC,KAAK,CAACkC;MAClC9B,MAAM,EAAEA;MACRgC,OAAO,EAAE,iBAACC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA5B,KAAK,CAACT,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEQ,MAAM,CAACR;MACZ+B,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAElB,KAAK,CAACP,QAAN,CAAeyB;KAZ5B,CADM,GAeNM;IA9BZ,CADJ,CADJ,CADJ,EAsCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;IACNC,eAAe,EAAE,yBAAAJ,KAAK;MAClBA,KAAK,CAACC,cAAN;;IAEJI,UAAU,EAAE;GALhB,EAMI3C,aAAA,CAAC4C,cAAD,oBACQ/B;IACJT,SAAS,EAAEe,EAAE,CAAC,uEAAD;IACbb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;;IACrCb,QAAQ,EAAErB,OAAO,CAACgB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CANJ,CAtCJ,CADJ,CADJ;AAwDH,CAtEuB;;;;"}

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

@@ -1,7 +1,6 @@
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
-import keycode from 'keycode';
 import debounce from 'lodash-es/debounce';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
@@ -151,13 +150,13 @@ const useCombobox = ({
   const handleInputKeyDown = event => {
     event.persist();
 
-    switch (event.keyCode) {
-      case keycode('backspace'):
+    switch (event.key) {
+      case 'Backspace':
         {
           return;
         }
 
-      case keycode('escape'):
+      case 'Escape':
         {
           event.preventDefault();
           setInputValue(convertToInputValue(value));
@@ -165,10 +164,10 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('tab'):
-      case keycode('enter'):
+      case 'Tab':
+      case 'Enter':
         {
-          if (event.keyCode !== keycode('tab')) {
+          if (event.key !== 'Tab') {
             event.preventDefault();
           }
 
@@ -177,7 +176,7 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('down'):
+      case 'ArrowDown':
         if (open) {
           event.preventDefault();
         } else {
@@ -188,9 +187,9 @@ const useCombobox = ({
 
         break;
 
-      case keycode('up'):
-      case keycode('home'):
-      case keycode('end'):
+      case 'ArrowUp':
+      case 'Home':
+      case 'End':
         {
           if (open) {
             event.preventDefault();
@@ -206,9 +205,9 @@ const useCombobox = ({
     }
 
     if (inline && !open) {
-      if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
-        const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
+        const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
         setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
         setOpen(true);
       }

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

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.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.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('down'):\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case keycode('up'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useProxiedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
+{"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/components/Datepicker/Datepicker.js.map

@@ -1 +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                                                        >\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                                                >\n                                                    {texts.datepicker.clear}\n                                                </button>\n                                            )}\n                                        </div>\n                                    )}\n                                </div>\n                            )}\n                        </Popover.Content>\n                    </Popover>\n                }\n            />\n        </span>\n    );\n});\n"],"names":["Datepicker","React","props","ref","externalClassName","className","handleReset","onReset","style","shortcuts","shortcutsText","otherProps","useDatepicker","calendar","input","useLocalization","texts","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":";;;;;;;;;;;IAuCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,IAAmBC,iBAAnB,GAA+GF,KAA/G,CAAQG,SAAR;MAA+CC,WAA/C,GAA+GJ,KAA/G,CAAsCK,OAAtC;MAA4DC,KAA5D,GAA+GN,KAA/G,CAA4DM,KAA5D;MAAmEC,SAAnE,GAA+GP,KAA/G,CAAmEO,SAAnE;MAA8EC,aAA9E,GAA+GR,KAA/G,CAA8EQ,aAA9E;MAAgGC,UAAhG,iCAA+GT,KAA/G;;EACA,qBAA4BU,aAAa,CAACD,UAAD,EAAaR,GAAb,CAAzC;MAAQU,QAAR,kBAAQA,QAAR;MAAkBC,KAAlB,kBAAkBA,KAAlB;;EACA,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,IAAMX,SAAS,GAAGY,EAAE,CAAC,2CAAD,EAA8Cb,iBAA9C,CAApB;EAEA,OACIH,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAAaG,KAAK,EAAEA;GAA1D,EACIP,aAAA,CAACiB,KAAD,oBACQJ;IACJK,MAAM,EACFlB,aAAA,CAACmB,OAAD,MAAA,EACInB,aAAA,CAACmB,OAAO,CAACC,OAAT,MAAA,EACIpB,aAAA,CAACqB,UAAD;oBACgBN,KAAK,CAACO,UAAN,CAAiBC;MAC7BC,QAAQ,EAAEX,KAAK,CAACW,QAAN,IAAkBX,KAAK,CAACY;MAClCC,IAAI,EAAC;KAHT,CADJ,CADJ,EAQI1B,aAAA,CAACmB,OAAO,CAACQ,OAAT,MAAA,EACK;MAAA,IAAGC,KAAH,QAAGA,KAAH;MAAA,OACG5B,aAAA,MAAA;QAAKI,SAAS,EAAC;OAAf,EACIJ,aAAA,CAAC6B,QAAD,oBACQjB;QACJkB,QAAQ,EAAE,kBAACC,IAAD,EAAaC,KAAb;UACNpB,QAAQ,CAACkB,QAAT,CAAkBC,IAAlB,EAAwBC,KAAxB;UACAJ,KAAK;;QAETK,QAAQ,EAAE,CAAC;QANf,CADJ,EASKzB,SAAS,IACNR,aAAA,MAAA;QAAKI,SAAS,EAAC;OAAf,EACIJ,aAAA,OAAA;QAAMI,SAAS,EAAC;OAAhB,EACKK,aADL,aACKA,aADL,cACKA,aADL,GACsBM,KAAK,CAACO,UAAN,CAAiBd,SADvC,CADJ,EAIIR,aAAA,KAAA,MAAA,EACKQ,SAAS,CAAC0B,GAAV,CAAc,UAACC,QAAD,EAAWC,CAAX;QAAA,OACXpC,aAAA,KAAA;UAAIqC,GAAG,EAAED;SAAT,EACIpC,aAAA,SAAA;UACII,SAAS,EAAC;UACVkC,OAAO,EAAE,iBAAAN,KAAK;YACVA,KAAK,CAACO,OAAN;YACAJ,QAAQ,CAACG,OAAT,CAAiBN,KAAjB;YACAJ,KAAK;;SALb,EAQKO,QAAQ,CAACK,IARd,CADJ,CADW;OAAd,CADL,CAJJ,EAoBKnC,WAAW,IACRL,aAAA,SAAA;QACII,SAAS,EAAC;QACVkC,OAAO,EAAE,iBAAAN,KAAK;UACVA,KAAK,CAACO,OAAN;UACAlC,WAAW,CAAC2B,KAAD,CAAX;UACAJ,KAAK;;OALb,EAQKb,KAAK,CAACO,UAAN,CAAiBmB,KARtB,CArBR,CAVR,CADH;KADL,CARJ;IAHR,CADJ,CADJ;AAmEH,CAzEyB;;;;"}
+{"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","externalClassName","className","handleReset","onReset","style","shortcuts","shortcutsText","otherProps","useDatepicker","calendar","input","useLocalization","texts","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":";;;;;;;;;;;IAuCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,IAAmBC,iBAAnB,GAA+GF,KAA/G,CAAQG,SAAR;MAA+CC,WAA/C,GAA+GJ,KAA/G,CAAsCK,OAAtC;MAA4DC,KAA5D,GAA+GN,KAA/G,CAA4DM,KAA5D;MAAmEC,SAAnE,GAA+GP,KAA/G,CAAmEO,SAAnE;MAA8EC,aAA9E,GAA+GR,KAA/G,CAA8EQ,aAA9E;MAAgGC,UAAhG,iCAA+GT,KAA/G;;EACA,qBAA4BU,aAAa,CAACD,UAAD,EAAaR,GAAb,CAAzC;MAAQU,QAAR,kBAAQA,QAAR;MAAkBC,KAAlB,kBAAkBA,KAAlB;;EACA,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,IAAMX,SAAS,GAAGY,EAAE,CAAC,2CAAD,EAA8Cb,iBAA9C,CAApB;EAEA,OACIH,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAAaG,KAAK,EAAEA;GAA1D,EACIP,aAAA,CAACiB,KAAD,oBACQJ;IACJK,MAAM,EACFlB,aAAA,CAACmB,OAAD,MAAA,EACInB,aAAA,CAACmB,OAAO,CAACC,OAAT,MAAA,EACIpB,aAAA,CAACqB,UAAD;oBACgBN,KAAK,CAACO,UAAN,CAAiBC;MAC7BC,QAAQ,EAAEX,KAAK,CAACW,QAAN,IAAkBX,KAAK,CAACY;MAClCC,IAAI,EAAC;KAHT,CADJ,CADJ,EAQI1B,aAAA,CAACmB,OAAO,CAACQ,OAAT,MAAA,EACK;MAAA,IAAGC,KAAH,QAAGA,KAAH;MAAA,OACG5B,aAAA,MAAA;QAAKI,SAAS,EAAC;OAAf,EACIJ,aAAA,CAAC6B,QAAD,oBACQjB;QACJkB,QAAQ,EAAE,kBAACC,IAAD,EAAaC,KAAb;UACNpB,QAAQ,CAACkB,QAAT,CAAkBC,IAAlB,EAAwBC,KAAxB;UACAJ,KAAK;;QAETK,QAAQ,EAAE,CAAC;QANf,CADJ,EASKzB,SAAS,IACNR,aAAA,MAAA;QAAKI,SAAS,EAAC;OAAf,EACIJ,aAAA,OAAA;QAAMI,SAAS,EAAC;OAAhB,EACKK,aADL,aACKA,aADL,cACKA,aADL,GACsBM,KAAK,CAACO,UAAN,CAAiBd,SADvC,CADJ,EAIIR,aAAA,KAAA,MAAA,EACKQ,SAAS,CAAC0B,GAAV,CAAc,UAACC,QAAD,EAAWC,CAAX;QAAA,OACXpC,aAAA,KAAA;UAAIqC,GAAG,EAAED;SAAT,EACIpC,aAAA,SAAA;UACII,SAAS,EAAC;UACVkC,OAAO,EAAE,iBAAAN,KAAK;YACVA,KAAK,CAACO,OAAN;YACAJ,QAAQ,CAACG,OAAT,CAAiBN,KAAjB;YACAJ,KAAK;;SALb,EAOKO,QAAQ,CAACK,IAPd,CADJ,CADW;OAAd,CADL,CAJJ,EAmBKnC,WAAW,IACRL,aAAA,SAAA;QACII,SAAS,EAAC;QACVkC,OAAO,EAAE,iBAAAN,KAAK;UACVA,KAAK,CAACO,OAAN;UACAlC,WAAW,CAAC2B,KAAD,CAAX;UACAJ,KAAK;;OALb,EAOKb,KAAK,CAACO,UAAN,CAAiBmB,KAPtB,CApBR,CAVR,CADH;KADL,CARJ;IAHR,CADJ,CADJ;AAiEH,CAvEyB;;;;"}

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useMemo, Children, useState, createElement } from 'react';
 import { Root } from '@radix-ui/react-dialog';
 import { DialogContext } from './Context.js';
@@ -7,14 +6,12 @@ import { Content, Title, Footer, Close } from './components/Content.js';
 import { Drawer } from './components/Drawer.js';
 import { Extra } from './components/Extra.js';
 
-var _excluded = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
-
-var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
-  return useMemo(function () {
-    var children = [];
-    var drawer;
-    var extra;
-    Children.toArray(initialChildren).forEach(function (child) {
+const useSeparatedChildren = initialChildren => {
+  return useMemo(() => {
+    const children = [];
+    let drawer;
+    let extra;
+    Children.toArray(initialChildren).forEach(child => {
       var _child$type, _child$type2;
 
       if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
@@ -29,55 +26,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   }, [initialChildren]);
 };
 
-var Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
-  var initialChildren = props.children,
-      _props$closeOnEscape = props.closeOnEscape,
-      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
-      defaultOpen = props.defaultOpen,
-      _props$draggable = props.draggable,
-      draggable = _props$draggable === void 0 ? false : _props$draggable,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      open = props.open,
-      _props$showCloseButto = props.showCloseButton,
-      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
-
-  var _React$useState = useState(false),
-      drawerOpen = _React$useState[0],
-      setDrawerOpen = _React$useState[1];
-
-  var context = useMemo(function () {
-    return {
-      closeOnEscape: closeOnEscape,
-      draggable: draggable,
-      drawer: {
-        open: drawerOpen,
-        toggle: function toggle() {
-          return setDrawerOpen(function (isDrawerOpen) {
-            return !isDrawerOpen;
-          });
-        }
-      },
-      elements: {
-        drawer: drawer,
-        extra: extra
-      },
-      onClose: onClose,
-      props: otherProps,
-      showCloseButton: showCloseButton,
-      size: size,
-      ref: ref
-    };
-  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+const Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
+  const {
+    children: initialChildren,
+    closeOnEscape = true,
+    defaultOpen,
+    draggable = false,
+    onChange,
+    onClose,
+    open,
+    showCloseButton = true,
+    size = 'sm',
+    trigger,
+    ...otherProps
+  } = props;
+  const [children, drawer, extra] = useSeparatedChildren(initialChildren);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const context = useMemo(() => ({
+    closeOnEscape,
+    draggable,
+    drawer: {
+      open: drawerOpen,
+      toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
+    },
+    elements: {
+      drawer,
+      extra
+    },
+    onClose,
+    props: otherProps,
+    showCloseButton,
+    size,
+    ref
+  }), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
   return createElement(DialogContext.Provider, {
     value: context
   }, createElement(Root, {

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === Drawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n    Content,\r\n    Title,\r\n    Footer,\r\n    Close,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogTitleProps,\r\n    DialogFooterProps,\r\n    DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport type {\r\n    DialogCloseProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogDrawerProps,\r\n    DialogDrawerRenderProps,\r\n    DialogFooterProps,\r\n    DialogSize,\r\n    DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n    /**\r\n     * Aria-label for close icon button in dialog.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    close: string;\r\n    drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n    children: React.ReactNode | React.ReactNode[];\r\n    /** When `true`, pressing escape will close the dialog */\r\n    closeOnEscape?: boolean;\r\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\r\n    defaultOpen?: boolean;\r\n    /** Allows dragging the dialog around the screen (window constrained) */\r\n    draggable?: boolean;\r\n    /** Handler called when dialog closes by user interaction */\r\n    onClose?: () => void;\r\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\r\n    onChange?: (open: boolean) => void;\r\n    /** Control the open state of the dialog from outside the component  */\r\n    open?: boolean;\r\n    /** Shows the close icon button of the dialog */\r\n    showCloseButton?: boolean;\r\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n    size?: DialogSize;\r\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n    trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n    return React.useMemo(() => {\r\n        const children: any[] = [];\r\n        let drawer;\r\n        let extra;\r\n\r\n        React.Children.toArray(initialChildren).forEach((child: any) => {\r\n            if (child.type?.displayName === Drawer.displayName) {\r\n                drawer = child;\r\n            } else if (child.type?.displayName === Extra.displayName) {\r\n                extra = child;\r\n            } else {\r\n                children.push(child);\r\n            }\r\n        });\r\n\r\n        return [children, drawer, extra];\r\n    }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n    const {\r\n        children: initialChildren,\r\n        closeOnEscape = true,\r\n        defaultOpen,\r\n        draggable = false,\r\n        onChange,\r\n        onClose,\r\n        open,\r\n        showCloseButton = true,\r\n        size = 'sm',\r\n        trigger,\r\n        ...otherProps\r\n    } = props;\r\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n    const context = React.useMemo(\r\n        () => ({\r\n            closeOnEscape,\r\n            draggable,\r\n            drawer: {\r\n                open: drawerOpen,\r\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n            },\r\n            elements: {\r\n                drawer,\r\n                extra,\r\n            },\r\n            onClose,\r\n            props: otherProps,\r\n            showCloseButton,\r\n            size,\r\n            ref,\r\n        }),\r\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n    );\r\n\r\n    return (\r\n        <DialogContext.Provider value={context}>\r\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n                {trigger && <Trigger>{trigger}</Trigger>}\r\n                {children}\r\n            </DialogPrimitive.Root>\r\n        </DialogContext.Provider>\r\n    );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAA,CAAc;IACjB,MAAMC,QAAQ,GAAU,EAAxB;IACA,IAAIC,MAAJ;IACA,IAAIC,KAAJ;IAEAH,QAAA,CAAeI,OAAf,CAAuBL,eAAvB,EAAwCM,OAAxC,CAAiDC,KAAD;;;MAC5C,IAAI,gBAAAA,KAAK,CAACC,IAAN,4DAAYC,WAAZ,MAA4BC,MAAM,CAACD,WAAvC,EAAoD;QAChDN,MAAM,GAAGI,KAAT;OADJ,MAEO,IAAI,iBAAAA,KAAK,CAACC,IAAN,8DAAYC,WAAZ,MAA4BE,KAAK,CAACF,WAAtC,EAAmD;QACtDL,KAAK,GAAGG,KAAR;OADG,MAEA;QACHL,QAAQ,CAACU,IAAT,CAAcL,KAAd;;KANR;IAUA,OAAO,CAACL,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,CAAP;GAfG,EAgBJ,CAACJ,eAAD,CAhBI,CAAP;AAiBH,CAlBD;;MA8Baa,MAAM,gBAAGZ,UAAA,CAAiB,SAASY,MAAT,CAAgBC,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IACFb,QAAQ,EAAEF,eADR;IAEFgB,aAAa,GAAG,IAFd;IAGFC,WAHE;IAIFC,SAAS,GAAG,KAJV;IAKFC,QALE;IAMFC,OANE;IAOFC,IAPE;IAQFC,eAAe,GAAG,IARhB;IASFC,IAAI,GAAG,IATL;IAUFC,OAVE;IAWF,GAAGC;MACHX,KAZJ;EAaA,MAAM,CAACZ,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,IAA4BL,oBAAoB,CAACC,eAAD,CAAtD;EACA,MAAM,CAAC0B,UAAD,EAAaC,aAAb,IAA8B1B,QAAA,CAAe,KAAf,CAApC;EAEA,MAAM2B,OAAO,GAAG3B,OAAA,CACZ,OAAO;IACHe,aADG;IAEHE,SAFG;IAGHf,MAAM,EAAE;MACJkB,IAAI,EAAEK,UADF;MAEJG,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAlB;KAL5B;IAOHC,QAAQ,EAAE;MACN5B,MADM;MAENC;KATD;IAWHgB,OAXG;IAYHN,KAAK,EAAEW,UAZJ;IAaHH,eAbG;IAcHC,IAdG;IAeHR;GAfJ,CADY,EAkBZ,CAACC,aAAD,EAAgBU,UAAhB,EAA4BR,SAA5B,EAAuCf,MAAvC,EAA+CC,KAA/C,EAAsDiB,IAAtD,EAA4DI,UAA5D,EAAwEH,eAAxE,CAlBY,CAAhB;EAqBA,OACIrB,aAAA,CAAC+B,aAAa,CAACC,QAAf;IAAwBC,KAAK,EAAEN;GAA/B,EACI3B,aAAA,CAACkC,IAAD;IAAsBlB,WAAW,EAAEA;IAAaI,IAAI,EAAEA;IAAMe,YAAY,EAAEjB;GAA1E,EACKK,OAAO,IAAIvB,aAAA,CAACoC,OAAD,MAAA,EAAUb,OAAV,CADhB,EAEKtB,QAFL,CADJ,CADJ;AAQH,CA9CqB;AAgDtBW,MAAM,CAACwB,OAAP,GAAiBA,OAAjB;AACAxB,MAAM,CAACyB,OAAP,GAAiBA,OAAjB;AACAzB,MAAM,CAAC0B,KAAP,GAAeA,KAAf;AACA1B,MAAM,CAAC2B,MAAP,GAAgBA,MAAhB;AACA3B,MAAM,CAACF,KAAP,GAAeA,KAAf;AACAE,MAAM,CAACH,MAAP,GAAgBA,MAAhB;AACAG,MAAM,CAAC4B,KAAP,GAAeA,KAAf;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport type { DialogContentProps as DialogPrimitiveContentProps } from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitiveContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded relative mt-16 mx-auto animate-[fade-in_150ms] z-[997]', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        if (!dialog.closeOnEscape) {\n            event.preventDefault();\n        } else if (dialog.onClose) {\n            dialog.onClose();\n        }\n    };\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <DialogPrimitive.Close asChild>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </DialogPrimitive.Close>\n        );\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `${position.x}px` : undefined,\n                            top: dialog.draggable ? `${position.y}px` : undefined,\n                        }}\n                    >\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            {dialog.showCloseButton ? (\n                                <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                        icon=\"close\"\n                                    />\n                                </DialogPrimitive.Close>\n                            ) : null}\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useProxiedRef","position","handleProps","dragHandleProps","useDraggable","texts","useLocalization","menu","useCurrentMenu","handleCloseAutoFocus","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport type { DialogContentProps as DialogPrimitiveContentProps } from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitiveContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded relative mt-16 mx-auto animate-[fade-in_150ms] z-[997]', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        if (!dialog.closeOnEscape) {\n            event.preventDefault();\n        } else if (dialog.onClose) {\n            dialog.onClose();\n        }\n    };\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <DialogPrimitive.Close asChild>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </DialogPrimitive.Close>\n        );\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `${position.x}px` : undefined,\n                            top: dialog.draggable ? `${position.y}px` : undefined,\n                        }}>\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            {dialog.showCloseButton ? (\n                                <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                        icon=\"close\"\n                                    />\n                                </DialogPrimitive.Close>\n                            ) : null}\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useProxiedRef","position","handleProps","dragHandleProps","useDraggable","texts","useLocalization","menu","useCurrentMenu","handleCloseAutoFocus","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        >\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDrawer.displayName = 'DialogDrawer';\n\nexport { Drawer };\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","children","displayName"],"mappings":";;;;;MAcMA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;EAC5B,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBL,KAAK,CAACI,SAFU,CAApB;EAKA,OACIN,aAAA,CAACQ,MAAM,CAACC,GAAR,oBACQP;IACJI,SAAS,EAAEA;iBACD;mBACG,oBAACF,MAAM,CAACM,MAAR,2CAAC,eAAeC,IAAhB;IACbC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MADD;QAELC,OAAO,EAAE,OAFJ;QAGLC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAR;UAAmBC,QAAQ,EAAE;;OAJvC;MAMNC,MAAM,EAAE;QACJL,IAAI,EAAE,IADF;QAEJE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAR;UAAmBC,QAAQ,EAAE;SAFrC;QAGJE,aAAa,EAAE;UACXL,OAAO,EAAE;;;;IAIrBM,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;IAC3CR,GAAG,EAAEA;IApBT,EAsBK,OAAOD,KAAK,CAACoB,QAAb,KAA0B,UAA1B,GAAuCpB,KAAK,CAACoB,QAAN,CAAelB,MAAM,CAACM,MAAtB,CAAvC,GAAuER,KAAK,CAACoB,QAtBlF,CADJ;AA0BH,CAjCc;AAkCfvB,MAAM,CAACwB,WAAP,GAAqB,cAArB;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}>\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDrawer.displayName = 'DialogDrawer';\n\nexport { Drawer };\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","children","displayName"],"mappings":";;;;;MAcMA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;EAC5B,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBL,KAAK,CAACI,SAFU,CAApB;EAKA,OACIN,aAAA,CAACQ,MAAM,CAACC,GAAR,oBACQP;IACJI,SAAS,EAAEA;iBACD;mBACG,oBAACF,MAAM,CAACM,MAAR,2CAAC,eAAeC,IAAhB;IACbC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MADD;QAELC,OAAO,EAAE,OAFJ;QAGLC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAR;UAAmBC,QAAQ,EAAE;;OAJvC;MAMNC,MAAM,EAAE;QACJL,IAAI,EAAE,IADF;QAEJE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAR;UAAmBC,QAAQ,EAAE;SAFrC;QAGJE,aAAa,EAAE;UACXL,OAAO,EAAE;;;;IAIrBM,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;IAC3CR,GAAG,EAAEA;IApBT,EAqBK,OAAOD,KAAK,CAACoB,QAAb,KAA0B,UAA1B,GAAuCpB,KAAK,CAACoB,QAAN,CAAelB,MAAM,CAACM,MAAtB,CAAvC,GAAuER,KAAK,CAACoB,QArBlF,CADJ;AAyBH,CAhCc;AAiCfvB,MAAM,CAACwB,WAAP,GAAqB,cAArB;;;;"}

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

@@ -1,20 +1,18 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
-var _excluded = ["disabled", "children", "invalid", "message"];
-var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      message = props.message,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  const {
+    disabled,
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
   }, props.className);
-  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
     'text-grey-darkest': !invalid,
     'text-red': invalid,
     'opacity-50': disabled

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, invalid = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-dark': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn(\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\n        {\n            'text-grey-darkest': !invalid,\n            'text-red': invalid,\n            'opacity-50': disabled,\n        },\n        props.className\n    );\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={invalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;;;IAmBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,IAAQC,QAAR,GAAwEF,KAAxE,CAAQE,QAAR;MAAkBC,QAAlB,GAAwEH,KAAxE,CAAkBG,QAAlB;uBAAwEH,KAAxE,CAA4BI,OAA5B;MAA4BA,OAA5B,+BAAsC,KAAtC;MAA6CC,OAA7C,GAAwEL,KAAxE,CAA6CK,OAA7C;MAAyDC,UAAzD,iCAAwEN,KAAxE;;EACA,IAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;IACI,kBAAkBN;GAHN,EAKhBF,KAAK,CAACO,SALU,CAApB;EAOA,IAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;IACI,qBAAqB,CAACJ,OAD1B;IAEI,YAAYA,OAFhB;IAGI,cAAcF;GALK,EAOvBF,KAAK,CAACO,SAPiB,CAA3B;EAUA,OACIR,aAAA,QAAA,oBAAWO;IAAYC,SAAS,EAAEA;iBAAqB;IAAQN,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKE,OAAO,IACJN,aAAA,OAAA;IAAMQ,SAAS,EAAEE;IAAkBC,IAAI,EAAEN,OAAO,GAAG,OAAH,GAAaO;GAA7D,EACKN,OADL,CAHR,CADJ;AAUH,CA7BoB;;;;"}
+{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, invalid = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-dark': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn(\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\n        {\n            'text-grey-darkest': !invalid,\n            'text-red': invalid,\n            'opacity-50': disabled,\n        },\n        props.className\n    );\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={invalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,QAAF;IAAYC,QAAZ;IAAsBC,OAAO,GAAG,KAAhC;IAAuCC,OAAvC;IAAgD,GAAGC;MAAeN,KAAxE;EACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;IACI,kBAAkBN;GAHN,EAKhBF,KAAK,CAACO,SALU,CAApB;EAOA,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;IACI,qBAAqB,CAACJ,OAD1B;IAEI,YAAYA,OAFhB;IAGI,cAAcF;GALK,EAOvBF,KAAK,CAACO,SAPiB,CAA3B;EAUA,OACIR,aAAA,QAAA,oBAAWO;IAAYC,SAAS,EAAEA;iBAAqB;IAAQN,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKE,OAAO,IACJN,aAAA,OAAA;IAAMQ,SAAS,EAAEE;IAAkBC,IAAI,EAAEN,OAAO,GAAG,OAAH,GAAaO;GAA7D,EACKN,OADL,CAHR,CADJ;AAUH,CA7BoB;;;;"}

package/dist/esm/components/Form/Form.js

@@ -1,14 +1,12 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
-var _excluded = ["horizontal"];
-var Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
-  var _props$horizontal = props.horizontal,
-      horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var className = cn('yt-form', {
+const Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
   }, props.className);
   return createElement("form", Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;;;IAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;EACjC,wBAA8CD,KAA9C,CAAQE,UAAR;MAAQA,UAAR,kCAAqB,KAArB;MAA+BC,UAA/B,iCAA8CH,KAA9C;;EACA,IAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;IACI,sCAAsCH;GAH1B,EAKhBF,KAAK,CAACI,SALU,CAApB;EAQA,OAAOL,aAAA,OAAA,oBAAUI;IAAYC,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}
+{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;MAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;EACjC,MAAM;IAAEC,UAAU,GAAG,KAAf;IAAsB,GAAGC;MAAeH,KAA9C;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;IACI,sCAAsCH;GAH1B,EAKhBF,KAAK,CAACI,SALU,CAApB;EAQA,OAAOL,aAAA,OAAA,oBAAUI;IAAYC,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}