@economic/taco 2.48.2 → 2.49.0-server.1

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

@@ -1,38 +1,35 @@
 import { useState, useEffect, createElement, memo } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { DayPicker, Button } from 'react-day-picker';
 
-const thisYear = /*#__PURE__*/new Date().getFullYear();
-const years = [];
-for (let i = thisYear - 50; i <= thisYear + 10; i += 1) {
+var _excluded = ["onChange", "value", "disabledDays"];
+var thisYear = /*#__PURE__*/new Date().getFullYear();
+var years = [];
+for (var i = thisYear - 50; i <= thisYear + 10; i += 1) {
   years.push(i);
 }
-const Navbar = /*#__PURE__*/memo(({
-  onMonthChange,
-  value = new Date()
-}) => {
-  const {
-    texts: {
-      calendar: {
-        actions,
-        months
-      }
-    }
-  } = useLocalization();
-  const handleChange = event => {
-    const {
-      year,
-      month
-    } = event.target.form;
+var Navbar = /*#__PURE__*/memo(function (_ref) {
+  var onMonthChange = _ref.onMonthChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? new Date() : _ref$value;
+  var _useLocalization = useLocalization(),
+    _useLocalization$text = _useLocalization.texts.calendar,
+    actions = _useLocalization$text.actions,
+    months = _useLocalization$text.months;
+  var handleChange = function handleChange(event) {
+    var _event$target$form = event.target.form,
+      year = _event$target$form.year,
+      month = _event$target$form.month;
     onMonthChange(new Date(year.value, month.value));
   };
-  const onNextClick = () => {
+  var onNextClick = function onNextClick() {
     onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));
   };
-  const onPreviousClick = () => {
+  var onPreviousClick = function onPreviousClick() {
     onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));
   };
   return /*#__PURE__*/createElement("div", {
@@ -44,18 +41,22 @@ const Navbar = /*#__PURE__*/memo(({
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map((month, i) => (/*#__PURE__*/createElement("option", {
-    key: month,
-    value: i
-  }, month)))), /*#__PURE__*/createElement("select", {
+  }, months.map(function (month, i) {
+    return /*#__PURE__*/createElement("option", {
+      key: month,
+      value: i
+    }, month);
+  })), /*#__PURE__*/createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(year => (/*#__PURE__*/createElement("option", {
-    key: year,
-    value: year
-  }, String(year)))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
+  }, years.map(function (year) {
+    return /*#__PURE__*/createElement("option", {
+      key: year,
+      value: year
+    }, String(year));
+  }))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
     title: actions.previousMonth
   }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",
@@ -73,14 +74,12 @@ const Navbar = /*#__PURE__*/memo(({
     rounded: true
   }))));
 });
-const TodayButton = ({
-  handleChange
-}) => {
-  const {
-    texts
-  } = useLocalization();
-  const handleCalendarClickToday = () => {
-    const today = new Date();
+var TodayButton = function TodayButton(_ref2) {
+  var handleChange = _ref2.handleChange;
+  var _useLocalization2 = useLocalization(),
+    texts = _useLocalization2.texts;
+  var handleCalendarClickToday = function handleCalendarClickToday() {
+    var today = new Date();
     // set to midday to avoid UTC offset causing dates to be mismatched server side
     today.setHours(12);
     today.setMinutes(0);
@@ -92,59 +91,63 @@ const TodayButton = ({
     onClick: handleCalendarClickToday
   }, texts.calendar.actions.today);
 };
-const Calendar = props => {
-  var _ref;
-  const {
-    onChange: handleChange,
-    value,
-    disabledDays,
-    visibleMonth,
-    ...otherProps
-  } = props;
-  const [internalVisibleMonth, setInternalVisibleMonth] = useState((_ref = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref !== void 0 ? _ref : new Date());
-  const {
-    texts
-  } = useLocalization();
-  useEffect(() => {
-    if (visibleMonth && visibleMonth !== internalVisibleMonth) {
-      setInternalVisibleMonth(visibleMonth);
+var Calendar = function Calendar(props) {
+  var handleChange = props.onChange,
+    value = props.value,
+    disabledDays = props.disabledDays,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var _React$useState = useState(value !== null && value !== void 0 ? value : new Date()),
+    visibleMonth = _React$useState[0],
+    setVisibleMonth = _React$useState[1];
+  var _useLocalization3 = useLocalization(),
+    texts = _useLocalization3.texts;
+  useEffect(function () {
+    if (visibleMonth !== value) {
+      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
     }
-  }, [visibleMonth]);
-  const handleDayClick = (date, modifiers, event) => {
+    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
+  }, [value]);
+  var handleDayClick = function handleDayClick(date, modifiers, event) {
     if (modifiers.outside || modifiers.disabled) {
       return;
     }
     handleChange(date, event);
   };
-  const className = cn('flex bg-white text-xs p-2', otherProps.className);
+  var className = cn('flex bg-white text-xs p-2', otherProps.className);
   return /*#__PURE__*/createElement("div", {
     "data-taco": "calendar"
   }, /*#__PURE__*/createElement(DayPicker, {
     className: className,
     captionLayout: "dropdown-buttons",
     weekStartsOn: 1,
-    month: internalVisibleMonth,
+    month: visibleMonth,
     numberOfMonths: 1,
     components: {
-      Caption: props => (/*#__PURE__*/createElement(Navbar, Object.assign({}, props, {
-        onMonthChange: setInternalVisibleMonth,
-        value: internalVisibleMonth
-      }))),
-      Footer: () => (/*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
-        colSpan: 7,
-        className: "text-center"
-      }, /*#__PURE__*/createElement(TodayButton, {
-        handleChange: handleChange
-      }))))),
-      HeadRow: () => (/*#__PURE__*/createElement("tr", null, texts.calendar.weekdaysShort.map((weekday, index) => {
-        const label = texts.calendar.weekdays && texts.calendar.weekdays[index];
-        return /*#__PURE__*/createElement("th", {
-          key: weekday,
-          "aria-label": label,
-          className: "rdp-head_cell",
-          title: label
-        }, weekday);
-      })))
+      Caption: function Caption(props) {
+        return /*#__PURE__*/createElement(Navbar, Object.assign({}, props, {
+          onMonthChange: setVisibleMonth,
+          value: visibleMonth
+        }));
+      },
+      Footer: function Footer() {
+        return /*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
+          colSpan: 7,
+          className: "text-center"
+        }, /*#__PURE__*/createElement(TodayButton, {
+          handleChange: handleChange
+        }))));
+      },
+      HeadRow: function HeadRow() {
+        return /*#__PURE__*/createElement("tr", null, texts.calendar.weekdaysShort.map(function (weekday, index) {
+          var label = texts.calendar.weekdays && texts.calendar.weekdays[index];
+          return /*#__PURE__*/createElement("th", {
+            key: weekday,
+            "aria-label": label,
+            className: "rdp-head_cell",
+            title: label
+          }, weekday);
+        }));
+      }
     },
     onDayClick: handleDayClick,
     selected: value,

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\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\n/** @internal */\ntype CustomNavbarElementProps = {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n    const {\n        texts: {\n            calendar: { actions, months },\n        },\n    } = useLocalization();\n\n    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n        const { year, month } = event.target.form as HTMLFormElement;\n        onMonthChange(new Date(year.value, month.value));\n    };\n\n    const onNextClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n    };\n\n    const onPreviousClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n    };\n\n    return (\n        <div className=\"mb-3 flex items-center justify-between\">\n            <form className=\"inline-flex space-x-1\">\n                <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                    {months.map((month, i) => (\n                        <option key={month} value={i}>\n                            {month}\n                        </option>\n                    ))}\n                </select>\n                <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                    {years.map(year => (\n                        <option key={year} value={year}>\n                            {String(year)}\n                        </option>\n                    ))}\n                </select>\n            </form>\n            <div>\n                <Tooltip title={actions.previousMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={onPreviousClick}\n                        rounded\n                    />\n                </Tooltip>\n                <Tooltip title={actions.nextMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={onNextClick}\n                        rounded\n                    />\n                </Tooltip>\n            </div>\n        </div>\n    );\n});\n\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    visibleMonth?: Date;\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            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}>\n            {texts.calendar.actions.today}\n        </Button>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, visibleMonth, ...otherProps } = props;\n    const [internalVisibleMonth, setInternalVisibleMonth] = React.useState(visibleMonth ?? value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth && visibleMonth !== internalVisibleMonth) {\n            setInternalVisibleMonth(visibleMonth);\n        }\n    }, [visibleMonth]);\n\n    const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                className={className}\n                captionLayout=\"dropdown-buttons\"\n                weekStartsOn={1}\n                month={internalVisibleMonth}\n                numberOfMonths={1}\n                components={{\n                    Caption: (props: CaptionProps) => (\n                        <Navbar {...props} onMonthChange={setInternalVisibleMonth} value={internalVisibleMonth} />\n                    ),\n                    Footer: () => (\n                        <tfoot>\n                            <tr>\n                                <td colSpan={7} className=\"text-center\">\n                                    <TodayButton handleChange={handleChange} />\n                                </td>\n                            </tr>\n                        </tfoot>\n                    ),\n                    HeadRow: () => (\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                    ),\n                }}\n                onDayClick={handleDayClick}\n                selected={value}\n                disabled={disabledDays}\n            />\n        </div>\n    );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","visibleMonth","otherProps","internalVisibleMonth","setInternalVisibleMonth","_ref","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\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\n/** @internal */\ntype CustomNavbarElementProps = {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n    const {\n        texts: {\n            calendar: { actions, months },\n        },\n    } = useLocalization();\n\n    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n        const { year, month } = event.target.form as HTMLFormElement;\n        onMonthChange(new Date(year.value, month.value));\n    };\n\n    const onNextClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n    };\n\n    const onPreviousClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n    };\n\n    return (\n        <div className=\"mb-3 flex items-center justify-between\">\n            <form className=\"inline-flex space-x-1\">\n                <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                    {months.map((month, i) => (\n                        <option key={month} value={i}>\n                            {month}\n                        </option>\n                    ))}\n                </select>\n                <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                    {years.map(year => (\n                        <option key={year} value={year}>\n                            {String(year)}\n                        </option>\n                    ))}\n                </select>\n            </form>\n            <div>\n                <Tooltip title={actions.previousMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={onPreviousClick}\n                        rounded\n                    />\n                </Tooltip>\n                <Tooltip title={actions.nextMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={onNextClick}\n                        rounded\n                    />\n                </Tooltip>\n            </div>\n        </div>\n    );\n});\n\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            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}>\n            {texts.calendar.actions.today}\n        </Button>\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        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                className={className}\n                captionLayout=\"dropdown-buttons\"\n                weekStartsOn={1}\n                month={visibleMonth}\n                numberOfMonths={1}\n                components={{\n                    Caption: (props: CaptionProps) => <Navbar {...props} onMonthChange={setVisibleMonth} value={visibleMonth} />,\n                    Footer: () => (\n                        <tfoot>\n                            <tr>\n                                <td colSpan={7} className=\"text-center\">\n                                    <TodayButton handleChange={handleChange} />\n                                </td>\n                            </tr>\n                        </tfoot>\n                    ),\n                    HeadRow: () => (\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                    ),\n                }}\n                onDayClick={handleDayClick}\n                selected={value}\n                disabled={disabledDays}\n            />\n        </div>\n    );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","_ref","onMonthChange","_ref$value","value","_useLocalization","useLocalization","_useLocalization$text","texts","calendar","actions","months","handleChange","event","_event$target$form","target","form","year","month","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","_ref2","_useLocalization2","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","otherProps","_objectWithoutPropertiesLoose","_excluded","_React$useState","visibleMonth","setVisibleMonth","_useLocalization3","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}

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

@@ -1,14 +1,15 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { Truncate } from '../Truncate/Truncate.js';
 
-const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
-  const {
-    noPadding,
-    ...props
-  } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
+var _excluded = ["noPadding"],
+  _excluded2 = ["title", "menu", "children", "className"];
+var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
+  var noPadding = externalProps.noPadding,
+    props = _objectWithoutPropertiesLoose(externalProps, _excluded);
+  var className = cn('flex-grow overflow-auto', {
     'mx-4 mb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
@@ -17,15 +18,13 @@ const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref)
     ref: ref
   }));
 });
-const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
-  const {
-    title,
-    menu,
-    children,
-    className,
-    ...otherProps
-  } = props;
-  const cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
+var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
+  var title = props.title,
+    menu = props.menu,
+    children = props.children,
+    className = props.className,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+  var cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
   return /*#__PURE__*/createElement("div", Object.assign({}, otherProps, {
     className: cardClassName,
     "data-taco": "card",

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\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            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","otherProps","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEL,SAAS;IAAE,GAAGM;GAAY,GAAGP,KAAK;EACjE,MAAMQ,aAAa,GAAGN,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIN,uCAASY,UAAU;IAAEN,SAAS,EAAEO,aAAa;iBAAY,MAAM;IAACV,GAAG,EAAEA;mBACjEH;IAAKM,SAAS,EAAC;KACVG,KAAK,kBACFT,cAACc,QAAQ;IAACC,OAAO,EAAEN;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACgB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACR,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\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            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","_objectWithoutPropertiesLoose","_excluded","className","cn","Card","title","menu","children","otherProps","_excluded2","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;;;;AAWA,IAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,IAAQC,SAAS,GAAeF,aAAa,CAArCE,SAAS;IAAKC,KAAK,GAAAC,6BAAA,CAAKJ,aAAa,EAAAK,SAAA;EAC7C,IAAMC,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACL;GACjB,EACDC,KAAK,CAACG,SAAS,CAClB;EACD,oBAAOR,uCAASK,KAAK;IAAEG,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACL,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;IASWO,IAAI,gBAAGV,UAAgB,CAA4B,SAASU,IAAIA,CAACL,KAAK,EAAEF,GAAG;EACpF,IAAQQ,KAAK,GAA+CN,KAAK,CAAzDM,KAAK;IAAEC,IAAI,GAAyCP,KAAK,CAAlDO,IAAI;IAAEC,QAAQ,GAA+BR,KAAK,CAA5CQ,QAAQ;IAAEL,SAAS,GAAoBH,KAAK,CAAlCG,SAAS;IAAKM,UAAU,GAAAR,6BAAA,CAAKD,KAAK,EAAAU,UAAA;EACjE,IAAMC,aAAa,GAAGP,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIR,uCAASc,UAAU;IAAEN,SAAS,EAAEQ,aAAa;iBAAY,MAAM;IAACb,GAAG,EAAEA;mBACjEH;IAAKQ,SAAS,EAAC;KACVG,KAAK,kBACFX,cAACiB,QAAQ;IAACC,OAAO,EAAEP;kBACfX;IAAIQ,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGZ,cAACmB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACT,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACX,OAAO,GAAGA,OAAO;;;;"}

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

@@ -1,22 +1,22 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { useId } from '../../hooks/useId.js';
 import { Spinner } from '../Spinner/Spinner.js';
 
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  const {
-    checked,
-    indeterminate,
-    invalid,
-    label,
-    loading,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+var _excluded = ["checked", "indeterminate", "invalid", "label", "loading", "onChange"];
+var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  var checked = props.checked,
+    indeterminate = props.indeterminate,
+    invalid = props.invalid,
+    label = props.label,
+    loading = props.loading,
+    onChange = props.onChange,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var id = useId(props.id);
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label
   }, invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
@@ -25,29 +25,31 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
     'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
   }, props.className);
-  let handleChange;
+  var handleChange;
   if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
+    handleChange = function handleChange(checked) {
+      return onChange(checked === 'indeterminate' ? false : checked);
+    };
   }
-  let labelledByProps = null;
+  var labelledByProps = null;
   if (label) {
     labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
+      'aria-labelledby': id + "-label",
+      id: id
     };
   }
   // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
+  var handleKeyDown = function handleKeyDown(event) {
     if (event.key === 'Enter') {
       event.currentTarget.click();
     }
   };
-  const spinnerClassname = cn(
+  var spinnerClassname = cn(
   //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
   "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
     'text-blue-500': !checked && !indeterminate
   });
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
+  var element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
     "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
@@ -64,7 +66,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     className: "!h-full !w-full"
   }))));
   if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+    var labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled
     });
     return /*#__PURE__*/createElement("span", {
@@ -72,7 +74,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       "data-taco": "checkbox-container"
     }, element, /*#__PURE__*/createElement("label", {
       htmlFor: id,
-      id: `${id}-label`
+      id: id + "-label"
     }, label));
   }
   return element;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;;;IA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,IAAQC,OAAO,GAAsEF,KAAK,CAAlFE,OAAO;IAAEC,aAAa,GAAuDH,KAAK,CAAzEG,aAAa;IAAEC,OAAO,GAA8CJ,KAAK,CAA1DI,OAAO;IAAEC,KAAK,GAAuCL,KAAK,CAAjDK,KAAK;IAAEC,OAAO,GAA8BN,KAAK,CAA1CM,OAAO;IAAEC,QAAQ,GAAoBP,KAAK,CAAjCO,QAAQ;IAAKC,UAAU,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC1F,IAAMC,EAAE,GAAGC,KAAK,CAACZ,KAAK,CAACW,EAAE,CAAC;EAE1B,IAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACT;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACe,QAAQ;IACnB,mFAAmF,EAAEf,KAAK,CAACe;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACf,KAAK,CAACe,QAAQ;IACnB,kFAAkF,EAAEf,KAAK,CAACe;GAC7F,EACPf,KAAK,CAACa,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIT,QAAQ,EAAE;IACVS,YAAY,GAAG,SAAAA,aAACd,OAAqB;MAAA,OAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;;EAGrG,IAAIe,eAAe,GAAkC,IAAI;EAEzD,IAAIZ,KAAK,EAAE;IACPY,eAAe,GAAG;MACd,iBAAiB,EAAKN,EAAE,WAAQ;MAChCA,EAAE,EAAFA;KACH;;;EAIL,IAAMO,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,IAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACZ,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,IAAMqB,OAAO,gBACTzB,cAAC0B,IAAsB,oBACfjB,UAAU,EACVS,eAAe;oBACLb,OAAO,GAAG,MAAM,GAAGsB,SAAS;iBAChC,UAAU;IACpBxB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDW,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBjB,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC8B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCxB,cAAC0B,SAA2B;IAACZ,SAAS,EAAC;kBACnCd,cAAC+B,IAAI;IAACC,IAAI,EAAE5B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEU,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIR,KAAK,EAAE;IACP,IAAM2B,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEd,KAAK,CAACe;KAC7C,CAAC;IAEF,oBACIhB;MAAMc,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRzB;MAAOkC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAKA,EAAE;OACxBN,KAAK,CACF,CACL;;EAIf,OAAOmB,OAAO;AAClB,CAAC;AACD1B,QAAQ,CAACoC,WAAW,GAAG,UAAU;;;;"}

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

@@ -1,5 +1,6 @@
 import { forwardRef, useRef, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Root, Anchor, Portal, Content } from '@radix-ui/react-popover';
@@ -8,26 +9,23 @@ import { Input } from '../Input/Input.js';
 import { ScrollableList } from '../Listbox/ScrollableList.js';
 import { useCombobox } from './useCombobox.js';
 
-const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
-  const {
-    className: externalClassName,
-    dialog,
-    style,
-    ...otherProps
-  } = props;
-  const {
-    combobox,
-    button,
-    input,
-    popover,
-    list
-  } = useCombobox(otherProps, ref);
-  const internalRef = useRef(null);
-  const {
-    texts
-  } = useLocalization();
-  const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn('inline-flex relative', {
+var _excluded = ["className", "dialog", "style"];
+var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
+  var externalClassName = props.className,
+    dialog = props.dialog,
+    style = props.style,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCombobox = useCombobox(otherProps, ref),
+    combobox = _useCombobox.combobox,
+    button = _useCombobox.button,
+    input = _useCombobox.input,
+    popover = _useCombobox.popover,
+    list = _useCombobox.list;
+  var internalRef = useRef(null);
+  var _useLocalization = useLocalization(),
+    texts = _useLocalization.texts;
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
   return /*#__PURE__*/createElement("span", {
@@ -50,7 +48,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
-      onClick: () => {
+      onClick: function onClick() {
         var _input$ref$current;
         popover.onOpenChange(true);
         (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
@@ -61,7 +59,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: event => {
+      onFocus: function onFocus(event) {
         var _input$ref$current2;
         // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
         event.preventDefault();
@@ -73,7 +71,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     })) : undefined
   })))), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, {
     align: "start",
-    onOpenAutoFocus: event => {
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
       event.preventDefault();
     },
     sideOffset: 4

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

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