UNPKG

@yamada-ui/menu

Version:

Yamada UI menu component

91 lines (89 loc) 2.89 kB
"use client" import { useMenu, useMenuDescendantsContext } from "./chunk-IWH3B4PS.mjs"; // src/menu-list.tsx import { forwardRef, ui } from "@yamada-ui/core"; import { PopoverContent } from "@yamada-ui/popover"; import { cx, handlerAll, mergeRefs } from "@yamada-ui/utils"; import { useCallback } from "react"; import { jsx } from "react/jsx-runtime"; var MenuList = forwardRef( ({ className, children, contentProps, ...rest }, ref) => { var _a, _b; const { buttonRef, focusedIndex, menuRef, setFocusedIndex, styles, onClose } = useMenu(); const descendants = useMenuDescendantsContext(); const activedescendantId = (_a = descendants.value(focusedIndex)) == null ? void 0 : _a.node.id; const onNext = useCallback(() => { const next = descendants.enabledNextValue(focusedIndex); if (next) setFocusedIndex(next.index); }, [descendants, focusedIndex, setFocusedIndex]); const onPrev = useCallback(() => { const prev = descendants.enabledPrevValue(focusedIndex); if (prev) setFocusedIndex(prev.index); }, [descendants, focusedIndex, setFocusedIndex]); const onFirst = useCallback(() => { const first = descendants.enabledFirstValue(); if (first) setFocusedIndex(first.index); }, [descendants, setFocusedIndex]); const onLast = useCallback(() => { const last = descendants.enabledLastValue(); if (last) setFocusedIndex(last.index); }, [descendants, setFocusedIndex]); const onKeyDown = useCallback( (ev) => { const actions = { ArrowDown: focusedIndex === -1 ? onFirst : onNext, ArrowUp: focusedIndex === -1 ? onLast : onPrev, End: onLast, Escape: onClose, Home: onFirst, Tab: onClose }; const action = actions[ev.key]; if (!action) return; ev.preventDefault(); action(ev); }, [focusedIndex, onClose, onFirst, onLast, onNext, onPrev] ); return /* @__PURE__ */ jsx( PopoverContent, { as: "div", className: "ui-menu__content", "aria-activedescendant": activedescendantId, "aria-labelledby": (_b = buttonRef.current) == null ? void 0 : _b.id, role: "menu", __css: { ...styles.content }, ...contentProps, onKeyDown: handlerAll(contentProps == null ? void 0 : contentProps.onKeyDown, onKeyDown), children: /* @__PURE__ */ jsx( ui.div, { ref: mergeRefs(menuRef, ref), className: cx("ui-menu__list", className), tabIndex: -1, __css: { ...styles.list }, ...rest, children } ) } ); } ); MenuList.displayName = "MenuList"; MenuList.__ui__ = "MenuList"; export { MenuList }; //# sourceMappingURL=chunk-HWUNOGPF.mjs.map