@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
65 lines (64 loc) • 2.47 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_use_delayed_hover = require("../../../utils/Floating/use-delayed-hover.cjs");
const require_Popover = require("../../Popover/Popover.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");
//#region packages/@mantine/core/src/components/Menu/MenuSub/MenuSub.tsx
const defaultProps = {
offset: 0,
position: "right-start",
transitionProps: { duration: 0 },
openDelay: 0,
middlewares: { shift: { crossAxis: true } }
};
function MenuSub(_props) {
const { children, closeDelay, openDelay, ...others } = require_use_props.useProps("MenuSub", defaultProps, _props);
const id = (0, _mantine_hooks.useId)();
const [opened, { open, close }] = (0, _mantine_hooks.useDisclosure)(false);
const ctx = (0, react.use)(require_MenuSub_context.SubMenuContext);
const { openDropdown, closeDropdown } = require_use_delayed_hover.useDelayedHover({
open,
close,
closeDelay,
openDelay
});
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: closeDropdown,
open: openDropdown,
focusFirstItem,
focusParentItem,
parentContext: ctx
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
opened,
withinPortal: false,
withArrow: false,
id,
...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