@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Grid/Grid.js

@@ -1,124 +1,94 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import MuiGrid from "@mui/material/GridLegacy";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useWidth } from "../hooks/useWidth.js";
 import { useClasses } from "./Grid.styles.js";
-import { staticClasses } from "./Grid.styles.js";
-const BREAKPOINT_GUTTERS = {
-  xs: 2,
-  sm: 2,
-  md: 4,
-  lg: 4,
-  xl: 4
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import MuiGrid from "@mui/material/GridLegacy";
+//#region src/Grid/Grid.tsx
+var BREAKPOINT_GUTTERS = {
+	xs: 2,
+	sm: 2,
+	md: 4,
+	lg: 4,
+	xl: 4
 };
-const BREAKPOINT_COLUMNS = {
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 12,
-  xl: 12
+var BREAKPOINT_COLUMNS = {
+	xs: 4,
+	sm: 8,
+	md: 12,
+	lg: 12,
+	xl: 12
 };
 function getGridSpacing(spacing) {
-  let gridSpacing;
-  if (typeof spacing === "string") {
-    if (spacing === "auto") {
-      gridSpacing = BREAKPOINT_GUTTERS;
-    } else {
-      gridSpacing = BREAKPOINT_GUTTERS[spacing];
-    }
-  } else if (typeof spacing === "object") {
-    gridSpacing = Object.keys(spacing).reduce(
-      (acc, bp) => {
-        acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];
-        return acc;
-      },
-      {}
-    );
-  } else if (spacing === 0) {
-    gridSpacing = { xs: 0 };
-  } else {
-    gridSpacing = spacing;
-  }
-  return gridSpacing;
+	let gridSpacing;
+	if (typeof spacing === "string") if (spacing === "auto") gridSpacing = BREAKPOINT_GUTTERS;
+	else gridSpacing = BREAKPOINT_GUTTERS[spacing];
+	else if (typeof spacing === "object") gridSpacing = Object.keys(spacing).reduce((acc, bp) => {
+		acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];
+		return acc;
+	}, {});
+	else if (spacing === 0) gridSpacing = { xs: 0 };
+	else gridSpacing = spacing;
+	return gridSpacing;
 }
 function getNumberOfColumns(columns) {
-  let numberOfColumns;
-  if (columns === "auto") {
-    numberOfColumns = BREAKPOINT_COLUMNS;
-  } else {
-    numberOfColumns = columns;
-  }
-  return numberOfColumns;
+	let numberOfColumns;
+	if (columns === "auto") numberOfColumns = BREAKPOINT_COLUMNS;
+	else numberOfColumns = columns;
+	return numberOfColumns;
 }
 function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
-  const containerProps = { container: true };
-  if (spacing != null) {
-    containerProps.spacing = getGridSpacing(spacing);
-  }
-  if (rowSpacing != null) {
-    containerProps.rowSpacing = getGridSpacing(rowSpacing);
-  }
-  if (columnSpacing != null) {
-    containerProps.columnSpacing = getGridSpacing(columnSpacing);
-  }
-  if (columns != null) {
-    containerProps.columns = getNumberOfColumns(columns);
-  }
-  return containerProps;
+	const containerProps = { container: true };
+	if (spacing != null) containerProps.spacing = getGridSpacing(spacing);
+	if (rowSpacing != null) containerProps.rowSpacing = getGridSpacing(rowSpacing);
+	if (columnSpacing != null) containerProps.columnSpacing = getGridSpacing(columnSpacing);
+	if (columns != null) containerProps.columns = getNumberOfColumns(columns);
+	return containerProps;
 }
-const WidthGrid = forwardRef(function WidthGrid2(props, ref) {
-  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
-  const width = useWidth();
-  const containerProps = container ? getContainerProps(
-    spacing === "auto" ? width : spacing,
-    rowSpacing === "auto" ? width : rowSpacing,
-    columnSpacing === "auto" ? width : columnSpacing,
-    columns
-  ) : {};
-  return /* @__PURE__ */ jsx(MuiGrid, { ref, ...containerProps, ...others });
+var WidthGrid = forwardRef(function WidthGrid(props, ref) {
+	const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
+	const width = useWidth();
+	return /* @__PURE__ */ jsx(MuiGrid, {
+		ref,
+		...container ? getContainerProps(spacing === "auto" ? width : spacing, rowSpacing === "auto" ? width : rowSpacing, columnSpacing === "auto" ? width : columnSpacing, columns) : {},
+		...others
+	});
 });
-const HvGrid = forwardRef(function HvGrid2(props, ref) {
-  const {
-    item,
-    container,
-    spacing = "auto",
-    rowSpacing,
-    columnSpacing,
-    columns,
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvGrid", props);
-  const { classes } = useClasses(classesProp);
-  if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) {
-    return /* @__PURE__ */ jsx(
-      WidthGrid,
-      {
-        ref,
-        classes,
-        item,
-        container,
-        spacing,
-        rowSpacing,
-        columnSpacing,
-        columns,
-        ...others
-      }
-    );
-  }
-  const containerProps = container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {};
-  return /* @__PURE__ */ jsx(
-    MuiGrid,
-    {
-      ref,
-      classes,
-      item,
-      ...containerProps,
-      ...others
-    }
-  );
+/**
+* The grid creates visual consistency between layouts while allowing flexibility
+* across a wide variety of designs. This component is based on a 12-column grid layout.
+*
+* It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).
+*
+* However, the number of columns is set to 12 for all breakpoints, as it serves most
+* of the use cases and simplifies the implementation.
+* To opt-in to the Design System directives, you can set the `columns` prop to `auto`.
+*
+* Also, the Design System specifications are omissive about the horizontal gutters.
+* The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.
+* It can be overridden by setting the `rowSpacing` prop.
+*/
+var HvGrid = forwardRef(function HvGrid(props, ref) {
+	const { item, container, spacing = "auto", rowSpacing, columnSpacing, columns, classes: classesProp, ...others } = useDefaultProps("HvGrid", props);
+	const { classes } = useClasses(classesProp);
+	if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) return /* @__PURE__ */ jsx(WidthGrid, {
+		ref,
+		classes,
+		item,
+		container,
+		spacing,
+		rowSpacing,
+		columnSpacing,
+		columns,
+		...others
+	});
+	return /* @__PURE__ */ jsx(MuiGrid, {
+		ref,
+		classes,
+		item,
+		...container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {},
+		...others
+	});
 });
-export {
-  HvGrid,
-  staticClasses as gridClasses
-};
+//#endregion
+export { HvGrid };

package/dist/Grid/Grid.styles.js

@@ -1,40 +1,39 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvGrid", {
-  root: {},
-  container: {},
-  item: {},
-  zeroMinWidth: {},
-  "direction-xs-column": {},
-  "direction-xs-reverse": {},
-  "direction-xs-row-reverse": {},
-  "wrap-xs-nowrap": {},
-  "wrap-xs-wrap-reverse": {},
-  "spacing-xs-1": {},
-  "spacing-xs-2": {},
-  "spacing-xs-3": {},
-  "spacing-xs-4": {},
-  "spacing-xs-5": {},
-  "spacing-xs-6": {},
-  "spacing-xs-7": {},
-  "spacing-xs-8": {},
-  "spacing-xs-9": {},
-  "spacing-xs-10": {},
-  "grid-xs-auto": {},
-  "grid-xs-true": {},
-  "grid-xs-1": {},
-  "grid-xs-2": {},
-  "grid-xs-3": {},
-  "grid-xs-4": {},
-  "grid-xs-5": {},
-  "grid-xs-6": {},
-  "grid-xs-7": {},
-  "grid-xs-8": {},
-  "grid-xs-9": {},
-  "grid-xs-10": {},
-  "grid-xs-11": {},
-  "grid-xs-12": {}
+//#region src/Grid/Grid.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvGrid", {
+	root: {},
+	container: {},
+	item: {},
+	zeroMinWidth: {},
+	"direction-xs-column": {},
+	"direction-xs-reverse": {},
+	"direction-xs-row-reverse": {},
+	"wrap-xs-nowrap": {},
+	"wrap-xs-wrap-reverse": {},
+	"spacing-xs-1": {},
+	"spacing-xs-2": {},
+	"spacing-xs-3": {},
+	"spacing-xs-4": {},
+	"spacing-xs-5": {},
+	"spacing-xs-6": {},
+	"spacing-xs-7": {},
+	"spacing-xs-8": {},
+	"spacing-xs-9": {},
+	"spacing-xs-10": {},
+	"grid-xs-auto": {},
+	"grid-xs-true": {},
+	"grid-xs-1": {},
+	"grid-xs-2": {},
+	"grid-xs-3": {},
+	"grid-xs-4": {},
+	"grid-xs-5": {},
+	"grid-xs-6": {},
+	"grid-xs-7": {},
+	"grid-xs-8": {},
+	"grid-xs-9": {},
+	"grid-xs-10": {},
+	"grid-xs-11": {},
+	"grid-xs-12": {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Header/Actions/Actions.js

@@ -1,19 +1,17 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Actions.styles.js";
-import { staticClasses } from "./Actions.styles.js";
-const HvHeaderActions = forwardRef(function HvHeaderActions2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    children,
-    ...others
-  } = useDefaultProps("HvHeaderActions", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Header/Actions/Actions.tsx
+var HvHeaderActions = forwardRef(function HvHeaderActions(props, ref) {
+	const { classes: classesProp, className, children, ...others } = useDefaultProps("HvHeaderActions", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx(classes.root, className),
+		...others,
+		children
+	});
 });
-export {
-  HvHeaderActions,
-  staticClasses as headerActionsClasses
-};
+//#endregion
+export { HvHeaderActions };

package/dist/Header/Actions/Actions.styles.js

@@ -1,16 +1,13 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvHeaderActions", {
-  root: {
-    backgroundColor: "transparent",
-    display: "flex",
-    gap: theme.space.xs,
-    alignItems: "center",
-    justifyContent: "flex-end",
-    marginLeft: "auto"
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Header/Actions/Actions.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvHeaderActions", { root: {
+	backgroundColor: "transparent",
+	display: "flex",
+	gap: theme.space.xs,
+	alignItems: "center",
+	justifyContent: "flex-end",
+	marginLeft: "auto"
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/Header/Brand/Brand.js

@@ -1,25 +1,29 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Brand.styles.js";
-import { staticClasses } from "./Brand.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const HvHeaderBrand = forwardRef(function HvHeaderBrand2(props, ref) {
-  const {
-    classes: classesProp,
-    logo,
-    name,
-    className,
-    ...others
-  } = useDefaultProps("HvHeaderBrand", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-    logo,
-    logo && name && /* @__PURE__ */ jsx("div", { className: classes.separator }),
-    name && /* @__PURE__ */ jsx(HvTypography, { className: classes.brandName, variant: "label", children: name })
-  ] });
+import { useClasses } from "./Brand.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Header/Brand/Brand.tsx
+/**
+* Header component is used to render a header bar with logo and brand name, navigation and actions.
+*/
+var HvHeaderBrand = forwardRef(function HvHeaderBrand(props, ref) {
+	const { classes: classesProp, logo, name, className, ...others } = useDefaultProps("HvHeaderBrand", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx(classes.root, className),
+		...others,
+		children: [
+			logo,
+			logo && name && /* @__PURE__ */ jsx("div", { className: classes.separator }),
+			name && /* @__PURE__ */ jsx(HvTypography, {
+				className: classes.brandName,
+				variant: "label",
+				children: name
+			})
+		]
+	});
 });
-export {
-  HvHeaderBrand,
-  staticClasses as headerBrandClasses
-};
+//#endregion
+export { HvHeaderBrand };

package/dist/Header/Brand/Brand.styles.js

@@ -1,16 +1,18 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvHeaderBrand", {
-  root: { display: "flex", alignItems: "center" },
-  separator: {
-    width: 1,
-    height: theme.space.sm,
-    margin: theme.space.xs,
-    backgroundColor: theme.colors.text
-  },
-  brandName: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Header/Brand/Brand.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvHeaderBrand", {
+	root: {
+		display: "flex",
+		alignItems: "center"
+	},
+	separator: {
+		width: 1,
+		height: theme.space.sm,
+		margin: theme.space.xs,
+		backgroundColor: theme.colors.text
+	},
+	brandName: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Header/Header.js

@@ -1,33 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Header.styles.js";
-import { staticClasses } from "./Header.styles.js";
-const HvHeader = forwardRef(function HvHeader2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    children,
-    position = "fixed",
-    ...others
-  } = useDefaultProps("HvHeader", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      ref,
-      style: { position },
-      className: cx(
-        classes.root,
-        { [classes.fixed]: position === "fixed" },
-        className
-      ),
-      ...others,
-      children: /* @__PURE__ */ jsx("div", { className: classes.header, children })
-    }
-  );
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Header/Header.tsx
+/**
+* Header component is used to render a header bar with logo and brand name, navigation and actions.
+*/
+var HvHeader = forwardRef(function HvHeader(props, ref) {
+	const { className, classes: classesProp, children, position = "fixed", ...others } = useDefaultProps("HvHeader", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsx("header", {
+		ref,
+		style: { position },
+		className: cx(classes.root, { [classes.fixed]: position === "fixed" }, className),
+		...others,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classes.header,
+			children
+		})
+	});
 });
-export {
-  HvHeader,
-  staticClasses as headerClasses
-};
+//#endregion
+export { HvHeader };

package/dist/Header/Header.styles.js

@@ -1,32 +1,34 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvHeader", {
-  root: {
-    height: theme.header.height,
-    backgroundColor: theme.colors.bgContainer,
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-    boxSizing: "border-box",
-    flexShrink: 0,
-    zIndex: theme.zIndices.banner,
-    borderTop: "none",
-    boxShadow: theme.colors.shadow
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    padding: theme.spacing(0, "sm"),
-    "& > *:not(nav)": {
-      zIndex: 2
-    }
-  },
-  fixed: { position: "fixed", top: 0, left: "auto", right: 0 }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Header/Header.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvHeader", {
+	root: {
+		height: theme.header.height,
+		backgroundColor: theme.colors.bgContainer,
+		display: "flex",
+		flexDirection: "column",
+		width: "100%",
+		boxSizing: "border-box",
+		flexShrink: 0,
+		zIndex: theme.zIndices.banner,
+		borderTop: "none",
+		boxShadow: theme.colors.shadow
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		width: "100%",
+		height: "100%",
+		position: "relative",
+		padding: theme.spacing(0, "sm"),
+		"& > *:not(nav)": { zIndex: 2 }
+	},
+	fixed: {
+		position: "fixed",
+		top: 0,
+		left: "auto",
+		right: 0
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Header/Navigation/MenuBar/Bar.js

@@ -1,39 +1,26 @@
-import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { SelectionContext } from "../utils/SelectionContext.js";
 import { useClasses } from "./Bar.styles.js";
-import { staticClasses } from "./Bar.styles.js";
-const Bar = (props) => {
-  const {
-    data = [],
-    type = "menubar",
-    className,
-    children,
-    classes: classesProp
-  } = useDefaultProps("HvHeaderMenuBarBar", props);
-  const { classes, cx } = useClasses(classesProp);
-  const selectionPath = useContext(SelectionContext);
-  const isMenu = type === "menu";
-  const isActive = isMenu && data.some((item) => item.id === selectionPath?.[1]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        classes.root,
-        classes[type],
-        {
-          [classes.hidden]: isMenu,
-          [classes.active]: isActive
-        },
-        className
-      ),
-      children: /* @__PURE__ */ jsx("ul", { className: classes.list, onFocus: () => {
-      }, children })
-    }
-  );
-};
-export {
-  Bar,
-  staticClasses as headerMenuBarClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Header/Navigation/MenuBar/Bar.tsx
+var Bar = (props) => {
+	const { data = [], type = "menubar", className, children, classes: classesProp } = useDefaultProps("HvHeaderMenuBarBar", props);
+	const { classes, cx } = useClasses(classesProp);
+	const selectionPath = useContext(SelectionContext);
+	const isMenu = type === "menu";
+	const isActive = isMenu && data.some((item) => item.id === selectionPath?.[1]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, classes[type], {
+			[classes.hidden]: isMenu,
+			[classes.active]: isActive
+		}, className),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: classes.list,
+			onFocus: () => {},
+			children
+		})
+	});
 };
+//#endregion
+export { Bar };