@economic/taco 13.0.0 → 14.0.0-tanstack-virtual-update.0

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport * as React from 'react';\nimport type { DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { DayPicker } from 'react-day-picker';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\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<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\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    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white p-2 text-xs', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["today","props"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport * as React from 'react';\nimport type { DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { DayPicker } from 'react-day-picker';\n\nimport { LegacyIconButton, Tooltip, useLocalization } from '@/components';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\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<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\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    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white p-2 text-xs', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["today","props"],"mappings":"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"}

package/dist/components/Card/Card.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
+;/* empty css            */
 const Localization = require("../Provider/Localization.cjs");
 const Truncate = require("../Truncate/Truncate.cjs");
-;/* empty css            */
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { MenuProps } from '../Menu/Menu';\nimport { useLocalization } from '../Provider/Localization';\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './style.css';\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            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,wDAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACIF,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACGA,iCAAA,cAACG,SAAAA,UAAA,EAAS,SAAS,SACfH,iCAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { MenuProps } from '@/components';\nimport { LegacyIconButton, Truncate, useLocalization } from '@/components';\n\nimport './style.css';\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            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,wDAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACIF,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACGA,iCAAA,cAACG,SAAAA,UAAA,EAAS,SAAS,SACfH,iCAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}

package/dist/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import { MenuProps } from '../Menu/Menu';
+import { MenuProps } from '..';
 import * as React from 'react';
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
     noPadding?: boolean;

package/dist/components/Card/Card.js

@@ -1,9 +1,9 @@
 import cn from "clsx";
 import * as React from "react";
-import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
+/* empty css          */
 import { useLocalization } from "../Provider/Localization.js";
 import { Truncate } from "../Truncate/Truncate.js";
-/* empty css          */
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 const Content = React.forwardRef(function CardContent(externalProps, ref) {
   const { noPadding, ...props } = externalProps;
   const className = cn(

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { MenuProps } from '../Menu/Menu';\nimport { useLocalization } from '../Provider/Localization';\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './style.css';\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            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAcA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,6CAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACG,sBAAA,cAAC,UAAA,EAAS,SAAS,SACf,sBAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { MenuProps } from '@/components';\nimport { LegacyIconButton, Truncate, useLocalization } from '@/components';\n\nimport './style.css';\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            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAYA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,6CAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACG,sBAAA,cAAC,UAAA,EAAS,SAAS,SACf,sBAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Whether user input is required */\n    required?: boolean;\n};\n\nexport type UncontrolledCheckboxProps = {\n    checked?: never;\n    onChange?: never;\n    /** The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n} & CheckboxBaseProps;\n\nexport type ControlledCheckboxProps = {\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} & CheckboxBaseProps;\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed',\n        invalid\n            ? {\n                  'border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:bg-red-500/50 checked:text-white/50 indeterminate:bg-red-500/50 indeterminate:text-white/50':\n                      props.disabled,\n              }\n            : {\n                  'border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={cn(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","Checkbox","useId","useMergedRef","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,aAA0C;AACvH,QAAM,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AAC5F,QAAM,KAAKC,MAAAA,MAAM,MAAM,EAAE;AACzB,QAAM,MAAMC,aAAAA,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,yHACI,MAAM;AAAA,IAAA,IAEd;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EACd;AAGV,QAAM,eAAe,CAAC,UAA+C;AACjE,eAAW,MAAM,OAAO,OAAO;AAAA,EACnC;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACP,sBAAkB;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEAH,mBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAC3E;AAAA,EACJ,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACFA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QAAA;AAAA,QAEpB,MAAM;AAAA,MAAA;AAAA,MAEV,aAAU;AAAA,IAAA;AAAA,IACVA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAETA,iCAAA;AAAA,MAACI,KAAAA;AAAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC;AAIR,MAAI,OAAO;AACP,UAAM,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,0DACK,QAAA,EAAK,WAAW,yBAAyB,aAAU,wBAC/C,SACDJ,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAER;AAEA,SAAO;AACX,CAAC;AACD,SAAS,cAAc;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Icon } from '@/components';\nimport { useId } from '@/hooks/useId';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Whether user input is required */\n    required?: boolean;\n};\n\nexport type UncontrolledCheckboxProps = {\n    checked?: never;\n    onChange?: never;\n    /** The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n} & CheckboxBaseProps;\n\nexport type ControlledCheckboxProps = {\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} & CheckboxBaseProps;\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed',\n        invalid\n            ? {\n                  'border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:bg-red-500/50 checked:text-white/50 indeterminate:bg-red-500/50 indeterminate:text-white/50':\n                      props.disabled,\n              }\n            : {\n                  'border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={cn(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","Checkbox","useId","useMergedRef","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,aAA0C;AACvH,QAAM,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AAC5F,QAAM,KAAKC,MAAAA,MAAM,MAAM,EAAE;AACzB,QAAM,MAAMC,aAAAA,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,yHACI,MAAM;AAAA,IAAA,IAEd;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EACd;AAGV,QAAM,eAAe,CAAC,UAA+C;AACjE,eAAW,MAAM,OAAO,OAAO;AAAA,EACnC;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACP,sBAAkB;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEAH,mBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAC3E;AAAA,EACJ,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACFA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QAAA;AAAA,QAEpB,MAAM;AAAA,MAAA;AAAA,MAEV,aAAU;AAAA,IAAA;AAAA,IACVA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAETA,iCAAA;AAAA,MAACI,KAAAA;AAAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC;AAIR,MAAI,OAAO;AACP,UAAM,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,0DACK,QAAA,EAAK,WAAW,yBAAyB,aAAU,wBAC/C,SACDJ,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAER;AAEA,SAAO;AACX,CAAC;AACD,SAAS,cAAc;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Whether user input is required */\n    required?: boolean;\n};\n\nexport type UncontrolledCheckboxProps = {\n    checked?: never;\n    onChange?: never;\n    /** The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n} & CheckboxBaseProps;\n\nexport type ControlledCheckboxProps = {\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} & CheckboxBaseProps;\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed',\n        invalid\n            ? {\n                  'border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:bg-red-500/50 checked:text-white/50 indeterminate:bg-red-500/50 indeterminate:text-white/50':\n                      props.disabled,\n              }\n            : {\n                  'border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={cn(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox"],"mappings":";;;;;AAsCO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,aAA0C;AACvH,QAAM,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AAC5F,QAAM,KAAK,MAAM,MAAM,EAAE;AACzB,QAAM,MAAM,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,yHACI,MAAM;AAAA,IAAA,IAEd;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EACd;AAGV,QAAM,eAAe,CAAC,UAA+C;AACjE,eAAW,MAAM,OAAO,OAAO;AAAA,EACnC;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACP,sBAAkB;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAC3E;AAAA,EACJ,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QAAA;AAAA,QAEpB,MAAM;AAAA,MAAA;AAAA,MAEV,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAET,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC;AAIR,MAAI,OAAO;AACP,UAAM,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,+CACK,QAAA,EAAK,WAAW,yBAAyB,aAAU,wBAC/C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAER;AAEA,SAAO;AACX,CAAC;AACD,SAAS,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Icon } from '@/components';\nimport { useId } from '@/hooks/useId';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Whether user input is required */\n    required?: boolean;\n};\n\nexport type UncontrolledCheckboxProps = {\n    checked?: never;\n    onChange?: never;\n    /** The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n} & CheckboxBaseProps;\n\nexport type ControlledCheckboxProps = {\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} & CheckboxBaseProps;\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed',\n        invalid\n            ? {\n                  'border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:bg-red-500/50 checked:text-white/50 indeterminate:bg-red-500/50 indeterminate:text-white/50':\n                      props.disabled,\n              }\n            : {\n                  'border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={cn(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox"],"mappings":";;;;;AAsCO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,aAA0C;AACvH,QAAM,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AAC5F,QAAM,KAAK,MAAM,MAAM,EAAE;AACzB,QAAM,MAAM,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,yHACI,MAAM;AAAA,IAAA,IAEd;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EACd;AAGV,QAAM,eAAe,CAAC,UAA+C;AACjE,eAAW,MAAM,OAAO,OAAO;AAAA,EACnC;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACP,sBAAkB;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAC3E;AAAA,EACJ,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QAAA;AAAA,QAEpB,MAAM;AAAA,MAAA;AAAA,MAEV,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAET,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC;AAIR,MAAI,OAAO;AACP,UAAM,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,+CACK,QAAA,EAAK,WAAW,yBAAyB,aAAU,wBAC/C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAER;AAEA,SAAO;AACX,CAAC;AACD,SAAS,cAAc;"}

package/dist/components/Combobox/Combobox.cjs

@@ -3,13 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const popover = require("@base-ui/react/popover");
 const cn = require("clsx");
 const React = require("react");
-const useBoundingClientRectListener = require("../../hooks/useBoundingClientRectListener.cjs");
-const Input = require("../Input/Input.cjs");
-const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const ScrollableList = require("../Listbox/ScrollableList.cjs");
-const Localization = require("../Provider/Localization.cjs");
+const useBoundingClientRectListener = require("../../hooks/useBoundingClientRectListener.cjs");
 const useCombobox = require("./useCombobox.cjs");
 ;/* empty css               */
+const Localization = require("../Provider/Localization.cjs");
+const Input = require("../Input/Input.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport type { DialogProps } from '../Dialog/Dialog';\nimport type { InputProps } from '../Input/Input';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { ScrollableList } from '../Listbox/ScrollableList';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\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    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\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} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\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            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport type { ScrollableListItem, ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { ScrollableList } from '@/components/Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\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    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\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} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\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            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}

package/dist/components/Combobox/Combobox.d.ts

@@ -1,5 +1,4 @@
-import { DialogProps } from '../Dialog/Dialog';
-import { InputProps } from '../Input/Input';
+import { DialogProps, InputProps } from '..';
 import { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';
 import * as React from 'react';
 export type ComboboxTexts = {

package/dist/components/Combobox/Combobox.js

@@ -1,13 +1,13 @@
 import { Popover } from "@base-ui/react/popover";
 import cn from "clsx";
 import * as React from "react";
-import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
-import { Input } from "../Input/Input.js";
-import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { ScrollableList } from "../Listbox/ScrollableList.js";
-import { useLocalization } from "../Provider/Localization.js";
+import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
 import { useCombobox } from "./useCombobox.js";
 /* empty css             */
+import { useLocalization } from "../Provider/Localization.js";
+import { Input } from "../Input/Input.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
   const { className: externalClassName, dialog, style, ...otherProps } = props;
   const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport type { DialogProps } from '../Dialog/Dialog';\nimport type { InputProps } from '../Input/Input';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { ScrollableList } from '../Listbox/ScrollableList';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\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    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\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} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\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            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAsEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport type { ScrollableListItem, ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { ScrollableList } from '@/components/Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\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    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\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} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\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            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAmEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/Combobox/useCombobox.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const debounce = require("lodash/debounce");
 const nanoid = require("nanoid");
 const React = require("react");
+const ScrollableList = require("../Listbox/ScrollableList.cjs");
+const util = require("../Listbox/util.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
 const dom = require("../../utils/dom.cjs");
 const input = require("../../utils/input.cjs");
-const ScrollableList = require("../Listbox/ScrollableList.cjs");
-const util = require("../Listbox/util.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -127,7 +127,7 @@ const useCombobox = (props, ref) => {
     } else {
       setOpen(false);
     }
-  }, [inputValue, data]);
+  }, [inputValue, data, value]);
   React__namespace.useEffect(() => {
     if (open) {
       setCurrentIndex(util.getIndexFromValue(data, inputValue) || 0);

package/dist/components/Combobox/useCombobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, '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 = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\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        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<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(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\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 ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\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    // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n    // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n    const [prevValue, setPrevValue] = React.useState(value);\n    if (value !== prevValue) {\n        setPrevValue(value);\n\n        if (value !== undefined) {\n            // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n            const renderedValue = convertToInputValue(value);\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n            // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n            // so clear it. Text the user typed never matches the previous render, so it's preserved.\n            if (inputValue !== '') {\n                setInputValue('');\n            }\n        }\n    }\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 === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 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    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(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            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\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        ...otherProps,\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-label': ariaLabel,\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        onKeyDownCapture: !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":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}
+{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport type { InputProps } from '@/components';\nimport type {\n    ScrollableListItem,\n    ScrollableListItemValue,\n    ScrollableListPropsWithRef,\n} from '@/components/Listbox/ScrollableList';\nimport { getId } from '@/components/Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '@/utils/dom';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, '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 = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\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        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<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(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\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 ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\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    // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n    // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n    const [prevValue, setPrevValue] = React.useState(value);\n    if (value !== prevValue) {\n        setPrevValue(value);\n\n        if (value !== undefined) {\n            // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n            const renderedValue = convertToInputValue(value);\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n            // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n            // so clear it. Text the user typed never matches the previous render, so it's preserved.\n            if (inputValue !== '') {\n                setInputValue('');\n            }\n        }\n    }\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 === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n        // `value` commits one render after the input on Tab/select; without it in the deps the guard\n        // reopens the popover with a stale `value` and never re-runs to close it. EC-83328\n    }, [inputValue, data, value]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(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            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\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        ...otherProps,\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-label': ariaLabel,\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        onKeyDownCapture: !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":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}

package/dist/components/Combobox/useCombobox.d.ts

@@ -1,4 +1,4 @@
-import { InputProps } from '../Input/Input';
+import { InputProps } from '..';
 import { ScrollableListPropsWithRef } from '../Listbox/ScrollableList';
 import { ComboboxProps } from './Combobox';
 import * as React from 'react';

package/dist/components/Combobox/useCombobox.js

@@ -1,11 +1,11 @@
 import debounce from "lodash/debounce";
 import { nanoid } from "nanoid";
 import * as React from "react";
+import { getId } from "../Listbox/ScrollableList.js";
+import { useFlattenedData, findByValue, filterData, getIndexFromValue, setInputValueByRef, sanitizeItem, getOptionParents } from "../Listbox/util.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
 import { isElementInsideTable3OrReport } from "../../utils/dom.js";
 import { createCustomKeyboardEvent } from "../../utils/input.js";
-import { getId } from "../Listbox/ScrollableList.js";
-import { useFlattenedData, findByValue, filterData, getIndexFromValue, setInputValueByRef, sanitizeItem, getOptionParents } from "../Listbox/util.js";
 const debouncer = debounce((f) => f(), 200);
 const defaultConvertToInputValue = (value) => String(value ?? "");
 const useCombobox = (props, ref) => {
@@ -108,7 +108,7 @@ const useCombobox = (props, ref) => {
     } else {
       setOpen(false);
     }
-  }, [inputValue, data]);
+  }, [inputValue, data, value]);
   React.useEffect(() => {
     if (open) {
       setCurrentIndex(getIndexFromValue(data, inputValue) || 0);