@economic/taco 1.15.0 → 1.16.0

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

@@ -2,6 +2,7 @@ import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { getBannerIcon } from './util.js';
 import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Localization.js';
 
 const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
   const {
@@ -9,12 +10,16 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
     state,
     onClose
   } = props;
+  const {
+    texts
+  } = useLocalization();
   const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
   return /*#__PURE__*/createElement("div", {
     className: className,
     "data-taco": "banner",
     ref: ref
   }, getBannerIcon(state), children, onClose ? /*#__PURE__*/createElement(IconButton, {
+    "aria-label": texts.banner.close,
     className: "ml-auto -mr-2 self-start",
     icon: "close",
     appearance: "discrete",

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton className=\"ml-auto -mr-2 self-start\" icon=\"close\" appearance=\"discrete\" onClick={onClose} />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;MAcaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAM,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAMK,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAEN,KAAK,CAACK,SAAS,CAAC;EAErH,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACJ,GAAG,EAAEA;KAC9CM,aAAa,CAACJ,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,gBACJL,cAACS,UAAU;IAACH,SAAS,EAAC,0BAA0B;IAACI,IAAI,EAAC,OAAO;IAACC,UAAU,EAAC,UAAU;IAACC,OAAO,EAAEP;IAAW,GACxG,IAAI,CACN;AAEd,CAAC;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"ml-auto -mr-2 self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","texts","useLocalization","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;MAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAM,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAER,KAAK,CAACO,SAAS,CAAC;EAErH,oBACIR;IAAKQ,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACN,GAAG,EAAEA;KAC9CQ,aAAa,CAACN,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,gBACJL,cAACW,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEX;IACX,GACF,IAAI,CACN;AAEd,CAAC;;;;"}

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

@@ -1,8 +1,8 @@
 import { forwardRef, useState, useEffect, createElement, memo } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Localization.js';
 import ReactDayPicker from 'react-day-picker';
-import { useLocalization } from '../Provider/Provider.js';
 
 const thisYear = /*#__PURE__*/new Date().getFullYear();
 const years = [];

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/Provider';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\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};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    showYearControls?: boolean;\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 10; 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-2 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                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={() => onPreviousClick()}\n                        rounded\n                    />\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={() => onNextClick()}\n                        rounded\n                    />\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    }, [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-4', 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                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","IconButton","appearance","icon","previousMonth","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","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 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\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};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    showYearControls?: boolean;\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 10; 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-2 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                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={() => onPreviousClick()}\n                        rounded\n                    />\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={() => onNextClick()}\n                        rounded\n                    />\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    }, [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-4', 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                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","IconButton","appearance","icon","previousMonth","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","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}

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

@@ -1,60 +1,6 @@
 import { forwardRef, createElement } from 'react';
-import '../../utils/mergeRefs.js';
 import cn from 'classnames';
-import '../Backdrop/Backdrop.js';
-import '../AlertDialog/AlertDialog.js';
-import '../Icon/components/index.js';
-import '../Icon/Icon.js';
-import '../Accordion/Accordion.js';
-import '../VisuallyHidden/VisuallyHidden.js';
-import '../Badge/Badge.js';
-import '../Tooltip/Tooltip.js';
 import { IconButton } from '../IconButton/IconButton.js';
-import '../Banner/Banner.js';
-import '../Button/Button.js';
-import '../Spinner/Spinner.js';
-import '../Toast/Toaster.js';
-import '../Provider/Provider.js';
-import '../Calendar/Calendar.js';
-import '../Checkbox/Checkbox.js';
-import '../../hooks/useMergedRef.js';
-import '../Input/Input.js';
-import '../../utils/hooks/useListKeyboardNavigation.js';
-import '../../utils/hooks/useListScrollTo.js';
-import '../../hooks/useBoundingClientRectListener.js';
-import '../Combobox/Combobox.js';
-import '../../utils/date.js';
-import '../Popover/Popover.js';
-import '../Datepicker/Datepicker.js';
-import '../Dialog/Dialog.js';
-import '../Field/Field.js';
-import '../Form/Form.js';
-import '../Group/Group.js';
-import '../Hanger/Hanger.js';
-import '../HoverCard/HoverCard.js';
-import '../SearchInput/SearchInput.js';
-import '../Listbox/Listbox.js';
-import '../RadioGroup/RadioGroup.js';
-import '../Menu/Menu.js';
-import '../Treeview/Treeview.js';
-import '../../utils/hooks/useDropTarget.js';
-import '../Navigation/Navigation.js';
-import '../Select/Select.js';
-import '../Pagination/usePagination.js';
-import '../Pagination/Pagination.js';
-import '../Progress/Progress.js';
-import '../Tag/Tag.js';
-import '../Select2/Select2.js';
-import '../Table/components/Table.js';
-import '../Table/components/PaginatedTable.js';
-import '../Table/components/WindowedTable.js';
-import '../Table/util/rowIndexPath.js';
-import '../Table/hooks/useRowCreation.js';
-import '../Tabs/Tabs.js';
-import '../Textarea/Textarea.js';
-import '../Switch/Switch.js';
-import '../Tour/Tour.js';
-import '../../utils/hooks/useOnClickOutside.js';
 
 const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
   const {

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

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

@@ -2,6 +2,7 @@ import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
+import { useId } from '../../hooks/useId.js';
 
 const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   const {
@@ -13,6 +14,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     onChange,
     ...otherProps
   } = props;
+  const id = useId(props.id);
   const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus',
   //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
   props.className, {
@@ -25,7 +27,14 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   if (onChange) {
     handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
   }
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      ['aria-labelledby']: `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
@@ -38,12 +47,15 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     className: "!h-full !w-full"
   })));
   if (label) {
-    const labelClassName = cn('flex items-center cursor-pointer gap-2', {
+    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
-    return /*#__PURE__*/createElement("label", {
-      className: labelClassName
-    }, element, label);
+    return /*#__PURE__*/createElement("span", {
+      className: labelContainerClassName
+    }, element, /*#__PURE__*/createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
   }
   return element;
 });

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

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

@@ -1,7 +1,7 @@
 import { forwardRef, useRef, createElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
-import { useLocalization } from '../Provider/Provider.js';
+import { useLocalization } from '../Provider/Localization.js';
 import { Root, Anchor, Portal, Content } from '@radix-ui/react-popover';
 import { Input } from '../Input/Input.js';
 import { ScrollableList } from '../Listbox/ScrollableList.js';
@@ -42,7 +42,11 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? /*#__PURE__*/createElement(IconButton, {
+    button: props.inline ? /*#__PURE__*/createElement(IconButton
+    // In case of inline combobox, this icon button acts only as visual chevron representation,
+    // so should be taken out of screen reader scope.
+    , {
+      "aria-hidden": true,
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',

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

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

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

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useLocalization } from '../Provider/Provider.js';
+import { useLocalization } from '../Provider/Localization.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { setInputValueByRef } from '../../utils/input.js';
 import { format, parseFromCustomString } from '../../utils/date.js';

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

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

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { getDialogPositionClassnames, getDialogSizeClassnames } from '../util.js';
 import { IconButton } from '../../IconButton/IconButton.js';
-import { useLocalization } from '../../Provider/Provider.js';
+import { useLocalization } from '../../Provider/Localization.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
@@ -51,6 +51,7 @@ const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   const internalRef = useMergedRef(ref);
   const {
     position,
+    dragging,
     handleProps: dragHandleProps
   } = useDraggable(internalRef);
   const {
@@ -97,6 +98,9 @@ const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     className: containerClassName,
     "data-taco": "dialog"
   }, output, dialog.draggable && /*#__PURE__*/createElement("div", Object.assign({}, dragHandleProps, {
+    role: "button",
+    draggable: true,
+    "aria-grabbed": dragging,
     "aria-label": texts.dialog.drag,
     className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
   })), dialog.showCloseButton ? /*#__PURE__*/createElement(Close$1, {

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

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

@@ -1,7 +1,7 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { motion } from 'framer-motion';
 import { useCurrentDialog } from '../Context.js';
+import { motion } from 'framer-motion';
 
 const Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
   var _dialog$drawer, _dialog$drawer2;

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

@@ -2,7 +2,7 @@ import { forwardRef, createElement, useMemo, useState, useEffect, createContext,
 import { mergeRefs } from '../../utils/mergeRefs.js';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
-import { useLocalization } from '../Provider/Provider.js';
+import { useLocalization } from '../Provider/Localization.js';
 import { Root, Anchor as Anchor$1, Portal, Content as Content$1, Close } from '@radix-ui/react-popover';
 import { UnstyledArrow } from '../Popover/Primitives.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return <PopoverPrimitive.Anchor {...parentProps} {...props} children={children} ref={refCallback} asChild />;\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","placement","side","context","texts","useLocalization","handleInteractOutside","event","preventDefault","onInteractOutside","sideOffset","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}
+{"version":3,"file":"Hanger.js","sources":["../../../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Localization';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return <PopoverPrimitive.Anchor {...parentProps} {...props} children={children} ref={refCallback} asChild />;\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","placement","side","context","texts","useLocalization","handleInteractOutside","event","preventDefault","onInteractOutside","sideOffset","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":";;;;;;;;AAgBA,MAAMA,aAAa,gBAAGC,aAAmB,CAAqB;EAC1DC,OAAO,EAAEC,SAAS;EAClBC,KAAK,EAAE,EAAE;EACTC,GAAG,EAAE;CACR,CAAC;AAQF,MAAMC,MAAM,gBAAGL,UAAgB,CAAC,SAASM,YAAY,CAACH,KAAwB,EAAEI,WAAsC;;EAClH,MAAM;IAAEH,GAAG,EAAEI,SAAS;IAAEL,KAAK,EAAEM;GAAa,GAAGT,UAAgB,CAACD,aAAa,CAAC;EAC9E,MAAMW,WAAW,GAAGC,SAAS,CAAC,CAACH,SAAS,EAAED,WAAW,CAAC,CAAC;EAEvD,IAAIK,QAAQ,GAAGT,KAAK,CAACS,QAAQ;EAE7B,kBAAIZ,cAAoB,CAACG,KAAK,CAACS,QAAQ,CAAC,IAAI,2BAAOT,KAAK,CAACS,QAAQ,oDAAd,gBAAgBC,IAAI,MAAK,UAAU,EAAE;IACpFC,OAAO,CAACC,IAAI,mHAC0GZ,KAAK,CAACS,QAAQ,CAACC,IAAI,CAACG,kDAAkDb,KAAK,CAACS,QAAQ,CAACC,IAAI,CAACG,sFAAsF,CACrS;IACDJ,QAAQ,gBAAGZ,4BAAOG,KAAK,CAACS,QAAQ,CAAQ;;EAG5C,oBAAOZ,cAACiB,QAAuB,oBAAKR,WAAW,EAAMN,KAAK;IAAES,QAAQ,EAAEA,QAAQ;IAAER,GAAG,EAAEM,WAAW;IAAEQ,OAAO;KAAG;AAChH,CAAC,CAAC;MAGWC,KAAK,gBAAGnB,UAAgB,CAAC,SAASoB,WAAW,CAACjB,KAAuB,EAAEC,GAAkC;EAClH,MAAMiB,SAAS,GAAGC,EAAE,CAAC,sCAAsC,EAAEnB,KAAK,CAACkB,SAAS,CAAC;EAC7E,oBAAOrB,wCAAUG,KAAK;IAAEkB,SAAS,EAAEA,SAAS;IAAEjB,GAAG,EAAEA;KAAO;AAC9D,CAAC;AAOD,MAAMmB,OAAO,gBAAGvB,UAAgB,CAAC,SAASwB,aAAa,CAACrB,KAAyB,EAAEC,GAA8B;EAC7G,MAAM;IAAEqB,SAAS,EAAEC;GAAM,GAAGvB,KAAK;EACjC,MAAMwB,OAAO,GAAG3B,UAAgB,CAACD,aAAa,CAAC;EAC/C,MAAM;IAAE6B;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMR,SAAS,GAAGC,EAAE,CAChB,mGAAmG,EACnGnB,KAAK,CAACkB,SAAS,CAClB;EACD,MAAMS,qBAAqB,GAAIC,KAAkB;IAC7CA,KAAK,CAACC,cAAc,EAAE;GACzB;EAED,oBACIhC,cAACiB,MAAuB,qBACpBjB,cAACiB,SAAwB;IACrBI,SAAS,EAAEA,SAAS;iBACV,QAAQ;IAClBY,iBAAiB,EAAEH,qBAAqB;IACxCJ,IAAI,EAAEA,IAAI;IACVQ,UAAU,EAAE,CAAC;IACb9B,GAAG,EAAEA;KACJD,KAAK,CAACS,QAAQ,eACfZ,cAACmC,aAAa;IAACd,SAAS,EAAC;IAAc,eACvCrB,cAACiB,KAAsB;IAACC,OAAO;kBAC3BlB,cAACoC,UAAU;IACPC,UAAU,EAAC,SAAS;kBACRT,KAAK,CAACU,MAAM,CAACC,KAAK;IAC9BlB,SAAS,EAAC,kDAAkD;IAC5DmB,IAAI,EAAC,OAAO;IACZC,OAAO,EAAEd,OAAO,CAAC1B;IACnB,CACmB,CACF,CACL;AAElC,CAAC,CAAC;MAoBWyC,MAAM,gBAAG1C,UAAgB,CAA2B,SAAS0C,MAAM,CAACvC,KAAK,EAAEC,GAAG;EACvF,MAAM;IAAEuC,MAAM;IAAE/B,QAAQ;IAAEgC,WAAW,GAAG,IAAI;IAAE3C,OAAO;IAAE,GAAG4C;GAAY,GAAG1C,KAAK;EAC9E,MAAMwB,OAAO,GAAG3B,OAAa,CAAC,OAAO;IAAEC,OAAO;IAAEE,KAAK,EAAE0C,UAAU;IAAEzC;GAAK,CAAC,EAAE,CAACH,OAAO,EAAE4C,UAAU,CAAC,CAAC;;EAGjG,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG/C,QAAc,CAAC,KAAK,CAAC;EAC7CA,SAAe,CAAC;IACZ,IAAI4C,WAAW,EAAE;MACbG,OAAO,CAACH,WAAW,CAAC;;GAE3B,EAAE,EAAE,CAAC;EAEN,oBACI5C,cAACD,aAAa,CAACiD,QAAQ;IAACC,KAAK,EAAEtB;kBAC3B3B,cAACiB,IAAqB;IAACiC,GAAG,EAAEC,MAAM,CAACL,IAAI,CAAC;IAAEF,WAAW,EAAEE;KAClDH,MAAM,iBAAI3C,cAACK,MAAM,QAAEsC,MAAM,CAAU,EACnC/B,QAAQ,CACW,CACH;AAEjC,CAAC;AACD8B,MAAM,CAACrC,MAAM,GAAGA,MAAM;AACtBqC,MAAM,CAACnB,OAAO,GAAGA,OAAO;AACxBmB,MAAM,CAACvB,KAAK,GAAGA,KAAK;;;;"}