@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
111 lines (110 loc) • 4.33 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.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_Popover = require("../../Popover/Popover.cjs");
const require_Menu_context = require("../Menu.context.cjs");
const require_MenuSub_context = require("./MenuSub.context.cjs");
const require_MenuSubDropdown = require("../MenuSubDropdown/MenuSubDropdown.cjs");
const require_MenuSubItem = require("../MenuSubItem/MenuSubItem.cjs");
const require_MenuSubTarget = require("../MenuSubTarget/MenuSubTarget.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
let _floating_ui_react = require("@floating-ui/react");
//#region packages/@mantine/core/src/components/Menu/MenuSub/MenuSub.tsx
const defaultProps = {
offset: 0,
position: "right-start",
safeAreaPolygon: true,
transitionProps: { duration: 0 },
openDelay: 0,
middlewares: { shift: { crossAxis: true } }
};
function MenuSub(_props) {
const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = require_use_props.useProps("MenuSub", defaultProps, _props);
const id = (0, _mantine_hooks.useId)();
const [opened, { open, close }] = (0, _mantine_hooks.useDisclosure)(false);
const parentSubCtx = (0, react.use)(require_MenuSub_context.SubMenuContext);
const menuCtx = require_Menu_context.useMenuContext();
const { dir } = require_DirectionProvider.useDirection();
const resolvedPosition = require_get_floating_position.getFloatingPosition(dir, position);
const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;
const unregisterRef = (0, react.useRef)(null);
const activeChildCloseRef = (0, react.useRef)(null);
const registerOpenSub = (0, react.useCallback)((closeFn) => {
const prev = activeChildCloseRef.current;
if (prev && prev !== closeFn) prev();
activeChildCloseRef.current = closeFn;
return () => {
if (activeChildCloseRef.current === closeFn) activeChildCloseRef.current = null;
};
}, []);
const handleOpen = (0, react.useCallback)(() => {
unregisterRef.current = levelRegister(close);
open();
}, [
close,
levelRegister,
open
]);
const handleClose = (0, react.useCallback)(() => {
unregisterRef.current?.();
unregisterRef.current = null;
close();
}, [close]);
const { context, refs } = (0, _floating_ui_react.useFloating)({
placement: resolvedPosition,
open: opened,
onOpenChange: (nextOpen) => {
if (nextOpen) handleOpen();
else handleClose();
}
});
const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([(0, _floating_ui_react.useHover)(context, {
handleClose: safeAreaPolygon ? (0, _floating_ui_react.safePolygon)(typeof safeAreaPolygon === "object" ? safeAreaPolygon : void 0) : void 0,
delay: {
open: openDelay,
close: closeDelay
}
})]);
const focusFirstItem = () => window.setTimeout(() => {
document.getElementById(`${id}-dropdown`)?.querySelectorAll("[data-menu-item]:not([data-disabled])")[0]?.focus();
}, 16);
const focusParentItem = () => window.setTimeout(() => {
document.getElementById(`${id}-target`)?.focus();
}, 16);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuSub_context.SubMenuContext, {
value: {
opened,
close: handleClose,
open: handleOpen,
focusFirstItem,
focusParentItem,
parentContext: parentSubCtx,
setReference: refs.setReference,
setFloating: refs.setFloating,
getReferenceProps,
getFloatingProps,
registerOpenSub
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
opened,
withinPortal: false,
withArrow: false,
id,
position,
...others,
children
})
});
}
MenuSub.extend = (input) => input;
MenuSub.displayName = "@mantine/core/MenuSub";
MenuSub.Target = require_MenuSubTarget.MenuSubTarget;
MenuSub.Dropdown = require_MenuSubDropdown.MenuSubDropdown;
MenuSub.Item = require_MenuSubItem.MenuSubItem;
//#endregion
exports.MenuSub = MenuSub;
//# sourceMappingURL=MenuSub.cjs.map