@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

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

@@ -1,65 +1,58 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const show = {
-  top: theme.header.height,
-  transitionProperty: "top",
-  boxShadow: theme.colors.shadow,
-  transitionDuration: "500ms",
-  backgroundColor: theme.colors.bgPage
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Header/Navigation/MenuBar/Bar.styles.tsx
+var show = {
+	top: theme.header.height,
+	transitionProperty: "top",
+	boxShadow: theme.colors.shadow,
+	transitionDuration: "500ms",
+	backgroundColor: theme.colors.bgPage
 };
-const hide = {
-  top: 0,
-  transitionProperty: "top",
-  boxShadow: "none",
-  transitionDuration: "300ms"
+var hide = {
+	top: 0,
+	transitionProperty: "top",
+	boxShadow: "none",
+	transitionDuration: "300ms"
 };
-const { staticClasses, useClasses } = createClasses("HvHeaderMenuBar", {
-  root: {
-    left: 0,
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  menu: {
-    position: "absolute",
-    zIndex: -2,
-    height: theme.header.secondLevelHeight,
-    backgroundColor: theme.colors.bgPage,
-    "& li > div": {
-      marginTop: 0
-    }
-  },
-  menubar: {
-    position: "relative",
-    backgroundColor: theme.colors.bgContainer
-  },
-  hidden: { ...hide },
-  active: { ...show },
-  list: {
-    margin: 0,
-    padding: 0,
-    display: "inherit",
-    alignItems: "center",
-    height: "100%",
-    "&:hover $active": {
-      ...hide
-    },
-    "& li:hover > $hidden": {
-      ...show
-    },
-    "&:focus-within $active": {
-      ...hide,
-      zIndex: -2
-    },
-    "& li:focus-within > $hidden": {
-      ...show,
-      zIndex: -1
-    }
-  }
+var { staticClasses, useClasses } = createClasses("HvHeaderMenuBar", {
+	root: {
+		left: 0,
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	menu: {
+		position: "absolute",
+		zIndex: -2,
+		height: theme.header.secondLevelHeight,
+		backgroundColor: theme.colors.bgPage,
+		"& li > div": { marginTop: 0 }
+	},
+	menubar: {
+		position: "relative",
+		backgroundColor: theme.colors.bgContainer
+	},
+	hidden: { ...hide },
+	active: { ...show },
+	list: {
+		margin: 0,
+		padding: 0,
+		display: "inherit",
+		alignItems: "center",
+		height: "100%",
+		"&:hover $active": { ...hide },
+		"& li:hover > $hidden": { ...show },
+		"&:focus-within $active": {
+			...hide,
+			zIndex: -2
+		},
+		"& li:focus-within > $hidden": {
+			...show,
+			zIndex: -1
+		}
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

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

@@ -1,29 +1,23 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { Bar } from "./Bar.js";
 import { HvHeaderMenuItem } from "../MenuItem/MenuItem.js";
-const HvHeaderMenuBar = (props) => {
-  const {
-    data = [],
-    onClick,
-    type = "menubar",
-    levels,
-    currentLevel,
-    classes,
-    ...others
-  } = useDefaultProps("HvHeaderMenuBar", props);
-  return /* @__PURE__ */ jsx(Bar, { data, type, classes, ...others, children: data.map((item) => /* @__PURE__ */ jsx(
-    HvHeaderMenuItem,
-    {
-      item,
-      type,
-      onClick,
-      levels,
-      currentLevel
-    },
-    item.id
-  )) });
-};
-export {
-  HvHeaderMenuBar
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/Header/Navigation/MenuBar/MenuBar.tsx
+var HvHeaderMenuBar = (props) => {
+	const { data = [], onClick, type = "menubar", levels, currentLevel, classes, ...others } = useDefaultProps("HvHeaderMenuBar", props);
+	return /* @__PURE__ */ jsx(Bar, {
+		data,
+		type,
+		classes,
+		...others,
+		children: data.map((item) => /* @__PURE__ */ jsx(HvHeaderMenuItem, {
+			item,
+			type,
+			onClick,
+			levels,
+			currentLevel
+		}, item.id))
+	});
 };
+//#endregion
+export { HvHeaderMenuBar };

package/dist/Header/Navigation/MenuItem/MenuItem.js

@@ -1,126 +1,110 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../../Typography/Typography.js";
 import { isKey } from "../../../utils/keyboardUtils.js";
+import { SelectionContext } from "../utils/SelectionContext.js";
 import { Bar } from "../MenuBar/Bar.js";
 import { FocusContext } from "../utils/FocusContext.js";
-import { SelectionContext } from "../utils/SelectionContext.js";
 import { useClasses } from "./MenuItem.styles.js";
-import { staticClasses } from "./MenuItem.styles.js";
-import { HvTypography } from "../../../Typography/Typography.js";
-const traverseItem = (node) => {
-  let href;
-  let target;
-  if (node?.href) {
-    href = node?.href;
-    target = node?.target;
-  } else if (node?.data != null && node?.data?.length > 0) {
-    let i = 0;
-    while (href == null && i < node.data.length) {
-      const childNavItem = traverseItem(node?.data[i]);
-      if (childNavItem?.href != null) {
-        href = childNavItem?.href;
-        target = childNavItem?.target;
-        break;
-      }
-      i += 1;
-    }
-  }
-  return { href, target };
-};
-const HvHeaderMenuItem = (props) => {
-  const {
-    id,
-    item,
-    type,
-    onClick,
-    levels,
-    currentLevel,
-    classes: classesProp,
-    className
-  } = useDefaultProps("HvHeaderMenuItem", props);
-  const { classes, cx } = useClasses(classesProp);
-  const selectionPath = useContext(SelectionContext);
-  const { dispatch } = useContext(FocusContext);
-  const { data } = item;
-  const hasSubLevel = data?.length;
-  const isMenu = type === "menu";
-  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;
-  const isCurrent = isSelected ? hasSubLevel ? true : "page" : void 0;
-  const actionHandler = (event) => {
-    if (event.type === "click" || isKey(event, "Enter") || isKey(event, "Space")) {
-      if (event.type === "click") {
-        event.currentTarget.blur();
-      }
-      onClick?.(event, item);
-    }
-  };
-  const handleFocus = (event) => {
-    dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
-  };
-  const label = /* @__PURE__ */ jsx(
-    HvTypography,
-    {
-      component: "span",
-      variant: isSelected ? "label" : "body",
-      "data-text": item.label,
-      children: item.label
-    }
-  );
-  let itemHref = item?.href;
-  let itemTarget = item?.target;
-  if (item?.href == null) {
-    const { href, target } = traverseItem(item);
-    itemHref = href;
-    itemTarget = target;
-  }
-  const ItemComponent = itemHref ? "a" : "div";
-  const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      id,
-      className: cx(
-        classes.root,
-        {
-          [classes.menu]: isMenu,
-          [classes.menubar]: !isMenu,
-          [classes.selected]: !!isSelected
-        },
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          ItemComponent,
-          {
-            className: cx(classes.item, {
-              [classes.link]: itemHref,
-              [classes.button]: !itemHref
-            }),
-            onFocus: handleFocus,
-            onClick: actionHandler,
-            onKeyDown: actionHandler,
-            "aria-current": isCurrent,
-            ...itemProps,
-            children: label
-          }
-        ),
-        hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsx(
-          HvHeaderMenuItem,
-          {
-            item: itm,
-            type: "menu",
-            onClick,
-            levels,
-            currentLevel: currentLevel + 1
-          },
-          itm.id
-        )) })
-      ]
-    }
-  );
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Header/Navigation/MenuItem/MenuItem.tsx
+var traverseItem = (node) => {
+	let href;
+	let target;
+	if (node?.href) {
+		href = node?.href;
+		target = node?.target;
+	} else if (node?.data != null && node?.data?.length > 0) {
+		let i = 0;
+		while (href == null && i < node.data.length) {
+			const childNavItem = traverseItem(node?.data[i]);
+			if (childNavItem?.href != null) {
+				href = childNavItem?.href;
+				target = childNavItem?.target;
+				break;
+			}
+			i += 1;
+		}
+	}
+	return {
+		href,
+		target
+	};
 };
-export {
-  HvHeaderMenuItem,
-  staticClasses as headerMenuItemClasses
+var HvHeaderMenuItem = (props) => {
+	const { id, item, type, onClick, levels, currentLevel, classes: classesProp, className } = useDefaultProps("HvHeaderMenuItem", props);
+	const { classes, cx } = useClasses(classesProp);
+	const selectionPath = useContext(SelectionContext);
+	const { dispatch } = useContext(FocusContext);
+	const { data } = item;
+	const hasSubLevel = data?.length;
+	const isMenu = type === "menu";
+	const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;
+	const isCurrent = isSelected ? hasSubLevel ? true : "page" : void 0;
+	const actionHandler = (event) => {
+		if (event.type === "click" || isKey(event, "Enter") || isKey(event, "Space")) {
+			if (event.type === "click") event.currentTarget.blur();
+			onClick?.(event, item);
+		}
+	};
+	const handleFocus = (event) => {
+		dispatch?.({
+			type: "setItemFocused",
+			itemFocused: event.currentTarget
+		});
+	};
+	const label = /* @__PURE__ */ jsx(HvTypography, {
+		component: "span",
+		variant: isSelected ? "label" : "body",
+		"data-text": item.label,
+		children: item.label
+	});
+	let itemHref = item?.href;
+	let itemTarget = item?.target;
+	if (item?.href == null) {
+		const { href, target } = traverseItem(item);
+		itemHref = href;
+		itemTarget = target;
+	}
+	const ItemComponent = itemHref ? "a" : "div";
+	const itemProps = itemHref ? {
+		href: itemHref,
+		target: itemTarget,
+		"aria-label": item.label
+	} : {
+		role: "button",
+		tabIndex: 0
+	};
+	return /* @__PURE__ */ jsxs("li", {
+		id,
+		className: cx(classes.root, {
+			[classes.menu]: isMenu,
+			[classes.menubar]: !isMenu,
+			[classes.selected]: !!isSelected
+		}, className),
+		children: [/* @__PURE__ */ jsx(ItemComponent, {
+			className: cx(classes.item, {
+				[classes.link]: itemHref,
+				[classes.button]: !itemHref
+			}),
+			onFocus: handleFocus,
+			onClick: actionHandler,
+			onKeyDown: actionHandler,
+			"aria-current": isCurrent,
+			...itemProps,
+			children: label
+		}), hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, {
+			data,
+			type: "menu",
+			children: data.map((itm) => /* @__PURE__ */ jsx(HvHeaderMenuItem, {
+				item: itm,
+				type: "menu",
+				onClick,
+				levels,
+				currentLevel: currentLevel + 1
+			}, itm.id))
+		})]
+	});
 };
+//#endregion
+export { HvHeaderMenuItem };

package/dist/Header/Navigation/MenuItem/MenuItem.styles.js

@@ -1,66 +1,51 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../utils/focusUtils.js";
-const item = {
-  border: "none",
-  cursor: "pointer",
-  padding: `${theme.space.xs} ${theme.space.sm}`,
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  "&:active": {
-    outline: "none"
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  "&:focus-visible": {
-    ...outlineStyles
-  },
-  "& span": {
-    display: "inline-flex",
-    color: "inherit",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  "& span::after": {
-    content: "attr(data-text)",
-    height: 0,
-    visibility: "hidden",
-    overflow: "hidden",
-    userSelect: "none",
-    pointerEvents: "none",
-    fontWeight: theme.fontWeights.semibold,
-    "@media speech": {
-      display: "none"
-    }
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Header/Navigation/MenuItem/MenuItem.styles.tsx
+var item = {
+	border: "none",
+	cursor: "pointer",
+	padding: `${theme.space.xs} ${theme.space.sm}`,
+	height: "100%",
+	display: "flex",
+	alignItems: "center",
+	"&:active": { outline: "none" },
+	"&:focus": { outline: "none" },
+	"&:focus-visible": { ...outlineStyles },
+	"& span": {
+		display: "inline-flex",
+		color: "inherit",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "space-between"
+	},
+	"& span::after": {
+		content: "attr(data-text)",
+		height: 0,
+		visibility: "hidden",
+		overflow: "hidden",
+		userSelect: "none",
+		pointerEvents: "none",
+		fontWeight: theme.fontWeights.semibold,
+		"@media speech": { display: "none" }
+	}
 };
-const { staticClasses, useClasses } = createClasses("HvHeaderMenuItem", {
-  root: {
-    display: "inline",
-    height: "100%",
-    borderBottom: "4px solid transparent",
-    ":hover, :focus-within": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  menu: {},
-  menubar: {},
-  selected: {
-    color: theme.colors.text,
-    borderColor: "currentcolor"
-  },
-  item,
-  link: {
-    textDecoration: "none"
-  },
-  button: {
-    color: "inherit"
-  }
+var { staticClasses, useClasses } = createClasses("HvHeaderMenuItem", {
+	root: {
+		display: "inline",
+		height: "100%",
+		borderBottom: "4px solid transparent",
+		":hover, :focus-within": { backgroundColor: theme.colors.bgHover }
+	},
+	menu: {},
+	menubar: {},
+	selected: {
+		color: theme.colors.text,
+		borderColor: "currentcolor"
+	},
+	item,
+	link: { textDecoration: "none" },
+	button: { color: "inherit" }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/Header/Navigation/Navigation.js

@@ -1,40 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Navigation.styles.js";
-import { staticClasses } from "./Navigation.styles.js";
-import { useSelectionPath } from "./useSelectionPath.js";
-import { FocusProvider } from "./utils/FocusContext.js";
 import { SelectionContext } from "./utils/SelectionContext.js";
+import { FocusProvider } from "./utils/FocusContext.js";
 import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
-const HvHeaderNavigation = forwardRef(function HvHeaderNavigation2(props, ref) {
-  const {
-    data,
-    selected,
-    onClick,
-    className,
-    classes: classesProp,
-    levels = 2,
-    ...others
-  } = useDefaultProps("HvHeaderNavigation", props);
-  const { classes, cx } = useClasses(classesProp);
-  const selectionPath = useSelectionPath(data, selected);
-  const handleClick = (event, selection) => {
-    event.preventDefault();
-    onClick?.(event, selection);
-  };
-  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx("nav", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(
-    HvHeaderMenuBar,
-    {
-      data,
-      type: "menubar",
-      onClick: handleClick,
-      levels,
-      currentLevel: 1
-    }
-  ) }) }) });
+import { useClasses } from "./Navigation.styles.js";
+import { useSelectionPath } from "./useSelectionPath.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Header/Navigation/Navigation.tsx
+var HvHeaderNavigation = forwardRef(function HvHeaderNavigation(props, ref) {
+	const { data, selected, onClick, className, classes: classesProp, levels = 2, ...others } = useDefaultProps("HvHeaderNavigation", props);
+	const { classes, cx } = useClasses(classesProp);
+	const selectionPath = useSelectionPath(data, selected);
+	const handleClick = (event, selection) => {
+		event.preventDefault();
+		onClick?.(event, selection);
+	};
+	return /* @__PURE__ */ jsx(SelectionContext.Provider, {
+		value: selectionPath,
+		children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx("nav", {
+			ref,
+			className: cx(classes.root, className),
+			...others,
+			children: /* @__PURE__ */ jsx(HvHeaderMenuBar, {
+				data,
+				type: "menubar",
+				onClick: handleClick,
+				levels,
+				currentLevel: 1
+			})
+		}) })
+	});
 });
-export {
-  HvHeaderNavigation,
-  staticClasses as headerNavigationClasses
-};
+//#endregion
+export { HvHeaderNavigation };

package/dist/Header/Navigation/Navigation.styles.js

@@ -1,18 +1,12 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses(
-  "HvHeaderNavigation",
-  {
-    root: {
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      zIndex: 1,
-      top: "0px",
-      left: "0px"
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Header/Navigation/Navigation.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvHeaderNavigation", { root: {
+	position: "absolute",
+	width: "100%",
+	height: "100%",
+	zIndex: 1,
+	top: "0px",
+	left: "0px"
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/Header/Navigation/useSelectionPath.js

@@ -1,22 +1,19 @@
-import { useState, useEffect } from "react";
-const getSelectionPath = (data, selectedId, selection = [], idx = -1, parent = []) => {
-  data?.forEach((item, i) => {
-    const hasData = item.data?.length;
-    const isSelected = item.id === selectedId;
-    if (isSelected)
-      selection.push(...idx > -1 ? [parent[idx].id] : [], item.id);
-    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);
-  });
-  return selection;
+import { useEffect, useState } from "react";
+//#region src/Header/Navigation/useSelectionPath.ts
+var getSelectionPath = (data, selectedId, selection = [], idx = -1, parent = []) => {
+	data?.forEach((item, i) => {
+		const hasData = item.data?.length;
+		if (item.id === selectedId) selection.push(...idx > -1 ? [parent[idx].id] : [], item.id);
+		if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);
+	});
+	return selection;
 };
-const useSelectionPath = (data, selectedId) => {
-  const [selectionPath, setSelectionPath] = useState([]);
-  useEffect(() => {
-    const path = getSelectionPath(data, selectedId);
-    setSelectionPath(path);
-  }, [data, selectedId]);
-  return selectionPath;
-};
-export {
-  useSelectionPath
+var useSelectionPath = (data, selectedId) => {
+	const [selectionPath, setSelectionPath] = useState([]);
+	useEffect(() => {
+		setSelectionPath(getSelectionPath(data, selectedId));
+	}, [data, selectedId]);
+	return selectionPath;
 };
+//#endregion
+export { useSelectionPath };