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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { useContext, useMemo } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../../icons.js";
import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
import { useClasses } from "./Header.styles.js";
import { staticClasses } from "./Header.styles.js";
import { HvButton } from "../../Button/Button.js";
import { HvTypography } from "../../Typography/Typography.js";
const HvVerticalNavigationHeader = (props) => {
  const {
    title,
    openIcon: openIconProp,
    closeIcon: closeIconProp,
    collapseButtonProps = {},
    backButtonProps = {},
    className,
    classes: classesProp,
    onCollapseButtonClick,
    ...others
  } = useDefaultProps("HvVerticalNavigationHeader", props);
  const {
    isOpen,
    useIcons,
    headerTitle,
    slider,
    navigateToParentHandler,
    parentItem
  } = useContext(VerticalNavigationContext);
  const { classes, cx } = useClasses(classesProp);
  const shouldShowTitle = useMemo(
    () => !slider || slider && !Array.isArray(parentItem),
    [parentItem, slider]
  );
  if (!shouldShowTitle) return null;
  const openIcon = openIconProp ?? /* @__PURE__ */ jsx(HvIcon, { name: useIcons ? "Forwards" : "Menu" });
  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsx(HvIcon, { name: "Backwards" });
  const handleClickBack = () => navigateToParentHandler?.();
  const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
  const {
    className: collapseButtonClassName,
    classes: collapseButtonClasses,
    ...otherCollapseButtonProps
  } = collapseButtonProps;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cx(classes.root, { [classes.minimized]: !isOpen }, className),
      ...others,
      children: [
        isOpen && headerTitle && slider && /* @__PURE__ */ jsx(
          HvButton,
          {
            icon: true,
            onClick: handleClickBack,
            className: cx(classes.backButton, backButtonClassName),
            "aria-label": "Back",
            ...otherBackButtonProps,
            children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", size: "xs" })
          }
        ),
        isOpen && /* @__PURE__ */ jsx(
          HvTypography,
          {
            variant: slider ? "label" : "title3",
            className: classes.title,
            children: headerTitle && slider ? headerTitle : title
          }
        ),
        onCollapseButtonClick && /* @__PURE__ */ jsx(
          HvButton,
          {
            icon: true,
            onClick: onCollapseButtonClick,
            className: cx(classes.collapseButton, collapseButtonClassName),
            classes: {
              ...collapseButtonClasses,
              root: cx(
                { [classes.minimized]: !isOpen },
                // TODO - v6 don't use minimized classes in two different places
                collapseButtonClasses?.root
              )
            },
            ...otherCollapseButtonProps,
            children: isOpen ? closeIcon : openIcon
          }
        )
      ]
    }
  );
};
export {
  HvVerticalNavigationHeader,
  staticClasses as verticalNavigationHeaderClasses
};