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

UI Kit Core React components.

import { HvTypography } from "../../Typography/Typography.js";
import { HvIcon } from "../../icons.js";
import { HvButton } from "../../Button/Button.js";
import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
import { useClasses } from "./Header.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useContext, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/VerticalNavigation/Header/Header.tsx
var 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);
	if (!useMemo(() => !slider || slider && !Array.isArray(parentItem), [parentItem, slider])) 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 }, collapseButtonClasses?.root)
				},
				...otherCollapseButtonProps,
				children: isOpen ? closeIcon : openIcon
			})
		]
	});
};
//#endregion
export { HvVerticalNavigationHeader };