@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Table/TableHeader/TableHeader.js

@@ -1,130 +1,79 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../Typography/Typography.js";
+import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
 import { HvIcon } from "../../icons.js";
 import { capitalize } from "../../utils/helpers.js";
 import TableContext from "../TableContext.js";
 import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableHeader.styles.js";
-import { staticClasses } from "./TableHeader.styles.js";
 import { getSortIconName, isParagraph } from "./utils.js";
-import { HvTypography } from "../../Typography/Typography.js";
-import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
-const defaultComponent = "th";
-const HvTableHeader = forwardRef(
-  function HvTableHeader2(props, ref) {
-    const {
-      children,
-      component,
-      className,
-      style: styleProp,
-      classes: classesProp,
-      scope: scopeProp,
-      align = "inherit",
-      variant = "default",
-      type: typeProp,
-      stickyColumn = false,
-      stickyColumnMostLeft = false,
-      stickyColumnLeastRight = false,
-      groupColumnMostLeft = false,
-      groupColumnMostRight = false,
-      sortDirection = "none",
-      sorted,
-      sortable,
-      headerTextProps,
-      resizerProps = {},
-      resizable = false,
-      resizing = false,
-      sortButtonProps,
-      ...others
-    } = useDefaultProps("HvTableHeader", props);
-    const { classes, cx } = useClasses(classesProp);
-    const tableContext = useContext(TableContext);
-    const tableSectionContext = useContext(TableSectionContext);
-    const type = typeProp || tableSectionContext?.type || "body";
-    const isHeadCell = type === "head";
-    const scope = scopeProp ?? (isHeadCell ? "col" : "row");
-    const Component = component || tableContext?.components?.Th || defaultComponent;
-    const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
-    const paragraph = isParagraph(children);
-    const style = stickyColumn ? { ...styleProp, position: "sticky" } : styleProp;
-    return /* @__PURE__ */ jsxs(
-      Component,
-      {
-        ref,
-        role,
-        scope,
-        style,
-        className: cx(
-          classes.root,
-          classes[type],
-          align !== "inherit" && classes[`align${capitalize(align)}`],
-          variant !== "default" && classes[`variant${capitalize(variant)}`],
-          {
-            [classes.groupColumnMostLeft]: groupColumnMostLeft,
-            [classes.groupColumnMostRight]: groupColumnMostRight,
-            [classes.sortable]: sortable,
-            [classes.sorted]: sorted,
-            [classes.resizable]: resizable,
-            [classes.resizing]: resizing,
-            [classes.stickyColumn]: stickyColumn,
-            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,
-            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,
-            [classes.variantList]: tableContext.variant === "listrow"
-          },
-          className
-        ),
-        "aria-sort": sortable ? sortDirection : void 0,
-        ...others,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-align": align !== "inherit" ? align : void 0,
-              className: cx(
-                classes.headerContent,
-                align !== "inherit" && classes[`alignFlex${capitalize(align)}`]
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  HvTypography,
-                  {
-                    component: "div",
-                    className: cx(classes.headerText, {
-                      [classes.headerParagraph]: paragraph,
-                      [classes.sortableHeaderText]: sortable
-                    }),
-                    variant: "label",
-                    ...headerTextProps,
-                    children
-                  }
-                ),
-                isHeadCell && sortable && /* @__PURE__ */ jsx(
-                  HvButtonBase,
-                  {
-                    className: classes.sortButton,
-                    "aria-label": "Sort",
-                    ...sortButtonProps,
-                    children: /* @__PURE__ */ jsx(
-                      HvIcon,
-                      {
-                        compact: true,
-                        name: getSortIconName(sorted && sortDirection),
-                        className: classes.sortIcon
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          resizable && /* @__PURE__ */ jsx("div", { ...resizerProps, className: classes.resizer })
-        ]
-      }
-    );
-  }
-);
-export {
-  HvTableHeader,
-  staticClasses as tableHeaderClasses
-};
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Table/TableHeader/TableHeader.tsx
+var defaultComponent = "th";
+/**
+* `HvTableHeader` acts as a `th` element and inherits styles from its context
+*/
+var HvTableHeader = forwardRef(function HvTableHeader(props, ref) {
+	const { children, component, className, style: styleProp, classes: classesProp, scope: scopeProp, align = "inherit", variant = "default", type: typeProp, stickyColumn = false, stickyColumnMostLeft = false, stickyColumnLeastRight = false, groupColumnMostLeft = false, groupColumnMostRight = false, sortDirection = "none", sorted, sortable, headerTextProps, resizerProps = {}, resizable = false, resizing = false, sortButtonProps, ...others } = useDefaultProps("HvTableHeader", props);
+	const { classes, cx } = useClasses(classesProp);
+	const tableContext = useContext(TableContext);
+	const tableSectionContext = useContext(TableSectionContext);
+	const type = typeProp || tableSectionContext?.type || "body";
+	const isHeadCell = type === "head";
+	const scope = scopeProp ?? (isHeadCell ? "col" : "row");
+	const Component = component || tableContext?.components?.Th || defaultComponent;
+	const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
+	const paragraph = isParagraph(children);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref,
+		role,
+		scope,
+		style: stickyColumn ? {
+			...styleProp,
+			position: "sticky"
+		} : styleProp,
+		className: cx(classes.root, classes[type], align !== "inherit" && classes[`align${capitalize(align)}`], variant !== "default" && classes[`variant${capitalize(variant)}`], {
+			[classes.groupColumnMostLeft]: groupColumnMostLeft,
+			[classes.groupColumnMostRight]: groupColumnMostRight,
+			[classes.sortable]: sortable,
+			[classes.sorted]: sorted,
+			[classes.resizable]: resizable,
+			[classes.resizing]: resizing,
+			[classes.stickyColumn]: stickyColumn,
+			[classes.stickyColumnMostLeft]: stickyColumnMostLeft,
+			[classes.stickyColumnLeastRight]: stickyColumnLeastRight,
+			[classes.variantList]: tableContext.variant === "listrow"
+		}, className),
+		"aria-sort": sortable ? sortDirection : void 0,
+		...others,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-align": align !== "inherit" ? align : void 0,
+			className: cx(classes.headerContent, align !== "inherit" && classes[`alignFlex${capitalize(align)}`]),
+			children: [/* @__PURE__ */ jsx(HvTypography, {
+				component: "div",
+				className: cx(classes.headerText, {
+					[classes.headerParagraph]: paragraph,
+					[classes.sortableHeaderText]: sortable
+				}),
+				variant: "label",
+				...headerTextProps,
+				children
+			}), isHeadCell && sortable && /* @__PURE__ */ jsx(HvButtonBase, {
+				className: classes.sortButton,
+				"aria-label": "Sort",
+				...sortButtonProps,
+				children: /* @__PURE__ */ jsx(HvIcon, {
+					compact: true,
+					name: getSortIconName(sorted && sortDirection),
+					className: classes.sortIcon
+				})
+			})]
+		}), resizable && /* @__PURE__ */ jsx("div", {
+			...resizerProps,
+			className: classes.resizer
+		})]
+	});
+});
+//#endregion
+export { HvTableHeader };

package/dist/Table/TableHeader/TableHeader.styles.js

@@ -1,152 +1,137 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvTableHeader", {
-  root: {
-    "--first-row-cell-height": "32px",
-    "--cell-height": "32px",
-    height: "var(--cell-height)",
-    verticalAlign: "inherit",
-    alignContent: "inherit",
-    textAlign: "left",
-    padding: theme.spacing(0, "sm"),
-    borderColor: theme.colors.border,
-    borderBottomWidth: 1
-  },
-  head: {
-    fontWeight: theme.fontWeights.semibold,
-    backgroundColor: theme.colors.bgContainer,
-    borderBottomWidth: 1,
-    "*:first-of-type > &": {
-      height: "var(--first-row-cell-height)",
-      borderTop: "1px solid transparent"
-    },
-    "&$variantList": {
-      backgroundColor: "inherit",
-      borderBottomWidth: 0,
-      "*:first-of-type > &": {
-        borderTop: 0
-      }
-    },
-    "&$sortable": {
-      cursor: "pointer",
-      ":hover, :focus-within": {
-        backgroundColor: theme.colors.bgHover,
-        "& $sortButton": {
-          opacity: 1
-        }
-      }
-    }
-  },
-  body: {
-    backgroundColor: "inherit",
-    ...theme.typography.body,
-    ":where($sorted)": {
-      backgroundColor: theme.alpha("bgContainer", 0.4)
-    }
-  },
-  footer: {},
-  stickyColumn: {
-    position: "sticky",
-    zIndex: 2,
-    "&$groupColumnMostRight+$stickyColumn": {
-      borderLeftWidth: 0
-    }
-  },
-  stickyColumnMostLeft: { borderRightWidth: 1 },
-  stickyColumnLeastRight: { borderLeftWidth: 1 },
-  groupColumnMostLeft: { borderLeftWidth: 1 },
-  groupColumnMostRight: {
-    borderRightWidth: 1,
-    // 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": {
-      borderRightWidth: 0
-    },
-    "&+:not($stickyColumn)": {
-      borderLeftWidth: 0
-    }
-  },
-  headerContent: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.space.xxs,
-    width: "100%"
-  },
-  headerText: { overflow: "hidden", textOverflow: "ellipsis" },
-  headerParagraph: { textOverflow: "inherit", display: "-webkit-box" },
-  /** @deprecated use `sortable: &$headerText` */
-  sortableHeaderText: {},
-  sorted: {
-    "& $sortButton": {
-      opacity: 1
-    }
-  },
-  sortable: {},
-  sortButton: {
-    opacity: 0,
-    paddingLeft: 4,
-    paddingTop: 4,
-    ":focus-visible,:hover": {
-      boxShadow: "none",
-      backgroundColor: "transparent"
-    }
-  },
-  /** @deprecated use `classes.sortButton` instead */
-  sortIcon: {},
-  // TODO: deprecate & merge these classes in favour of data-align
-  alignLeft: { textAlign: "left" },
-  alignRight: { textAlign: "right", flexDirection: "row-reverse" },
-  alignCenter: { textAlign: "center" },
-  alignJustify: { textAlign: "justify" },
-  alignFlexLeft: { justifyContent: "flex-start" },
-  alignFlexRight: { flexDirection: "row-reverse" },
-  alignFlexCenter: { justifyContent: "center" },
-  alignFlexJustify: { textAlign: "justify" },
-  variantCheckbox: {
-    padding: 0,
-    width: 32,
-    maxWidth: 32,
-    borderRightWidth: 1
-  },
-  variantExpand: {},
-  variantActions: {
-    padding: 0,
-    width: 32,
-    maxWidth: 32,
-    borderLeftWidth: 1
-  },
-  variantNone: { padding: 0 },
-  variantList: {
-    backgroundColor: "inherit",
-    borderBottomWidth: 0,
-    height: 16,
-    ":first-of-type > &": {
-      borderTopWidth: 0,
-      height: 16
-    }
-  },
-  resizable: {
-    borderRightWidth: 1,
-    ":has($resizer:hover)": {
-      borderRight: `2px solid ${theme.colors.primaryStrong}`
-    }
-  },
-  resizing: { borderRight: `2px solid ${theme.colors.primaryStrong}` },
-  resizer: {
-    display: "inline-block",
-    width: 16,
-    height: "100%",
-    position: "absolute",
-    right: 0,
-    top: 0,
-    transform: "translateX(50%)",
-    zIndex: 1,
-    touchAction: "none"
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Table/TableHeader/TableHeader.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvTableHeader", {
+	root: {
+		"--first-row-cell-height": "32px",
+		"--cell-height": "32px",
+		height: "var(--cell-height)",
+		verticalAlign: "inherit",
+		alignContent: "inherit",
+		textAlign: "left",
+		padding: theme.spacing(0, "sm"),
+		borderColor: theme.colors.border,
+		borderBottomWidth: 1
+	},
+	head: {
+		fontWeight: theme.fontWeights.semibold,
+		backgroundColor: theme.colors.bgContainer,
+		borderBottomWidth: 1,
+		"*:first-of-type > &": {
+			height: "var(--first-row-cell-height)",
+			borderTop: "1px solid transparent"
+		},
+		"&$variantList": {
+			backgroundColor: "inherit",
+			borderBottomWidth: 0,
+			"*:first-of-type > &": { borderTop: 0 }
+		},
+		"&$sortable": {
+			cursor: "pointer",
+			":hover, :focus-within": {
+				backgroundColor: theme.colors.bgHover,
+				"& $sortButton": { opacity: 1 }
+			}
+		}
+	},
+	body: {
+		backgroundColor: "inherit",
+		...theme.typography.body,
+		":where($sorted)": { backgroundColor: theme.alpha("bgContainer", .4) }
+	},
+	footer: {},
+	stickyColumn: {
+		position: "sticky",
+		zIndex: 2,
+		"&$groupColumnMostRight+$stickyColumn": { borderLeftWidth: 0 }
+	},
+	stickyColumnMostLeft: { borderRightWidth: 1 },
+	stickyColumnLeastRight: { borderLeftWidth: 1 },
+	groupColumnMostLeft: { borderLeftWidth: 1 },
+	groupColumnMostRight: {
+		borderRightWidth: 1,
+		"&:last-child": { borderRightWidth: 0 },
+		"&+:not($stickyColumn)": { borderLeftWidth: 0 }
+	},
+	headerContent: {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.space.xxs,
+		width: "100%"
+	},
+	headerText: {
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	},
+	headerParagraph: {
+		textOverflow: "inherit",
+		display: "-webkit-box"
+	},
+	/** @deprecated use `sortable: &$headerText` */
+	sortableHeaderText: {},
+	sorted: { "& $sortButton": { opacity: 1 } },
+	sortable: {},
+	sortButton: {
+		opacity: 0,
+		paddingLeft: 4,
+		paddingTop: 4,
+		":focus-visible,:hover": {
+			boxShadow: "none",
+			backgroundColor: "transparent"
+		}
+	},
+	/** @deprecated use `classes.sortButton` instead */
+	sortIcon: {},
+	alignLeft: { textAlign: "left" },
+	alignRight: {
+		textAlign: "right",
+		flexDirection: "row-reverse"
+	},
+	alignCenter: { textAlign: "center" },
+	alignJustify: { textAlign: "justify" },
+	alignFlexLeft: { justifyContent: "flex-start" },
+	alignFlexRight: { flexDirection: "row-reverse" },
+	alignFlexCenter: { justifyContent: "center" },
+	alignFlexJustify: { textAlign: "justify" },
+	variantCheckbox: {
+		padding: 0,
+		width: 32,
+		maxWidth: 32,
+		borderRightWidth: 1
+	},
+	variantExpand: {},
+	variantActions: {
+		padding: 0,
+		width: 32,
+		maxWidth: 32,
+		borderLeftWidth: 1
+	},
+	variantNone: { padding: 0 },
+	variantList: {
+		backgroundColor: "inherit",
+		borderBottomWidth: 0,
+		height: 16,
+		":first-of-type > &": {
+			borderTopWidth: 0,
+			height: 16
+		}
+	},
+	resizable: {
+		borderRightWidth: 1,
+		":has($resizer:hover)": { borderRight: `2px solid ${theme.colors.primaryStrong}` }
+	},
+	resizing: { borderRight: `2px solid ${theme.colors.primaryStrong}` },
+	resizer: {
+		display: "inline-block",
+		width: 16,
+		height: "100%",
+		position: "absolute",
+		right: 0,
+		top: 0,
+		transform: "translateX(50%)",
+		zIndex: 1,
+		touchAction: "none"
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Table/TableHeader/utils.js

@@ -1,17 +1,13 @@
-const getSortIconName = (dir) => {
-  switch (dir) {
-    case "ascending":
-      return "SortAsc";
-    case "descending":
-      return "SortDesc";
-    default:
-      return "Sort";
-  }
+//#region src/Table/TableHeader/utils.ts
+var getSortIconName = (dir) => {
+	switch (dir) {
+		case "ascending": return "SortAsc";
+		case "descending": return "SortDesc";
+		default: return "Sort";
+	}
 };
-const isParagraph = (children) => {
-  return typeof children === "string" && /\s/.test(children);
-};
-export {
-  getSortIconName,
-  isParagraph
+var isParagraph = (children) => {
+	return typeof children === "string" && /\s/.test(children);
 };
+//#endregion
+export { getSortIconName, isParagraph };

package/dist/Table/TableRow/TableRow.js

@@ -1,54 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import TableContext from "../TableContext.js";
 import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableRow.styles.js";
-import { staticClasses } from "./TableRow.styles.js";
-const defaultComponent = "tr";
-const HvTableRow = forwardRef(
-  function HvTableRow2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      component,
-      hover = false,
-      selected = false,
-      expanded = false,
-      striped = false,
-      ...others
-    } = useDefaultProps("HvTableRow", props);
-    const { classes, cx } = useClasses(classesProp);
-    const tableContext = useContext(TableContext);
-    const tableSectionContext = useContext(TableSectionContext);
-    const type = tableSectionContext?.type || "body";
-    const isList = tableContext.variant === "listrow";
-    const Component = component || tableContext?.components?.Tr || defaultComponent;
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cx(
-          tableSectionContext.filterClassName,
-          classes.root,
-          classes[type],
-          {
-            [classes.hover]: hover,
-            [classes.selected]: selected,
-            [classes.expanded]: expanded,
-            [classes.striped]: striped,
-            [classes.variantList]: isList && type === "body",
-            [classes.variantListHead]: isList && type === "head"
-          },
-          className
-        ),
-        role: Component === defaultComponent ? null : "row",
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvTableRow,
-  staticClasses as tableRowClasses
-};
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableRow/TableRow.tsx
+var defaultComponent = "tr";
+/**
+* `HvTableRow` acts as a `tr` element and inherits styles from its context
+*/
+var HvTableRow = forwardRef(function HvTableRow(props, ref) {
+	const { classes: classesProp, className, component, hover = false, selected = false, expanded = false, striped = false, ...others } = useDefaultProps("HvTableRow", props);
+	const { classes, cx } = useClasses(classesProp);
+	const tableContext = useContext(TableContext);
+	const tableSectionContext = useContext(TableSectionContext);
+	const type = tableSectionContext?.type || "body";
+	const isList = tableContext.variant === "listrow";
+	const Component = component || tableContext?.components?.Tr || defaultComponent;
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: cx(tableSectionContext.filterClassName, classes.root, classes[type], {
+			[classes.hover]: hover,
+			[classes.selected]: selected,
+			[classes.expanded]: expanded,
+			[classes.striped]: striped,
+			[classes.variantList]: isList && type === "body",
+			[classes.variantListHead]: isList && type === "head"
+		}, className),
+		role: Component === defaultComponent ? null : "row",
+		...others
+	});
+});
+//#endregion
+export { HvTableRow };