@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

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

@@ -1,26 +1,9 @@
-import _styled from "@emotion/styled/base";
-import { clsx } from "clsx";
 import { forwardRef, useRef, useMemo } from "react";
-import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../utils/transientOptions.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import TableContext from "./TableContext.js";
-import tableClasses from "./tableClasses.js";
+import { useClasses } from "./Table.styles.js";
+import { staticClasses } from "./Table.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
 const defaultComponent = "table";
 const computeTablePartComponents = (rootComponent) => {
   if (rootComponent === "table") {
@@ -42,41 +25,9 @@ const computeTablePartComponents = (rootComponent) => {
     Td: rootComponent
   };
 };
-const StyledTable = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e12hqti90"
-}, transientOptions) : _extends({}, {
-  target: "e12hqti90",
-  label: "StyledTable"
-}, transientOptions))(({
-  $stickyHeader,
-  $stickyColumns,
-  $listrow
-}) => ({
-  position: "relative",
-  width: "100%",
-  ...theme.typography.body,
-  "table&": {
-    borderSpacing: 0
-  },
-  "& caption": {
-    ...theme.typography.body,
-    padding: theme.space.xs,
-    textAlign: "left",
-    captionSide: "bottom"
-  },
-  ...$stickyHeader && {},
-  ...$stickyColumns && {
-    backgroundColor: theme.colors.atmo2
-  },
-  ...$listrow && {
-    "table&": {
-      borderSpacing: `0 ${theme.space.xs}`
-    }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdGRSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhYmxlL1RhYmxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsc3ggfSBmcm9tIFwiY2xzeFwiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHtcbiAgQ1NTUHJvcGVydGllcyxcbiAgZm9yd2FyZFJlZixcbiAgVGFibGVIVE1MQXR0cmlidXRlcyxcbiAgdXNlTWVtbyxcbiAgdXNlUmVmLFxufSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IHVzZURlZmF1bHRQcm9wcyB9IGZyb20gXCJAY29yZS9ob29rcy91c2VEZWZhdWx0UHJvcHNcIjtcblxuaW1wb3J0IFRhYmxlQ29udGV4dCBmcm9tIFwiLi9UYWJsZUNvbnRleHRcIjtcbmltcG9ydCB0YWJsZUNsYXNzZXMsIHsgSHZUYWJsZUNsYXNzZXMgfSBmcm9tIFwiLi90YWJsZUNsYXNzZXNcIjtcblxuZXhwb3J0IHR5cGUgSHZUYWJsZVZhcmlhbnQgPSBcImxpc3Ryb3dcIiB8IFwiZGVmYXVsdFwiO1xuZXhwb3J0IHR5cGUgSHZUYWJsZUNlbGxBbGlnbiA9XG4gIHwgXCJjZW50ZXJcIlxuICB8IFwiaW5oZXJpdFwiXG4gIHwgXCJqdXN0aWZ5XCJcbiAgfCBcImxlZnRcIlxuICB8IFwicmlnaHRcIjtcbmV4cG9ydCB0eXBlIEh2VGFibGVDZWxsVHlwZSA9IFwiYm9keVwiIHwgXCJmb290ZXJcIiB8IFwiaGVhZFwiO1xuZXhwb3J0IHR5cGUgSHZUYWJsZUNlbGxWYXJpYW50ID1cbiAgfCBcImNoZWNrYm94XCJcbiAgfCBcImV4cGFuZFwiXG4gIHwgXCJhY3Rpb25zXCJcbiAgfCBcImRlZmF1bHRcIlxuICB8IFwibm9uZVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIEh2VGFibGVQcm9wcyBleHRlbmRzIFRhYmxlSFRNTEF0dHJpYnV0ZXM8SFRNTFRhYmxlRWxlbWVudD4ge1xuICAvKipcbiAgICogVGhlIGNvbXBvbmVudCB1c2VkIGZvciB0aGUgcm9vdCBub2RlLiBFaXRoZXIgYSBzdHJpbmcgdG8gdXNlIGEgSFRNTCBlbGVtZW50IG9yIGEgY29tcG9uZW50LlxuICAgKiBEZWZhdWx0cyB0byBgdGFibGVgLlxuICAgKlxuICAgKiBXaGVuIHVzaW5nIG5vbi10YWJsZSBlbGVtZW50cywgbGF5b3V0IGlzIHVwIHRvIHRoZSBkZXZlbG9wZXIgdXNpbmcgdGhlIGNvbXBvbmVudC5cbiAgICovXG4gIGNvbXBvbmVudD86IFJlYWN0LkVsZW1lbnRUeXBlO1xuICAvKiogQ29udGVudCB0byBiZSByZW5kZXJlZCAqL1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICAvKiogV2hldGhlciB0aGUgYEh2VGFibGVgIGhhcyBhIHN0aWNreSBoZWFkZXIgcm93LiAqL1xuICBzdGlja3lIZWFkZXI/OiBib29sZWFuO1xuICAvKiogV2hldGhlciB0aGUgYEh2VGFibGVgIGhhcyBzdGlja3kgY29sdW1ucy4gKi9cbiAgc3RpY2t5Q29sdW1ucz86IGJvb2xlYW47XG4gIC8qKiBXaGV0aGVyIHRoZSBgSHZUYWJsZWAgaGFzIHRoZSBsaXN0IHJvdyBzdHlsZXMgb3IgdGhlIGRlZmF1bHQuICovXG4gIHZhcmlhbnQ/OiBIdlRhYmxlVmFyaWFudDtcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGNvbXBvbmVudC4gKi9cbiAgY2xhc3Nlcz86IEh2VGFibGVDbGFzc2VzO1xufVxuXG5jb25zdCBkZWZhdWx0Q29tcG9uZW50ID0gXCJ0YWJsZVwiO1xuXG5jb25zdCBjb21wdXRlVGFibGVQYXJ0Q29tcG9uZW50cyA9IChyb290Q29tcG9uZW50KSA9PiB7XG4gIGlmIChyb290Q29tcG9uZW50ID09PSBcInRhYmxlXCIpIHtcbiAgICByZXR1cm4ge1xuICAgICAgVGFibGU6IFwidGFibGVcIixcbiAgICAgIFRIZWFkOiBcInRoZWFkXCIsXG4gICAgICBUQm9keTogXCJ0Ym9keVwiLFxuICAgICAgVHI6IFwidHJcIixcbiAgICAgIFRoOiBcInRoXCIsXG4gICAgICBUZDogXCJ0ZFwiLFxuICAgIH07XG4gIH1cblxuICByZXR1cm4ge1xuICAgIFRhYmxlOiByb290Q29tcG9uZW50LFxuICAgIFRIZWFkOiByb290Q29tcG9uZW50LFxuICAgIFRCb2R5OiByb290Q29tcG9uZW50LFxuICAgIFRyOiByb290Q29tcG9uZW50LFxuICAgIFRoOiByb290Q29tcG9uZW50LFxuICAgIFRkOiByb290Q29tcG9uZW50LFxuICB9O1xufTtcblxuY29uc3QgU3R5bGVkVGFibGUgPSAoYzogYW55KSA9PlxuICBzdHlsZWQoXG4gICAgYyxcbiAgICB0cmFuc2llbnRPcHRpb25zXG4gICkoXG4gICAgKHtcbiAgICAgICRzdGlja3lIZWFkZXIsXG4gICAgICAkc3RpY2t5Q29sdW1ucyxcbiAgICAgICRsaXN0cm93LFxuICAgIH06IHtcbiAgICAgICRzdGlja3lIZWFkZXI6IGJvb2xlYW47XG4gICAgICAkc3RpY2t5Q29sdW1uczogYm9vbGVhbjtcbiAgICAgICRsaXN0cm93OiBib29sZWFuO1xuICAgIH0pID0+ICh7XG4gICAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuXG4gICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5ib2R5IGFzIENTU1Byb3BlcnRpZXMpLFxuXG4gICAgICBcInRhYmxlJlwiOiB7XG4gICAgICAgIGJvcmRlclNwYWNpbmc6IDAsXG4gICAgICB9LFxuXG4gICAgICBcIiYgY2FwdGlvblwiOiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICAgICAgICB0ZXh0QWxpZ246IFwibGVmdFwiLFxuICAgICAgICBjYXB0aW9uU2lkZTogXCJib3R0b21cIixcbiAgICAgIH0sXG5cbiAgICAgIC4uLigkc3RpY2t5SGVhZGVyICYmIHt9KSxcbiAgICAgIC4uLigkc3RpY2t5Q29sdW1ucyAmJiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8yLFxuICAgICAgfSksXG4gICAgICAuLi4oJGxpc3Ryb3cgJiYge1xuICAgICAgICBcInRhYmxlJlwiOiB7XG4gICAgICAgICAgYm9yZGVyU3BhY2luZzogYDAgJHt0aGVtZS5zcGFjZS54c31gLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgfSlcbiAgKTtcblxuLyoqXG4gKiBBIHRhYmxlIGdhdGhlcnMgcmVsYXRpb25hbCBkYXRhLiBJdCBkaXNwbGF5cyB2YWx1ZXMgYXJyYW5nZWQgdG8gYWxsb3cgcXVpY2sgbnVtZXJpY2FsIGFuYWx5c2lzIGxpa2UgY29tcGFyaXNvbiBhbmQgc29ydGluZy5cbiAqXG4gKiBUaGUgKipIdlRhYmxlKiogY29tcG9uZW50IG9mZmVycyBhIHNldCBvZiBIVE1MLWVxdWl2YWxlbnQgZWxlbWVudHMsICoqc3R5bGVkIHRvIERlc2lnbiBTeXN0ZW0ncyBzcGVjaWZpY2F0aW9uKiosXG4gKiBmb3IgYnVpbGRpbmcgdGFibGVzLlxuICogWW91IGNhbiByZWx5IG9uIHRoZXNlICoqZWxlbWVudHMqKiB3aGVuIHlvdXIgdGFibGUgZG9lc27igJl0IGhhdmUgbWFueSBpbnRlcmFjdGlvbnMgb3IgeW91IG5lZWQgaXQgdG8gYmUgdmVyeSBsaWdodHdlaWdodC5cbiAqXG4gKiBGb3IgYmV0dGVyIGRhdGEgaGFuZGxpbmcgYW5kICoqYWR2YW5jZWQgZmVhdHVyZXMqKiB3ZSByZWNvbW1lbmQgdGhlIHVzZSBvZiB0aGUgdXRpbGl0eSBob29rcyBjb2xsZWN0aW9uLlxuICogU2VlIHRoZSA8YSBocmVmPVwiP2lkPWd1aWRlcy10YWJsZS10YWJsZS1ob29rcy0tdXNlLWh2LWhvb2tzJnZpZXdNb2RlPWRvY3NcIiB0YXJnZXQ9XCJfc2VsZlwiPlRhYmxlIEhvb2tzIGRvY3VtZW50YXRpb248L2E+IGZvciBtb3JlIGRldGFpbHMuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlRhYmxlID0gZm9yd2FyZFJlZjxIVE1MRWxlbWVudCwgSHZUYWJsZVByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgY2xhc3NlcyxcbiAgICBjbGFzc05hbWUsXG4gICAgY29tcG9uZW50ID0gZGVmYXVsdENvbXBvbmVudCxcbiAgICBzdGlja3lIZWFkZXIgPSBmYWxzZSxcbiAgICBzdGlja3lDb2x1bW5zID0gZmFsc2UsXG4gICAgdmFyaWFudCA9IFwiZGVmYXVsdFwiLFxuICAgIC4uLm90aGVyc1xuICB9ID0gdXNlRGVmYXVsdFByb3BzKFwiSHZUYWJsZVwiLCBwcm9wcyk7XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZihyZWYpO1xuXG4gIGNvbnN0IGNvbXBvbmVudHMgPSB1c2VNZW1vKFxuICAgICgpID0+IGNvbXB1dGVUYWJsZVBhcnRDb21wb25lbnRzKGNvbXBvbmVudCksXG4gICAgW2NvbXBvbmVudF1cbiAgKTtcblxuICBjb25zdCB0YWJsZUNvbnRleHQgPSB1c2VNZW1vKFxuICAgICgpID0+ICh7IGNvbXBvbmVudHMsIHZhcmlhbnQsIGNvbnRhaW5lclJlZiB9KSxcbiAgICBbY29tcG9uZW50cywgdmFyaWFudCwgY29udGFpbmVyUmVmXVxuICApO1xuXG4gIGNvbnN0IFRhYmxlID0gdXNlTWVtbygoKSA9PiBTdHlsZWRUYWJsZShjb21wb25lbnRzLlRhYmxlKSwgW2NvbXBvbmVudHNdKTtcblxuICByZXR1cm4gKFxuICAgIDxUYWJsZUNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3RhYmxlQ29udGV4dH0+XG4gICAgICA8VGFibGVcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHJvbGU9e2NvbXBvbmVudCA9PT0gZGVmYXVsdENvbXBvbmVudCA/IG51bGwgOiBcInRhYmxlXCJ9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgICB0YWJsZUNsYXNzZXMucm9vdCxcbiAgICAgICAgICBjbGFzc2VzPy5yb290LFxuICAgICAgICAgIHN0aWNreUhlYWRlciAmJlxuICAgICAgICAgICAgY2xzeCh0YWJsZUNsYXNzZXMuc3RpY2t5SGVhZGVyLCBjbGFzc2VzPy5zdGlja3lIZWFkZXIpLFxuICAgICAgICAgIHN0aWNreUNvbHVtbnMgJiZcbiAgICAgICAgICAgIGNsc3godGFibGVDbGFzc2VzLnN0aWNreUNvbHVtbnMsIGNsYXNzZXM/LnN0aWNreUNvbHVtbnMpLFxuICAgICAgICAgIHZhcmlhbnQgPT09IFwibGlzdHJvd1wiICYmIGNsc3godGFibGVDbGFzc2VzLmxpc3RSb3csIGNsYXNzZXM/Lmxpc3RSb3cpLFxuICAgICAgICAgIGNsYXNzTmFtZVxuICAgICAgICApfVxuICAgICAgICAkc3RpY2t5Q29sdW1ucz17c3RpY2t5Q29sdW1uc31cbiAgICAgICAgJHN0aWNreUhlYWRlcj17c3RpY2t5SGVhZGVyfVxuICAgICAgICAkbGlzdHJvdz17dmFyaWFudCA9PT0gXCJsaXN0cm93XCJ9XG4gICAgICAgIHsuLi5vdGhlcnN9XG4gICAgICAvPlxuICAgIDwvVGFibGVDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufSk7XG4iXX0= */");
 const HvTable = forwardRef((props, ref) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     component = defaultComponent,
     stickyHeader = false,
@@ -84,6 +35,10 @@ const HvTable = forwardRef((props, ref) => {
     variant = "default",
     ...others
   } = useDefaultProps("HvTable", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const containerRef = useRef(ref);
   const components = useMemo(() => computeTablePartComponents(component), [component]);
   const tableContext = useMemo(() => ({
@@ -91,21 +46,23 @@ const HvTable = forwardRef((props, ref) => {
     variant,
     containerRef
   }), [components, variant, containerRef]);
-  const Table = useMemo(() => StyledTable(components.Table), [components]);
+  const Table = useMemo(() => components.Table, [components]);
   return /* @__PURE__ */ jsx(TableContext.Provider, {
     value: tableContext,
     children: /* @__PURE__ */ jsx(Table, {
       ref,
       role: component === defaultComponent ? null : "table",
-      className: clsx(tableClasses.root, classes == null ? void 0 : classes.root, stickyHeader && clsx(tableClasses.stickyHeader, classes == null ? void 0 : classes.stickyHeader), stickyColumns && clsx(tableClasses.stickyColumns, classes == null ? void 0 : classes.stickyColumns), variant === "listrow" && clsx(tableClasses.listRow, classes == null ? void 0 : classes.listRow), className),
-      $stickyColumns: stickyColumns,
-      $stickyHeader: stickyHeader,
-      $listrow: variant === "listrow",
+      className: cx(classes.root, {
+        [classes.stickyHeader]: stickyHeader,
+        [classes.stickyColumns]: stickyColumns,
+        [classes.listRow]: variant === "listrow"
+      }, className),
       ...others
     })
   });
 });
 export {
-  HvTable
+  HvTable,
+  staticClasses as tableClasses
 };
 //# sourceMappingURL=Table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport styled from \"@emotion/styled\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TableHTMLAttributes,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport TableContext from \"./TableContext\";\nimport tableClasses, { HvTableClasses } from \"./tableClasses\";\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n  | \"center\"\n  | \"inherit\"\n  | \"justify\"\n  | \"left\"\n  | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n  | \"checkbox\"\n  | \"expand\"\n  | \"actions\"\n  | \"default\"\n  | \"none\";\n\nexport interface HvTableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `table`.\n   *\n   * When using non-table elements, layout is up to the developer using the component.\n   */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** Whether the `HvTable` has a sticky header row. */\n  stickyHeader?: boolean;\n  /** Whether the `HvTable` has sticky columns. */\n  stickyColumns?: boolean;\n  /** Whether the `HvTable` has the list row styles or the default. */\n  variant?: HvTableVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent) => {\n  if (rootComponent === \"table\") {\n    return {\n      Table: \"table\",\n      THead: \"thead\",\n      TBody: \"tbody\",\n      Tr: \"tr\",\n      Th: \"th\",\n      Td: \"td\",\n    };\n  }\n\n  return {\n    Table: rootComponent,\n    THead: rootComponent,\n    TBody: rootComponent,\n    Tr: rootComponent,\n    Th: rootComponent,\n    Td: rootComponent,\n  };\n};\n\nconst StyledTable = (c: any) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $stickyHeader,\n      $stickyColumns,\n      $listrow,\n    }: {\n      $stickyHeader: boolean;\n      $stickyColumns: boolean;\n      $listrow: boolean;\n    }) => ({\n      position: \"relative\",\n      width: \"100%\",\n\n      ...(theme.typography.body as CSSProperties),\n\n      \"table&\": {\n        borderSpacing: 0,\n      },\n\n      \"& caption\": {\n        ...(theme.typography.body as CSSProperties),\n        padding: theme.space.xs,\n        textAlign: \"left\",\n        captionSide: \"bottom\",\n      },\n\n      ...($stickyHeader && {}),\n      ...($stickyColumns && {\n        backgroundColor: theme.colors.atmo2,\n      }),\n      ...($listrow && {\n        \"table&\": {\n          borderSpacing: `0 ${theme.space.xs}`,\n        },\n      }),\n    })\n  );\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n  const {\n    classes,\n    className,\n    component = defaultComponent,\n    stickyHeader = false,\n    stickyColumns = false,\n    variant = \"default\",\n    ...others\n  } = useDefaultProps(\"HvTable\", props);\n  const containerRef = useRef(ref);\n\n  const components = useMemo(\n    () => computeTablePartComponents(component),\n    [component]\n  );\n\n  const tableContext = useMemo(\n    () => ({ components, variant, containerRef }),\n    [components, variant, containerRef]\n  );\n\n  const Table = useMemo(() => StyledTable(components.Table), [components]);\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      <Table\n        ref={ref}\n        role={component === defaultComponent ? null : \"table\"}\n        className={clsx(\n          tableClasses.root,\n          classes?.root,\n          stickyHeader &&\n            clsx(tableClasses.stickyHeader, classes?.stickyHeader),\n          stickyColumns &&\n            clsx(tableClasses.stickyColumns, classes?.stickyColumns),\n          variant === \"listrow\" && clsx(tableClasses.listRow, classes?.listRow),\n          className\n        )}\n        $stickyColumns={stickyColumns}\n        $stickyHeader={stickyHeader}\n        $listrow={variant === \"listrow\"}\n        {...others}\n      />\n    </TableContext.Provider>\n  );\n});\n"],"names":["defaultComponent","computeTablePartComponents","rootComponent","Table","THead","TBody","Tr","Th","Td","StyledTable","c","process","env","NODE_ENV","_extends","target","transientOptions","label","$stickyHeader","$stickyColumns","$listrow","position","width","theme","typography","body","borderSpacing","padding","space","xs","textAlign","captionSide","backgroundColor","colors","atmo2","HvTable","forwardRef","props","ref","classes","className","component","stickyHeader","stickyColumns","variant","others","useDefaultProps","containerRef","useRef","components","useMemo","tableContext","_jsx","TableContext","Provider","value","children","role","clsx","tableClasses","root","listRow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAMA,mBAAmB;AAEzB,MAAMC,6BAA8BC,CAAkB,kBAAA;AACpD,MAAIA,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACLC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACLL,OAAOD;AAAAA,IACPE,OAAOF;AAAAA,IACPG,OAAOH;AAAAA,IACPI,IAAIJ;AAAAA,IACJK,IAAIL;AAAAA,IACJM,IAAIN;AAAAA,EAAAA;AAER;AAEA,MAAMO,cAAcA,CAACC,MAEjBA,wBAAAA,GAACC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACDC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,UAAU;AAAA,EACVC,OAAO;AAAA,EAEP,GAAIC,MAAMC,WAAWC;AAAAA,EAErB,UAAU;AAAA,IACRC,eAAe;AAAA,EACjB;AAAA,EAEA,aAAa;AAAA,IACX,GAAIH,MAAMC,WAAWC;AAAAA,IACrBE,SAASJ,MAAMK,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,aAAa;AAAA,EACf;AAAA,EAEA,GAAIb,iBAAiB,CAAC;AAAA,EACtB,GAAIC,kBAAkB;AAAA,IACpBa,iBAAiBT,MAAMU,OAAOC;AAAAA,EAChC;AAAA,EACA,GAAId,YAAY;AAAA,IACd,UAAU;AAAA,MACRM,eAAgB,KAAIH,MAAMK,MAAMC;AAAAA,IAClC;AAAA,EACF;AACF,IAAElB,QAAAC,IAAAC,8jOACJ;AAYK,MAAMsB,UAAUC,WAAsC,CAACC,OAAOC,QAAQ;AACrE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,YAAYzC;AAAAA,IACZ0C,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWT,KAAK;AAC9BU,QAAAA,eAAeC,OAAOV,GAAG;AAEzBW,QAAAA,aAAaC,QACjB,MAAMjD,2BAA2BwC,SAAS,GAC1C,CAACA,SAAS,CACZ;AAEMU,QAAAA,eAAeD,QACnB,OAAO;AAAA,IAAED;AAAAA,IAAYL;AAAAA,IAASG;AAAAA,EAC9B,IAAA,CAACE,YAAYL,SAASG,YAAY,CACpC;AAEM5C,QAAAA,QAAQ+C,QAAQ,MAAMzC,YAAYwC,WAAW9C,KAAK,GAAG,CAAC8C,UAAU,CAAC;AAGrEG,SAAAA,oBAACC,aAAaC,UAAQ;AAAA,IAACC,OAAOJ;AAAAA,IAAaK,8BACxCrD,OAAK;AAAA,MACJmC;AAAAA,MACAmB,MAAMhB,cAAczC,mBAAmB,OAAO;AAAA,MAC9CwC,WAAWkB,KACTC,aAAaC,MACbrB,mCAASqB,MACTlB,gBACEgB,KAAKC,aAAajB,cAAcH,mCAASG,YAAY,GACvDC,iBACEe,KAAKC,aAAahB,eAAeJ,mCAASI,aAAa,GACzDC,YAAY,aAAac,KAAKC,aAAaE,SAAStB,mCAASsB,OAAO,GACpErB,SACF;AAAA,MACArB,gBAAgBwB;AAAAA,MAChBzB,eAAewB;AAAAA,MACftB,UAAUwB,YAAY;AAAA,MAAU,GAC5BC;AAAAA,IAAAA,CACL;AAAA,EAAA,CACoB;AAE3B,CAAC;"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { forwardRef, TableHTMLAttributes, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TableContext from \"./TableContext\";\nimport { staticClasses, useClasses } from \"./Table.styles\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n  | \"center\"\n  | \"inherit\"\n  | \"justify\"\n  | \"left\"\n  | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n  | \"checkbox\"\n  | \"expand\"\n  | \"actions\"\n  | \"default\"\n  | \"none\";\n\nexport interface HvTableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `table`.\n   *\n   * When using non-table elements, layout is up to the developer using the component.\n   */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** Whether the `HvTable` has a sticky header row. */\n  stickyHeader?: boolean;\n  /** Whether the `HvTable` has sticky columns. */\n  stickyColumns?: boolean;\n  /** Whether the `HvTable` has the list row styles or the default. */\n  variant?: HvTableVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent) => {\n  if (rootComponent === \"table\") {\n    return {\n      Table: \"table\",\n      THead: \"thead\",\n      TBody: \"tbody\",\n      Tr: \"tr\",\n      Th: \"th\",\n      Td: \"td\",\n    };\n  }\n\n  return {\n    Table: rootComponent,\n    THead: rootComponent,\n    TBody: rootComponent,\n    Tr: rootComponent,\n    Th: rootComponent,\n    Td: rootComponent,\n  };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    component = defaultComponent,\n    stickyHeader = false,\n    stickyColumns = false,\n    variant = \"default\",\n    ...others\n  } = useDefaultProps(\"HvTable\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(ref);\n\n  const components = useMemo(\n    () => computeTablePartComponents(component),\n    [component]\n  );\n\n  const tableContext = useMemo(\n    () => ({ components, variant, containerRef }),\n    [components, variant, containerRef]\n  );\n\n  const Table = useMemo(() => components.Table, [components]);\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      <Table\n        ref={ref}\n        role={component === defaultComponent ? null : \"table\"}\n        className={cx(\n          classes.root,\n          {\n            [classes.stickyHeader]: stickyHeader,\n            [classes.stickyColumns]: stickyColumns,\n            [classes.listRow]: variant === \"listrow\",\n          },\n          className\n        )}\n        {...others}\n      />\n    </TableContext.Provider>\n  );\n});\n"],"names":["defaultComponent","computeTablePartComponents","rootComponent","Table","THead","TBody","Tr","Th","Td","HvTable","forwardRef","props","ref","classes","classesProp","className","component","stickyHeader","stickyColumns","variant","others","useDefaultProps","cx","useClasses","containerRef","useRef","components","useMemo","tableContext","_jsx","TableContext","Provider","value","children","role","root","listRow"],"mappings":";;;;;;AA+CA,MAAMA,mBAAmB;AAEzB,MAAMC,6BAA8BC,CAAkB,kBAAA;AACpD,MAAIA,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACLC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACLL,OAAOD;AAAAA,IACPE,OAAOF;AAAAA,IACPG,OAAOH;AAAAA,IACPI,IAAIJ;AAAAA,IACJK,IAAIL;AAAAA,IACJM,IAAIN;AAAAA,EAAAA;AAER;AAYO,MAAMO,UAAUC,WAAsC,CAACC,OAAOC,QAAQ;AACrE,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAYhB;AAAAA,IACZiB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWV,KAAK;AAC9B,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExCU,QAAAA,eAAeC,OAAOb,GAAG;AAEzBc,QAAAA,aAAaC,QACjB,MAAM1B,2BAA2Be,SAAS,GAC1C,CAACA,SAAS,CACZ;AAEMY,QAAAA,eAAeD,QACnB,OAAO;AAAA,IAAED;AAAAA,IAAYP;AAAAA,IAASK;AAAAA,EAC9B,IAAA,CAACE,YAAYP,SAASK,YAAY,CACpC;AAEA,QAAMrB,QAAQwB,QAAQ,MAAMD,WAAWvB,OAAO,CAACuB,UAAU,CAAC;AAGxDG,SAAAA,oBAACC,aAAaC,UAAQ;AAAA,IAACC,OAAOJ;AAAAA,IAAaK,8BACxC9B,OAAK;AAAA,MACJS;AAAAA,MACAsB,MAAMlB,cAAchB,mBAAmB,OAAO;AAAA,MAC9Ce,WAAWO,GACTT,QAAQsB,MACR;AAAA,QACE,CAACtB,QAAQI,YAAY,GAAGA;AAAAA,QACxB,CAACJ,QAAQK,aAAa,GAAGA;AAAAA,QACzB,CAACL,QAAQuB,OAAO,GAAGjB,YAAY;AAAA,SAEjCJ,SACF;AAAA,MAAE,GACEK;AAAAA,IAAAA,CACL;AAAA,EAAA,CACoB;AAE3B,CAAC;"}

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

@@ -0,0 +1,35 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTable", {
+  root: {
+    position: "relative",
+    width: "100%",
+    ...theme.typography.body,
+    "table&": {
+      borderSpacing: 0
+    },
+    "& caption": {
+      ...theme.typography.body,
+      padding: theme.space.xs,
+      textAlign: "left",
+      captionSide: "bottom"
+    }
+  },
+  stickyHeader: {},
+  stickyColumns: {
+    backgroundColor: theme.colors.atmo2
+  },
+  listRow: {
+    "table&": {
+      borderSpacing: `0 ${theme.space.xs}`
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Table.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.styles.js","sources":["../../../../src/components/Table/Table.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTable\", {\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n\n    ...theme.typography.body,\n\n    \"table&\": {\n      borderSpacing: 0,\n    },\n\n    \"& caption\": {\n      ...theme.typography.body,\n      padding: theme.space.xs,\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: { backgroundColor: theme.colors.atmo2 },\n  listRow: {\n    \"table&\": {\n      borderSpacing: `0 ${theme.space.xs}`,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","width","theme","typography","body","borderSpacing","padding","space","xs","textAlign","captionSide","stickyHeader","stickyColumns","backgroundColor","colors","atmo2","listRow"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IAEP,GAAGC,MAAMC,WAAWC;AAAAA,IAEpB,UAAU;AAAA,MACRC,eAAe;AAAA,IACjB;AAAA,IAEA,aAAa;AAAA,MACX,GAAGH,MAAMC,WAAWC;AAAAA,MACpBE,SAASJ,MAAMK,MAAMC;AAAAA,MACrBC,WAAW;AAAA,MACXC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAC,cAAc,CAAC;AAAA,EACfC,eAAe;AAAA,IAAEC,iBAAiBX,MAAMY,OAAOC;AAAAA,EAAM;AAAA,EACrDC,SAAS;AAAA,IACP,UAAU;AAAA,MACRX,eAAgB,KAAIH,MAAMK,MAAMC;AAAAA,IAClC;AAAA,EACF;AACF,CAAC;"}

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

@@ -1,36 +1,18 @@
-import _styled from "@emotion/styled/base";
-import { clsx } from "clsx";
-import { forwardRef, useContext, useRef, useMemo, Children, isValidElement } from "react";
+import { forwardRef, useContext, useRef, Children, isValidElement } from "react";
 import { useForkRef } from "../../../hooks/useForkRef.js";
-import tableBodyClasses from "./tableBodyClasses.js";
 import TableContext from "../TableContext.js";
 import TableSectionContext from "../TableSectionContext.js";
+import { useClasses } from "./TableBody.styles.js";
+import { staticClasses } from "./TableBody.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { HvFocus } from "../../Focus/Focus.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
 const tableSectionContext = {
   type: "body",
   filterClassName: "grid"
 };
 const defaultComponent = "tbody";
-const StyledTableBody = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV === "production" ? {
-  target: "e1i1hapa0"
-} : {
-  target: "e1i1hapa0",
-  label: "StyledTableBody"
-})(process.env.NODE_ENV === "production" ? {
-  name: "14jhk00",
-  styles: "background-color:inherit;position:relative;z-index:0"
-} : {
-  name: "14jhk00",
-  styles: "background-color:inherit;position:relative;z-index:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVCb2R5L1RhYmxlQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOENFIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVCb2R5L1RhYmxlQm9keS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjbHN4IH0gZnJvbSBcImNsc3hcIjtcblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCBSZWFjdCwge1xuICBDaGlsZHJlbixcbiAgZm9yd2FyZFJlZixcbiAgaXNWYWxpZEVsZW1lbnQsXG4gIHVzZUNvbnRleHQsXG4gIHVzZU1lbW8sXG4gIHVzZVJlZixcbn0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIkBjb3JlL3R5cGVzL2dlbmVyaWNcIjtcbmltcG9ydCB7IHVzZUZvcmtSZWYgfSBmcm9tIFwiQGNvcmUvaG9va3MvdXNlRm9ya1JlZlwiO1xuaW1wb3J0IHsgSHZGb2N1cyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0ZvY3VzXCI7XG5cbmltcG9ydCB0YWJsZUJvZHlDbGFzc2VzLCB7IEh2VGFibGVCb2R5Q2xhc3NlcyB9IGZyb20gXCIuL3RhYmxlQm9keUNsYXNzZXNcIjtcbmltcG9ydCBUYWJsZUNvbnRleHQgZnJvbSBcIi4uL1RhYmxlQ29udGV4dFwiO1xuaW1wb3J0IFRhYmxlU2VjdGlvbkNvbnRleHQgZnJvbSBcIi4uL1RhYmxlU2VjdGlvbkNvbnRleHRcIjtcblxuZXhwb3J0IGludGVyZmFjZSBIdlRhYmxlQm9keVByb3BzXG4gIGV4dGVuZHMgSHZCYXNlUHJvcHM8SFRNTFRhYmxlU2VjdGlvbkVsZW1lbnQsIFwiY2hpbGRyZW5cIj4ge1xuICAvKipcbiAgICogQ29udGVudCB0byBiZSByZW5kZXJlZFxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIFRoZSBjb21wb25lbnQgdXNlZCBmb3IgdGhlIHJvb3Qgbm9kZS4gRWl0aGVyIGEgc3RyaW5nIHRvIHVzZSBhIEhUTUwgZWxlbWVudCBvciBhIGNvbXBvbmVudC5cbiAgICogRGVmYXVsdHMgdG8gdGJvZHkuXG4gICAqL1xuICBjb21wb25lbnQ/OiBSZWFjdC5FbGVtZW50VHlwZTtcbiAgLyoqIFNldHMgd2hldGhlciBvciBub3QgdGhlcmUgc2hvdWxkIGJlIGFycm93IG5hdmlnYXRpb24gYmV0d2VlbiB0aGUgdGFibGUgcm93cyAqL1xuICB3aXRoTmF2aWdhdGlvbj86IGJvb2xlYW47XG4gIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gIGNsYXNzZXM/OiBIdlRhYmxlQm9keUNsYXNzZXM7XG59XG5cbmNvbnN0IHRhYmxlU2VjdGlvbkNvbnRleHQgPSB7XG4gIHR5cGU6IFwiYm9keVwiLFxuICBmaWx0ZXJDbGFzc05hbWU6IFwiZ3JpZFwiLFxufTtcblxuY29uc3QgZGVmYXVsdENvbXBvbmVudCA9IFwidGJvZHlcIjtcblxuY29uc3QgU3R5bGVkVGFibGVCb2R5ID0gKGM6IGFueSkgPT5cbiAgc3R5bGVkKGMpKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwiaW5oZXJpdFwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgekluZGV4OiAwLFxuICB9KTtcblxuLyoqXG4gKiBIdlRhYmxlQm9keSBhY3RzIGFzIGEgYHRib2R5YCBlbGVtZW50LlxuICogYEh2VGFibGVDZWxsYCBhbmQgYEh2VGFibGVSb3dgIGVsZW1lbnRzIGluIGl0IGluaGVyaXQgYm9keS1zcGVjaWZpYyBzdHlsZXNcbiAqL1xuZXhwb3J0IGNvbnN0IEh2VGFibGVCb2R5ID0gZm9yd2FyZFJlZjxIVE1MRWxlbWVudCwgSHZUYWJsZUJvZHlQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICBjbGFzc2VzLFxuICAgICAgY2xhc3NOYW1lLFxuICAgICAgY29tcG9uZW50LFxuICAgICAgY2hpbGRyZW4sXG4gICAgICB3aXRoTmF2aWdhdGlvbiA9IGZhbHNlLFxuICAgICAgLi4ub3RoZXJzXG4gICAgfSxcbiAgICBleHRlcm5hbFJlZlxuICApID0+IHtcbiAgICBjb25zdCB0YWJsZUNvbnRleHQgPSB1c2VDb250ZXh0KFRhYmxlQ29udGV4dCk7XG5cbiAgICBjb25zdCBib2R5UmVmID0gdXNlUmVmKG51bGwpO1xuXG4gICAgY29uc3QgaGFuZGxlUmVmID0gdXNlRm9ya1JlZihleHRlcm5hbFJlZiwgYm9keVJlZik7XG5cbiAgICBjb25zdCBDb21wb25lbnQgPVxuICAgICAgY29tcG9uZW50IHx8IHRhYmxlQ29udGV4dD8uY29tcG9uZW50cz8uVEJvZHkgfHwgZGVmYXVsdENvbXBvbmVudDtcblxuICAgIGNvbnN0IFRhYmxlQm9keSA9IHVzZU1lbW8oKCkgPT4gU3R5bGVkVGFibGVCb2R5KENvbXBvbmVudCksIFtDb21wb25lbnRdKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8VGFibGVTZWN0aW9uQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17dGFibGVTZWN0aW9uQ29udGV4dH0+XG4gICAgICAgIDxUYWJsZUJvZHlcbiAgICAgICAgICBjbGFzc05hbWU9e2Nsc3godGFibGVCb2R5Q2xhc3Nlcy5yb290LCBjbGFzc2VzPy5yb290LCBjbGFzc05hbWUpfVxuICAgICAgICAgIHJlZj17aGFuZGxlUmVmfVxuICAgICAgICAgIHJvbGU9e0NvbXBvbmVudCA9PT0gZGVmYXVsdENvbXBvbmVudCA/IG51bGwgOiBcInJvd2dyb3VwXCJ9XG4gICAgICAgICAgey4uLm90aGVyc31cbiAgICAgICAgPlxuICAgICAgICAgIHt3aXRoTmF2aWdhdGlvblxuICAgICAgICAgICAgPyBDaGlsZHJlbi5tYXAoY2hpbGRyZW4sIChlbGVtZW50KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKGlzVmFsaWRFbGVtZW50KGVsZW1lbnQpKSB7XG4gICAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgICA8SHZGb2N1c1xuICAgICAgICAgICAgICAgICAgICAgIGlkPXtgbXktaWQtJHtlbGVtZW50LmtleX1gfVxuICAgICAgICAgICAgICAgICAgICAgIHJvb3RSZWY9e2JvZHlSZWZ9XG4gICAgICAgICAgICAgICAgICAgICAga2V5PXtgcm93LSR7ZWxlbWVudC5rZXl9YH1cbiAgICAgICAgICAgICAgICAgICAgICBzdHJhdGVneT1cImdyaWRcIlxuICAgICAgICAgICAgICAgICAgICAgIGZpbHRlckNsYXNzPXt0YWJsZVNlY3Rpb25Db250ZXh0LmZpbHRlckNsYXNzTmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICBuYXZpZ2F0aW9uSnVtcD17MX1cbiAgICAgICAgICAgICAgICAgICAgICBmb2N1c0Rpc2FibGVkPXtmYWxzZX1cbiAgICAgICAgICAgICAgICAgICAgICBzZWxlY3RlZD17ZWxlbWVudC5wcm9wcy5zZWxlY3RlZH1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgIHtlbGVtZW50fVxuICAgICAgICAgICAgICAgICAgICA8L0h2Rm9jdXM+XG4gICAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgIDogY2hpbGRyZW59XG4gICAgICAgIDwvVGFibGVCb2R5PlxuICAgICAgPC9UYWJsZVNlY3Rpb25Db250ZXh0LlByb3ZpZGVyPlxuICAgICk7XG4gIH1cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
 const HvTableBody = forwardRef(({
-  classes,
+  classes: classesProp,
   className,
   component,
   children,
@@ -38,15 +20,18 @@ const HvTableBody = forwardRef(({
   ...others
 }, externalRef) => {
   var _a;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const tableContext = useContext(TableContext);
   const bodyRef = useRef(null);
   const handleRef = useForkRef(externalRef, bodyRef);
   const Component = component || ((_a = tableContext == null ? void 0 : tableContext.components) == null ? void 0 : _a.TBody) || defaultComponent;
-  const TableBody = useMemo(() => StyledTableBody(Component), [Component]);
   return /* @__PURE__ */ jsx(TableSectionContext.Provider, {
     value: tableSectionContext,
-    children: /* @__PURE__ */ jsx(TableBody, {
-      className: clsx(tableBodyClasses.root, classes == null ? void 0 : classes.root, className),
+    children: /* @__PURE__ */ jsx(Component, {
+      className: cx(classes.root, className),
       ref: handleRef,
       role: Component === defaultComponent ? null : "rowgroup",
       ...others,
@@ -68,6 +53,7 @@ const HvTableBody = forwardRef(({
   });
 });
 export {
-  HvTableBody
+  HvTableBody,
+  staticClasses as tableBodyClasses
 };
 //# sourceMappingURL=TableBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport styled from \"@emotion/styled\";\n\nimport React, {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport tableBodyClasses, { HvTableBodyClasses } from \"./tableBodyClasses\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\nconst StyledTableBody = (c: any) =>\n  styled(c)({\n    backgroundColor: \"inherit\",\n    position: \"relative\",\n    zIndex: 0,\n  });\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  (\n    {\n      classes,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    const TableBody = useMemo(() => StyledTableBody(Component), [Component]);\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <TableBody\n          className={clsx(tableBodyClasses.root, classes?.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </TableBody>\n      </TableSectionContext.Provider>\n    );\n  }\n);\n"],"names":["tableSectionContext","type","filterClassName","defaultComponent","StyledTableBody","c","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","HvTableBody","forwardRef","classes","className","component","children","withNavigation","others","externalRef","tableContext","useContext","TableContext","bodyRef","useRef","handleRef","useForkRef","Component","components","TBody","TableBody","useMemo","_jsx","TableSectionContext","Provider","value","clsx","tableBodyClasses","root","ref","role","Children","element","isValidElement","HvFocus","id","key","rootRef","strategy","filterClass","navigationJump","focusDisabled","selected","props"],"mappings":";;;;;;;;;;;;AAsCA,MAAMA,sBAAsB;AAAA,EAC1BC,MAAM;AAAA,EACNC,iBAAiB;AACnB;AAEA,MAAMC,mBAAmB;AAEzB,MAAMC,kBAAkBA,CAACC,MACvBC,wBAAOD,GAACE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAIR;AAMUC,MAAAA,cAAcC,WACzB,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjB,GAAGC;AACL,GACAC,gBACG;;AACGC,QAAAA,eAAeC,WAAWC,YAAY;AAEtCC,QAAAA,UAAUC,OAAO,IAAI;AAErBC,QAAAA,YAAYC,WAAWP,aAAaI,OAAO;AAEjD,QAAMI,YACJZ,eAAaK,kDAAcQ,eAAdR,mBAA0BS,UAAShC;AAE5CiC,QAAAA,YAAYC,QAAQ,MAAMjC,gBAAgB6B,SAAS,GAAG,CAACA,SAAS,CAAC;AAGrEK,SAAAA,oBAACC,oBAAoBC,UAAQ;AAAA,IAACC,OAAOzC;AAAAA,IAAoBsB,8BACtDc,WAAS;AAAA,MACRhB,WAAWsB,KAAKC,iBAAiBC,MAAMzB,mCAASyB,MAAMxB,SAAS;AAAA,MAC/DyB,KAAKd;AAAAA,MACLe,MAAMb,cAAc9B,mBAAmB,OAAO;AAAA,MAAW,GACrDqB;AAAAA,MAAMF,UAETC,iBACGwB,SAASjC,IAAIQ,UAAW0B,CAAY,YAAA;AAC9BC,YAAAA,eAAeD,OAAO,GAAG;AAC3B,qCACGE,SAAO;AAAA,YACNC,IAAK,SAAQH,QAAQI;AAAAA,YACrBC,SAASxB;AAAAA,YAETyB,UAAS;AAAA,YACTC,aAAavD,oBAAoBE;AAAAA,YACjCsD,gBAAgB;AAAA,YAChBC,eAAe;AAAA,YACfC,UAAUV,QAAQW,MAAMD;AAAAA,YAASpC,UAEhC0B;AAAAA,UAAO,GAPF,OAAMA,QAAQI,KAQb;AAAA,QAEb;AAAA,MACD,CAAA,IACD9B;AAAAA,IAAAA,CACK;AAAA,EAAA,CACiB;AAElC,CACF;"}
+{"version":3,"file":"TableBody.js","sources":["../../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  (\n    {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  }\n);\n"],"names":["tableSectionContext","type","filterClassName","defaultComponent","HvTableBody","forwardRef","classes","classesProp","className","component","children","withNavigation","others","externalRef","cx","useClasses","tableContext","useContext","TableContext","bodyRef","useRef","handleRef","useForkRef","Component","components","TBody","_jsx","TableSectionContext","Provider","value","root","ref","role","Children","map","element","isValidElement","HvFocus","id","key","rootRef","strategy","filterClass","navigationJump","focusDisabled","selected","props"],"mappings":";;;;;;;;AAsCA,MAAMA,sBAAsB;AAAA,EAC1BC,MAAM;AAAA,EACNC,iBAAiB;AACnB;AAEA,MAAMC,mBAAmB;AAMZC,MAAAA,cAAcC,WACzB,CACE;AAAA,EACEC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,iBAAiB;AAAA,EACjB,GAAGC;AACL,GACAC,gBACG;;AACG,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAExCS,QAAAA,eAAeC,WAAWC,YAAY;AAEtCC,QAAAA,UAAUC,OAAO,IAAI;AAErBC,QAAAA,YAAYC,WAAWT,aAAaM,OAAO;AAEjD,QAAMI,YACJd,eAAaO,kDAAcQ,eAAdR,mBAA0BS,UAAStB;AAGhDuB,SAAAA,oBAACC,oBAAoBC,UAAQ;AAAA,IAACC,OAAO7B;AAAAA,IAAoBU,8BACtDa,WAAS;AAAA,MACRf,WAAWM,GAAGR,QAAQwB,MAAMtB,SAAS;AAAA,MACrCuB,KAAKV;AAAAA,MACLW,MAAMT,cAAcpB,mBAAmB,OAAO;AAAA,MAAW,GACrDS;AAAAA,MAAMF,UAETC,iBACGsB,SAASC,IAAIxB,UAAWyB,CAAY,YAAA;AAC9BC,YAAAA,eAAeD,OAAO,GAAG;AAC3B,qCACGE,SAAO;AAAA,YACNC,IAAK,SAAQH,QAAQI;AAAAA,YACrBC,SAASrB;AAAAA,YAETsB,UAAS;AAAA,YACTC,aAAa1C,oBAAoBE;AAAAA,YACjCyC,gBAAgB;AAAA,YAChBC,eAAe;AAAA,YACfC,UAAUV,QAAQW,MAAMD;AAAAA,YAASnC,UAEhCyB;AAAAA,UAAO,GAPF,OAAMA,QAAQI,KAQb;AAAA,QAEb;AAAA,MACD,CAAA,IACD7B;AAAAA,IAAAA,CACK;AAAA,EAAA,CACiB;AAElC,CACF;"}

package/dist/esm/components/Table/TableBody/TableBody.styles.js

@@ -0,0 +1,16 @@
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTableBody", {
+  root: {
+    backgroundColor: "inherit",
+    position: "relative",
+    zIndex: 0
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TableBody.styles.js.map

package/dist/esm/components/Table/TableBody/TableBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.styles.js","sources":["../../../../../src/components/Table/TableBody/TableBody.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableBody\", {\n  root: { backgroundColor: \"inherit\", position: \"relative\", zIndex: 0 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundColor","position","zIndex"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IAAEC,iBAAiB;AAAA,IAAWC,UAAU;AAAA,IAAYC,QAAQ;AAAA,EAAE;AACtE,CAAC;"}

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

@@ -1,8 +1,6 @@
-import _styled from "@emotion/styled/base";
 import capitalize from "lodash/capitalize";
-import { forwardRef, useContext, useState, useMemo, useEffect } from "react";
+import { forwardRef, useContext, useState, useEffect } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../../utils/transientOptions.js";
 import { checkValidHexColorValue } from "../../../utils/checkValidHexColorValue.js";
 import { getVarValue } from "../../../utils/theme.js";
 import { hexToRgbA } from "../../../utils/hexToRgbA.js";
@@ -11,42 +9,7 @@ import TableContext from "../TableContext.js";
 import TableSectionContext from "../TableSectionContext.js";
 import { useClasses, staticClasses } from "./TableCell.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
 const defaultComponent = "td";
-const StyledTableCell = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e8848lx0"
-}, transientOptions) : _extends({}, {
-  target: "e8848lx0",
-  label: "StyledTableCell"
-}, transientOptions))(({
-  $stickyColumn,
-  $type,
-  $sortedColor
-}) => ({
-  ...$type === "body" && {
-    [`&.${staticClasses.sorted}`]: {
-      backgroundColor: $sortedColor
-    }
-  },
-  ...$stickyColumn && {
-    [`&.${staticClasses.sorted}`]: {
-      backgroundImage: `linear-gradient(to right, ${$sortedColor}, ${$sortedColor})`
-    }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVDZWxsL1RhYmxlQ2VsbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUZFIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVDZWxsL1RhYmxlQ2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IGNhcGl0YWxpemUgZnJvbSBcImxvZGFzaC9jYXBpdGFsaXplXCI7XG5cbmltcG9ydCB7XG4gIENTU1Byb3BlcnRpZXMsXG4gIGZvcndhcmRSZWYsXG4gIFRkSFRNTEF0dHJpYnV0ZXMsXG4gIHVzZUNvbnRleHQsXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdXNlU3RhdGUsXG59IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgY2hlY2tWYWxpZEhleENvbG9yVmFsdWUgfSBmcm9tIFwiQGNvcmUvdXRpbHMvY2hlY2tWYWxpZEhleENvbG9yVmFsdWVcIjtcbmltcG9ydCB7IEV4dHJhY3ROYW1lcyB9IGZyb20gXCJAY29yZS91dGlscy9jbGFzc2VzXCI7XG5pbXBvcnQgeyBnZXRWYXJWYWx1ZSB9IGZyb20gXCJAY29yZS91dGlscy90aGVtZVwiO1xuaW1wb3J0IHsgaGV4VG9SZ2JBIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQGNvcmUvaG9va3MvdXNlVGhlbWVcIjtcblxuaW1wb3J0IHtcbiAgSHZUYWJsZUNlbGxBbGlnbixcbiAgSHZUYWJsZUNlbGxUeXBlLFxuICBIdlRhYmxlQ2VsbFZhcmlhbnQsXG59IGZyb20gXCIuLi9UYWJsZVwiO1xuaW1wb3J0IFRhYmxlQ29udGV4dCBmcm9tIFwiLi4vVGFibGVDb250ZXh0XCI7XG5pbXBvcnQgVGFibGVTZWN0aW9uQ29udGV4dCBmcm9tIFwiLi4vVGFibGVTZWN0aW9uQ29udGV4dFwiO1xuaW1wb3J0IHsgc3RhdGljQ2xhc3NlcywgdXNlQ2xhc3NlcyB9IGZyb20gXCIuL1RhYmxlQ2VsbC5zdHlsZXNcIjtcblxuZXhwb3J0IHsgc3RhdGljQ2xhc3NlcyBhcyB0YWJsZUNlbGxDbGFzc2VzIH07XG5cbmV4cG9ydCB0eXBlIEh2VGFibGVDZWxsQ2xhc3NlcyA9IEV4dHJhY3ROYW1lczx0eXBlb2YgdXNlQ2xhc3Nlcz47XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHZUYWJsZUNlbGxQcm9wc1xuICBleHRlbmRzIE9taXQ8VGRIVE1MQXR0cmlidXRlczxIVE1MVGFibGVDZWxsRWxlbWVudD4sIFwiYWxpZ25cIj4ge1xuICAvKiogVGhlIGNvbXBvbmVudCB1c2VkIGZvciB0aGUgcm9vdCBub2RlLiBFaXRoZXIgYSBzdHJpbmcgdG8gdXNlIGEgSFRNTCBlbGVtZW50IG9yIGEgY29tcG9uZW50LiBEZWZhdWx0cyB0byB0ZC4gKi9cbiAgY29tcG9uZW50PzogUmVhY3QuRWxlbWVudFR5cGU7XG4gIC8qKiBDb250ZW50IHRvIGJlIHJlbmRlcmVkICovXG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKiogSW5saW5lIHN0eWxlcyB0byBiZSBhcHBsaWVkIHRvIHRoZSByb290IGVsZW1lbnQuICovXG4gIHN0eWxlPzogQ1NTUHJvcGVydGllcztcbiAgLyoqIFNldCB0aGUgdGV4dC1hbGlnbiBvbiB0aGUgdGFibGUgY2VsbCBjb250ZW50LiAqL1xuICBhbGlnbj86IEh2VGFibGVDZWxsQWxpZ247XG4gIC8qKiBTZXRzIHRoZSBjZWxsJ3MgdmFyaWFudC4gKi9cbiAgdmFyaWFudD86IEh2VGFibGVDZWxsVmFyaWFudCB8IFwibGlzdGNoZWNrYm94XCIgfCBcImxpc3RhY3Rpb25zXCI7XG4gIC8qKiBTcGVjaWZ5IHRoZSBjZWxsJ3MgdHlwZS4gVGhlIHByb3AgZGVmYXVsdHMgdG8gdGhlIHZhbHVlIGluaGVyaXRlZCBmcm9tIHRoZSBwYXJlbnQgVGFibGVIZWFkLCBUYWJsZUJvZHksIG9yIFRhYmxlRm9vdGVyIGNvbXBvbmVudHMuICovXG4gIHR5cGU/OiBIdlRhYmxlQ2VsbFR5cGU7XG4gIC8qKiBXaGV0aGVyIG9yIG5vdCB0aGUgY2VsbCBpcyBwYXJ0IG9mIGEgc29ydGVkIGNvbHVtbi4gKi9cbiAgc29ydGVkPzogYm9vbGVhbjtcbiAgLyoqIFRoZSBjZWxsIGlzIHBhcnQgb2YgYSBzdGlja3kgY29sdW1uLiAqL1xuICBzdGlja3lDb2x1bW4/OiBib29sZWFuO1xuICAvKiogVGhlIGNlbGwgaXMgcGFydCBvZiB0aGUgbGFzdCBzdGlja3kgdG8gdGhlIGxlZnQgY29sdW1uLiAqL1xuICBzdGlja3lDb2x1bW5Nb3N0TGVmdD86IGJvb2xlYW47XG4gIC8qKiBUaGUgY2VsbCBpcyBwYXJ0IG9mIHRoZSBmaXJzdCBzdGlja3kgdG8gdGhlIHJpZ2h0IGNvbHVtbi4gKi9cbiAgc3RpY2t5Q29sdW1uTGVhc3RSaWdodD86IGJvb2xlYW47XG4gIC8qKiBUaGUgY2VsbCBpcyBwYXJ0IG9mIHRoZSBmaXJzdCBjb2x1bW4gaW4gdGhlIGdyb3VwLiAqL1xuICBncm91cENvbHVtbk1vc3RMZWZ0PzogYm9vbGVhbjtcbiAgLyoqIFRoZSBjZWxsIGlzIHBhcnQgb2YgdGhlIGxhc3QgY29sdW1uIGluIHRoZSBncm91cC4gKi9cbiAgZ3JvdXBDb2x1bW5Nb3N0UmlnaHQ/OiBib29sZWFuO1xuICAvKiogV2hldGhlciBvciBub3QgdGhlIGNlbGwgaXMgcmVzaXphYmxlICovXG4gIHJlc2l6YWJsZT86IGJvb2xlYW47XG4gIC8qKiBXaGV0aGVyIG9yIG5vdCB0aGUgY2VsbCBpcyBiZWluZyByZXNpemVkICovXG4gIHJlc2l6aW5nPzogYm9vbGVhbjtcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGNvbXBvbmVudC4gKi9cbiAgY2xhc3Nlcz86IEh2VGFibGVDZWxsQ2xhc3Nlcztcbn1cblxuY29uc3QgZGVmYXVsdENvbXBvbmVudCA9IFwidGRcIjtcblxuaW50ZXJmYWNlIFN0eWxlZFRhYmxlQ2VsbFByb3BzIHtcbiAgJHZhcmlhbnRMaXN0OiBib29sZWFuO1xuICAkdmFyaWFudExpc3RIZWFkOiBib29sZWFuO1xuICAkc3RpY2t5Q29sdW1uOiBib29sZWFuO1xuICAkc3RpY2t5Q29sdW1uTW9zdExlZnQ6IGJvb2xlYW47XG4gICRzdGlja3lDb2x1bW5MZWFzdFJpZ2h0OiBib29sZWFuO1xuICAkZ3JvdXBDb2x1bW5Nb3N0TGVmdDogYm9vbGVhbjtcbiAgJGdyb3VwQ29sdW1uTW9zdFJpZ2h0OiBib29sZWFuO1xuICAkcmVzaXphYmxlOiBib29sZWFuO1xuICAkcmVzaXppbmc6IGJvb2xlYW47XG4gICRhbGlnbjogc3RyaW5nO1xuICAkdmFyaWFudDogc3RyaW5nO1xuICAkdHlwZTogc3RyaW5nO1xuICAkc29ydGVkQ29sb3I6IHN0cmluZztcbn1cblxuY29uc3QgU3R5bGVkVGFibGVDZWxsID0gKGM6IGFueSkgPT5cbiAgc3R5bGVkKFxuICAgIGMsXG4gICAgdHJhbnNpZW50T3B0aW9uc1xuICApKCh7ICRzdGlja3lDb2x1bW4sICR0eXBlLCAkc29ydGVkQ29sb3IgfTogU3R5bGVkVGFibGVDZWxsUHJvcHMpID0+ICh7XG4gICAgLi4uKCR0eXBlID09PSBcImJvZHlcIiAmJiB7XG4gICAgICBbYCYuJHtzdGF0aWNDbGFzc2VzLnNvcnRlZH1gXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICRzb3J0ZWRDb2xvcixcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRzdGlja3lDb2x1bW4gJiYge1xuICAgICAgW2AmLiR7c3RhdGljQ2xhc3Nlcy5zb3J0ZWR9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZEltYWdlOiBgbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAkeyRzb3J0ZWRDb2xvcn0sICR7JHNvcnRlZENvbG9yfSlgLFxuICAgICAgfSxcbiAgICB9KSxcbiAgfSkpO1xuXG5jb25zdCBnZXRTb3J0ZWRDb2xvciA9IChjb2xvcj86IHN0cmluZywgYWxwaGE/OiBzdHJpbmcpID0+IHtcbiAgcmV0dXJuIGNoZWNrVmFsaWRIZXhDb2xvclZhbHVlKGNvbG9yKSAmJiBhbHBoYVxuICAgID8gaGV4VG9SZ2JBKGNvbG9yLCBwYXJzZUZsb2F0KGFscGhhKSlcbiAgICA6IGNvbG9yO1xufTtcblxuLyoqXG4gKiBgSHZUYWJsZUNlbGxgIGFjdHMgYXMgYSBgdGRgIGVsZW1lbnQgYW5kIGluaGVyaXRzIHN0eWxlcyBmcm9tIGl0cyBjb250ZXh0XG4gKi9cbmV4cG9ydCBjb25zdCBIdlRhYmxlQ2VsbCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEh2VGFibGVDZWxsUHJvcHM+KFxuICAocHJvcHMsIGV4dGVybmFsUmVmKSA9PiB7XG4gICAgY29uc3Qge1xuICAgICAgY2hpbGRyZW4sXG4gICAgICBjb21wb25lbnQsXG4gICAgICBjbGFzc05hbWUsXG4gICAgICBzdHlsZSxcbiAgICAgIGNsYXNzZXM6IGNsYXNzZXNQcm9wLFxuICAgICAgYWxpZ24gPSBcImluaGVyaXRcIixcbiAgICAgIHZhcmlhbnQgPSBcImRlZmF1bHRcIixcbiAgICAgIHR5cGU6IHR5cGVQcm9wLFxuICAgICAgc3RpY2t5Q29sdW1uID0gZmFsc2UsXG4gICAgICBzdGlja3lDb2x1bW5Nb3N0TGVmdCA9IGZhbHNlLFxuICAgICAgc3RpY2t5Q29sdW1uTGVhc3RSaWdodCA9IGZhbHNlLFxuICAgICAgZ3JvdXBDb2x1bW5Nb3N0TGVmdCA9IGZhbHNlLFxuICAgICAgZ3JvdXBDb2x1bW5Nb3N0UmlnaHQgPSBmYWxzZSxcbiAgICAgIHNvcnRlZCA9IGZhbHNlLFxuICAgICAgcmVzaXphYmxlID0gZmFsc2UsXG4gICAgICByZXNpemluZyA9IGZhbHNlLFxuICAgICAgLi4ub3RoZXJzXG4gICAgfSA9IHByb3BzO1xuICAgIGNvbnN0IHsgY2xhc3NlcywgY3ggfSA9IHVzZUNsYXNzZXMoY2xhc3Nlc1Byb3ApO1xuICAgIGNvbnN0IHsgYWN0aXZlVGhlbWUsIHJvb3RJZCB9ID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCB0YWJsZUNvbnRleHQgPSB1c2VDb250ZXh0KFRhYmxlQ29udGV4dCk7XG4gICAgY29uc3QgdGFibGVTZWN0aW9uQ29udGV4dCA9IHVzZUNvbnRleHQoVGFibGVTZWN0aW9uQ29udGV4dCk7XG5cbiAgICBjb25zdCBbc29ydGVkQ29sb3JWYWx1ZSwgc2V0U29ydGVkQ29sb3JWYWx1ZV0gPSB1c2VTdGF0ZTxcbiAgICAgIHN0cmluZyB8IHVuZGVmaW5lZFxuICAgID4oKTtcbiAgICBjb25zdCBbc29ydGVkQ29sb3JBbHBoYSwgc2V0U29ydGVkQ29sb3JBbHBoYV0gPSB1c2VTdGF0ZTxcbiAgICAgIHN0cmluZyB8IHVuZGVmaW5lZFxuICAgID4oKTtcblxuICAgIGNvbnN0IHR5cGUgPSB0eXBlUHJvcCB8fCB0YWJsZVNlY3Rpb25Db250ZXh0Py50eXBlIHx8IFwiYm9keVwiO1xuXG4gICAgY29uc3QgQ29tcG9uZW50ID1cbiAgICAgIGNvbXBvbmVudCB8fCB0YWJsZUNvbnRleHQ/LmNvbXBvbmVudHM/LlRkIHx8IGRlZmF1bHRDb21wb25lbnQ7XG5cbiAgICBjb25zdCBUYWJsZUNlbGwgPSB1c2VNZW1vKCgpID0+IFN0eWxlZFRhYmxlQ2VsbChDb21wb25lbnQpLCBbQ29tcG9uZW50XSk7XG5cbiAgICBjb25zdCBbc29ydGVkQ29sb3IsIHNldFNvcnRlZENvbG9yXSA9IHVzZVN0YXRlKFxuICAgICAgZ2V0U29ydGVkQ29sb3Ioc29ydGVkQ29sb3JWYWx1ZSwgc29ydGVkQ29sb3JBbHBoYSlcbiAgICApO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIHNldFNvcnRlZENvbG9yVmFsdWUoZ2V0VmFyVmFsdWUodGhlbWUudGFibGUucm93U29ydGVkQ29sb3IsIHJvb3RJZCkpO1xuICAgICAgc2V0U29ydGVkQ29sb3JBbHBoYShnZXRWYXJWYWx1ZSh0aGVtZS50YWJsZS5yb3dTb3J0ZWRDb2xvckFscGhhLCByb290SWQpKTtcblxuICAgICAgc2V0U29ydGVkQ29sb3IoZ2V0U29ydGVkQ29sb3Ioc29ydGVkQ29sb3JWYWx1ZSwgc29ydGVkQ29sb3JBbHBoYSkpO1xuICAgIH0sIFtcbiAgICAgIGFjdGl2ZVRoZW1lPy5jb2xvcnMubW9kZXMuc2VsZWN0ZWRNb2RlLFxuICAgICAgc29ydGVkQ29sb3JWYWx1ZSxcbiAgICAgIHNvcnRlZENvbG9yQWxwaGEsXG4gICAgICByb290SWQsXG4gICAgXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFRhYmxlQ2VsbFxuICAgICAgICByZWY9e2V4dGVybmFsUmVmfVxuICAgICAgICByb2xlPXtDb21wb25lbnQgPT09IGRlZmF1bHRDb21wb25lbnQgPyBudWxsIDogXCJjZWxsXCJ9XG4gICAgICAgIHN0eWxlPXtzdHlsZX1cbiAgICAgICAgY2xhc3NOYW1lPXtjeChjbGFzc05hbWUsIGNsYXNzZXMucm9vdCwgY2xhc3Nlc1t0eXBlXSwge1xuICAgICAgICAgIFtjbGFzc2VzW2BhbGlnbiR7Y2FwaXRhbGl6ZShhbGlnbil9YF1dOiBhbGlnbiAhPT0gXCJpbmhlcml0XCIsXG4gICAgICAgICAgW2NsYXNzZXMudmFyaWFudExpc3RdOiB0YWJsZUNvbnRleHQudmFyaWFudCA9PT0gXCJsaXN0cm93XCIsXG4gICAgICAgICAgW2NsYXNzZXMudmFyaWFudExpc3RIZWFkXTpcbiAgICAgICAgICAgIHRhYmxlQ29udGV4dC52YXJpYW50ID09PSBcImxpc3Ryb3dcIiAmJiB0eXBlICE9PSBcImJvZHlcIixcbiAgICAgICAgICBbY2xhc3Nlc1tgdmFyaWFudCR7Y2FwaXRhbGl6ZSh2YXJpYW50KX1gXV06IHZhcmlhbnQgIT09IFwiZGVmYXVsdFwiLFxuICAgICAgICAgIFtjbGFzc2VzLnNvcnRlZF06IHNvcnRlZCxcbiAgICAgICAgICBbY2xhc3Nlcy5zdGlja3lDb2x1bW5dOiBzdGlja3lDb2x1bW4sXG4gICAgICAgICAgW2NsYXNzZXMuc3RpY2t5Q29sdW1uTW9zdExlZnRdOiBzdGlja3lDb2x1bW5Nb3N0TGVmdCxcbiAgICAgICAgICBbY2xhc3Nlcy5zdGlja3lDb2x1bW5MZWFzdFJpZ2h0XTogc3RpY2t5Q29sdW1uTGVhc3RSaWdodCxcbiAgICAgICAgICBbY2xhc3Nlcy5ncm91cENvbHVtbk1vc3RMZWZ0XTogZ3JvdXBDb2x1bW5Nb3N0TGVmdCxcbiAgICAgICAgICBbY2xhc3Nlcy5ncm91cENvbHVtbk1vc3RSaWdodF06IGdyb3VwQ29sdW1uTW9zdFJpZ2h0LFxuICAgICAgICAgIFtjbGFzc2VzLnJlc2l6YWJsZV06IHJlc2l6YWJsZSxcbiAgICAgICAgICBbY2xhc3Nlcy5yZXNpemluZ106IHJlc2l6aW5nLFxuICAgICAgICB9KX1cbiAgICAgICAgJHR5cGU9e3R5cGV9XG4gICAgICAgICRzdGlja3lDb2x1bW49e3N0aWNreUNvbHVtbn1cbiAgICAgICAgJHNvcnRlZENvbG9yPXtzb3J0ZWRDb2xvcn1cbiAgICAgICAgey4uLm90aGVyc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UYWJsZUNlbGw+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
 const getSortedColor = (color, alpha) => {
   return checkValidHexColorValue(color) && alpha ? hexToRgbA(color, parseFloat(alpha)) : color;
 };
@@ -73,7 +36,8 @@ const HvTableCell = forwardRef((props, externalRef) => {
   } = props;
   const {
     classes,
-    cx
+    cx,
+    css
   } = useClasses(classesProp);
   const {
     activeTheme,
@@ -85,18 +49,25 @@ const HvTableCell = forwardRef((props, externalRef) => {
   const [sortedColorAlpha, setSortedColorAlpha] = useState();
   const type = typeProp || (tableSectionContext == null ? void 0 : tableSectionContext.type) || "body";
   const Component = component || ((_a = tableContext == null ? void 0 : tableContext.components) == null ? void 0 : _a.Td) || defaultComponent;
-  const TableCell = useMemo(() => StyledTableCell(Component), [Component]);
   const [sortedColor, setSortedColor] = useState(getSortedColor(sortedColorValue, sortedColorAlpha));
   useEffect(() => {
     setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));
     setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));
     setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));
   }, [activeTheme == null ? void 0 : activeTheme.colors.modes.selectedMode, sortedColorValue, sortedColorAlpha, rootId]);
-  return /* @__PURE__ */ jsx(TableCell, {
+  return /* @__PURE__ */ jsx(Component, {
     ref: externalRef,
     role: Component === defaultComponent ? null : "cell",
     style,
-    className: cx(className, classes.root, classes[type], {
+    className: cx(classes.root, classes[type], type === "body" && css({
+      [`&.${staticClasses.sorted}`]: {
+        backgroundColor: sortedColor
+      }
+    }), stickyColumn && css({
+      [`&.${staticClasses.sorted}`]: {
+        backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`
+      }
+    }), {
       [classes[`align${capitalize(align)}`]]: align !== "inherit",
       [classes.variantList]: tableContext.variant === "listrow",
       [classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
@@ -109,10 +80,7 @@ const HvTableCell = forwardRef((props, externalRef) => {
       [classes.groupColumnMostRight]: groupColumnMostRight,
       [classes.resizable]: resizable,
       [classes.resizing]: resizing
-    }),
-    $type: type,
-    $stickyColumn: stickyColumn,
-    $sortedColor: sortedColor,
+    }, className),
     ...others,
     children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TdHTMLAttributes,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\ninterface StyledTableCellProps {\n  $variantList: boolean;\n  $variantListHead: boolean;\n  $stickyColumn: boolean;\n  $stickyColumnMostLeft: boolean;\n  $stickyColumnLeastRight: boolean;\n  $groupColumnMostLeft: boolean;\n  $groupColumnMostRight: boolean;\n  $resizable: boolean;\n  $resizing: boolean;\n  $align: string;\n  $variant: string;\n  $type: string;\n  $sortedColor: string;\n}\n\nconst StyledTableCell = (c: any) =>\n  styled(\n    c,\n    transientOptions\n  )(({ $stickyColumn, $type, $sortedColor }: StyledTableCellProps) => ({\n    ...($type === \"body\" && {\n      [`&.${staticClasses.sorted}`]: {\n        backgroundColor: $sortedColor,\n      },\n    }),\n    ...($stickyColumn && {\n      [`&.${staticClasses.sorted}`]: {\n        backgroundImage: `linear-gradient(to right, ${$sortedColor}, ${$sortedColor})`,\n      },\n    }),\n  }));\n\nconst getSortedColor = (color?: string, alpha?: string) => {\n  return checkValidHexColorValue(color) && alpha\n    ? hexToRgbA(color, parseFloat(alpha))\n    : color;\n};\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme, rootId } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [sortedColorValue, setSortedColorValue] = useState<\n      string | undefined\n    >();\n    const [sortedColorAlpha, setSortedColorAlpha] = useState<\n      string | undefined\n    >();\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    const TableCell = useMemo(() => StyledTableCell(Component), [Component]);\n\n    const [sortedColor, setSortedColor] = useState(\n      getSortedColor(sortedColorValue, sortedColorAlpha)\n    );\n\n    useEffect(() => {\n      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));\n      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));\n\n      setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));\n    }, [\n      activeTheme?.colors.modes.selectedMode,\n      sortedColorValue,\n      sortedColorAlpha,\n      rootId,\n    ]);\n\n    return (\n      <TableCell\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(className, classes.root, classes[type], {\n          [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n          [classes.variantList]: tableContext.variant === \"listrow\",\n          [classes.variantListHead]:\n            tableContext.variant === \"listrow\" && type !== \"body\",\n          [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n          [classes.sorted]: sorted,\n          [classes.stickyColumn]: stickyColumn,\n          [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n          [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n          [classes.groupColumnMostLeft]: groupColumnMostLeft,\n          [classes.groupColumnMostRight]: groupColumnMostRight,\n          [classes.resizable]: resizable,\n          [classes.resizing]: resizing,\n        })}\n        $type={type}\n        $stickyColumn={stickyColumn}\n        $sortedColor={sortedColor}\n        {...others}\n      >\n        {children}\n      </TableCell>\n    );\n  }\n);\n"],"names":["defaultComponent","StyledTableCell","c","process","env","NODE_ENV","_extends","target","transientOptions","label","$stickyColumn","$type","$sortedColor","staticClasses","sorted","backgroundColor","backgroundImage","getSortedColor","color","alpha","checkValidHexColorValue","hexToRgbA","parseFloat","HvTableCell","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","resizable","resizing","others","cx","useClasses","activeTheme","rootId","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","sortedColorValue","setSortedColorValue","useState","sortedColorAlpha","setSortedColorAlpha","Component","components","Td","TableCell","useMemo","sortedColor","setSortedColor","useEffect","getVarValue","theme","table","rowSortedColor","rowSortedColorAlpha","colors","modes","selectedMode","ref","role","root","capitalize","variantList","variantListHead"],"mappings":"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"}
+{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import capitalize from \"lodash/capitalize\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TdHTMLAttributes,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\nconst getSortedColor = (color?: string, alpha?: string) => {\n  return checkValidHexColorValue(color) && alpha\n    ? hexToRgbA(color, parseFloat(alpha))\n    : color;\n};\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = props;\n    const { classes, cx, css } = useClasses(classesProp);\n    const { activeTheme, rootId } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [sortedColorValue, setSortedColorValue] = useState<\n      string | undefined\n    >();\n    const [sortedColorAlpha, setSortedColorAlpha] = useState<\n      string | undefined\n    >();\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    const [sortedColor, setSortedColor] = useState(\n      getSortedColor(sortedColorValue, sortedColorAlpha)\n    );\n\n    useEffect(() => {\n      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));\n      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));\n\n      setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));\n    }, [\n      activeTheme?.colors.modes.selectedMode,\n      sortedColorValue,\n      sortedColorAlpha,\n      rootId,\n    ]);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: sortedColor,\n              },\n            }),\n          stickyColumn &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n              },\n            }),\n          {\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","getSortedColor","color","alpha","checkValidHexColorValue","hexToRgbA","parseFloat","HvTableCell","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sorted","resizable","resizing","others","cx","css","useClasses","activeTheme","rootId","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","sortedColorValue","setSortedColorValue","useState","sortedColorAlpha","setSortedColorAlpha","Component","components","Td","sortedColor","setSortedColor","useEffect","getVarValue","theme","table","rowSortedColor","rowSortedColorAlpha","colors","modes","selectedMode","ref","role","root","staticClasses","backgroundColor","backgroundImage","capitalize","variantList","variantListHead"],"mappings":"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"}

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

@@ -1,40 +1,26 @@
-import _styled from "@emotion/styled/base";
-import { clsx } from "clsx";
-import { forwardRef, useMemo } from "react";
-import tableContainerClasses from "./tableContainerClasses.js";
+import { forwardRef } from "react";
+import { useClasses } from "./TableContainer.styles.js";
+import { staticClasses } from "./TableContainer.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledTableContainer = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV === "production" ? {
-  target: "e12doz4i0"
-} : {
-  target: "e12doz4i0",
-  label: "StyledTableContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zh4zxs",
-  styles: "width:100%;overflow:auto;padding-bottom:3px"
-} : {
-  name: "zh4zxs",
-  styles: "width:100%;overflow:auto;padding-bottom:3px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVDb250YWluZXIvVGFibGVDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCRSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhYmxlL1RhYmxlQ29udGFpbmVyL1RhYmxlQ29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsc3ggfSBmcm9tIFwiY2xzeFwiO1xuXG5pbXBvcnQgeyBmb3J3YXJkUmVmLCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBIdkJhc2VQcm9wcyB9IGZyb20gXCJAY29yZS90eXBlcy9nZW5lcmljXCI7XG5cbmltcG9ydCB0YWJsZUNvbnRhaW5lckNsYXNzZXMsIHtcbiAgSHZUYWJsZUNvbnRhaW5lckNsYXNzZXMsXG59IGZyb20gXCIuL3RhYmxlQ29udGFpbmVyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgaW50ZXJmYWNlIEh2VGFibGVDb250YWluZXJQcm9wc1xuICBleHRlbmRzIEh2QmFzZVByb3BzPEhUTUxEaXZFbGVtZW50LCBcImNoaWxkcmVuXCI+IHtcbiAgLyoqXG4gICAqIENvbnRlbnQgdG8gYmUgcmVuZGVyZWRcbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBUaGUgY29tcG9uZW50IHVzZWQgZm9yIHRoZSByb290IG5vZGUuIEVpdGhlciBhIHN0cmluZyB0byB1c2UgYSBIVE1MIGVsZW1lbnQgb3IgYSBjb21wb25lbnQuXG4gICAqIERlZmF1bHRzIHRvIHRib2R5LlxuICAgKi9cbiAgY29tcG9uZW50PzogUmVhY3QuRWxlbWVudFR5cGU7XG4gIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gIGNsYXNzZXM/OiBIdlRhYmxlQ29udGFpbmVyQ2xhc3Nlcztcbn1cblxuY29uc3QgU3R5bGVkVGFibGVDb250YWluZXIgPSAoYzogYW55KSA9PlxuICBzdHlsZWQoYykoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgLy8gZXh0cmEgcGFkZGluZyB0byBhdm9pZCBjdXR0aW5nIGZvY3VzIHJpbmdzIGluIHRoZSBsYXN0IGxpbmVcbiAgICBwYWRkaW5nQm90dG9tOiAzLFxuICB9KTtcblxuLyoqXG4gKiBIdlRhYmxlQ29udGFpbmVyIGlzIGEgY29udGFpbmVyIGZvciB0aGUgSHZUYWJsZVxuICovXG5leHBvcnQgY29uc3QgSHZUYWJsZUNvbnRhaW5lciA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEh2VGFibGVDb250YWluZXJQcm9wcz4oXG4gICh7IGNsYXNzZXMsIGNsYXNzTmFtZSwgY29tcG9uZW50LCAuLi5vdGhlcnMgfSwgZXh0ZXJuYWxSZWYpID0+IHtcbiAgICBjb25zdCBDb21wb25lbnQgPSBjb21wb25lbnQgfHwgXCJkaXZcIjtcblxuICAgIGNvbnN0IFRhYmxlQ29udGFpbmVyID0gdXNlTWVtbyhcbiAgICAgICgpID0+IFN0eWxlZFRhYmxlQ29udGFpbmVyKENvbXBvbmVudCksXG4gICAgICBbQ29tcG9uZW50XVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFRhYmxlQ29udGFpbmVyXG4gICAgICAgIHJlZj17ZXh0ZXJuYWxSZWZ9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xzeCh0YWJsZUNvbnRhaW5lckNsYXNzZXMucm9vdCwgY2xhc3Nlcz8ucm9vdCwgY2xhc3NOYW1lKX1cbiAgICAgICAgey4uLm90aGVyc31cbiAgICAgIC8+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
 const HvTableContainer = forwardRef(({
-  classes,
+  classes: classesProp,
   className,
   component,
   ...others
 }, externalRef) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const Component = component || "div";
-  const TableContainer = useMemo(() => StyledTableContainer(Component), [Component]);
-  return /* @__PURE__ */ jsx(TableContainer, {
+  return /* @__PURE__ */ jsx(Component, {
     ref: externalRef,
-    className: clsx(tableContainerClasses.root, classes == null ? void 0 : classes.root, className),
+    className: cx(classes.root, className),
     ...others
   });
 });
 export {
-  HvTableContainer
+  HvTableContainer,
+  staticClasses as tableContainerClasses
 };
 //# sourceMappingURL=TableContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableContainer.js","sources":["../../../../../src/components/Table/TableContainer/TableContainer.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport styled from \"@emotion/styled\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport tableContainerClasses, {\n  HvTableContainerClasses,\n} from \"./tableContainerClasses\";\n\nexport interface HvTableContainerProps\n  extends HvBaseProps<HTMLDivElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableContainerClasses;\n}\n\nconst StyledTableContainer = (c: any) =>\n  styled(c)({\n    width: \"100%\",\n    overflow: \"auto\",\n    // extra padding to avoid cutting focus rings in the last line\n    paddingBottom: 3,\n  });\n\n/**\n * HvTableContainer is a container for the HvTable\n */\nexport const HvTableContainer = forwardRef<HTMLElement, HvTableContainerProps>(\n  ({ classes, className, component, ...others }, externalRef) => {\n    const Component = component || \"div\";\n\n    const TableContainer = useMemo(\n      () => StyledTableContainer(Component),\n      [Component]\n    );\n\n    return (\n      <TableContainer\n        ref={externalRef}\n        className={clsx(tableContainerClasses.root, classes?.root, className)}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["StyledTableContainer","c","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","HvTableContainer","forwardRef","classes","className","component","others","externalRef","Component","TableContainer","useMemo","ref","clsx","tableContainerClasses","root"],"mappings":";;;;;;;;AA2BA,MAAMA,uBAAuBA,CAACC,MAC5BC,wBAAOD,GAACE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAKR;AAKUC,MAAAA,mBAAmBC,WAC9B,CAAC;AAAA,EAAEC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAW,GAAGC;AAAO,GAAGC,gBAAgB;AAC7D,QAAMC,YAAYH,aAAa;AAEzBI,QAAAA,iBAAiBC,QACrB,MAAMtB,qBAAqBoB,SAAS,GACpC,CAACA,SAAS,CACZ;AAEA,6BACGC,gBAAc;AAAA,IACbE,KAAKJ;AAAAA,IACLH,WAAWQ,KAAKC,sBAAsBC,MAAMX,mCAASW,MAAMV,SAAS;AAAA,IAAE,GAClEE;AAAAA,EAAAA,CACL;AAEL,CACF;"}
+{"version":3,"file":"TableContainer.js","sources":["../../../../../src/components/Table/TableContainer/TableContainer.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TableContainer.styles\";\n\nexport { staticClasses as tableContainerClasses };\n\nexport type HvTableContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableContainerProps\n  extends HvBaseProps<HTMLDivElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableContainerClasses;\n}\n\n/**\n * HvTableContainer is a container for the HvTable\n */\nexport const HvTableContainer = forwardRef<HTMLElement, HvTableContainerProps>(\n  ({ classes: classesProp, className, component, ...others }, externalRef) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const Component = component || \"div\";\n\n    return (\n      <Component\n        ref={externalRef}\n        className={cx(classes.root, className)}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTableContainer","forwardRef","classes","classesProp","className","component","others","externalRef","cx","useClasses","Component","ref","root"],"mappings":";;;;AA6BaA,MAAAA,mBAAmBC,WAC9B,CAAC;AAAA,EAAEC,SAASC;AAAAA,EAAaC;AAAAA,EAAWC;AAAAA,EAAW,GAAGC;AAAO,GAAGC,gBAAgB;AACpE,QAAA;AAAA,IAAEL;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,QAAMO,YAAYL,aAAa;AAE/B,6BACGK,WAAS;AAAA,IACRC,KAAKJ;AAAAA,IACLH,WAAWI,GAAGN,QAAQU,MAAMR,SAAS;AAAA,IAAE,GACnCE;AAAAA,EAAAA,CACL;AAEL,CACF;"}

package/dist/esm/components/Table/TableContainer/TableContainer.styles.js

@@ -0,0 +1,17 @@
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTableContainer", {
+  root: {
+    width: "100%",
+    overflow: "auto",
+    // extra padding to avoid cutting focus rings in the last line
+    paddingBottom: 3
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TableContainer.styles.js.map

package/dist/esm/components/Table/TableContainer/TableContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContainer.styles.js","sources":["../../../../../src/components/Table/TableContainer/TableContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableContainer\", {\n  root: {\n    width: \"100%\",\n    overflow: \"auto\",\n    // extra padding to avoid cutting focus rings in the last line\n    paddingBottom: 3,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","overflow","paddingBottom"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA;AAAA,IAEVC,eAAe;AAAA,EACjB;AACF,CAAC;"}