@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/context-input/src/utils/mention-spacing.d.ts

@@ -1,32 +1,32 @@
 import { Editor } from 'slate';
 /**
- * 检查是否需要在当前位置前面添加空格
- * @param editor - SlateJS 编辑器实例
- * @returns 是否需要添加前导空格
+ * Check if a space should be inserted before the current position
+ * @param editor - SlateJS editor instance
+ * @returns Whether a leading space should be added
  */
 export declare function shouldInsertSpaceBefore(editor: Editor): boolean;
 /**
- * 检查是否需要在当前位置后面添加空格
- * @param editor - SlateJS 编辑器实例
- * @returns 是否需要添加后导空格
+ * Check if a space should be inserted after the current position
+ * @param editor - SlateJS editor instance
+ * @returns Whether a trailing space should be added
  */
 export declare function shouldInsertSpaceAfter(editor: Editor): boolean;
 /**
- * 在当前位置智能插入空格（前导空格）
- * @param editor - SlateJS 编辑器实例
- * @returns 是否插入了空格
+ * Smartly insert space at current position (leading space)
+ * @param editor - SlateJS editor instance
+ * @returns Whether a space was inserted
  */
 export declare function insertSpaceBeforeIfNeeded(editor: Editor): boolean;
 /**
- * 在当前位置智能插入空格（后导空格）
- * @param editor - SlateJS 编辑器实例
- * @returns 是否插入了空格
+ * Smartly insert space at current position (trailing space)
+ * @param editor - SlateJS editor instance
+ * @returns Whether a space was inserted
  */
 export declare function insertSpaceAfterIfNeeded(editor: Editor): boolean;
 /**
- * 为 mention 插入智能间距
- * 这个函数会在插入 mention 前后根据上下文智能添加空格
- * @param editor - SlateJS 编辑器实例
- * @param beforeInsertion - 在插入内容前执行的回调
+ * Insert smart spacing for mention
+ * This function intelligently adds spaces before/after mention insertion based on context
+ * @param editor - SlateJS editor instance
+ * @param beforeInsertion - Callback to execute before content insertion
  */
 export declare function insertWithSmartSpacing(editor: Editor, beforeInsertion: () => void): void;

package/dist/components/context-input/src/utils/slate-converters.d.ts

@@ -1,16 +1,16 @@
 import { Descendant } from 'slate';
 /**
- * 将SlateJS节点数组转换为字符串
- * mention节点转换为 {{#context#}}{{#id.text#}} 格式
+ * Convert SlateJS node array to string
+ * Mention nodes are converted to {{#context#}}{{#id.text#}} format
  */
 export declare function convertSlateToText(nodes: Descendant[]): string;
 /**
- * 将字符串转换为SlateJS节点数组
- * 支持解析 {{#context#}}{{#id.text#}} 格式为mention节点
+ * Convert string to SlateJS node array
+ * Supports parsing {{#context#}}{{#id.text#}} format to mention nodes
  */
 export declare function convertTextToSlate(text: string): Descendant[];
 /**
- * 创建mention查找函数的接口
+ * Interface for mention resolver function
  */
 export interface MentionResolver {
     (mentionId: string): Promise<{
@@ -20,6 +20,6 @@ export interface MentionResolver {
     }>;
 }
 /**
- * 高级版本：支持异步解析mention信息
+ * Advanced version: supports async mention info resolution
  */
 export declare function convertTextToSlateWithResolver(text: string, mentionResolver?: MentionResolver): Promise<Descendant[]>;

package/dist/components/context-input/src/utils/slate-converters.js

@@ -65,10 +65,10 @@ function parseLineToNodes(line) {
     const mentionNode = {
       type: "mention",
       mentionType: "user",
-      // 默认类型，可能需要根据实际情况调整
+      // Default type, may need adjustment based on actual use
       mentionId,
       mentionLabel: `User ${mentionId}`,
-      // 默认标签，实际使用时可能需要查找真实标签
+      // Default label, actual use may need to look up real label
       mentionData: {},
       children: [{ text: "" }]
     };

package/dist/components/context-input/src/utils/text-extraction.js

@@ -32,9 +32,15 @@ const extractTextWithMentions = (nodes) => {
   }
   return { text, mentionsData };
 };
+const EMPTY_PARAGRAPH = [
+  { type: "paragraph", children: [{ text: "" }] }
+];
 const parseTextWithMentions = (text, mentions) => {
+  if (!text && text !== "") {
+    return EMPTY_PARAGRAPH;
+  }
   if (!mentions || mentions.length === 0) {
-    return [{ type: "paragraph", children: [{ text }] }];
+    return [{ type: "paragraph", children: [{ text: text || "" }] }];
   }
   const sortedMentions = [...mentions].sort((a, b) => a.startIndex - b.startIndex);
   const children = [];

package/dist/components/context-menu/src/context-menu.js

@@ -6,7 +6,10 @@ import { useEventCallback } from "usehooks-ts";
 const PORTAL_ROOT_ID = "floating-menu-root";
 const DEFAULT_OFFSET = 4;
 const ContextMenuContext = React.createContext(null);
-const ContextMenuTrigger = ({ children, ...props }) => {
+const ContextMenuTrigger = memo(function ContextMenuTrigger2({
+  children,
+  ...props
+}) {
   const contextMenu = useContext(ContextMenuContext);
   const handleContextMenu = useCallback(
     (e) => {
@@ -27,7 +30,8 @@ const ContextMenuTrigger = ({ children, ...props }) => {
       children
     }
   );
-};
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
 const ContextMenuComponent = memo(function ContextMenuComponent2(props) {
   const {
     children,
@@ -84,8 +88,10 @@ const ContextMenuComponent = memo(function ContextMenuComponent2(props) {
         apply(args) {
           var _a;
           const { elements, availableHeight } = args;
-          const contentHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || elements.floating.scrollHeight;
-          const maxHeight = Math.min(contentHeight, availableHeight);
+          const floatingScrollHeight = elements.floating.scrollHeight;
+          const scrollRefHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || 0;
+          const contentHeight = Math.max(floatingScrollHeight, scrollRefHeight);
+          const maxHeight = contentHeight > 0 ? Math.min(contentHeight, availableHeight) : availableHeight;
           Object.assign(elements.floating.style, {
             maxHeight: `${maxHeight}px`,
             display: "flex",

package/dist/components/dialog/dist/index.js

@@ -336,7 +336,7 @@ function useFloatingDialog({
           top: `${dragPosition.y}px`,
           left: `${dragPosition.x}px`,
           transform: "none",
-          // 拖拽时移除过渡动画
+          // Remove transition animation when dragging
           transition: "none"
         };
         if (resizeSize) {
@@ -769,7 +769,6 @@ var DialogComponent = memo(function DialogComponent2({
       isOpen: floating.innerOpen,
       onClose: floating.handleClose,
       ...backdropChild.props
-      // 保留原有的 props
     });
   }, [children, floating.innerOpen, floating.handleClose]);
   const footerContent = useMemo(() => {

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

@@ -138,7 +138,6 @@ const DialogComponent = memo(function DialogComponent2({
       isOpen: floating.innerOpen,
       onClose: floating.handleClose,
       ...backdropChild.props
-      // 保留原有的 props
     });
   }, [children, floating.innerOpen, floating.handleClose]);
   const footerContent = useMemo(() => {

package/dist/components/dialog/src/hooks/use-floating-dialog.js

@@ -107,7 +107,7 @@ function useFloatingDialog({
           top: `${dragPosition.y}px`,
           left: `${dragPosition.x}px`,
           transform: "none",
-          // 拖拽时移除过渡动画
+          // Remove transition animation when dragging
           transition: "none"
         };
         if (resizeSize) {

package/dist/components/dialog/src/index.d.ts

@@ -1,2 +1,3 @@
-export * from './dialog';
-export * from './types';
+export { Dialog } from './dialog';
+export type { DialogProps } from './dialog';
+export type { DialogPosition } from './types';

package/dist/components/dropdown/dist/index.d.ts

@@ -3,8 +3,7 @@ import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 interface DropdownProps {
     /**
-     * CoordinateMode, first item auto select
-     * 坐标模式下，是否自动选中第一个选项
+     * Whether to automatically select the first item in coordinate mode.
      * @default true
      */
     autoSelectFirstItem?: boolean;

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

@@ -29,7 +29,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
       returnFocus: false,
       modal: position ? false : true,
       ...position && { disabled: true }
-      // 坐标模式下禁用焦点管理
+      // Disable focus management in coordinate mode
     },
     root,
     variant = "default"
@@ -86,8 +86,10 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
         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);
+          const floatingScrollHeight = elements.floating.scrollHeight;
+          const scrollRefHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || 0;
+          const contentHeight = Math.max(floatingScrollHeight, scrollRefHeight);
+          const maxHeight = contentHeight > 0 ? Math.min(contentHeight, availableHeight) : availableHeight;
           Object.assign(elements.floating.style, {
             maxHeight: `${maxHeight}px`,
             display: "flex",
@@ -156,7 +158,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     ignoreMouse: isNested,
     stickIfOpen: false,
     enabled: !isCoordinateMode
-    // 坐标模式下禁用点击交互
+    // Disable click interaction in coordinate mode
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, {
@@ -195,11 +197,11 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     setScrollTop,
     touch,
     isSelect: false,
-    // Dropdown 不是 Select
+    // Dropdown is not a Select
     fallback: false,
-    // Dropdown 没有 fallback 机制
+    // Dropdown does not have fallback mechanism
     setInnerOffset: void 0
-    // Dropdown 不使用 innerOffset
+    // Dropdown does not use innerOffset
   });
   const handleTouchStart = useEventCallback(() => {
     setTouch(true);
@@ -219,6 +221,18 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
       setIsMouseOverMenu(false);
     }
   });
+  const handleFloatingKeyDown = useEventCallback((e) => {
+    if (activeIndex !== null && (e.key === "Enter" || e.key === "ArrowRight")) {
+      const activeElement = elementsRef.current[activeIndex];
+      if (activeElement) {
+        if (activeElement.getAttribute("aria-haspopup") === "menu") {
+          e.preventDefault();
+          e.stopPropagation();
+          activeElement.click();
+        }
+      }
+    }
+  });
   const handleFocus = useEventCallback(() => {
     if (isCoordinateMode) {
       return;
@@ -323,7 +337,8 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
                         ...getFloatingProps({
                           onContextMenu(e) {
                             e.preventDefault();
-                          }
+                          },
+                          onKeyDown: handleFloatingKeyDown
                         }),
                         children: [
                           /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: contentElement && cloneElement(contentElement, {

package/dist/components/dropdown/src/dropdown.d.ts

@@ -3,8 +3,7 @@ import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 export interface DropdownProps {
     /**
-     * CoordinateMode, first item auto select
-     * 坐标模式下，是否自动选中第一个选项
+     * Whether to automatically select the first item in coordinate mode.
      * @default true
      */
     autoSelectFirstItem?: boolean;

package/dist/components/dropdown/src/dropdown.js

@@ -29,7 +29,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
       returnFocus: false,
       modal: position ? false : true,
       ...position && { disabled: true }
-      // 坐标模式下禁用焦点管理
+      // Disable focus management in coordinate mode
     },
     root,
     variant = "default"
@@ -86,8 +86,10 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
         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);
+          const floatingScrollHeight = elements.floating.scrollHeight;
+          const scrollRefHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || 0;
+          const contentHeight = Math.max(floatingScrollHeight, scrollRefHeight);
+          const maxHeight = contentHeight > 0 ? Math.min(contentHeight, availableHeight) : availableHeight;
           Object.assign(elements.floating.style, {
             maxHeight: `${maxHeight}px`,
             display: "flex",
@@ -156,7 +158,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     ignoreMouse: isNested,
     stickIfOpen: false,
     enabled: !isCoordinateMode
-    // 坐标模式下禁用点击交互
+    // Disable click interaction in coordinate mode
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, {
@@ -195,11 +197,11 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     setScrollTop,
     touch,
     isSelect: false,
-    // Dropdown 不是 Select
+    // Dropdown is not a Select
     fallback: false,
-    // Dropdown 没有 fallback 机制
+    // Dropdown does not have fallback mechanism
     setInnerOffset: void 0
-    // Dropdown 不使用 innerOffset
+    // Dropdown does not use innerOffset
   });
   const handleTouchStart = useEventCallback(() => {
     setTouch(true);
@@ -219,6 +221,18 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
       setIsMouseOverMenu(false);
     }
   });
+  const handleFloatingKeyDown = useEventCallback((e) => {
+    if (activeIndex !== null && (e.key === "Enter" || e.key === "ArrowRight")) {
+      const activeElement = elementsRef.current[activeIndex];
+      if (activeElement) {
+        if (activeElement.getAttribute("aria-haspopup") === "menu") {
+          e.preventDefault();
+          e.stopPropagation();
+          activeElement.click();
+        }
+      }
+    }
+  });
   const handleFocus = useEventCallback(() => {
     if (isCoordinateMode) {
       return;
@@ -323,7 +337,8 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
                         ...getFloatingProps({
                           onContextMenu(e) {
                             e.preventDefault();
-                          }
+                          },
+                          onKeyDown: handleFloatingKeyDown
                         }),
                         children: [
                           /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: contentElement && cloneElement(contentElement, {

package/dist/components/emoji-picker/dist/index.d.ts

@@ -6,6 +6,38 @@ interface EmojiData {
     name: string;
     nameUrl: string;
 }
+type EmojiCategory = "frequently_used" | "smileys_people" | "animals_nature" | "food_drink" | "activities" | "travel_places" | "objects" | "symbols" | "flags";
+type VirtualItem = {
+    category: EmojiCategory;
+    title: string;
+    type: "header";
+} | {
+    emojis: EmojiData[];
+    type: "emojis";
+};
+interface UseEmojiDataProps {
+    columns: number;
+    searchQuery: string;
+    showFrequentlyUsed: boolean;
+}
+declare function useEmojiData({ searchQuery, columns, showFrequentlyUsed }: UseEmojiDataProps): {
+    categorizedData: VirtualItem[];
+    categoryIndexMap: Map<EmojiCategory, number>;
+    searchResults: {
+        id: number;
+        code: string;
+        emoji: string;
+        name: string;
+        nameUrl: string;
+    }[];
+    frequentlyUsed: EmojiData[];
+    addToFrequentlyUsed: (emojiId: number) => void;
+    findEmojiPosition: (emoji: EmojiData) => {
+        emojiIndex: number;
+        itemIndex: number;
+    } | null;
+    findEmojiByChar: (emojiChar: string) => EmojiData | null;
+};
 
 interface EmojiPickerProps {
     children?: React.ReactNode;
@@ -30,4 +62,4 @@ declare const emojis: {
     nameUrl: string;
 }[];
 
-export { type EmojiData, EmojiPicker, emojis };
+export { type EmojiData, EmojiPicker, type EmojiPickerProps, emojis, useEmojiData };

package/dist/components/emoji-picker/dist/index.js

@@ -12116,6 +12116,7 @@ var EmojiPicker = memo(function EmojiPicker2({
           {
             variant,
             className: tv.scroll(),
+            hoverBoundary: "none",
             children: /* @__PURE__ */ jsx(
               ScrollArea.Viewport,
               {
@@ -12195,5 +12196,6 @@ var EmojiPicker = memo(function EmojiPicker2({
 });
 export {
   EmojiPicker,
-  emojis
+  emojis,
+  useEmojiData
 };

package/dist/components/emoji-picker/src/emoji-picker.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { EmojiData } from './hooks';
-interface EmojiPickerProps {
+export interface EmojiPickerProps {
     children?: React.ReactNode;
     className?: string;
     columns?: number;

package/dist/components/emoji-picker/src/emoji-picker.js

@@ -43,7 +43,8 @@ const EmojiPicker = memo(function EmojiPicker2({
     categorizedData,
     categoryIndexMap,
     addToFrequentlyUsed,
-    findEmojiPosition
+    findEmojiPosition,
+    findEmojiByChar
   } = useEmojiData({
     searchQuery,
     columns,
@@ -132,6 +133,7 @@ const EmojiPicker = memo(function EmojiPicker2({
           {
             variant,
             className: tv.scroll(),
+            hoverBoundary: "none",
             children: /* @__PURE__ */ jsx(
               ScrollArea.Viewport,
               {

package/dist/components/emoji-picker/src/index.d.ts

@@ -1,3 +1,5 @@
 export { EmojiPicker } from './emoji-picker';
-export { emojis } from './utils';
+export type { EmojiPickerProps } from './emoji-picker';
+export { useEmojiData } from './hooks';
 export type { EmojiData } from './hooks';
+export { emojis } from './utils';