@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Table/Table.js

@@ -0,0 +1,71 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useMemo } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import TableContext from "./TableContext.js";
+import { useClasses } from "./Table.styles.js";
+import { staticClasses } from "./Table.styles.js";
+const defaultComponent = "table";
+const computeTablePartComponents = (rootComponent) => {
+  if (rootComponent === "table") {
+    return {
+      Table: "table",
+      THead: "thead",
+      TBody: "tbody",
+      Tr: "tr",
+      Th: "th",
+      Td: "td"
+    };
+  }
+  return {
+    Table: rootComponent,
+    THead: rootComponent,
+    TBody: rootComponent,
+    Tr: rootComponent,
+    Th: rootComponent,
+    Td: rootComponent
+  };
+};
+const HvTable = forwardRef((props, ref) => {
+  const {
+    classes: classesProp,
+    className,
+    component = defaultComponent,
+    stickyHeader = false,
+    stickyColumns = false,
+    variant = "default",
+    ...others
+  } = useDefaultProps("HvTable", props);
+  const { classes, cx } = useClasses(classesProp);
+  const containerRef = useRef(ref);
+  const components = useMemo(
+    () => computeTablePartComponents(component),
+    [component]
+  );
+  const tableContext = useMemo(
+    () => ({ components, variant, containerRef }),
+    [components, variant, containerRef]
+  );
+  const Table = useMemo(() => components.Table, [components]);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      ref,
+      role: component === defaultComponent ? null : "table",
+      className: cx(
+        classes.root,
+        {
+          [classes.stickyHeader]: stickyHeader,
+          [classes.stickyColumns]: stickyColumns,
+          [classes.listRow]: variant === "listrow"
+        },
+        className
+      ),
+      ...others
+    }
+  ) });
+});
+export {
+  HvTable,
+  staticClasses as tableClasses
+};
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, TableHTMLAttributes, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../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: React.ElementType<any>) => {\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":[],"mappings":";;;;;;AA+CA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -0,0 +1,31 @@
+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,
+    borderSpacing: 0,
+    "& caption": {
+      ...theme.typography.body,
+      padding: theme.space.xs,
+      textAlign: "left",
+      captionSide: "bottom"
+    }
+  },
+  stickyHeader: {},
+  stickyColumns: {
+    backgroundColor: theme.colors.atmo2,
+    "&": {
+      borderSpacing: 0
+    }
+  },
+  listRow: {
+    borderSpacing: `0 ${theme.space.xs}`
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Table.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.styles.js","sources":["../../../src/Table/Table.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTable\", {\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n\n    ...theme.typography.body,\n\n    borderSpacing: 0,\n\n    \"& caption\": {\n      ...theme.typography.body,\n      padding: theme.space.xs,\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: {\n    backgroundColor: theme.colors.atmo2,\n    \"&\": {\n      borderSpacing: 0,\n    },\n  },\n  listRow: {\n    borderSpacing: `0 ${theme.space.xs}`,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,GAAG,MAAM,WAAW;AAAA,IAEpB,eAAe;AAAA,IAEf,aAAa;AAAA,MACX,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,cAAc,CAAC;AAAA,EACf,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,KAAK;AAAA,MACH,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,eAAe,KAAK,MAAM,MAAM,EAAE;AAAA,EACpC;AACF,CAAC;"}

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

@@ -0,0 +1,61 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useContext, useRef, Children, isValidElement } from "react";
+import { useForkRef } from "../../hooks/useForkRef.js";
+import TableContext from "../TableContext.js";
+import TableSectionContext from "../TableSectionContext.js";
+import { useClasses } from "./TableBody.styles.js";
+import { staticClasses } from "./TableBody.styles.js";
+import { HvFocus } from "../../Focus/Focus.js";
+const tableSectionContext = {
+  type: "body",
+  filterClassName: "_grid"
+};
+const defaultComponent = "tbody";
+const HvTableBody = forwardRef(
+  ({
+    classes: classesProp,
+    className,
+    component,
+    children,
+    withNavigation = false,
+    ...others
+  }, externalRef) => {
+    const { classes, cx } = useClasses(classesProp);
+    const tableContext = useContext(TableContext);
+    const bodyRef = useRef(null);
+    const handleRef = useForkRef(externalRef, bodyRef);
+    const Component = component || tableContext?.components?.TBody || defaultComponent;
+    return /* @__PURE__ */ jsx(TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cx(classes.root, className),
+        ref: handleRef,
+        role: Component === defaultComponent ? null : "rowgroup",
+        ...others,
+        children: withNavigation ? Children.map(children, (element) => {
+          if (isValidElement(element)) {
+            return /* @__PURE__ */ jsx(
+              HvFocus,
+              {
+                id: `my-id-${element.key}`,
+                rootRef: bodyRef,
+                strategy: "grid",
+                filterClass: tableSectionContext.filterClassName,
+                navigationJump: 1,
+                focusDisabled: false,
+                selected: element.props.selected,
+                children: element
+              },
+              `row-${element.key}`
+            );
+          }
+        }) : children
+      }
+    ) });
+  }
+);
+export {
+  HvTableBody,
+  staticClasses as tableBodyClasses
+};
+//# sourceMappingURL=TableBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React, {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvFocus } from \"../../Focus\";\nimport { ExtractNames } from \"../../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":[],"mappings":";;;;;;;;AAsCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,KAEL,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAAA;AAAA,UAU7B;AAAA,QACD,CAAA,IACD;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

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

@@ -0,0 +1,9 @@
+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/Table/TableBody/TableBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.styles.js","sources":["../../../../src/Table/TableBody/TableBody.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableBody\", {\n  root: { backgroundColor: \"inherit\", position: \"relative\", zIndex: 0 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,EAAE,iBAAiB,WAAW,UAAU,YAAY,QAAQ,EAAE;AACtE,CAAC;"}

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

@@ -0,0 +1,71 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import capitalize from "lodash/capitalize";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import TableContext from "../TableContext.js";
+import TableSectionContext from "../TableSectionContext.js";
+import { useClasses } from "./TableCell.styles.js";
+import { staticClasses } from "./TableCell.styles.js";
+const defaultComponent = "td";
+const HvTableCell = forwardRef(
+  (props, externalRef) => {
+    const {
+      children,
+      component,
+      className,
+      style,
+      classes: classesProp,
+      align = "inherit",
+      variant = "default",
+      type: typeProp,
+      stickyColumn = false,
+      stickyColumnMostLeft = false,
+      stickyColumnLeastRight = false,
+      groupColumnMostLeft = false,
+      groupColumnMostRight = false,
+      sorted = false,
+      resizable = false,
+      resizing = false,
+      ...others
+    } = useDefaultProps("HvTableCell", props);
+    const { classes, cx } = useClasses(classesProp);
+    const tableContext = useContext(TableContext);
+    const tableSectionContext = useContext(TableSectionContext);
+    const type = typeProp || tableSectionContext?.type || "body";
+    const Component = component || tableContext?.components?.Td || defaultComponent;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: externalRef,
+        role: Component === defaultComponent ? null : "cell",
+        style,
+        className: cx(
+          classes.root,
+          classes[type],
+          {
+            [classes[`align${capitalize(align)}`]]: align !== "inherit",
+            [classes.variantList]: tableContext.variant === "listrow",
+            [classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
+            [classes[`variant${capitalize(variant)}`]]: variant !== "default",
+            [classes.sorted]: sorted,
+            [classes.stickyColumn]: stickyColumn,
+            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,
+            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,
+            [classes.groupColumnMostLeft]: groupColumnMostLeft,
+            [classes.groupColumnMostRight]: groupColumnMostRight,
+            [classes.resizable]: resizable,
+            [classes.resizing]: resizing
+          },
+          className
+        ),
+        ...others,
+        children
+      }
+    );
+  }
+);
+export {
+  HvTableCell,
+  staticClasses as tableCellClasses
+};
+//# sourceMappingURL=TableCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, TdHTMLAttributes, useContext } from \"react\";\nimport capitalize from \"lodash/capitalize\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\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\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    } = useDefaultProps(\"HvTableCell\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\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          {\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":[],"mappings":";;;;;;;;AAqDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAI;AAAA,UACZ;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAAE,CAAC,GAAG,UAAU;AAAA,YAClD,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QAAQ,UAAU,WAAW,OAAO,CAAC,EAAE,CAAC,GAAG,YAAY;AAAA,YACxD,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

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

@@ -0,0 +1,165 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const sortedColor = theme.alpha("primary", 0.1);
+const { staticClasses, useClasses } = createClasses("HvTableCell", {
+  /** Styles applied to the component root class. */
+  root: {
+    verticalAlign: "inherit",
+    textAlign: "left",
+    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${theme.space.xs} - 3px ) ${theme.spacing(4)}`,
+    borderBottom: `1px solid ${theme.colors.atmo4}`
+  },
+  /** Styles applied to the cell when it's in the table head. */
+  head: {
+    height: 52,
+    verticalAlign: "top",
+    backgroundColor: theme.colors.atmo1,
+    borderTop: "1px solid transparent",
+    borderBottom: `1px solid ${theme.colors.atmo4}`,
+    ...theme.typography.label
+  },
+  /** Styles applied to the cell when it's in the table body. */
+  body: {
+    minHeight: 32,
+    "td&": {
+      height: 32
+    },
+    backgroundColor: "inherit",
+    ...theme.typography.body,
+    fontFamily: theme.fontFamily.body,
+    "&$sorted": {
+      backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`
+    }
+  },
+  /** Styles applied to the cell when it's in the table footer. */
+  footer: {},
+  /** Styles applied to the cell when it's part of a sorted column. */
+  sorted: {},
+  /** Styles applied to the component root when it is left aligned */
+  alignLeft: {
+    textAlign: "left"
+  },
+  /** Styles applied to the component root when it is center aligned */
+  alignCenter: {
+    textAlign: "center"
+  },
+  /** Styles applied to the component root when it is right aligned */
+  alignRight: {
+    textAlign: "right",
+    flexDirection: "row-reverse"
+  },
+  /** Styles applied to the component root when it is justified */
+  alignJustify: {
+    textAlign: "justify"
+  },
+  /** Styles applied to the component root when its variant is none */
+  variantNone: {
+    padding: 0
+  },
+  /** Styles applied to the component root when its variant is checkbox */
+  variantCheckbox: {
+    boxSizing: "content-box",
+    padding: 0,
+    width: 32,
+    maxWidth: 32,
+    borderRight: `solid 1px ${theme.colors.atmo4}`
+  },
+  /** Styles applied to the component root when its variant is actions */
+  variantActions: {
+    boxSizing: "content-box",
+    padding: 0,
+    width: 32,
+    maxWidth: 32,
+    borderLeft: `solid 1px ${theme.colors.atmo4}`
+  },
+  /** Styles applied to the component root when its variant is expand */
+  variantExpand: {
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  /** Styles applied to the component root when its variant is list */
+  variantList: {
+    minHeight: 52,
+    "td&": {
+      height: 52
+    },
+    padding: "0, 0, 0, 32px",
+    border: 0
+  },
+  /** Styles applied to the cell when its variant is list and the type is head. */
+  variantListHead: {
+    backgroundColor: "inherit",
+    "td&": {
+      height: 16
+    }
+  },
+  /** Styles applied to the cell when its variant is list and actions. */
+  variantListactions: {
+    verticalAlign: "middle",
+    borderLeft: "none",
+    paddingLeft: "0",
+    textAlign: "center",
+    width: 130,
+    maxWidth: 130
+  },
+  /** Styles applied to the cell when its variant is list and checkbox. */
+  variantListcheckbox: {
+    borderRight: "none",
+    padding: 0,
+    textAlign: "center",
+    width: 34,
+    maxWidth: 34
+  },
+  /** Styles applied to the cell when it's part of a sticky column. */
+  stickyColumn: {
+    position: "sticky",
+    zIndex: 2,
+    backgroundColor: theme.colors.atmo2,
+    "&$groupColumnMostRight+$stickyColumn": {
+      borderLeft: 0
+    }
+  },
+  /** Styles applied to the cell when it's part of the last sticky to the left column. */
+  stickyColumnMostLeft: {
+    borderRight: `solid 1px ${theme.colors.atmo4}`
+  },
+  /** Styles applied to the cell when it's part of the first right sticky column. */
+  stickyColumnLeastRight: {
+    borderLeft: `solid 1px ${theme.colors.atmo4}`
+  },
+  /** Styles applied to the cell when it's part of the first column in the group. */
+  groupColumnMostLeft: {
+    borderLeft: `solid 1px ${theme.colors.atmo4}`,
+    "&:first-of-type": {
+      borderLeft: 0
+    }
+  },
+  /** Styles applied to the cell when it's part of the last column in the group. */
+  groupColumnMostRight: {
+    borderRight: `solid 1px ${theme.colors.atmo4}`,
+    // due to the ":has()" selector not being supported in browsers,
+    // this need to be managed with inline styles
+    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)
+    // "&:last-child,&:has(+ $stickyColumnLeastRight)": {
+    "&:last-child": {
+      borderRight: 0
+    },
+    "&+:not($stickyColumn)": {
+      borderLeft: 0
+    }
+  },
+  /** Styles applied to the cell when it's part of a resizable column. */
+  resizable: {
+    borderRight: `solid 1px ${theme.colors.atmo4}`
+  },
+  /** Styles applied to the cell when it's part of a resizing column. */
+  resizing: {
+    borderRight: `solid 2px ${theme.colors.secondary}`
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TableCell.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst sortedColor = theme.alpha(\"primary\", 0.1);\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as CSSProperties),\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as CSSProperties),\n    fontFamily: theme.fontFamily.body,\n\n    \"&$sorted\": {\n      backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n});\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,23 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "./TableContainer.styles.js";
+import { staticClasses } from "./TableContainer.styles.js";
+const HvTableContainer = forwardRef(
+  ({ classes: classesProp, className, component, ...others }, externalRef) => {
+    const { classes, cx } = useClasses(classesProp);
+    const Component = component || "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: externalRef,
+        className: cx(classes.root, className),
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvTableContainer,
+  staticClasses as tableContainerClasses
+};
+//# sourceMappingURL=TableContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContainer.js","sources":["../../../../src/Table/TableContainer/TableContainer.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../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":[],"mappings":";;;;AA6BO,MAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,SAAS,aAAa,WAAW,WAAW,GAAG,OAAO,GAAG,gBAAgB;AAC1E,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,YAAY,aAAa;AAG7B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

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

@@ -0,0 +1,14 @@
+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/Table/TableContainer/TableContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContainer.styles.js","sources":["../../../../src/Table/TableContainer/TableContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../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":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA;AAAA,IAEV,eAAe;AAAA,EACjB;AACF,CAAC;"}

package/dist/esm/Table/TableContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const TableContext = createContext({});
+const TableContext$1 = TableContext;
+export {
+  TableContext$1 as default
+};
+//# sourceMappingURL=TableContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.js","sources":["../../../src/Table/TableContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type TableContextProps = {\n  components?: any;\n  variant?: string;\n};\n\nconst TableContext = createContext<TableContextProps>({});\n\nexport default TableContext;\n"],"names":[],"mappings":";AAOA,MAAM,eAAe,cAAiC,CAAA,CAAE;AAExD,MAAA,iBAAe;"}

package/dist/esm/Table/TableHead/TableHead.js

@@ -0,0 +1,35 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import TableContext from "../TableContext.js";
+import TableSectionContext from "../TableSectionContext.js";
+import { useClasses } from "./TableHead.styles.js";
+import { staticClasses } from "./TableHead.styles.js";
+const tableSectionContext = {
+  type: "head"
+};
+const defaultComponent = "thead";
+const HvTableHead = forwardRef(
+  ({ classes: classesProp, className, component, stickyHeader, ...others }, externalRef) => {
+    const { classes, cx } = useClasses(classesProp);
+    const tableContext = useContext(TableContext);
+    const Component = component || tableContext?.components?.THead || defaultComponent;
+    return /* @__PURE__ */ jsx(TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cx(
+          classes.root,
+          { [classes.stickyHeader]: stickyHeader },
+          className
+        ),
+        ref: externalRef,
+        role: Component === defaultComponent ? null : "rowgroup",
+        ...others
+      }
+    ) });
+  }
+);
+export {
+  HvTableHead,
+  staticClasses as tableHeadClasses
+};
+//# sourceMappingURL=TableHead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","sources":["../../../../src/Table/TableHead/TableHead.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHead.styles\";\n\nexport { staticClasses as tableHeadClasses };\n\nexport type HvTableHeadClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeadProps\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 thead.\n   */\n  component?: React.ElementType;\n  /**\n   * The table has sticky headers.\n   */\n  stickyHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeadClasses;\n}\n\nconst tableSectionContext = {\n  type: \"head\",\n};\n\nconst defaultComponent = \"thead\";\n\n/**\n * HvTableHead acts as a `thead` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit header-specific styles\n */\nexport const HvTableHead = forwardRef<HTMLElement, HvTableHeadProps>(\n  (\n    { classes: classesProp, className, component, stickyHeader, ...others },\n    externalRef\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const Component =\n      component || tableContext?.components?.THead || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(\n            classes.root,\n            { [classes.stickyHeader]: stickyHeader },\n            className\n          )}\n          ref={externalRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        />\n      </TableSectionContext.Provider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAgCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE,EAAE,SAAS,aAAa,WAAW,WAAW,cAAc,GAAG,OAAO,GACtE,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAE5C,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,UACvC;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

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

@@ -0,0 +1,10 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvTableHead", {
+  root: {},
+  stickyHeader: { position: "sticky", zIndex: 3, top: 0 }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TableHead.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.styles.js","sources":["../../../../src/Table/TableHead/TableHead.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHead\", {\n  root: {},\n  stickyHeader: { position: \"sticky\", zIndex: 3, top: 0 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,cAAc,EAAE,UAAU,UAAU,QAAQ,GAAG,KAAK,EAAE;AACxD,CAAC;"}