263 lines
9.1 KiB
JavaScript
263 lines
9.1 KiB
JavaScript
'use client'
|
|
"use strict";
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/menu-command.tsx
|
|
var menu_command_exports = {};
|
|
__export(menu_command_exports, {
|
|
MenuCommand: () => MenuCommand
|
|
});
|
|
module.exports = __toCommonJS(menu_command_exports);
|
|
var import_system2 = require("@chakra-ui/system");
|
|
|
|
// src/menu.tsx
|
|
var import_react_context2 = require("@chakra-ui/react-context");
|
|
var import_system = require("@chakra-ui/system");
|
|
var import_shared_utils2 = require("@chakra-ui/shared-utils");
|
|
var import_react2 = require("react");
|
|
|
|
// src/use-menu.ts
|
|
var import_clickable = require("@chakra-ui/clickable");
|
|
var import_descendant = require("@chakra-ui/descendant");
|
|
var import_react_use_focus_effect = require("@chakra-ui/react-use-focus-effect");
|
|
var import_popper = require("@chakra-ui/popper");
|
|
var import_react_use_disclosure = require("@chakra-ui/react-use-disclosure");
|
|
var import_react_use_outside_click = require("@chakra-ui/react-use-outside-click");
|
|
var import_react_use_animation_state = require("@chakra-ui/react-use-animation-state");
|
|
var import_react_context = require("@chakra-ui/react-context");
|
|
var import_react_children_utils = require("@chakra-ui/react-children-utils");
|
|
var import_react_use_controllable_state = require("@chakra-ui/react-use-controllable-state");
|
|
var import_react_use_update_effect = require("@chakra-ui/react-use-update-effect");
|
|
var import_react_use_merge_refs = require("@chakra-ui/react-use-merge-refs");
|
|
var import_shared_utils = require("@chakra-ui/shared-utils");
|
|
var import_lazy_utils = require("@chakra-ui/lazy-utils");
|
|
var import_react = require("react");
|
|
var [
|
|
MenuDescendantsProvider,
|
|
useMenuDescendantsContext,
|
|
useMenuDescendants,
|
|
useMenuDescendant
|
|
] = (0, import_descendant.createDescendantContext)();
|
|
var [MenuProvider, useMenuContext] = (0, import_react_context.createContext)({
|
|
strict: false,
|
|
name: "MenuContext"
|
|
});
|
|
function useIds(idProp, ...prefixes) {
|
|
const reactId = (0, import_react.useId)();
|
|
const id = idProp || reactId;
|
|
return (0, import_react.useMemo)(() => {
|
|
return prefixes.map((prefix) => `${prefix}-${id}`);
|
|
}, [id, prefixes]);
|
|
}
|
|
function getOwnerDocument(node) {
|
|
var _a;
|
|
return (_a = node == null ? void 0 : node.ownerDocument) != null ? _a : document;
|
|
}
|
|
function useMenu(props = {}) {
|
|
const {
|
|
id,
|
|
closeOnSelect = true,
|
|
closeOnBlur = true,
|
|
initialFocusRef,
|
|
autoSelect = true,
|
|
isLazy,
|
|
isOpen: isOpenProp,
|
|
defaultIsOpen,
|
|
onClose: onCloseProp,
|
|
onOpen: onOpenProp,
|
|
placement = "bottom-start",
|
|
lazyBehavior = "unmount",
|
|
direction,
|
|
computePositionOnMount = false,
|
|
...popperProps
|
|
} = props;
|
|
const menuRef = (0, import_react.useRef)(null);
|
|
const buttonRef = (0, import_react.useRef)(null);
|
|
const descendants = useMenuDescendants();
|
|
const focusMenu = (0, import_react.useCallback)(() => {
|
|
requestAnimationFrame(() => {
|
|
var _a;
|
|
(_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
|
|
});
|
|
}, []);
|
|
const focusFirstItem = (0, import_react.useCallback)(() => {
|
|
const id2 = setTimeout(() => {
|
|
var _a;
|
|
if (initialFocusRef) {
|
|
(_a = initialFocusRef.current) == null ? void 0 : _a.focus();
|
|
} else {
|
|
const first = descendants.firstEnabled();
|
|
if (first)
|
|
setFocusedIndex(first.index);
|
|
}
|
|
});
|
|
timeoutIds.current.add(id2);
|
|
}, [descendants, initialFocusRef]);
|
|
const focusLastItem = (0, import_react.useCallback)(() => {
|
|
const id2 = setTimeout(() => {
|
|
const last = descendants.lastEnabled();
|
|
if (last)
|
|
setFocusedIndex(last.index);
|
|
});
|
|
timeoutIds.current.add(id2);
|
|
}, [descendants]);
|
|
const onOpenInternal = (0, import_react.useCallback)(() => {
|
|
onOpenProp == null ? void 0 : onOpenProp();
|
|
if (autoSelect) {
|
|
focusFirstItem();
|
|
} else {
|
|
focusMenu();
|
|
}
|
|
}, [autoSelect, focusFirstItem, focusMenu, onOpenProp]);
|
|
const { isOpen, onOpen, onClose, onToggle } = (0, import_react_use_disclosure.useDisclosure)({
|
|
isOpen: isOpenProp,
|
|
defaultIsOpen,
|
|
onClose: onCloseProp,
|
|
onOpen: onOpenInternal
|
|
});
|
|
(0, import_react_use_outside_click.useOutsideClick)({
|
|
enabled: isOpen && closeOnBlur,
|
|
ref: menuRef,
|
|
handler: (event) => {
|
|
var _a;
|
|
if (!((_a = buttonRef.current) == null ? void 0 : _a.contains(event.target))) {
|
|
onClose();
|
|
}
|
|
}
|
|
});
|
|
const popper = (0, import_popper.usePopper)({
|
|
...popperProps,
|
|
enabled: isOpen || computePositionOnMount,
|
|
placement,
|
|
direction
|
|
});
|
|
const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
|
|
(0, import_react_use_update_effect.useUpdateEffect)(() => {
|
|
if (!isOpen) {
|
|
setFocusedIndex(-1);
|
|
}
|
|
}, [isOpen]);
|
|
(0, import_react_use_focus_effect.useFocusOnHide)(menuRef, {
|
|
focusRef: buttonRef,
|
|
visible: isOpen,
|
|
shouldFocus: true
|
|
});
|
|
const animationState = (0, import_react_use_animation_state.useAnimationState)({ isOpen, ref: menuRef });
|
|
const [buttonId, menuId] = useIds(id, `menu-button`, `menu-list`);
|
|
const openAndFocusMenu = (0, import_react.useCallback)(() => {
|
|
onOpen();
|
|
focusMenu();
|
|
}, [onOpen, focusMenu]);
|
|
const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
|
|
(0, import_react.useEffect)(() => {
|
|
const ids = timeoutIds.current;
|
|
return () => {
|
|
ids.forEach((id2) => clearTimeout(id2));
|
|
ids.clear();
|
|
};
|
|
}, []);
|
|
const openAndFocusFirstItem = (0, import_react.useCallback)(() => {
|
|
onOpen();
|
|
focusFirstItem();
|
|
}, [focusFirstItem, onOpen]);
|
|
const openAndFocusLastItem = (0, import_react.useCallback)(() => {
|
|
onOpen();
|
|
focusLastItem();
|
|
}, [onOpen, focusLastItem]);
|
|
const refocus = (0, import_react.useCallback)(() => {
|
|
var _a, _b;
|
|
const doc = getOwnerDocument(menuRef.current);
|
|
const hasFocusWithin = (_a = menuRef.current) == null ? void 0 : _a.contains(doc.activeElement);
|
|
const shouldRefocus = isOpen && !hasFocusWithin;
|
|
if (!shouldRefocus)
|
|
return;
|
|
const node = (_b = descendants.item(focusedIndex)) == null ? void 0 : _b.node;
|
|
node == null ? void 0 : node.focus({ preventScroll: true });
|
|
}, [isOpen, focusedIndex, descendants]);
|
|
const rafId = (0, import_react.useRef)(null);
|
|
return {
|
|
openAndFocusMenu,
|
|
openAndFocusFirstItem,
|
|
openAndFocusLastItem,
|
|
onTransitionEnd: refocus,
|
|
unstable__animationState: animationState,
|
|
descendants,
|
|
popper,
|
|
buttonId,
|
|
menuId,
|
|
forceUpdate: popper.forceUpdate,
|
|
orientation: "vertical",
|
|
isOpen,
|
|
onToggle,
|
|
onOpen,
|
|
onClose,
|
|
menuRef,
|
|
buttonRef,
|
|
focusedIndex,
|
|
closeOnSelect,
|
|
closeOnBlur,
|
|
autoSelect,
|
|
setFocusedIndex,
|
|
isLazy,
|
|
lazyBehavior,
|
|
initialFocusRef,
|
|
rafId
|
|
};
|
|
}
|
|
|
|
// src/menu.tsx
|
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
var [MenuStylesProvider, useMenuStyles] = (0, import_react_context2.createContext)({
|
|
name: `MenuStylesContext`,
|
|
errorMessage: `useMenuStyles returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />" `
|
|
});
|
|
var Menu = (props) => {
|
|
const { children } = props;
|
|
const styles = (0, import_system.useMultiStyleConfig)("Menu", props);
|
|
const ownProps = (0, import_system.omitThemingProps)(props);
|
|
const { direction } = (0, import_system.useTheme)();
|
|
const { descendants, ...ctx } = useMenu({ ...ownProps, direction });
|
|
const context = (0, import_react2.useMemo)(() => ctx, [ctx]);
|
|
const { isOpen, onClose, forceUpdate } = context;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuDescendantsProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuStylesProvider, { value: styles, children: (0, import_shared_utils2.runIfFn)(children, { isOpen, onClose, forceUpdate }) }) }) });
|
|
};
|
|
Menu.displayName = "Menu";
|
|
|
|
// src/menu-command.tsx
|
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
var MenuCommand = (0, import_system2.forwardRef)(
|
|
(props, ref) => {
|
|
const styles = useMenuStyles();
|
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
import_system2.chakra.span,
|
|
{
|
|
ref,
|
|
...props,
|
|
__css: styles.command,
|
|
className: "chakra-menu__command"
|
|
}
|
|
);
|
|
}
|
|
);
|
|
MenuCommand.displayName = "MenuCommand";
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
MenuCommand
|
|
});
|
|
//# sourceMappingURL=menu-command.js.map
|