@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
212 lines (211 loc) • 7.78 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_default_z_index = require("../../core/utils/get-default-z-index/get-default-z-index.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_DirectionProvider = require("../../core/DirectionProvider/DirectionProvider.cjs");
const require_get_floating_position = require("../../utils/Floating/get-floating-position/get-floating-position.cjs");
const require_Overlay = require("../Overlay/Overlay.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_Popover_module = require("./Popover.module.cjs");
const require_PopoverDropdown = require("./PopoverDropdown/PopoverDropdown.cjs");
const require_PopoverTarget = require("./PopoverTarget/PopoverTarget.cjs");
const require_use_popover = require("./use-popover.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Popover/Popover.tsx
const defaultProps = {
position: "bottom",
offset: 8,
transitionProps: {
transition: "fade",
duration: 150
},
middlewares: {
flip: true,
shift: true,
inline: false
},
arrowSize: 7,
arrowOffset: 5,
arrowRadius: 0,
arrowPosition: "side",
closeOnClickOutside: true,
withinPortal: true,
closeOnEscape: true,
trapFocus: false,
withRoles: true,
returnFocus: false,
withOverlay: false,
hideDetached: true,
clickOutsideEvents: ["mousedown", "touchstart"],
zIndex: require_get_default_z_index.getDefaultZIndex("popover"),
__staticSelector: "Popover",
width: "max-content"
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { radius, shadow }) => ({ dropdown: {
"--popover-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
"--popover-shadow": require_get_size.getShadow(shadow)
} }));
function Popover(_props) {
const props = require_use_props.useProps("Popover", defaultProps, _props);
const { children, position, offset, onPositionChange, opened, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, width, middlewares, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, unstyled, classNames, styles, closeOnClickOutside, withinPortal, portalProps, closeOnEscape, clickOutsideEvents, trapFocus, onClose, onDismiss, onOpen, onChange, zIndex, radius, shadow, id, defaultOpened, __staticSelector, withRoles, disabled, returnFocus, variant, keepMounted, vars, floatingStrategy, withOverlay, overlayProps, hideDetached, attributes, preventPositionChangeWhenVisible, ...others } = props;
const getStyles = require_use_styles.useStyles({
name: __staticSelector,
props,
classes: require_Popover_module.default,
classNames,
styles,
unstyled,
attributes,
rootSelector: "dropdown",
vars,
varsResolver
});
const { resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
classNames,
styles,
props
});
const [dropdownVisible, setDropdownVisible] = (0, react.useState)(opened ?? defaultOpened ?? false);
const positionRef = (0, react.useRef)(position);
const arrowRef = (0, react.useRef)(null);
const [targetNode, setTargetNode] = (0, react.useState)(null);
const [dropdownNode, setDropdownNode] = (0, react.useState)(null);
const { dir } = require_DirectionProvider.useDirection();
const env = require_Mantine_context.useMantineEnv();
const uid = (0, _mantine_hooks.useId)(id);
const popover = require_use_popover.usePopover({
middlewares,
width,
position: require_get_floating_position.getFloatingPosition(dir, position),
offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
arrowRef,
arrowOffset,
onPositionChange,
opened,
defaultOpened,
onChange,
onOpen,
onClose,
onDismiss,
strategy: floatingStrategy,
dropdownVisible,
setDropdownVisible,
positionRef,
disabled,
preventPositionChangeWhenVisible,
keepMounted
});
(0, _mantine_hooks.useClickOutside)(() => {
if (closeOnClickOutside) {
popover.onClose();
onDismiss?.();
}
}, clickOutsideEvents, [targetNode, dropdownNode]);
const reference = (0, react.useCallback)((node) => {
setTargetNode(node);
popover.floating.refs.setReference(node);
}, [popover.floating.refs.setReference]);
const floating = (0, react.useCallback)((node) => {
setDropdownNode(node);
popover.floating.refs.setFloating(node);
}, [popover.floating.refs.setFloating]);
const onExited = (0, react.useCallback)(() => {
transitionProps?.onExited?.();
onExitTransitionEnd?.();
setDropdownVisible(false);
if (!preventPositionChangeWhenVisible) positionRef.current = position;
}, [
transitionProps?.onExited,
onExitTransitionEnd,
preventPositionChangeWhenVisible,
position
]);
const onEntered = (0, react.useCallback)(() => {
transitionProps?.onEntered?.();
onEnterTransitionEnd?.();
}, [transitionProps?.onEntered, onEnterTransitionEnd]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover_context.PopoverContextProvider, {
value: {
returnFocus,
disabled,
controlled: popover.controlled,
reference,
floating,
x: popover.floating.x,
y: popover.floating.y,
arrowX: popover.floating?.middlewareData?.arrow?.x,
arrowY: popover.floating?.middlewareData?.arrow?.y,
opened: popover.opened,
arrowRef,
transitionProps: {
...transitionProps,
onExited,
onEntered
},
width,
withArrow,
arrowSize,
arrowOffset,
arrowRadius,
arrowPosition,
placement: popover.floating.placement,
trapFocus,
withinPortal,
portalProps,
zIndex,
radius,
shadow,
closeOnEscape,
onDismiss,
onClose: popover.onClose,
onToggle: popover.onToggle,
getTargetId: () => uid,
getDropdownId: () => `${uid}-dropdown`,
withRoles,
targetProps: others,
__staticSelector,
classNames,
styles,
unstyled,
variant,
keepMounted,
getStyles,
resolvedStyles,
floatingStrategy,
referenceHidden: hideDetached && env !== "test" ? popover.floating.middlewareData.hide?.referenceHidden : false
},
children: [children, withOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.Transition, {
transition: "fade",
mounted: popover.opened,
duration: transitionProps?.duration || 250,
exitDuration: transitionProps?.exitDuration || 250,
children: (transitionStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
withinPortal,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Overlay.Overlay, {
...overlayProps,
...getStyles("overlay", {
className: overlayProps?.className,
style: [transitionStyles, overlayProps?.style]
})
})
})
})]
});
}
Popover.Target = require_PopoverTarget.PopoverTarget;
Popover.Dropdown = require_PopoverDropdown.PopoverDropdown;
Popover.varsResolver = varsResolver;
Popover.displayName = "@mantine/core/Popover";
Popover.extend = (input) => input;
//#endregion
exports.Popover = Popover;
//# sourceMappingURL=Popover.cjs.map