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

UI Kit Core React components.

import { isKey } from "../utils/keyboardUtils.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { HvIcon } from "../icons.js";
import { useControlled } from "../hooks/useControlled.js";
import getPrevNextFocus from "../utils/focusableElementFinder.js";
import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
import { useLabels } from "../hooks/useLabels.js";
import { HvList } from "../List/List.js";
import { useClasses } from "./DropDownMenu.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/DropDownMenu/DropDownMenu.tsx
var DEFAULT_LABELS = { dropdownMenu: "Dropdown menu" };
var HeaderComponent = forwardRef(function HeaderComponent(props, ref) {
	const { open, icon, disabled, ...others } = props;
	return /* @__PURE__ */ jsx(HvDropdownButton, {
		icon: true,
		ref,
		open,
		disabled,
		"aria-expanded": open,
		"aria-haspopup": "menu",
		...others,
		children: icon || /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical" })
	});
});
/**
* A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
*/
var HvDropDownMenu = forwardRef(function HvDropDownMenu(props, ref) {
	const { id: idProp, classes: classesProp, className, icon, placement = "right", dataList, disablePortal = false, onToggle, onClick, keepOpened = true, disabled = false, expanded, defaultExpanded = false, variant = "secondaryGhost", size = "md", labels: labelsProp, ...others } = useDefaultProps("HvDropDownMenu", props);
	const { classes, cx } = useClasses(classesProp);
	const labels = useLabels(DEFAULT_LABELS, labelsProp);
	const [computedPlacement, setComputedPlacement] = useState();
	const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
	const id = useUniqueId(idProp);
	const handleClose = (event) => {
		setOpen(false);
		onToggle?.(event, false);
	};
	const handleKeyDown = (event) => {
		if (isKey(event, "Tab")) {
			const focusNodes = getPrevNextFocus();
			const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
			if (node) setTimeout(() => node.focus(), 0);
			handleClose(event);
		}
		event.preventDefault();
	};
	const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
	return /* @__PURE__ */ jsx(HvBaseDropdown, {
		ref,
		id,
		className: cx(classes.root, className, { [classes.open]: open }),
		classes: { panel: classes.menuListRoot },
		expanded: open && !disabled,
		headerComponent: HeaderComponent,
		"data-popper-placement": computedPlacement,
		size,
		variant,
		open,
		"aria-label": labels.dropdownMenu,
		icon,
		placement,
		variableWidth: true,
		disablePortal,
		onToggle: (e, s) => {
			setOpen(s);
			onToggle?.(e, s);
		},
		disabled,
		onContainerCreation: (containerEl, state) => {
			setComputedPlacement(state.placement);
			containerEl?.getElementsByTagName("li")[0]?.focus();
		},
		...others,
		children: /* @__PURE__ */ jsx(HvList, {
			values: dataList,
			selectable: false,
			condensed,
			onClick: (event, item) => {
				if (!keepOpened) handleClose(event);
				onClick?.(event, item);
			},
			onKeyDown: handleKeyDown,
			classes: { root: classes.menuList }
		})
	});
});
//#endregion
export { HvDropDownMenu };