@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
126 lines (125 loc) • 4.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
const Bar = require("../MenuBar/Bar.cjs");
const FocusContext = require("../utils/FocusContext.cjs");
const SelectionContext = require("../utils/SelectionContext.cjs");
const MenuItem_styles = require("./MenuItem.styles.cjs");
const Typography = require("../../../Typography/Typography.cjs");
const traverseItem = (node) => {
let href;
let target;
if (node?.href) {
href = node?.href;
target = node?.target;
} else if (node?.data != null && node?.data?.length > 0) {
let i = 0;
while (href == null && i < node.data.length) {
const childNavItem = traverseItem(node?.data[i]);
if (childNavItem?.href != null) {
href = childNavItem?.href;
target = childNavItem?.target;
break;
}
i += 1;
}
}
return { href, target };
};
const HvHeaderMenuItem = (props) => {
const {
id,
item,
type,
onClick,
levels,
currentLevel,
classes: classesProp,
className
} = uikitReactUtils.useDefaultProps("HvHeaderMenuItem", props);
const { classes, cx } = MenuItem_styles.useClasses(classesProp);
const selectionPath = React.useContext(SelectionContext.SelectionContext);
const { dispatch } = React.useContext(FocusContext.FocusContext);
const { data } = item;
const hasSubLevel = data?.length;
const isMenu = type === "menu";
const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;
const isCurrent = isSelected ? hasSubLevel ? true : "page" : void 0;
const actionHandler = (event) => {
if (event.type === "click" || keyboardUtils.isKey(event, "Enter") || keyboardUtils.isKey(event, "Space")) {
if (event.type === "click") {
event.currentTarget.blur();
}
onClick?.(event, item);
}
};
const handleFocus = (event) => {
dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
};
const label = /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
component: "span",
variant: isSelected ? "label" : "body",
"data-text": item.label,
children: item.label
}
);
let itemHref = item?.href;
let itemTarget = item?.target;
if (item?.href == null) {
const { href, target } = traverseItem(item);
itemHref = href;
itemTarget = target;
}
const ItemComponent = itemHref ? "a" : "div";
const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
return /* @__PURE__ */ jsxRuntime.jsxs(
"li",
{
id,
className: cx(
classes.root,
{
[classes.menu]: isMenu,
[classes.menubar]: !isMenu,
[classes.selected]: !!isSelected
},
className
),
children: [
/* @__PURE__ */ jsxRuntime.jsx(
ItemComponent,
{
className: cx(classes.item, {
[classes.link]: itemHref,
[classes.button]: !itemHref
}),
onFocus: handleFocus,
onClick: actionHandler,
onKeyDown: actionHandler,
"aria-current": isCurrent,
...itemProps,
children: label
}
),
hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(
HvHeaderMenuItem,
{
item: itm,
type: "menu",
onClick,
levels,
currentLevel: currentLevel + 1
},
itm.id
)) })
]
}
);
};
exports.headerMenuItemClasses = MenuItem_styles.staticClasses;
exports.HvHeaderMenuItem = HvHeaderMenuItem;