@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
49 lines (48 loc) • 2.03 kB
JavaScript
import { HvListContainer } from "../../ListContainer/ListContainer.js";
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
import { HvIcon } from "../../icons.js";
import { HvButton } from "../../Button/Button.js";
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
import { useClasses } from "./NavigationSlider.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { jsx } from "react/jsx-runtime";
//#region src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx
var HvVerticalNavigationSlider = (props) => {
const { className, classes: classesProp, data, selected, onNavigateToTarget, onNavigateToChild, forwardButtonAriaLabel = "Navigate to submenu", ...others } = useDefaultProps("HvVerticalNavigationSlider", props);
const { classes, cx } = useClasses(classesProp);
return /* @__PURE__ */ jsx(HvListContainer, {
interactive: true,
className: cx(classes.listContainer, className),
...others,
children: data?.map((item) => /* @__PURE__ */ jsx(HvListItem, {
classes: {
root: classes.root,
selected: classes.listItemSelected,
focus: classes.listItemFocus,
disabled: classes.listItemDisabled
},
onClick: (event) => {
onNavigateToTarget?.(event, item);
},
"aria-label": item.label,
"aria-current": selected === item.id ? item.href ? "page" : true : void 0,
selected: selected === item.id,
startAdornment: item.icon ? /* @__PURE__ */ jsx("div", { children: item.icon }) : void 0,
endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsx(HvButton, {
icon: true,
onClick: (event) => {
onNavigateToChild?.(event, item);
},
className: classes.forwardButton,
"aria-label": forwardButtonAriaLabel,
children: /* @__PURE__ */ jsx(HvIcon, {
name: "CaretRight",
size: "xs"
})
}) : void 0,
children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })
}, item.id))
});
};
//#endregion
export { HvVerticalNavigationSlider };