@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/esm/components/Table/renderers/renderers.js

@@ -1,7 +1,7 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { ClassNames } from "@emotion/react";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../../../utils/setId.js";
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { hvStringFallback, hvNumberFallback } from "../utils/fallbacks.js";
 import { HvDateColumnCell } from "./DateColumnCell/DateColumnCell.js";
 import { HvButton } from "../../Button/Button.js";
@@ -15,10 +15,7 @@ function hvTextColumn(col, overflowTooltipProps = {}) {
   return {
     Cell: ({
       value
-    }) => /* @__PURE__ */ jsx(HvOverflowTooltip, {
-      data: hvStringFallback(value),
-      ...overflowTooltipProps
-    }),
+    }) => /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value), ...overflowTooltipProps }),
     sortType: "alphanumeric",
     ...col
   };
@@ -27,9 +24,7 @@ function hvNumberColumn(col) {
   return {
     Cell: ({
       value
-    }) => /* @__PURE__ */ jsx(Fragment, {
-      children: hvNumberFallback(value)
-    }),
+    }) => /* @__PURE__ */ jsx(Fragment, { children: hvNumberFallback(value) }),
     align: "right",
     sortType: "number",
     ...col
@@ -39,10 +34,7 @@ function hvDateColumn(col, dateFormat) {
   return {
     Cell: ({
       value
-    }) => /* @__PURE__ */ jsx(HvDateColumnCell, {
-      date: value,
-      dateFormat
-    }),
+    }) => /* @__PURE__ */ jsx(HvDateColumnCell, { date: value, dateFormat }),
     sortType: "alphanumeric",
     sortDescFirst: true,
     ...col
@@ -58,29 +50,19 @@ function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabe
       } = cellProps;
       const expandedProps = (_a = row.getToggleRowExpandedProps) == null ? void 0 : _a.call(row);
       const hasContent = (getCanRowExpand == null ? void 0 : getCanRowExpand(row)) ?? true;
-      return /* @__PURE__ */ jsx(ClassNames, {
-        children: ({
-          css
-        }) => /* @__PURE__ */ jsxs(Fragment, {
-          children: [hasContent && /* @__PURE__ */ jsx(HvButton, {
-            icon: true,
-            "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
-            "aria-expanded": row.isExpanded,
-            onClick: expandedProps == null ? void 0 : expandedProps.onClick,
-            classes: {
-              root: css({
-                position: "absolute",
-                left: 0,
-                top: "50%",
-                transform: "translateY(-50%)"
-              })
-            },
-            children: row.isExpanded ? ExpandedIcon : CollapsedIcon
-          }), /* @__PURE__ */ jsx(HvOverflowTooltip, {
-            data: hvStringFallback(value)
-          })]
-        })
-      });
+      return /* @__PURE__ */ jsx(ClassNames, { children: ({
+        css
+      }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        hasContent && /* @__PURE__ */ jsx(HvButton, { icon: true, "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel, "aria-expanded": row.isExpanded, onClick: expandedProps == null ? void 0 : expandedProps.onClick, classes: {
+          root: css({
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            transform: "translateY(-50%)"
+          })
+        }, children: row.isExpanded ? ExpandedIcon : CollapsedIcon }),
+        /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value) })
+      ] }) });
     },
     sortType: "alphanumeric",
     cellStyle: {
@@ -97,28 +79,16 @@ function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey, fromRowD
         row
       } = cellProps;
       if (!value) {
-        return /* @__PURE__ */ jsx(Fragment, {
-          children: "—"
-        });
+        return /* @__PURE__ */ jsx(Fragment, { children: "—" });
       }
       const {
         [valueDataKey]: name,
         [colorDataKey]: color,
         [textColorDataKey]: textColor
       } = fromRowData ? row.original : value;
-      return /* @__PURE__ */ jsx(HvTag, {
-        label: /* @__PURE__ */ jsx(HvTypography, {
-          variant: "body",
-          children: name
-        }),
-        type: "semantic",
-        color,
-        style: textColor != null ? {
-          color: textColor
-        } : {},
-        tabIndex: -1,
-        ...tagProps
-      });
+      return /* @__PURE__ */ jsx(HvTag, { label: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: name }), type: "semantic", color, style: textColor != null ? {
+        color: textColor
+      } : {}, tabIndex: -1, ...tagProps });
     },
     cellStyle: {
       paddingTop: 0,
@@ -134,14 +104,7 @@ function hvSwitchColumn(col, switchLabel, falseLabel, trueLabel, switchProps) {
         value,
         row
       } = cellProps;
-      return /* @__PURE__ */ jsx(HvSwitchColumnCell, {
-        checked: value,
-        value: row.id,
-        switchLabel,
-        falseLabel,
-        trueLabel,
-        switchProps
-      });
+      return /* @__PURE__ */ jsx(HvSwitchColumnCell, { checked: value, value: row.id, switchLabel, falseLabel, trueLabel, switchProps });
     },
     cellStyle: {
       paddingTop: 0,
@@ -159,16 +122,10 @@ function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, onChange) {
         column
       } = cellProps;
       const dsbld = value.length < 1;
-      return /* @__PURE__ */ jsx(HvDropdownColumnCell, {
-        values: value,
-        placeholder: dsbld ? disabledPlaceholder : placeholder,
-        onChange: (val) => onChange == null ? void 0 : onChange(row.id, val),
-        disabled: dsbld,
-        dropdownProps: {
-          "aria-labelledby": setId(id, column.id) || column.id || id
-          // TODO - to be reviewed because it doesn't make much sense
-        }
-      });
+      return /* @__PURE__ */ jsx(HvDropdownColumnCell, { values: value, placeholder: dsbld ? disabledPlaceholder : placeholder, onChange: (val) => onChange == null ? void 0 : onChange(row.id, val), disabled: dsbld, dropdownProps: {
+        "aria-labelledby": setId(id, column.id) || column.id || id
+        // TODO - to be reviewed because it doesn't make much sense
+      } });
     },
     cellStyle: {
       paddingTop: 0,
@@ -187,16 +144,9 @@ function hvProgressColumn(col, getPartial, getTotal, color) {
       const partial = (getPartial == null ? void 0 : getPartial(row)) || 0;
       const total = getTotal == null ? void 0 : getTotal(row);
       if (total) {
-        return /* @__PURE__ */ jsx(HvProgressColumnCell, {
-          partial,
-          total,
-          color,
-          "aria-labelledby": column.id
-        });
+        return /* @__PURE__ */ jsx(HvProgressColumnCell, { partial, total, color, "aria-labelledby": column.id });
       }
-      return /* @__PURE__ */ jsx(Fragment, {
-        children: "—"
-      });
+      return /* @__PURE__ */ jsx(Fragment, { children: "—" });
     },
     cellStyle: {
       paddingTop: 0,

package/dist/esm/components/Table/renderers/renderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.js","sources":["../../../../../src/components/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"@core/components/OverflowTooltip\";\nimport { HvBaseSwitchProps } from \"@core/components/BaseSwitch\";\nimport { HvListValue } from \"@core/components/List\";\n\nimport {\n  HvTableHeaderRenderer,\n  HvCellProps,\n  HvTableColumnConfig,\n  HvRowInstance,\n} from \"../hooks/useTable\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { hvStringFallback, hvNumberFallback } from \"../utils\";\n\nexport function hvTextColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  overflowTooltipProps: Omit<HvOverflowTooltipProps, \"data\"> = {}\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvOverflowTooltip\n        data={hvStringFallback(value)}\n        {...overflowTooltipProps}\n      />\n    ),\n    sortType: \"alphanumeric\",\n    ...col,\n  };\n}\n\nexport function hvNumberColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(col: HvTableColumnConfig<D, H>): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => <>{hvNumberFallback(value)}</>,\n    align: \"right\",\n    sortType: \"number\",\n    ...col,\n  };\n}\n\nexport function hvDateColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  dateFormat?: string\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvDateColumnCell date={value} dateFormat={dateFormat} />\n    ),\n    sortType: \"alphanumeric\",\n    sortDescFirst: true,\n    ...col,\n  };\n}\n\nexport function hvExpandColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  expandRowButtonAriaLabel: string,\n  collapseRowButtonAriaLabel: string,\n  getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean,\n  ExpandedIcon: React.ReactNode = <DropUpXS />,\n  CollapsedIcon: React.ReactNode = <DropDownXS />\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      const expandedProps = row.getToggleRowExpandedProps?.();\n\n      const hasContent = getCanRowExpand?.(row) ?? true;\n\n      return (\n        <ClassNames>\n          {({ css }) => (\n            <>\n              {hasContent && (\n                <HvButton\n                  icon\n                  aria-label={\n                    row.isExpanded\n                      ? collapseRowButtonAriaLabel\n                      : expandRowButtonAriaLabel\n                  }\n                  aria-expanded={row.isExpanded}\n                  onClick={expandedProps?.onClick}\n                  classes={{\n                    root: css({\n                      position: \"absolute\",\n                      left: 0,\n                      top: \"50%\",\n                      transform: \"translateY(-50%)\",\n                    }),\n                  }}\n                >\n                  {row.isExpanded ? ExpandedIcon : CollapsedIcon}\n                </HvButton>\n              )}\n\n              <HvOverflowTooltip data={hvStringFallback(value)} />\n            </>\n          )}\n        </ClassNames>\n      );\n    },\n    sortType: \"alphanumeric\",\n    cellStyle: {\n      position: \"relative\",\n    },\n    ...col,\n  };\n}\n\nexport function hvTagColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  A extends object = Record<string, unknown>\n>(\n  col: HvTableColumnConfig<D, H>,\n  valueDataKey: keyof A,\n  colorDataKey: keyof A,\n  textColorDataKey: keyof A,\n  fromRowData: boolean = false,\n  tagProps?: HvTagProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      if (!value) {\n        return <>—</>;\n      }\n\n      const {\n        [valueDataKey]: name,\n        [colorDataKey]: color,\n        [textColorDataKey]: textColor,\n      } = fromRowData ? row.original : value;\n\n      return (\n        <HvTag\n          label={<HvTypography variant=\"body\">{name}</HvTypography>}\n          type=\"semantic\"\n          color={color}\n          style={textColor != null ? { color: textColor } : {}}\n          tabIndex={-1}\n          {...tagProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\n// TODO - Review accessibility on the next renderers because they all differ\n\nexport function hvSwitchColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  switchLabel: string,\n  falseLabel?: string,\n  trueLabel?: string,\n  switchProps?: HvBaseSwitchProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      return (\n        <HvSwitchColumnCell\n          checked={value}\n          value={row.id}\n          switchLabel={switchLabel}\n          falseLabel={falseLabel}\n          trueLabel={trueLabel}\n          switchProps={switchProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvDropdownColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  id: string | undefined,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const dsbld = value.length < 1;\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={dsbld ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val)}\n          disabled={dsbld}\n          dropdownProps={{\n            \"aria-labelledby\": setId(id, column.id) || column.id || id, // TODO - to be reviewed because it doesn't make much sense\n          }}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvProgressColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  getPartial?: (row: HvRowInstance<D, H>) => number,\n  getTotal?: (row: HvRowInstance<D, H>) => number,\n  color?: \"primary\" | \"secondary\"\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { row, column } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell\n            partial={partial}\n            total={total}\n            color={color}\n            aria-labelledby={column.id}\n          />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":["hvTextColumn","col","overflowTooltipProps","Cell","value","HvOverflowTooltip","data","hvStringFallback","sortType","hvNumberColumn","_Fragment","children","hvNumberFallback","align","hvDateColumn","dateFormat","HvDateColumnCell","date","sortDescFirst","hvExpandColumn","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","getCanRowExpand","ExpandedIcon","DropUpXS","CollapsedIcon","_jsx","DropDownXS","cellProps","row","expandedProps","getToggleRowExpandedProps","hasContent","ClassNames","css","HvButton","icon","isExpanded","onClick","classes","root","position","left","top","transform","cellStyle","hvTagColumn","valueDataKey","colorDataKey","textColorDataKey","fromRowData","tagProps","name","color","textColor","original","HvTag","label","HvTypography","variant","type","style","tabIndex","paddingTop","paddingBottom","hvSwitchColumn","switchLabel","falseLabel","trueLabel","switchProps","HvSwitchColumnCell","checked","id","hvDropdownColumn","placeholder","disabledPlaceholder","onChange","column","dsbld","length","HvDropdownColumnCell","values","val","disabled","dropdownProps","setId","hvProgressColumn","getPartial","getTotal","partial","total","HvProgressColumnCell"],"mappings":"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"}
+{"version":3,"file":"renderers.js","sources":["../../../../../src/components/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"@core/components/OverflowTooltip\";\nimport { HvBaseSwitchProps } from \"@core/components/BaseSwitch\";\nimport { HvListValue } from \"@core/components/List\";\n\nimport {\n  HvTableHeaderRenderer,\n  HvCellProps,\n  HvTableColumnConfig,\n  HvRowInstance,\n} from \"../hooks/useTable\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { hvStringFallback, hvNumberFallback } from \"../utils\";\n\nexport function hvTextColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  overflowTooltipProps: Omit<HvOverflowTooltipProps, \"data\"> = {}\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvOverflowTooltip\n        data={hvStringFallback(value)}\n        {...overflowTooltipProps}\n      />\n    ),\n    sortType: \"alphanumeric\",\n    ...col,\n  };\n}\n\nexport function hvNumberColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(col: HvTableColumnConfig<D, H>): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => <>{hvNumberFallback(value)}</>,\n    align: \"right\",\n    sortType: \"number\",\n    ...col,\n  };\n}\n\nexport function hvDateColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  dateFormat?: string\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvDateColumnCell date={value} dateFormat={dateFormat} />\n    ),\n    sortType: \"alphanumeric\",\n    sortDescFirst: true,\n    ...col,\n  };\n}\n\nexport function hvExpandColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  expandRowButtonAriaLabel: string,\n  collapseRowButtonAriaLabel: string,\n  getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean,\n  ExpandedIcon: React.ReactNode = <DropUpXS />,\n  CollapsedIcon: React.ReactNode = <DropDownXS />\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      const expandedProps = row.getToggleRowExpandedProps?.();\n\n      const hasContent = getCanRowExpand?.(row) ?? true;\n\n      return (\n        <ClassNames>\n          {({ css }) => (\n            <>\n              {hasContent && (\n                <HvButton\n                  icon\n                  aria-label={\n                    row.isExpanded\n                      ? collapseRowButtonAriaLabel\n                      : expandRowButtonAriaLabel\n                  }\n                  aria-expanded={row.isExpanded}\n                  onClick={expandedProps?.onClick}\n                  classes={{\n                    root: css({\n                      position: \"absolute\",\n                      left: 0,\n                      top: \"50%\",\n                      transform: \"translateY(-50%)\",\n                    }),\n                  }}\n                >\n                  {row.isExpanded ? ExpandedIcon : CollapsedIcon}\n                </HvButton>\n              )}\n\n              <HvOverflowTooltip data={hvStringFallback(value)} />\n            </>\n          )}\n        </ClassNames>\n      );\n    },\n    sortType: \"alphanumeric\",\n    cellStyle: {\n      position: \"relative\",\n    },\n    ...col,\n  };\n}\n\nexport function hvTagColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  A extends object = Record<string, unknown>\n>(\n  col: HvTableColumnConfig<D, H>,\n  valueDataKey: keyof A,\n  colorDataKey: keyof A,\n  textColorDataKey: keyof A,\n  fromRowData: boolean = false,\n  tagProps?: HvTagProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      if (!value) {\n        return <>—</>;\n      }\n\n      const {\n        [valueDataKey]: name,\n        [colorDataKey]: color,\n        [textColorDataKey]: textColor,\n      } = fromRowData ? row.original : value;\n\n      return (\n        <HvTag\n          label={<HvTypography variant=\"body\">{name}</HvTypography>}\n          type=\"semantic\"\n          color={color}\n          style={textColor != null ? { color: textColor } : {}}\n          tabIndex={-1}\n          {...tagProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\n// TODO - Review accessibility on the next renderers because they all differ\n\nexport function hvSwitchColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  switchLabel: string,\n  falseLabel?: string,\n  trueLabel?: string,\n  switchProps?: HvBaseSwitchProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      return (\n        <HvSwitchColumnCell\n          checked={value}\n          value={row.id}\n          switchLabel={switchLabel}\n          falseLabel={falseLabel}\n          trueLabel={trueLabel}\n          switchProps={switchProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvDropdownColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  id: string | undefined,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const dsbld = value.length < 1;\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={dsbld ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val)}\n          disabled={dsbld}\n          dropdownProps={{\n            \"aria-labelledby\": setId(id, column.id) || column.id || id, // TODO - to be reviewed because it doesn't make much sense\n          }}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvProgressColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  getPartial?: (row: HvRowInstance<D, H>) => number,\n  getTotal?: (row: HvRowInstance<D, H>) => number,\n  color?: \"primary\" | \"secondary\"\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { row, column } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell\n            partial={partial}\n            total={total}\n            color={color}\n            aria-labelledby={column.id}\n          />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":["hvTextColumn","col","overflowTooltipProps","Cell","value","hvStringFallback","sortType","hvNumberColumn","hvNumberFallback","align","hvDateColumn","dateFormat","sortDescFirst","hvExpandColumn","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","getCanRowExpand","ExpandedIcon","CollapsedIcon","cellProps","row","expandedProps","getToggleRowExpandedProps","hasContent","css","isExpanded","onClick","root","position","left","top","transform","cellStyle","hvTagColumn","valueDataKey","colorDataKey","textColorDataKey","fromRowData","tagProps","name","color","textColor","original","paddingTop","paddingBottom","hvSwitchColumn","switchLabel","falseLabel","trueLabel","switchProps","id","hvDropdownColumn","placeholder","disabledPlaceholder","onChange","column","dsbld","length","val","setId","hvProgressColumn","getPartial","getTotal","partial","total"],"mappings":";;;;;;;;;;;;;AA2BO,SAASA,aAIdC,KACAC,uBAA6D,IAClC;AACpB,SAAA;AAAA,IACLC,MAAMA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACN,mBACC,EAAA,MAAMC,iBAAiBD,KAAK,GAC5B,GAAIF,sBAEP;AAAA,IACDI,UAAU;AAAA,IACV,GAAGL;AAAAA,EAAAA;AAEP;AAEO,SAASM,eAGdN,KAA2D;AACpD,SAAA;AAAA,IACLE,MAAMA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,MAA+B,oBAAA,UAAA,EAAGI,UAAiBJ,iBAAAA,KAAK,GAAE;AAAA,IACnEK,OAAO;AAAA,IACPH,UAAU;AAAA,IACV,GAAGL;AAAAA,EAAAA;AAEP;AAEgBS,SAAAA,aAIdT,KACAU,YAC2B;AACpB,SAAA;AAAA,IACLR,MAAMA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,MACP,oBAAC,kBAAiB,EAAA,MAAMA,OAAO,WAChC,CAAA;AAAA,IACDE,UAAU;AAAA,IACVM,eAAe;AAAA,IACf,GAAGX;AAAAA,EAAAA;AAEP;AAEO,SAASY,eAIdZ,KACAa,0BACAC,4BACAC,iBACAC,eAAiC,oBAAA,UAAA,CAAA,CAAW,GAC5CC,gBAAkC,oBAAA,YAAA,CAAa,CAAA,GACpB;AACpB,SAAA;AAAA,IACLf,MAAMA,CAACgB,cAAiC;;AAChC,YAAA;AAAA,QAAEf;AAAAA,QAAOgB;AAAAA,MAAQD,IAAAA;AACjBE,YAAAA,iBAAgBD,SAAIE,8BAAJF;AAEhBG,YAAAA,cAAaP,mDAAkBI,SAAQ;AAG3C,aAAA,oBAAC,cACE,UAAC,CAAA;AAAA,QAAEI;AAAAA,MAAAA,MAECD,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,QAAAA,cACE,oBAAA,UAAA,EACC,MAAI,MACJ,cACEH,IAAIK,aACAV,6BACAD,0BAEN,iBAAeM,IAAIK,YACnB,SAASJ,+CAAeK,SACxB,SAAS;AAAA,UACPC,MAAMH,IAAI;AAAA,YACRI,UAAU;AAAA,YACVC,MAAM;AAAA,YACNC,KAAK;AAAA,YACLC,WAAW;AAAA,UAAA,CACZ;AAAA,QAGFX,GAAAA,UAAAA,IAAIK,aAAaR,eAAeC,cACnC,CAAA;AAAA,QAGD,oBAAA,mBAAA,EAAkB,MAAMb,iBAAiBD,KAAK,EAAE,CAAA;AAAA,MAAA,EACnD,CAAA,EAEJ,CAAA;AAAA,IAEJ;AAAA,IACAE,UAAU;AAAA,IACV0B,WAAW;AAAA,MACTJ,UAAU;AAAA,IACZ;AAAA,IACA,GAAG3B;AAAAA,EAAAA;AAEP;AAEO,SAASgC,YAKdhC,KACAiC,cACAC,cACAC,kBACAC,cAAuB,OACvBC,UAC2B;AACpB,SAAA;AAAA,IACLnC,MAAMA,CAACgB,cAAiC;AAChC,YAAA;AAAA,QAAEf;AAAAA,QAAOgB;AAAAA,MAAQD,IAAAA;AACvB,UAAI,CAACf,OAAO;AACV,+CAAS,UAAC,IAAA,CAAA;AAAA,MACZ;AAEM,YAAA;AAAA,QACJ,CAAC8B,YAAY,GAAGK;AAAAA,QAChB,CAACJ,YAAY,GAAGK;AAAAA,QAChB,CAACJ,gBAAgB,GAAGK;AAAAA,MACtB,IAAIJ,cAAcjB,IAAIsB,WAAWtC;AAEjC,aACG,oBAAA,OAAA,EACC,OAAO,oBAAC,gBAAa,SAAQ,QAAQmC,UAAK,KAAA,CAAA,GAC1C,MAAK,YACL,OACA,OAAOE,aAAa,OAAO;AAAA,QAAED,OAAOC;AAAAA,MAAAA,IAAc,CAAA,GAClD,UAAU,IACNH,GAAAA,SACJ,CAAA;AAAA,IAEN;AAAA,IACAN,WAAW;AAAA,MACTW,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,IACA,GAAG3C;AAAAA,EAAAA;AAEP;AAIO,SAAS4C,eAId5C,KACA6C,aACAC,YACAC,WACAC,aAC2B;AACpB,SAAA;AAAA,IACL9C,MAAMA,CAACgB,cAAiC;AAChC,YAAA;AAAA,QAAEf;AAAAA,QAAOgB;AAAAA,MAAQD,IAAAA;AAErB,aAAA,oBAAC,oBACC,EAAA,SAASf,OACT,OAAOgB,IAAI8B,IACX,aACA,YACA,WACA,YACA,CAAA;AAAA,IAEN;AAAA,IACAlB,WAAW;AAAA,MACTW,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,IACA,GAAG3C;AAAAA,EAAAA;AAEP;AAEO,SAASkD,iBAIdlD,KACAiD,IACAE,aACAC,qBACAC,UAC2B;AACpB,SAAA;AAAA,IACLnD,MAAMA,CAACgB,cAAiC;AAChC,YAAA;AAAA,QAAEf;AAAAA,QAAOgB;AAAAA,QAAKmC;AAAAA,MAAWpC,IAAAA;AACzBqC,YAAAA,QAAQpD,MAAMqD,SAAS;AAC7B,iCACG,sBACC,EAAA,QAAQrD,OACR,aAAaoD,QAAQH,sBAAsBD,aAC3C,UAAWM,CAAAA,QAAQJ,qCAAWlC,IAAI8B,IAAIQ,MACtC,UAAUF,OACV,eAAe;AAAA,QACb,mBAAmBG,MAAMT,IAAIK,OAAOL,EAAE,KAAKK,OAAOL,MAAMA;AAAAA;AAAAA,MAE1D,EAAA,CAAA;AAAA,IAEN;AAAA,IACAlB,WAAW;AAAA,MACTW,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,IACA,GAAG3C;AAAAA,EAAAA;AAEP;AAEO,SAAS2D,iBAId3D,KACA4D,YACAC,UACAtB,OAC2B;AACpB,SAAA;AAAA,IACLrC,MAAMA,CAACgB,cAAiC;AAChC,YAAA;AAAA,QAAEC;AAAAA,QAAKmC;AAAAA,MAAWpC,IAAAA;AAClB4C,YAAAA,WAAUF,yCAAazC,SAAQ;AAC/B4C,YAAAA,QAAQF,qCAAW1C;AAEzB,UAAI4C,OAAO;AACT,mCACG,sBACC,EAAA,SACA,OACA,OACA,mBAAiBT,OAAOL,GACxB,CAAA;AAAA,MAEN;AAEA,6CAAS,UAAC,IAAA,CAAA;AAAA,IACZ;AAAA,IAEAlB,WAAW;AAAA,MACTW,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,IACA,GAAG3C;AAAAA,EAAAA;AAEP;"}

package/dist/esm/components/Tabs/Tabs.js

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { Tabs } from "@mui/material";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./Tabs.styles.js";
 import { staticClasses } from "./Tabs.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvTabs = (props) => {
   const {
     classes: classesProp,
@@ -11,18 +11,14 @@ const HvTabs = (props) => {
   const {
     classes
   } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(Tabs, {
-    classes: {
-      root: classes.root,
-      flexContainer: classes.flexContainer,
-      indicator: classes.indicator,
-      scroller: classes.scroller
-    },
-    TabIndicatorProps: {
-      children: /* @__PURE__ */ jsx("div", {})
-    },
-    ...others
-  });
+  return /* @__PURE__ */ jsx(Tabs, { classes: {
+    root: classes.root,
+    flexContainer: classes.flexContainer,
+    indicator: classes.indicator,
+    scroller: classes.scroller
+  }, TabIndicatorProps: {
+    children: /* @__PURE__ */ jsx("div", {})
+  }, ...others });
 };
 export {
   HvTabs,

package/dist/esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Tabs, TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","classesProp","others","useDefaultProps","useClasses","Tabs","root","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;;AA6BaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAa,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,UAAUJ,KAAK;AAErE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,6BACGI,MAAI;AAAA,IACHL,SAAS;AAAA,MACPM,MAAMN,QAAQM;AAAAA,MACdC,eAAeP,QAAQO;AAAAA,MACvBC,WAAWR,QAAQQ;AAAAA,MACnBC,UAAUT,QAAQS;AAAAA,IACpB;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,oBAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCV;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Tabs, TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n  /** @ignore */\n  ref?: MuiTabsProps[\"ref\"];\n  /** @ignore */\n  component?: MuiTabsProps[\"component\"];\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","classesProp","others","useDefaultProps","useClasses","root","flexContainer","indicator","scroller","children"],"mappings":";;;;;AAiCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAa,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,UAAUJ,KAAK;AAErE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAGxC,SAAA,oBAAC,QACC,SAAS;AAAA,IACPI,MAAML,QAAQK;AAAAA,IACdC,eAAeN,QAAQM;AAAAA,IACvBC,WAAWP,QAAQO;AAAAA,IACnBC,UAAUR,QAAQQ;AAAAA,KAEpB,mBAAmB;AAAA,IAAEC,8BAAW,OAAG,EAAA;AAAA,EAAA,GAC/BP,GAAAA,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Tag/Tag.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import Chip from "@mui/material/Chip";
@@ -7,7 +8,6 @@ import { CloseXS } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
 import { hasDeleteAction, getOnDeleteCallback, hasClickAction } from "./utils.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 const getColor = (customColor, type, colors) => {
   const defaultSemanticColor = theme.colors.neutral_20;
@@ -60,22 +60,11 @@ const HvTag = (props) => {
         fill: theme.colors[disabled ? disabledSemanticColor : "base_dark"]
       }
     });
-    return /* @__PURE__ */ jsx(HvButton, {
-      classes: {
-        startIcon: classes.tagButton,
-        focusVisible: classes.focusVisible,
-        root: classes.button
-      },
-      "aria-label": deleteButtonArialLabel,
-      tabIndex,
-      variant: "secondaryGhost",
-      ...deleteButtonProps,
-      children: /* @__PURE__ */ jsx(CloseXS, {
-        iconSize: "XS",
-        className: closeIconStyles,
-        color: disabled ? disabledSemanticColor : "base_dark"
-      })
-    });
+    return /* @__PURE__ */ jsx(HvButton, { classes: {
+      startIcon: classes.tagButton,
+      focusVisible: classes.focusVisible,
+      root: classes.button
+    }, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsx(CloseXS, { iconSize: "XS", className: closeIconStyles, color: disabled ? disabledSemanticColor : "base_dark" }) });
   };
   const inlineStyle = {
     ...style
@@ -87,41 +76,28 @@ const HvTag = (props) => {
     inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
   }
   const [hover, setHover] = useState(false);
-  return /* @__PURE__ */ jsx(Chip, {
-    label,
-    className: cx(classes.root, className),
-    onMouseEnter: () => {
-      setHover(!!onClick);
-    },
-    onMouseLeave: () => {
-      setHover(false);
-    },
-    style: {
-      ...disabled ? null : inlineStyle,
-      ...hover && !disabled ? {
-        boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-      } : null
-    },
-    classes: {
-      root: cx(classes.chipRoot, {
-        [classes.disabled]: disabled,
-        [classes.clickable]: !!onClick,
-        [classes.categorical]: type === "categorical",
-        [classes.categoricalFocus]: type === "categorical" && !disabled,
-        [classes.categoricalDisabled]: type === "categorical" && disabled
-      }),
-      label: classes.label,
-      deleteIcon: cx(classes.deleteIcon, {
-        [classes.disabledDeleteIcon]: disabled
-      })
-    },
-    deleteIcon: hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(),
-    onDelete: getOnDeleteCallback(disabled, onDelete),
-    onClick: disabled ? void 0 : onClick,
-    role: role || (hasClickAction(onClick) ? "button" : void 0),
-    tabIndex: hasDeleteAction(onDelete) ? void 0 : 0,
-    ...others
-  });
+  return /* @__PURE__ */ jsx(Chip, { label, className: cx(classes.root, className), onMouseEnter: () => {
+    setHover(!!onClick);
+  }, onMouseLeave: () => {
+    setHover(false);
+  }, style: {
+    ...disabled ? null : inlineStyle,
+    ...hover && !disabled ? {
+      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
+    } : null
+  }, classes: {
+    root: cx(classes.chipRoot, {
+      [classes.disabled]: disabled,
+      [classes.clickable]: !!onClick,
+      [classes.categorical]: type === "categorical",
+      [classes.categoricalFocus]: type === "categorical" && !disabled,
+      [classes.categoricalDisabled]: type === "categorical" && disabled
+    }),
+    label: classes.label,
+    deleteIcon: cx(classes.deleteIcon, {
+      [classes.disabledDeleteIcon]: disabled
+    })
+  }, deleteIcon: hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(), onDelete: getOnDeleteCallback(disabled, onDelete), onClick: disabled ? void 0 : onClick, role: role || (hasClickAction(onClick) ? "button" : void 0), tabIndex: hasDeleteAction(onDelete) ? void 0 : 0, ...others });
 };
 export {
   HvTag,

package/dist/esm/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","HvButton","startIcon","tagButton","focusVisible","root","button","variant","children","CloseXS","iconSize","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","Chip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","startIcon","tagButton","focusVisible","root","button","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}