@baishuyun/ai-design 2.0.13 → 2.0.14

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @baishuyun/ai-design
 
+## 2.0.14
+
+### Patch Changes
+
+- fix ui error
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.14
+  - @baishuyun/types@3.0.14
+
 ## 2.0.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.13",
-    "@baishuyun/types": "3.0.13"
+    "@baishuyun/ai-feat-utils": "2.0.14",
+    "@baishuyun/types": "3.0.14"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -84,7 +84,7 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.13",
+    "@baishuyun/types": "3.0.14",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],

package/src/components/agent-helper/form-select/index.tsx

@@ -11,6 +11,7 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../../lib/utils';
 import { transCls } from '../../../const/ui';
 import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
+import { useSelectPopoverPosition } from '../../../hooks/use-select-popover-position';
 
 const FolderIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
@@ -332,9 +333,11 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
     );
     const triggerRef = useRef<HTMLDivElement>(null);
     const popoverRef = useRef<HTMLDivElement>(null);
-    const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
 
+    const { popoverStyle, updatePopoverPosition } =
+      useSelectPopoverPosition(triggerRef);
+
     const selectedFormId = controlledValue ?? internalValue;
 
     // Build the form tree
@@ -350,21 +353,6 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
 
     const hasSearch = searchQuery.trim().length > 0;
 
-    // ── Position helpers ──────────────────────────────────────────
-
-    const updatePopoverPosition = useCallback(() => {
-      if (!triggerRef.current) return;
-      const rect = triggerRef.current.getBoundingClientRect();
-      setPopoverStyle({
-        position: 'fixed',
-        top: rect.bottom + 4,
-        left: rect.left,
-        minWidth: Math.max(rect.width, 240),
-        zIndex: 9999,
-        pointerEvents: 'auto',
-      });
-    }, []);
-
     const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
       (triggerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
       if (!node) {

package/src/components/bs-entry-select/bs-entry-select.tsx

@@ -14,6 +14,7 @@ import { EntryPopover } from './entry-popover';
 import { buildEntryTreeFromAliasMap } from './build-tree';
 import type { BsEntrySelectProps, BsEntrySelectChangeResult } from './types';
 import { MenuLinesIcon } from '../bs-icons';
+import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
 
 export type { BsEntrySelectProps, BsEntrySelectChangeResult };
 
@@ -41,10 +42,12 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
     );
     const triggerRef = useRef<HTMLDivElement>(null);
     const popoverRef = useRef<HTMLDivElement>(null);
-    const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
     const [sliderHasOverflow, setSliderHasOverflow] = useState(false);
 
+    const { popoverStyle, updatePopoverPosition } =
+      useSelectPopoverPosition(triggerRef);
+
     const handleOverflowChange = useCallback((hasOverflow: boolean) => {
       setSliderHasOverflow(hasOverflow);
     }, []);
@@ -55,18 +58,6 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
       return Object.keys(appDetails).filter((id) => id !== currentAppId);
     }, [appDetails, currentAppId]);
 
-    const updatePopoverPosition = useCallback(() => {
-      if (!triggerRef.current) return;
-      const rect = triggerRef.current.getBoundingClientRect();
-      setPopoverStyle({
-        position: 'fixed',
-        top: rect.bottom + 4,
-        left: rect.left,
-        minWidth: Math.max(rect.width, 240),
-        zIndex: 9999,
-      });
-    }, []);
-
     const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
       (triggerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
       if (!node) {

package/src/components/bs-entry-select/scroll-slider.tsx

@@ -24,6 +24,7 @@ import type {
   BsEntrySelectSliderVariant,
 } from './types';
 import classNames from 'classnames';
+import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
 
 const ChevronRightIcon = ({ size }: { size?: number }) => (
   <SolidArrowDownIcon className="-rotate-90" size={size} />
@@ -59,10 +60,18 @@ export function ScrollSlider({
   // Group popover state
   const [activeGroup, setActiveGroup] = useState<FlatNode | null>(null);
   const [groupSearchQuery, setGroupSearchQuery] = useState('');
-  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
   const popoverRef = useRef<HTMLDivElement>(null);
   const groupPillRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
   const [groupPortalContainer, setGroupPortalContainer] = useState<HTMLElement | null>(null);
+  const activeGroupIdRef = useRef<string | null>(null);
+
+  const { popoverStyle, updatePopoverPosition } = useSelectPopoverPosition(
+    () => {
+      if (!activeGroupIdRef.current) return null;
+      return groupPillRefs.current.get(activeGroupIdRef.current) ?? null;
+    },
+    { estimatedHeight: 340 },
+  );
 
   const isTabs = variant === 'tabs';
 
@@ -182,21 +191,8 @@ export function ScrollSlider({
     });
   }, []);
 
-  const updatePopoverPosition = useCallback(() => {
-    if (!activeGroup) return;
-    const triggerEl = groupPillRefs.current.get(activeGroup.node.id);
-    if (!triggerEl) return;
-    const rect = triggerEl.getBoundingClientRect();
-    setPopoverStyle({
-      position: 'fixed',
-      top: rect.bottom + 4,
-      left: rect.left,
-      minWidth: Math.max(rect.width, 240),
-      zIndex: 9999,
-    });
-  }, [activeGroup]);
-
   const closeGroupPopover = useCallback(() => {
+    activeGroupIdRef.current = null;
     setActiveGroup(null);
     setGroupSearchQuery('');
   }, []);
@@ -204,11 +200,13 @@ export function ScrollSlider({
   const openGroupPopover = useCallback((flatNode: FlatNode, event: React.MouseEvent) => {
     event.stopPropagation();
     if (activeGroup?.node.id === flatNode.node.id) {
+      activeGroupIdRef.current = null;
       setActiveGroup(null);
       setGroupSearchQuery('');
       return;
     }
     setGroupSearchQuery('');
+    activeGroupIdRef.current = flatNode.node.id;
     setActiveGroup(flatNode);
 
     // Check Shadow DOM portal
@@ -233,21 +231,10 @@ export function ScrollSlider({
     }
 
     // Position the popover after the next frame
-    const groupId = flatNode.node.id;
     requestAnimationFrame(() => {
-      const el = groupPillRefs.current.get(groupId);
-      if (el) {
-        const rect = el.getBoundingClientRect();
-        setPopoverStyle({
-          position: 'fixed',
-          top: rect.bottom + 4,
-          left: rect.left,
-          minWidth: Math.max(rect.width, 240),
-          zIndex: 9999,
-        });
-      }
+      updatePopoverPosition();
     });
-  }, [activeGroup]);
+  }, [activeGroup, updatePopoverPosition]);
 
   const handleGroupPopoverSelect = useCallback(
     (result: BsEntrySelectChangeResult) => {

package/src/hooks/use-select-popover-position.ts

@@ -0,0 +1,74 @@
+import { useState, useCallback } from 'react';
+
+interface UseSelectPopoverPositionOptions {
+  estimatedHeight?: number;
+  gap?: number;
+  minWidth?: number;
+  zIndex?: number;
+}
+
+export function useSelectPopoverPosition(
+  triggerRef: React.RefObject<HTMLElement | null>,
+  options?: UseSelectPopoverPositionOptions,
+): {
+  popoverStyle: React.CSSProperties;
+  updatePopoverPosition: () => void;
+};
+
+export function useSelectPopoverPosition(
+  getTrigger: () => HTMLElement | null,
+  options?: UseSelectPopoverPositionOptions,
+): {
+  popoverStyle: React.CSSProperties;
+  updatePopoverPosition: () => void;
+};
+
+export function useSelectPopoverPosition(
+  triggerRefOrGetter:
+    | React.RefObject<HTMLElement | null>
+    | (() => HTMLElement | null),
+  options: UseSelectPopoverPositionOptions = {},
+) {
+  const {
+    estimatedHeight = 450,
+    gap = 4,
+    minWidth = 240,
+    zIndex = 9999,
+  } = options;
+
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+
+  const getTrigger: () => HTMLElement | null =
+    typeof triggerRefOrGetter === 'function'
+      ? triggerRefOrGetter
+      : () => triggerRefOrGetter.current;
+
+  const updatePopoverPosition = useCallback(() => {
+    const trigger = getTrigger();
+    if (!trigger) return;
+
+    const rect = trigger.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom - gap;
+    const spaceAbove = rect.top - gap;
+    const positionBelow =
+      spaceBelow >= estimatedHeight || spaceBelow >= spaceAbove;
+
+    setPopoverStyle({
+      position: 'fixed',
+      top: positionBelow ? rect.bottom + gap : undefined,
+      bottom: positionBelow
+        ? undefined
+        : window.innerHeight - rect.top + gap,
+      left: rect.left,
+      minWidth: Math.max(rect.width, minWidth),
+      maxHeight: Math.min(
+        estimatedHeight,
+        positionBelow ? spaceBelow : spaceAbove,
+      ),
+      zIndex,
+      pointerEvents: 'auto',
+    });
+  }, [getTrigger, estimatedHeight, gap, minWidth, zIndex]);
+
+  return { popoverStyle, updatePopoverPosition } as const;
+}