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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef, useState, useMemo, useCallback } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils.js";
import { useClasses } from "./VerticalNavigation.styles.js";
import { staticClasses } from "./VerticalNavigation.styles.js";
import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
const HvVerticalNavigation = forwardRef(function HvVerticalNavigation2(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 initialParentItem = useMemo(
    () => getParentItemById(withParentData, parentSelected),
    [withParentData, parentSelected]
  );
  const [parentItem, setParentItem] = useState(initialParentItem);
  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
    }
  ) });
});
export {
  HvVerticalNavigation,
  staticClasses as verticalNavigationClasses
};