npm - @economic/taco - Versions diffs - 2.45.0-alpha.1 → 2.45.0-alpha.11 - Mend

@economic/taco 2.45.0-alpha.1 → 2.45.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (284) hide show

package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LineChart.js","sources":["../../../../../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n CommonChartProps,\n getCartesianGridProps,\n getXAxisProps,\n getYAxisProps,\n getLegendProps,\n getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype LineChartBarProps<TType> = {\n accessor: keyof TType & string;\n color?: Color;\n label?: string;\n};\n\nconst Line = (_: LineChartBarProps<any>) => null;\n\ntype LineChartProps<TType> = CommonChartProps<TType> & {\n children: React.ReactElement<LineChartBarProps<TType>> | React.ReactElement<LineChartBarProps<TType>>[];\n data: TType[];\n formatter?: (value: any) => string;\n};\n\nexport const LineChart = function LineChart<TType = unknown>(externalProps: LineChartProps<TType>) {\n const { children, data, formatter, ...props } = externalProps;\n const [hoveredLine, setHoveredLine] = useState<(keyof TType & string) | null>(null);\n const [activeLines, setActiveLines] = useState<ActiveChartItems<TType>>(() => {\n const keys = {} as ActiveChartItems<TType>;\n\n React.Children.forEach(children, child => {\n keys[child.props.accessor] = true;\n });\n\n return keys;\n });\n\n const handleLegendClick = (entry: PayloadType<TType>): void => {\n setHoveredLine(null);\n setActiveLines({ ...activeLines, [entry.dataKey]: !activeLines[entry.dataKey] });\n };\n\n return (\n <ResponsiveContainer>\n <Recharts.LineChart data={data} margin={{ top: 10, right: 0, left: -25, bottom: 0 }}>\n <Recharts.CartesianGrid {...getCartesianGridProps()} />\n <Recharts.XAxis {...getXAxisProps<TType>(props)} />\n <Recharts.YAxis {...getYAxisProps<TType>(props)} />\n <Recharts.Legend\n {...getLegendProps({\n onClick: handleLegendClick,\n onMouseEnter: entry => setHoveredLine(entry.dataKey),\n onMouseLeave: () => setHoveredLine(null),\n activeItems: activeLines,\n })}\n />\n <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n {React.Children.map(children, child => (\n <Recharts.Line\n activeDot={{\n fill: getThemeColor(child.props.color ?? 'blue-300'),\n }}\n dataKey={child.props.accessor}\n isAnimationActive={false}\n dot={false}\n name={child.props.label}\n stroke={getThemeColor(child.props.color ?? 'blue-300')}\n strokeWidth={2}\n hide={!activeLines[child.props.accessor]}\n opacity={hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1}\n />\n ))}\n </Recharts.LineChart>\n </ResponsiveContainer>\n );\n};\nLineChart.Line = Line;\n"],"names":["Line","_","LineChart","externalProps","children","data","formatter","props","hoveredLine","setHoveredLine","useState","activeLines","setActiveLines","keys","React","Children","forEach","child","accessor","handleLegendClick","entry","dataKey","ResponsiveContainer","Recharts","margin","top","right","left","bottom","getCartesianGridProps","getXAxisProps","getYAxisProps","getLegendProps","onClick","onMouseEnter","onMouseLeave","activeItems","getTooltipProps","map","_child$props$color","_child$props$color2","activeDot","fill","getThemeColor","color","isAnimationActive","dot","name","label","stroke","strokeWidth","hide","opacity"],"mappings":";;;;;;AAqBA,MAAMA,IAAI,GAAIC,CAAyB,IAAK,IAAI;MAQnCC,SAAS,GAAG,SAASA,SAASA,CAAkBC,aAAoC;EAC7F,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGJ,aAAa;EAC7D,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAgC,IAAI,CAAC;EACnF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAA0B;IACpE,MAAMG,IAAI,GAAG,EAA6B;IAE1CC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,EAAEa,KAAK;MAClCJ,IAAI,CAACI,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC,GAAG,IAAI;KACpC,CAAC;IAEF,OAAOL,IAAI;GACd,CAAC;EAEF,MAAMM,iBAAiB,GAAIC,KAAyB;IAChDX,cAAc,CAAC,IAAI,CAAC;IACpBG,cAAc,CAAC;MAAE,GAAGD,WAAW;MAAE,CAACS,KAAK,CAACC,OAAO,GAAG,CAACV,WAAW,CAACS,KAAK,CAACC,OAAO;KAAG,CAAC;GACnF;EAED,oBACIP,6BAACQ,mBAAmB,qBAChBR,6BAACS,WAAkB;IAAClB,IAAI,EAAEA,IAAI;IAAEmB,MAAM,EAAE;MAAEC,GAAG,EAAE,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC,EAAE;MAAEC,MAAM,EAAE;;kBAC5Ed,6BAACS,aAAsB,oBAAKM,qBAAqB,EAAE,EAAI,eACvDf,6BAACS,KAAc,oBAAKO,aAAa,CAAQvB,KAAK,CAAC,EAAI,eACnDO,6BAACS,KAAc,oBAAKQ,aAAa,CAAQxB,KAAK,CAAC,EAAI,eACnDO,6BAACS,MAAe,oBACRS,cAAc,CAAC;IACfC,OAAO,EAAEd,iBAAiB;IAC1Be,YAAY,EAAEd,KAAK,IAAIX,cAAc,CAACW,KAAK,CAACC,OAAO,CAAC;IACpDc,YAAY,EAAEA,MAAM1B,cAAc,CAAC,IAAI,CAAC;IACxC2B,WAAW,EAAEzB;GAChB,CAAC,EACJ,eACFG,6BAACS,OAAgB,oBAAKc,eAAe,EAAE;IAAE/B,SAAS,EAAEA;KAAa,EAChEQ,cAAK,CAACC,QAAQ,CAACuB,GAAG,CAAClC,QAAQ,EAAEa,KAAK;IAAA,IAAAsB,kBAAA,EAAAC,mBAAA;IAAA,oBAC/B1B,6BAACS,MAAa;MACVkB,SAAS,EAAE;QACPC,IAAI,EAAEC,aAAa,EAAAJ,kBAAA,GAACtB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAL,kBAAA,cAAAA,kBAAA,GAAI,UAAU;OACtD;MACDlB,OAAO,EAAEJ,KAAK,CAACV,KAAK,CAACW,QAAQ;MAC7B2B,iBAAiB,EAAE,KAAK;MACxBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE9B,KAAK,CAACV,KAAK,CAACyC,KAAK;MACvBC,MAAM,EAAEN,aAAa,EAAAH,mBAAA,GAACvB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,UAAU,CAAC;MACtDU,WAAW,EAAE,CAAC;MACdC,IAAI,EAAE,CAACxC,WAAW,CAACM,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC;MACxCkC,OAAO,EAAE5C,WAAW,IAAIS,KAAK,CAACV,KAAK,CAACW,QAAQ,KAAKV,WAAW,GAAG,GAAG,GAAG;MACvE;GACL,CAAC,CACe,CACH;AAE9B;AACAN,SAAS,CAACF,IAAI,GAAGA,IAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js ADDED Viewed

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { ResponsiveContainer as ResponsiveContainer$1 } from 'recharts';
+// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.
+const ResponsiveContainer = props => (/*#__PURE__*/React__default.createElement(ResponsiveContainer$1, Object.assign({
+  className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
+}, props)));
+export { ResponsiveContainer };
+//# sourceMappingURL=ResponsiveContainer.js.map

package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ResponsiveContainer.js","sources":["../../../../../../../src/charts/components/ResponsiveContainer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\ntype ResponsiveContainerProps = Recharts.ResponsiveContainerProps;\n\n// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.\nexport const ResponsiveContainer = (props: ResponsiveContainerProps) => (\n <Recharts.ResponsiveContainer className=\"!h-[calc(100%-1px)] !w-[calc(100%-1px)]\" {...props} />\n);\n"],"names":["ResponsiveContainer","props","React","Recharts","className"],"mappings":";;;AAKA;MACaA,mBAAmB,GAAIC,KAA+B,kBAC/DC,6BAACC,qBAA4B;EAACC,SAAS,EAAC;GAA8CH,KAAK,EAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/Tooltip.js ADDED Viewed

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { getThemeColor } from '../utils/color.js';
+const Tooltip = ({
+  active,
+  formatter,
+  payload,
+  style,
+  singlePieDonutChart
+}) => {
+  const getColor = entry => {
+    var _ref, _entry$color;
+    if (singlePieDonutChart) {
+      // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+      // and one with multiple pies.
+      return getThemeColor(entry.payload.color);
+    }
+    return (_ref = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref !== void 0 ? _ref : 'blue-500';
+  };
+  if (active && payload && payload.length) {
+    return /*#__PURE__*/React__default.createElement("dl", {
+      className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
+      style: style
+    }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${entry.name}-${index}`
+    }, /*#__PURE__*/React__default.createElement("dt", {
+      className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-px h-2.5 w-2.5 rounded-sm",
+      style: {
+        background: getColor(entry)
+      }
+    }),
+    // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+    // and one with multiple pies.
+    singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
+      className: "mb-0 text-right font-bold text-black "
+    }, formatter ? formatter(entry.value) : entry.value)))));
+  }
+  return null;
+};
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n active?: boolean;\n formatter: (value: any) => any;\n payload: any;\n style?: CSSProperties;\n singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n const getColor = entry => {\n if (singlePieDonutChart) {\n // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n // and one with multiple pies.\n return getThemeColor(entry.payload.color);\n }\n\n return entry.color ?? entry.payload.fill ?? 'blue-500';\n };\n\n if (active && payload && payload.length) {\n return (\n <dl\n className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n style={style}>\n {payload.map((entry, index) => (\n <React.Fragment key={`${entry.name}-${index}`}>\n <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n {\n // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n // and one with multiple pies.\n singlePieDonutChart ? entry.payload.label : entry.name\n }\n </dt>\n <dd className=\"mb-0 text-right font-bold text-black \">\n {formatter ? formatter(entry.value) : entry.value}\n </dd>\n </React.Fragment>\n ))}\n </dl>\n );\n }\n\n return null;\n};\n"],"names":["Tooltip","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;MAWaA,OAAO,GAAGA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;EAAEC;CAAmC;EAC5F,MAAMC,QAAQ,GAAGC,KAAK;;IAClB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,IAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,IAAA,cAAAA,IAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,CAACT,KAAK,EAAEU,KAAK,mBACtBH,6BAACA,cAAK,CAACI,QAAQ;MAACC,GAAG,EAAE,GAAGZ,KAAK,CAACa,IAAI,IAAIH,KAAK;oBACvCH;MAAIC,SAAS,EAAC;oBACVD;MAAMC,SAAS,EAAC,+BAA+B;MAACX,KAAK,EAAE;QAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;MAAO;;;IAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;MAAIC,SAAS,EAAC;OACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ,CACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}

package/dist/esm/packages/taco/src/charts/utils/color.js ADDED Viewed

@@ -0,0 +1,24 @@
+import themeColors from '../../../tailwind.colors.js';
+const mapColor = (palette, prefix = '') => {
+  return Object.keys(palette).reduce((accum, color) => {
+    if (color === 'current') {
+      return accum;
+    } else if (typeof palette[color] === 'string') {
+      return {
+        ...accum,
+        [prefix ? color === 'DEFAULT' ? prefix : `${prefix}-${color}` : color]: palette[color]
+      };
+    } else {
+      return {
+        ...accum,
+        ...mapColor(palette[color], color)
+      };
+    }
+  }, {});
+};
+const colors = /*#__PURE__*/mapColor(themeColors);
+const getThemeColor = color => colors[color];
+export { colors, getThemeColor };
+//# sourceMappingURL=color.js.map

package/dist/esm/packages/taco/src/charts/utils/color.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette, prefix = ''): any => {\n return Object.keys(palette).reduce((accum, color) => {\n if (color === 'current') {\n return accum;\n } else if (typeof palette[color] === 'string') {\n return {\n ...accum,\n [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n };\n } else {\n return {\n ...accum,\n ...mapColor(palette[color], color),\n };\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) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}

package/dist/esm/packages/taco/src/charts/utils/common.js ADDED Viewed

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { Legend } from '../components/Legend.js';
+import { Tooltip } from '../components/Tooltip.js';
+const getCartesianGridProps = () => ({
+  vertical: false
+});
+const getXAxisProps = props => ({
+  axisLine: false,
+  dataKey: props.accessor,
+  fontSize: 12,
+  scale: props.xAxisScale,
+  tickLine: false,
+  tickFormatter: props.xAxisTickFormat
+});
+const getYAxisProps = props => ({
+  axisLine: false,
+  fontSize: 12,
+  scale: props.yAxisScale,
+  tickLine: false,
+  tickFormatter: props.yAxisTickFormat
+});
+const getLegendProps = props => ({
+  content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
+});
+const getTooltipProps = (props = undefined) => ({
+  content: /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, props)),
+  wrapperStyle: {
+    outline: 'none'
+  }
+});
+export { getCartesianGridProps, getLegendProps, getTooltipProps, getXAxisProps, getYAxisProps };
+//# sourceMappingURL=common.js.map

package/dist/esm/packages/taco/src/charts/utils/common.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"common.js","sources":["../../../../../../../src/charts/utils/common.tsx"],"sourcesContent":["import React from 'react';\nimport { ScaleType } from 'recharts/types/util/types';\n\nimport { Legend } from '../components/Legend';\nimport { Tooltip } from '../components/Tooltip';\nimport { LegendProps } from '../components/Legend';\n\nexport type CommonChartProps<TType> = {\n accessor: keyof TType & string;\n // eslint-disable-next-line @typescript-eslint/ban-types\n xAxisScale?: ScaleType | Function;\n xAxisTickFormat: (value: any) => string;\n // eslint-disable-next-line @typescript-eslint/ban-types\n yAxisScale?: ScaleType | Function;\n yAxisTickFormat: (value: any) => string;\n};\n\nexport const getCartesianGridProps = () => ({\n vertical: false,\n});\n\nexport const getXAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n axisLine: false,\n dataKey: props.accessor,\n fontSize: 12,\n scale: props.xAxisScale,\n tickLine: false,\n tickFormatter: props.xAxisTickFormat,\n});\n\nexport const getYAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n axisLine: false,\n fontSize: 12,\n scale: props.yAxisScale,\n tickLine: false,\n tickFormatter: props.yAxisTickFormat,\n});\n\nexport const getLegendProps = <TType,>(props: LegendProps<TType>) => ({\n content: <Legend {...props} />,\n});\n\nexport const getTooltipProps = (props: any = undefined) => ({\n content: <Tooltip {...props} />,\n wrapperStyle: { outline: 'none' },\n});\n"],"names":["getCartesianGridProps","vertical","getXAxisProps","props","axisLine","dataKey","accessor","fontSize","scale","xAxisScale","tickLine","tickFormatter","xAxisTickFormat","getYAxisProps","yAxisScale","yAxisTickFormat","getLegendProps","content","React","Legend","getTooltipProps","undefined","Tooltip","wrapperStyle","outline"],"mappings":";;;;MAiBaA,qBAAqB,GAAGA,OAAO;EACxCC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAYC,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAEF,KAAK,CAACG,QAAQ;EACvBC,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACM,UAAU;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACS;CACxB;MAEYC,aAAa,GAAYV,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfG,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACW,UAAU;EACvBJ,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACY;CACxB;MAEYC,cAAc,GAAYb,KAAyB,KAAM;EAClEc,OAAO,eAAEC,6BAACC,MAAM,oBAAKhB,KAAK;CAC7B;MAEYiB,eAAe,GAAGA,CAACjB,QAAakB,SAAS,MAAM;EACxDJ,OAAO,eAAEC,6BAACI,OAAO,oBAAKnB,KAAK,EAAI;EAC/BoB,YAAY,EAAE;IAAEC,OAAO,EAAE;;CAC5B;;;;"}

package/dist/esm/packages/taco/src/components/Accordion/Accordion.js CHANGED Viewed

@@ -57,33 +57,25 @@ const Accordion = props => {
   const context = React__default.useMemo(() => ({
     as
   }), [as]);
-  const type = typeof defaultId === 'string' || typeof id === 'string' ? 'single' : 'multiple';
   let valueProps;
   if (defaultId) {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      defaultValue: defaultId
-    } : {
-      type: 'multiple',
-      defaultValue: defaultId
+    valueProps = {
+      defaultValue: defaultId || undefined
     };
   } else {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      onValueChange: onChange,
-      value: id || undefined
-    } : {
-      type: 'multiple',
+    valueProps = {
       onValueChange: onChange,
       value: id || undefined
     };
   }
+  const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
   const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;

package/dist/esm/packages/taco/src/components/Accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n as: 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef(function AccordionStyledTrigger(\n props: AccordionPrimitive.AccordionTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const isExpanded = !!props['aria-expanded'];\n\n const className = cn(\n 'w-full inline-flex justify-between items-center align-middle',\n 'focus:rounded-sm focus:border-blue-500 focus:yt-focus',\n props.className\n );\n\n return (\n <button {...props} ref={ref} className={className}>\n {props.children}\n <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n </button>\n );\n});\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children } = props;\n const { as: Heading } = React.useContext(AccordionContext);\n\n return (\n <AccordionPrimitive.Header asChild>\n <Heading className=\"my-3\">\n <AccordionPrimitive.Trigger ref={ref} asChild>\n <StyledTrigger>{children}</StyledTrigger>\n </AccordionPrimitive.Trigger>\n </Heading>\n </AccordionPrimitive.Header>\n );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n return <AccordionPrimitive.Content {...props} ref={ref} />;\n});\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n id: string;\n disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n const { id, ...otherProps } = props;\n return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n children: React.ReactNode[];\n\n /** Change what heading element accordion regions will render /\n as?: 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n\n /* Additional classes for Accordion root element /\n className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n /* Default expanded accordion(s) /\n defaultId?: string \| string[];\n\n id?: never;\n onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n /* Expanded accordions /\n id: string[];\n\n /* onChange function to receive ids of expanded accordions /\n onChange: (id: string[]) => void;\n\n defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n /* Expanded accordion /\n id: string;\n\n /* onChange function to receive id of expanded accordion */\n onChange: (id: string) => void;\n\n defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps \| AccordionMultipleControlledProps \| AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n const context = React.useMemo(() => ({ as }), [as]);\n\n ~~const~~ ~~type = typeof defaultId === 'string' \|\| typeof id === 'string' ? 'single' : 'multiple'~~;\n\n ~~let valueProps;\n~~ if (defaultId) {\n valueProps ~~=\n type~~ ~~=== 'single'\n ?~~ {\n ~~type: 'single' as const,\n~~ defaultValue: defaultId as ~~string~~,\n }~~\n : { type: 'multiple' as const, defaultValue: defaultId as string[] }~~;\n } else {\n valueProps ~~=\n type~~ ~~=== 'single'\n ?~~ {\n ~~type: 'single' as const,\n~~ onValueChange: onChange ~~as (id: string) => void~~,\n value: (id ~~as string)~~ \|\| undefined,\n }\n ~~: {~~\n type: ~~'multiple'~~ as ~~const,\n onValueChange:~~ ~~onChange~~ as ~~(id:~~ ~~string[])~~ ~~=> void,\n~~ value: ~~(id~~ as string~~[])~~ \|\| ~~undefined,\n }~~;\n ~~}\n\n~~ const className = cn('divide-y divide-grey-200', props.className);\n\n return (\n <AccordionContext.Provider value={context}>\n <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" className={className} />\n </AccordionContext.Provider>\n );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","AccordionStyledTrigger","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","AccordionTrigger","Heading","useContext","AccordionPrimitive","asChild","Content","AccordionContent","Item","id","otherProps","value","Accordion","defaultId","onChange","context","useMemo","~~type~~","~~valueProps~~","~~defaultValue~~","onValueChange","~~undefined~~","Provider"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,gBAAGC,cAAK,CAACC,aAAa,CAAmB;EAC3DC,EAAE,EAAE;CACP,CAAC;AAIF,MAAMC,aAAa,gBAAGH,cAAK,CAACI,UAAU,CAAC,SAASC,sBAAsBA,CAClEC,KAA+C,EAC/CC,GAAiC;EAEjC,MAAMC,UAAU,GAAG,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAE3C,MAAMG,SAAS,GAAGC,EAAE,CAChB,8DAA8D,EAC9D,uDAAuD,EACvDJ,KAAK,CAACG,SAAS,CAClB;EAED,oBACIT,yDAAYM,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEE,SAAS,EAAEA;MACnCH,KAAK,CAACK,QAAQ,eACfX,6BAACY,IAAI;IAACC,IAAI,EAAEL,UAAU,GAAG,YAAY,GAAG;IAAkB,CACrD;AAEjB,CAAC,CAAC;AAEF,MAAMM,OAAO,gBAAGd,cAAK,CAACI,UAAU,CAAC,SAASW,gBAAgBA,CAACT,KAA4B,EAAEC,GAAiC;EACtH,MAAM;IAAEI;GAAU,GAAGL,KAAK;EAC1B,MAAM;IAAEJ,EAAE,EAAEc;GAAS,GAAGhB,cAAK,CAACiB,UAAU,CAAClB,gBAAgB,CAAC;EAE1D,oBACIC,6BAACkB,MAAyB;IAACC,OAAO;kBAC9BnB,6BAACgB,OAAO;IAACP,SAAS,EAAC;kBACfT,6BAACkB,SAA0B;IAACX,GAAG,EAAEA,GAAG;IAAEY,OAAO;kBACzCnB,6BAACG,aAAa,QAAEQ,QAAQ,CAAiB,CAChB,CACvB,CACc;AAEpC,CAAC,CAAC;AAGF,MAAMS,OAAO,gBAAGpB,cAAK,CAACI,UAAU,CAAC,SAASiB,gBAAgBA,CAACf,KAA4B,EAAEC,GAA8B;EACnH,oBAAOP,6BAACkB,SAA0B,oBAAKZ,KAAK;IAAEC,GAAG,EAAEA;KAAO;AAC9D,CAAC,CAAC;AAMF,MAAMe,IAAI,GAAIhB,KAAyB;EACnC,MAAM;IAAEiB,EAAE;IAAE,GAAGC;GAAY,GAAGlB,KAAK;EACnC,oBAAON,6BAACkB,MAAuB,oBAAKM,UAAU;IAAEC,KAAK,EAAEF;KAAM;AACjE,CAAC;MAyCYG,SAAS,GAAIpB,KAAqB;EAC3C,MAAM;IAAEiB,EAAE;IAAEI,SAAS;IAAEC,QAAQ;IAAE1B,EAAE,GAAG,IAAI;IAAE,GAAGsB;GAAY,GAAGlB,KAAK;EACnE,MAAMuB,OAAO,GAAG7B,cAAK,CAAC8B,OAAO,CAAC,OAAO;IAAE5B;GAAI,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAEnD,~~MAAM6B~~,~~IAAI~~,~~GAAG~~,~~OAAOJ,~~SAAS,~~KAAK,QAAQ,IAAI,OAAOJ,~~EAAE,~~KAAK~~,~~QAAQ,~~GAAG~~,QAAQ,GAAG,UAAU~~;~~EAE5F~~,~~IAAIS~~,~~UAAU;EACd~~,~~IAAIL,~~SAAS,~~EAAE~~;~~IACXK~~,UAAU,~~GACND~~,~~IAAI~~,~~KAAK~~,QAAQ~~,GACX~~;~~MACIA~~,~~IAAI~~,EAAE,~~QAAiB~~;~~MACvBE~~,~~YAAY~~,~~EAAEN;KACjB,GACD;MAAEI,~~IAAI,~~EAAE~~,~~UAAmB;MAAEE~~,~~YAAY,EAAEN;KAAuB;GAC/E,MAAM;IACHK,~~UAAU,~~GACND~~,~~IAAI~~,KAAK,QAAQ,~~GACX;MACIA,~~IAAI,~~EAAE~~,~~QAAiB;MACvBG~~,~~aAAa~~,~~EAAEN~~,~~QAAgC;MAC/CH,~~KAAK,~~EAAGF~~,~~EAAa~~,~~IAAIY;KAC5B~~,~~GACD;MACIJ~~,~~IAAI,EAAE,UAAmB~~;~~MACzBG~~,~~aAAa~~,~~EAAEN,QAAkC;MACjDH,KAAK,EAAGF,EAAe,IAAIY;KAC9B;;EAGf,MAAM1B,~~SAAS,GAAGC,EAAE,CAAC,0BAA0B,EAAEJ,KAAK,CAACG,SAAS,CAAC;EAEjE,oBACIT,6BAACD,gBAAgB,CAACqC,QAAQ;IAACX,KAAK,EAAEI;kBAC9B7B,6BAACkB,IAAuB,oBAAKM,UAAU,~~EAAMQ~~,UAAU;iBAAY,WAAW;~~IAACvB~~,SAAS,EAAEA;~~KAAa~~,~~CAC/E~~;AAEpC;~~AAEAiB~~,SAAS,CAACJ,IAAI,GAAGA,IAAI;AACrBI,SAAS,CAACZ,OAAO,GAAGA,OAAO;AAC3BY,SAAS,CAACN,OAAO,GAAGA,OAAO;;;;"}
1	+ {"version":3,"file":"Accordion.js","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n as: 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef(function AccordionStyledTrigger(\n props: AccordionPrimitive.AccordionTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) {\n const isExpanded = !!props['aria-expanded'];\n\n const className = cn(\n 'w-full inline-flex justify-between items-center align-middle',\n 'focus:rounded-sm focus:border-blue-500 focus:yt-focus',\n props.className\n );\n\n return (\n <button {...props} ref={ref} className={className}>\n {props.children}\n <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n </button>\n );\n});\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children } = props;\n const { as: Heading } = React.useContext(AccordionContext);\n\n return (\n <AccordionPrimitive.Header asChild>\n <Heading className=\"my-3\">\n <AccordionPrimitive.Trigger ref={ref} asChild>\n <StyledTrigger>{children}</StyledTrigger>\n </AccordionPrimitive.Trigger>\n </Heading>\n </AccordionPrimitive.Header>\n );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n return <AccordionPrimitive.Content {...props} ref={ref} />;\n});\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n id: string;\n disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n const { id, ...otherProps } = props;\n return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n children: React.ReactNode[];\n\n /** Change what heading element accordion regions will render /\n as?: 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n\n /* Additional classes for Accordion root element /\n className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n /* Default expanded accordion(s) /\n defaultId?: string \| string[];\n\n id?: never;\n onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n /* Expanded accordions /\n id: string[];\n\n /* onChange function to receive ids of expanded accordions /\n onChange: (id: string[]) => void;\n\n defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n /* Expanded accordion /\n id: string;\n\n /* onChange function to receive id of expanded accordion */\n onChange: (id: string) => void;\n\n defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps \| AccordionMultipleControlledProps \| AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n const context = React.useMemo(() => ({ as }), [as]);\n\n let valueProps;\n\n if (defaultId) {\n valueProps = {\n defaultValue: defaultId \|\| undefined,\n };\n } else {\n valueProps = {\n onValueChange: onChange,\n value: id \|\| undefined,\n };\n }\n\n const type = typeof valueProps.defaultValue === 'string' \|\| typeof valueProps.value === 'string' ? 'single' : 'multiple';\n const className = cn('divide-y divide-grey-200', props.className);\n\n return (\n <AccordionContext.Provider value={context}>\n <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" className={className} type={type} />\n </AccordionContext.Provider>\n );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","AccordionStyledTrigger","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","AccordionTrigger","Heading","useContext","AccordionPrimitive","asChild","Content","AccordionContent","Item","id","otherProps","value","Accordion","defaultId","onChange","context","useMemo","valueProps","defaultValue","undefined","onValueChange","type","Provider"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Alert/Alert.js CHANGED Viewed

@@ -12,6 +12,8 @@ const getIconName = state => {
       return 'warning';
     case 'error':
       return 'close';
+    case 'experiment':
+      return 'experiment';
     case 'success':
       return 'tick';
     default:

package/dist/esm/packages/taco/src/components/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode;\n state?: State;\n onClose?: () => void;\n};\n\nconst getIconName = (state: State \| undefined): IconName => {\n switch (state) {\n case 'information':\n return 'info';\n case 'warning':\n return 'warning';\n case 'error':\n return 'close';\n case 'success':\n return 'tick';\n default:\n return 'question-mark';\n }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n const { children, title, state, onClose } = props;\n\n const className = cn(\n `flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(\n getColorByState(state)\n )}`,\n props.className\n );\n\n return (\n <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n <div className=\"grow text-sm\">\n {title && <div className=\"font-bold\">{title}</div>}\n {children}\n </div>\n {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} />}\n </div>\n );\n});\n"],"names":["getIconName","state","Alert","React","forwardRef","props","ref","children","title","onClose","className","cn","getSubtleColorShadeClasses","getColorByState","role","BadgeIcon","icon","color","Icon","name","onClick"],"mappings":";;;;;;AAaA,MAAMA,WAAW,GAAIC,KAAwB;EACzC,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,SAAS;IACpB,KAAK,OAAO;MACR,OAAO,OAAO;IAClB,KAAK,SAAS;MACV,OAAO,MAAM;IACjB;MACI,OAAO,eAAe;;AAElC,CAAC;MAEYC,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAACG,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEP,KAAK;IAAEQ;GAAS,GAAGJ,KAAK;EAEjD,MAAMK,SAAS,GAAGC,EAAE,CAChB,4EAA4EC,0BAA0B,CAClGC,eAAe,CAACZ,KAAK,CAAC,CACzB,EAAE,EACHI,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,sDAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACI,IAAI,EAAC;mBACnEX,6BAACY,SAAS;IAACL,SAAS,EAAC,WAAW;IAACM,IAAI,EAAEhB,WAAW,CAACC,KAAK,CAAC;IAAEgB,KAAK,EAAEJ,eAAe,CAACZ,KAAK;IAAK,eAC5FE;IAAKO,SAAS,EAAC;KACVF,KAAK,iBAAIL;IAAKO,SAAS,EAAC;KAAaF,KAAK,CAAO,EACjDD,QAAQ,CACP,EACLE,OAAO,iBAAIN,6BAACe,IAAI;IAACR,SAAS,EAAC,0BAA0B;IAACS,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEX;IAAW,CACtF;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode;\n state?: State;\n onClose?: () => void;\n};\n\nconst getIconName = (state: State \| undefined): IconName => {\n switch (state) {\n case 'information':\n return 'info';\n case 'warning':\n return 'warning';\n case 'error':\n return 'close';\n case 'experiment':\n return 'experiment';\n case 'success':\n return 'tick';\n default:\n return 'question-mark';\n }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n const { children, title, state, onClose } = props;\n\n const className = cn(\n `flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(\n getColorByState(state)\n )}`,\n props.className\n );\n\n return (\n <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n <div className=\"grow text-sm\">\n {title && <div className=\"font-bold\">{title}</div>}\n {children}\n </div>\n {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} />}\n </div>\n );\n});\n"],"names":["getIconName","state","Alert","React","forwardRef","props","ref","children","title","onClose","className","cn","getSubtleColorShadeClasses","getColorByState","role","BadgeIcon","icon","color","Icon","name","onClick"],"mappings":";;;;;;AAaA,MAAMA,WAAW,GAAIC,KAAwB;EACzC,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,SAAS;IACpB,KAAK,OAAO;MACR,OAAO,OAAO;IAClB,KAAK,YAAY;MACb,OAAO,YAAY;IACvB,KAAK,SAAS;MACV,OAAO,MAAM;IACjB;MACI,OAAO,eAAe;;AAElC,CAAC;MAEYC,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAACG,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEP,KAAK;IAAEQ;GAAS,GAAGJ,KAAK;EAEjD,MAAMK,SAAS,GAAGC,EAAE,CAChB,4EAA4EC,0BAA0B,CAClGC,eAAe,CAACZ,KAAK,CAAC,CACzB,EAAE,EACHI,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,sDAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACI,IAAI,EAAC;mBACnEX,6BAACY,SAAS;IAACL,SAAS,EAAC,WAAW;IAACM,IAAI,EAAEhB,WAAW,CAACC,KAAK,CAAC;IAAEgB,KAAK,EAAEJ,eAAe,CAACZ,KAAK;IAAK,eAC5FE;IAAKO,SAAS,EAAC;KACVF,KAAK,iBAAIL;IAAKO,SAAS,EAAC;KAAaF,KAAK,CAAO,EACjDD,QAAQ,CACP,EACLE,OAAO,iBAAIN,6BAACe,IAAI;IAACR,SAAS,EAAC,0BAA0B;IAACS,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEX;IAAW,CACtF;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Badge/Badge.js CHANGED Viewed

@@ -15,10 +15,10 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
     'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
     'font-bold': outline || !subtle,
@@ -30,12 +30,15 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     if (compact) {
       return /*#__PURE__*/createElement(VisuallyHidden, null, children);
     }
+    const contentToRender = typeof children === 'string' ? /*#__PURE__*/createElement("span", {
+      className: "items-center truncate"
+    }, children) : children;
     if (status) {
       return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
-        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
-      }), children);
+        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+      }), contentToRender);
     }
-    return children;
+    return contentToRender;
   };
   return /*#__PURE__*/createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",

package/dist/esm/packages/taco/src/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n / Content should be a numerical value or tag/status like text /\n children: React.ReactNode;\n / Show small version of badge /\n small?: boolean;\n / Background color /\n color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: boolean;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: boolean;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps \| OutlineBadgeProps \| SubtleBadgeProps \| StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const {\n children,\n compact = false,\n outline = false,\n status = false,\n subtle = false,\n small = false,\n color,\n ...otherProps\n } = props;\n const isTransparent = color === 'transparent';\n const className = cn(\n 'rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n {\n [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n [`border-~~transparent~~ font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n [`border-~~transparent~~ ${getColorShadeClasses(color)}`]: !outline && !subtle,\n 'h-4 min-w-0 py-0 px-1 text-xs': small,\n 'h-2 w-2 min-w-0': compact,\n 'font-bold': outline \|\| !subtle,\n 'text-sm': !small,\n 'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n '!bg-grey-700': compact && isTransparent,\n },\n props.className\n );\n\n const content = () => {\n if (compact) {\n return <VisuallyHidden>{children}</VisuallyHidden>;\n }\n if (status) {\n return (\n <>\n <div className={cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))} />\n {~~children~~}\n </>\n );\n }\n return ~~children~~;\n };\n\n return (\n <span\n {...otherProps}\n aria-atomic=\"true\"\n aria-live=\"polite\"\n className={className}\n data-taco=\"badge\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}>\n {content()}\n </span>\n );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB~~,+FAA+F~~,~~EAC/F~~;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,~~kCAAkCU~~,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;~~IAC/E~~,CAAC,~~sBAAsBS~~,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;~~IAC1E~~,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;~~IAEtD~~,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,~~2BAA2B~~,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,~~EAC/EN~~,~~QAAQ~~,~~CACV~~;;IAGX,OAAOA,~~QAAQ~~;~~GAClB~~;EAED,~~oBACIH~~,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;~~IACRiB~~,IAAI,EAAC,QAAQ;IACbC,KAAK,~~EAAEnB~~,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}
1	+ {"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n / Content should be a numerical value or tag/status like text /\n children: React.ReactNode;\n / Show small version of badge /\n small?: boolean;\n / Background color /\n color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: boolean;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: boolean;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps \| OutlineBadgeProps \| SubtleBadgeProps \| StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const {\n children,\n compact = false,\n outline = false,\n status = false,\n subtle = false,\n small = false,\n color,\n ...otherProps\n } = props;\n const isTransparent = color === 'transparent';\n const className = cn(\n 'rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n {\n [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,\n 'h-4 min-w-0 py-0 px-1 text-xs': small,\n 'h-2 w-2 min-w-0': compact,\n 'font-bold': outline \|\| !subtle,\n 'text-sm': !small,\n 'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n '!bg-grey-700': compact && isTransparent,\n },\n props.className\n );\n\n const content = () => {\n if (compact) {\n return <VisuallyHidden>{children}</VisuallyHidden>;\n }\n\n const contentToRender =\n typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n if (status) {\n return (\n <>\n <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))} />\n {contentToRender}\n </>\n );\n }\n return contentToRender;\n };\n\n return (\n <span\n {...otherProps}\n aria-atomic=\"true\"\n aria-live=\"polite\"\n className={className}\n data-taco=\"badge\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}>\n {content()}\n </span>\n );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","contentToRender","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,0GAA0G,EAC1G;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,2BAA2BU,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;IACxE,CAAC,eAAeS,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IACnE,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAGtD,MAAMgB,eAAe,GACjB,OAAOhB,QAAQ,KAAK,QAAQ,gBAAGH;MAAMY,SAAS,EAAC;OAAyBT,QAAQ,CAAQ,GAAGA,QAAQ;IAEvG,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,oCAAoC,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EACxFU,eAAe,CACjB;;IAGX,OAAOA,eAAe;GACzB;EAED,oBACInB,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRkB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEpB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Banner/util.js CHANGED Viewed

@@ -16,6 +16,11 @@ const getBannerIcon = type => {
           icon: "close",
           color: "red"
         });
+      case 'experiment':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "experiment",
+          color: "purple"
+        });
       case 'warning':
         return /*#__PURE__*/React__default.createElement(BadgeIcon, {
           icon: "warning",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"util.js","sources":["../../../../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element \| null => {\n return (\n <div className=\"mt-[5px] self-start\">\n {(() => {\n switch (type) {\n case 'success':\n return <BadgeIcon icon=\"tick\" color=\"green\" />;\n case 'error':\n return <BadgeIcon icon=\"close\" color=\"red\" />;\n case 'warning':\n return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n case 'information':\n return <BadgeIcon icon=\"info\" color=\"blue\" />;\n default:\n return null;\n }\n })()}\n </div>\n );\n};\n"],"names":["getBannerIcon","type","React","className","BadgeIcon","icon","color"],"mappings":";;;MAIaA,aAAa,GAAIC,IAAW;EACrC,oBACIC;IAAKC,SAAS,EAAC;KACV,CAAC;IACE,QAAQF,IAAI;MACR,KAAK,SAAS;QACV,oBAAOC,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAU;MAClD,KAAK,OAAO;QACR,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,OAAO;UAACC,KAAK,EAAC;UAAQ;MACjD,KAAK,SAAS;QACV,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,SAAS;UAACC,KAAK,EAAC;UAAW;MACtD,KAAK,aAAa;QACd,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAS;MACjD;QACI,OAAO,IAAI;;GAEtB,GAAG,CACF;AAEd;;;;"}
1	+ {"version":3,"file":"util.js","sources":["../../../../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element \| null => {\n return (\n <div className=\"mt-[5px] self-start\">\n {(() => {\n switch (type) {\n case 'success':\n return <BadgeIcon icon=\"tick\" color=\"green\" />;\n case 'error':\n return <BadgeIcon icon=\"close\" color=\"red\" />;\n case 'experiment':\n return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n case 'warning':\n return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n case 'information':\n return <BadgeIcon icon=\"info\" color=\"blue\" />;\n default:\n return null;\n }\n })()}\n </div>\n );\n};\n"],"names":["getBannerIcon","type","React","className","BadgeIcon","icon","color"],"mappings":";;;MAIaA,aAAa,GAAIC,IAAW;EACrC,oBACIC;IAAKC,SAAS,EAAC;KACV,CAAC;IACE,QAAQF,IAAI;MACR,KAAK,SAAS;QACV,oBAAOC,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAU;MAClD,KAAK,OAAO;QACR,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,OAAO;UAACC,KAAK,EAAC;UAAQ;MACjD,KAAK,YAAY;QACb,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,YAAY;UAACC,KAAK,EAAC;UAAW;MACzD,KAAK,SAAS;QACV,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,SAAS;UAACC,KAAK,EAAC;UAAW;MACtD,KAAK,aAAa;QACd,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAS;MACjD;QACI,OAAO,IAAI;;GAEtB,GAAG,CACF;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Button/Button.js CHANGED Viewed

@@ -14,7 +14,8 @@ const Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
   }, props.className);
   return createButtonWithTooltip({
     ...otherProps,
-    'data-taco': 'button'
+    'data-taco': 'button',
+    'data-appearance': appearance
   }, className, ref);
 });
 const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {

package/dist/esm/packages/taco/src/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button /\n appearance?: Appearance;\n /\n Dialog component associated with the button, clicking the button will open the dialog.\n * Note that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n /\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /\n Drawer component associated with the button, clicking the button will open the drawer.\n * Note that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated drawer when clicked.\n /\n drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n /* If fluid, button expands to the width of it's container /\n fluid?: boolean;\n /* Hanger component associated with the button. /\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /* Menu component associated with the button. /\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /\n Popover component associated with the button, clicking the button will open the popover.\n * Note that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n /\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /* A tooltip to show when hovering over the button */\n tooltip?: string \| JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>) {\n const { appearance, fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance),\n 'rounded px-3',\n {\n 'w-full': fluid,\n },\n props.className\n );\n\n return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n) {\n const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n let children = buttonProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof menu === 'function') {\n children = Array.isArray(children)\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n }\n\n const button = (\n <Base {...buttonProps} ref={ref}>\n {children}\n </Base>\n );\n\n return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAUA,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACN,UAAU,CAAC,EAChC,cAAc,EACd;IACI,QAAQ,EAAEC;GACb,EACDH,KAAK,CAACK,SAAS,CAClB;EAED,OAAOI,uBAAuB,~~CAAC~~;~~IAAE~~,GAAGL,UAAU;~~IAAE~~,WAAW,EAAE;~~GAAU~~,~~EAAEC~~,SAAS,~~EAAEJ~~,GAAG,~~CAAC~~;~~AAC5F~~,CAAC,CAAC;MAEWS,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAMA,CAClDV,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEU,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGhB,KAAK;EAEvE,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACRzB,cAACD,IAAI,oBAAKmB,WAAW;IAAEf,GAAG,EAAEA;MACvBgB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button /\n appearance?: Appearance;\n /\n Dialog component associated with the button, clicking the button will open the dialog.\n * Note that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n /\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /\n Drawer component associated with the button, clicking the button will open the drawer.\n * Note that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated drawer when clicked.\n /\n drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n /* If fluid, button expands to the width of it's container /\n fluid?: boolean;\n /* Hanger component associated with the button. /\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /* Menu component associated with the button. /\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /\n Popover component associated with the button, clicking the button will open the popover.\n * Note that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n /\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /* A tooltip to show when hovering over the button */\n tooltip?: string \| JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>) {\n const { appearance, fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance),\n 'rounded px-3',\n {\n 'w-full': fluid,\n },\n props.className\n );\n\n return createButtonWithTooltip(\n {\n ...otherProps,\n 'data-taco': 'button',\n 'data-appearance': appearance,\n },\n className,\n ref\n );\n});\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n) {\n const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n let children = buttonProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof menu === 'function') {\n children = Array.isArray(children)\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n }\n\n const button = (\n <Base {...buttonProps} ref={ref}>\n {children}\n </Base>\n );\n\n return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAUA,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACN,UAAU,CAAC,EAChC,cAAc,EACd;IACI,QAAQ,EAAEC;GACb,EACDH,KAAK,CAACK,SAAS,CAClB;EAED,OAAOI,uBAAuB,CAC1B;IACI,GAAGL,UAAU;IACb,WAAW,EAAE,QAAQ;IACrB,iBAAiB,EAAEF;GACtB,EACDG,SAAS,EACTJ,GAAG,CACN;AACL,CAAC,CAAC;MAEWS,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAMA,CAClDV,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEU,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGhB,KAAK;EAEvE,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACRzB,cAACD,IAAI,oBAAKmB,WAAW;IAAEf,GAAG,EAAEA;MACvBgB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Button/util.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {

package/dist/esm/packages/taco/src/components/Button/util.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance \| undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n case 'danger':\n return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n case 'ghost':\n return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n }\n\n return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n }\n\n case 'transparent': {\n return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n }\n\n default:\n return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n }\n};\n\nexport const createButtonWithTooltip = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n): JSX.Element => {\n const { tooltip, ...buttonProps } = props;\n const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n const { dialog, drawer, hanger, menu, popover } = props;\n let button = buttonBase;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof drawer === 'function') {\n button = drawer({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,~~uLAAuL~~;~~AAClM~~;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,OAAO,qJAAqJ;IAEhK,KAAK,QAAQ;MACT,OAAO,+IAA+I;IAE1J,KAAK,OAAO;MACR,OAAO,kMAAkM;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,OAAO,iGAAiG;;QAG5G,OAAO,uGAAuG;;IAGlH,KAAK,aAAa;MAAE;QAChB,OAAO,+IAA+I;;IAG1J;MACI,OAAO,kHAAkH;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
1	+ {"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance \| undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n case 'danger':\n return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n case 'ghost':\n return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n }\n\n return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n }\n\n case 'transparent': {\n return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n }\n\n default:\n return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n }\n};\n\nexport const createButtonWithTooltip = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n): JSX.Element => {\n const { tooltip, ...buttonProps } = props;\n const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n const { dialog, drawer, hanger, menu, popover } = props;\n let button = buttonBase;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof drawer === 'function') {\n button = drawer({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,0NAA0N;AACrO;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,OAAO,qJAAqJ;IAEhK,KAAK,QAAQ;MACT,OAAO,+IAA+I;IAE1J,KAAK,OAAO;MACR,OAAO,kMAAkM;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,OAAO,iGAAiG;;QAG5G,OAAO,uGAAuG;;IAGlH,KAAK,aAAa;MAAE;QAChB,OAAO,+IAA+I;;IAG1J;MACI,OAAO,kHAAkH;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}

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

@@ -100,7 +100,6 @@ const useCombobox = ({
   }, [open]);
   // event handlers
   const handleInputBlur = event => {
-    event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
@@ -113,7 +112,14 @@ const useCombobox = ({
       if (parents !== null && parents.length > 0) {
         event.detail.parents = parents;
       }
-      onChange(event);
+      const isComboboxChangeEvent = event => {
+        return typeof event.detail === 'object'; // this makes sure we only take our own custom event, and not the browser default blur on tab.
+      };
+      // Only trigger onChange if this is our custom event (not a browser blur event)
+      // or if the input was cleared.
+      if (isComboboxChangeEvent(event) || event.target.value === '' && !inline) {
+        onChange(event);
+      }
     }
     if (props.onBlur) {
       props.onBlur(event);
@@ -127,12 +133,10 @@ const useCombobox = ({
       setOpen(true);
     }
     if (onClick) {
-      event.persist();
       onClick(event);
     }
   };
   const handleInputKeyDown = event => {
-    event.persist();
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -201,7 +205,6 @@ const useCombobox = ({
       }
     }
     if (!event.isDefaultPrevented() && onKeyDown) {
-      event.persist();
       onKeyDown(event);
     }
   };

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

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