@choice-ui/react 1.3.11 → 1.4.0

package/dist/cjs/components/menus/dist/index.cjs

@@ -1,1140 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index$1 = require("../../button/dist/index.cjs");
-const React = require("react");
-const require$$0 = require("react/jsx-runtime");
-const iconsReact = require("@choiceform/icons-react");
-const index$4 = require("../../kbd/dist/index.cjs");
-const reactDom = require("react-dom");
-const index$2 = require("../../search-input/dist/index.cjs");
-const index$3 = require("../../slot/dist/index.cjs");
-const index = require("../../input/dist/index.cjs");
-const usehooksTs = require("usehooks-ts");
-const react = require("@floating-ui/react");
-const useIsomorphicLayoutEffect = require("../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.cjs");
-const tcx = require("../../../shared/utils/tcx/tcx.cjs");
-var MenusTv = tcx.tcv({
-  base: [
-    "group/menus",
-    "relative flex flex-col",
-    "z-menu rounded-xl",
-    "max-h-[inherit] p-2",
-    "shadow-lg",
-    "scrollbar-hide overflow-y-auto overscroll-contain",
-    "pointer-events-auto select-none"
-  ],
-  variants: {
-    matchTriggerWidth: {
-      true: "w-full",
-      false: "min-w-36"
-    },
-    variant: {
-      default: "bg-menu-background text-white",
-      light: "bg-white text-gray-900",
-      reset: {}
-    }
-  },
-  defaultVariants: {
-    matchTriggerWidth: false,
-    variant: "default"
-  }
-});
-var MenuTriggerTv = tcx.tcv({
-  slots: {
-    root: "justify-start text-left",
-    icon: "flex size-6 flex-none items-center justify-center"
-  },
-  variants: {
-    hasPrefix: {
-      true: { root: "gap-0" },
-      false: { root: "gap-1" }
-    },
-    hasSuffix: {
-      true: { root: "gap-0" },
-      false: { root: "gap-1" }
-    },
-    size: {
-      default: {},
-      large: {}
-    },
-    isEmpty: {
-      true: { root: "text-secondary-foreground" },
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      size: "default",
-      hasPrefix: true,
-      class: { root: "pl-0" }
-    },
-    {
-      size: "large",
-      hasPrefix: true,
-      class: { root: "pl-1" }
-    },
-    {
-      size: "default",
-      hasSuffix: true,
-      class: { root: "pr-0" }
-    },
-    {
-      size: "large",
-      hasSuffix: true,
-      class: { root: "pr-0" }
-    }
-  ],
-  defaultVariants: {
-    hasPrefix: false,
-    hasSuffix: false,
-    isEmpty: false,
-    size: "default"
-  }
-});
-var MenuItemTv = tcx.tcv({
-  slots: {
-    root: [
-      "group/menu-item flex w-full flex-none items-center rounded-md",
-      "text-body-medium text-left",
-      "cursor-default"
-    ],
-    shortcut: "",
-    icon: "flex h-4 min-w-4 flex-none items-center justify-center"
-  },
-  variants: {
-    size: {
-      default: { root: "h-6" },
-      large: { root: "h-8" }
-    },
-    active: {
-      true: {},
-      false: {
-        root: "bg-transparent",
-        shortcut: "text-white/40"
-      }
-    },
-    disabled: {
-      true: {
-        root: "opacity-50"
-      },
-      false: {}
-    },
-    selected: {
-      true: {},
-      false: {}
-    },
-    hasPrefix: {
-      true: { root: "gap-1 pl-1" },
-      false: { root: "pl-2" }
-    },
-    hasSuffix: {
-      true: { root: "gap-1 pr-1" },
-      false: { root: "pr-2" }
-    },
-    variant: {
-      default: {},
-      highlight: {},
-      danger: {},
-      reset: {}
-    }
-  },
-  compoundVariants: [
-    {
-      hasPrefix: false,
-      hasSuffix: false,
-      class: {
-        root: "gap-2"
-      }
-    },
-    {
-      disabled: false,
-      variant: "default",
-      active: true,
-      class: {
-        root: "bg-accent-background text-on-accent-foreground",
-        shortcut: "text-white"
-      }
-    },
-    {
-      disabled: false,
-      variant: "highlight",
-      active: true,
-      class: {
-        root: "group-data-[variant=light]/menus:bg-gray-200 group-data-[variant=default]/menus:bg-white/10"
-      }
-    },
-    {
-      disabled: false,
-      variant: "danger",
-      active: true,
-      class: {
-        root: "bg-danger-background text-on-accent-foreground"
-      }
-    }
-  ],
-  defaultVariants: {
-    active: false,
-    disabled: false,
-    selected: false,
-    hasPrefix: false,
-    hasSuffix: false,
-    variant: "default",
-    size: "default"
-  }
-});
-var MenuDividerTv = tcx.tcv({
-  slots: {
-    root: "flex h-4 w-full flex-none items-center",
-    divider: "group-data-[variant=light]/menus:bg-gray-200 group-data-[variant=default]/menus:bg-menu-boundary h-px flex-1"
-  }
-});
-var MenuSearchEmptyTv = tcx.tcv({
-  slots: {
-    root: "flex flex-col items-center justify-center gap-2 p-4 text-center",
-    text: "text-white/50"
-  }
-});
-var MenuLabelTv = tcx.tcv({
-  base: "flex h-6 w-full flex-none items-center gap-2 opacity-50",
-  variants: {
-    selection: {
-      true: "pr-2 pl-6",
-      false: "px-2"
-    }
-  },
-  defaultVariants: {
-    selection: false
-  }
-});
-var MenuButtonTv = tcx.tcv({
-  base: [
-    "flex-none border-gray-700 bg-transparent text-white",
-    "hover:bg-gray-700 active:bg-gray-800"
-  ]
-});
-var MenuScrollArrowTv = tcx.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"
-  ],
-  variants: {
-    dir: {
-      up: "top-0 rounded-t-xl border-b",
-      down: "bottom-0 rounded-b-xl border-t"
-    },
-    visible: {
-      true: "visible",
-      false: "hidden"
-    }
-  },
-  defaultVariants: {
-    visible: false,
-    dir: "down"
-  }
-});
-var MenuCheckboxTv = tcx.tcv({
-  slots: {
-    root: "flex size-4 flex-none items-center justify-center",
-    checkbox: "flex size-4 flex-none items-center justify-center rounded-md border"
-  },
-  variants: {
-    active: {
-      true: {},
-      false: {}
-    },
-    selected: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      active: false,
-      selected: false,
-      class: {
-        checkbox: "border-white/10 bg-white/15"
-      }
-    },
-    {
-      active: false,
-      selected: true,
-      class: {
-        checkbox: "bg-accent-background border-white/30"
-      }
-    },
-    {
-      active: true,
-      selected: true,
-      class: {
-        checkbox: "border-black/20"
-      }
-    },
-    {
-      active: true,
-      selected: false,
-      class: {
-        checkbox: "border-white/20"
-      }
-    }
-  ],
-  defaultVariants: {
-    active: false,
-    selected: false
-  }
-});
-var MenuButton = React.memo(
-  React.forwardRef((props, ref) => {
-    const { className, ...rest } = props;
-    const styles = MenuButtonTv();
-    return /* @__PURE__ */ require$$0.jsx(
-      index$1.Button,
-      {
-        ...rest,
-        ref,
-        variant: "secondary",
-        className: tcx.tcx(styles, className)
-      }
-    );
-  })
-);
-MenuButton.displayName = "MenuButton";
-var MenuCheckbox = React.memo(function MenuCheckbox2(props) {
-  const { active, selected, disabled, indeterminate, ...rest } = props;
-  const styles = MenuCheckboxTv({ active, selected });
-  return /* @__PURE__ */ require$$0.jsx("div", { className: styles.root(), children: selected && /* @__PURE__ */ require$$0.jsx("div", { className: styles.checkbox(), children: /* @__PURE__ */ require$$0.jsx(iconsReact.Check, {}) }) });
-});
-var MenuDivider = React.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  const styles = MenuDividerTv();
-  return /* @__PURE__ */ require$$0.jsx(
-    "div",
-    {
-      ref,
-      className: tcx.tcx(styles.root(), className),
-      "aria-hidden": "true",
-      ...rest,
-      children: /* @__PURE__ */ require$$0.jsx("div", { className: styles.divider() })
-    }
-  );
-});
-MenuDivider.displayName = "MenuDivider";
-var MenuItem = React.memo(
-  React.forwardRef((props, ref) => {
-    const {
-      children,
-      className,
-      active,
-      disabled,
-      selected,
-      shortcut,
-      prefixElement,
-      suffixElement,
-      variant = "default",
-      size: size2 = "default",
-      ...rest
-    } = props;
-    const styles = MenuItemTv({
-      active,
-      disabled,
-      selected,
-      hasPrefix: !!prefixElement,
-      hasSuffix: !!suffixElement,
-      variant,
-      size: size2
-    });
-    const hasValidShortcut = shortcut && (shortcut.modifier || shortcut.keys);
-    return /* @__PURE__ */ require$$0.jsxs(
-      "button",
-      {
-        ...rest,
-        ref,
-        type: "button",
-        role: "menuitem",
-        className: tcx.tcx(styles.root(), className),
-        tabIndex: active ? 0 : -1,
-        disabled,
-        "aria-disabled": disabled,
-        "aria-selected": selected,
-        children: [
-          prefixElement && /* @__PURE__ */ require$$0.jsx("div", { className: styles.icon(), children: prefixElement }),
-          children,
-          hasValidShortcut && /* @__PURE__ */ require$$0.jsx(
-            index$4.Kbd,
-            {
-              className: styles.shortcut(),
-              keys: shortcut.modifier,
-              children: shortcut.keys
-            }
-          ),
-          suffixElement && /* @__PURE__ */ require$$0.jsx("div", { className: styles.icon(), children: suffixElement })
-        ]
-      }
-    );
-  })
-);
-MenuItem.displayName = "MenuItem";
-var MenuLabel = React.memo(function MenuLabel2({
-  className,
-  children,
-  selection,
-  ...props
-}) {
-  const styles = MenuLabelTv({ selection });
-  return /* @__PURE__ */ require$$0.jsx(
-    "div",
-    {
-      className: tcx.tcx(styles, className),
-      ...props,
-      children
-    }
-  );
-});
-MenuLabel.displayName = "MenuLabel";
-var SCROLL_ARROW_PADDING = 16;
-var shouldShowArrow = (scrollRef, dir) => {
-  if (scrollRef.current) {
-    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-    if (dir === "up") {
-      return scrollTop >= SCROLL_ARROW_PADDING;
-    }
-    if (dir === "down") {
-      return scrollTop <= scrollHeight - clientHeight - SCROLL_ARROW_PADDING;
-    }
-  }
-  return false;
-};
-var MenuScrollArrow = function MenuScrollArrow2(props) {
-  const { isPositioned, dir, scrollRef, scrollTop, onScroll, innerOffset, onHide, className } = props;
-  const [show, setShow] = React.useState(false);
-  const ref = React.useRef(null);
-  const statusRef = React.useRef("idle");
-  const frameRef = React.useRef(-1);
-  const resizeObserverRef = React.useRef(null);
-  const isPositionedRef = React.useRef(isPositioned);
-  const dirRef = React.useRef(dir);
-  const rafRef = React.useRef(null);
-  const lastScrollHeightRef = React.useRef(0);
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    isPositionedRef.current = isPositioned;
-    dirRef.current = dir;
-  }, [isPositioned, dir]);
-  const styles = MenuScrollArrowTv({ dir, visible: show });
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (isPositioned && scrollRef.current) {
-      lastScrollHeightRef.current = scrollRef.current.scrollHeight;
-      requestAnimationFrame(() => {
-        reactDom.flushSync(() => setShow(shouldShowArrow(scrollRef, dir)));
-      });
-    }
-  }, [isPositioned, innerOffset, scrollTop, scrollRef, dir]);
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (!isPositioned || !scrollRef.current) {
-      return;
-    }
-    resizeObserverRef.current = new ResizeObserver(() => {
-      if (rafRef.current !== null) {
-        return;
-      }
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        if (isPositionedRef.current && scrollRef.current) {
-          const currentScrollHeight = scrollRef.current.scrollHeight;
-          if (currentScrollHeight !== lastScrollHeightRef.current) {
-            lastScrollHeightRef.current = currentScrollHeight;
-            reactDom.flushSync(() => setShow(shouldShowArrow(scrollRef, dirRef.current)));
-          } else {
-            setShow(shouldShowArrow(scrollRef, dirRef.current));
-          }
-        }
-      });
-    });
-    resizeObserverRef.current.observe(scrollRef.current);
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [isPositioned, scrollRef, dir]);
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (!show && statusRef.current === "active") {
-      onHide == null ? void 0 : onHide();
-    }
-  }, [show, scrollTop]);
-  const handlePointerEnter = () => {
-    statusRef.current = "active";
-    let prevNow = Date.now();
-    function frame() {
-      if (scrollRef.current) {
-        const currentDir = dirRef.current;
-        const currentNow = Date.now();
-        const msElapsed = currentNow - prevNow;
-        prevNow = currentNow;
-        const pixelsToScroll = msElapsed / 2;
-        const remainingPixels = currentDir === "up" ? scrollRef.current.scrollTop : scrollRef.current.scrollHeight - scrollRef.current.clientHeight - scrollRef.current.scrollTop;
-        const scrollRemaining = currentDir === "up" ? scrollRef.current.scrollTop - pixelsToScroll > 0 : scrollRef.current.scrollTop + pixelsToScroll < scrollRef.current.scrollHeight - scrollRef.current.clientHeight;
-        onScroll(
-          currentDir === "up" ? Math.min(pixelsToScroll, remainingPixels) : Math.max(-pixelsToScroll, -remainingPixels)
-        );
-        if (scrollRemaining) {
-          frameRef.current = requestAnimationFrame(frame);
-        } else {
-          setShow(shouldShowArrow(scrollRef, currentDir));
-        }
-      }
-    }
-    cancelAnimationFrame(frameRef.current);
-    frameRef.current = requestAnimationFrame(frame);
-  };
-  const handlePointerLeave = () => {
-    statusRef.current = "idle";
-    cancelAnimationFrame(frameRef.current);
-    frameRef.current = -1;
-  };
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (frameRef.current !== -1) {
-        cancelAnimationFrame(frameRef.current);
-        frameRef.current = -1;
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ require$$0.jsx(
-    "div",
-    {
-      className: tcx.tcx(styles, className),
-      "data-dir": dir,
-      ref,
-      "aria-hidden": true,
-      onPointerEnter: handlePointerEnter,
-      onPointerLeave: handlePointerLeave,
-      children: dir === "up" ? /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronUpSmall, {}) : /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronDownSmall, {})
-    }
-  );
-};
-var MenuSearch = React.forwardRef((props, ref) => {
-  const { className, onKeyDown, onChange, value, ...rest } = props;
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      onKeyDown == null ? void 0 : onKeyDown(e);
-      if (["ArrowDown", "ArrowUp"].includes(e.key)) {
-        return;
-      }
-      if (["Enter", "Escape", "Tab"].includes(e.key)) {
-        return;
-      }
-      e.stopPropagation();
-    },
-    [onKeyDown]
-  );
-  return /* @__PURE__ */ require$$0.jsx(
-    index$2.SearchInput,
-    {
-      ...rest,
-      ref,
-      value,
-      onChange,
-      autoFocus: true,
-      onKeyDown: handleKeyDown,
-      variant: "dark"
-    }
-  );
-});
-MenuSearch.displayName = "MenuSearch";
-var MenuSearchEmpty = React.memo(function MenuSearchEmpty2(props) {
-  const {
-    onClear,
-    className,
-    children,
-    defaultText = {
-      searchEmpty: "No results found, please try another keyword",
-      searchEmptyButton: "Clear"
-    },
-    ...rest
-  } = props;
-  const styles = MenuSearchEmptyTv();
-  return /* @__PURE__ */ require$$0.jsxs(
-    "div",
-    {
-      ...rest,
-      className: tcx.tcx(styles.root(), className),
-      children: [
-        children,
-        /* @__PURE__ */ require$$0.jsx("span", { className: styles.text(), children: defaultText.searchEmpty }),
-        /* @__PURE__ */ require$$0.jsx(
-          index$1.Button,
-          {
-            variant: "link",
-            onClick: onClear,
-            children: defaultText.searchEmptyButton
-          }
-        )
-      ]
-    }
-  );
-});
-MenuSearchEmpty.displayName = "MenuSearchEmpty";
-var MenuTrigger = React.memo(
-  React.forwardRef((props, ref) => {
-    const {
-      children,
-      asChild,
-      className,
-      size: size2 = "default",
-      prefixElement,
-      prefixClassName,
-      suffixElement = /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronDownSmall, {}),
-      empty,
-      enterForwardedProps = true,
-      active,
-      selected,
-      disabled,
-      ...rest
-    } = props;
-    const styles = MenuTriggerTv({
-      hasPrefix: !!prefixElement,
-      hasSuffix: !!suffixElement,
-      isEmpty: empty,
-      size: size2
-    });
-    const slotProps = enterForwardedProps ? {
-      ...rest,
-      active,
-      selected,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (rest.onClick) {
-          rest.onClick(e);
-        }
-      }
-    } : {
-      ...rest,
-      ...active !== void 0 ? { "data-active": active } : {},
-      ...selected !== void 0 ? { "data-selected": selected } : {},
-      ...disabled !== void 0 ? { "data-disabled": disabled } : {}
-    };
-    return asChild ? /* @__PURE__ */ require$$0.jsx(
-      index$3.Slot,
-      {
-        ref,
-        ...slotProps,
-        children: typeof children === "function" ? children(active ?? false) : children
-      }
-    ) : /* @__PURE__ */ require$$0.jsxs(
-      index$1.Button,
-      {
-        ref,
-        className: tcx.tcx(styles.root(), className),
-        variant: "secondary",
-        active,
-        selected,
-        disabled,
-        size: size2,
-        ...rest,
-        children: [
-          prefixElement && /* @__PURE__ */ require$$0.jsx("div", { className: tcx.tcx(styles.icon(), prefixClassName), children: prefixElement }),
-          typeof children === "function" ? children(active ?? false) : children,
-          suffixElement && /* @__PURE__ */ require$$0.jsx("div", { className: styles.icon(), children: suffixElement })
-        ]
-      }
-    );
-  })
-);
-MenuTrigger.displayName = "MenuTrigger";
-var MenuInput = React.forwardRef((props, ref) => {
-  const { className, onKeyDown, ...rest } = props;
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      onKeyDown == null ? void 0 : onKeyDown(e);
-      e.stopPropagation();
-    },
-    [onKeyDown]
-  );
-  return /* @__PURE__ */ require$$0.jsx(
-    index.Input,
-    {
-      ...rest,
-      ref,
-      autoFocus: true,
-      onKeyDown: handleKeyDown,
-      variant: "dark"
-    }
-  );
-});
-MenuInput.displayName = "MenuInput";
-var MenuValue = React.memo(({ children, ...rest }) => {
-  return /* @__PURE__ */ require$$0.jsx(
-    "span",
-    {
-      className: "flex-1 cursor-default truncate select-none",
-      ...rest,
-      children
-    }
-  );
-});
-MenuValue.displayName = "MenuValue";
-var MenusBase = React.forwardRef((props, ref) => {
-  const { children, className, matchTriggerWidth, variant, ...rest } = props;
-  const styles = MenusTv({ matchTriggerWidth, variant });
-  const processChildren = (children2) => {
-    return React.Children.map(children2, (child) => {
-      if (React.isValidElement(child)) {
-        if (child.type === React.Fragment) {
-          return processChildren(child.props.children);
-        }
-        if (child.props.children) {
-          return React.cloneElement(child, {
-            ...child.props,
-            children: processChildren(child.props.children)
-          });
-        }
-      }
-      return child;
-    });
-  };
-  const processedChildren = processChildren(children);
-  return /* @__PURE__ */ require$$0.jsx(
-    "div",
-    {
-      ref,
-      role: "menu",
-      ...rest,
-      className: tcx.tcx(styles, className),
-      "data-variant": variant,
-      children: processedChildren
-    }
-  );
-});
-MenusBase.displayName = "Menus";
-var Menus = MenusBase;
-Menus.Item = MenuItem;
-Menus.Button = MenuButton;
-Menus.Checkbox = MenuCheckbox;
-Menus.Divider = MenuDivider;
-Menus.Label = MenuLabel;
-Menus.Search = MenuSearch;
-Menus.SearchEmpty = MenuSearchEmpty;
-Menus.Input = MenuInput;
-Menus.Value = MenuValue;
-function useMenuScroll(config) {
-  const {
-    scrollRef,
-    selectTimeoutRef,
-    scrollTop,
-    setScrollTop,
-    touch,
-    isSelect = false,
-    setInnerOffset,
-    fallback = false
-  } = config;
-  const handleArrowScroll = usehooksTs.useEventCallback((amount) => {
-    if (isSelect) {
-      requestAnimationFrame(() => {
-        if (fallback) {
-          if (scrollRef.current) {
-            scrollRef.current.scrollTop -= amount;
-            reactDom.flushSync(() => {
-              var _a;
-              return setScrollTop(((_a = scrollRef.current) == null ? void 0 : _a.scrollTop) ?? 0);
-            });
-          }
-        } else {
-          if (setInnerOffset) {
-            reactDom.flushSync(() => setInnerOffset((value) => value - amount));
-          }
-        }
-      });
-    } else {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTop -= amount;
-        reactDom.flushSync(() => {
-          var _a;
-          return setScrollTop(((_a = scrollRef.current) == null ? void 0 : _a.scrollTop) ?? 0);
-        });
-      }
-    }
-  });
-  const handleArrowHide = usehooksTs.useEventCallback(() => {
-    if (touch && selectTimeoutRef.current) {
-      clearTimeout(selectTimeoutRef.current);
-    }
-  });
-  const handleScroll = usehooksTs.useEventCallback((event) => {
-    const target = event.currentTarget;
-    reactDom.flushSync(() => setScrollTop(target.scrollTop));
-  });
-  const scrollProps = React.useMemo(
-    () => ({
-      onScroll: handleScroll
-    }),
-    [handleScroll]
-  );
-  return {
-    handleArrowScroll,
-    handleArrowHide,
-    handleScroll,
-    scrollProps
-  };
-}
-function useMenuTree(config) {
-  const { disabledNested = false, handleOpenChange, isControlledOpen } = config;
-  const tree = react.useFloatingTree();
-  const nodeId = react.useFloatingNodeId();
-  const parentId = react.useFloatingParentNodeId();
-  const item = react.useListItem();
-  const isNested = !disabledNested && parentId != null;
-  const handleTreeClick = usehooksTs.useEventCallback(() => {
-    handleOpenChange(false);
-  });
-  const handleSubMenuOpen = usehooksTs.useEventCallback((event) => {
-    if (event.nodeId !== nodeId && event.parentId === parentId) {
-      handleOpenChange(false);
-    }
-  });
-  const cleanupTreeEvents = usehooksTs.useEventCallback(() => {
-    if (tree) {
-      tree.events.off("click", handleTreeClick);
-      tree.events.off("menuopen", handleSubMenuOpen);
-    }
-  });
-  React.useEffect(() => {
-    if (!tree) return;
-    tree.events.on("click", handleTreeClick);
-    tree.events.on("menuopen", handleSubMenuOpen);
-    return cleanupTreeEvents;
-  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, cleanupTreeEvents]);
-  React.useEffect(() => {
-    if (isControlledOpen && tree) {
-      tree.events.emit("menuopen", { parentId, nodeId });
-    }
-  }, [tree, isControlledOpen, nodeId, parentId]);
-  return {
-    tree,
-    nodeId,
-    parentId,
-    item,
-    isNested,
-    cleanupTreeEvents
-  };
-}
-function useMenuScrollHeight(config) {
-  const { isControlledOpen, isPositioned, scrollRef } = config;
-  React.useEffect(() => {
-    if (!isControlledOpen || !isPositioned) return;
-    const rafId = requestAnimationFrame(() => {
-      if (scrollRef.current) {
-        const parent = scrollRef.current.parentElement;
-        if (parent == null ? void 0 : parent.style.height) {
-          scrollRef.current.style.height = "100%";
-          scrollRef.current.style.maxHeight = "100%";
-        }
-      }
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [isControlledOpen, isPositioned, scrollRef]);
-}
-function useMenuBaseRefs() {
-  const scrollRef = React.useRef(null);
-  const elementsRef = React.useRef([]);
-  const labelsRef = React.useRef([]);
-  const selectTimeoutRef = React.useRef();
-  return {
-    scrollRef,
-    elementsRef,
-    labelsRef,
-    selectTimeoutRef
-  };
-}
-var MenuContext = React.createContext(null);
-var MenuContextItem = React.memo(
-  React.forwardRef(
-    function MenuContextItem2(props, forwardedRef) {
-      const {
-        value = "",
-        disabled,
-        selected,
-        size: size2,
-        shortcut,
-        prefixElement,
-        variant,
-        onClick,
-        onMouseUp,
-        onTouchStart,
-        onKeyDown,
-        customActive,
-        ...rest
-      } = props;
-      const menu = React.useContext(MenuContext);
-      const item = react.useListItem();
-      const tree = react.useFloatingTree();
-      if (!menu) {
-        throw new Error(
-          "MenuContextItem must be used within a Menu component (SelectV2 or DropdownV2)"
-        );
-      }
-      const isActive = React.useMemo(
-        () => item.index === menu.activeIndex,
-        [item.index, menu.activeIndex]
-      );
-      const handleClick = usehooksTs.useEventCallback((event) => {
-        event.stopPropagation();
-        if (menu.readOnly) {
-          return;
-        }
-        onClick == null ? void 0 : onClick(event);
-        React.startTransition(() => {
-          tree == null ? void 0 : tree.events.emit("click");
-        });
-      });
-      const handleMouseDown = usehooksTs.useEventCallback((e) => {
-        e.stopPropagation();
-      });
-      const handleMouseUp = usehooksTs.useEventCallback((event) => {
-        event.stopPropagation();
-        onMouseUp == null ? void 0 : onMouseUp(event);
-        React.startTransition(() => {
-          tree == null ? void 0 : tree.events.emit("click");
-        });
-      });
-      const handleTouchStart = usehooksTs.useEventCallback((event) => {
-        onTouchStart == null ? void 0 : onTouchStart(event);
-      });
-      const handleKeyDown = usehooksTs.useEventCallback((event) => {
-        onKeyDown == null ? void 0 : onKeyDown(event);
-      });
-      const handleFocus = usehooksTs.useEventCallback((event) => {
-        var _a;
-        (_a = props.onFocus) == null ? void 0 : _a.call(props, event);
-        menu.setHasFocusInside(true);
-      });
-      const prefixConfig = React.useMemo(() => {
-        if (prefixElement !== void 0) return prefixElement;
-        if (menu.selection && !customActive) {
-          return selected ? /* @__PURE__ */ require$$0.jsx(iconsReact.Check, {}) : /* @__PURE__ */ require$$0.jsx(require$$0.Fragment, {});
-        }
-        return void 0;
-      }, [prefixElement, menu.selection, selected, customActive]);
-      const shortcutConfig = React.useMemo(
-        () => ({
-          modifier: shortcut == null ? void 0 : shortcut.modifier,
-          keys: shortcut == null ? void 0 : shortcut.keys
-        }),
-        [shortcut == null ? void 0 : shortcut.modifier, shortcut == null ? void 0 : shortcut.keys]
-      );
-      const combinedRef = React.useCallback(
-        (node) => {
-          item.ref(node);
-          if (forwardedRef) {
-            if (typeof forwardedRef === "function") {
-              forwardedRef(node);
-            } else {
-              forwardedRef.current = node;
-            }
-          }
-        },
-        [item, forwardedRef]
-      );
-      return /* @__PURE__ */ require$$0.jsx(
-        MenuItem,
-        {
-          ...rest,
-          ref: combinedRef,
-          active: isActive,
-          disabled,
-          selected,
-          prefixElement: prefixConfig,
-          shortcut: shortcutConfig,
-          variant,
-          size: size2,
-          ...menu.getItemProps({
-            onClick: handleClick,
-            onMouseDown: handleMouseDown,
-            onMouseUp: handleMouseUp,
-            onTouchStart: handleTouchStart,
-            onKeyDown: handleKeyDown,
-            onFocus: handleFocus
-          })
-        }
-      );
-    }
-  )
-);
-var MenuContextContent = React.forwardRef(
-  function MenuContextContent2(props, ref) {
-    const { children, className, matchTriggerWidth, ...rest } = props;
-    return /* @__PURE__ */ require$$0.jsx(
-      MenusBase,
-      {
-        ref,
-        matchTriggerWidth,
-        className,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-MenuContextContent.displayName = "MenuContextContent";
-var MenuContextLabel = React.memo(function MenuContextLabel2(props) {
-  const menu = React.useContext(MenuContext);
-  if (!menu) {
-    throw new Error("MenuContextLabel must be used within a MenuContext component");
-  }
-  return /* @__PURE__ */ require$$0.jsx(
-    MenuLabel,
-    {
-      selection: menu.selection,
-      ...props
-    }
-  );
-});
-MenuContextLabel.displayName = "MenuContextLabel";
-var MenuContextSubTrigger = React.memo(
-  React.forwardRef((props, forwardedRef) => {
-    const {
-      children,
-      active,
-      selected,
-      prefixElement,
-      suffixElement = /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronRightSmall, {}),
-      onClick,
-      onMouseUp,
-      onPointerUp,
-      ...rest
-    } = props;
-    const item = react.useListItem();
-    const menu = React.useContext(MenuContext);
-    const tree = react.useFloatingTree();
-    const buttonRef = React.useRef(null);
-    if (!menu) {
-      throw new Error("MenuContextSubTrigger must be used within a MenuContext component");
-    }
-    const isActive = React.useMemo(
-      () => item.index === menu.activeIndex || !!active,
-      [item.index, menu.activeIndex, active]
-    );
-    React.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 = usehooksTs.useEventCallback((event) => {
-      var _a;
-      (_a = props.onFocus) == null ? void 0 : _a.call(props, event);
-      menu.setHasFocusInside(true);
-    });
-    const closeMenu = usehooksTs.useEventCallback(() => {
-      if (menu.selection && selected !== void 0) {
-        React.startTransition(() => {
-          tree == null ? void 0 : tree.events.emit("click");
-        });
-      }
-    });
-    const handleClick = usehooksTs.useEventCallback((event) => {
-      event.stopPropagation();
-      if (menu.readOnly) {
-        return;
-      }
-      onClick == null ? void 0 : onClick(event);
-      closeMenu();
-    });
-    const handleMouseUp = usehooksTs.useEventCallback((event) => {
-      event.stopPropagation();
-      if (menu.readOnly) {
-        return;
-      }
-      onMouseUp == null ? void 0 : onMouseUp(event);
-      closeMenu();
-    });
-    const handlePointerUp = usehooksTs.useEventCallback((event) => {
-      event.stopPropagation();
-      if (menu.readOnly) {
-        return;
-      }
-      onPointerUp == null ? void 0 : onPointerUp(event);
-      closeMenu();
-    });
-    const setRefs = React.useCallback(
-      (node) => {
-        buttonRef.current = node;
-        if (typeof item.ref === "function") {
-          item.ref(node);
-        }
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
-      [item, forwardedRef]
-    );
-    const prefixConfig = React.useMemo(() => {
-      if (prefixElement) return prefixElement;
-      if (menu.selection && selected) {
-        return /* @__PURE__ */ require$$0.jsx(iconsReact.Check, {});
-      }
-      if (menu.selection) return /* @__PURE__ */ require$$0.jsx(require$$0.Fragment, {});
-      return void 0;
-    }, [prefixElement, menu.selection, selected]);
-    return /* @__PURE__ */ require$$0.jsx(
-      MenuItem,
-      {
-        ref: setRefs,
-        active: isActive,
-        selected,
-        suffixElement,
-        prefixElement: prefixConfig,
-        ...menu.getItemProps({
-          ...rest,
-          // 在 selection 模式下，如果 selected 属性存在（说明是可选的），则使用 handleClick 关闭菜单
-          // 否则保持默认行为（打开子菜单）
-          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,
-          onFocus: handleFocus,
-          size: void 0
-        }),
-        children
-      }
-    );
-  })
-);
-MenuContextSubTrigger.displayName = "MenuContextSubTrigger";
-exports.MenuButton = MenuButton;
-exports.MenuCheckbox = MenuCheckbox;
-exports.MenuContext = MenuContext;
-exports.MenuContextContent = MenuContextContent;
-exports.MenuContextItem = MenuContextItem;
-exports.MenuContextLabel = MenuContextLabel;
-exports.MenuContextSubTrigger = MenuContextSubTrigger;
-exports.MenuDivider = MenuDivider;
-exports.MenuInput = MenuInput;
-exports.MenuItem = MenuItem;
-exports.MenuLabel = MenuLabel;
-exports.MenuScrollArrow = MenuScrollArrow;
-exports.MenuSearch = MenuSearch;
-exports.MenuSearchEmpty = MenuSearchEmpty;
-exports.MenuTrigger = MenuTrigger;
-exports.MenuValue = MenuValue;
-exports.Menus = Menus;
-exports.useMenuBaseRefs = useMenuBaseRefs;
-exports.useMenuScroll = useMenuScroll;
-exports.useMenuScrollHeight = useMenuScrollHeight;
-exports.useMenuTree = useMenuTree;