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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../../icons.js";
import { useClasses } from "./NavigationSlider.styles.js";
import { staticClasses } from "./NavigationSlider.styles.js";
import { HvButton } from "../../Button/Button.js";
import { HvListContainer } from "../../ListContainer/ListContainer.js";
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
const 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
      ))
    }
  );
};
export {
  HvVerticalNavigationSlider,
  staticClasses as verticalNavigationSliderClasses
};