@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
64 lines (63 loc) • 2.08 kB
JavaScript
"use client";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { useDelayedHover } from "../../../utils/Floating/use-delayed-hover.mjs";
import { Popover } from "../../Popover/Popover.mjs";
import { SubMenuContext } from "./MenuSub.context.mjs";
import { MenuSubDropdown } from "../MenuSubDropdown/MenuSubDropdown.mjs";
import { MenuSubItem } from "../MenuSubItem/MenuSubItem.mjs";
import { MenuSubTarget } from "../MenuSubTarget/MenuSubTarget.mjs";
import { use } from "react";
import { useDisclosure, useId as useId$1 } from "@mantine/hooks";
import { jsx } from "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 } = useProps("MenuSub", defaultProps, _props);
const id = useId$1();
const [opened, { open, close }] = useDisclosure(false);
const ctx = use(SubMenuContext);
const { openDropdown, closeDropdown } = 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__ */ jsx(SubMenuContext, {
value: {
opened,
close: closeDropdown,
open: openDropdown,
focusFirstItem,
focusParentItem,
parentContext: ctx
},
children: /* @__PURE__ */ jsx(Popover, {
opened,
withinPortal: false,
withArrow: false,
id,
...others,
children
})
});
}
MenuSub.extend = (input) => input;
MenuSub.displayName = "@mantine/core/MenuSub";
MenuSub.Target = MenuSubTarget;
MenuSub.Dropdown = MenuSubDropdown;
MenuSub.Item = MenuSubItem;
//#endregion
export { MenuSub };
//# sourceMappingURL=MenuSub.mjs.map