@economic/taco 14.0.0 → 14.1.0-EC-85807-code-report-fixes.0

package/dist/charts/utils/color.cjs

@@ -3,19 +3,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tailwind_colors = require("../../tailwind.colors.cjs");
 const mapColor = (palette, prefix = "") => {
   return Object.keys(palette).reduce((accum, color) => {
-    if (color === "current") {
+    const value = palette[color];
+    if (color === "current" || value === void 0) {
       return accum;
     }
-    if (typeof palette[color] === "string") {
-      return {
-        ...accum,
-        [prefix ? color === "DEFAULT" ? prefix : `${prefix}-${color}` : color]: palette[color]
-      };
+    if (typeof value === "string") {
+      accum[prefix ? color === "DEFAULT" ? prefix : `${prefix}-${color}` : color] = value;
+      return accum;
     }
-    return {
-      ...accum,
-      ...mapColor(palette[color], color)
-    };
+    return Object.assign(accum, mapColor(value, color));
   }, {});
 };
 const colors = mapColor(tailwind_colors);

package/dist/charts/utils/color.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color.cjs","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["// oxlint-disable-next-line taco/no-cross-boundary-relative-imports\nimport themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        }\n\n        if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        }\n\n        return {\n            ...accum,\n            ...mapColor(palette[color], color),\n        };\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (shade === 500 && (color === 'red' || color === 'blue' || color === 'purple' || color === 'green')) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";;;AAGA,MAAM,WAAW,CAAC,SAAc,SAAS,OAAY;AACjD,SAAO,OAAO,KAAK,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU;AACjD,QAAI,UAAU,WAAW;AACrB,aAAO;AAAA,IACX;AAEA,QAAI,OAAO,QAAQ,KAAK,MAAM,UAAU;AACpC,aAAO;AAAA,QACH,GAAG;AAAA,QACH,CAAC,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,GAAG,QAAQ,KAAK;AAAA,MAAA;AAAA,IAE/F;AAEA,WAAO;AAAA,MACH,GAAG;AAAA,MACH,GAAG,SAAS,QAAQ,KAAK,GAAG,KAAK;AAAA,IAAA;AAAA,EAEzC,GAAG,CAAA,CAAE;AACT;AAEO,MAAM,SAAiC,SAASA,eAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAE1F,MAAM,uBAAuB,CAAC,YAAoB;AACrD,QAAM,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAEhG,QAAM,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AACpD,QAAM,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACb,aAAO,cAAc,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,QAAI,UAAU,QAAQ,UAAU,SAAS,UAAU,UAAU,UAAU,YAAY,UAAU,UAAU;AACnG,aAAO;AAAA,IACX;AAEA,WAAO,cAAc,GAAG,KAAK,MAAM;AAAA,EACvC;AAEA,SAAO,UAAU,UAAU,UAAU;AACzC;;;;"}
+{"version":3,"file":"color.cjs","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["// oxlint-disable-next-line taco/no-cross-boundary-relative-imports\nimport themeColors from '../../../tailwind.colors.js';\n\ntype ColorPalette = { [key: string]: string | ColorPalette };\n\nconst mapColor = (palette: ColorPalette, prefix = ''): Record<string, string> => {\n    return Object.keys(palette).reduce<Record<string, string>>((accum, color) => {\n        const value = palette[color];\n\n        if (color === 'current' || value === undefined) {\n            return accum;\n        }\n\n        if (typeof value === 'string') {\n            accum[prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color] = value;\n            return accum;\n        }\n\n        return Object.assign(accum, mapColor(value, color));\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (shade === 500 && (color === 'red' || color === 'blue' || color === 'purple' || color === 'green')) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";;;AAKA,MAAM,WAAW,CAAC,SAAuB,SAAS,OAA+B;AAC7E,SAAO,OAAO,KAAK,OAAO,EAAE,OAA+B,CAAC,OAAO,UAAU;AACzE,UAAM,QAAQ,QAAQ,KAAK;AAE3B,QAAI,UAAU,aAAa,UAAU,QAAW;AAC5C,aAAO;AAAA,IACX;AAEA,QAAI,OAAO,UAAU,UAAU;AAC3B,YAAM,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,IAAI;AAChF,aAAO;AAAA,IACX;AAEA,WAAO,OAAO,OAAO,OAAO,SAAS,OAAO,KAAK,CAAC;AAAA,EACtD,GAAG,CAAA,CAAE;AACT;AAEO,MAAM,SAAiC,SAASA,eAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAE1F,MAAM,uBAAuB,CAAC,YAAoB;AACrD,QAAM,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAEhG,QAAM,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AACpD,QAAM,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACb,aAAO,cAAc,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,QAAI,UAAU,QAAQ,UAAU,SAAS,UAAU,UAAU,UAAU,YAAY,UAAU,UAAU;AACnG,aAAO;AAAA,IACX;AAEA,WAAO,cAAc,GAAG,KAAK,MAAM;AAAA,EACvC;AAEA,SAAO,UAAU,UAAU,UAAU;AACzC;;;;"}

package/dist/charts/utils/color.js

@@ -1,19 +1,15 @@
 import THEME_COLORS from "../../tailwind.colors.js";
 const mapColor = (palette, prefix = "") => {
   return Object.keys(palette).reduce((accum, color) => {
-    if (color === "current") {
+    const value = palette[color];
+    if (color === "current" || value === void 0) {
       return accum;
     }
-    if (typeof palette[color] === "string") {
-      return {
-        ...accum,
-        [prefix ? color === "DEFAULT" ? prefix : `${prefix}-${color}` : color]: palette[color]
-      };
+    if (typeof value === "string") {
+      accum[prefix ? color === "DEFAULT" ? prefix : `${prefix}-${color}` : color] = value;
+      return accum;
     }
-    return {
-      ...accum,
-      ...mapColor(palette[color], color)
-    };
+    return Object.assign(accum, mapColor(value, color));
   }, {});
 };
 const colors = mapColor(THEME_COLORS);

package/dist/charts/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["// oxlint-disable-next-line taco/no-cross-boundary-relative-imports\nimport themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        }\n\n        if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        }\n\n        return {\n            ...accum,\n            ...mapColor(palette[color], color),\n        };\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (shade === 500 && (color === 'red' || color === 'blue' || color === 'purple' || color === 'green')) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";AAGA,MAAM,WAAW,CAAC,SAAc,SAAS,OAAY;AACjD,SAAO,OAAO,KAAK,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU;AACjD,QAAI,UAAU,WAAW;AACrB,aAAO;AAAA,IACX;AAEA,QAAI,OAAO,QAAQ,KAAK,MAAM,UAAU;AACpC,aAAO;AAAA,QACH,GAAG;AAAA,QACH,CAAC,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,GAAG,QAAQ,KAAK;AAAA,MAAA;AAAA,IAE/F;AAEA,WAAO;AAAA,MACH,GAAG;AAAA,MACH,GAAG,SAAS,QAAQ,KAAK,GAAG,KAAK;AAAA,IAAA;AAAA,EAEzC,GAAG,CAAA,CAAE;AACT;AAEO,MAAM,SAAiC,SAASA,YAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAE1F,MAAM,uBAAuB,CAAC,YAAoB;AACrD,QAAM,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAEhG,QAAM,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AACpD,QAAM,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACb,aAAO,cAAc,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,QAAI,UAAU,QAAQ,UAAU,SAAS,UAAU,UAAU,UAAU,YAAY,UAAU,UAAU;AACnG,aAAO;AAAA,IACX;AAEA,WAAO,cAAc,GAAG,KAAK,MAAM;AAAA,EACvC;AAEA,SAAO,UAAU,UAAU,UAAU;AACzC;"}
+{"version":3,"file":"color.js","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["// oxlint-disable-next-line taco/no-cross-boundary-relative-imports\nimport themeColors from '../../../tailwind.colors.js';\n\ntype ColorPalette = { [key: string]: string | ColorPalette };\n\nconst mapColor = (palette: ColorPalette, prefix = ''): Record<string, string> => {\n    return Object.keys(palette).reduce<Record<string, string>>((accum, color) => {\n        const value = palette[color];\n\n        if (color === 'current' || value === undefined) {\n            return accum;\n        }\n\n        if (typeof value === 'string') {\n            accum[prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color] = value;\n            return accum;\n        }\n\n        return Object.assign(accum, mapColor(value, color));\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (shade === 500 && (color === 'red' || color === 'blue' || color === 'purple' || color === 'green')) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";AAKA,MAAM,WAAW,CAAC,SAAuB,SAAS,OAA+B;AAC7E,SAAO,OAAO,KAAK,OAAO,EAAE,OAA+B,CAAC,OAAO,UAAU;AACzE,UAAM,QAAQ,QAAQ,KAAK;AAE3B,QAAI,UAAU,aAAa,UAAU,QAAW;AAC5C,aAAO;AAAA,IACX;AAEA,QAAI,OAAO,UAAU,UAAU;AAC3B,YAAM,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,IAAI;AAChF,aAAO;AAAA,IACX;AAEA,WAAO,OAAO,OAAO,OAAO,SAAS,OAAO,KAAK,CAAC;AAAA,EACtD,GAAG,CAAA,CAAE;AACT;AAEO,MAAM,SAAiC,SAASA,YAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAE1F,MAAM,uBAAuB,CAAC,YAAoB;AACrD,QAAM,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAEhG,QAAM,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AACpD,QAAM,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACb,aAAO,cAAc,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,QAAI,UAAU,QAAQ,UAAU,SAAS,UAAU,UAAU,UAAU,YAAY,UAAU,UAAU;AACnG,aAAO;AAAA,IACX;AAEA,WAAO,cAAc,GAAG,KAAK,MAAM;AAAA,EACvC;AAEA,SAAO,UAAU,UAAU,UAAU;AACzC;"}

package/dist/charts/utils/common.cjs

@@ -4,11 +4,11 @@ function getAxisProps(axis, props, inverted = false) {
   const { showXAxis = true, showYAxis = false } = props;
   const isYAxis = axis === "y";
   let hide = isYAxis ? !showYAxis : !showXAxis;
-  let dataKey = isYAxis ? void 0 : props.dataKey;
+  let dataKey = isYAxis ? void 0 : props.dataKey.toString();
   let minTickGap = 5;
   let type;
   if (inverted) {
-    dataKey = isYAxis ? props.dataKey : void 0;
+    dataKey = isYAxis ? props.dataKey.toString() : void 0;
     hide = isYAxis ? !showXAxis : !showYAxis;
     minTickGap = isYAxis ? 1 : minTickGap;
     type = isYAxis ? "category" : "number";
@@ -30,14 +30,14 @@ function getAxisProps(axis, props, inverted = false) {
 }
 function stripCartesianProps(props) {
   const {
-    dataKey: _1,
-    showXAxis: _2,
-    showYAxis: _3,
-    xAxisScale: _4,
-    xAxisTickFormatter: _5,
-    yAxisScale: _6,
-    yAxisTickFormatter: _7,
-    yAxisWidth: _8,
+    dataKey: _dataKey,
+    showXAxis: _showXAxis,
+    showYAxis: _showYAxis,
+    xAxisScale: _xAxisScale,
+    xAxisTickFormatter: _xAxisTickFormatter,
+    yAxisScale: _yAxisScale,
+    yAxisTickFormatter: _yAxisTickFormatter,
+    yAxisWidth: _yAxisWidth,
     ...otherProps
   } = props;
   return otherProps;

package/dist/charts/utils/common.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"common.cjs","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import type { AxisInterval } from 'recharts/types/util/types';\n\nimport type { CartesianChartProps } from '@/charts/components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : (props.dataKey as string);\n    let minTickGap = 5;\n    let type;\n\n    if (inverted) {\n        dataKey = isYAxis ? (props.dataKey as string) : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = (isYAxis ? 'category' : 'number') as any;\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as AxisInterval,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\nexport function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps {\n    const {\n        dataKey: _1,\n        showXAxis: _2,\n        showYAxis: _3,\n        xAxisScale: _4,\n        xAxisTickFormatter: _5,\n        yAxisScale: _6,\n        yAxisTickFormatter: _7,\n        yAxisWidth: _8,\n        ...otherProps\n    } = props;\n\n    return otherProps as TProps;\n}\n"],"names":[],"mappings":";;AAIO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,UAAU;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AACnC,MAAI,UAAU,UAAU,SAAa,MAAM;AAC3C,MAAI,aAAa;AACjB,MAAI;AAEJ,MAAI,UAAU;AACV,cAAU,UAAW,MAAM,UAAqB;AAChD,WAAO,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAQ,UAAU,aAAa;AAAA,EACnC;AAEA,SAAO;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EAAA;AAE3D;AAEO,SAAS,oBAA6D,OAAuB;AAChG,QAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEJ,SAAO;AACX;;;"}
+{"version":3,"file":"common.cjs","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import type { CartesianChartProps } from '@/charts/components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : props.dataKey.toString();\n    let minTickGap = 5;\n    let type: 'category' | 'number' | undefined;\n\n    if (inverted) {\n        dataKey = isYAxis ? props.dataKey.toString() : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = isYAxis ? 'category' : 'number';\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as const,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\n// TData cannot be inferred through the TProps constraint alone, so it is also inferred from the intersection\nexport function stripCartesianProps<TData extends object, TProps extends CartesianChartProps<TData>>(\n    props: TProps & CartesianChartProps<TData>\n): Omit<\n    TProps,\n    | 'dataKey'\n    | 'showXAxis'\n    | 'showYAxis'\n    | 'xAxisScale'\n    | 'xAxisTickFormatter'\n    | 'yAxisScale'\n    | 'yAxisTickFormatter'\n    | 'yAxisWidth'\n> {\n    const {\n        dataKey: _dataKey,\n        showXAxis: _showXAxis,\n        showYAxis: _showYAxis,\n        xAxisScale: _xAxisScale,\n        xAxisTickFormatter: _xAxisTickFormatter,\n        yAxisScale: _yAxisScale,\n        yAxisTickFormatter: _yAxisTickFormatter,\n        yAxisWidth: _yAxisWidth,\n        ...otherProps\n    } = props;\n\n    return otherProps;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,UAAU;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AACnC,MAAI,UAAU,UAAU,SAAY,MAAM,QAAQ,SAAA;AAClD,MAAI,aAAa;AACjB,MAAI;AAEJ,MAAI,UAAU;AACV,cAAU,UAAU,MAAM,QAAQ,SAAA,IAAa;AAC/C,WAAO,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAO,UAAU,aAAa;AAAA,EAClC;AAEA,SAAO;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EAAA;AAE3D;AAGO,SAAS,oBACZ,OAWF;AACE,QAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEJ,SAAO;AACX;;;"}

package/dist/charts/utils/common.d.ts

@@ -1,17 +1,16 @@
-import { AxisInterval } from 'recharts/types/util/types';
 import { CartesianChartProps } from '../components/types';
 export declare function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted?: boolean): {
     axisLine: boolean;
     dataKey: string | undefined;
     fontSize: number;
     hide: boolean;
-    interval: AxisInterval;
+    interval: "preserveStartEnd";
     minTickGap: number;
-    scale: Function | import('recharts/types/util/types').ScaleType | undefined;
+    scale: import('../components/types').ChartAxisScale | undefined;
     tickLine: boolean;
     tickMargin: number;
-    tickFormatter: import('../components/types').TickFormatter | undefined;
-    type: any;
+    tickFormatter: import('../components/types').TickFormatter<any> | undefined;
+    type: "number" | "category" | undefined;
     width: number;
 };
-export declare function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps;
+export declare function stripCartesianProps<TData extends object, TProps extends CartesianChartProps<TData>>(props: TProps & CartesianChartProps<TData>): Omit<TProps, 'dataKey' | 'showXAxis' | 'showYAxis' | 'xAxisScale' | 'xAxisTickFormatter' | 'yAxisScale' | 'yAxisTickFormatter' | 'yAxisWidth'>;

package/dist/charts/utils/common.js

@@ -2,11 +2,11 @@ function getAxisProps(axis, props, inverted = false) {
   const { showXAxis = true, showYAxis = false } = props;
   const isYAxis = axis === "y";
   let hide = isYAxis ? !showYAxis : !showXAxis;
-  let dataKey = isYAxis ? void 0 : props.dataKey;
+  let dataKey = isYAxis ? void 0 : props.dataKey.toString();
   let minTickGap = 5;
   let type;
   if (inverted) {
-    dataKey = isYAxis ? props.dataKey : void 0;
+    dataKey = isYAxis ? props.dataKey.toString() : void 0;
     hide = isYAxis ? !showXAxis : !showYAxis;
     minTickGap = isYAxis ? 1 : minTickGap;
     type = isYAxis ? "category" : "number";
@@ -28,14 +28,14 @@ function getAxisProps(axis, props, inverted = false) {
 }
 function stripCartesianProps(props) {
   const {
-    dataKey: _1,
-    showXAxis: _2,
-    showYAxis: _3,
-    xAxisScale: _4,
-    xAxisTickFormatter: _5,
-    yAxisScale: _6,
-    yAxisTickFormatter: _7,
-    yAxisWidth: _8,
+    dataKey: _dataKey,
+    showXAxis: _showXAxis,
+    showYAxis: _showYAxis,
+    xAxisScale: _xAxisScale,
+    xAxisTickFormatter: _xAxisTickFormatter,
+    yAxisScale: _yAxisScale,
+    yAxisTickFormatter: _yAxisTickFormatter,
+    yAxisWidth: _yAxisWidth,
     ...otherProps
   } = props;
   return otherProps;

package/dist/charts/utils/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import type { AxisInterval } from 'recharts/types/util/types';\n\nimport type { CartesianChartProps } from '@/charts/components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : (props.dataKey as string);\n    let minTickGap = 5;\n    let type;\n\n    if (inverted) {\n        dataKey = isYAxis ? (props.dataKey as string) : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = (isYAxis ? 'category' : 'number') as any;\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as AxisInterval,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\nexport function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps {\n    const {\n        dataKey: _1,\n        showXAxis: _2,\n        showYAxis: _3,\n        xAxisScale: _4,\n        xAxisTickFormatter: _5,\n        yAxisScale: _6,\n        yAxisTickFormatter: _7,\n        yAxisWidth: _8,\n        ...otherProps\n    } = props;\n\n    return otherProps as TProps;\n}\n"],"names":[],"mappings":"AAIO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,UAAU;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AACnC,MAAI,UAAU,UAAU,SAAa,MAAM;AAC3C,MAAI,aAAa;AACjB,MAAI;AAEJ,MAAI,UAAU;AACV,cAAU,UAAW,MAAM,UAAqB;AAChD,WAAO,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAQ,UAAU,aAAa;AAAA,EACnC;AAEA,SAAO;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EAAA;AAE3D;AAEO,SAAS,oBAA6D,OAAuB;AAChG,QAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEJ,SAAO;AACX;"}
+{"version":3,"file":"common.js","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import type { CartesianChartProps } from '@/charts/components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : props.dataKey.toString();\n    let minTickGap = 5;\n    let type: 'category' | 'number' | undefined;\n\n    if (inverted) {\n        dataKey = isYAxis ? props.dataKey.toString() : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = isYAxis ? 'category' : 'number';\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as const,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\n// TData cannot be inferred through the TProps constraint alone, so it is also inferred from the intersection\nexport function stripCartesianProps<TData extends object, TProps extends CartesianChartProps<TData>>(\n    props: TProps & CartesianChartProps<TData>\n): Omit<\n    TProps,\n    | 'dataKey'\n    | 'showXAxis'\n    | 'showYAxis'\n    | 'xAxisScale'\n    | 'xAxisTickFormatter'\n    | 'yAxisScale'\n    | 'yAxisTickFormatter'\n    | 'yAxisWidth'\n> {\n    const {\n        dataKey: _dataKey,\n        showXAxis: _showXAxis,\n        showYAxis: _showYAxis,\n        xAxisScale: _xAxisScale,\n        xAxisTickFormatter: _xAxisTickFormatter,\n        yAxisScale: _yAxisScale,\n        yAxisTickFormatter: _yAxisTickFormatter,\n        yAxisWidth: _yAxisWidth,\n        ...otherProps\n    } = props;\n\n    return otherProps;\n}\n"],"names":[],"mappings":"AAEO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,UAAU;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AACnC,MAAI,UAAU,UAAU,SAAY,MAAM,QAAQ,SAAA;AAClD,MAAI,aAAa;AACjB,MAAI;AAEJ,MAAI,UAAU;AACV,cAAU,UAAU,MAAM,QAAQ,SAAA,IAAa;AAC/C,WAAO,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAO,UAAU,aAAa;AAAA,EAClC;AAEA,SAAO;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EAAA;AAE3D;AAGO,SAAS,oBACZ,OAWF;AACE,QAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEJ,SAAO;AACX;"}

package/dist/components/AlertDialog/Context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,qBAAqB,MAAM,cAAkC;AAAA,EACtE,OAAO,CAAA;AAAA,EACP,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AACvC,SAAO,MAAM,WAAW,kBAAkB;AAC9C;;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, unknown>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,qBAAqB,MAAM,cAAkC;AAAA,EACtE,OAAO,CAAA;AAAA,EACP,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AACvC,SAAO,MAAM,WAAW,kBAAkB;AAC9C;;;"}

package/dist/components/AlertDialog/Context.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export type AlertDialogContext = {
-    props: Record<string, any>;
+    props: Record<string, unknown>;
     ref: React.Ref<HTMLElement>;
 };
 export declare const AlertDialogContext: React.Context<AlertDialogContext>;

package/dist/components/AlertDialog/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":["React"],"mappings":";AAQO,MAAM,qBAAqBA,eAAM,cAAkC;AAAA,EACtE,OAAO,CAAA;AAAA,EACP,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AACvC,SAAOA,eAAM,WAAW,kBAAkB;AAC9C;"}
+{"version":3,"file":"Context.js","sources":["../../../src/components/AlertDialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport React from 'react';\n\nexport type AlertDialogContext = {\n    props: Record<string, unknown>;\n    ref: React.Ref<HTMLElement>;\n};\n\nexport const AlertDialogContext = React.createContext<AlertDialogContext>({\n    props: {},\n    ref: null,\n});\n\nexport const useCurrentAlertDialog = () => {\n    return React.useContext(AlertDialogContext);\n};\n"],"names":["React"],"mappings":";AAQO,MAAM,qBAAqBA,eAAM,cAAkC;AAAA,EACtE,OAAO,CAAA;AAAA,EACP,KAAK;AACT,CAAC;AAEM,MAAM,wBAAwB,MAAM;AACvC,SAAOA,eAAM,WAAW,kBAAkB;AAC9C;"}

package/dist/components/Calendar/Calendar.cjs.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport * as React from 'react';\nimport type { DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { DayPicker } from 'react-day-picker';\n\nimport { LegacyIconButton, Tooltip, useLocalization } from '@/components';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white p-2 text-xs', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["today","props"],"mappings":";;;;;;;;;AA0CA,MAAM,cAAc,CAAC,EAAE,mBAA4D;AAC/E,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,2BAA2B,MAAY;AACzC,UAAMA,6BAAY,KAAA;AAGlBA,WAAM,SAAS,EAAE;AACjBA,WAAM,WAAW,CAAC;AAClBA,WAAM,WAAW,CAAC;AAElB,iBAAaA,MAAK;AAAA,EACtB;AACA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAU;AAAA,IAAA;AAAA,IACT,MAAM,SAAS,QAAQ;AAAA,EAAA;AAGpC;AAEA,MAAM,iBAAiB,CAAC,UAAyB;AAC7C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,EAAE,UAAU,MAAA,IAAU;AAE5B,SACI,sBAAA,cAAC,YAAO,WAAU,YAAW,MAAK,SAAQ,UAAoB,SACzD,MAAM,SAAS,OAAO,IAAI,CAAC,OAAO,MAC/B,sBAAA,cAAC,UAAA,EAAO,KAAK,OAAO,OAAO,EAAA,GACtB,KACL,CACH,CACL;AAER;AAEA,MAAM,4BAAY,KAAA;AAClB,MAAM,sBAAsB,YAAY,SAAS,OAAO,EAAE,CAAC;AAC3D,MAAM,oBAAoB,UAAU,SAAS,OAAO,EAAE,CAAC;AAEvD,MAAM,gBAAgB,CAAC,UAAyB;AAC5C,QAAM,EAAE,UAAU,MAAA,IAAU;AAE5B,QAAM,QAAQ,MAAM,QAAQ,MAAM;AAC9B,WAAO,MAAM,oBAAoB,YAAA,GAAe,kBAAkB,YAAA,IAAgB,CAAC;AAAA,EACvF,GAAG,CAAA,CAAE;AAEL,SACI,sBAAA,cAAC,YAAO,WAAU,YAAW,MAAK,QAAO,UAAoB,SACxD,MAAM,IAAI,UACP,sBAAA,cAAC,UAAA,EAAO,KAAK,MAAM,OAAO,QACrB,OAAO,IAAI,CAChB,CACH,CACL;AAER;AAEO,MAAM,WAAW,CAAC,UAAyB;AAC9C,QAAM,EAAE,UAAU,cAAc,OAAO,cAAc,GAAG,eAAe;AACvE,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,SAAS,oBAAI,MAAM;AAC1E,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,UAAU,MAAM;AAClB,QAAI,iBAAiB,OAAO;AACxB,sBAAgB,SAAS,oBAAI,MAAM;AAAA,IACvC;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY,GAAG,sCAAsC,WAAW,SAAS;AAE/E,QAAM,eAAkD,CAAC,GAAG,MAAM,WAAW,MAAM;AAC/E,QAAI,UAAU,WAAW,UAAU,UAAU;AACzC;AAAA,IACJ;AAEA,iBAAa,MAAM,CAA0C;AAAA,EACjE;AAEA,SACI,sBAAA,cAAC,OAAA,EAAI,aAAU,WAAA,GACX,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,eAAc;AAAA,MACd;AAAA,MACA,YAAY;AAAA,QACR,iBAAiB,CAAAC,WACb,sBAAA,cAAC,WAAQ,OAAO,MAAM,SAAS,QAAQ,UAAA,GACnC,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAY,MAAM,SAAS,QAAQ;AAAA,YACnC,SAASA,OAAM;AAAA,YACf,SAAO;AAAA,YACP,aAAU;AAAA,UAAA;AAAA,QAAA,CAElB;AAAA,QAEJ,qBAAqB,CAAAA,WACjB,sBAAA,cAAC,WAAQ,OAAO,MAAM,SAAS,QAAQ,cAAA,GACnC,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAY,MAAM,SAAS,QAAQ;AAAA,YACnC,SAASA,OAAM;AAAA,YACf,SAAO;AAAA,YACP,aAAU;AAAA,UAAA;AAAA,QAAA,CAElB;AAAA,QAEJ;AAAA,QACA;AAAA,QACA,UAAU,MACN,sBAAA,cAAC,SAAA,MACG,sBAAA,cAAC,MAAA,MACI,MAAM,SAAS,cAAc,IAAI,CAAC,SAAS,UAAU;AAClD,gBAAM,QAAQ,MAAM,SAAS,YAAY,MAAM,SAAS,SAAS,KAAK;AACtE,iBACI,sBAAA,cAAC,MAAA,EAAG,KAAK,SAAS,cAAY,OAAO,WAAU,iBAAgB,OAAO,MAAA,GACjE,OACL;AAAA,QAER,CAAC,CACL,CACJ;AAAA,MAAA;AAAA,MAGR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ,sBAAA,cAAC,aAAA,EAAY,aAAA,CAA4B;AAAA,MACjD,MAAK;AAAA,MACL,OAAO;AAAA,MACP,WAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,cAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport * as React from 'react';\nimport type { DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { DayPicker } from 'react-day-picker';\n\nimport { LegacyIconButton, Tooltip, useLocalization } from '@/components';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white p-2 text-xs', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                // needed to have the right tab-focus order\n                navLayout=\"after\"\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["today","props"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport type { ScrollableListItem, ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { ScrollableList } from '@/components/Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport type { ScrollableListItem, ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { ScrollableList } from '@/components/Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n    inline: boolean;\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport type { ScrollableListItem, ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { ScrollableList } from '@/components/Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAmEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, InputProps } from '@/components';\nimport { Input, LegacyIconButton, useLocalization } from '@/components';\nimport type { ScrollableListItem, ScrollableListItemValue } from '@/components/Listbox/ScrollableList';\nimport { ScrollableList } from '@/components/Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '@/hooks/useBoundingClientRectListener';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n    inline: boolean;\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAoEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/Combobox/useCombobox.cjs

@@ -104,10 +104,8 @@ const useCombobox = (props, ref) => {
       if (renderedValue !== inputValue) {
         setInputValue(renderedValue);
       }
-    } else if (prevValue !== void 0 && inputValue === convertToInputValue(prevValue)) {
-      if (inputValue !== "") {
-        setInputValue("");
-      }
+    } else if (prevValue !== void 0 && inputValue === convertToInputValue(prevValue) && inputValue !== "") {
+      setInputValue("");
     }
   }
   React__namespace.useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport type { InputProps } from '@/components';\nimport type {\n    ScrollableListItem,\n    ScrollableListItemValue,\n    ScrollableListPropsWithRef,\n} from '@/components/Listbox/ScrollableList';\nimport { getId } from '@/components/Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '@/utils/dom';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n    // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n    const [prevValue, setPrevValue] = React.useState(value);\n    if (value !== prevValue) {\n        setPrevValue(value);\n\n        if (value !== undefined) {\n            // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n            const renderedValue = convertToInputValue(value);\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n            // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n            // so clear it. Text the user typed never matches the previous render, so it's preserved.\n            if (inputValue !== '') {\n                setInputValue('');\n            }\n        }\n    }\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n        // `value` commits one render after the input on Tab/select; without it in the deps the guard\n        // reopens the popover with a stale `value` and never re-runs to close it. EC-83328\n    }, [inputValue, data, value]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,YAAY,SAAS,CAAA,MAAK,EAAA,GAAK,GAAG;AAExC,MAAM,6BAA6B,CAAC,UAA+C,OAAO,SAAS,EAAE;AAU9F,MAAM,cAAc,CAAC,OAAsC,QAAkD;AAChH,QAAM;AAAA,IACF,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,MAAM,iBAAiB,CAAA;AAAA,IACvB;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,WAAWA,aAAAA,aAA+B,GAAG;AACnD,QAAM,YAAYC,iBAAM,OAA0B,IAAI;AACtD,QAAM,UAAUA,iBAAM,OAAyB,IAAI;AACnD,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5C,QAAM,SAASA,iBAAM,QAAQ,MAAMC,OAAAA,OAAA,GAAU,CAAA,CAAE;AAC/C,QAAM,gBAAgBC,KAAAA,iBAAiB,cAAc;AAErD,QAAM,sBAAsBF,iBAAM;AAAA,IAC9B,CAAC,QAAqD;AAClD,YAAM,SAASG,KAAAA,YAAY,eAAe,GAAG;AAC7C,UAAI,OAAO,kBAAkB,cAAc,QAAQ;AAC/C,eAAO,cAAc,MAAM;AAAA,MAC/B;AACA,aAAO,2BAA2B,GAAG;AAAA,IACzC;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAIH,iBAAM,SAAiB,oBAAoB,KAAK,CAAC;AACrF,QAAM,mBAAmB,CAAC,aAAa,CAAC,UAAW,UAAU,eAAe,oBAAoB,KAAK;AACrG,QAAM,OAAOA,iBAAM;AAAA,IACf,MAAO,mBAAmBI,KAAAA,WAAW,eAAe,UAAU,IAAI;AAAA,IAClE,CAAC,kBAAkB,YAAY,aAAa;AAAA,EAAA;AAGhD,QAAM,CAAC,cAAc,eAAe,IAAIJ,iBAAM;AAAA,IAC1C,eAAe,SAAY,SAAYK,KAAAA,kBAAkB,MAAM,UAAU;AAAA,EAAA;AAG7E,QAAM,uBAAuB,CAAC,OAA2B,UAAyB;AAC9E,QAAI,UAAU,QAAW;AACrB,YAAM,SAAS,KAAK,KAAK;AAEzB,UAAI,UAAU,CAAC,OAAO,UAAU;AAC5B,cAAM,YAAY,SAAS;AAC3BC,aAAAA,mBAAmB,SAAS,SAAS,OAAO,OAAO,SAAS;AAAA,MAChE;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,kBAAkB,CAAC,OAA2B,UAAmB;AACnE,QAAI,UAAU,QAAW;AACrB;AAAA,IACJ;AAEA,UAAM,SAAS,KAAK,KAAK;AAEzB,QAAI,QAAQ,UAAU,OAAO;AAEzB,oBAAc,oBAAoB,KAAK,CAAC;AAAA,IAC5C,OAAO;AAEH,2BAAqB,OAAO,KAAK;AAAA,IACrC;AAAA,EACJ;AAGAN,mBAAM,UAAU,MAAM;AAClB,QAAI,gBAAgB,CAAC,OAAO;AACxB,2BAAqBK,KAAAA,kBAAkB,MAAM,YAAY,CAAC;AAAA,IAC9D;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,CAAC,WAAW,YAAY,IAAIL,iBAAM,SAAS,KAAK;AACtD,MAAI,UAAU,WAAW;AACrB,iBAAa,KAAK;AAElB,QAAI,UAAU,QAAW;AAErB,YAAM,gBAAgB,oBAAoB,KAAK;AAC/C,UAAI,kBAAkB,YAAY;AAC9B,sBAAc,aAAa;AAAA,MAC/B;AAAA,IACJ,WAAW,cAAc,UAAa,eAAe,oBAAoB,SAAS,GAAG;AAGjF,UAAI,eAAe,IAAI;AACnB,sBAAc,EAAE;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AAEAA,mBAAM,UAAU,MAAM;AAClB,QAAI,UAAU;AACV,gBAAU,MAAM;AACZ,iBAAS,UAAU;AAAA,MACvB,CAAC;AAAA,IACL;AAAA,EACJ,GAAG,CAAC,UAAU,CAAC;AAGfA,mBAAM,UAAU,MAAM;AAGlB,UAAM,iBAAiB,UAAU,UAAa,UAAU,QAAQ,eAAe,oBAAoB,KAAK;AAExG,QAAI,cAAc,KAAK,UAAU,CAAC,gBAAgB;AAC9C,sBAAgBK,KAAAA,kBAAkB,MAAM,UAAU,KAAK,CAAC;AAExD,UAAI,CAAC,MAAM;AACP,gBAAQ,IAAI;AAAA,MAChB;AAAA,IACJ,OAAO;AACH,cAAQ,KAAK;AAAA,IACjB;AAAA,EAGJ,GAAG,CAAC,YAAY,MAAM,KAAK,CAAC;AAE5BL,mBAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,sBAAgBK,KAAAA,kBAAkB,MAAM,UAAU,KAAK,CAAC;AAAA,IAC5D,OAAO;AACH,sBAAgB,MAAS;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAaL,iBAAM;AAAA,IACrB,CAAC,aAAqD;AAElD,YAAM,cAAcG,KAAAA,YAAY,eAAe,QAAQ;AACvD,UAAI,aAAa;AACb,eAAO;AAAA,MACX;AAGA,UAAI,eAAe;AACf,eAAO,cAAc,KAAK,CAAA,WAAU,cAAc,MAAM,MAAM,QAAQ;AAAA,MAC1E;AAEA,aAAO;AAAA,IACX;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAAA;AAIjC,QAAM,kBAAkB,CAAC,UAAoD;AACzE,QAAI,QAAQ,WAAW,MAAM,kBAAkB,QAAQ,SAAS;AAC5D,YAAM,eAAA;AACN;AAAA,IACJ;AAEA,UAAM,OAAO,WAAW,MAAM,OAAO,KAAK;AAK1C,QAAI,QAAQ,KAAK,UAAU,OAAO;AAC9B,oBAAc,oBAAoB,KAAK,CAAC;AACxC,UAAI,MAAM,QAAQ;AACd,cAAM,OAAO,KAAK;AAAA,MACtB;AACA;AAAA,IACJ;AAGA,QAAI,YAAY,MAAM,OAAO,UAAU,oBAAoB,KAAK,GAAG;AAC9D,YAAc,SAASI,KAAAA,aAAa,IAAI;AAEzC,YAAM,UAAUC,KAAAA,iBAAiB,eAAe,MAAM,IAAI;AAE1D,UAAI,YAAY,QAAQ,QAAQ,SAAS,GAAG;AACvC,cAAc,OAAO,UAAU;AAAA,MACpC;AAEA,eAAS,KAAK;AAAA,IAClB;AAEA,QAAI,MAAM,QAAQ;AACd,YAAM,OAAO,KAAK;AAAA,IACtB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,kBAAc,MAAM,OAAO,KAAK;AAAA,EACpC;AAEA,QAAM,mBAAmB,CAAC,UAAoD;AAC1E,QAAI,UAAW,CAAC,QAAQ,cAAc,KAAK,QAAS;AAChD,cAAQ,IAAI;AAAA,IAChB;AAEA,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,UAAuD;AAG/E,QACIC,kCAA8B,MAAM,aAAa,MAChD,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,MACF;AACE,YAAM,gBAAA;AAAA,IACV;AAEA,QAAI,CAAC,MAAM,WAAW,CAAC,MAAM,SAAS;AAClC,cAAQ,MAAM,KAAA;AAAA,QACV,KAAK,aAAa;AACd;AAAA,QACJ;AAAA,QAEA,KAAK,UAAU;AACX,gBAAM,eAAA;AACN,cAAI,MAAM;AAEN,kBAAM,gBAAA;AAAA,UACV;AACA,wBAAc,oBAAoB,KAAK,CAAC;AACxC,kBAAQ,KAAK;AACb;AAAA,QACJ;AAAA,QAEA,KAAK,OAAO;AAER,0BAAgB,cAAc,QAAQ;AACtC,kBAAQ,KAAK;AACb;AAAA,QACJ;AAAA,QAEA,KAAK,SAAS;AACV,gBAAM,eAAA;AAEN,cAAIA,IAAAA,8BAA8B,MAAM,aAAa,GAAG;AACpD,gBAAI,UAAU,CAAC,MAAM;AACjB,sBAAQ,IAAI;AAAA,YAChB,WAAW,UAAU,WAAW,CAAC,MAAM;AACnC,wBAAU,QAAQ,MAAA;AAAA,YACtB;AAAA,UACJ;AAEA,cAAI,MAAM;AAEN,4BAAgB,cAAc,UAAU;AACxC,oBAAQ,KAAK;AAAA,UACjB;AAEA;AAAA,QACJ;AAAA,QAEA,KAAK;AACD,cAAI,MAAM;AACN,kBAAM,eAAA;AAAA,UACV,WAAW,CAAC,UAAU,UAAU,WAAW,CAACA,IAAAA,8BAA8B,MAAM,aAAa,GAAG;AAC5F,sBAAU,QAAQ,MAAA;AAAA,UACtB;AACA;AAAA,QAEJ,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,OAAO;AACR,cAAI,MAAM;AACN,kBAAM,eAAA;AAAA,UACV;AACA;AAAA,QACJ;AAAA,MAEA;AAIJ,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,cAAcC,MAAAA,0BAA0B,KAAK,CAAC;AAAA,MAClE;AAEA,UACI,UACA,CAAC,SACA,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,CAACD,IAAAA,8BAA8B,MAAM,aAAa,GACpD;AACE,cAAM,eAAA;AACN,cAAM,eAAe,MAAM,QAAQ,YAAY,KAAK,SAAS,IAAI;AACjE,wBAAgB,iBAAiB,SAAY,eAAe,YAAY;AACxE,gBAAQ,IAAI;AAAA,MAChB;AAAA,IACJ;AAEA,QAAI,CAAC,MAAM,mBAAA,KAAwB,WAAW;AAC1C,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,UAAwB;AACjD,oBAAgB,KAAK;AAAA,EACzB;AAEA,QAAM,qBAAqB,CAAC,OAAwC,UAAwB;AACxF,UAAM,eAAA;AACN,oBAAgB,KAAK;AACrB,YAAQ,KAAK;AAAA,EACjB;AAEA,QAAM,WAAW;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,MAAM;AAAA,EAAA;AAGV,QAAME,UAAQ;AAAA,IACV,GAAG;AAAA,IACH,iBAAiB;AAAA;AAAA;AAAA,IAGjB,qBAAqB;AAAA;AAAA,IAErB,yBACI,iBAAiB,UAAa,KAAK,YAAY,IAAIC,eAAAA,MAAM,QAAQ,OAAO,KAAK,YAAY,EAAE,KAAK,CAAC,IAAI;AAAA,IACzG,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,QAAQ,CAAC,YAAY,CAAC,WAAW,kBAAkB;AAAA,IACnD,UAAU,CAAC,YAAY,CAAC,WAAW,oBAAoB;AAAA,IACvD,SAAS,CAAC,YAAY,CAAC,WAAW,mBAAmB;AAAA,IACrD,kBAAkB,CAAC,YAAY,CAAC,WAAW,qBAAqB;AAAA,IAChE;AAAA,IACA,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,cAAc;AAAA,EAAA;AAGzB,QAAM,OAAmC;AAAA,IACrC,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,KAAK;AAAA,IACL,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAGX,QAAM,SAAS;AAAA,IACX,KAAK;AAAA,EAAA;AAGT,SAAO;AAAA,IACH;AAAA,IAAA,OACAD;AAAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,MACL;AAAA,MACA,cAAc;AAAA;AAAA,IAAA;AAAA,EAElB;AAER;;"}
+{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport type { InputProps } from '@/components';\nimport type {\n    ScrollableListItem,\n    ScrollableListItemValue,\n    ScrollableListPropsWithRef,\n} from '@/components/Listbox/ScrollableList';\nimport { getId } from '@/components/Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '@/utils/dom';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: React.LegacyRef<HTMLButtonElement> };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n    // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n    const [prevValue, setPrevValue] = React.useState(value);\n    if (value !== prevValue) {\n        setPrevValue(value);\n\n        if (value !== undefined) {\n            // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n            const renderedValue = convertToInputValue(value);\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue) && inputValue !== '') {\n            // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n            // so clear it. Text the user typed never matches the previous render, so it's preserved.\n            setInputValue('');\n        }\n    }\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n        // `value` commits one render after the input on Tab/select; without it in the deps the guard\n        // reopens the popover with a stale `value` and never re-runs to close it. EC-83328\n    }, [inputValue, data, value]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ type useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {
     };
     list: ScrollableListPropsWithRef;
     button: {
-        ref: any;
+        ref: React.LegacyRef<HTMLButtonElement>;
     };
     popover: {
         open: boolean;

package/dist/components/Combobox/useCombobox.js

@@ -85,10 +85,8 @@ const useCombobox = (props, ref) => {
       if (renderedValue !== inputValue) {
         setInputValue(renderedValue);
       }
-    } else if (prevValue !== void 0 && inputValue === convertToInputValue(prevValue)) {
-      if (inputValue !== "") {
-        setInputValue("");
-      }
+    } else if (prevValue !== void 0 && inputValue === convertToInputValue(prevValue) && inputValue !== "") {
+      setInputValue("");
     }
   }
   React.useEffect(() => {