@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
104 lines (103 loc) • 3.7 kB
JavaScript
"use client";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import { closeOnEscape } from "../../../core/utils/close-on-escape/close-on-escape.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { FloatingArrow } from "../../../utils/Floating/FloatingArrow/FloatingArrow.mjs";
import { OptionalPortal } from "../../Portal/OptionalPortal.mjs";
import { Transition } from "../../Transition/Transition.mjs";
import { usePopoverContext } from "../Popover.context.mjs";
import { FocusTrap } from "../../FocusTrap/FocusTrap.mjs";
import Popover_module_default from "../Popover.module.mjs";
import { useFocusReturn, useMergedRef } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Popover/PopoverDropdown/PopoverDropdown.tsx
const PopoverDropdown = factory((_props) => {
const props = useProps("PopoverDropdown", null, _props);
const { className, style, vars, children, onKeyDownCapture, variant, classNames, styles, ref, ...others } = props;
const ctx = usePopoverContext();
const returnFocus = useFocusReturn({
opened: ctx.opened,
shouldReturnFocus: ctx.returnFocus
});
const accessibleProps = ctx.withRoles ? {
"aria-labelledby": ctx.getTargetId(),
id: ctx.getDropdownId(),
role: "dialog",
tabIndex: -1
} : {};
const mergedRef = useMergedRef(ref, ctx.floating);
if (ctx.disabled) return null;
return /* @__PURE__ */ jsx(OptionalPortal, {
...ctx.portalProps,
withinPortal: ctx.withinPortal,
children: /* @__PURE__ */ jsx(Transition, {
mounted: ctx.opened,
...ctx.transitionProps,
transition: ctx.transitionProps?.transition || "fade",
duration: ctx.transitionProps?.duration ?? 150,
keepMounted: ctx.keepMounted,
exitDuration: typeof ctx.transitionProps?.exitDuration === "number" ? ctx.transitionProps.exitDuration : ctx.transitionProps?.duration,
children: (transitionStyles) => /* @__PURE__ */ jsx(FocusTrap, {
active: ctx.trapFocus && ctx.opened,
innerRef: mergedRef,
children: /* @__PURE__ */ jsxs(Box, {
...accessibleProps,
...others,
variant,
onKeyDownCapture: closeOnEscape(() => {
ctx.onClose?.();
ctx.onDismiss?.();
}, {
active: ctx.closeOnEscape,
onTrigger: returnFocus,
onKeyDown: onKeyDownCapture
}),
"data-position": ctx.placement,
"data-fixed": ctx.floatingStrategy === "fixed" || void 0,
...ctx.getStyles("dropdown", {
className,
props,
classNames,
styles,
style: [
{
...transitionStyles,
zIndex: ctx.zIndex,
top: ctx.y ?? 0,
left: ctx.x ?? 0,
width: ctx.width === "target" ? void 0 : rem(ctx.width),
...ctx.referenceHidden ? { display: "none" } : null
},
ctx.resolvedStyles.dropdown,
styles?.dropdown,
style
]
}),
children: [children, /* @__PURE__ */ jsx(FloatingArrow, {
ref: ctx.arrowRef,
arrowX: ctx.arrowX,
arrowY: ctx.arrowY,
visible: ctx.withArrow,
position: ctx.placement,
arrowSize: ctx.arrowSize,
arrowRadius: ctx.arrowRadius,
arrowOffset: ctx.arrowOffset,
arrowPosition: ctx.arrowPosition,
...ctx.getStyles("arrow", {
props,
classNames,
styles
})
})]
})
})
})
});
});
PopoverDropdown.classes = Popover_module_default;
PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
//#endregion
export { PopoverDropdown };
//# sourceMappingURL=PopoverDropdown.mjs.map