@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Switch/Switch.styles.js

@@ -1,62 +1,51 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvSwitch", {
-  root: {
-    display: "inline-flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  },
-  label: {},
-  error: {},
-  container: {
-    display: "flex",
-    "&$left, &$right": {
-      alignItems: "center"
-    },
-    "&$left": {
-      flexDirection: "row",
-      paddingLeft: theme.space.xs
-    },
-    "&$right": {
-      flexDirection: "row-reverse",
-      paddingRight: theme.space.xs
-    },
-    "&$top": {
-      flexDirection: "column",
-      "&:hover": {
-        backgroundColor: "transparent"
-      },
-      "& $switchContainer:hover .HvBaseSwitch-root": {
-        backgroundColor: theme.colors.bgHover
-      }
-    }
-  },
-  switchContainer: {
-    height: "32px",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    borderBottom: "1px solid transparent"
-  },
-  invalidSwitch: {
-    paddingBottom: "1px",
-    borderBottom: `1px solid ${theme.form.errorColor}`
-  },
-  top: {},
-  left: {
-    "& .HvSwitch-label": {
-      paddingBottom: 0,
-      paddingRight: theme.space.xxs
-    }
-  },
-  right: {
-    "& .HvSwitch-label": {
-      paddingBottom: 0,
-      paddingLeft: theme.space.xxs
-    }
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Switch/Switch.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvSwitch", {
+	root: {
+		display: "inline-flex",
+		flexDirection: "column",
+		alignItems: "flex-start"
+	},
+	label: {},
+	error: {},
+	container: {
+		display: "flex",
+		"&$left, &$right": { alignItems: "center" },
+		"&$left": {
+			flexDirection: "row",
+			paddingLeft: theme.space.xs
+		},
+		"&$right": {
+			flexDirection: "row-reverse",
+			paddingRight: theme.space.xs
+		},
+		"&$top": {
+			flexDirection: "column",
+			"&:hover": { backgroundColor: "transparent" },
+			"& $switchContainer:hover .HvBaseSwitch-root": { backgroundColor: theme.colors.bgHover }
+		}
+	},
+	switchContainer: {
+		height: "32px",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		borderBottom: "1px solid transparent"
+	},
+	invalidSwitch: {
+		paddingBottom: "1px",
+		borderBottom: `1px solid ${theme.form.errorColor}`
+	},
+	top: {},
+	left: { "& .HvSwitch-label": {
+		paddingBottom: 0,
+		paddingRight: theme.space.xxs
+	} },
+	right: { "& .HvSwitch-label": {
+		paddingBottom: 0,
+		paddingLeft: theme.space.xxs
+	} }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Table/Table.js

@@ -1,70 +1,66 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useMemo } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Table.styles.js";
-import { staticClasses } from "./Table.styles.js";
 import TableContext from "./TableContext.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
-  };
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/Table.tsx
+var defaultComponent = "table";
+var 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(function HvTable2(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
-    }
-  ) });
+/**
+* A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.
+*
+* The `HvTable` component offers a set of HTML-equivalent elements, **styled to Design System's specification**,
+* for building tables.
+* You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.
+*
+* For better data handling and **advanced features** we recommend the use of the utility hooks collection.
+* See the [Table Hooks documentation](https://pentaho.github.io/uikit-docs/master/components/table#usehvtable-hooks) for more details.
+*/
+var HvTable = forwardRef(function HvTable(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
-};
+//#endregion
+export { HvTable };

package/dist/Table/Table.styles.js

@@ -1,30 +1,25 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-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.bgPage,
-    "&": {
-      borderSpacing: 0
-    }
-  },
-  listRow: {
-    borderSpacing: `0 ${theme.space.xs}`
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Table/Table.styles.tsx
+var { 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.bgPage,
+		"&": { borderSpacing: 0 }
+	},
+	listRow: { borderSpacing: `0 ${theme.space.xs}` }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Table/TableBody/TableBody.js

@@ -1,61 +1,50 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, Children, isValidElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useForkRef } from "../../hooks/useForkRef.js";
+import { HvFocus } from "../../Focus/Focus.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: "_trgrid"
-};
-const defaultComponent = "tbody";
-const HvTableBody = forwardRef(
-  function HvTableBody2(props, externalRef) {
-    const {
-      classes: classesProp,
-      className,
-      component,
-      children,
-      withNavigation = false,
-      ...others
-    } = useDefaultProps("HvTableBody", props);
-    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 void 0;
-          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
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, forwardRef, isValidElement, useContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableBody/TableBody.tsx
+var tableSectionContext = {
+	type: "body",
+	filterClassName: "_trgrid"
 };
+var defaultComponent = "tbody";
+/**
+* HvTableBody acts as a `tbody` element.
+* `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles
+*/
+var HvTableBody = forwardRef(function HvTableBody(props, externalRef) {
+	const { classes: classesProp, className, component, children, withNavigation = false, ...others } = useDefaultProps("HvTableBody", props);
+	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 void 0;
+				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
+		})
+	});
+});
+//#endregion
+export { HvTableBody };

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

@@ -1,8 +1,9 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvTableBody", {
-  root: { backgroundColor: "inherit", position: "relative", zIndex: 0 }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Table/TableBody/TableBody.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvTableBody", { root: {
+	backgroundColor: "inherit",
+	position: "relative",
+	zIndex: 0
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/Table/TableCell/TableCell.js

@@ -1,70 +1,41 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { capitalize } from "../../utils/helpers.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(
-  function HvTableCell2(props, ref) {
-    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,
-        role: Component === defaultComponent ? null : "cell",
-        style,
-        className: cx(
-          classes.root,
-          classes[type],
-          align !== "inherit" && classes[`align${capitalize(align)}`],
-          variant !== "default" && classes[`variant${capitalize(variant)}`],
-          {
-            [classes.variantList]: tableContext.variant === "listrow",
-            [classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
-            [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
-};
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableCell/TableCell.tsx
+var defaultComponent = "td";
+/**
+* `HvTableCell` acts as a `td` element and inherits styles from its context
+*/
+var HvTableCell = forwardRef(function HvTableCell(props, ref) {
+	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,
+		role: Component === defaultComponent ? null : "cell",
+		style,
+		className: cx(classes.root, classes[type], align !== "inherit" && classes[`align${capitalize(align)}`], variant !== "default" && classes[`variant${capitalize(variant)}`], {
+			[classes.variantList]: tableContext.variant === "listrow",
+			[classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
+			[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
+	});
+});
+//#endregion
+export { HvTableCell };