@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
59 lines (58 loc) • 1.91 kB
JavaScript
"use client";
import { Menu } from "../../Menu/Menu.mjs";
import { MenubarMenuContextProvider, useMenubarContext } from "../Menubar.context.mjs";
import { useState } from "react";
import { useId as useId$1, useIsomorphicEffect } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Menubar/MenubarMenu/MenubarMenu.tsx
const DEFAULT_TRANSITION_DURATION = 150;
function MenubarMenu({ children, transitionProps, ...others }) {
const ctx = useMenubarContext();
const id = useId$1();
const [index, setIndex] = useState(-1);
useIsomorphicEffect(() => {
const next = ctx.getMenuIndex(id);
setIndex((current) => current === next ? current : next);
});
const opened = ctx.openIndex !== null && index !== -1 && ctx.openIndex === index;
const handleChange = (value) => {
if (value) {
ctx.openMenu(index, "click");
ctx.setActiveIndex(index);
} else ctx.closeMenu();
};
const baseDuration = transitionProps?.duration ?? DEFAULT_TRANSITION_DURATION;
const baseExitDuration = transitionProps?.exitDuration ?? baseDuration;
const animateEnter = ctx.getPreviousOpenIndex() === null;
const animateExit = ctx.openIndex === null;
const resolvedTransitionProps = {
...transitionProps,
duration: animateEnter ? baseDuration : 0,
exitDuration: animateExit ? baseExitDuration : 0
};
return /* @__PURE__ */ jsx(MenubarMenuContextProvider, {
value: {
id,
index,
opened
},
children: /* @__PURE__ */ jsx(Menu, {
position: ctx.position,
loop: ctx.loop,
unstyled: ctx.unstyled,
menuItemTabIndex: -1,
trapFocus: false,
...others,
transitionProps: resolvedTransitionProps,
opened,
onChange: handleChange,
trigger: "click",
returnFocus: false,
children
})
});
}
MenubarMenu.displayName = "@mantine/core/MenubarMenu";
//#endregion
export { MenubarMenu };
//# sourceMappingURL=MenubarMenu.mjs.map