@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
82 lines (81 loc) • 2.67 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
import { Portal } from "@mui/base/Portal";
import { useCss, useTheme } from "@hitachivantara/uikit-react-utils";
import { getContainerElement } from "../utils/document.js";
import { useBaseDropdownContext } from "./context.js";
import { HvPanel } from "../Panel/Panel.js";
const BaseDropdownPanel = ({
classes,
containerId,
children,
disablePortal,
onContainerKeyDown,
onClickAway
}) => {
const { cx } = useCss();
const { popperPlacement, popper, referenceElement, setPopperElement } = useBaseDropdownContext();
const { rootId } = useTheme();
const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
const container = (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
/* @__PURE__ */ jsxs(
"div",
{
ref: setPopperElement,
className: classes.container,
onKeyDown: onContainerKeyDown,
style: popper?.styles.popper,
...popper?.attributes.popper,
children: [
popperPlacement?.includes("bottom") && /* @__PURE__ */ jsx(
"div",
{
style: { width: extensionWidth },
className: cx(classes.inputExtensionOpen, {
[classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
})
}
),
/* @__PURE__ */ jsx(
HvPanel,
{
id: containerId,
"data-popper-placement": popperPlacement,
className: cx(classes.panel, {
[classes.panelOpenedUp]: popperPlacement?.includes("top"),
[classes.panelOpenedDown]: popperPlacement?.includes("bottom")
}),
children
}
),
popperPlacement?.includes("top") && /* @__PURE__ */ jsx(
"div",
{
style: { width: extensionWidth },
className: cx(
classes.inputExtensionOpen,
classes.inputExtensionOpenShadow,
{
[classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
[classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
}
)
}
)
]
}
)
);
return /* @__PURE__ */ jsx(
Portal,
{
container: getContainerElement(rootId),
disablePortal,
children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: container })
}
);
};
export {
BaseDropdownPanel
};