@choice-ui/react 1.3.11 → 1.4.0

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

@@ -1,132 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("react/jsx-runtime");
-const iconsReact = require("@choiceform/icons-react");
-const react = require("@floating-ui/react");
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-const menuItem = require("../components/menu-item.cjs");
-const menuContext = require("./menu-context.cjs");
-const 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.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.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.MenuContextSubTrigger = MenuContextSubTrigger;

package/dist/cjs/components/menus/src/context/menu-context.cjs

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const MenuContext = React.createContext(null);
-exports.MenuContext = MenuContext;

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

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-function useMenuBaseRefs() {
-  const scrollRef = React.useRef(null);
-  const elementsRef = React.useRef([]);
-  const labelsRef = React.useRef([]);
-  const selectTimeoutRef = React.useRef();
-  return {
-    scrollRef,
-    elementsRef,
-    labelsRef,
-    selectTimeoutRef
-  };
-}
-exports.useMenuBaseRefs = useMenuBaseRefs;

package/dist/cjs/components/menus/src/hooks/use-menu-children.cjs

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-function useMenuChildren(config) {
-  const { children, TriggerComponent, ContentComponent, SubTriggerComponent, componentName } = config;
-  const parsedElements = React.useMemo(() => {
-    if (!children) {
-      return {
-        triggerElement: null,
-        contentElement: null,
-        subTriggerElement: null,
-        hasRequiredElements: false,
-        error: `${componentName} requires children`
-      };
-    }
-    const childrenArray = React.Children.toArray(children);
-    const trigger = childrenArray.find(
-      (child) => React.isValidElement(child) && child.type === TriggerComponent
-    );
-    const content = childrenArray.find(
-      (child) => React.isValidElement(child) && child.type === ContentComponent
-    );
-    const subTrigger = SubTriggerComponent ? childrenArray.find(
-      (child) => React.isValidElement(child) && child.type === SubTriggerComponent
-    ) : null;
-    const hasRequiredElements = trigger !== null && content !== null;
-    let error;
-    if (!hasRequiredElements) {
-      if (!trigger && !content) {
-        error = `${componentName} requires both ${componentName}.Trigger and ${componentName}.Content components as children`;
-      } else if (!trigger) {
-        error = `${componentName} requires a ${componentName}.Trigger component as a child`;
-      } else if (!content) {
-        error = `${componentName} requires a ${componentName}.Content component as a child`;
-      }
-    }
-    return {
-      triggerElement: trigger,
-      contentElement: content,
-      subTriggerElement: subTrigger,
-      hasRequiredElements,
-      error
-    };
-  }, [children, TriggerComponent, ContentComponent, SubTriggerComponent, componentName]);
-  if (parsedElements.error) {
-    console.error(parsedElements.error);
-  }
-  return parsedElements;
-}
-exports.useMenuChildren = useMenuChildren;

package/dist/cjs/components/menus/src/hooks/use-menu-floating.cjs

@@ -1,156 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@floating-ui/react");
-const React = require("react");
-function useMenuFloating(config) {
-  const {
-    type,
-    isControlledOpen,
-    handleOpenChange,
-    placement = "bottom-start",
-    matchTriggerWidth = false,
-    isNested = false,
-    offsetDistance = 4,
-    touch = false,
-    nodeId,
-    currentSelectedIndex = 0,
-    fallback = false,
-    innerOffset = 0,
-    setFallback,
-    setInnerOffset,
-    overflowRef,
-    elementsRef,
-    labelsRef,
-    scrollRef,
-    activeIndex,
-    setActiveIndex
-  } = config;
-  const middleware = React.useMemo(() => {
-    if (type === "select") {
-      return fallback ? [
-        react.offset(8),
-        touch ? react.shift({ crossAxis: true, padding: 16 }) : react.flip({ padding: 16 }),
-        react.size({
-          apply(args) {
-            const { availableHeight } = args;
-            requestAnimationFrame(() => {
-              if (scrollRef.current) {
-                scrollRef.current.style.maxHeight = `${availableHeight}px`;
-              }
-            });
-          },
-          padding: 4
-        })
-      ] : [
-        react.inner({
-          listRef: elementsRef,
-          overflowRef,
-          scrollRef,
-          index: currentSelectedIndex >= 0 ? currentSelectedIndex : 0,
-          offset: innerOffset,
-          onFallbackChange: setFallback,
-          padding: 16,
-          minItemsVisible: touch ? 8 : 4,
-          referenceOverflowThreshold: 20
-        }),
-        react.offset(placement.includes("end") ? { crossAxis: 8 } : { crossAxis: -8 }),
-        react.size({
-          apply(args) {
-            const { rects, elements } = args;
-            if (matchTriggerWidth) {
-              elements.floating.style.width = `${rects.reference.width + 16}px`;
-            }
-          }
-        })
-      ];
-    } else {
-      return [
-        react.offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
-        react.flip(),
-        react.shift(),
-        react.size({
-          padding: 4,
-          apply(args) {
-            const { elements, availableHeight, rects } = args;
-            Object.assign(elements.floating.style, {
-              height: `${Math.min(elements.floating.clientHeight, availableHeight)}px`
-            });
-            if (matchTriggerWidth) {
-              elements.floating.style.width = `${rects.reference.width}px`;
-            }
-          }
-        })
-      ];
-    }
-  }, [
-    type,
-    fallback,
-    touch,
-    scrollRef,
-    elementsRef,
-    overflowRef,
-    currentSelectedIndex,
-    innerOffset,
-    setFallback,
-    placement,
-    matchTriggerWidth,
-    isNested,
-    offsetDistance
-  ]);
-  const floating = react.useFloating({
-    nodeId,
-    placement: isNested ? "right-start" : placement,
-    open: isControlledOpen,
-    onOpenChange: handleOpenChange,
-    middleware,
-    whileElementsMounted: react.autoUpdate,
-    transform: type === "select" ? false : void 0
-  });
-  const hover = react.useHover(floating.context, {
-    enabled: type === "dropdown" && isNested,
-    delay: { open: 75 },
-    handleClose: react.safePolygon({ blockPointerEvents: true, requireIntent: false, buffer: 10 })
-  });
-  const click = react.useClick(floating.context, {
-    event: "mousedown",
-    toggle: type === "dropdown" ? !isNested : true,
-    ignoreMouse: type === "dropdown" ? isNested : false,
-    stickIfOpen: false
-  });
-  const dismiss = react.useDismiss(floating.context, {
-    bubbles: true,
-    escapeKey: true
-  });
-  const role = react.useRole(floating.context, {
-    role: type === "select" ? "listbox" : "menu"
-  });
-  const listNavigation = react.useListNavigation(floating.context, {
-    listRef: elementsRef,
-    activeIndex,
-    selectedIndex: type === "select" ? currentSelectedIndex >= 0 ? currentSelectedIndex : 0 : void 0,
-    nested: type === "dropdown" ? isNested : false,
-    onNavigate: setActiveIndex,
-    loop: type === "dropdown"
-  });
-  const typeahead = react.useTypeahead(floating.context, {
-    listRef: labelsRef,
-    onMatch: type === "select" ? isControlledOpen ? setActiveIndex : (index) => {
-      if (index !== -1) setActiveIndex(index);
-    } : isControlledOpen ? setActiveIndex : void 0,
-    activeIndex
-  });
-  const interactionHandlers = React.useMemo(() => {
-    const handlers = [click, dismiss, role, listNavigation, typeahead];
-    if (type === "dropdown") {
-      handlers.unshift(hover);
-    }
-    return handlers;
-  }, [type, click, dismiss, role, hover, listNavigation, typeahead]);
-  const interactions = react.useInteractions(interactionHandlers);
-  return {
-    floating,
-    interactions,
-    hover
-  };
-}
-exports.useMenuFloating = useMenuFloating;

package/dist/cjs/components/menus/src/hooks/use-menu-refs.cjs

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-function useMenuRefs(config = {}) {
-  const { isSelect = false } = config;
-  const scrollRef = React.useRef(null);
-  const elementsRef = React.useRef([]);
-  const labelsRef = React.useRef([]);
-  const selectTimeoutRef = React.useRef();
-  const overflowRef = React.useRef(null);
-  const allowSelectRef = React.useRef(false);
-  const allowMouseUpRef = React.useRef(true);
-  const clearSelectTimeout = () => {
-    if (selectTimeoutRef.current) {
-      clearTimeout(selectTimeoutRef.current);
-      selectTimeoutRef.current = void 0;
-    }
-  };
-  const resetRefs = () => {
-    clearSelectTimeout();
-    elementsRef.current = [];
-    labelsRef.current = [];
-    if (isSelect) {
-      if (allowSelectRef.current) {
-        allowSelectRef.current = false;
-      }
-      if (!allowMouseUpRef.current) {
-        allowMouseUpRef.current = true;
-      }
-    }
-  };
-  const result = React.useMemo(() => {
-    const baseResult = {
-      // 通用引用
-      scrollRef,
-      elementsRef,
-      labelsRef,
-      selectTimeoutRef,
-      // 工具函数
-      clearSelectTimeout,
-      resetRefs
-    };
-    if (isSelect) {
-      return {
-        ...baseResult,
-        overflowRef,
-        allowSelectRef,
-        allowMouseUpRef
-      };
-    }
-    return baseResult;
-  }, [isSelect]);
-  return result;
-}
-exports.useMenuRefs = useMenuRefs;

package/dist/cjs/components/menus/src/hooks/use-menu-scroll-height.cjs

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-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]);
-}
-exports.useMenuScrollHeight = useMenuScrollHeight;

package/dist/cjs/components/menus/src/hooks/use-menu-scroll.cjs

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-const reactDom = require("react-dom");
-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
-  };
-}
-exports.useMenuScroll = useMenuScroll;

package/dist/cjs/components/menus/src/hooks/use-menu-selection.cjs

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-function useMenuSelection(config) {
-  const { value, onChange, options, isControlledOpen, handleOpenChange } = config;
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const [blockSelection, setBlockSelection] = React.useState(false);
-  const [allowSelect, setAllowSelect] = React.useState(false);
-  const [allowMouseUp, setAllowMouseUp] = React.useState(true);
-  const currentSelectedIndex = React.useMemo(() => {
-    if (value === void 0) return selectedIndex;
-    const index = options.findIndex((option) => !option.divider && option.value === value);
-    return index === -1 ? selectedIndex : index;
-  }, [value, selectedIndex, options]);
-  React.useEffect(() => {
-    if (isControlledOpen) {
-      const timeout = setTimeout(() => {
-        setAllowSelect(true);
-      }, 300);
-      return () => {
-        clearTimeout(timeout);
-      };
-    } else {
-      setAllowSelect(false);
-      setAllowMouseUp(true);
-    }
-  }, [isControlledOpen]);
-  const handleSelect = usehooksTs.useEventCallback((index) => {
-    if (allowSelect) {
-      setSelectedIndex(index);
-      handleOpenChange(false);
-      const selectedOption = options[index];
-      if (selectedOption && !selectedOption.divider) {
-        const resultValue = selectedOption.value ?? "";
-        if (resultValue !== value) {
-          onChange == null ? void 0 : onChange(resultValue);
-        }
-      }
-    }
-  });
-  return {
-    selectedIndex,
-    currentSelectedIndex,
-    blockSelection,
-    allowSelect,
-    allowMouseUp,
-    setSelectedIndex,
-    setBlockSelection,
-    setAllowSelect,
-    setAllowMouseUp,
-    handleSelect
-  };
-}
-exports.useMenuSelection = useMenuSelection;

package/dist/cjs/components/menus/src/hooks/use-menu-state.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-function useMenuState(config = {}) {
-  const { open: controlledOpen, onOpenChange, disabled = false } = config;
-  const [open, setOpen] = React.useState(false);
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const [touch, setTouch] = React.useState(false);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const baseId = React.useId();
-  const menuId = `menu-${baseId}`;
-  const triggerId = `trigger-${baseId}`;
-  const isControlledOpen = controlledOpen !== void 0 ? controlledOpen : open;
-  const handleOpenChange = usehooksTs.useEventCallback((newOpen) => {
-    if (disabled && newOpen) {
-      return;
-    }
-    if (controlledOpen === void 0) {
-      setOpen(newOpen);
-    }
-    onOpenChange == null ? void 0 : onOpenChange(newOpen);
-  });
-  const result = React.useMemo(
-    () => ({
-      // 状态
-      open,
-      activeIndex,
-      touch,
-      scrollTop,
-      isControlledOpen,
-      // 状态设置函数
-      setOpen,
-      setActiveIndex,
-      setTouch,
-      setScrollTop,
-      // 处理函数
-      handleOpenChange,
-      // 唯一标识
-      menuId,
-      triggerId
-    }),
-    [open, activeIndex, touch, scrollTop, isControlledOpen, handleOpenChange, menuId, triggerId]
-  );
-  return result;
-}
-exports.useMenuState = useMenuState;

package/dist/cjs/components/menus/src/hooks/use-menu-tree.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@floating-ui/react");
-const usehooksTs = require("usehooks-ts");
-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
-  };
-}
-exports.useMenuTree = useMenuTree;