@choice-ui/react 1.3.11 → 1.4.0

package/dist/cjs/components/dropdown/src/dropdown.cjs

@@ -1,384 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("react/jsx-runtime");
-const index$1 = require("../../slot/dist/index.cjs");
-const index = require("../../menus/dist/index.cjs");
-const react = require("@floating-ui/react");
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-const ssr = require("../../../shared/utils/ssr.cjs");
-const useIsomorphicLayoutEffect = require("../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.cjs");
-const tcx = require("../../../shared/utils/tcx/tcx.cjs");
-const PORTAL_ROOT_ID = "floating-menu-root";
-const DEFAULT_OFFSET = 4;
-const DropdownComponent = React.memo(function DropdownComponent2(props) {
-  const {
-    children,
-    autoSelectFirstItem = true,
-    disabledNested = false,
-    offset: offsetDistance = DEFAULT_OFFSET,
-    placement = "bottom-start",
-    portalId = PORTAL_ROOT_ID,
-    position,
-    readOnly = false,
-    selection = false,
-    matchTriggerWidth = false,
-    open: controlledOpen,
-    onOpenChange,
-    triggerRef,
-    triggerSelector,
-    focusManagerProps = {
-      returnFocus: false,
-      modal: position ? false : true,
-      ...position && { disabled: true }
-      // 坐标模式下禁用焦点管理
-    },
-    root,
-    variant = "default"
-  } = props;
-  const hasExternalTrigger = Boolean(triggerRef || triggerSelector);
-  const { scrollRef, elementsRef, labelsRef, selectTimeoutRef } = index.useMenuBaseRefs();
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [hasFocusInside, setHasFocusInside] = React.useState(false);
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const [touch, setTouch] = React.useState(false);
-  const [isMouseOverMenu, setIsMouseOverMenu] = React.useState(false);
-  const isCoordinateMode = position !== null && position !== void 0;
-  const isControlledOpen = isCoordinateMode ? controlledOpen || false : controlledOpen === void 0 ? isOpen : controlledOpen;
-  const baseId = React.useId();
-  const menuId = `menu-${baseId}`;
-  const parent = React.useContext(index.MenuContext);
-  const handleOpenChange = usehooksTs.useEventCallback((newOpen) => {
-    if (!isCoordinateMode && controlledOpen === void 0) {
-      setIsOpen(newOpen);
-    }
-    onOpenChange == null ? void 0 : onOpenChange(newOpen);
-  });
-  const { nodeId, item, isNested } = index.useMenuTree({
-    disabledNested,
-    handleOpenChange,
-    isControlledOpen
-  });
-  const setVirtualPosition = usehooksTs.useEventCallback((pos) => {
-    var _a;
-    refs.setPositionReference({
-      getBoundingClientRect() {
-        return {
-          x: pos.x,
-          y: pos.y,
-          width: 0,
-          height: 0,
-          left: pos.x,
-          right: pos.x,
-          top: pos.y,
-          bottom: pos.y
-        };
-      },
-      contextElement: (_a = ssr.getDocument()) == null ? void 0 : _a.body
-    });
-  });
-  const lastPositionRef = React.useRef(null);
-  const middleware = React.useMemo(
-    () => [
-      react.offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
-      react.flip(),
-      react.shift(),
-      react.size({
-        padding: 4,
-        apply({ elements, availableHeight, rects }) {
-          var _a;
-          const contentHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || elements.floating.scrollHeight;
-          const maxHeight = Math.min(contentHeight, availableHeight);
-          Object.assign(elements.floating.style, {
-            maxHeight: `${maxHeight}px`,
-            display: "flex",
-            flexDirection: "column"
-          });
-          if (scrollRef.current) {
-            scrollRef.current.style.height = "100%";
-            scrollRef.current.style.maxHeight = "100%";
-          }
-          if (matchTriggerWidth) {
-            elements.floating.style.width = `${rects.reference.width}px`;
-          }
-        }
-      })
-    ],
-    [isNested, offsetDistance, matchTriggerWidth, scrollRef]
-  );
-  const { refs, floatingStyles, context, isPositioned } = react.useFloating({
-    nodeId,
-    open: isControlledOpen,
-    onOpenChange: handleOpenChange,
-    placement: isNested ? "right-start" : placement,
-    middleware,
-    whileElementsMounted: react.autoUpdate
-  });
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (position && isCoordinateMode && isControlledOpen && (!lastPositionRef.current || lastPositionRef.current.x !== position.x || lastPositionRef.current.y !== position.y)) {
-      setVirtualPosition(position);
-      lastPositionRef.current = position;
-    }
-  }, [position, isCoordinateMode, isControlledOpen, setVirtualPosition]);
-  React.useEffect(() => {
-    if (isCoordinateMode && isControlledOpen && activeIndex === null && !isMouseOverMenu) {
-      setActiveIndex(autoSelectFirstItem ? 0 : null);
-    }
-  }, [isCoordinateMode, isControlledOpen, activeIndex, isMouseOverMenu, autoSelectFirstItem]);
-  React.useEffect(() => {
-    if (isCoordinateMode && !isControlledOpen) {
-      setActiveIndex(null);
-    }
-  }, [isCoordinateMode, isControlledOpen]);
-  const isOpenRef = React.useRef(isControlledOpen);
-  isOpenRef.current = isControlledOpen;
-  React.useEffect(() => {
-    if (isCoordinateMode || !triggerRef && !triggerSelector) return;
-    const element = (triggerRef == null ? void 0 : triggerRef.current) ?? (triggerSelector ? document.querySelector(triggerSelector) : null);
-    if (!element) return;
-    refs.setReference(element);
-    const handleClick = (e) => {
-      e.preventDefault();
-      handleOpenChange(!isOpenRef.current);
-    };
-    element.addEventListener("click", handleClick);
-    return () => {
-      element.removeEventListener("click", handleClick);
-    };
-  }, [triggerRef, triggerSelector, refs, handleOpenChange, isCoordinateMode]);
-  const hover = react.useHover(context, {
-    enabled: isNested && !isCoordinateMode,
-    delay: { open: 75 },
-    handleClose: react.safePolygon({ blockPointerEvents: true, requireIntent: false, buffer: 10 })
-  });
-  const click = react.useClick(context, {
-    event: "mousedown",
-    toggle: !isNested && !isCoordinateMode,
-    ignoreMouse: isNested,
-    stickIfOpen: false,
-    enabled: !isCoordinateMode
-    // 坐标模式下禁用点击交互
-  });
-  const role = react.useRole(context, { role: "menu" });
-  const dismiss = react.useDismiss(context, {
-    bubbles: true,
-    escapeKey: true
-  });
-  const listNavigation = react.useListNavigation(context, {
-    listRef: elementsRef,
-    activeIndex,
-    nested: isNested,
-    onNavigate: setActiveIndex,
-    loop: true
-  });
-  const typeahead = react.useTypeahead(context, {
-    listRef: labelsRef,
-    onMatch: isControlledOpen ? setActiveIndex : void 0,
-    activeIndex
-  });
-  const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions([
-    hover,
-    click,
-    role,
-    dismiss,
-    listNavigation,
-    typeahead
-  ]);
-  index.useMenuScrollHeight({
-    isControlledOpen,
-    isPositioned,
-    scrollRef
-  });
-  const { handleArrowScroll, handleArrowHide, scrollProps } = index.useMenuScroll({
-    scrollRef,
-    selectTimeoutRef,
-    scrollTop,
-    setScrollTop,
-    touch,
-    isSelect: false,
-    // Dropdown 不是 Select
-    fallback: false,
-    // Dropdown 没有 fallback 机制
-    setInnerOffset: void 0
-    // Dropdown 不使用 innerOffset
-  });
-  const handleTouchStart = usehooksTs.useEventCallback(() => {
-    setTouch(true);
-  });
-  const handlePointerMove = usehooksTs.useEventCallback(({ pointerType }) => {
-    if (pointerType !== "touch") {
-      setTouch(false);
-    }
-  });
-  const handleMouseEnterMenu = usehooksTs.useEventCallback(() => {
-    if (isCoordinateMode) {
-      setIsMouseOverMenu(true);
-    }
-  });
-  const handleMouseLeaveMenu = usehooksTs.useEventCallback(() => {
-    if (isCoordinateMode) {
-      setIsMouseOverMenu(false);
-    }
-  });
-  const handleFocus = usehooksTs.useEventCallback(() => {
-    if (isCoordinateMode) {
-      return;
-    }
-    setHasFocusInside(false);
-    parent == null ? void 0 : parent.setHasFocusInside(true);
-  });
-  const handleClose = usehooksTs.useEventCallback(() => {
-    handleOpenChange(false);
-  });
-  const { triggerElement, subTriggerElement, contentElement } = React.useMemo(() => {
-    const childrenArray = React.Children.toArray(children);
-    const trigger = childrenArray.find(
-      (child) => React.isValidElement(child) && child.type === index.MenuTrigger
-    );
-    const subTrigger = childrenArray.find(
-      (child) => React.isValidElement(child) && child.type === index.MenuContextSubTrigger
-    );
-    const content = childrenArray.find(
-      (child) => React.isValidElement(child) && child.type === index.MenuContextContent
-    );
-    return {
-      triggerElement: trigger,
-      subTriggerElement: subTrigger,
-      contentElement: content
-    };
-  }, [children]);
-  if (!contentElement && isControlledOpen) {
-    console.error(
-      "Dropdown requires a Dropdown.Content component as a child. Example: <Dropdown><Dropdown.Trigger>Trigger</Dropdown.Trigger><Dropdown.Content>{items}</Dropdown.Content></Dropdown>"
-    );
-  }
-  const contextValue = React.useMemo(
-    () => ({
-      activeIndex,
-      setActiveIndex,
-      getItemProps,
-      setHasFocusInside,
-      isOpen: isControlledOpen,
-      readOnly,
-      selection,
-      close: handleClose,
-      variant
-    }),
-    [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
-  );
-  return /* @__PURE__ */ require$$0.jsxs(react.FloatingNode, { id: nodeId, children: [
-    !isCoordinateMode && !hasExternalTrigger && /* @__PURE__ */ require$$0.jsx(
-      index$1.Slot,
-      {
-        ref: refs.setReference,
-        tabIndex: !isNested ? void 0 : (parent == null ? void 0 : parent.activeIndex) === item.index ? 0 : -1,
-        role: isNested ? "menuitem" : void 0,
-        "data-open": isControlledOpen ? "" : void 0,
-        "data-nested": isNested ? "" : void 0,
-        "data-focus-inside": hasFocusInside ? "" : void 0,
-        onTouchStart: handleTouchStart,
-        onPointerMove: handlePointerMove,
-        "aria-haspopup": "menu",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps(
-          parent ? parent.getItemProps({
-            onFocus: handleFocus
-          }) : {}
-        ),
-        children: isNested ? subTriggerElement && React.cloneElement(subTriggerElement, { active: isControlledOpen }) : triggerElement && React.cloneElement(triggerElement, { active: isControlledOpen })
-      }
-    ),
-    /* @__PURE__ */ require$$0.jsx(
-      react.FloatingList,
-      {
-        elementsRef,
-        labelsRef,
-        children: /* @__PURE__ */ require$$0.jsx(
-          react.FloatingPortal,
-          {
-            id: portalId,
-            root,
-            children: isControlledOpen && /* @__PURE__ */ require$$0.jsx(
-              react.FloatingOverlay,
-              {
-                lockScroll: !touch,
-                className: tcx.tcx("z-menu", focusManagerProps.modal ? "" : "pointer-events-none"),
-                children: /* @__PURE__ */ require$$0.jsx(
-                  react.FloatingFocusManager,
-                  {
-                    context,
-                    initialFocus: isCoordinateMode || isNested ? -1 : 0,
-                    visuallyHiddenDismiss: isCoordinateMode,
-                    ...focusManagerProps,
-                    children: /* @__PURE__ */ require$$0.jsxs(
-                      "div",
-                      {
-                        id: menuId,
-                        style: floatingStyles,
-                        ref: refs.setFloating,
-                        onTouchStart: handleTouchStart,
-                        onPointerMove: handlePointerMove,
-                        onMouseEnter: handleMouseEnterMenu,
-                        onMouseLeave: handleMouseLeaveMenu,
-                        ...getFloatingProps({
-                          onContextMenu(e) {
-                            e.preventDefault();
-                          }
-                        }),
-                        children: [
-                          /* @__PURE__ */ require$$0.jsx(index.MenuContext.Provider, { value: contextValue, children: contentElement && React.cloneElement(contentElement, {
-                            ref: scrollRef,
-                            matchTriggerWidth,
-                            variant,
-                            ...scrollProps
-                          }) }),
-                          ["up", "down"].map((dir) => /* @__PURE__ */ require$$0.jsx(
-                            index.MenuScrollArrow,
-                            {
-                              dir,
-                              scrollTop,
-                              scrollRef,
-                              innerOffset: 0,
-                              isPositioned,
-                              onScroll: handleArrowScroll,
-                              onHide: handleArrowHide
-                            },
-                            dir
-                          ))
-                        ]
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-});
-const BaseDropdown = React.memo(function Dropdown2(props) {
-  const { children, ...rest } = props;
-  const parentId = react.useFloatingParentNodeId();
-  if (parentId === null) {
-    return /* @__PURE__ */ require$$0.jsx(react.FloatingTree, { children: /* @__PURE__ */ require$$0.jsx(DropdownComponent, { ...rest, children }) });
-  }
-  return /* @__PURE__ */ require$$0.jsx(DropdownComponent, { ...props, children });
-});
-const Dropdown = Object.assign(BaseDropdown, {
-  displayName: "Dropdown",
-  Trigger: index.MenuTrigger,
-  Item: index.MenuContextItem,
-  SubTrigger: index.MenuContextSubTrigger,
-  Divider: index.MenuDivider,
-  Label: index.MenuContextLabel,
-  Search: index.MenuSearch,
-  Button: index.MenuButton,
-  Input: index.MenuInput,
-  Content: index.MenuContextContent,
-  Value: index.MenuValue
-});
-exports.Dropdown = Dropdown;