@economic/taco 2.15.0 → 2.17.0

package/dist/esm/index.css

@@ -705,94 +705,108 @@
 }
 
 /* normal rows */
-[role='row']:not([data-selected='true']):not([data-error='true']) [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']) [role='cell'] {
         @apply bg-white;
     }
-[role='row']:not([data-selected='true']):not([data-error='true']):hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
+/* Fields shouldn’t have white background when not in current row and hovered*/
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-grey-100;
+        }
 /* normal rows when focus is inside the table */
 [data-taco='table2']:focus-within
-    [role='row'][data-current='true']:not([data-selected='true']):not([data-error='true'])
+    [role='row'][data-current='true']:not([data-selected='true']):not([data-invalid='true'])
     [role='cell'] {
     --table3-row-actions-shadow: theme(colors.grey.200);
     @apply bg-grey-200;
 }
 /* normal rows when hover is paused */
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.white);
         @apply !bg-white;
     }
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.200);
         @apply !bg-grey-200;
     }
 
 /* selected rows */
-[role='row'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']) [role='cell'] {
         @apply bg-blue-100;
     }
-[role='row'][data-selected='true']:not([data-error='true']):hover [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'],
+[role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true']:hover [role='cell'],
     
-    [role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
+    [role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
 /* selected rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[data-taco='table2']:focus-within
+    [role='row'][data-current='true'][data-selected='true']:not([data-invalid='true'])
+    [role='cell'] {
     --table3-row-actions-shadow: #ccd8eb;
     @apply bg-[#CCD8EB];
 }
 /* selected rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.blue.100);
         @apply !bg-blue-100;
     }
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #ccd8eb;
         @apply !bg-[#CCD8EB];
     }
 
 /* error rows */
-[role='row'][data-error='true'] [role='cell'] {
+[role='row'][data-invalid='true'] [role='cell'] {
         @apply bg-[#FFEDE9];
     }
-[role='row'][data-error='true']:hover [role='cell'] {
+[role='row'][data-invalid='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
-[role='row'][data-error='true'][data-current='true'] [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply bg-red-100;
     }
-[role='row'][data-error='true'][data-current='true']:hover [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
+/* Fields with errors shouldn’t have white background when not in current row */
+[role='row'][data-invalid='true'][data-current='false'] [role='cell'] .bg-white {
+            @apply !bg-[#FFEDE9];
+        }
+/* Request from UX: In error state, input backgroud color should be the same as row background color */
+[role='row'][data-invalid='true'][data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-[#FFE4DE];
+        }
 /* error rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-error='true'] [role='cell'] {
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-invalid='true'] [role='cell'] {
     --table3-row-actions-shadow: theme(colors.red.100);
     @apply bg-red-100;
 }
 /* error rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: #ffede9;
         @apply !bg-[#FFEDE9];
     }
-[data-pause-hover='true'] [role='row'][data-error='true']:hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply !bg-red-100;
     }
@@ -806,6 +820,12 @@
     @apply !wcag-blue-500;
 }
 
+/* error row */
+/*!!!!*/
+[data-taco='table2-body'] [role='row'][data-invalid='true'] [role='cell'] {
+    /*@apply !bg-[#FFF5F2];*/
+}
+
 /* cell component overrides */
 
 /* small font size */
@@ -824,7 +844,9 @@
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'] {
+[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
+[data-font-size='small'] [role='cell'] [data-taco='icon'],
+[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
 
@@ -832,11 +854,21 @@
     @apply !-my-1;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='input-container'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='input-container'] {
     @apply !-my-[3px];
 }
 
+/* from validation */
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1;
+    @apply !mb-0;
+}
+/*---*/
+
 [data-font-size='small'] [role='cell'] [data-taco='input'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
 [data-font-size='small'] [role='cell'] [data-taco='textarea'] {
@@ -863,9 +895,18 @@
     @apply !my-0;
 }
 
-[data-font-size='small'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='small'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
 
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -893,9 +934,18 @@
     @apply !-my-[5px];
 }
 
-[data-font-size='medium'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='medium'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
 
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -904,6 +954,14 @@
     @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
 }
 
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1.5;
+    @apply !mb-0;
+}
+
 /* large font size */
 [data-font-size='large'] [role='cell'] > [data-taco='button'],
 [data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
@@ -923,6 +981,14 @@
     @apply !-my-[7.5px];
 }
 
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-2;
+    @apply !mb-0;
+}
+
 [data-font-size='large'] [role='cell'] [data-taco='input'],
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='textarea'] {
@@ -937,9 +1003,18 @@
     @apply !h-6 !w-6;
 }
 
-[data-font-size='large'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='large'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
 
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],

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

@@ -18,13 +18,13 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
     className: className,
     "data-taco": "banner",
     ref: ref
-  }, getBannerIcon(state), children, onClose ? /*#__PURE__*/createElement(IconButton, {
+  }, getBannerIcon(state), children, onClose ? ( /*#__PURE__*/createElement(IconButton, {
     "aria-label": texts.banner.close,
     className: "ml-auto -mr-2 self-start",
     icon: "close",
     appearance: "discrete",
     onClick: onClose
-  }) : null);
+  })) : null);
 });
 
 export { Banner };

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

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

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

@@ -40,18 +40,18 @@ const Navbar = /*#__PURE__*/memo(({
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map((month, i) => /*#__PURE__*/createElement("option", {
+  }, months.map((month, i) => ( /*#__PURE__*/createElement("option", {
     key: month,
     value: i
-  }, month))), /*#__PURE__*/createElement("select", {
+  }, month)))), /*#__PURE__*/createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(year => /*#__PURE__*/createElement("option", {
+  }, years.map(year => ( /*#__PURE__*/createElement("option", {
     key: year,
     value: year
-  }, String(year))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
+  }, String(year)))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
     title: actions.previousMonth
   }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":";;;;;;;AAsCA,MAAMA,QAAQ,gBAAG,IAAIC,IAAI,EAAE,CAACC,WAAW,EAAE;AACzC,MAAMC,KAAK,GAAa,EAAE;AAE1B,KAAK,IAAIC,CAAC,GAAGJ,QAAQ,GAAG,EAAE,EAAEI,CAAC,IAAIJ,QAAQ,GAAG,EAAE,EAAEI,CAAC,IAAI,CAAC,EAAE;EACpDD,KAAK,CAACE,IAAI,CAACD,CAAC,CAAC;;AAGjB,MAAME,MAAM,gBAAGC,IAAU,CACrB,CAAC;EAAEC,aAAa;EAAEC,WAAW;EAAEC,eAAe;EAAEC,KAAK,GAAG,IAAIV,IAAI;CAA8B;EAC1F,MAAM;IACFW,KAAK,EAAE;MACHC,QAAQ,EAAE;QAAEC,OAAO;QAAEC;;;GAE5B,GAAGC,eAAe,EAAE;EAErB,MAAMC,YAAY,GAAG,SAASA,YAAYA,CAACC,KAAK;IAC5C,MAAM;MAAEC,IAAI;MAAEC;KAAO,GAAGF,KAAK,CAACG,MAAM,CAACC,IAAI;IACzCd,aAAa,CAAC,IAAIP,IAAI,CAACkB,IAAI,CAACR,KAAK,EAAES,KAAK,CAACT,KAAK,CAAC,CAAC;GACnD;EAED,oBACIJ;IAAKgB,SAAS,EAAC;kBACXhB;IAAMgB,SAAS,EAAC;kBACZhB;IAAQgB,SAAS,EAAC,UAAU;IAACC,IAAI,EAAC,OAAO;IAACC,QAAQ,EAAER,YAAY;IAAEN,KAAK,EAAEA,KAAK,CAACe,QAAQ;KAClFX,MAAM,CAACY,GAAG,CAAC,CAACP,KAAK,EAAEhB,CAAC,kBACjBG;IAAQqB,GAAG,EAAER,KAAK;IAAET,KAAK,EAAEP;KACtBgB,KAAK,CAEb,CAAC,CACG,eACTb;IAAQgB,SAAS,EAAC,UAAU;IAACC,IAAI,EAAC,MAAM;IAACC,QAAQ,EAAER,YAAY;IAAEN,KAAK,EAAEA,KAAK,CAACT,WAAW;KACpFC,KAAK,CAACwB,GAAG,CAACR,IAAI,iBACXZ;IAAQqB,GAAG,EAAET,IAAI;IAAER,KAAK,EAAEQ;KACrBU,MAAM,CAACV,IAAI,CAAC,CAEpB,CAAC,CACG,CACN,eACPZ,wCACIA,cAACuB,OAAO;IAACC,KAAK,EAAEjB,OAAO,CAACkB;kBACpBzB,cAAC0B,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBC,IAAI,EAAC,cAAc;kBACPrB,OAAO,CAACkB,aAAa;IACjCI,OAAO,EAAEA,MAAM1B,eAAe,EAAE;IAChC2B,OAAO;IACT,CACI,eACV9B,cAACuB,OAAO;IAACC,KAAK,EAAEjB,OAAO,CAACwB;kBACpB/B,cAAC0B,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBC,IAAI,EAAC,eAAe;kBACRrB,OAAO,CAACwB,SAAS;IAC7BF,OAAO,EAAEA,MAAM3B,WAAW,EAAE;IAC5B4B,OAAO;IACT,CACI,CACR,CACJ;AAEd,CAAC,CACJ;MASYE,QAAQ,gBAAGhC,UAAgB,CAAC,SAASgC,QAAQA,CAACC,KAAoB,EAAEC,GAA8B;EAC3G,MAAM;IAAEhB,QAAQ,EAAER,YAAY;IAAEN,KAAK;IAAE+B,YAAY;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC5E,MAAM;IAAEI,MAAM;IAAEhC;GAAO,GAAGI,eAAe,EAAE;EAC3C,MAAM,CAAC6B,YAAY,EAAEC,eAAe,CAAC,GAAGvC,QAAc,CAACI,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAIV,IAAI,EAAE,CAAC;EAE3EM,SAAe,CAAC;IACZ,IAAIsC,YAAY,KAAKlC,KAAK,EAAE;MACxBmC,eAAe,CAACnC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAIV,IAAI,EAAE,CAAC;;;GAG3C,EAAE,CAACU,KAAK,CAAC,CAAC;EAEX,MAAMoC,cAAc,GAAGA,CAACC,IAAI,EAAEC,SAAS,EAAE/B,KAAK;IAC1C,IAAI+B,SAAS,CAACC,OAAO,IAAID,SAAS,CAACE,QAAQ,EAAE;MACzC;;IAGJlC,YAAY,CAAC+B,IAAI,EAAE9B,KAAK,CAAC;GAC5B;EAED,MAAMkC,wBAAwB,GAAGA;IAC7B,MAAMC,KAAK,GAAG,IAAIpD,IAAI,EAAE;;IAGxBoD,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;IAClBD,KAAK,CAACE,UAAU,CAAC,CAAC,CAAC;IACnBF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;IAEnBvC,YAAY,CAACoC,KAAK,CAAC;GACtB;EAED,MAAM9B,SAAS,GAAGkC,EAAE,CAAC,2BAA2B,EAAEd,UAAU,CAACpB,SAAS,CAAC;EAEvE,oBACIhB;iBAAe;kBACXA,cAACmD,cAAc,oBACPf,UAAU;IACdpB,SAAS,EAAEA,SAAS;IACpBH,KAAK,EAAEyB,YAAY;IACnBc,YAAY,EAAEhD,KAAK;IACnBiC,MAAM,EAAEA,MAAM,CAACgB,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9BC,cAAc,EAAE,CAAC;IACjB9C,MAAM,EAAEH,KAAK,CAACC,QAAQ,CAACE,MAAM;IAC7B+C,YAAY,EAAElD,KAAK,CAACC,QAAQ,CAACkD,QAAQ;IACrCC,aAAa,EAAEpD,KAAK,CAACC,QAAQ,CAACmD,aAAa;IAC3CC,aAAa,EAAEC,QAAQ,iBAAI3D,cAACD,MAAM,oBAAK4D,QAAQ;MAAE1D,aAAa,EAAEsC,eAAe;MAAEnC,KAAK,EAAEkC;OAAgB;IACxGsB,UAAU,EAAEpB,cAAc;IAC1BvC,aAAa,EAAEsC,eAAe;IAC9BsB,kBAAkB,EAAEhB,wBAAwB;IAC5CiB,cAAc,EAAEA,MAAM,IAAI;IAC1BC,WAAW,EAAE1D,KAAK,CAACC,QAAQ,CAACC,OAAO,CAACuC,KAAK;IACzCkB,cAAc,EAAE,CAAC;IACjB9B,GAAG,EAAEA,GAAG;IACRC,YAAY,EAAEA;KAChB,CACA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}

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

@@ -42,7 +42,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? /*#__PURE__*/createElement(IconButton
+    button: props.inline ? ( /*#__PURE__*/createElement(IconButton
     // In case of inline combobox, this icon button acts only as visual chevron representation,
     // so should be taken out of screen reader scope.
     , {
@@ -56,7 +56,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
         (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
       },
       tabIndex: -1
-    }) : dialog ? /*#__PURE__*/createElement(IconButton, {
+    })) : dialog ? ( /*#__PURE__*/createElement(IconButton, {
       "aria-label": texts.combobox.tooltip,
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
@@ -70,7 +70,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       ref: button.ref,
       tabIndex: -1,
       tooltip: texts.combobox.tooltip
-    }) : undefined
+    })) : undefined
   })))), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, {
     align: "start",
     onOpenAutoFocus: event => {

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

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

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

@@ -104,7 +104,8 @@ const useCombobox = ({
       event.preventDefault();
       return;
     }
-    if (onChange && event.target.value !== value) {
+    // event.target.value is always a string so it is important to cast value to a string before checking the equality
+    if (onChange && event.target.value !== String(value)) {
       const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);

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

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

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

@@ -34,20 +34,20 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      popover: props => /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, null, ({
+      popover: props => ( /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, null, ({
         close
-      }) => /*#__PURE__*/createElement("div", {
+      }) => ( /*#__PURE__*/createElement("div", {
         className: "-m-3 flex"
       }, /*#__PURE__*/createElement(Calendar, Object.assign({}, calendar, {
         onChange: (date, event) => {
           calendar.onChange(date, event);
           close();
         }
-      })), shortcuts && /*#__PURE__*/createElement("div", {
+      })), shortcuts && ( /*#__PURE__*/createElement("div", {
         className: "border-grey-300 flex flex-col border-l"
       }, /*#__PURE__*/createElement("span", {
         className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/createElement("ul", null, shortcuts.map(shortcut => /*#__PURE__*/createElement("li", {
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/createElement("ul", null, shortcuts.map(shortcut => ( /*#__PURE__*/createElement("li", {
         key: shortcut.text
       }, /*#__PURE__*/createElement("button", {
         type: "button",
@@ -57,7 +57,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           shortcut.onClick(event);
           close();
         }
-      }, shortcut.text)))), handleReset && /*#__PURE__*/createElement("button", {
+      }, shortcut.text))))), handleReset && ( /*#__PURE__*/createElement("button", {
         type: "button",
         className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {
@@ -65,7 +65,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           handleReset(event);
           close();
         }
-      }, texts.datepicker.clear))))),
+      }, texts.datepicker.clear))))))))),
       tooltip: texts.datepicker.calendar
     })
   })));