@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
146 lines (145 loc) • 5.95 kB
JavaScript
"use client";
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_Menubar_context = require("./Menubar.context.cjs");
const require_MenubarDropdown = require("./MenubarDropdown/MenubarDropdown.cjs");
const require_MenubarMenu = require("./MenubarMenu/MenubarMenu.cjs");
const require_MenubarTarget = require("./MenubarTarget/MenubarTarget.cjs");
const require_Menubar_module = require("./Menubar.module.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/Menubar/Menubar.tsx
const defaultProps = {
trigger: "click",
loop: true,
position: "bottom-start"
};
const Menubar = require_factory.factory((_props) => {
const props = require_use_props.useProps("Menubar", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, children, openIndex, defaultOpenIndex, onOpenChange, trigger, loop, position, attributes, mod, ref, ...others } = props;
const getStyles = require_use_styles.useStyles({
name: "Menubar",
classes: require_Menubar_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes
});
const rootRef = (0, react.useRef)(null);
const menubarId = (0, _mantine_hooks.useId)();
const [_openIndex, setOpenIndex] = (0, _mantine_hooks.useUncontrolled)({
value: openIndex,
defaultValue: defaultOpenIndex,
finalValue: null,
onChange: onOpenChange
});
const [activeIndex, setActiveIndex] = (0, react.useState)(0);
const openSourceRef = (0, react.useRef)(null);
const openMenu = (0, react.useCallback)((index, source) => {
openSourceRef.current = source;
setOpenIndex(index);
}, [setOpenIndex]);
const closeMenu = (0, react.useCallback)(() => {
openSourceRef.current = null;
setOpenIndex(null);
}, [setOpenIndex]);
const closeTimeoutRef = (0, react.useRef)(-1);
const cancelClose = (0, react.useCallback)(() => {
window.clearTimeout(closeTimeoutRef.current);
}, []);
const scheduleClose = (0, react.useCallback)(() => {
window.clearTimeout(closeTimeoutRef.current);
closeTimeoutRef.current = window.setTimeout(closeMenu, 120);
}, [closeMenu]);
(0, _mantine_hooks.useIsomorphicEffect)(() => () => window.clearTimeout(closeTimeoutRef.current), []);
const getOpenSource = (0, react.useCallback)(() => openSourceRef.current, []);
const previousOpenIndexRef = (0, react.useRef)(_openIndex);
const getPreviousOpenIndex = (0, react.useCallback)(() => previousOpenIndexRef.current, []);
(0, _mantine_hooks.useIsomorphicEffect)(() => {
previousOpenIndexRef.current = _openIndex;
});
const getTargets = (0, react.useCallback)(() => Array.from(rootRef.current?.querySelectorAll("[data-menubar-target]") ?? []), []);
const getMenuIndex = (0, react.useCallback)((id) => getTargets().findIndex((node) => node.getAttribute("data-menubar-id") === id), [getTargets]);
const getEnabledIndexes = (0, react.useCallback)(() => getTargets().reduce((acc, node, index) => {
if (!node.disabled && !node.hasAttribute("data-disabled")) acc.push(index);
return acc;
}, []), [getTargets]);
const focusTarget = (0, react.useCallback)((index) => {
getTargets()[index]?.focus();
}, [getTargets]);
const focusMenuItem = (0, react.useCallback)((index, itemPosition) => {
window.setTimeout(() => {
const controls = getTargets()[index]?.getAttribute("aria-controls");
const items = (controls ? document.getElementById(controls) : document.querySelector(`[data-menubar-dropdown="${menubarId}"]`))?.querySelectorAll("[data-menu-item]:not([data-disabled])");
if (items && items.length > 0) (itemPosition === "first" ? items[0] : items[items.length - 1])?.focus();
}, 40);
}, [getTargets]);
const getAdjacentIndex = (0, react.useCallback)((current, direction) => {
const enabled = getEnabledIndexes();
if (enabled.length === 0) return current;
const currentPosition = enabled.indexOf(current);
let nextPosition = currentPosition === -1 ? 0 : currentPosition + direction;
if (loop) nextPosition = (nextPosition + enabled.length) % enabled.length;
else nextPosition = Math.max(0, Math.min(enabled.length - 1, nextPosition));
return enabled[nextPosition] ?? current;
}, [getEnabledIndexes, loop]);
(0, _mantine_hooks.useIsomorphicEffect)(() => {
const enabled = getEnabledIndexes();
if (enabled.length === 0) return;
if (_openIndex !== null && enabled.includes(_openIndex)) {
if (activeIndex !== _openIndex) setActiveIndex(_openIndex);
return;
}
if (!enabled.includes(activeIndex)) setActiveIndex(enabled[0]);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menubar_context.MenubarContextProvider, {
value: {
getStyles,
id: menubarId,
openIndex: _openIndex,
setOpenIndex,
openMenu,
closeMenu,
scheduleClose,
cancelClose,
getOpenSource,
getPreviousOpenIndex,
activeIndex,
setActiveIndex,
trigger,
loop,
position,
unstyled,
getMenuIndex,
getTargets,
getEnabledIndexes,
getAdjacentIndex,
focusTarget,
focusMenuItem
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
ref: (0, _mantine_hooks.useMergedRef)(ref, rootRef),
role: "menubar",
"aria-orientation": "horizontal",
mod,
...getStyles("root"),
...others,
"data-menubar": true,
children
})
});
});
Menubar.classes = require_Menubar_module.default;
Menubar.displayName = "@mantine/core/Menubar";
Menubar.Menu = require_MenubarMenu.MenubarMenu;
Menubar.Target = require_MenubarTarget.MenubarTarget;
Menubar.Dropdown = require_MenubarDropdown.MenubarDropdown;
//#endregion
exports.Menubar = Menubar;
//# sourceMappingURL=Menubar.cjs.map