@choice-ui/react 1.4.3 → 1.4.5

package/dist/components/menus/dist/index.js

@@ -1,5 +1,5 @@
 import { Button } from "../../button/dist/index.js";
-import React, { forwardRef, memo, useCallback, useContext, createContext, useMemo, startTransition, useRef, useEffect, Children, isValidElement, Fragment as Fragment$1, useState } from "react";
+import React, { forwardRef, memo, useCallback, useContext, createContext, useMemo, startTransition, useRef, Children, isValidElement, Fragment as Fragment$1, useState, useEffect } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRightSmall, ChevronDownSmall, ChevronUpSmall } from "@choiceform/icons-react";
 import { Kbd } from "../../kbd/dist/index.js";
@@ -213,7 +213,7 @@ var MenuButtonTv = tcv({
 var MenuScrollArrowTv = tcv({
   base: [
     "absolute flex h-6 w-full items-center justify-center overflow-hidden",
-    "z-menu pointer-events-auto border-white/10 bg-gray-900 text-white hover:bg-gray-800"
+    "z-menu pointer-events-auto backdrop-blur-sm"
   ],
   variants: {
     dir: {
@@ -223,11 +223,17 @@ var MenuScrollArrowTv = tcv({
     visible: {
       true: "visible",
       false: "hidden"
+    },
+    variant: {
+      default: "border-white/10 bg-gray-900/50 text-white hover:bg-gray-800",
+      light: "border-gray-200 bg-white/50 text-gray-900 hover:bg-gray-100",
+      reset: {}
     }
   },
   defaultVariants: {
     visible: false,
-    dir: "down"
+    dir: "down",
+    variant: "default"
   }
 });
 var MenuCheckboxTv = tcv({
@@ -283,14 +289,14 @@ var MenuCheckboxTv = tcv({
 var MenuButton = memo(
   forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const styles = MenuButtonTv();
+    const tv = MenuButtonTv();
     return /* @__PURE__ */ jsx(
       Button,
       {
         ...rest,
         ref,
         variant: "secondary",
-        className: tcx(styles, className)
+        className: tcx(tv, className)
       }
     );
   })
@@ -298,20 +304,20 @@ var MenuButton = memo(
 MenuButton.displayName = "MenuButton";
 var MenuCheckbox = memo(function MenuCheckbox2(props) {
   const { active, selected, disabled, indeterminate, ...rest } = props;
-  const styles = MenuCheckboxTv({ active, selected });
-  return /* @__PURE__ */ jsx("div", { className: styles.root(), children: selected && /* @__PURE__ */ jsx("div", { className: styles.checkbox(), children: /* @__PURE__ */ jsx(Check, {}) }) });
+  const tv = MenuCheckboxTv({ active, selected });
+  return /* @__PURE__ */ jsx("div", { className: tv.root(), children: selected && /* @__PURE__ */ jsx("div", { className: tv.checkbox(), children: /* @__PURE__ */ jsx(Check, {}) }) });
 });
 var MenuDivider = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  const styles = MenuDividerTv();
+  const tv = MenuDividerTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: tcx(styles.root(), className),
+      className: tcx(tv.root(), className),
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: styles.divider() })
+      children: /* @__PURE__ */ jsx("div", { className: tv.divider() })
     }
   );
 });
@@ -331,7 +337,7 @@ var MenuItem = memo(
       size: size2 = "default",
       ...rest
     } = props;
-    const styles = MenuItemTv({
+    const tv = MenuItemTv({
       active,
       disabled,
       selected,
@@ -348,23 +354,23 @@ var MenuItem = memo(
         ref,
         type: "button",
         role: "menuitem",
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         tabIndex: active ? 0 : -1,
         disabled,
         "aria-disabled": disabled,
         "aria-selected": selected,
         children: [
-          prefixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: prefixElement }),
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: prefixElement }),
           children,
           hasValidShortcut && /* @__PURE__ */ jsx(
             Kbd,
             {
-              className: styles.shortcut(),
+              className: tv.shortcut(),
               keys: shortcut.modifier,
               children: shortcut.keys
             }
           ),
-          suffixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: suffixElement })
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
         ]
       }
     );
@@ -377,11 +383,11 @@ var MenuLabel = memo(function MenuLabel2({
   selection,
   ...props
 }) {
-  const styles = MenuLabelTv({ selection });
+  const tv = MenuLabelTv({ selection });
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       ...props,
       children
     }
@@ -402,7 +408,17 @@ var shouldShowArrow = (scrollRef, dir) => {
   return false;
 };
 var MenuScrollArrow = function MenuScrollArrow2(props) {
-  const { isPositioned, dir, scrollRef, scrollTop, onScroll, innerOffset, onHide, className } = props;
+  const {
+    isPositioned,
+    dir,
+    scrollRef,
+    scrollTop,
+    onScroll,
+    innerOffset,
+    onHide,
+    className,
+    variant = "default"
+  } = props;
   const [show, setShow] = useState(false);
   const ref = useRef(null);
   const statusRef = useRef("idle");
@@ -416,7 +432,7 @@ var MenuScrollArrow = function MenuScrollArrow2(props) {
     isPositionedRef.current = isPositioned;
     dirRef.current = dir;
   }, [isPositioned, dir]);
-  const styles = MenuScrollArrowTv({ dir, visible: show });
+  const tv = MenuScrollArrowTv({ dir, visible: show, variant });
   useIsomorphicLayoutEffect(() => {
     if (isPositioned && scrollRef.current) {
       lastScrollHeightRef.current = scrollRef.current.scrollHeight;
@@ -504,7 +520,7 @@ var MenuScrollArrow = function MenuScrollArrow2(props) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       "data-dir": dir,
       ref,
       "aria-hidden": true,
@@ -554,15 +570,15 @@ var MenuSearchEmpty = memo(function MenuSearchEmpty2(props) {
     },
     ...rest
   } = props;
-  const styles = MenuSearchEmptyTv();
+  const tv = MenuSearchEmptyTv();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
-      className: tcx(styles.root(), className),
+      className: tcx(tv.root(), className),
       children: [
         children,
-        /* @__PURE__ */ jsx("span", { className: styles.text(), children: defaultText.searchEmpty }),
+        /* @__PURE__ */ jsx("span", { className: tv.text(), children: defaultText.searchEmpty }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -593,7 +609,7 @@ var MenuTrigger = memo(
       disabled,
       ...rest
     } = props;
-    const styles = MenuTriggerTv({
+    const tv = MenuTriggerTv({
       hasPrefix: !!prefixElement,
       hasSuffix: !!suffixElement,
       isEmpty: empty,
@@ -628,7 +644,7 @@ var MenuTrigger = memo(
       Button,
       {
         ref,
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         variant: "secondary",
         active,
         selected,
@@ -636,9 +652,9 @@ var MenuTrigger = memo(
         size: size2,
         ...rest,
         children: [
-          prefixElement && /* @__PURE__ */ jsx("div", { className: tcx(styles.icon(), prefixClassName), children: prefixElement }),
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tcx(tv.icon(), prefixClassName), children: prefixElement }),
           typeof children === "function" ? children(active ?? false) : children,
-          suffixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: suffixElement })
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
         ]
       }
     );
@@ -679,7 +695,7 @@ var MenuValue = memo(({ children, ...rest }) => {
 MenuValue.displayName = "MenuValue";
 var MenusBase = forwardRef((props, ref) => {
   const { children, className, matchTriggerWidth, variant, ...rest } = props;
-  const styles = MenusTv({ matchTriggerWidth, variant });
+  const tv = MenusTv({ matchTriggerWidth, variant });
   const processChildren = (children2) => {
     return Children.map(children2, (child) => {
       if (isValidElement(child)) {
@@ -703,7 +719,7 @@ var MenusBase = forwardRef((props, ref) => {
       ref,
       role: "menu",
       ...rest,
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       "data-variant": variant,
       children: processedChildren
     }
@@ -877,8 +893,8 @@ var MenuContextItem = memo(
         );
       }
       const isActive = useMemo(
-        () => item.index === menu.activeIndex,
-        [item.index, menu.activeIndex]
+        () => customActive ?? item.index === menu.activeIndex,
+        [customActive, item.index, menu.activeIndex]
       );
       const handleClick = useEventCallback((event) => {
         event.stopPropagation();
@@ -1017,22 +1033,6 @@ var MenuContextSubTrigger = memo(
       () => item.index === menu.activeIndex || !!active,
       [item.index, menu.activeIndex, active]
     );
-    useEffect(() => {
-      const currentRef = buttonRef.current;
-      if (!currentRef) return;
-      const handleKeyDown = (e) => {
-        const currentlyActive = item.index === menu.activeIndex || !!active;
-        if (currentlyActive && (e.key === "Enter" || e.key === "ArrowRight")) {
-          e.preventDefault();
-          e.stopPropagation();
-          currentRef.click();
-        }
-      };
-      currentRef.addEventListener("keydown", handleKeyDown);
-      return () => {
-        currentRef.removeEventListener("keydown", handleKeyDown);
-      };
-    }, [item.index, menu.activeIndex, active]);
     const handleFocus = useEventCallback((event) => {
       var _a;
       (_a = props.onFocus) == null ? void 0 : _a.call(props, event);
@@ -1099,10 +1099,11 @@ var MenuContextSubTrigger = memo(
         selected,
         suffixElement,
         prefixElement: prefixConfig,
+        "aria-haspopup": "menu",
         ...menu.getItemProps({
           ...rest,
-          // 在 selection 模式下，如果 selected 属性存在（说明是可选的），则使用 handleClick 关闭菜单
-          // 否则保持默认行为（打开子菜单）
+          // In selection mode, if the selected property exists (indicates it is selectable), use handleClick to close the menu
+          // Otherwise keep default behavior (open submenu)
           onClick: menu.selection && selected !== void 0 ? handleClick : void 0,
           onMouseUp: menu.selection && selected !== void 0 ? handleMouseUp : void 0,
           onPointerUp: menu.selection && selected !== void 0 ? handlePointerUp : void 0,

package/dist/components/menus/src/components/menu-button.js

@@ -6,14 +6,14 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const MenuButton = memo(
   forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const styles = MenuButtonTv();
+    const tv = MenuButtonTv();
     return /* @__PURE__ */ jsx(
       Button,
       {
         ...rest,
         ref,
         variant: "secondary",
-        className: tcx(styles, className)
+        className: tcx(tv, className)
       }
     );
   })

package/dist/components/menus/src/components/menu-checkbox.d.ts

@@ -1,9 +1,8 @@
 import { HTMLProps } from 'react';
-interface MenuCheckboxProps extends HTMLProps<HTMLDivElement> {
+export interface MenuCheckboxProps extends HTMLProps<HTMLDivElement> {
     active?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
     selected?: boolean;
 }
 export declare const MenuCheckbox: import('react').NamedExoticComponent<MenuCheckboxProps>;
-export {};

package/dist/components/menus/src/components/menu-checkbox.js

@@ -4,8 +4,8 @@ import { Check } from "@choiceform/icons-react";
 import { MenuCheckboxTv } from "../tv.js";
 const MenuCheckbox = memo(function MenuCheckbox2(props) {
   const { active, selected, disabled, indeterminate, ...rest } = props;
-  const styles = MenuCheckboxTv({ active, selected });
-  return /* @__PURE__ */ jsx("div", { className: styles.root(), children: selected && /* @__PURE__ */ jsx("div", { className: styles.checkbox(), children: /* @__PURE__ */ jsx(Check, {}) }) });
+  const tv = MenuCheckboxTv({ active, selected });
+  return /* @__PURE__ */ jsx("div", { className: tv.root(), children: selected && /* @__PURE__ */ jsx("div", { className: tv.checkbox(), children: /* @__PURE__ */ jsx(Check, {}) }) });
 });
 export {
   MenuCheckbox

package/dist/components/menus/src/components/menu-divider.js

@@ -4,15 +4,15 @@ import { MenuDividerTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const MenuDivider = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  const styles = MenuDividerTv();
+  const tv = MenuDividerTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: tcx(styles.root(), className),
+      className: tcx(tv.root(), className),
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: styles.divider() })
+      children: /* @__PURE__ */ jsx("div", { className: tv.divider() })
     }
   );
 });

package/dist/components/menus/src/components/menu-item.js

@@ -18,7 +18,7 @@ const MenuItem = memo(
       size = "default",
       ...rest
     } = props;
-    const styles = MenuItemTv({
+    const tv = MenuItemTv({
       active,
       disabled,
       selected,
@@ -35,23 +35,23 @@ const MenuItem = memo(
         ref,
         type: "button",
         role: "menuitem",
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         tabIndex: active ? 0 : -1,
         disabled,
         "aria-disabled": disabled,
         "aria-selected": selected,
         children: [
-          prefixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: prefixElement }),
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: prefixElement }),
           children,
           hasValidShortcut && /* @__PURE__ */ jsx(
             Kbd,
             {
-              className: styles.shortcut(),
+              className: tv.shortcut(),
               keys: shortcut.modifier,
               children: shortcut.keys
             }
           ),
-          suffixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: suffixElement })
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
         ]
       }
     );

package/dist/components/menus/src/components/menu-label.js

@@ -8,11 +8,11 @@ const MenuLabel = memo(function MenuLabel2({
   selection,
   ...props
 }) {
-  const styles = MenuLabelTv({ selection });
+  const tv = MenuLabelTv({ selection });
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       ...props,
       children
     }

package/dist/components/menus/src/components/menu-scroll-arrow.d.ts

@@ -1,4 +1,4 @@
-interface MenuScrollArrowProps {
+export interface MenuScrollArrowProps {
     className?: string;
     dir: "up" | "down";
     innerOffset: number;
@@ -7,6 +7,6 @@ interface MenuScrollArrowProps {
     onScroll: (amount: number) => void;
     scrollRef: React.MutableRefObject<HTMLDivElement | null>;
     scrollTop: number;
+    variant?: "default" | "light" | "reset";
 }
 export declare const MenuScrollArrow: (props: MenuScrollArrowProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/menus/src/components/menu-scroll-arrow.js

@@ -19,7 +19,17 @@ const shouldShowArrow = (scrollRef, dir) => {
   return false;
 };
 const MenuScrollArrow = function MenuScrollArrow2(props) {
-  const { isPositioned, dir, scrollRef, scrollTop, onScroll, innerOffset, onHide, className } = props;
+  const {
+    isPositioned,
+    dir,
+    scrollRef,
+    scrollTop,
+    onScroll,
+    innerOffset,
+    onHide,
+    className,
+    variant = "default"
+  } = props;
   const [show, setShow] = useState(false);
   const ref = useRef(null);
   const statusRef = useRef("idle");
@@ -33,7 +43,7 @@ const MenuScrollArrow = function MenuScrollArrow2(props) {
     isPositionedRef.current = isPositioned;
     dirRef.current = dir;
   }, [isPositioned, dir]);
-  const styles = MenuScrollArrowTv({ dir, visible: show });
+  const tv = MenuScrollArrowTv({ dir, visible: show, variant });
   useIsomorphicLayoutEffect(() => {
     if (isPositioned && scrollRef.current) {
       lastScrollHeightRef.current = scrollRef.current.scrollHeight;
@@ -121,7 +131,7 @@ const MenuScrollArrow = function MenuScrollArrow2(props) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       "data-dir": dir,
       ref,
       "aria-hidden": true,

package/dist/components/menus/src/components/menu-search.js

@@ -44,15 +44,15 @@ const MenuSearchEmpty = memo(function MenuSearchEmpty2(props) {
     },
     ...rest
   } = props;
-  const styles = MenuSearchEmptyTv();
+  const tv = MenuSearchEmptyTv();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
-      className: tcx(styles.root(), className),
+      className: tcx(tv.root(), className),
       children: [
         children,
-        /* @__PURE__ */ jsx("span", { className: styles.text(), children: defaultText.searchEmpty }),
+        /* @__PURE__ */ jsx("span", { className: tv.text(), children: defaultText.searchEmpty }),
         /* @__PURE__ */ jsx(
           Button,
           {

package/dist/components/menus/src/components/menu-trigger.js

@@ -22,7 +22,7 @@ const MenuTrigger = memo(
       disabled,
       ...rest
     } = props;
-    const styles = MenuTriggerTv({
+    const tv = MenuTriggerTv({
       hasPrefix: !!prefixElement,
       hasSuffix: !!suffixElement,
       isEmpty: empty,
@@ -57,7 +57,7 @@ const MenuTrigger = memo(
       Button,
       {
         ref,
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         variant: "secondary",
         active,
         selected,
@@ -65,9 +65,9 @@ const MenuTrigger = memo(
         size,
         ...rest,
         children: [
-          prefixElement && /* @__PURE__ */ jsx("div", { className: tcx(styles.icon(), prefixClassName), children: prefixElement }),
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tcx(tv.icon(), prefixClassName), children: prefixElement }),
           typeof children === "function" ? children(active ?? false) : children,
-          suffixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: suffixElement })
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
         ]
       }
     );

package/dist/components/menus/src/context/menu-context-item.d.ts

@@ -9,12 +9,12 @@ export interface MenuContextItemProps extends MenuItemProps {
     value?: string;
 }
 /**
- * 通用菜单项组件
+ * Generic menu item component
  *
- * 供 Select 和 Dropdown 共用，统一所有交互逻辑：
- * - touch 事件处理
- * - 选择逻辑
- * - 键盘导航
- * - 视觉状态管理
+ * Shared by Select and Dropdown, unify all interaction logic:
+ * - touch event handling
+ * - selection logic
+ * - keyboard navigation
+ * - visual state management
  */
 export declare const MenuContextItem: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<MenuContextItemProps & import('react').RefAttributes<HTMLButtonElement>>>;

package/dist/components/menus/src/context/menu-context-item.js

@@ -32,8 +32,8 @@ const MenuContextItem = memo(
         );
       }
       const isActive = useMemo(
-        () => item.index === menu.activeIndex,
-        [item.index, menu.activeIndex]
+        () => customActive ?? item.index === menu.activeIndex,
+        [customActive, item.index, menu.activeIndex]
       );
       const handleClick = useEventCallback((event) => {
         event.stopPropagation();

package/dist/components/menus/src/context/menu-context-sub-trigger.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { ChevronRightSmall, Check } from "@choiceform/icons-react";
 import { useListItem, useFloatingTree } from "@floating-ui/react";
-import { memo, forwardRef, useContext, useRef, useMemo, useEffect, startTransition, useCallback } from "react";
+import { memo, forwardRef, useContext, useRef, useMemo, startTransition, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { MenuItem } from "../components/menu-item.js";
 import { MenuContext } from "./menu-context.js";
@@ -29,22 +29,6 @@ const MenuContextSubTrigger = memo(
       () => item.index === menu.activeIndex || !!active,
       [item.index, menu.activeIndex, active]
     );
-    useEffect(() => {
-      const currentRef = buttonRef.current;
-      if (!currentRef) return;
-      const handleKeyDown = (e) => {
-        const currentlyActive = item.index === menu.activeIndex || !!active;
-        if (currentlyActive && (e.key === "Enter" || e.key === "ArrowRight")) {
-          e.preventDefault();
-          e.stopPropagation();
-          currentRef.click();
-        }
-      };
-      currentRef.addEventListener("keydown", handleKeyDown);
-      return () => {
-        currentRef.removeEventListener("keydown", handleKeyDown);
-      };
-    }, [item.index, menu.activeIndex, active]);
     const handleFocus = useEventCallback((event) => {
       var _a;
       (_a = props.onFocus) == null ? void 0 : _a.call(props, event);
@@ -111,10 +95,11 @@ const MenuContextSubTrigger = memo(
         selected,
         suffixElement,
         prefixElement: prefixConfig,
+        "aria-haspopup": "menu",
         ...menu.getItemProps({
           ...rest,
-          // 在 selection 模式下，如果 selected 属性存在（说明是可选的），则使用 handleClick 关闭菜单
-          // 否则保持默认行为（打开子菜单）
+          // In selection mode, if the selected property exists (indicates it is selectable), use handleClick to close the menu
+          // Otherwise keep default behavior (open submenu)
           onClick: menu.selection && selected !== void 0 ? handleClick : void 0,
           onMouseUp: menu.selection && selected !== void 0 ? handleMouseUp : void 0,
           onPointerUp: menu.selection && selected !== void 0 ? handlePointerUp : void 0,

package/dist/components/menus/src/context/menu-context.d.ts

@@ -1,7 +1,7 @@
 /**
- * 通用菜单上下文接口
+ * Generic menu context interface
  *
- * 用于 Select 和 Dropdown 组件的统一上下文
+ * Used for unified context of Select and Dropdown components
  */
 export interface MenuContextType {
     activeIndex: number | null;

package/dist/components/menus/src/hooks/use-menu-base-refs.d.ts

@@ -1,25 +1,25 @@
 /**
- * 菜单基础引用管理 Hook
+ * Menu base refs management Hook
  *
- * 统一管理所有菜单组件需要的基础 refs：
- * - scrollRef: 滚动容器引用
- * - elementsRef: 菜单项元素引用数组
- * - labelsRef: 菜单项标签引用数组（用于 typeahead）
- * - selectTimeoutRef: 选择延迟定时器引用
+ * Unified management of all base refs needed by menu components:
+ * - scrollRef: scroll container reference
+ * - elementsRef: menu item element reference array
+ * - labelsRef: menu item label reference array (for typeahead)
+ * - selectTimeoutRef: select delay timer reference
  *
- * 这些 refs 在多个组件中都有使用，统一管理可以保持一致性
+ * These refs are used in multiple components, unified management can maintain consistency
  */
 export interface MenuBaseRefsResult {
-    /** 菜单项元素引用数组 */
+    /** Menu item element reference array */
     elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
-    /** 菜单项标签引用数组（用于 typeahead） */
+    /** Menu item label reference array (for typeahead) */
     labelsRef: React.MutableRefObject<Array<string | null>>;
-    /** 滚动容器引用 */
+    /** Scroll container reference */
     scrollRef: React.RefObject<HTMLDivElement>;
-    /** 选择延迟定时器引用 */
+    /** Select delay timer reference */
     selectTimeoutRef: React.MutableRefObject<ReturnType<typeof setTimeout> | undefined>;
 }
 /**
- * 创建菜单基础引用
+ * Create menu base refs
  */
 export declare function useMenuBaseRefs(): MenuBaseRefsResult;