@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/VerticalNavigation/Navigation/Navigation.js

@@ -1,279 +1,195 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useState, useCallback, useMemo, useEffect } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../../hooks/useControlled.js";
 import { uniqueId } from "../../utils/helpers.js";
-import { NavigationPopupContainer } from "../NavigationPopup/NavigationPopupContainer.js";
 import { getParentItemById } from "../NavigationSlider/utils.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
-import { useClasses } from "./Navigation.styles.js";
-import { staticClasses } from "./Navigation.styles.js";
+import { NavigationPopupContainer } from "../NavigationPopup/NavigationPopupContainer.js";
 import { HvVerticalNavigationSlider } from "../NavigationSlider/NavigationSlider.js";
 import { HvVerticalNavigationTreeView } from "../TreeView/TreeView.js";
 import { HvVerticalNavigationTreeViewItem } from "../TreeView/TreeViewItem.js";
-const createListHierarchy = (items, classes, mouseEnterHandler, disableTooltip = false) => items.map((item) => {
-  const {
-    id: itemId,
-    label: itemLabel,
-    icon,
-    data: children,
-    selectable,
-    disabled,
-    href,
-    target
-  } = item;
-  const itemMouseEnterHandler = (event) => {
-    mouseEnterHandler?.(event, item);
-  };
-  return /* @__PURE__ */ jsx(
-    HvVerticalNavigationTreeViewItem,
-    {
-      className: classes?.listItem,
-      href,
-      target,
-      nodeId: itemId,
-      label: itemLabel,
-      icon,
-      payload: item,
-      selectable,
-      disabled,
-      onMouseEnter: itemMouseEnterHandler,
-      disableTooltip,
-      children: children ? createListHierarchy(
-        children,
-        classes,
-        mouseEnterHandler,
-        disableTooltip
-      ) : void 0
-    },
-    itemId
-  );
+import { useClasses } from "./Navigation.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/VerticalNavigation/Navigation/Navigation.tsx
+var createListHierarchy = (items, classes, mouseEnterHandler, disableTooltip = false) => items.map((item) => {
+	const { id: itemId, label: itemLabel, icon, data: children, selectable, disabled, href, target } = item;
+	const itemMouseEnterHandler = (event) => {
+		mouseEnterHandler?.(event, item);
+	};
+	return /* @__PURE__ */ jsx(HvVerticalNavigationTreeViewItem, {
+		className: classes?.listItem,
+		href,
+		target,
+		nodeId: itemId,
+		label: itemLabel,
+		icon,
+		payload: item,
+		selectable,
+		disabled,
+		onMouseEnter: itemMouseEnterHandler,
+		disableTooltip,
+		children: children ? createListHierarchy(children, classes, mouseEnterHandler, disableTooltip) : void 0
+	}, itemId);
 });
-const getAllParents = (items) => {
-  const parents = items.filter(
-    (item) => item.data != null && item.data.length > 0
-  );
-  const childParents = parents.flatMap((item) => getAllParents(item.data));
-  return [...parents, ...childParents];
+var getAllParents = (items) => {
+	const parents = items.filter((item) => item.data != null && item.data.length > 0);
+	const childParents = parents.flatMap((item) => getAllParents(item.data));
+	return [...parents, ...childParents];
 };
 function pathToElement(data, targetId) {
-  const path = [];
-  if (data != null && data.length > 0) {
-    for (let i = 0; i !== data.length; ++i) {
-      const item = data[i];
-      if (item.id === targetId) {
-        path.push(item.id);
-        break;
-      }
-      const subPaths = pathToElement(item.data, targetId);
-      if (subPaths.length > 0) {
-        path.push(item.id);
-        path.push(...subPaths);
-        break;
-      }
-    }
-  }
-  return path;
+	const path = [];
+	if (data != null && data.length > 0) for (let i = 0; i !== data.length; ++i) {
+		const item = data[i];
+		if (item.id === targetId) {
+			path.push(item.id);
+			break;
+		}
+		const subPaths = pathToElement(item.data, targetId);
+		if (subPaths.length > 0) {
+			path.push(item.id);
+			path.push(...subPaths);
+			break;
+		}
+	}
+	return path;
 }
-const HvVerticalNavigationTree = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    data,
-    mode = "navigation",
-    collapsible = false,
-    expanded: expandedProp,
-    defaultExpanded,
-    onToggle,
-    selected: selectedProp,
-    defaultSelected,
-    onChange,
-    sliderForwardButtonAriaLabel = "Navigate to submenu",
-    ...others
-  } = useDefaultProps("HvVerticalNavigationTree", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
-  const [expanded, setExpanded] = useControlled(expandedProp, () => {
-    if (defaultExpanded === true) {
-      return getAllParents(data).map((item) => item.id);
-    }
-    if (defaultExpanded === false) {
-      return [];
-    }
-    if (defaultExpanded == null) {
-      if (selected != null) {
-        const path = pathToElement(data, selected);
-        return path.slice(0, -1);
-      }
-      return [];
-    }
-    return defaultExpanded;
-  });
-  const {
-    isOpen,
-    useIcons,
-    slider,
-    parentItem,
-    setParentItem,
-    withParentData,
-    navigateToChildHandler,
-    setParentData,
-    setParentSelected
-  } = useContext(VerticalNavigationContext);
-  const [navigationPopup, setNavigationPopup] = useState(null);
-  const handleChange = useCallback(
-    (event, selectedId, selectedItem) => {
-      if (useIcons && !isOpen && selectedItem.data) {
-        const currentEventTarget = event.currentTarget;
-        setNavigationPopup((prevState) => {
-          return prevState?.anchorEl === currentEventTarget ? null : {
-            uniqueKey: uniqueId(),
-            anchorEl: currentEventTarget,
-            fixedMode: true,
-            data: selectedItem.data
-          };
-        });
-        event.stopPropagation();
-      } else {
-        setSelected(selectedId);
-        setExpanded((prevState) => {
-          if (!isOpen) {
-            return [...prevState, ...pathToElement(data, selectedId)];
-          }
-          return [...prevState];
-        });
-        setNavigationPopup(null);
-        onChange?.(event, selectedItem);
-      }
-    },
-    [onChange, setSelected, setExpanded, isOpen, useIcons, data]
-  );
-  const treeViewItemMouseEnterHandler = useCallback(
-    (event, item) => {
-      const isCollapsed = useIcons && !isOpen;
-      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {
-        const currentEventTarget = event.currentTarget;
-        setNavigationPopup?.({
-          uniqueKey: uniqueId(),
-          anchorEl: currentEventTarget,
-          fixedMode: false,
-          data: item.data
-        });
-      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {
-        setNavigationPopup(null);
-      }
-    },
-    [isOpen, useIcons, navigationPopup]
-  );
-  const handleToggle = useCallback(
-    (event, newExpanded) => {
-      setExpanded(newExpanded);
-      onToggle?.(event, newExpanded);
-    },
-    [onToggle, setExpanded]
-  );
-  const children = useMemo(
-    () => data && createListHierarchy(
-      data,
-      classes,
-      treeViewItemMouseEnterHandler,
-      navigationPopup?.fixedMode
-    ),
-    [classes, data, navigationPopup, treeViewItemMouseEnterHandler]
-  );
-  useEffect(() => {
-    if (!isOpen) {
-      setNavigationPopup?.(null);
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (setParentSelected) setParentSelected(selected);
-  }, [selected, setSelected, setParentSelected]);
-  useEffect(() => {
-    if (setParentData) setParentData(data);
-  }, [data, setParentData]);
-  useEffect(() => {
-    if (withParentData && selected && setParentItem && getParentItemById(withParentData, selected)) {
-      setParentItem(getParentItemById(withParentData, selected));
-    }
-  }, [withParentData, selected, setParentItem]);
-  const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);
-  const handleNavigationPopupClose = () => setNavigationPopup(null);
-  const handleStyledNavMouseLeave = () => {
-    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {
-      setNavigationPopup(null);
-    }
-  };
-  const handleNavigationPopupMouseLeave = () => {
-    if (!navigationPopup?.fixedMode) {
-      handleNavigationPopupClose();
-    }
-  };
-  const handleNavigationPopupChange = (event, selectedItem) => {
-    handleChange(event, selectedItem.id, selectedItem);
-  };
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      id,
-      className: cx(
-        classes.root,
-        { [classes.collapsed]: !isOpen && !useIcons },
-        className
-      ),
-      onMouseLeave: handleStyledNavMouseLeave,
-      ...others,
-      children: slider ? /* @__PURE__ */ jsx(
-        HvVerticalNavigationSlider,
-        {
-          data: parentItem.data || withParentData,
-          selected,
-          onNavigateToTarget: navigateToTargetHandler,
-          onNavigateToChild: navigateToChildHandler,
-          forwardButtonAriaLabel: sliderForwardButtonAriaLabel
-        }
-      ) : /* @__PURE__ */ jsxs(
-        HvVerticalNavigationTreeView,
-        {
-          className: classes.list,
-          selectable: true,
-          mode,
-          collapsible,
-          selected,
-          onChange: handleChange,
-          expanded,
-          onToggle: handleToggle,
-          children: [
-            useIcons && !isOpen && navigationPopup && /* @__PURE__ */ jsx(
-              NavigationPopupContainer,
-              {
-                anchorEl: navigationPopup.anchorEl,
-                onClose: handleNavigationPopupClose,
-                className: classes.navigationPopup,
-                children: /* @__PURE__ */ jsx(
-                  HvVerticalNavigationTree,
-                  {
-                    className: classes.popup,
-                    collapsible: true,
-                    defaultExpanded: true,
-                    selected,
-                    data: navigationPopup.data,
-                    onChange: handleNavigationPopupChange,
-                    onMouseLeave: handleNavigationPopupMouseLeave
-                  }
-                )
-              },
-              navigationPopup.uniqueKey
-            ),
-            children
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  HvVerticalNavigationTree,
-  staticClasses as verticalNavigationTreeClasses
+var HvVerticalNavigationTree = (props) => {
+	const { id, className, classes: classesProp, data, mode = "navigation", collapsible = false, expanded: expandedProp, defaultExpanded, onToggle, selected: selectedProp, defaultSelected, onChange, sliderForwardButtonAriaLabel = "Navigate to submenu", ...others } = useDefaultProps("HvVerticalNavigationTree", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
+	const [expanded, setExpanded] = useControlled(expandedProp, () => {
+		if (defaultExpanded === true) return getAllParents(data).map((item) => item.id);
+		if (defaultExpanded === false) return [];
+		if (defaultExpanded == null) {
+			if (selected != null) return pathToElement(data, selected).slice(0, -1);
+			return [];
+		}
+		return defaultExpanded;
+	});
+	const { isOpen, useIcons, slider, parentItem, setParentItem, withParentData, navigateToChildHandler, setParentData, setParentSelected } = useContext(VerticalNavigationContext);
+	const [navigationPopup, setNavigationPopup] = useState(null);
+	const handleChange = useCallback((event, selectedId, selectedItem) => {
+		if (useIcons && !isOpen && selectedItem.data) {
+			const currentEventTarget = event.currentTarget;
+			setNavigationPopup((prevState) => {
+				return prevState?.anchorEl === currentEventTarget ? null : {
+					uniqueKey: uniqueId(),
+					anchorEl: currentEventTarget,
+					fixedMode: true,
+					data: selectedItem.data
+				};
+			});
+			event.stopPropagation();
+		} else {
+			setSelected(selectedId);
+			setExpanded((prevState) => {
+				if (!isOpen) return [...prevState, ...pathToElement(data, selectedId)];
+				return [...prevState];
+			});
+			setNavigationPopup(null);
+			onChange?.(event, selectedItem);
+		}
+	}, [
+		onChange,
+		setSelected,
+		setExpanded,
+		isOpen,
+		useIcons,
+		data
+	]);
+	const treeViewItemMouseEnterHandler = useCallback((event, item) => {
+		const isCollapsed = useIcons && !isOpen;
+		if (isCollapsed && item.data && !navigationPopup?.fixedMode) {
+			const currentEventTarget = event.currentTarget;
+			setNavigationPopup?.({
+				uniqueKey: uniqueId(),
+				anchorEl: currentEventTarget,
+				fixedMode: false,
+				data: item.data
+			});
+		} else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) setNavigationPopup(null);
+	}, [
+		isOpen,
+		useIcons,
+		navigationPopup
+	]);
+	const handleToggle = useCallback((event, newExpanded) => {
+		setExpanded(newExpanded);
+		onToggle?.(event, newExpanded);
+	}, [onToggle, setExpanded]);
+	const children = useMemo(() => data && createListHierarchy(data, classes, treeViewItemMouseEnterHandler, navigationPopup?.fixedMode), [
+		classes,
+		data,
+		navigationPopup,
+		treeViewItemMouseEnterHandler
+	]);
+	useEffect(() => {
+		if (!isOpen) setNavigationPopup?.(null);
+	}, [isOpen]);
+	useEffect(() => {
+		if (setParentSelected) setParentSelected(selected);
+	}, [
+		selected,
+		setSelected,
+		setParentSelected
+	]);
+	useEffect(() => {
+		if (setParentData) setParentData(data);
+	}, [data, setParentData]);
+	useEffect(() => {
+		if (withParentData && selected && setParentItem && getParentItemById(withParentData, selected)) setParentItem(getParentItemById(withParentData, selected));
+	}, [
+		withParentData,
+		selected,
+		setParentItem
+	]);
+	const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);
+	const handleNavigationPopupClose = () => setNavigationPopup(null);
+	const handleStyledNavMouseLeave = () => {
+		if (useIcons && !isOpen && !navigationPopup?.fixedMode) setNavigationPopup(null);
+	};
+	const handleNavigationPopupMouseLeave = () => {
+		if (!navigationPopup?.fixedMode) handleNavigationPopupClose();
+	};
+	const handleNavigationPopupChange = (event, selectedItem) => {
+		handleChange(event, selectedItem.id, selectedItem);
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		id,
+		className: cx(classes.root, { [classes.collapsed]: !isOpen && !useIcons }, className),
+		onMouseLeave: handleStyledNavMouseLeave,
+		...others,
+		children: slider ? /* @__PURE__ */ jsx(HvVerticalNavigationSlider, {
+			data: parentItem.data || withParentData,
+			selected,
+			onNavigateToTarget: navigateToTargetHandler,
+			onNavigateToChild: navigateToChildHandler,
+			forwardButtonAriaLabel: sliderForwardButtonAriaLabel
+		}) : /* @__PURE__ */ jsxs(HvVerticalNavigationTreeView, {
+			className: classes.list,
+			selectable: true,
+			mode,
+			collapsible,
+			selected,
+			onChange: handleChange,
+			expanded,
+			onToggle: handleToggle,
+			children: [useIcons && !isOpen && navigationPopup && /* @__PURE__ */ jsx(NavigationPopupContainer, {
+				anchorEl: navigationPopup.anchorEl,
+				onClose: handleNavigationPopupClose,
+				className: classes.navigationPopup,
+				children: /* @__PURE__ */ jsx(HvVerticalNavigationTree, {
+					className: classes.popup,
+					collapsible: true,
+					defaultExpanded: true,
+					selected,
+					data: navigationPopup.data,
+					onChange: handleNavigationPopupChange,
+					onMouseLeave: handleNavigationPopupMouseLeave
+				})
+			}, navigationPopup.uniqueKey), children]
+		})
+	});
 };
+//#endregion
+export { HvVerticalNavigationTree };

package/dist/VerticalNavigation/Navigation/Navigation.styles.js

@@ -1,25 +1,15 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses(
-  "HvVerticalNavigationTree",
-  {
-    root: {
-      display: "block",
-      overflowY: "auto"
-    },
-    list: {},
-    listItem: {},
-    collapsed: {
-      display: "none"
-    },
-    popup: {
-      boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
-    },
-    navigationPopup: {
-      boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/VerticalNavigation/Navigation/Navigation.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvVerticalNavigationTree", {
+	root: {
+		display: "block",
+		overflowY: "auto"
+	},
+	list: {},
+	listItem: {},
+	collapsed: { display: "none" },
+	popup: { boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)" },
+	navigationPopup: { boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)" }
+});
+//#endregion
+export { staticClasses, useClasses };

package/dist/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js

@@ -1,18 +1,10 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses(
-  "HvVerticalNavigationPopup",
-  {
-    popup: {},
-    container: {
-      marginLeft: theme.spacing("xs")
-    },
-    popper: {
-      zIndex: theme.zIndices.popover
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvVerticalNavigationPopup", {
+	popup: {},
+	container: { marginLeft: theme.spacing("xs") },
+	popper: { zIndex: theme.zIndices.popover }
+});
+//#endregion
+export { useClasses };

package/dist/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js

@@ -1,36 +1,34 @@
-import { jsx } from "react/jsx-runtime";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-import Popper from "@mui/material/Popper";
-import { useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";
 import { HvVerticalNavigation } from "../VerticalNavigation.js";
 import { useClasses } from "./NavigationPopup.styles.js";
-import { staticClasses } from "./NavigationPopup.styles.js";
-const NavigationPopupContainer = ({
-  anchorEl,
-  onClose,
-  children,
-  classes: classesProp,
-  className,
-  ...others
-}) => {
-  const { classes, cx } = useClasses(classesProp);
-  const { rootId } = useTheme();
-  const handleClickAway = () => onClose?.();
-  return /* @__PURE__ */ jsx(
-    Popper,
-    {
-      open: true,
-      anchorEl,
-      placement: "right-start",
-      container: getContainerElement(rootId),
-      className: cx(classes.popper, classes.popup, className),
-      ...others,
-      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(HvVerticalNavigation, { open: true, useIcons: true, children }) }) })
-    }
-  );
-};
-export {
-  NavigationPopupContainer,
-  staticClasses as verticalNavigationPopupClasses
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Popper from "@mui/material/Popper";
+//#region src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx
+var NavigationPopupContainer = ({ anchorEl, onClose, children, classes: classesProp, className, ...others }) => {
+	const { classes, cx } = useClasses(classesProp);
+	const { rootId } = useTheme();
+	const handleClickAway = () => onClose?.();
+	return /* @__PURE__ */ jsx(Popper, {
+		open: true,
+		anchorEl,
+		placement: "right-start",
+		container: getContainerElement(rootId),
+		className: cx(classes.popper, classes.popup, className),
+		...others,
+		children: /* @__PURE__ */ jsx(ClickAwayListener, {
+			onClickAway: handleClickAway,
+			children: /* @__PURE__ */ jsx("div", {
+				className: classes.container,
+				children: /* @__PURE__ */ jsx(HvVerticalNavigation, {
+					open: true,
+					useIcons: true,
+					children
+				})
+			})
+		})
+	});
 };
+//#endregion
+export { NavigationPopupContainer };