@economic/taco 2.18.0 → 2.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { IconButton } from '../IconButton/IconButton.js';
 
 const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
@@ -27,7 +27,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }, /*#__PURE__*/createElement("div", {
-    className: "mx-4 mt-4 mb-2 flex"
+    className: "mx-4 mb-2 mt-4 flex"
   }, title && /*#__PURE__*/createElement("h4", {
     className: "mb-0 flex-grow text-left"
   }, title), menu ? /*#__PURE__*/createElement(IconButton, {

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

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

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { useId } from '../../hooks/useId.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;MAuCaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACjF,MAAMQ,EAAE,GAAGC,KAAK,CAACT,KAAK,CAACQ,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACN;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACY,QAAQ;IACnB,mFAAmF,EAAEZ,KAAK,CAACY;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACZ,KAAK,CAACY,QAAQ;IACnB,kFAAkF,EAAEZ,KAAK,CAACY;GAC7F,EACPZ,KAAK,CAACU,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIX,OAAqB,IAAKI,QAAQ,CAACJ,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIY,eAAe,GAAkC,IAAI;EAEzD,IAAIT,KAAK,EAAE;IACPS,eAAe,GAAG;MACd,iBAAiB,KAAKN,UAAU;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,OAAO,gBACTrB,cAACsB,IAAsB,oBACfd,UAAU,EACVO,eAAe;oBACLV,OAAO,GAAG,MAAM,GAAGkB,SAAS;iBAChC,UAAU;IACpBpB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDQ,SAAS,EAAEA,SAAS;IACpBa,eAAe,EAAEV,YAAY;IAC7BW,SAAS,EAAET,aAAa;IACxBd,GAAG,EAAEA;mBACLF,cAACsB,SAA2B;IAACX,SAAS,EAAC;kBACnCX,cAAC0B,IAAI;IAACC,IAAI,EAAEvB,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEO,SAAS,EAAC;IAAoB,CACjD,CAErC;EAED,IAAIL,KAAK,EAAE;IACP,MAAMsB,uBAAuB,GAAGhB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEX,KAAK,CAACY;KAC7C,CAAC;IAEF,oBACIb;MAAMW,SAAS,EAAEiB,uBAAuB;mBAAY;OAC/CP,OAAO,eACRrB;MAAO6B,OAAO,EAAEpB,EAAE;MAAEA,EAAE,KAAKA;OACtBH,KAAK,CACF,CACL;;EAIf,OAAOe,OAAO;AAClB,CAAC;AACDtB,QAAQ,CAAC+B,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;MAuCaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACjF,MAAMQ,EAAE,GAAGC,KAAK,CAACT,KAAK,CAACQ,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACN;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACY,QAAQ;IACnB,mFAAmF,EAAEZ,KAAK,CAACY;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACZ,KAAK,CAACY,QAAQ;IACnB,kFAAkF,EAAEZ,KAAK,CAACY;GAC7F,EACPZ,KAAK,CAACU,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIX,OAAqB,IAAKI,QAAQ,CAACJ,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIY,eAAe,GAAkC,IAAI;EAEzD,IAAIT,KAAK,EAAE;IACPS,eAAe,GAAG;MACd,iBAAiB,KAAKN,UAAU;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,OAAO,gBACTrB,cAACsB,IAAsB,oBACfd,UAAU,EACVO,eAAe;oBACLV,OAAO,GAAG,MAAM,GAAGkB,SAAS;iBAChC,UAAU;IACpBpB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDQ,SAAS,EAAEA,SAAS;IACpBa,eAAe,EAAEV,YAAY;IAC7BW,SAAS,EAAET,aAAa;IACxBd,GAAG,EAAEA;mBACLF,cAACsB,SAA2B;IAACX,SAAS,EAAC;kBACnCX,cAAC0B,IAAI;IAACC,IAAI,EAAEvB,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEO,SAAS,EAAC;IAAoB,CACjD,CAErC;EAED,IAAIL,KAAK,EAAE;IACP,MAAMsB,uBAAuB,GAAGhB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEX,KAAK,CAACY;KAC7C,CAAC;IAEF,oBACIb;MAAMW,SAAS,EAAEiB,uBAAuB;mBAAY;OAC/CP,OAAO,eACRrB;MAAO6B,OAAO,EAAEpB,EAAE;MAAEA,EAAE,KAAKA;OACtBH,KAAK,CACF,CACL;;EAIf,OAAOe,OAAO;AAClB,CAAC;AACDtB,QAAQ,CAAC+B,WAAW,GAAG,UAAU;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Root, Anchor, Portal, Content } from '@radix-ui/react-popover';

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,kBACRpB,cAACyB;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAArB,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF7B,MAAM,kBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC2B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEnC,KAAK,CAACoC,QAAQ,IAAIpC,KAAK,CAACmC,QAAQ;MAC1C/B,MAAM,EAAEA,MAAM;MACdiC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAA/B,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAS,mBAAA,uBAAjBA,mBAAA,CAAmBR,KAAK,EAAE;OAC7B;MACD/B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfgC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEpB,KAAK,CAACP,QAAQ,CAAC2B;MAC1B,IACFO;KAEV,CACA,CACgB,eAC1B1C,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDK,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5Cd,QAAQ,EAAEvB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,kBACRpB,cAACyB;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAArB,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF7B,MAAM,kBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC2B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEnC,KAAK,CAACoC,QAAQ,IAAIpC,KAAK,CAACmC,QAAQ;MAC1C/B,MAAM,EAAEA,MAAM;MACdiC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAA/B,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAS,mBAAA,uBAAjBA,mBAAA,CAAmBR,KAAK,EAAE;OAC7B;MACD/B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfgC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEpB,KAAK,CAACP,QAAQ,CAAC2B;MAC1B,IACFO;KAEV,CACA,CACgB,eAC1B1C,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDK,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5Cd,QAAQ,EAAEvB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Calendar } from '../Calendar/Calendar.js';

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 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                        tabIndex={-1}\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                                            />\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:wcag-grey-200 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=\"mx-auto my-4 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                        tooltip={texts.datepicker.calendar}\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","tabIndex","popover","Popover","Content","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,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,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEzB,KAAK,mBACVD,cAAC2B,OAAO,oBAAK1B,KAAK,gBACdD,cAAC2B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,oBACP7B;QAAKG,SAAS,EAAC;sBACXH,cAAC8B,QAAQ,oBACDnB,QAAQ;QACZoB,QAAQ,EAAEA,CAACC,IAAU,EAAEC,KAAwC;UAC3DtB,QAAQ,CAACoB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;;SAEb,EACDrB,SAAS,mBACNR;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,mBACnBnC;QAAIoC,GAAG,EAAED,QAAQ,CAACE;sBACdrC;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,+DAA+D;QACzEoC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACN,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVM,QAAQ,CAACE,IAAI,CACT,CACR,CACR,CAAC,CACD,EACJ/B,WAAW,mBACRN;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,sHAAsH;QAChIoC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACflC,WAAW,CAAC2B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVf,KAAK,CAACM,UAAU,CAACqB,KAAK,CAClB,CACZ,CACC,CACT,CACC,CACT,CACa,CACZ,CACb;MACDC,OAAO,EAAE5B,KAAK,CAACM,UAAU,CAACT;;KAGpC,CACC;AAEf,CAAC;AACDZ,UAAU,CAAC4C,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\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                        tabIndex={-1}\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                                            />\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:wcag-grey-200 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=\"mx-auto my-4 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                        tooltip={texts.datepicker.calendar}\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","tabIndex","popover","Popover","Content","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","tooltip","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,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,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEzB,KAAK,mBACVD,cAAC2B,OAAO,oBAAK1B,KAAK,gBACdD,cAAC2B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,oBACP7B;QAAKG,SAAS,EAAC;sBACXH,cAAC8B,QAAQ,oBACDnB,QAAQ;QACZoB,QAAQ,EAAEA,CAACC,IAAU,EAAEC,KAAwC;UAC3DtB,QAAQ,CAACoB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;;SAEb,EACDrB,SAAS,mBACNR;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,mBACnBnC;QAAIoC,GAAG,EAAED,QAAQ,CAACE;sBACdrC;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,+DAA+D;QACzEoC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACN,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVM,QAAQ,CAACE,IAAI,CACT,CACR,CACR,CAAC,CACD,EACJ/B,WAAW,mBACRN;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,sHAAsH;QAChIoC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACflC,WAAW,CAAC2B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVf,KAAK,CAACM,UAAU,CAACqB,KAAK,CAClB,CACZ,CACC,CACT,CACC,CACT,CACa,CACZ,CACb;MACDC,OAAO,EAAE5B,KAAK,CAACM,UAAU,CAACT;;KAGpC,CACC;AAEf,CAAC;AACDZ,UAAU,CAAC4C,WAAW,GAAG,YAAY;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { getDialogPositionClassnames, getDialogSizeClassnames } from '../util.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
@@ -57,8 +57,8 @@ const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   const {
     texts
   } = useLocalization();
-  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
-  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow', {
+  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-full print:m-0 print:overflow-visible');
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full', {
     'rounded-b-none': !!dialog.elements.extra
   }, props.className);
   const handleEscapeKeyDown = event => {
@@ -100,14 +100,14 @@ 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-100 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 print:hidden"
   }))), dialog.showCloseButton ? ( /*#__PURE__*/createElement(Close$1, {
     onClick: dialog.onClose,
     asChild: true
   }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.dialog.close,
-    className: "absolute top-0 right-0 mt-2 mr-2",
+    className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
     icon: "close"
   }))) : null), dialog.elements.drawer, dialog.elements.extra))));
 });

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] rounded',\n        getDialogPositionClassnames(),\n        getDialogSizeClassnames(dialog.size)\n    );\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-10 shadow',\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            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </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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"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\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] rounded',\n        getDialogPositionClassnames(),\n        getDialogSizeClassnames(dialog.size),\n        'print:w-full print:h-full print:m-0 print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full',\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            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </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 print:hidden\"\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 right-0 top-0 mr-2 mt-2 print:hidden\"\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/DialogDrawer.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useCurrentDialog } from '../Context.js';
 import { motion } from 'framer-motion';
 

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

@@ -1 +1 @@
-{"version":3,"file":"DialogDrawer.js","sources":["../../../../../../../../src/components/Dialog/components/DialogDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst DialogDrawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}>\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDialogDrawer.displayName = 'DialogDrawer';\n\nexport { DialogDrawer };\n"],"names":["DialogDrawer","React","props","ref","dialog","useCurrentDialog","className","cn","motion","div","_dialog$drawer","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","_dialog$drawer2","children","displayName"],"mappings":";;;;;MAcMA,YAAY,gBAAGC,UAAgB,CAAC,SAASD,YAAYA,CAACE,KAAwB,EAAEC,GAA8B;;EAChH,MAAMC,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGAAiG,EACjGL,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACO,MAAM,CAACC,GAAG,oBACHP,KAAK;IACTI,SAAS,EAAEA,SAAS;iBACV,eAAe;mBACZ,GAAAI,cAAA,GAACN,MAAM,CAACO,MAAM,cAAAD,cAAA,eAAbA,cAAA,CAAeE,IAAI;IACjCC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MAAM;QACZC,OAAO,EAAE,OAAO;QAChBC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;;OAC5C;MACDC,MAAM,EAAE;QACJL,IAAI,EAAE,IAAI;QACVE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;SAAK;QAC9CE,aAAa,EAAE;UACXL,OAAO,EAAE;;;KAGpB;IACDM,OAAO,EAAE,CAAAC,eAAA,GAAAnB,MAAM,CAACO,MAAM,cAAAY,eAAA,eAAbA,eAAA,CAAeX,IAAI,GAAG,SAAS,GAAG,QAAQ;IACnDT,GAAG,EAAEA;MACJ,OAAOD,KAAK,CAACsB,QAAQ,KAAK,UAAU,GAAGtB,KAAK,CAACsB,QAAQ,CAACpB,MAAM,CAACO,MAAM,CAAC,GAAGT,KAAK,CAACsB,QAAQ,CAC7E;AAErB,CAAC;AACDxB,YAAY,CAACyB,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"DialogDrawer.js","sources":["../../../../../../../../src/components/Dialog/components/DialogDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'clsx';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst DialogDrawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}>\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDialogDrawer.displayName = 'DialogDrawer';\n\nexport { DialogDrawer };\n"],"names":["DialogDrawer","React","props","ref","dialog","useCurrentDialog","className","cn","motion","div","_dialog$drawer","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","_dialog$drawer2","children","displayName"],"mappings":";;;;;MAcMA,YAAY,gBAAGC,UAAgB,CAAC,SAASD,YAAYA,CAACE,KAAwB,EAAEC,GAA8B;;EAChH,MAAMC,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGAAiG,EACjGL,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACO,MAAM,CAACC,GAAG,oBACHP,KAAK;IACTI,SAAS,EAAEA,SAAS;iBACV,eAAe;mBACZ,GAAAI,cAAA,GAACN,MAAM,CAACO,MAAM,cAAAD,cAAA,eAAbA,cAAA,CAAeE,IAAI;IACjCC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MAAM;QACZC,OAAO,EAAE,OAAO;QAChBC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;;OAC5C;MACDC,MAAM,EAAE;QACJL,IAAI,EAAE,IAAI;QACVE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;SAAK;QAC9CE,aAAa,EAAE;UACXL,OAAO,EAAE;;;KAGpB;IACDM,OAAO,EAAE,CAAAC,eAAA,GAAAnB,MAAM,CAACO,MAAM,cAAAY,eAAA,eAAbA,eAAA,CAAeX,IAAI,GAAG,SAAS,GAAG,QAAQ;IACnDT,GAAG,EAAEA;MACJ,OAAOD,KAAK,CAACsB,QAAQ,KAAK,UAAU,GAAGtB,KAAK,CAACsB,QAAQ,CAACpB,MAAM,CAACO,MAAM,CAAC,GAAGT,KAAK,CAACsB,QAAQ,CAC7E;AAErB,CAAC;AACDxB,YAAY,CAACyB,WAAW,GAAG,cAAc;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 
 const Extra = /*#__PURE__*/forwardRef(function DialogExtra(props, ref) {
   const className = cn('wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);

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        'wcag-grey-100 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,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EACvG,MAAMC,SAAS,GAAGC,EAAE,CAChB,6FAA6F,EAC7FH,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 'clsx';\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        'wcag-grey-100 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,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EACvG,MAAMC,SAAS,GAAGC,EAAE,CAChB,6FAA6F,EAC7FH,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/Drawer/Drawer.js

@@ -1,5 +1,5 @@
 import { forwardRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Root } from '@radix-ui/react-dialog';
 import { DrawerContext } from './Context.js';
 import { Content, InnerContent, Title, Footer, Close, Actions } from './components/Content.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** When `true`, pressing escape will close the drawer */\n    closeOnEscape?: boolean;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean | undefined) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' preventing focus from leaving drawer content */\n    focusTrap?: boolean;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: undefined | (() => void);\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        open: openProp,\n        defaultOpen: defaultOpenProp,\n        // if onChange is not provided, then replace it with empty function, needed for useControllableState\n        onChange = () => {\n            // do nothing.\n        },\n        variant = 'embedded',\n        className,\n        closeOnEscape = true,\n        onResize,\n        onClose,\n        size = 'md',\n        trigger,\n        children,\n        focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [open, setOpen] = useControllableState<boolean | undefined>({\n        prop: openProp,\n        defaultProp: defaultOpenProp,\n        onChange,\n    });\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            open,\n            setOpen,\n            variant,\n            focusTrap,\n            showCloseButton,\n            outlet,\n        }),\n        [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]\n    );\n\n    // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose && onClose();\n    }, []);\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    React.useEffect(() => {\n        if (open) {\n            // if drawerStack is defined, this means that another drawer was opened before\n            if (drawerStack) {\n                drawerStack();\n            }\n            drawerStack = close;\n        } else {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            if (drawerStack === close) {\n                drawerStack = undefined;\n            }\n        }\n    }, [open]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DialogPrimitive.Root modal={variant === 'overlay' ? true : false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["DEFAULT_OUTLET_NAME","Outlet","React","props","ref","className","cn","name","_props$name","drawerStack","Drawer","open","openProp","defaultOpen","defaultOpenProp","onChange","variant","closeOnEscape","onResize","onClose","size","trigger","children","focusTrap","undefined","showCloseButton","outletName","otherProps","setOpen","useControllableState","prop","defaultProp","outlet","setOutlet","context","close","outletSelector","outletElement","_document$querySelect","document","querySelector","body","DrawerContext","Provider","value","DialogPrimitive","modal","onOpenChange","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** When `true`, pressing escape will close the drawer */\n    closeOnEscape?: boolean;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean | undefined) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' preventing focus from leaving drawer content */\n    focusTrap?: boolean;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: undefined | (() => void);\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        open: openProp,\n        defaultOpen: defaultOpenProp,\n        // if onChange is not provided, then replace it with empty function, needed for useControllableState\n        onChange = () => {\n            // do nothing.\n        },\n        variant = 'embedded',\n        className,\n        closeOnEscape = true,\n        onResize,\n        onClose,\n        size = 'md',\n        trigger,\n        children,\n        focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [open, setOpen] = useControllableState<boolean | undefined>({\n        prop: openProp,\n        defaultProp: defaultOpenProp,\n        onChange,\n    });\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            open,\n            setOpen,\n            variant,\n            focusTrap,\n            showCloseButton,\n            outlet,\n        }),\n        [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]\n    );\n\n    // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose && onClose();\n    }, []);\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    React.useEffect(() => {\n        if (open) {\n            // if drawerStack is defined, this means that another drawer was opened before\n            if (drawerStack) {\n                drawerStack();\n            }\n            drawerStack = close;\n        } else {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            if (drawerStack === close) {\n                drawerStack = undefined;\n            }\n        }\n    }, [open]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DialogPrimitive.Root modal={variant === 'overlay' ? true : false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["DEFAULT_OUTLET_NAME","Outlet","React","props","ref","className","cn","name","_props$name","drawerStack","Drawer","open","openProp","defaultOpen","defaultOpenProp","onChange","variant","closeOnEscape","onResize","onClose","size","trigger","children","focusTrap","undefined","showCloseButton","outletName","otherProps","setOpen","useControllableState","prop","defaultProp","outlet","setOutlet","context","close","outletSelector","outletElement","_document$querySelect","document","querySelector","body","DrawerContext","Provider","value","DialogPrimitive","modal","onOpenChange","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":";;;;;;;;AAgEA,MAAMA,mBAAmB,GAAG,SAAS;AAErC,MAAMC,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;;EAC9F,MAAMC,SAAS,GAAGC,EAAE,CAAC,8CAA8C,EAAEH,KAAK,CAACE,SAAS,CAAC;EACrF,oBACIH,uCACQC,KAAK;IACTE,SAAS,EAAEA,SAAS;iBACV,eAAe;4CACFF,KAAK,CAACI,IAAI,cAAAC,WAAA,cAAAA,WAAA,GAAIR,mBAAmB;IACxDI,GAAG,EAAEA;KACP;AAEV,CAAC,CAAC;AAEF;AACA,IAAIK,WAAqC;MAa5BC,MAAM,gBAAGR,UAAgB,CAAC,SAASQ,MAAMA,CAACP,KAAkB,EAAEC,GAA2B;EAClG,MAAM;IACFO,IAAI,EAAEC,QAAQ;IACdC,WAAW,EAAEC,eAAe;;IAE5BC,QAAQ,GAAGA;;KAEV;IACDC,OAAO,GAAG,UAAU;IACpBX,SAAS;IACTY,aAAa,GAAG,IAAI;IACpBC,QAAQ;IACRC,OAAO;IACPC,IAAI,GAAG,IAAI;IACXC,OAAO;IACPC,QAAQ;IACRC,SAAS,GAAGpB,KAAK,CAACoB,SAAS,KAAKC,SAAS,IAAIrB,KAAK,CAACa,OAAO,KAAK,SAAS,GAAG,IAAI,GAAGb,KAAK,CAACoB,SAAS;IACjGE,eAAe,GAAG,IAAI;IACtBC,UAAU;IACV,GAAGC;GACN,GAAGxB,KAAK;EAET,MAAM,CAACQ,IAAI,EAAEiB,OAAO,CAAC,GAAGC,oBAAoB,CAAsB;IAC9DC,IAAI,EAAElB,QAAQ;IACdmB,WAAW,EAAEjB,eAAe;IAC5BC;GACH,CAAC;EAEF,MAAM,CAACiB,MAAM,EAAEC,SAAS,CAAC,GAAG/B,QAAc,EAAe;EAEzD,MAAMgC,OAAO,GAAGhC,OAAa,CACzB,OAAO;IACHe,aAAa;IACbE,OAAO;IACPD,QAAQ;IACRf,KAAK,EAAEwB,UAAU;IACjBP,IAAI;IACJhB,GAAG;IACHO,IAAI;IACJiB,OAAO;IACPZ,OAAO;IACPO,SAAS;IACTE,eAAe;IACfO;GACH,CAAC,EACF,CAACf,aAAa,EAAEN,IAAI,EAAEiB,OAAO,EAAED,UAAU,EAAEX,OAAO,EAAEE,QAAQ,EAAEC,OAAO,EAAEC,IAAI,EAAEG,SAAS,EAAEE,eAAe,EAAEO,MAAM,CAAC,CACnH;;EAGD,MAAMG,KAAK,GAAGjC,WAAiB,CAAC;IAC5B0B,OAAO,CAAC,KAAK,CAAC;IACdT,OAAO,IAAIA,OAAO,EAAE;GACvB,EAAE,EAAE,CAAC;EAENjB,SAAe,CAAC;;IACZ,MAAMkC,cAAc,yDAAyDV,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI1B,uBAAuB;IAClH,MAAMqC,aAAa,IAAAC,qBAAA,GAAGC,QAAQ,CAACC,aAAa,CAAcJ,cAAc,CAAC,cAAAE,qBAAA,cAAAA,qBAAA,GAAIC,QAAQ,CAACE,IAAI;IAC1FR,SAAS,CAACI,aAAa,CAAC;GAC3B,EAAE,CAACX,UAAU,CAAC,CAAC;EAEhBxB,SAAe,CAAC;IACZ,IAAIS,IAAI,EAAE;;MAEN,IAAIF,WAAW,EAAE;QACbA,WAAW,EAAE;;MAEjBA,WAAW,GAAG0B,KAAK;KACtB,MAAM;;;MAGH,IAAI1B,WAAW,KAAK0B,KAAK,EAAE;QACvB1B,WAAW,GAAGe,SAAS;;;GAGlC,EAAE,CAACb,IAAI,CAAC,CAAC;EAEV,oBACIT,cAACwC,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAEV;kBAC3BhC,cAAC2C,IAAoB;IAACC,KAAK,EAAE9B,OAAO,KAAK,SAAS,GAAG,IAAI,GAAG,KAAK;IAAEL,IAAI,EAAEA,IAAI;IAAEoC,YAAY,EAAEnB;KACxFP,OAAO,iBAAInB,cAAC8C,OAAO,QAAE3B,OAAO,CAAW,EACvCC,QAAQ,CACU,CACF;AAEjC,CAAC;AAEDZ,MAAM,CAACsC,OAAO,GAAGA,OAAO;AACxBtC,MAAM,CAACuC,OAAO,GAAGA,OAAO;AACxBvC,MAAM,CAACwC,YAAY,GAAGA,YAAY;AAClCxC,MAAM,CAACyC,KAAK,GAAGA,KAAK;AACpBzC,MAAM,CAAC0C,MAAM,GAAGA,MAAM;AACtB1C,MAAM,CAAC2C,KAAK,GAAGA,KAAK;AACpB3C,MAAM,CAAC4C,OAAO,GAAGA,OAAO;AACxB5C,MAAM,CAACT,MAAM,GAAGA,MAAM;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';

package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n    getBackdropClassNames,\n    getDrawerContainerClassNames,\n    getDrawerContentClassNames,\n    getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n    close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\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 DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,\n     * so it can be easily overriden in exceptional scenarious.\n     *  */\n    const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);\n    return (\n        <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            <span className=\"line-clamp-2 inline-block w-4/6 overflow-y-hidden\">{children}</span>\n        </DialogPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n    return <Group {...otherProps} className={cName} ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n     * default value - true\n     */\n    isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, isScrollable = true, children, ...otherProps } = props;\n    const cName = cn(\n        'grow flex flex-col',\n        {\n            'overflow-y-hidden': isScrollable,\n            'p-4': !isScrollable,\n        },\n        className\n    );\n    return (\n        <div {...otherProps} className={cName} ref={ref}>\n            {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n        </div>\n    );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n    const { children, ...otherProps } = props;\n    const { open = false, variant, outlet } = useCurrentDrawer();\n\n    const backdropClassNames = React.useMemo(() => {\n        return getBackdropClassNames(open);\n    }, [open]);\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n            {variant === 'overlay' ? (\n                <DialogPrimitive.Overlay forceMount>\n                    {/* Animate backdrop appearance for overlay version of Drawer */}\n                    <Backdrop className={backdropClassNames} />\n                </DialogPrimitive.Overlay>\n            ) : null}\n            {children}\n        </DialogPrimitive.Portal>\n    );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n    props: UntrappedFocusDrawerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { onEscape, children, ...otherProps } = props;\n\n    useGlobalKeyDown('Escape', onEscape);\n\n    return (\n        <div {...otherProps} ref={ref}>\n            <FocusScope autoFocus={true} restoreFocus={true}>\n                {children}\n            </FocusScope>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n    props: DrawerContentProps,\n    externalRef: React.Ref<HTMLDivElement>\n) {\n    const {\n        size,\n        onClose,\n        onResize,\n        open = false,\n        closeOnEscape,\n        variant,\n        focusTrap,\n        showCloseButton,\n        setOpen,\n    } = useCurrentDrawer();\n    const { className, style, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant, open);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant, open]);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n        if (isTargetInsideDrawerContent) {\n            if (!closeOnEscape) {\n                event.preventDefault();\n            } else {\n                setOpen && setOpen(false);\n                if (onClose) {\n                    onClose();\n                }\n            }\n        }\n    };\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        setContainerWidth(contentRef.current?.offsetWidth);\n    }, [contentRef, open]);\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    const styleProp = {\n        ...style,\n        ...{ width: resizedWidth },\n    };\n\n    return focusTrap ? (\n        <DialogPrimitive.Content\n            forceMount\n            {...otherProps}\n            className={contentClassName}\n            onEscapeKeyDown={handleEscapeKeyDown}\n            onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            ref={ref}\n            style={styleProp}>\n            {content}\n        </DialogPrimitive.Content>\n    ) : (\n        <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n            {content}\n        </UntrappedFocusDrawerContent>\n    );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { children } = props;\n\n    return (\n        <Portal>\n            <DrawerContent {...props} ref={externalRef}>\n                {children}\n            </DrawerContent>\n        </Portal>\n    );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","className","otherProps","cName","cn","DialogPrimitive","Footer","DrawerFooter","Actions","Group","Close","DrawerClose","onClose","useCurrentDrawer","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","externalRef","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","style","texts","useLocalization","useMergedRef","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","_contentRef$current","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAMA,UAAU,GAAG,GAAG;AACtB,MAAMC,UAAU,GAAG,IAAI;IAMXC;AAAZ,WAAYA,yBAAyB;EACjCA,gDAAmB;EACnBA,8CAAiB;AACrB,CAAC,EAHWA,yBAAyB,KAAzBA,yBAAyB;AAKrC,MAAMC,iBAAiB,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,iBAAiBA,CAAC;EAAEG,QAAQ;EAAEC,OAAO;EAAEC;CAAkB,EAAEC,GAAG;EAC9G,MAAMC,KAAK,GAAGA;IACVH,OAAO,CAAC,IAAII,WAAW,CAAC,OAAO,CAAC,CAAC;GACpC;EAED,OAAOL,QAAQ,CAAC;IAAEI,KAAK;IAAED,GAAG;IAAE,GAAGD;GAAa,CAAC;AACnD,CAAC,CAAC;MAGWI,KAAK,gBAAGR,cAAK,CAACC,UAAU,CAAC,SAASQ,WAAWA,CAACC,KAAuB,EAAEL,GAAkC;EAClH,MAAM;IAAEM,SAAS;IAAET,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;;;;;;EAMpD,MAAMG,KAAK,GAAGC,EAAE,CAAC,yEAAyE,EAAEH,SAAS,CAAC;EACtG,oBACIX,6BAACe,OAAqB;IAACJ,SAAS,EAAEE;KAAWD,UAAU;IAAEP,GAAG,EAAEA;mBAC1DL;IAAMW,SAAS,EAAC;KAAqDT,QAAQ,CAAQ,CACjE;AAEhC,CAAC;MAGYc,MAAM,gBAAGhB,cAAK,CAACC,UAAU,CAAC,SAASgB,YAAYA,CAACP,KAAwB,EAAEL,GAA8B;EACjH,MAAM;IAAEM,SAAS;IAAE,GAAGC;GAAY,GAAGF,KAAK;;;;EAI1C,MAAMG,KAAK,GAAGC,EAAE,CAAC,oEAAoE,EAAEJ,KAAK,CAACC,SAAS,CAAC;EACvG,oBAAOX,sDAASY,UAAU;IAAED,SAAS,EAAEE,KAAK;IAAER,GAAG,EAAEA;KAAO;AAC9D,CAAC;MAEYa,OAAO,gBAAGlB,cAAK,CAACC,UAAU,CAAC,SAASiB,OAAOA,CAACR,KAAiB,EAAEL,GAA8B;EACtG,MAAM;IAAEM,SAAS;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC1C,MAAMG,KAAK,GAAGC,EAAE,CAAC,uCAAuC,EAAEH,SAAS,CAAC;EACpE,oBAAOX,6BAACmB,KAAK,oBAAKP,UAAU;IAAED,SAAS,EAAEE,KAAK;IAAER,GAAG,EAAEA;KAAO;AAChE,CAAC;MAGYe,KAAK,gBAAGpB,cAAK,CAACC,UAAU,CAAC,SAASoB,WAAWA,CAACX,KAAuB,EAAEL,GAAiC;EACjH,MAAM;IAAEiB;GAAS,GAAGC,gBAAgB,EAAE;EAEtC,oBAAOvB,6BAACe,OAAqB,oBAAKL,KAAK;IAAEP,OAAO,EAAEmB,OAAO;IAAEjB,GAAG,EAAEA,GAAG;IAAEmB,OAAO;KAAG;AACnF,CAAC;MAcYC,YAAY,gBAAGzB,cAAK,CAACC,UAAU,CAAC,SAASwB,YAAYA,CAC9Df,KAA8B,EAC9BL,GAA8B;EAE9B,MAAM;IAAEM,SAAS;IAAEe,YAAY,GAAG,IAAI;IAAExB,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EACzE,MAAMG,KAAK,GAAGC,EAAE,CACZ,oBAAoB,EACpB;IACI,mBAAmB,EAAEY,YAAY;IACjC,KAAK,EAAE,CAACA;GACX,EACDf,SAAS,CACZ;EACD,oBACIX,sDAASY,UAAU;IAAED,SAAS,EAAEE,KAAK;IAAER,GAAG,EAAEA;MACvCqB,YAAY,gBAAG1B,6BAAC2B,UAAU;IAAChB,SAAS,EAAC;KAAwBT,QAAQ,CAAc,GAAGA,QAAQ,CAC7F;AAEd,CAAC;AAED,MAAM0B,MAAM,GAAIlB,KAAwC;EACpD,MAAM;IAAER,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EACzC,MAAM;IAAEmB,IAAI,GAAG,KAAK;IAAEC,OAAO;IAAEC;GAAQ,GAAGR,gBAAgB,EAAE;EAE5D,MAAMS,kBAAkB,GAAGhC,cAAK,CAACiC,OAAO,CAAC;IACrC,OAAOC,qBAAqB,CAACL,IAAI,CAAC;GACrC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAI,CAACE,MAAM,EAAE;IACT,OAAO,IAAI;;EAGf,oBACI/B,6BAACe,QAAsB,oBAAKH,UAAU;IAAEuB,SAAS,EAAEJ,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIK;MACxDN,OAAO,KAAK,SAAS,kBAClB9B,6BAACe,OAAuB;IAACsB,UAAU;kBAE/BrC,6BAACsC,QAAQ;IAAC3B,SAAS,EAAEqB;IAAsB,CACrB,IAC1B,IAAI,EACP9B,QAAQ,CACY;AAEjC,CAAC;AAKD,MAAMqC,2BAA2B,gBAAGvC,cAAK,CAACC,UAAU,CAAC,SAASuC,qBAAqBA,CAC/E9B,KAAuC,EACvCL,GAA8B;EAE9B,MAAM;IAAEoC,QAAQ;IAAEvC,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EAEnDgC,gBAAgB,CAAC,QAAQ,EAAED,QAAQ,CAAC;EAEpC,oBACIzC,sDAASY,UAAU;IAAEP,GAAG,EAAEA;mBACtBL,6BAAC2C,UAAU;IAACC,SAAS,EAAE,IAAI;IAAEC,YAAY,EAAE;KACtC3C,QAAQ,CACA,CACX;AAEd,CAAC,CAAC;MAOW4C,aAAa,gBAAG9C,cAAK,CAACC,UAAU,CAAC,SAAS8C,OAAOA,CAC1DrC,KAAyB,EACzBsC,WAAsC;EAEtC,MAAM;IACFC,IAAI;IACJ3B,OAAO;IACP4B,QAAQ;IACRrB,IAAI,GAAG,KAAK;IACZsB,aAAa;IACbrB,OAAO;IACPsB,SAAS;IACTC,eAAe;IACfC;GACH,GAAG/B,gBAAgB,EAAE;EACtB,MAAM;IAAEZ,SAAS;IAAE4C,KAAK;IAAErD,QAAQ;IAAE,GAAGU;GAAY,GAAGF,KAAK;EAC3D,MAAM;IAAE8C;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMpD,GAAG,GAAGqD,YAAY,CAAiBV,WAAW,CAAC;;;EAIrD,MAAMW,IAAI,GAAGC,cAAc,EAAE;EAC7B,IAAIC,oBAA4E;EAEhF,IAAIF,IAAI,EAAE;IACNE,oBAAoB,GAAGA;MACnBF,IAAI,CAACrD,KAAK,EAAE;KACf;;EAGL,MAAMwD,kBAAkB,GAAW9D,cAAK,CAACiC,OAAO,CAAC,MAAMnB,EAAE,CAACiD,4BAA4B,CAACjC,OAAO,CAAC,EAAEnB,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEzH,MAAM;IAAEqD,gBAAgB;IAAEC;GAAsB,GAAGjE,cAAK,CAACiC,OAAO,CAAC;IAC7D,MAAM+B,gBAAgB,GAAGE,0BAA0B,CAACjB,IAAI,EAAEnB,OAAO,EAAED,IAAI,CAAC;IACxE,MAAMoC,oBAAoB,GAAWE,8BAA8B,EAAE;IACrE,OAAO;MAAEH,gBAAgB;MAAEC;KAAsB;GACpD,EAAE,CAAChB,IAAI,EAAEnB,OAAO,EAAED,IAAI,CAAC,CAAC;EAEzB,MAAMuC,mBAAmB,GAAIC,KAAoB;;IAC7C,MAAMC,2BAA2B,IAAAC,YAAA,GAAGlE,GAAG,CAACmE,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,QAAQ,CAACJ,KAAK,CAACK,MAAqB,CAAC;IACtF,IAAIJ,2BAA2B,EAAE;MAC7B,IAAI,CAACnB,aAAa,EAAE;QAChBkB,KAAK,CAACM,cAAc,EAAE;OACzB,MAAM;QACHrB,OAAO,IAAIA,OAAO,CAAC,KAAK,CAAC;QACzB,IAAIhC,OAAO,EAAE;UACTA,OAAO,EAAE;;;;GAIxB;EAED,MAAM,CAACsD,cAAc,EAAEC,iBAAiB,CAAC,GAAG7E,cAAK,CAAC8E,QAAQ,EAAU;EAEpE,MAAMC,cAAc,GAAG/E,cAAK,CAACgF,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM;IACFC,QAAQ;IACRC,QAAQ;IACRC,WAAW,EAAEC,eAAe;IAC5BC;GACH,GAAGC,YAAY,CAAC5B,YAAY,CAAiBqB,cAAc,CAAC,CAAC;EAE9D,MAAMQ,UAAU,GAAGvF,cAAK,CAACgF,MAAM,CAAiB,IAAI,CAAC;EAErDhF,cAAK,CAACwF,SAAS,CAAC;IACZ,IAAItC,QAAQ,EAAE;MACVA,QAAQ,CAAC+B,QAAQ,CAACQ,CAAC,CAAC;;GAE3B,EAAE,CAACR,QAAQ,CAAC,CAAC;EAEdjF,cAAK,CAACwF,SAAS,CAAC;;IACZX,iBAAiB,EAAAa,mBAAA,GAACH,UAAU,CAACf,OAAO,cAAAkB,mBAAA,uBAAlBA,mBAAA,CAAoBC,WAAW,CAAC;GACrD,EAAE,CAACJ,UAAU,EAAE1D,IAAI,CAAC,CAAC;EAEtB,MAAM+D,YAAY,GAAG5F,cAAK,CAACiC,OAAO,CAAC;IAC/B,IAAI2C,cAAc,EAAE;MAChB,OAAOiB,IAAI,CAACC,GAAG,CAACjG,UAAU,EAAEgG,IAAI,CAACE,GAAG,CAACnG,UAAU,EAAEgF,cAAc,GAAGK,QAAQ,CAACQ,CAAC,IAAI,CAAC,CAAC,CAAC;;IAEvF;GACH,EAAE,CAACb,cAAc,EAAEK,QAAQ,CAAC,CAAC;EAE9BjF,cAAK,CAACwF,SAAS,CAAC;IACZ,IAAI,CAACN,QAAQ,IAAIU,YAAY,EAAE;MAC3Bf,iBAAiB,CAACe,YAAY,CAAC;MAC/BP,aAAa,EAAE;;GAEtB,EAAE,CAACH,QAAQ,CAAC,CAAC;EAEd,IAAIc,MAAM;EAEV,IAAI,OAAO9F,QAAQ,KAAK,UAAU,EAAE;IAChC8F,MAAM,gBACFhG,6BAACoB,KAAK,qBACFpB,6BAACD,iBAAiB,QAAEG,QAAQ,CAAqB,CAExD;GACJ,MAAM;IACH8F,MAAM,GAAG9F,QAAQ;;EAGrB,MAAM+F,OAAO,gBACTjG;IAAKK,GAAG,EAAEkF,UAAU;iBAAY,QAAQ;IAAC5E,SAAS,EAAEmD;KAC/CkC,MAAM,eACPhG;IAAKW,SAAS,EAAEsD;KAA0BmB,eAAe;mBAAc,gBAAgB;IAAC/E,GAAG,EAAE0E;MACxFG,QAAQ,gBAAGlF;mBAAiB,iBAAiB;IAACW,SAAS,EAAC;IAAwC,GAAG,IAAI,CACtG,EACL0C,eAAe,kBACZrD,6BAACoB,KAAK,qBACFpB,6BAACkG,UAAU;IACPC,UAAU,EAAC,UAAU;kBACT3C,KAAK,CAAC4C,MAAM,CAAC9F,KAAK;IAC9BK,SAAS,EAAC,kCAAkC;IAC5C0F,IAAI,EAAC;IACP,CACE,IACR,IAAI,CAEf;EAED,MAAMC,SAAS,GAAG;IACd,GAAG/C,KAAK;IACR,GAAG;MAAEgD,KAAK,EAAEX;;GACf;EAED,OAAOxC,SAAS,kBACZpD,6BAACe,SAAuB;IACpBsB,UAAU;KACNzB,UAAU;IACdD,SAAS,EAAEqD,gBAAgB;IAC3BwC,eAAe,EAAEpC,mBAAmB;IACpCqC,iBAAiB,EAAE3E,OAAO,KAAK,SAAS,GAAGM,SAAS,GAAGiC,KAAK,IAAIA,KAAK,CAACM,cAAc,EAAE;IACtF+B,gBAAgB,EAAE7C,oBAAoB;IACtCxD,GAAG,EAAEA,GAAG;IACRkD,KAAK,EAAE+C;MACNL,OAAO,CACc,mBAE1BjG,6BAACuC,2BAA2B;IAACE,QAAQ,EAAE2B,mBAAmB;IAAEzD,SAAS,EAAEqD,gBAAgB;IAAET,KAAK,EAAE+C,SAAS;IAAEjG,GAAG,EAAEA;KAC3G4F,OAAO,CACkB,CACjC;AACL,CAAC;MAEYlD,OAAO,gBAAG/C,cAAK,CAACC,UAAU,CAAC,SAAS8C,OAAOA,CAACrC,KAAyB,EAAEsC,WAAsC;EACtH,MAAM;IAAE9C;GAAU,GAAGQ,KAAK;EAE1B,oBACIV,6BAAC4B,MAAM,qBACH5B,6BAAC8C,aAAa,oBAAKpC,KAAK;IAAEL,GAAG,EAAE2C;MAC1B9C,QAAQ,CACG,CACX;AAEjB,CAAC;;;;"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n    getBackdropClassNames,\n    getDrawerContainerClassNames,\n    getDrawerContentClassNames,\n    getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n    close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\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 DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,\n     * so it can be easily overriden in exceptional scenarious.\n     *  */\n    const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);\n    return (\n        <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            <span className=\"line-clamp-2 inline-block w-4/6 overflow-y-hidden\">{children}</span>\n        </DialogPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n    return <Group {...otherProps} className={cName} ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n     * default value - true\n     */\n    isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, isScrollable = true, children, ...otherProps } = props;\n    const cName = cn(\n        'grow flex flex-col',\n        {\n            'overflow-y-hidden': isScrollable,\n            'p-4': !isScrollable,\n        },\n        className\n    );\n    return (\n        <div {...otherProps} className={cName} ref={ref}>\n            {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n        </div>\n    );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n    const { children, ...otherProps } = props;\n    const { open = false, variant, outlet } = useCurrentDrawer();\n\n    const backdropClassNames = React.useMemo(() => {\n        return getBackdropClassNames(open);\n    }, [open]);\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n            {variant === 'overlay' ? (\n                <DialogPrimitive.Overlay forceMount>\n                    {/* Animate backdrop appearance for overlay version of Drawer */}\n                    <Backdrop className={backdropClassNames} />\n                </DialogPrimitive.Overlay>\n            ) : null}\n            {children}\n        </DialogPrimitive.Portal>\n    );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n    props: UntrappedFocusDrawerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { onEscape, children, ...otherProps } = props;\n\n    useGlobalKeyDown('Escape', onEscape);\n\n    return (\n        <div {...otherProps} ref={ref}>\n            <FocusScope autoFocus={true} restoreFocus={true}>\n                {children}\n            </FocusScope>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n    props: DrawerContentProps,\n    externalRef: React.Ref<HTMLDivElement>\n) {\n    const {\n        size,\n        onClose,\n        onResize,\n        open = false,\n        closeOnEscape,\n        variant,\n        focusTrap,\n        showCloseButton,\n        setOpen,\n    } = useCurrentDrawer();\n    const { className, style, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant, open);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant, open]);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n        if (isTargetInsideDrawerContent) {\n            if (!closeOnEscape) {\n                event.preventDefault();\n            } else {\n                setOpen && setOpen(false);\n                if (onClose) {\n                    onClose();\n                }\n            }\n        }\n    };\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        setContainerWidth(contentRef.current?.offsetWidth);\n    }, [contentRef, open]);\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    const styleProp = {\n        ...style,\n        ...{ width: resizedWidth },\n    };\n\n    return focusTrap ? (\n        <DialogPrimitive.Content\n            forceMount\n            {...otherProps}\n            className={contentClassName}\n            onEscapeKeyDown={handleEscapeKeyDown}\n            onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            ref={ref}\n            style={styleProp}>\n            {content}\n        </DialogPrimitive.Content>\n    ) : (\n        <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n            {content}\n        </UntrappedFocusDrawerContent>\n    );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { children } = props;\n\n    return (\n        <Portal>\n            <DrawerContent {...props} ref={externalRef}>\n                {children}\n            </DrawerContent>\n        </Portal>\n    );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","className","otherProps","cName","cn","DialogPrimitive","Footer","DrawerFooter","Actions","Group","Close","DrawerClose","onClose","useCurrentDrawer","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","externalRef","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","style","texts","useLocalization","useMergedRef","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current","current","contains","target","preventDefault","containerWidth","setContainerWidth","useState","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","useEffect","x","_contentRef$current","offsetWidth","resizedWidth","Math","min","max","output","content","IconButton","appearance","drawer","icon","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Drawer/util.js

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import cn from 'clsx';
 
 const getDrawerSizeClassnames = size => {
   switch (size) {