@hitachivantara/uikit-react-core/dist/BaseDropdown/BaseDropdownPanel.js

UI Kit Core React components.

import { isKey } from "../utils/keyboardUtils.js";
import { HvPanel } from "../Panel/Panel.js";
import { getContainerElement } from "../utils/document.js";
import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
import { usePopperModifiers } from "./utils.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { useMemo, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Popper from "@mui/material/Popper";
//#region src/BaseDropdown/BaseDropdownPanel.tsx
var name = "HvDropdownPanel";
var { useClasses } = createClasses(name, {
	container: {
		zIndex: theme.zIndices.popover,
		width: "auto"
	},
	panel: {
		padding: theme.space.xs,
		border: `1px solid ${theme.colors.text}`
	}
});
var HvDropdownPanel = (props) => {
	const { classes: classesProp, className, containerId, children, variableWidth = true, anchorEl, disablePortal, modifiers: modifiersProp, popperOptions: popperOptionsProp, onToggle, onClickAway, onFirstUpdate, ...others } = useDefaultProps(name, props);
	const { classes, cx } = useClasses(classesProp, false);
	const { rootId } = useTheme();
	const popperRef = useRef(null);
	const [placement, setPlacement] = useState();
	const modifiers = usePopperModifiers({
		variableWidth,
		modifiers: modifiersProp,
		onPlacementChange: setPlacement
	});
	const popperOptions = useMemo(() => {
		return {
			...popperOptionsProp,
			onFirstUpdate
		};
	}, [onFirstUpdate, popperOptionsProp]);
	/** Handle keyboard inside children container. */
	const handleKeyDown = (event) => {
		if (isKey(event, "Esc")) onToggle?.(event);
		if (isKey(event, "Tab") && !event.shiftKey) {
			const focusList = getFirstAndLastFocus(popperRef.current?.state?.elements.popper);
			if (document.activeElement === focusList?.last) {
				event.preventDefault();
				focusList?.first?.focus();
			}
		}
	};
	return /* @__PURE__ */ jsx(Popper, {
		anchorEl,
		popperRef,
		disablePortal,
		container: !disablePortal ? getContainerElement(rootId) : void 0,
		className: cx(classes.container, className),
		modifiers,
		onKeyDown: handleKeyDown,
		popperOptions,
		...others,
		children: /* @__PURE__ */ jsx(ClickAwayListener, {
			onClickAway,
			children: /* @__PURE__ */ jsx(HvPanel, {
				id: containerId,
				className: classes.panel,
				"data-popper-placement": placement,
				children
			})
		})
	});
};
//#endregion
export { HvDropdownPanel };