@choice-ui/react 1.3.10

package/dist/esm/components/dialog/src/hooks/use-resize.js

@@ -0,0 +1,192 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useEventCallback } from "usehooks-ts";
+const MAX_SIZE_RATIO = 0.9;
+function adjustSize(size, minWidth = 200, maxWidth, minHeight = 100, maxHeight) {
+  const mw = maxWidth ?? (typeof window !== "undefined" ? window.innerWidth * MAX_SIZE_RATIO : 800);
+  const mh = maxHeight ?? (typeof window !== "undefined" ? window.innerHeight * MAX_SIZE_RATIO : 600);
+  return {
+    width: Math.min(Math.max(size.width, minWidth), mw),
+    height: Math.min(Math.max(size.height, minHeight), mh)
+  };
+}
+function getCursorStyle(direction) {
+  if (!direction) return "default";
+  if (direction.width && direction.height) return "nwse-resize";
+  if (direction.width) return "ew-resize";
+  if (direction.height) return "ns-resize";
+  return "default";
+}
+function useResize(elementRef, options = {}) {
+  const {
+    enabled = true,
+    defaultWidth,
+    defaultHeight,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    onResizeStart,
+    onResizeEnd,
+    rememberSize = false
+  } = options;
+  const [state, setState] = useState({
+    isResizing: null,
+    size: null
+  });
+  const sizeRef = useRef(null);
+  const initialSizeRef = useRef(null);
+  const resizeOriginRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
+  const isInitializedRef = useRef(false);
+  const resizeOffsetRef = useRef({ x: 0, y: 0 });
+  useEffect(() => {
+    if (!isInitializedRef.current && elementRef.current) {
+      const rect = elementRef.current.getBoundingClientRect();
+      const initialSize = {
+        width: defaultWidth || rect.width,
+        height: defaultHeight || rect.height
+      };
+      initialSizeRef.current = initialSize;
+      if (!sizeRef.current || !rememberSize) {
+        sizeRef.current = initialSize;
+        setState((prev) => ({ ...prev, size: initialSize }));
+      }
+      isInitializedRef.current = true;
+    }
+  }, [defaultWidth, defaultHeight, rememberSize]);
+  const handleResizeStart = useEventCallback((e, direction) => {
+    var _a;
+    if (!enabled) return;
+    const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!rect) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (!initialSizeRef.current) {
+      initialSizeRef.current = {
+        width: defaultWidth || rect.width,
+        height: defaultHeight || rect.height
+      };
+    }
+    document.body.style.cursor = getCursorStyle(direction);
+    setState((prev) => ({ ...prev, isResizing: direction }));
+    onResizeStart == null ? void 0 : onResizeStart(e, direction);
+    if (direction.width) {
+      resizeOffsetRef.current.x = rect.right - e.clientX;
+    }
+    if (direction.height) {
+      resizeOffsetRef.current.y = rect.bottom - e.clientY;
+    }
+    resizeOriginRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      width: rect.width,
+      height: rect.height
+    };
+  });
+  const handleResize = useCallback(
+    (e) => {
+      var _a;
+      if (!enabled || !state.isResizing) return;
+      const direction = state.isResizing;
+      const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      document.body.style.cursor = getCursorStyle(direction);
+      let newWidth = rect.width;
+      let newHeight = rect.height;
+      if (direction.width) {
+        newWidth = e.clientX + resizeOffsetRef.current.x - rect.left;
+      }
+      if (direction.height) {
+        newHeight = e.clientY + resizeOffsetRef.current.y - rect.top;
+      }
+      const newSize = {
+        width: direction.width ? newWidth : rect.width,
+        height: direction.height ? newHeight : rect.height
+      };
+      const adjustedSize = adjustSize(newSize, minWidth, maxWidth, minHeight, maxHeight);
+      sizeRef.current = adjustedSize;
+      setState((prev) => ({ ...prev, size: adjustedSize }));
+    },
+    [enabled, state.isResizing, minWidth, maxWidth, minHeight, maxHeight]
+  );
+  const handleResizeEnd = useCallback(() => {
+    if (!enabled) return;
+    document.body.style.cursor = "default";
+    if (sizeRef.current) {
+      onResizeEnd == null ? void 0 : onResizeEnd(sizeRef.current);
+    }
+    setState((prev) => ({ ...prev, isResizing: null }));
+  }, [enabled, onResizeEnd]);
+  const resetResizeState = useCallback(() => {
+    document.body.style.cursor = "default";
+    setState((prev) => ({
+      ...prev,
+      isResizing: null
+    }));
+  }, []);
+  const resetSize = useCallback(() => {
+    if (!rememberSize && initialSizeRef.current) {
+      sizeRef.current = initialSizeRef.current;
+      setState((prev) => ({
+        ...prev,
+        size: initialSizeRef.current
+      }));
+    }
+  }, [rememberSize]);
+  const reset = useCallback(() => {
+    document.body.style.cursor = "default";
+    if (!rememberSize) {
+      setState({
+        isResizing: null,
+        size: null
+      });
+      sizeRef.current = null;
+      initialSizeRef.current = null;
+      isInitializedRef.current = false;
+    } else {
+      resetResizeState();
+    }
+  }, [rememberSize, resetResizeState]);
+  useEffect(() => {
+    if (!rememberSize) {
+      resetSize();
+    }
+  }, [rememberSize, resetSize]);
+  useEffect(() => {
+    if (enabled && state.isResizing) {
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+          handleResizeEnd();
+        }
+      };
+      const handleWindowBlur = () => {
+        handleResizeEnd();
+      };
+      document.addEventListener("mousemove", handleResize);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("blur", handleWindowBlur);
+      return () => {
+        document.removeEventListener("mousemove", handleResize);
+        document.removeEventListener("mouseup", handleResizeEnd);
+        document.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("blur", handleWindowBlur);
+        document.body.style.cursor = "default";
+      };
+    }
+  }, [enabled, state.isResizing, handleResize, handleResizeEnd]);
+  useEffect(() => {
+    return () => {
+      document.body.style.cursor = "default";
+    };
+  }, []);
+  return {
+    state,
+    handleResizeStart,
+    resetResizeState,
+    resetSize,
+    reset
+  };
+}
+export {
+  useResize
+};

package/dist/esm/components/dialog/src/tv.js

@@ -0,0 +1,38 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const dragDialogTv = tcv({
+  slots: {
+    overlay: "z-modals overflow-hidden",
+    dialog: "",
+    resizeWidthHandle: "absolute top-0 -right-1 h-full w-2 cursor-ew-resize",
+    resizeHeightHandle: "absolute -bottom-1 left-0 h-2 w-full cursor-ns-resize",
+    resizeCornerHandle: [
+      "absolute -right-1 -bottom-1 size-6 cursor-nwse-resize",
+      "hover:before:border-default-foreground",
+      "before:absolute before:inset-2 before:rounded-br-full before:border-r-2 before:border-b-2 before:content-['']"
+    ]
+  },
+  variants: {
+    resizable: {
+      true: {
+        dialog: "resize-handle"
+      },
+      false: {
+        overlay: "cursor-default"
+      }
+    },
+    overlay: {
+      true: {},
+      false: {
+        overlay: "pointer-events-none",
+        dialog: "pointer-events-auto"
+      }
+    }
+  },
+  defaultVariants: {
+    resizable: false,
+    overlay: true
+  }
+});
+export {
+  dragDialogTv
+};

package/dist/esm/components/dialog/src/utils/calculate-initial-position.js

@@ -0,0 +1,25 @@
+function calculateInitialPosition(preset, dialogWidth, dialogHeight, positionPadding, viewportWidth, viewportHeight) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 0;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 0;
+  const padding = positionPadding;
+  let x = 0;
+  if (preset.includes("left")) {
+    x = padding;
+  } else if (preset.includes("right")) {
+    x = vw - dialogWidth - padding;
+  } else if (preset.includes("center") || preset === "center") {
+    x = (vw - dialogWidth) / 2;
+  }
+  let y = 0;
+  if (preset.includes("top")) {
+    y = padding;
+  } else if (preset.includes("bottom")) {
+    y = vh - dialogHeight - padding;
+  } else if (preset.includes("center") || preset === "center") {
+    y = (vh - dialogHeight) / 2;
+  }
+  return { x, y };
+}
+export {
+  calculateInitialPosition
+};

package/dist/esm/components/dropdown/dist/index.js

@@ -0,0 +1,384 @@
+import { Slot } from "../../slot/dist/index.js";
+import { MenuValue, MenuContextContent, MenuInput, MenuButton, MenuSearch, MenuContextLabel, MenuDivider, MenuContextSubTrigger, MenuContextItem, MenuTrigger, useMenuBaseRefs, MenuContext, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuScrollArrow } from "../../menus/dist/index.js";
+import { useFloatingParentNodeId, FloatingTree, useFloating, offset, flip, shift, size, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
+import { memo, useState, useId, useContext, useRef, useMemo, useEffect, Children, isValidElement, cloneElement } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getDocument } from "../../../shared/utils/ssr.js";
+import { useIsomorphicLayoutEffect } from "../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+var PORTAL_ROOT_ID = "floating-menu-root";
+var DEFAULT_OFFSET = 4;
+var DropdownComponent = 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 } = useMenuBaseRefs();
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasFocusInside, setHasFocusInside] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [touch, setTouch] = useState(false);
+  const [isMouseOverMenu, setIsMouseOverMenu] = useState(false);
+  const isCoordinateMode = position !== null && position !== void 0;
+  const isControlledOpen = isCoordinateMode ? controlledOpen || false : controlledOpen === void 0 ? isOpen : controlledOpen;
+  const baseId = useId();
+  const menuId = `menu-${baseId}`;
+  const parent = useContext(MenuContext);
+  const handleOpenChange = useEventCallback((newOpen) => {
+    if (!isCoordinateMode && controlledOpen === void 0) {
+      setIsOpen(newOpen);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  });
+  const { nodeId, item, isNested } = useMenuTree({
+    disabledNested,
+    handleOpenChange,
+    isControlledOpen
+  });
+  const setVirtualPosition = 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 = getDocument()) == null ? void 0 : _a.body
+    });
+  });
+  const lastPositionRef = useRef(null);
+  const middleware = useMemo(
+    () => [
+      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
+      flip(),
+      shift(),
+      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 } = useFloating({
+    nodeId,
+    open: isControlledOpen,
+    onOpenChange: handleOpenChange,
+    placement: isNested ? "right-start" : placement,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  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]);
+  useEffect(() => {
+    if (isCoordinateMode && isControlledOpen && activeIndex === null && !isMouseOverMenu) {
+      setActiveIndex(autoSelectFirstItem ? 0 : null);
+    }
+  }, [isCoordinateMode, isControlledOpen, activeIndex, isMouseOverMenu, autoSelectFirstItem]);
+  useEffect(() => {
+    if (isCoordinateMode && !isControlledOpen) {
+      setActiveIndex(null);
+    }
+  }, [isCoordinateMode, isControlledOpen]);
+  const isOpenRef = useRef(isControlledOpen);
+  isOpenRef.current = isControlledOpen;
+  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 = useHover(context, {
+    enabled: isNested && !isCoordinateMode,
+    delay: { open: 75 },
+    handleClose: safePolygon({ blockPointerEvents: true, requireIntent: false, buffer: 10 })
+  });
+  const click = useClick(context, {
+    event: "mousedown",
+    toggle: !isNested && !isCoordinateMode,
+    ignoreMouse: isNested,
+    stickIfOpen: false,
+    enabled: !isCoordinateMode
+    // 坐标模式下禁用点击交互
+  });
+  const role = useRole(context, { role: "menu" });
+  const dismiss = useDismiss(context, {
+    bubbles: true,
+    escapeKey: true
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    onMatch: isControlledOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    hover,
+    click,
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  useMenuScrollHeight({
+    isControlledOpen,
+    isPositioned,
+    scrollRef
+  });
+  const { handleArrowScroll, handleArrowHide, scrollProps } = useMenuScroll({
+    scrollRef,
+    selectTimeoutRef,
+    scrollTop,
+    setScrollTop,
+    touch,
+    isSelect: false,
+    // Dropdown 不是 Select
+    fallback: false,
+    // Dropdown 没有 fallback 机制
+    setInnerOffset: void 0
+    // Dropdown 不使用 innerOffset
+  });
+  const handleTouchStart = useEventCallback(() => {
+    setTouch(true);
+  });
+  const handlePointerMove = useEventCallback(({ pointerType }) => {
+    if (pointerType !== "touch") {
+      setTouch(false);
+    }
+  });
+  const handleMouseEnterMenu = useEventCallback(() => {
+    if (isCoordinateMode) {
+      setIsMouseOverMenu(true);
+    }
+  });
+  const handleMouseLeaveMenu = useEventCallback(() => {
+    if (isCoordinateMode) {
+      setIsMouseOverMenu(false);
+    }
+  });
+  const handleFocus = useEventCallback(() => {
+    if (isCoordinateMode) {
+      return;
+    }
+    setHasFocusInside(false);
+    parent == null ? void 0 : parent.setHasFocusInside(true);
+  });
+  const handleClose = useEventCallback(() => {
+    handleOpenChange(false);
+  });
+  const { triggerElement, subTriggerElement, contentElement } = useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    const trigger = childrenArray.find(
+      (child) => isValidElement(child) && child.type === MenuTrigger
+    );
+    const subTrigger = childrenArray.find(
+      (child) => isValidElement(child) && child.type === MenuContextSubTrigger
+    );
+    const content = childrenArray.find(
+      (child) => isValidElement(child) && child.type === 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 = useMemo(
+    () => ({
+      activeIndex,
+      setActiveIndex,
+      getItemProps,
+      setHasFocusInside,
+      isOpen: isControlledOpen,
+      readOnly,
+      selection,
+      close: handleClose,
+      variant
+    }),
+    [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
+  );
+  return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
+    !isCoordinateMode && !hasExternalTrigger && /* @__PURE__ */ jsx(
+      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 && cloneElement(subTriggerElement, { active: isControlledOpen }) : triggerElement && cloneElement(triggerElement, { active: isControlledOpen })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingList,
+      {
+        elementsRef,
+        labelsRef,
+        children: /* @__PURE__ */ jsx(
+          FloatingPortal,
+          {
+            id: portalId,
+            root,
+            children: isControlledOpen && /* @__PURE__ */ jsx(
+              FloatingOverlay,
+              {
+                lockScroll: !touch,
+                className: tcx("z-menu", focusManagerProps.modal ? "" : "pointer-events-none"),
+                children: /* @__PURE__ */ jsx(
+                  FloatingFocusManager,
+                  {
+                    context,
+                    initialFocus: isCoordinateMode || isNested ? -1 : 0,
+                    visuallyHiddenDismiss: isCoordinateMode,
+                    ...focusManagerProps,
+                    children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        id: menuId,
+                        style: floatingStyles,
+                        ref: refs.setFloating,
+                        onTouchStart: handleTouchStart,
+                        onPointerMove: handlePointerMove,
+                        onMouseEnter: handleMouseEnterMenu,
+                        onMouseLeave: handleMouseLeaveMenu,
+                        ...getFloatingProps({
+                          onContextMenu(e) {
+                            e.preventDefault();
+                          }
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: contentElement && cloneElement(contentElement, {
+                            ref: scrollRef,
+                            matchTriggerWidth,
+                            variant,
+                            ...scrollProps
+                          }) }),
+                          ["up", "down"].map((dir) => /* @__PURE__ */ jsx(
+                            MenuScrollArrow,
+                            {
+                              dir,
+                              scrollTop,
+                              scrollRef,
+                              innerOffset: 0,
+                              isPositioned,
+                              onScroll: handleArrowScroll,
+                              onHide: handleArrowHide
+                            },
+                            dir
+                          ))
+                        ]
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+});
+var BaseDropdown = memo(function Dropdown(props) {
+  const { children, ...rest } = props;
+  const parentId = useFloatingParentNodeId();
+  if (parentId === null) {
+    return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(DropdownComponent, { ...rest, children }) });
+  }
+  return /* @__PURE__ */ jsx(DropdownComponent, { ...props, children });
+});
+var Dropdown2 = Object.assign(BaseDropdown, {
+  displayName: "Dropdown",
+  Trigger: MenuTrigger,
+  Item: MenuContextItem,
+  SubTrigger: MenuContextSubTrigger,
+  Divider: MenuDivider,
+  Label: MenuContextLabel,
+  Search: MenuSearch,
+  Button: MenuButton,
+  Input: MenuInput,
+  Content: MenuContextContent,
+  Value: MenuValue
+});
+export {
+  Dropdown2 as Dropdown
+};