@hitachivantara/uikit-react-core/dist/VerticalNavigation/VerticalNavigation.js

UI Kit Core React components.

import { fillDataWithParentId, getNavigationItemById, getParentItemById } from "./NavigationSlider/utils.js";
import { useClasses } from "./VerticalNavigation.styles.js";
import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useCallback, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/VerticalNavigation/VerticalNavigation.tsx
/**
* Use a vertical layout for global navigation on wide screens. treeview mode provides structured hierarchy but overrides standard keyboard navigation.
*/
var HvVerticalNavigation = forwardRef(function HvVerticalNavigation(props, ref) {
	const { id, className, classes: classesProp, children, open = true, slider = false, useIcons = false, ...others } = useDefaultProps("HvVerticalNavigation", props);
	const { classes, cx } = useClasses(classesProp);
	const [parentData, setParentData] = useState([]);
	const [parentSelected, setParentSelected] = useState();
	const withParentData = useMemo(() => fillDataWithParentId(parentData), [parentData]);
	const [parentItem, setParentItem] = useState(useMemo(() => getParentItemById(withParentData, parentSelected), [withParentData, parentSelected]));
	/** Checks if there are any sub items in the NavigationItem data structure. */
	const hasAnyChildWithData = useMemo(() => parentData.some((item) => item.data && item.data.length > 0), [parentData]);
	const headerTitle = useMemo(() => parentItem?.label, [parentItem]);
	const navigateToParentHandler = useCallback(() => {
		setParentItem(getParentItemById(withParentData, parentItem.id));
	}, [parentItem, withParentData]);
	const navigateToChildHandler = useCallback((event, item) => {
		setParentItem(getNavigationItemById(withParentData, item.id));
		event.stopPropagation();
	}, [withParentData]);
	const value = useMemo(() => ({
		isOpen: open,
		useIcons,
		slider,
		headerTitle,
		parentItem,
		setParentItem,
		withParentData,
		navigateToChildHandler,
		navigateToParentHandler,
		parentData,
		setParentData,
		parentSelected,
		setParentSelected,
		hasAnyChildWithData
	}), [
		open,
		useIcons,
		slider,
		headerTitle,
		parentItem,
		setParentItem,
		withParentData,
		navigateToChildHandler,
		navigateToParentHandler,
		hasAnyChildWithData,
		parentData,
		parentSelected
	]);
	return /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, {
		value,
		children: /* @__PURE__ */ jsx("div", {
			id,
			ref,
			className: cx(classes.root, {
				[classes.collapsed]: !open,
				[classes.slider]: slider,
				[classes.childData]: hasAnyChildWithData
			}, className),
			...others,
			children
		})
	});
});
//#endregion
export { HvVerticalNavigation };