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

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

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

package/dist/esm/components/Card/Card.js

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import '../Icon/components/index.js';
@@ -22,6 +23,7 @@ import '../../utils/hooks/useListScrollTo.js';
 import '../../utils/hooks/useBoundingClientRectListener.js';
 import '../Combobox/Combobox.js';
 import '../../utils/date.js';
+import '../../utils/mergeRefs.js';
 import '../Popover/Popover.js';
 import '../Datepicker/Datepicker.js';
 import '../Dialog/Dialog.js';
@@ -35,6 +37,7 @@ 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';
@@ -51,12 +54,12 @@ import '../Switch/Switch.js';
 import '../Tour/Tour.js';
 import '../../utils/hooks/useOnClickOutside.js';
 
-const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
-  const {
-    noPadding,
-    ...props
-  } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
+var _excluded = ["noPadding"];
+var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
+  var noPadding = externalProps.noPadding,
+      props = _objectWithoutPropertiesLoose(externalProps, _excluded);
+
+  var className = cn('flex-grow overflow-auto', {
     'mx-4 mb-4': !noPadding
   }, props.className);
   return createElement("div", Object.assign({}, props, {
@@ -64,13 +67,11 @@ const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref)
     ref: ref
   }));
 });
-const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
-  const {
-    title,
-    menu,
-    children
-  } = props;
-  const className = cn('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)]', props.className);
+var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
+  var title = props.title,
+      menu = props.menu,
+      children = props.children;
+  var className = cn('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)]', props.className);
   return createElement("div", {
     className: className,
     "data-taco": "card",

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { MenuProps, IconButton } from '../..';\r\n\r\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    noPadding?: boolean;\r\n};\r\n\r\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\r\n    const { noPadding, ...props } = externalProps;\r\n    const className = cn(\r\n        'flex-grow overflow-auto',\r\n        {\r\n            'mx-4 mb-4': !noPadding,\r\n        },\r\n        props.className\r\n    );\r\n    return <div {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /** Title of the Card */\r\n    title: string | React.ReactElement;\r\n    /** Menu component associated with the Card */\r\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n};\r\n\r\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\r\n    const { title, menu, children } = props;\r\n    const className = cn(\r\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)]',\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <div className={className} data-taco=\"card\" ref={ref}>\r\n            <div className=\"mx-4 mt-4 mb-2 flex\">\r\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\r\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\r\n            </div>\r\n            {children}\r\n        </div>\r\n    );\r\n}) as React.ForwardRefExoticComponent<CardProps> & {\r\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\r\n};\r\nCard.Content = Content;\r\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAO,gBAAGC,UAAA,CAAmD,SAASC,WAAT,CAAqBC,aAArB,EAAoCC,GAApC;EAC/D,MAAM;IAAEC,SAAF;IAAa,GAAGC;MAAUH,aAAhC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBADgB,EAEhB;IACI,aAAa,CAACH;GAHF,EAKhBC,KAAK,CAACC,SALU,CAApB;EAOA,OAAON,aAAA,MAAA,oBAASK;IAAOC,SAAS,EAAEA;IAAWH,GAAG,EAAEA;IAA3C,CAAP;AACH,CAVe,CAAhB;MAmBaK,IAAI,gBAAGR,UAAA,CAA4C,SAASQ,IAAT,CAAcH,KAAd,EAAqBF,GAArB;EAC5D,MAAM;IAAEM,KAAF;IAASC,IAAT;IAAeC;MAAaN,KAAlC;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;EAKA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;GAAjD,EACIH,aAAA,MAAA;IAAKM,SAAS,EAAC;GAAf,EACKG,KAAK,IAAIT,aAAA,KAAA;IAAIM,SAAS,EAAC;GAAd,EAA0CG,KAA1C,CADd,EAEKC,IAAI,GAAGV,aAAA,CAACY,UAAD;IAAYC,IAAI,EAAC;IAAsBC,UAAU,EAAC;IAAWJ,IAAI,EAAEA;IAAMJ,SAAS,EAAC;GAAnF,CAAH,GAAuG,IAFhH,CADJ,EAKKK,QALL,CADJ;AASH,CAhBmB;AAmBpBH,IAAI,CAACT,OAAL,GAAeA,OAAf;;;;"}
+{"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,IAAMA,OAAO,gBAAGC,UAAA,CAAmD,SAASC,WAAT,CAAqBC,aAArB,EAAoCC,GAApC;EAC/D,IAAQC,SAAR,GAAgCF,aAAhC,CAAQE,SAAR;MAAsBC,KAAtB,iCAAgCH,aAAhC;;EACA,IAAMI,SAAS,GAAGC,EAAE,CAChB,yBADgB,EAEhB;IACI,aAAa,CAACH;GAHF,EAKhBC,KAAK,CAACC,SALU,CAApB;EAOA,OAAON,aAAA,MAAA,oBAASK;IAAOC,SAAS,EAAEA;IAAWH,GAAG,EAAEA;IAA3C,CAAP;AACH,CAVe,CAAhB;IAmBaK,IAAI,gBAAGR,UAAA,CAA4C,SAASQ,IAAT,CAAcH,KAAd,EAAqBF,GAArB;EAC5D,IAAQM,KAAR,GAAkCJ,KAAlC,CAAQI,KAAR;MAAeC,IAAf,GAAkCL,KAAlC,CAAeK,IAAf;MAAqBC,QAArB,GAAkCN,KAAlC,CAAqBM,QAArB;EACA,IAAML,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;EAKA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;GAAjD,EACIH,aAAA,MAAA;IAAKM,SAAS,EAAC;GAAf,EACKG,KAAK,IAAIT,aAAA,KAAA;IAAIM,SAAS,EAAC;GAAd,EAA0CG,KAA1C,CADd,EAEKC,IAAI,GAAGV,aAAA,CAACY,UAAD;IAAYC,IAAI,EAAC;IAAsBC,UAAU,EAAC;IAAWJ,IAAI,EAAEA;IAAMJ,SAAS,EAAC;GAAnF,CAAH,GAAuG,IAFhH,CADJ,EAKKK,QALL,CADJ;AASH,CAhBmB;AAmBpBH,IAAI,CAACT,OAAL,GAAeA,OAAf;;;;"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,32 +1,35 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  const {
-    checked,
-    highlighted,
-    indeterminate,
-    invalid,
-    label,
-    onChange,
-    ...otherProps
-  } = props;
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
+var _excluded = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
+var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  var checked = props.checked,
+      highlighted = props.highlighted,
+      indeterminate = props.indeterminate,
+      invalid = props.invalid,
+      label = props.label,
+      onChange = props.onChange,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
   props.className, {
     'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
   });
-  let handleChange;
+  var handleChange;
 
   if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
+    handleChange = function handleChange(checked) {
+      return onChange(checked === 'indeterminate' ? false : checked);
+    };
   }
 
-  const element = createElement(Root, Object.assign({}, otherProps, {
+  var element = createElement(Root, Object.assign({}, otherProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
@@ -40,7 +43,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   })));
 
   if (label) {
-    const labelClassName = cn('flex items-center cursor-pointer gap-2', {
+    var labelClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
     return createElement("label", {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\ntype CheckedState = boolean | 'indeterminate';\r\n\r\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n    /* Increases visual prominenance of the checkbox */\r\n    highlighted?: boolean;\r\n    /**\r\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\r\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\r\n     */\r\n    indeterminate?: boolean;\r\n    /* Whether the checkbox is in an invalid state */\r\n    invalid?: boolean;\r\n    /** Label for the checkbox */\r\n    label?: React.ReactNode;\r\n    /* Whether user input is required */\r\n    required?: boolean;\r\n};\r\n\r\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\r\n    checked?: never;\r\n    onChange?: never;\r\n    /* The default checked state (uncontrolled) */\r\n    defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\r\n    defaultChecked?: never;\r\n    /* The current checked state (controlled) */\r\n    checked: boolean;\r\n    /* Handler called when the checked state changes */\r\n    onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\r\n\r\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\r\n\r\n    const className = cn(\r\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)]\r\n        props.className,\r\n        {\r\n            'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light':\r\n                !props.disabled && !invalid,\r\n            'border-grey text-blue-light cursor-not-allowed': props.disabled,\r\n            'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\r\n            'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light':\r\n                invalid && !props.disabled,\r\n        }\r\n    );\r\n\r\n    let handleChange: ((checked: CheckedState) => void) | undefined;\r\n\r\n    if (onChange) {\r\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\r\n    }\r\n\r\n    const element = (\r\n        <CheckboxPrimitive.Root\r\n            {...otherProps}\r\n            data-taco=\"checkbox\"\r\n            checked={indeterminate ? 'indeterminate' : checked}\r\n            className={className}\r\n            onCheckedChange={handleChange}\r\n            ref={ref}\r\n        >\r\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\r\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\r\n            </CheckboxPrimitive.Indicator>\r\n        </CheckboxPrimitive.Root>\r\n    );\r\n\r\n    if (label) {\r\n        const labelClassName = cn(\r\n            'flex items-center cursor-pointer gap-2',\r\n            {\r\n                'cursor-not-allowed text-grey-dark': props.disabled,\r\n            },\r\n            props.className\r\n        );\r\n\r\n        return (\r\n            <label className={labelClassName}>\r\n                {element}\r\n                {label}\r\n            </label>\r\n        );\r\n    }\r\n\r\n    return element;\r\n});\r\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,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,aAAxB;IAAuCC,OAAvC;IAAgDC,KAAhD;IAAuDC,QAAvD;IAAiE,GAAGC;MAAeR,KAAzF;EAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,6FADgB;EAEhBV,KAAK,CAACS,SAFU,EAGhB;IACI,oGACI,CAACT,KAAK,CAACW,QAAP,IAAmB,CAACN,OAF5B;IAGI,kDAAkDL,KAAK,CAACW,QAH5D;IAII,gEAAgER,WAJpE;IAKI,iHACIE,OAAO,IAAI,CAACL,KAAK,CAACW;GATV,CAApB;EAaA,IAAIC,YAAJ;;EAEA,IAAIL,QAAJ,EAAc;IACVK,YAAY,GAAIV,OAAD,IAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAlD;;;EAGJ,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;IACVN,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;IAC3CO,SAAS,EAAEA;IACXM,eAAe,EAAEH;IACjBX,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;IAA6BL,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;IAAMC,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;IAAQK,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;EAeA,IAAIH,KAAJ,EAAW;IACP,MAAMY,cAAc,GAAGR,EAAE,CACrB,wCADqB,EAErB;MACI,qCAAqCV,KAAK,CAACW;KAH1B,EAKrBX,KAAK,CAACS,SALe,CAAzB;IAQA,OACIV,aAAA,QAAA;MAAOU,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;;;EAQJ,OAAOO,OAAP;AACH,CAvDuB;;;;"}
+{"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        >\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":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,IAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;MAA0EC,UAA1E,iCAAyFR,KAAzF;;EAEA,IAAMS,SAAS,GAAGC,EAAE,CAChB,6FADgB;EAEhBV,KAAK,CAACS,SAFU,EAGhB;IACI,oGACI,CAACT,KAAK,CAACW,QAAP,IAAmB,CAACN,OAF5B;IAGI,kDAAkDL,KAAK,CAACW,QAH5D;IAII,gEAAgER,WAJpE;IAKI,iHACIE,OAAO,IAAI,CAACL,KAAK,CAACW;GATV,CAApB;EAaA,IAAIC,YAAJ;;EAEA,IAAIL,QAAJ,EAAc;IACVK,YAAY,GAAG,sBAACV,OAAD;MAAA,OAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;KAAf;;;EAGJ,IAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;IACVN,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;IAC3CO,SAAS,EAAEA;IACXM,eAAe,EAAEH;IACjBX,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;IAA6BL,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;IAAMC,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;IAAQK,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;EAeA,IAAIH,KAAJ,EAAW;IACP,IAAMY,cAAc,GAAGR,EAAE,CACrB,wCADqB,EAErB;MACI,qCAAqCV,KAAK,CAACW;KAH1B,EAKrBX,KAAK,CAACS,SALe,CAAzB;IAQA,OACIV,aAAA,QAAA;MAAOU,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;;;EAQJ,OAAOO,OAAP;AACH,CAvDuB;;;;"}

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

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, createElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -8,26 +9,27 @@ import { ScrollableList } from '../Listbox/ScrollableList.js';
 import { useCombobox } from './useCombobox.js';
 import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
 
-const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
-  const {
-    className: externalClassName,
-    dialog,
-    style,
-    ...otherProps
-  } = props;
-  const {
-    combobox,
-    button,
-    input,
-    popover,
-    list
-  } = useCombobox(otherProps, ref);
-  const internalRef = useRef(null);
-  const {
-    texts
-  } = useLocalization();
-  const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn('inline-flex relative', {
+var _excluded = ["className", "dialog", "style"];
+var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
+  var externalClassName = props.className,
+      dialog = props.dialog,
+      style = props.style,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useCombobox = useCombobox(otherProps, ref),
+      combobox = _useCombobox.combobox,
+      button = _useCombobox.button,
+      input = _useCombobox.input,
+      popover = _useCombobox.popover,
+      list = _useCombobox.list;
+
+  var internalRef = useRef(null);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
   return createElement("span", {
@@ -46,7 +48,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
-      onClick: () => {
+      onClick: function onClick() {
         var _input$ref$current;
 
         popover.onOpenChange(true);
@@ -54,10 +56,11 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       },
       tabIndex: -1
     }) : dialog ? createElement(IconButton, {
+      "aria-label": texts.combobox.tooltip,
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: event => {
+      onFocus: function onFocus(event) {
         var _input$ref$current2;
 
         // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
@@ -70,7 +73,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     }) : undefined
   })))), createElement(Content, {
     align: "start",
-    onOpenAutoFocus: event => {
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
       event.preventDefault();
     },
     sideOffset: 4

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { v4 as uuid } from 'uuid';\r\nimport debounce from 'lodash/debounce';\r\nimport { ComboboxProps } from './Combobox';\r\nimport {\r\n    setInputValueByRef,\r\n    getIndexFromValue,\r\n    findByValue,\r\n    useFlattenedData,\r\n    sanitizeItem,\r\n    getOptionParents,\r\n    filterData,\r\n} from '../Listbox/util';\r\nimport { createCustomKeyboardEvent } from '../../utils/input';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\r\n\r\nconst debouncer = debounce(f => f(), 200);\r\n\r\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\r\n\r\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\r\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\r\n    input: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\r\n    list: ScrollableListPropsWithRef;\r\n    button: { ref: any };\r\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\r\n};\r\n\r\nexport const useCombobox = (\r\n    {\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data: unfilteredData = [],\r\n        defaultValue,\r\n        disabled,\r\n        id: nativeId,\r\n        inline,\r\n        loading: __,\r\n        onChange,\r\n        onClick,\r\n        onKeyDown,\r\n        onSearch,\r\n        readOnly,\r\n        value,\r\n        ...props\r\n    }: Omit<ComboboxProps, 'dialog'>,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useCombobox => {\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n    const listRef = React.useRef<HTMLUListElement>(null);\r\n    const [open, setOpen] = React.useState(false);\r\n    const listId = React.useMemo(() => uuid(), []);\r\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\r\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\r\n    const flattenedData = useFlattenedData(unfilteredData);\r\n    const data = React.useMemo(\r\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\r\n        [shouldFilterData, inputValue, flattenedData]\r\n    );\r\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\r\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\r\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\r\n    );\r\n\r\n    const setInputValueByIndex = (index: number | undefined): void => {\r\n        if (index !== undefined) {\r\n            const option = data[index];\r\n\r\n            if (option && !option.disabled) {\r\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\r\n            }\r\n        }\r\n    };\r\n\r\n    const setCurrentValue = (index: number | undefined) => {\r\n        if (index === undefined) {\r\n            return;\r\n        }\r\n\r\n        const option = data[index];\r\n\r\n        // if the selected option is not already selected, trigger blur event\r\n        if (option.value !== value) {\r\n            setInputValueByIndex(index);\r\n        } else {\r\n            // if the selected option is already selected, refill input with its value\r\n            setInputValue(convertToInputValue(value));\r\n        }\r\n    };\r\n\r\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\r\n    React.useEffect(() => {\r\n        if (defaultValue && !value) {\r\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\r\n        }\r\n    }, [data]);\r\n\r\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\r\n    React.useEffect(() => {\r\n        if (value !== undefined && value !== inputValue) {\r\n            setInputValue(convertToInputValue(value));\r\n        }\r\n    }, [value]);\r\n\r\n    React.useEffect(() => {\r\n        if (onSearch) {\r\n            debouncer(() => {\r\n                onSearch(inputValue);\r\n            });\r\n        }\r\n    }, [inputValue]);\r\n\r\n    // show listbox based on input value\r\n    React.useEffect(() => {\r\n        // don't show the popover if the internal (input) value already is the current value\r\n        // this prevents the popover showing after selecting a value or pressing escape\r\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\r\n\r\n        if (inputValue && data.length && !isCurrentValue) {\r\n            setCurrentIndex(0);\r\n\r\n            if (!open) {\r\n                setOpen(true);\r\n            }\r\n        } else {\r\n            setOpen(false);\r\n        }\r\n    }, [inputValue, data]);\r\n\r\n    React.useEffect(() => {\r\n        if (open) {\r\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\r\n        } else {\r\n            setCurrentIndex(undefined);\r\n        }\r\n    }, [open]);\r\n\r\n    // event handlers\r\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        if (event.relatedTarget === listRef.current) {\r\n            event.preventDefault();\r\n            return;\r\n        }\r\n\r\n        if (onChange && event.target.value !== value) {\r\n            const item = findByValue(flattenedData, event.target.value);\r\n            (event as any).detail = sanitizeItem(item);\r\n\r\n            const parents = getOptionParents(flattenedData, item?.path);\r\n\r\n            if (parents !== null && parents.length > 0) {\r\n                (event as any).detail.parents = parents;\r\n            }\r\n\r\n            onChange(event);\r\n        }\r\n\r\n        if (props.onBlur) {\r\n            props.onBlur(event);\r\n        }\r\n    };\r\n\r\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        setInputValue(event.target.value);\r\n    };\r\n\r\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\r\n        if (inline || (!open && inputValue && data.length)) {\r\n            setOpen(true);\r\n        }\r\n\r\n        if (onClick) {\r\n            event.persist();\r\n            onClick(event);\r\n        }\r\n    };\r\n\r\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        switch (event.keyCode) {\r\n            case keycode('backspace'): {\r\n                return;\r\n            }\r\n\r\n            case keycode('escape'): {\r\n                event.preventDefault();\r\n                setInputValue(convertToInputValue(value));\r\n                setOpen(false);\r\n                return;\r\n            }\r\n\r\n            case keycode('tab'):\r\n            case keycode('enter'): {\r\n                if (event.keyCode !== keycode('tab')) {\r\n                    event.preventDefault();\r\n                }\r\n\r\n                setCurrentValue(currentIndex);\r\n                setOpen(false);\r\n                return;\r\n            }\r\n\r\n            case keycode('down'):\r\n                if (open) {\r\n                    event.preventDefault();\r\n                } else {\r\n                    if (!inline && buttonRef.current) {\r\n                        buttonRef.current.click();\r\n                    }\r\n                }\r\n                break;\r\n\r\n            case keycode('up'):\r\n            case keycode('home'):\r\n            case keycode('end'): {\r\n                if (open) {\r\n                    event.preventDefault();\r\n                }\r\n                break;\r\n            }\r\n\r\n            default:\r\n        }\r\n\r\n        // we aren't focused on the list, so manually forward the keydown event to it\r\n        if (listRef.current) {\r\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\r\n        }\r\n\r\n        if (inline && !open) {\r\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\r\n                event.preventDefault();\r\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\r\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\r\n                setOpen(true);\r\n            }\r\n        }\r\n\r\n        if (!event.isDefaultPrevented() && onKeyDown) {\r\n            event.persist();\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const handleListboxChange = (index: number): void => {\r\n        setCurrentIndex(index);\r\n    };\r\n\r\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\r\n        event.preventDefault();\r\n        setCurrentValue(index);\r\n        setOpen(false);\r\n    };\r\n\r\n    const combobox = {\r\n        'aria-expanded': open,\r\n        'aria-owns': listId,\r\n        'aria-haspopup': 'listbox' as const,\r\n        role: 'combobox',\r\n    };\r\n\r\n    const input = {\r\n        ...props,\r\n        'aria-controls': listId,\r\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\r\n        // are related to the string that is present in the textbox\r\n        'aria-autocomplete': 'list' as const,\r\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\r\n        'aria-activedescendant':\r\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        disabled,\r\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\r\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\r\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\r\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\r\n        readOnly,\r\n        ref: inputRef,\r\n        type: 'text',\r\n        value: inputValue ?? '',\r\n    };\r\n\r\n    const list: ScrollableListPropsWithRef = {\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data,\r\n        disabled,\r\n        id: listId,\r\n        onChange: handleListboxChange,\r\n        onClick: handleListboxClick,\r\n        ref: listRef,\r\n        scrollOnFocus: false,\r\n        tabIndex: -1,\r\n        value: currentIndex,\r\n    };\r\n\r\n    const button = {\r\n        ref: buttonRef,\r\n    };\r\n\r\n    return {\r\n        combobox,\r\n        input,\r\n        list,\r\n        button,\r\n        popover: {\r\n            open,\r\n            onOpenChange: setOpen,\r\n            //visible: !data.length ? false : open,\r\n        },\r\n    };\r\n};\r\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useProxiedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: Omit<ComboboxProps, 'dialog'>,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('down'):\n                if (open) {\n                    event.preventDefault();\n                } else {\n                    if (!inline && buttonRef.current) {\n                        buttonRef.current.click();\n                    }\n                }\n                break;\n\n            case keycode('up'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useProxiedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/components/Datepicker/Datepicker.js

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -7,23 +8,23 @@ import { Input } from '../Input/Input.js';
 import { useDatepicker } from './useDatepicker.js';
 import { Popover } from '../Popover/Popover.js';
 
-const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
-  const {
-    className: externalClassName,
-    onReset: handleReset,
-    style,
-    shortcuts,
-    shortcutsText,
-    ...otherProps
-  } = props;
-  const {
-    calendar,
-    input
-  } = useDatepicker(otherProps, ref);
-  const {
-    texts
-  } = useLocalization();
-  const className = cn('inline-flex w-full text-black font-normal', externalClassName);
+var _excluded = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
+  var externalClassName = props.className,
+      handleReset = props.onReset,
+      style = props.style,
+      shortcuts = props.shortcuts,
+      shortcutsText = props.shortcutsText,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useDatepicker = useDatepicker(otherProps, ref),
+      calendar = _useDatepicker.calendar,
+      input = _useDatepicker.input;
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
   return createElement("span", {
     className: className,
     "data-taco": "datepicker",
@@ -33,37 +34,40 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar"
-    })), createElement(Popover.Content, null, ({
-      close
-    }) => createElement("div", {
-      className: "-m-3 flex"
-    }, createElement(Calendar, Object.assign({}, calendar, {
-      onChange: (date, event) => {
-        calendar.onChange(date, event);
-        close();
-      },
-      tabIndex: -1
-    })), shortcuts && createElement("div", {
-      className: "border-grey-dark flex flex-col border-l"
-    }, createElement("span", {
-      className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-    }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), createElement("ul", null, shortcuts.map((shortcut, i) => createElement("li", {
-      key: i
-    }, createElement("button", {
-      className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
-      onClick: event => {
-        event.persist();
-        shortcut.onClick(event);
-        close();
-      }
-    }, shortcut.text)))), handleReset && createElement("button", {
-      className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
-      onClick: event => {
-        event.persist();
-        handleReset(event);
-        close();
-      }
-    }, texts.datepicker.clear)))))
+    })), createElement(Popover.Content, null, function (_ref) {
+      var close = _ref.close;
+      return createElement("div", {
+        className: "-m-3 flex"
+      }, createElement(Calendar, Object.assign({}, calendar, {
+        onChange: function onChange(date, event) {
+          calendar.onChange(date, event);
+          close();
+        },
+        tabIndex: -1
+      })), shortcuts && createElement("div", {
+        className: "border-grey-dark flex flex-col border-l"
+      }, createElement("span", {
+        className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), createElement("ul", null, shortcuts.map(function (shortcut, i) {
+        return createElement("li", {
+          key: i
+        }, createElement("button", {
+          className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
+          onClick: function onClick(event) {
+            event.persist();
+            shortcut.onClick(event);
+            close();
+          }
+        }, shortcut.text));
+      })), handleReset && createElement("button", {
+        className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
+        onClick: function onClick(event) {
+          event.persist();
+          handleReset(event);
+          close();
+        }
+      }, texts.datepicker.clear)));
+    }))
   })));
 });