@economic/taco 1.16.2 → 1.17.0

package/dist/esm/packages/taco/src/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/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: any;\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date;\n};\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    <Popover>\n                        <Popover.Trigger>\n                            <IconButton\n                                aria-label={texts.datepicker.expand}\n                                disabled={input.disabled || input.readOnly}\n                                icon=\"calendar\"\n                            />\n                        </Popover.Trigger>\n                        <Popover.Content>\n                            {({ close }) => (\n                                <div className=\"-m-3 flex\">\n                                    <Calendar\n                                        {...calendar}\n                                        onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\n                                            calendar.onChange(date, event);\n                                            close();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                    {shortcuts && (\n                                        <div className=\"border-grey-dark flex flex-col border-l\">\n                                            <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                                {shortcutsText ?? texts.datepicker.shortcuts}\n                                            </span>\n                                            <ul>\n                                                {shortcuts.map((shortcut, i) => (\n                                                    <li key={i}>\n                                                        <button\n                                                            className=\"hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs\"\n                                                            onClick={event => {\n                                                                event.persist();\n                                                                shortcut.onClick(event);\n                                                                close();\n                                                            }}>\n                                                            {shortcut.text}\n                                                        </button>\n                                                    </li>\n                                                ))}\n                                            </ul>\n                                            {handleReset && (\n                                                <button\n                                                    className=\"text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs\"\n                                                    onClick={event => {\n                                                        event.persist();\n                                                        handleReset(event);\n                                                        close();\n                                                    }}>\n                                                    {texts.datepicker.clear}\n                                                </button>\n                                            )}\n                                        </div>\n                                    )}\n                                </div>\n                            )}\n                        </Popover.Content>\n                    </Popover>\n                }\n            />\n        </span>\n    );\n});\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":";;;;;;;;;MAuCaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAU,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,eACFlB,cAACmB,OAAO,qBACJnB,cAACmB,OAAO,CAACC,OAAO,qBACZpB,cAACqB,UAAU;oBACKP,KAAK,CAACQ,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ,IAAIZ,KAAK,CAACa,QAAQ;MAC1CC,IAAI,EAAC;MACP,CACY,eAClB1B,cAACmB,OAAO,CAACQ,OAAO,QACX,CAAC;MAAEC;KAAO,kBACP5B;MAAKG,SAAS,EAAC;oBACXH,cAAC6B,QAAQ,oBACDlB,QAAQ;MACZmB,QAAQ,EAAE,CAACC,IAAU,EAAEC,KAAwC;QAC3DrB,QAAQ,CAACmB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;QAC9BJ,KAAK,EAAE;OACV;MACDK,QAAQ,EAAE,CAAC;OACb,EACDzB,SAAS,iBACNR;MAAKG,SAAS,EAAC;oBACXH;MAAMG,SAAS,EAAC;OACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACQ,UAAU,CAACd,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC0B,GAAG,CAAC,CAACC,QAAQ,EAAEC,CAAC,kBACvBpC;MAAIqC,GAAG,EAAED;oBACLpC;MACIG,SAAS,EAAC,+DAA+D;MACzEmC,OAAO,EAAEN,KAAK;QACVA,KAAK,CAACO,OAAO,EAAE;QACfJ,QAAQ,CAACG,OAAO,CAACN,KAAK,CAAC;QACvBJ,KAAK,EAAE;;OAEVO,QAAQ,CAACK,IAAI,CACT,CAEhB,CAAC,CACD,EACJlC,WAAW,iBACRN;MACIG,SAAS,EAAC,oHAAoH;MAC9HmC,OAAO,EAAEN,KAAK;QACVA,KAAK,CAACO,OAAO,EAAE;QACfjC,WAAW,CAAC0B,KAAK,CAAC;QAClBJ,KAAK,EAAE;;OAEVd,KAAK,CAACQ,UAAU,CAACmB,KAAK,CAE9B,CAER,CAER,CACa;KAG5B,CACC;AAEf,CAAC;;;;"}
+{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Popover } from '../Popover/Popover';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: 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?: DatePickerShortcut[];\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                    <IconButton\n                        aria-label={texts.datepicker.expand}\n                        disabled={input.disabled || input.readOnly}\n                        icon=\"calendar\"\n                        popover={props => (\n                            <Popover {...props}>\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-300 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 => (\n                                                            <li key={shortcut.text}>\n                                                                <button\n                                                                    type=\"button\"\n                                                                    className=\"hover:bg-grey-100 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                                                            type=\"button\"\n                                                            className=\"my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\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                }\n            />\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","IconButton","datepicker","expand","disabled","readOnly","icon","popover","Popover","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","key","text","type","onClick","persist","clear","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAU,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,eACFlB,cAACmB,UAAU;oBACKL,KAAK,CAACM,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEV,KAAK,CAACU,QAAQ,IAAIV,KAAK,CAACW,QAAQ;MAC1CC,IAAI,EAAC,UAAU;MACfC,OAAO,EAAExB,KAAK,iBACVD,cAAC0B,OAAO,oBAAKzB,KAAK,gBACdD,cAAC0B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,kBACP5B;QAAKG,SAAS,EAAC;sBACXH,cAAC6B,QAAQ,oBACDlB,QAAQ;QACZmB,QAAQ,EAAE,CAACC,IAAU,EAAEC,KAAwC;UAC3DrB,QAAQ,CAACmB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;SACV;QACDK,QAAQ,EAAE,CAAC;SACb,EACDzB,SAAS,iBACNR;QAAKG,SAAS,EAAC;sBACXH;QAAMG,SAAS,EAAC;SACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACM,UAAU,CAACZ,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC0B,GAAG,CAACC,QAAQ,iBACnBnC;QAAIoC,GAAG,EAAED,QAAQ,CAACE;sBACdrC;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,6DAA6D;QACvEoC,OAAO,EAAEP,KAAK;UACVA,KAAK,CAACQ,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACP,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVO,QAAQ,CAACE,IAAI,CACT,CAEhB,CAAC,CACD,EACJ/B,WAAW,iBACRN;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,sHAAsH;QAChIoC,OAAO,EAAEP,KAAK;UACVA,KAAK,CAACQ,OAAO,EAAE;UACflC,WAAW,CAAC0B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVd,KAAK,CAACM,UAAU,CAACqB,KAAK,CAE9B,CAER,CAER,CACa;;KAKpC,CACC;AAEf,CAAC;AACD1C,UAAU,CAAC2C,WAAW,GAAG,YAAY;;;;"}

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

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

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

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

package/dist/esm/packages/taco/src/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 type {\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":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAa,CAAC;IACjB,MAAMC,QAAQ,GAAU,EAAE;IAC1B,IAAIC,MAAM;IACV,IAAIC,KAAK;IAETH,QAAc,CAACI,OAAO,CAACL,eAAe,CAAC,CAACM,OAAO,CAAEC,KAAU;;MACvD,IAAI,gBAAAA,KAAK,CAACC,IAAI,gDAAV,YAAYC,WAAW,MAAKC,MAAM,CAACD,WAAW,EAAE;QAChDN,MAAM,GAAGI,KAAK;OACjB,MAAM,IAAI,iBAAAA,KAAK,CAACC,IAAI,iDAAV,aAAYC,WAAW,MAAKE,KAAK,CAACF,WAAW,EAAE;QACtDL,KAAK,GAAGG,KAAK;OAChB,MAAM;QACHL,QAAQ,CAACU,IAAI,CAACL,KAAK,CAAC;;KAE3B,CAAC;IAEF,OAAO,CAACL,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC;GACnC,EAAE,CAACJ,eAAe,CAAC,CAAC;AACzB,CAAC;MAYYa,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAM,CAACC,KAAkB,EAAEC,GAA2B;EAClG,MAAM;IACFb,QAAQ,EAAEF,eAAe;IACzBgB,aAAa,GAAG,IAAI;IACpBC,WAAW;IACXC,SAAS,GAAG,KAAK;IACjBC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,eAAe,GAAG,IAAI;IACtBC,IAAI,GAAG,IAAI;IACXC,OAAO;IACP,GAAGC;GACN,GAAGX,KAAK;EACT,MAAM,CAACZ,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC,GAAGL,oBAAoB,CAACC,eAAe,CAAC;EACvE,MAAM,CAAC0B,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAc,CAAC,KAAK,CAAC;EAEzD,MAAM2B,OAAO,GAAG3B,OAAa,CACzB,OAAO;IACHe,aAAa;IACbE,SAAS;IACTf,MAAM,EAAE;MACJkB,IAAI,EAAEK,UAAU;MAChBG,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAY;KAC5D;IACDC,QAAQ,EAAE;MACN5B,MAAM;MACNC;KACH;IACDgB,OAAO;IACPN,KAAK,EAAEW,UAAU;IACjBH,eAAe;IACfC,IAAI;IACJR;GACH,CAAC,EACF,CAACC,aAAa,EAAEU,UAAU,EAAER,SAAS,EAAEf,MAAM,EAAEC,KAAK,EAAEiB,IAAI,EAAEI,UAAU,EAAEH,eAAe,CAAC,CAC3F;EAED,oBACIrB,cAAC+B,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAEN;kBAC3B3B,cAACkC,IAAoB;IAAClB,WAAW,EAAEA,WAAW;IAAEI,IAAI,EAAEA,IAAI;IAAEe,YAAY,EAAEjB;KACrEK,OAAO,iBAAIvB,cAACoC,OAAO,QAAEb,OAAO,CAAW,EACvCtB,QAAQ,CACU,CACF;AAEjC,CAAC;AAEDW,MAAM,CAACwB,OAAO,GAAGA,OAAO;AACxBxB,MAAM,CAACyB,OAAO,GAAGA,OAAO;AACxBzB,MAAM,CAAC0B,KAAK,GAAGA,KAAK;AACpB1B,MAAM,CAAC2B,MAAM,GAAGA,MAAM;AACtB3B,MAAM,CAACF,KAAK,GAAGA,KAAK;AACpBE,MAAM,CAACH,MAAM,GAAGA,MAAM;AACtBG,MAAM,CAAC4B,KAAK,GAAGA,KAAK;;;;"}
+{"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 type {\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  */\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":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAa,CAAC;IACjB,MAAMC,QAAQ,GAAU,EAAE;IAC1B,IAAIC,MAAM;IACV,IAAIC,KAAK;IAETH,QAAc,CAACI,OAAO,CAACL,eAAe,CAAC,CAACM,OAAO,CAAEC,KAAU;;MACvD,IAAI,gBAAAA,KAAK,CAACC,IAAI,gDAAV,YAAYC,WAAW,MAAKC,MAAM,CAACD,WAAW,EAAE;QAChDN,MAAM,GAAGI,KAAK;OACjB,MAAM,IAAI,iBAAAA,KAAK,CAACC,IAAI,iDAAV,aAAYC,WAAW,MAAKE,KAAK,CAACF,WAAW,EAAE;QACtDL,KAAK,GAAGG,KAAK;OAChB,MAAM;QACHL,QAAQ,CAACU,IAAI,CAACL,KAAK,CAAC;;KAE3B,CAAC;IAEF,OAAO,CAACL,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC;GACnC,EAAE,CAACJ,eAAe,CAAC,CAAC;AACzB,CAAC;MAYYa,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAM,CAACC,KAAkB,EAAEC,GAA2B;EAClG,MAAM;IACFb,QAAQ,EAAEF,eAAe;IACzBgB,aAAa,GAAG,IAAI;IACpBC,WAAW;IACXC,SAAS,GAAG,KAAK;IACjBC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,eAAe,GAAG,IAAI;IACtBC,IAAI,GAAG,IAAI;IACXC,OAAO;IACP,GAAGC;GACN,GAAGX,KAAK;EACT,MAAM,CAACZ,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC,GAAGL,oBAAoB,CAACC,eAAe,CAAC;EACvE,MAAM,CAAC0B,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAc,CAAC,KAAK,CAAC;EAEzD,MAAM2B,OAAO,GAAG3B,OAAa,CACzB,OAAO;IACHe,aAAa;IACbE,SAAS;IACTf,MAAM,EAAE;MACJkB,IAAI,EAAEK,UAAU;MAChBG,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAY;KAC5D;IACDC,QAAQ,EAAE;MACN5B,MAAM;MACNC;KACH;IACDgB,OAAO;IACPN,KAAK,EAAEW,UAAU;IACjBH,eAAe;IACfC,IAAI;IACJR;GACH,CAAC,EACF,CAACC,aAAa,EAAEU,UAAU,EAAER,SAAS,EAAEf,MAAM,EAAEC,KAAK,EAAEiB,IAAI,EAAEI,UAAU,EAAEH,eAAe,CAAC,CAC3F;EAED,oBACIrB,cAAC+B,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAEN;kBAC3B3B,cAACkC,IAAoB;IAAClB,WAAW,EAAEA,WAAW;IAAEI,IAAI,EAAEA,IAAI;IAAEe,YAAY,EAAEjB;KACrEK,OAAO,iBAAIvB,cAACoC,OAAO,QAAEb,OAAO,CAAW,EACvCtB,QAAQ,CACU,CACF;AAEjC,CAAC;AAEDW,MAAM,CAACwB,OAAO,GAAGA,OAAO;AACxBxB,MAAM,CAACyB,OAAO,GAAGA,OAAO;AACxBzB,MAAM,CAAC0B,KAAK,GAAGA,KAAK;AACpB1B,MAAM,CAAC2B,MAAM,GAAGA,MAAM;AACtB3B,MAAM,CAACF,KAAK,GAAGA,KAAK;AACpBE,MAAM,CAACH,MAAM,GAAGA,MAAM;AACtBG,MAAM,CAAC4B,KAAK,GAAGA,KAAK;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/Content.js

@@ -102,7 +102,7 @@ const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     draggable: true,
     "aria-grabbed": dragging,
     "aria-label": texts.dialog.drag,
-    className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
+    className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center"
   })), dialog.showCloseButton ? /*#__PURE__*/createElement(Close$1, {
     onClick: dialog.onClose,
     asChild: true

package/dist/esm/packages/taco/src/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 { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\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 = useMergedRef<HTMLDivElement>(ref);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative bg-white animate-[fade-in_150ms]',\n        getDialogPositionClassnames(),\n        getDialogSizeClassnames(dialog.size)\n    );\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-10',\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                        ref={internalRef}\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                                    role=\"button\"\n                                    draggable={true}\n                                    aria-grabbed={dragging}\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","useMergedRef","position","dragging","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","role","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 { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\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 = useMergedRef<HTMLDivElement>(ref);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative bg-white animate-[fade-in_150ms]',\n        getDialogPositionClassnames(),\n        getDialogSizeClassnames(dialog.size)\n    );\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-10',\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                        ref={internalRef}\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                                    role=\"button\"\n                                    draggable\n                                    aria-grabbed={dragging}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-100 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","useMergedRef","position","dragging","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","role","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Dialog/components/Extra.js

@@ -2,7 +2,7 @@ import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
 const Extra = /*#__PURE__*/forwardRef(function DialogExtra(props, ref) {
-  const className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  const className = cn('bg-grey-100 yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "dialog-extra",

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

@@ -1 +1 @@
-{"version":3,"file":"Extra.js","sources":["../../../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Extra = React.forwardRef(function DialogExtra(props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\n});\nExtra.displayName = 'DialogExtra';\n\nexport { Extra };\n"],"names":["Extra","React","DialogExtra","props","ref","className","cn","displayName"],"mappings":";;;MAKMA,KAAK,gBAAGC,UAAgB,CAAC,SAASC,WAAW,CAACC,KAAuB,EAAEC,GAA8B;EACvG,MAAMC,SAAS,GAAGC,EAAE,CAChB,6GAA6G,EAC7GH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,uCAASE,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACD,GAAG,EAAEA;KAAO;AACtF,CAAC;AACDJ,KAAK,CAACO,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"Extra.js","sources":["../../../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Extra = React.forwardRef(function DialogExtra(props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'bg-grey-100 yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\n});\nExtra.displayName = 'DialogExtra';\n\nexport { Extra };\n"],"names":["Extra","React","DialogExtra","props","ref","className","cn","displayName"],"mappings":";;;MAKMA,KAAK,gBAAGC,UAAgB,CAAC,SAASC,WAAW,CAACC,KAAuB,EAAEC,GAA8B;EACvG,MAAMC,SAAS,GAAGC,EAAE,CAChB,2GAA2G,EAC3GH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,uCAASE,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACD,GAAG,EAAEA;KAAO;AACtF,CAAC;AACDJ,KAAK,CAACO,WAAW,GAAG,aAAa;;;;"}

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

@@ -10,11 +10,11 @@ const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
     ...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
+    'text-grey-300': disabled
   }, props.className);
   const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-darkest': !invalid,
-    'text-red': invalid,
+    'text-grey-700': !invalid,
+    'text-red-500': invalid,
     'opacity-50': disabled
   }, props.className);
   return /*#__PURE__*/createElement("label", Object.assign({}, otherProps, {

package/dist/esm/packages/taco/src/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":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC7E,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,gBAAgB,EAAEN;GACrB,EACDF,KAAK,CAACO,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEAAiE,EACjE;IACI,mBAAmB,EAAE,CAACJ,OAAO;IAC7B,UAAU,EAAEA,OAAO;IACnB,YAAY,EAAEF;GACjB,EACDF,KAAK,CAACO,SAAS,CAClB;EAED,oBACIR,yCAAWO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACN,GAAG,EAAEA;MAC/DE,QAAQ,EACRE,OAAO,iBACJN;IAAMQ,SAAS,EAAEE,gBAAgB;IAAEC,IAAI,EAAEN,OAAO,GAAG,OAAO,GAAGO;KACxDN,OAAO,CAEf,CACG;AAEhB,CAAC;;;;"}
+{"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-300': 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-700': !invalid,\n            'text-red-500': 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,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC7E,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEN;GACpB,EACDF,KAAK,CAACO,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEAAiE,EACjE;IACI,eAAe,EAAE,CAACJ,OAAO;IACzB,cAAc,EAAEA,OAAO;IACvB,YAAY,EAAEF;GACjB,EACDF,KAAK,CAACO,SAAS,CAClB;EAED,oBACIR,yCAAWO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACN,GAAG,EAAEA;MAC/DE,QAAQ,EACRE,OAAO,iBACJN;IAAMQ,SAAS,EAAEE,gBAAgB;IAAEC,IAAI,EAAEN,OAAO,GAAG,OAAO,GAAGO;KACxDN,OAAO,CAEf,CACG;AAEhB,CAAC;;;;"}

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

@@ -24,10 +24,9 @@ const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, externalRef)
     children = /*#__PURE__*/createElement("span", null, props.children);
   }
   return /*#__PURE__*/createElement(Anchor$1, Object.assign({}, parentProps, props, {
-    children: children,
     ref: refCallback,
     asChild: true
-  }));
+  }), children);
 });
 const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
   const className = cn('mb-1 text-base font-bold flex w-full', props.className);
@@ -44,7 +43,7 @@ const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
   const {
     texts
   } = useLocalization();
-  const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
+  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
   const handleInteractOutside = event => {
     event.preventDefault();
   };
@@ -56,7 +55,7 @@ const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
     sideOffset: 1,
     ref: ref
   }, props.children, /*#__PURE__*/createElement(UnstyledArrow, {
-    className: "text-blue"
+    className: "text-blue-500"
   }), /*#__PURE__*/createElement(Close, {
     asChild: true
   }, /*#__PURE__*/createElement(IconButton, {

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

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Localization';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return <PopoverPrimitive.Anchor {...parentProps} {...props} children={children} ref={refCallback} asChild />;\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","placement","side","context","texts","useLocalization","handleInteractOutside","event","preventDefault","onInteractOutside","sideOffset","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}
+{"version":3,"file":"Hanger.js","sources":["../../../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Localization';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","placement","side","context","texts","useLocalization","handleInteractOutside","event","preventDefault","onInteractOutside","sideOffset","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/HoverCard/Primitives.js

@@ -15,7 +15,7 @@ const UnstyledArrow = /*#__PURE__*/forwardRef(function HoverCardArrow(props, ref
       transform: 'rotateZ(180deg)'
     }
   }), /*#__PURE__*/createElement("path", {
-    className: "text-grey-dark group-focus:text-blue-light fill-current",
+    className: "text-grey-300 fill-current group-focus:text-blue-300",
     d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
   }), /*#__PURE__*/createElement("path", {
     className: "fill-current",

package/dist/esm/packages/taco/src/components/HoverCard/Primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"Primitives.js","sources":["../../../../../../../src/components/HoverCard/Primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\n\nexport const UnstyledArrow = React.forwardRef(function HoverCardArrow(\n    props: React.SVGAttributes<SVGElement>,\n    ref: React.Ref<SVGSVGElement>\n) {\n    return (\n        <HoverCardPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"text-grey-dark group-focus:text-blue-light fill-current\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </HoverCardPrimitive.Arrow>\n    );\n});\n"],"names":["UnstyledArrow","React","HoverCardArrow","props","ref","HoverCardPrimitive","className","asChild","offset","width","height","viewBox","style","transform","d"],"mappings":";;;MAGaA,aAAa,gBAAGC,UAAgB,CAAC,SAASC,cAAc,CACjEC,KAAsC,EACtCC,GAA6B;EAE7B,oBACIH,cAACI,KAAwB;IAACC,SAAS,EAAC,4BAA4B;IAACC,OAAO;IAACC,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;kBACnGT,uCAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEO,OAAO,EAAC,YAAY;IAACC,KAAK,EAAE;MAAEC,SAAS,EAAE;;mBAC/DZ;IACIK,SAAS,EAAC,yDAAyD;IACnEQ,CAAC,EAAC;IAAoI,eAC1Ib;IACIK,SAAS,EAAC,cAAc;IACxBQ,CAAC,EAAC;IAA6G,CACjH,CACiB;AAEnC,CAAC;;;;"}
+{"version":3,"file":"Primitives.js","sources":["../../../../../../../src/components/HoverCard/Primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\n\nexport const UnstyledArrow = React.forwardRef(function HoverCardArrow(\n    props: React.SVGAttributes<SVGElement>,\n    ref: React.Ref<SVGSVGElement>\n) {\n    return (\n        <HoverCardPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"text-grey-300 fill-current group-focus:text-blue-300\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </HoverCardPrimitive.Arrow>\n    );\n});\n"],"names":["UnstyledArrow","React","HoverCardArrow","props","ref","HoverCardPrimitive","className","asChild","offset","width","height","viewBox","style","transform","d"],"mappings":";;;MAGaA,aAAa,gBAAGC,UAAgB,CAAC,SAASC,cAAc,CACjEC,KAAsC,EACtCC,GAA6B;EAE7B,oBACIH,cAACI,KAAwB;IAACC,SAAS,EAAC,4BAA4B;IAACC,OAAO;IAACC,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;kBACnGT,uCAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEO,OAAO,EAAC,YAAY;IAACC,KAAK,EAAE;MAAEC,SAAS,EAAE;;mBAC/DZ;IACIK,SAAS,EAAC,sDAAsD;IAChEQ,CAAC,EAAC;IAAoI,eAC1Ib;IACIK,SAAS,EAAC,cAAc;IACxBQ,CAAC,EAAC;IAA6G,CACjH,CACiB;AAEnC,CAAC;;;;"}

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

@@ -1,78 +1,130 @@
-import { forwardRef, useEffect, createElement, cloneElement } from 'react';
+import { forwardRef, createElement, useRef, memo, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
+import { getButtonStateClasses, getInputClasses } from './util.js';
+import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
-import { getInputClasses, getButtonStateClasses } from './util.js';
 
-const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
+const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
+const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
   const {
-    button,
-    icon,
     highlighted,
     invalid,
     onKeyDown,
-    autoFocus,
-    ...otherProps
+    postfix,
+    prefix,
+    type = 'text',
+    ...attributes
   } = props;
-  const inputRef = useMergedRef(ref);
-  const hasContainer = button || icon;
-  const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
-    'pr-8': !!hasContainer
-  }, !hasContainer && otherProps.className);
-  useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
+  const internalRef = useMergedRef(ref);
+  let handleKeyDown = onKeyDown;
   // home and end keys only navigate to the start/end of input value if the input container does not scroll
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
-  const handleKeyDown = event => {
-    if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
-      event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-      event.currentTarget.setSelectionRange(position, position);
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const input = /*#__PURE__*/createElement("input", Object.assign({}, otherProps, {
+  // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
+  if (validSetSelectionRangeTypes.includes(type)) {
+    handleKeyDown = event => {
+      if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
+        event.preventDefault();
+        const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+        event.currentTarget.setSelectionRange(position, position);
+      }
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event);
+      }
+    };
+  }
+  const prefixRef = useRef(null);
+  const prefixRect = useBoundingClientRectListener(prefixRef);
+  const postfixRef = useRef(null);
+  const postfixRect = useBoundingClientRectListener(postfixRef);
+  const className = cn(getInputClasses(props), {
+    'pl-8': !!prefix,
+    'pr-8': !!postfix
+  }, attributes.className);
+  return /*#__PURE__*/createElement("div", {
+    className: "relative inline-flex"
+  }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
-    ref: inputRef
-  }));
-  if (hasContainer) {
-    let extra;
-    if (button) {
-      const disabled = button.props.disabled || otherProps.disabled;
-      const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
-        [getButtonStateClasses(invalid)]: !props.disabled
-      }, button.props.className);
-      extra = /*#__PURE__*/cloneElement(button, {
-        className: buttonClassName,
-        disabled
-      });
-    } else if (icon) {
-      const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
-        'text-grey-dark': props.disabled,
-        'text-grey-darkest': !props.disabled
-      });
-      extra = typeof icon === 'string' ? /*#__PURE__*/createElement(Icon, {
-        className: iconClassName,
-        name: icon
-      }) : /*#__PURE__*/cloneElement(icon, {
-        className: cn(iconClassName, icon.props.className)
-      });
+    ref: internalRef,
+    style: {
+      paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
+      paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
+    },
+    type: type
+  })), prefix ? /*#__PURE__*/createElement(Affix, {
+    type: "prefix",
+    children: prefix,
+    disabled: attributes.disabled,
+    ref: prefixRef
+  }) : null, postfix ? /*#__PURE__*/createElement(Affix, {
+    type: "postfix",
+    children: postfix,
+    disabled: attributes.disabled,
+    ref: postfixRef
+  }) : null);
+});
+const Affix = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Affix(props, ref) {
+  const {
+    children,
+    disabled,
+    type
+  } = props;
+  let displayName;
+  if (children) {
+    let el = children;
+    if ( /*#__PURE__*/isValidElement(children)) {
+      var _children$type;
+      displayName = children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName;
+      if (displayName === 'Icon') {
+        el = /*#__PURE__*/cloneElement(children, {
+          className: cn('!h-5 !w-5', children.props.className)
+        });
+      }
     }
-    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    return /*#__PURE__*/createElement("div", {
-      className: containerClassName,
-      "data-taco": "input-container"
-    }, input, extra);
+    return /*#__PURE__*/createElement("span", {
+      className: cn('group absolute top-0 flex h-full items-center justify-center', {
+        'text-grey-300': disabled,
+        'text-grey-700': !disabled,
+        'left-0': type === 'prefix',
+        'right-0': type === 'postfix',
+        'px-0': displayName === 'IconButton',
+        'px-1.5': displayName === 'Icon',
+        'px-2': displayName !== 'IconButton' && displayName !== 'Icon'
+      }),
+      ref: ref
+    }, el);
+  }
+  return null;
+}));
+const Input = /*#__PURE__*/forwardRef(function LegacyInput(props, ref) {
+  var _attributes$postfix;
+  const {
+    button,
+    icon,
+    ...attributes
+  } = props;
+  let postfix;
+  if (button) {
+    const disabled = button.props.disabled || attributes.disabled;
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none', {
+      [getButtonStateClasses(attributes.invalid)]: !props.disabled
+    }, button.props.className);
+    postfix = /*#__PURE__*/cloneElement(button, {
+      className: buttonClassName,
+      disabled
+    });
+  } else if (icon) {
+    postfix = typeof icon === 'string' ? /*#__PURE__*/createElement(Icon, {
+      name: icon
+    }) : icon;
   }
-  return input;
+  return /*#__PURE__*/createElement(InputWithoutDeprecatedFeatures, Object.assign({}, attributes, {
+    postfix: (_attributes$postfix = attributes.postfix) !== null && _attributes$postfix !== void 0 ? _attributes$postfix : postfix,
+    ref: ref
+  }));
 });
 
 export { Input };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled || otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(invalid)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useMergedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;MAiBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGR,KAAK;EACzF,MAAMS,QAAQ,GAAGC,YAAY,CAAmBT,GAAG,CAAC;EACpD,MAAMU,YAAY,GAAGT,MAAM,IAAIC,IAAI;EACnC,MAAMS,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACd,KAAK,CAAC,EACtB,6CAA6C,EAC7C;IACI,MAAM,EAAE,CAAC,CAACW;GACb,EACD,CAACA,YAAY,IAAIH,UAAU,CAACI,SAAS,CACxC;EAEDb,SAAe,CAAC;IACZ,IAAIQ,SAAS,IAAIE,QAAQ,CAACM,OAAO,EAAE;MAC/BN,QAAQ,CAACM,OAAO,CAACC,KAAK,EAAE;;GAE/B,EAAE,EAAE,CAAC;;;;EAKN,MAAMC,aAAa,GAAIC,KAA4C;IAC/D,IAAI,CAACA,KAAK,CAACC,QAAQ,KAAKD,KAAK,CAACE,GAAG,KAAK,MAAM,IAAIF,KAAK,CAACE,GAAG,KAAK,KAAK,CAAC,EAAE;MAClEF,KAAK,CAACG,cAAc,EAAE;MACtB,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAG,KAAK,KAAK,GAAGF,KAAK,CAACK,aAAa,CAACC,KAAK,CAACC,MAAM,GAAG,CAAC;MAC3EP,KAAK,CAACK,aAAa,CAACG,iBAAiB,CAACJ,QAAQ,EAAEA,QAAQ,CAAC;;IAG7D,IAAIhB,SAAS,EAAE;MACXA,SAAS,CAACY,KAAK,CAAC;;GAEvB;EAED,MAAMS,KAAK,gBAAG5B,yCAAWS,UAAU;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACN,SAAS,EAAEW,aAAa;IAAEhB,GAAG,EAAEQ;KAAY;EAExH,IAAIE,YAAY,EAAE;IACd,IAAIiB,KAAU;IAEd,IAAI1B,MAAM,EAAE;MACR,MAAM2B,QAAQ,GAAG3B,MAAM,CAACF,KAAK,CAAC6B,QAAQ,IAAIrB,UAAU,CAACqB,QAAQ;MAC7D,MAAMC,eAAe,GAAGjB,EAAE,CACtB,2HAA2H,EAC3H;QACI,CAACkB,qBAAqB,CAAC1B,OAAO,CAAC,GAAG,CAACL,KAAK,CAAC6B;OAC5C,EACD3B,MAAM,CAACF,KAAK,CAACY,SAAS,CACzB;MACDgB,KAAK,gBAAG7B,YAAkB,CAACG,MAAM,EAAE;QAC/BU,SAAS,EAAEkB,eAAe;QAC1BD;OACH,CAAC;KACL,MAAM,IAAI1B,IAAI,EAAE;MACb,MAAM6B,aAAa,GAAGnB,EAAE,CACpB,8GAA8G,EAC9G;QACI,gBAAgB,EAAEb,KAAK,CAAC6B,QAAQ;QAChC,mBAAmB,EAAE,CAAC7B,KAAK,CAAC6B;OAC/B,CACJ;MACDD,KAAK,GACD,OAAOzB,IAAI,KAAK,QAAQ,gBACpBJ,cAACkC,IAAI;QAACrB,SAAS,EAAEoB,aAAa;QAAEE,IAAI,EAAE/B;QAAQ,gBAE9CJ,YAAkB,CAACI,IAAI,EAAE;QAAES,SAAS,EAAEC,EAAE,CAACmB,aAAa,EAAE7B,IAAI,CAACH,KAAK,CAACY,SAAS;OAAG,CAClF;;IAGT,MAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAA8C,EAAEL,UAAU,CAACI,SAAS,CAAC;IAEnG,oBACIb;MAAKa,SAAS,EAAEuB,kBAAkB;mBAAY;OACzCR,KAAK,EACLC,KAAK,CACJ;;EAId,OAAOD,KAAK;AAChB,CAAC;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    let handleKeyDown = onKeyDown;\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n    if (validSetSelectionRangeTypes.includes(type)) {\n        handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n\n            if (typeof onKeyDown === 'function') {\n                onKeyDown(event);\n            }\n        };\n    }\n\n    const prefixRef = React.useRef<HTMLSpanElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLSpanElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex\">\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children?: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLSpanElement>) {\n        const { children, disabled, type } = props;\n\n        let displayName: string | undefined;\n\n        if (children) {\n            let el = children;\n\n            if (React.isValidElement<IconProps>(children)) {\n                displayName = (children?.type as React.FunctionComponent)?.displayName;\n\n                if (displayName === 'Icon') {\n                    el = React.cloneElement(children, {\n                        className: cn('!h-5 !w-5', children.props.className),\n                    } as any);\n                }\n            }\n\n            return (\n                <span\n                    className={cn('group absolute top-0 flex h-full items-center justify-center', {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0': type === 'prefix',\n                        'right-0': type === 'postfix',\n                        'px-0': displayName === 'IconButton',\n                        'px-1.5': displayName === 'Icon',\n                        'px-2': displayName !== 'IconButton' && displayName !== 'Icon',\n                    })}\n                    ref={ref}>\n                    {el}\n                </span>\n            );\n        }\n\n        return null;\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            {\n                [getButtonStateClasses(attributes.invalid)]: !props.disabled,\n            },\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","includes","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","displayName","el","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name"],"mappings":"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"}