@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
105 lines (104 loc) • 4.21 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../../core/utils/units-converters/rem.cjs");
const require_close_on_escape = require("../../../core/utils/close-on-escape/close-on-escape.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_FloatingArrow = require("../../../utils/Floating/FloatingArrow/FloatingArrow.cjs");
const require_OptionalPortal = require("../../Portal/OptionalPortal.cjs");
const require_Transition = require("../../Transition/Transition.cjs");
const require_Popover_context = require("../Popover.context.cjs");
const require_FocusTrap = require("../../FocusTrap/FocusTrap.cjs");
const require_Popover_module = require("../Popover.module.cjs");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Popover/PopoverDropdown/PopoverDropdown.tsx
const PopoverDropdown = require_factory.factory((_props) => {
const props = require_use_props.useProps("PopoverDropdown", null, _props);
const { className, style, vars, children, onKeyDownCapture, variant, classNames, styles, ref, ...others } = props;
const ctx = require_Popover_context.usePopoverContext();
const returnFocus = (0, _mantine_hooks.useFocusReturn)({
opened: ctx.opened,
shouldReturnFocus: ctx.returnFocus
});
const accessibleProps = ctx.withRoles ? {
"aria-labelledby": ctx.getTargetId(),
id: ctx.getDropdownId(),
role: "dialog",
tabIndex: -1
} : {};
const mergedRef = (0, _mantine_hooks.useMergedRef)(ref, ctx.floating);
if (ctx.disabled) return null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
...ctx.portalProps,
withinPortal: ctx.withinPortal,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.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__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap, {
active: ctx.trapFocus && ctx.opened,
innerRef: mergedRef,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
...accessibleProps,
...others,
variant,
onKeyDownCapture: require_close_on_escape.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 : require_rem.rem(ctx.width),
...ctx.referenceHidden ? { display: "none" } : null
},
ctx.resolvedStyles.dropdown,
styles?.dropdown,
style
]
}),
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingArrow.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 = require_Popover_module.default;
PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
//#endregion
exports.PopoverDropdown = PopoverDropdown;
//# sourceMappingURL=PopoverDropdown.cjs.map