@hitachivantara/uikit-react-core/dist/cjs/DropDownMenu/DropDownMenu.cjs

Core React components for the NEXT Design System.

"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 context = require("../BaseDropdown/context.cjs");
const useControlled = require("../hooks/useControlled.cjs");
const useLabels = require("../hooks/useLabels.cjs");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const icons = require("../icons.cjs");
const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
const keyboardUtils = require("../utils/keyboardUtils.cjs");
const setId = require("../utils/setId.cjs");
const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
const List = require("../List/List.cjs");
const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
const DEFAULT_LABELS = {
  dropdownMenu: "Dropdown menu"
};
const HeaderComponent = React.forwardRef(
  function HeaderComponent2(props, ref) {
    const { open, icon, disabled, ...others } = props;
    const { popperPlacement } = context.useBaseDropdownContext();
    return /* @__PURE__ */ jsxRuntime.jsx(
      DropdownButton.HvDropdownButton,
      {
        icon: true,
        ref,
        open,
        disabled,
        "aria-expanded": open,
        "aria-haspopup": "menu",
        placement: popperPlacement,
        ...others,
        children: icon || /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsVertical" })
      }
    );
  }
);
const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
  const {
    id: idProp,
    classes: classesProp,
    className,
    icon,
    placement = "right",
    dataList,
    disablePortal = false,
    onToggle,
    onClick,
    keepOpened = true,
    disabled = false,
    expanded,
    defaultExpanded = false,
    category = "secondaryGhost",
    // TODO - remove and update variant default in v6
    variant,
    size = "md",
    labels: labelsProp,
    ...others
  } = uikitReactUtils.useDefaultProps("HvDropDownMenu", props);
  const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
  const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
  const id = useUniqueId.useUniqueId(idProp);
  const listId = setId.setId(id, "list");
  const handleClose = (event) => {
    setOpen(false);
    onToggle?.(event, false);
  };
  const handleKeyDown = (event) => {
    if (keyboardUtils.isKey(event, "Tab")) {
      const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
      if (node) setTimeout(() => node.focus(), 0);
      handleClose(event);
    }
    event.preventDefault();
  };
  const condensed = React.useMemo(() => dataList.every((el) => !el.icon), [dataList]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    BaseDropdown.HvBaseDropdown,
    {
      ref,
      id,
      className: cx(classes.root, classes.container, classes.icon, className, {
        [classes.iconSelected]: open
        // TODO: rename to open
      }),
      classes: {
        container: classes.baseContainer,
        panel: classes.menuListRoot
      },
      expanded: open && !disabled,
      headerComponent: HeaderComponent,
      size,
      variant: variant ?? category,
      open,
      "aria-label": labels.dropdownMenu,
      icon,
      placement,
      variableWidth: true,
      disablePortal,
      onToggle: (e, s) => {
        setOpen(s);
        onToggle?.(e, s);
      },
      disabled,
      onContainerCreation: (containerEl) => {
        containerEl?.getElementsByTagName("li")[0]?.focus();
      },
      ...others,
      children: /* @__PURE__ */ jsxRuntime.jsx(
        List.HvList,
        {
          id: listId,
          values: dataList,
          selectable: false,
          condensed,
          onClick: (event, item) => {
            if (!keepOpened) handleClose(event);
            onClick?.(event, item);
          },
          onKeyDown: handleKeyDown,
          classes: {
            root: classes.menuList
          }
        }
      )
    }
  );
});
exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
exports.HvDropDownMenu = HvDropDownMenu;