@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/rich-input/src/hooks/use-rich-input.js

@@ -1,8 +1,8 @@
-import { debounce } from "lodash-es";
-import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
 import { useEventCallback } from "usehooks-ts";
+const EMPTY_PARAGRAPH = [{ type: "paragraph", children: [{ text: "" }] }];
 const useRichInput = ({
   value,
   onChange,
@@ -11,35 +11,58 @@ const useRichInput = ({
   autoMoveToEnd
 }) => {
   const isUpdatingRef = useRef(false);
+  const debounceTimerRef = useRef(null);
   const [slateValue, setSlateValue] = useState(() => {
-    return value || [{ type: "paragraph", children: [{ text: "" }] }];
+    return value && Array.isArray(value) && value.length > 0 ? value : EMPTY_PARAGRAPH;
   });
   useEffect(() => {
-    if (!editor || !value || isUpdatingRef.current) {
+    if (!editor || !value || !Array.isArray(value) || isUpdatingRef.current) {
       return;
     }
     const needsUpdate = JSON.stringify(editor.children) !== JSON.stringify(value);
     if (needsUpdate) {
-      Editor.withoutNormalizing(editor, () => {
-        editor.children = value;
-        if (autoMoveToEnd) {
-          const endPoint = Editor.end(editor, []);
-          Transforms.select(editor, endPoint);
-        }
-        editor.onChange();
-      });
+      try {
+        Editor.withoutNormalizing(editor, () => {
+          editor.children = value;
+          if (autoMoveToEnd) {
+            try {
+              const endPoint = Editor.end(editor, []);
+              Transforms.select(editor, endPoint);
+            } catch {
+            }
+          }
+          ;
+          editor.onChange();
+        });
+      } catch {
+      }
       if (autoFocus) {
         setTimeout(() => {
-          ReactEditor.focus(editor);
+          try {
+            ReactEditor.focus(editor);
+          } catch {
+          }
         }, 0);
       }
       setSlateValue(value);
     }
   }, [value, editor, autoFocus, autoMoveToEnd]);
-  const debouncedOnChange = useMemo(
-    () => debounce((newValue) => {
-      onChange == null ? void 0 : onChange(newValue);
-    }, 100),
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  const debouncedOnChange = useCallback(
+    (newValue) => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        onChange == null ? void 0 : onChange(newValue);
+      }, 100);
+    },
     [onChange]
   );
   const handleChange = useCallback(

package/dist/components/rich-input/src/hooks/use-selection-events.js

@@ -12,8 +12,7 @@ const useSelectionEvents = (props) => {
     setIsCharactersStyleOpen,
     setIsParagraphStyleOpen,
     setIsUrlOpen,
-    setCharactersUrl,
-    isParagraphExpanded
+    setCharactersUrl
   } = props;
   const isDraggingRef = useRef(false);
   const selectionTimeoutRef = useRef(null);

package/dist/components/rich-input/src/index.d.ts

@@ -1,5 +1,3 @@
-export * from './rich-input';
-export * from './hooks';
-export * from './utils';
-export * from './components';
-export * from './context/rich-input-context';
+export { RichInput } from './rich-input';
+export type { RichInputProps } from './types';
+export { slateToMarkdown } from './utils';

package/dist/components/rich-input/src/rich-input-base.js

@@ -176,7 +176,7 @@ const RichInputBase = forwardRef((props, ref) => {
           orientation: "vertical",
           onScroll: updateFloating,
           children: children ? children : (
-            // 默认渲染 - 向后兼容
+            // Default render - backward compatible
             /* @__PURE__ */ jsx(RichInputViewport, { children: /* @__PURE__ */ jsx(RichInputEditableComponent, {}) })
           )
         }

package/dist/components/rich-input/src/utils/custom-options.js

@@ -1,4 +1,4 @@
-import { ParagraphBold, ParagraphItalic, ParagraphUnderline, ParagraphStrikethrough, ParagraphCode, ParagraphPilcrow, ParagraphQuote, ParagraphHeading1, ParagraphHeading2, ParagraphHeading3, ParagraphListOrdered, ParagraphList, ParagraphListTodo } from "@choiceform/icons-react";
+import { ParagraphPilcrow, ParagraphQuote, ParagraphCode, ParagraphHeading1, ParagraphHeading2, ParagraphHeading3, ParagraphListOrdered, ParagraphList, ParagraphListTodo, ParagraphBold, ParagraphItalic, ParagraphUnderline, ParagraphStrikethrough } from "@choiceform/icons-react";
 import React from "react";
 const charactersOptions = [
   {

package/dist/components/rich-input/src/utils/editor-utils.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element } from "slate";
+import { Transforms, Element, Editor } from "slate";
 const LIST_TYPES = ["numbered_list", "bulleted_list"];
 const CHECK_TYPES = ["check_list"];
 const toggleMark = (editor, format) => {

package/dist/components/rich-input/src/utils/markdown-to-slate.d.ts

@@ -1,6 +1,6 @@
 import { Descendant } from 'slate';
 /**
- * 将 Markdown 文本转换为 Slate.js 节点格式
- * 这是一个简化的实现，支持基本的 Markdown 语法
+ * Convert Markdown text to Slate.js node format
+ * A simplified implementation supporting basic Markdown syntax
  */
 export declare function markdownToSlate(markdown: string): Descendant[];

package/dist/components/rich-input/src/utils/slate-to-markdown.d.ts

@@ -1,5 +1,5 @@
 import { Descendant } from 'slate';
 /**
- * 将 Slate.js 的节点数据转换为 Markdown 格式
+ * Convert Slate.js node data to Markdown format
  */
 export declare function slateToMarkdown(nodes: Descendant[]): string;

package/dist/components/rich-input/src/utils/slate-to-markdown.js

@@ -1,8 +1,14 @@
 import { Text } from "slate";
 function slateToMarkdown(nodes) {
+  if (!nodes || !Array.isArray(nodes)) {
+    return "";
+  }
   return nodes.map((node) => serializeNode(node)).join("\n");
 }
 function serializeNode(node) {
+  if (!node) {
+    return "";
+  }
   if (Text.isText(node)) {
     return serializeText(node);
   }
@@ -51,6 +57,9 @@ function serializeNode(node) {
   }
 }
 function serializeChildren(children) {
+  if (!children || !Array.isArray(children)) {
+    return "";
+  }
   return children.map((child) => serializeNode(child)).join("");
 }
 function serializeText(text) {

package/dist/components/scroll-area/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 
 type ScrollbarVisibilityType = "auto" | "always" | "scroll" | "hover";
-type ScrollbarMode = "default" | "large-y" | "large-t" | "large-b" | "large-x" | "large-l" | "large-r";
+type ScrollbarMode = "default" | "padding-y" | "padding-x" | "padding-b" | "padding-t" | "padding-l" | "padding-r";
 type ScrollAreaVariant = "default" | "light" | "dark";
 type ScrollOrientation = "vertical" | "horizontal" | "both";
 type HoverBoundary = "none" | "hover";
@@ -14,24 +14,24 @@ interface ScrollState {
     scrollWidth: number;
 }
 /**
- * 滚动位置信息 - 简化版本，只提供核心数据
+ * Scroll position information - simplified version, only providing core data
  */
 interface ScrollPosition {
-    /** 水平滚动位置（0-1） */
+    /** Horizontal scroll position (0-1) */
     left: number;
-    /** 垂直滚动位置（0-1） */
+    /** Vertical scroll position (0-1) */
     top: number;
 }
 /**
- * Render prop函数类型
+ * Render prop function type
  */
 type ScrollAreaRenderProp = (position: ScrollPosition) => React.ReactNode;
 interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
-    /** 可访问名称 */
+    /** Accessible name */
     "aria-label"?: string;
-    /** 引用提供标签的元素ID */
+    /** Reference to the element ID providing the label */
     "aria-labelledby"?: string;
-    /** 标准children或render prop函数 */
+    /** Standard children or render prop function */
     children?: React.ReactNode | ScrollAreaRenderProp;
     hoverBoundary?: HoverBoundary;
     orientation?: ScrollOrientation;
@@ -56,7 +56,7 @@ declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & reac
 };
 
 /**
- * 合并的滚动状态和可见性管理 hook - 避免重复监听滚动事件
+ * Merged scroll state and visibility management hook - avoid duplicate scroll event listening
  */
 declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
     scrollState: ScrollState;
@@ -67,7 +67,7 @@ declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
 };
 
 /**
- * 缓存的 thumb 样式计算 hook
+ * Cached thumb style calculation hook
  */
 declare function useThumbStyle(scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     height: string;
@@ -81,7 +81,7 @@ declare function useThumbStyle(scrollState: ScrollState, orientation: "vertical"
     top?: undefined;
 };
 /**
- * 🚀 高性能 thumb 拖拽 hook - 优化拖拽响应性和性能
+ * 🚀 High-performance thumb drag hook - optimize drag responsiveness and performance
  */
 declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     isDragging: boolean;
@@ -89,11 +89,11 @@ declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: Scro
 };
 
 /**
- * 缓存的溢出检查 hook
+ * Cached overflow check hook
  */
 declare function useHasOverflow(scrollState: ScrollState, orientation: "vertical" | "horizontal"): boolean;
 /**
- * 缓存的滚动条显示判断 hook
+ * Cached scrollbar display judgment hook
  */
 declare function useScrollbarShouldShow(type: ScrollbarVisibilityType, hasOverflow: boolean, isScrolling: boolean, isHovering: boolean): boolean;
 
@@ -110,13 +110,13 @@ interface PerformanceMonitorOptions {
     logInterval?: number;
 }
 /**
- * 🔍 ScrollArea 性能监控 Hook
+ * 🔍 ScrollArea performance monitoring Hook
  *
- * 用于监控和诊断滚动性能问题，包括：
- * - 帧率监控
- * - 事件频率统计
- * - 性能瓶颈检测
- * - 实时性能报告
+ * Used to monitor and diagnose scroll performance issues, including:
+ * - Frame rate monitoring
+ * - Event frequency statistics
+ * - Performance bottleneck detection
+ * - Real-time performance reporting
  */
 declare function useScrollPerformanceMonitor(viewport: HTMLDivElement | null, options?: PerformanceMonitorOptions): PerformanceMetrics | null;
 

package/dist/components/scroll-area/dist/index.js

@@ -102,7 +102,7 @@ function useScrollStateAndVisibility(viewport) {
       passive: true,
       signal,
       capture: false
-      // 避免不必要的事件捕获
+      // Avoid unnecessary event capture
     });
     window.addEventListener("resize", handleResize, {
       passive: true,
@@ -144,10 +144,10 @@ function useScrollStateAndVisibility(viewport) {
         subtree: true,
         attributes: true,
         attributeFilter: ["style", "class"],
-        // 只监听影响布局的属性
+        // Only listen to attributes that affect layout
         characterData: true,
         characterDataOldValue: false,
-        // 不需要旧值，提升性能
+        // No need for old value, improve performance
         attributeOldValue: false
       });
     }
@@ -387,12 +387,12 @@ var ScrollTv = tcv({
       default: {
         scrollbar: "p-0.5"
       },
-      "large-y": {},
-      "large-t": {},
-      "large-b": {},
-      "large-x": {},
-      "large-l": {},
-      "large-r": {}
+      "padding-y": {},
+      "padding-t": {},
+      "padding-b": {},
+      "padding-x": {},
+      "padding-l": {},
+      "padding-r": {}
     },
     hoverBoundary: {
       none: {},
@@ -451,42 +451,42 @@ var ScrollTv = tcv({
     },
     {
       orientation: "vertical",
-      scrollbarMode: "large-y",
+      scrollbarMode: "padding-y",
       class: {
         scrollbar: "px-0.5 py-2"
       }
     },
     {
       orientation: "vertical",
-      scrollbarMode: "large-t",
+      scrollbarMode: "padding-t",
       class: {
         scrollbar: "px-0.5 pt-2"
       }
     },
     {
       orientation: "vertical",
-      scrollbarMode: "large-b",
+      scrollbarMode: "padding-b",
       class: {
         scrollbar: "px-0.5 pb-2"
       }
     },
     {
       orientation: "horizontal",
-      scrollbarMode: "large-x",
+      scrollbarMode: "padding-x",
       class: {
         scrollbar: "px-2 py-0.5"
       }
     },
     {
       orientation: "horizontal",
-      scrollbarMode: "large-l",
+      scrollbarMode: "padding-l",
       class: {
         scrollbar: "py-0.5 pl-2"
       }
     },
     {
       orientation: "horizontal",
-      scrollbarMode: "large-r",
+      scrollbarMode: "padding-r",
       class: {
         scrollbar: "py-0.5 pr-2"
       }
@@ -559,7 +559,7 @@ function shouldShowCorner(scrollState) {
 var ScrollAreaCorner = forwardRef(
   ({ className, ...props }, ref) => {
     const { scrollState, scrollbarMode, variant } = useScrollAreaContext();
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -582,7 +582,7 @@ var ScrollAreaCorner = forwardRef(
       "div",
       {
         ref,
-        className: tcx(tvConfig.corner(), className),
+        className: tcx(tv.corner(), className),
         style: cornerStyle,
         role: "presentation",
         "aria-hidden": "true",
@@ -629,7 +629,7 @@ var ScrollAreaScrollbar = forwardRef(
       },
       [viewport, scrollState, orientation]
     );
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -660,7 +660,7 @@ var ScrollAreaScrollbar = forwardRef(
       {
         ref: setRef,
         id: scrollbarId,
-        className: tcx(tvConfig.scrollbar(), className),
+        className: tcx(tv.scrollbar(), className),
         style: getScrollbarPositionStyle(orientation),
         onClick: handleTrackClick,
         role: "scrollbar",
@@ -682,7 +682,7 @@ var ScrollAreaThumb = forwardRef(
     const { viewport, scrollState, scrollbarMode, variant, setThumbX, setThumbY } = useScrollAreaContext();
     const { handleMouseDown } = useThumbDrag(viewport, scrollState, orientation);
     const thumbStyle = useThumbStyle(scrollState, orientation);
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -709,7 +709,7 @@ var ScrollAreaThumb = forwardRef(
       "div",
       {
         ref: setRef,
-        className: tcx(tvConfig.thumb(), className),
+        className: tcx(tv.thumb(), className),
         style: thumbStyle,
         onMouseDown: handleMouseDown,
         role: "button",
@@ -779,7 +779,7 @@ var ScrollAreaRoot = forwardRef(
         type: staticConfig.type,
         isHovering,
         isScrolling,
-        // 添加 ID 相关的值
+        // Add ID-related values
         rootId,
         viewportId,
         scrollbarXId,
@@ -802,7 +802,7 @@ var ScrollAreaRoot = forwardRef(
         scrollbarYId
       ]
     );
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -864,7 +864,7 @@ var ScrollAreaRoot = forwardRef(
       {
         ref,
         id: rootId,
-        className: tcx(tvConfig.root(), className),
+        className: tcx(tv.root(), className),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         "aria-label": ariaLabel,

package/dist/components/scroll-area/src/components/scroll-area-corner.js

@@ -7,7 +7,7 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ScrollAreaCorner = forwardRef(
   ({ className, ...props }, ref) => {
     const { scrollState, scrollbarMode, variant } = useScrollAreaContext();
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -30,7 +30,7 @@ const ScrollAreaCorner = forwardRef(
       "div",
       {
         ref,
-        className: tcx(tvConfig.corner(), className),
+        className: tcx(tv.corner(), className),
         style: cornerStyle,
         role: "presentation",
         "aria-hidden": "true",

package/dist/components/scroll-area/src/components/scroll-area-root.js

@@ -65,7 +65,7 @@ const ScrollAreaRoot = forwardRef(
         type: staticConfig.type,
         isHovering,
         isScrolling,
-        // 添加 ID 相关的值
+        // Add ID-related values
         rootId,
         viewportId,
         scrollbarXId,
@@ -88,7 +88,7 @@ const ScrollAreaRoot = forwardRef(
         scrollbarYId
       ]
     );
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -150,7 +150,7 @@ const ScrollAreaRoot = forwardRef(
       {
         ref,
         id: rootId,
-        className: tcx(tvConfig.root(), className),
+        className: tcx(tv.root(), className),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         "aria-label": ariaLabel,

package/dist/components/scroll-area/src/components/scroll-area-scrollbar.js

@@ -42,7 +42,7 @@ const ScrollAreaScrollbar = forwardRef(
       },
       [viewport, scrollState, orientation]
     );
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -73,7 +73,7 @@ const ScrollAreaScrollbar = forwardRef(
       {
         ref: setRef,
         id: scrollbarId,
-        className: tcx(tvConfig.scrollbar(), className),
+        className: tcx(tv.scrollbar(), className),
         style: getScrollbarPositionStyle(orientation),
         onClick: handleTrackClick,
         role: "scrollbar",

package/dist/components/scroll-area/src/components/scroll-area-thumb.js

@@ -9,7 +9,7 @@ const ScrollAreaThumb = forwardRef(
     const { viewport, scrollState, scrollbarMode, variant, setThumbX, setThumbY } = useScrollAreaContext();
     const { handleMouseDown } = useThumbDrag(viewport, scrollState, orientation);
     const thumbStyle = useThumbStyle(scrollState, orientation);
-    const tvConfig = useMemo(
+    const tv = useMemo(
       () => ScrollTv({
         variant,
         scrollbarMode,
@@ -36,7 +36,7 @@ const ScrollAreaThumb = forwardRef(
       "div",
       {
         ref: setRef,
-        className: tcx(tvConfig.thumb(), className),
+        className: tcx(tv.thumb(), className),
         style: thumbStyle,
         onMouseDown: handleMouseDown,
         role: "button",

package/dist/components/scroll-area/src/hooks/use-scroll-performance-monitor.d.ts

@@ -11,13 +11,13 @@ interface PerformanceMonitorOptions {
     logInterval?: number;
 }
 /**
- * 🔍 ScrollArea 性能监控 Hook
+ * 🔍 ScrollArea performance monitoring Hook
  *
- * 用于监控和诊断滚动性能问题，包括：
- * - 帧率监控
- * - 事件频率统计
- * - 性能瓶颈检测
- * - 实时性能报告
+ * Used to monitor and diagnose scroll performance issues, including:
+ * - Frame rate monitoring
+ * - Event frequency statistics
+ * - Performance bottleneck detection
+ * - Real-time performance reporting
  */
 export declare function useScrollPerformanceMonitor(viewport: HTMLDivElement | null, options?: PerformanceMonitorOptions): PerformanceMetrics | null;
 export {};

package/dist/components/scroll-area/src/hooks/use-scroll-performance-monitor.js

@@ -2,11 +2,11 @@ import { useState, useRef, useEffect } from "react";
 function useScrollPerformanceMonitor(viewport, options = {}) {
   const {
     enabled = false,
-    // 默认关闭，只在开发时启用
+    // Default disabled, only enabled in development
     logInterval = 5e3,
-    // 5秒报告一次
+    // Report every 5 seconds
     frameTimeThreshold = 16.67
-    // 60fps阈值
+    // 60fps threshold
   } = options;
   const [metrics, setMetrics] = useState({
     averageFrameTime: 0,

package/dist/components/scroll-area/src/hooks/use-scroll-state-and-visibility.d.ts

@@ -1,6 +1,6 @@
 import { ScrollState } from '../types';
 /**
- * 合并的滚动状态和可见性管理 hook - 避免重复监听滚动事件
+ * Merged scroll state and visibility management hook - avoid duplicate scroll event listening
  */
 export declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
     scrollState: ScrollState;

package/dist/components/scroll-area/src/hooks/use-scroll-state-and-visibility.js

@@ -92,7 +92,7 @@ function useScrollStateAndVisibility(viewport) {
       passive: true,
       signal,
       capture: false
-      // 避免不必要的事件捕获
+      // Avoid unnecessary event capture
     });
     window.addEventListener("resize", handleResize, {
       passive: true,
@@ -134,10 +134,10 @@ function useScrollStateAndVisibility(viewport) {
         subtree: true,
         attributes: true,
         attributeFilter: ["style", "class"],
-        // 只监听影响布局的属性
+        // Only listen to attributes that affect layout
         characterData: true,
         characterDataOldValue: false,
-        // 不需要旧值，提升性能
+        // No need for old value, improve performance
         attributeOldValue: false
       });
     }

package/dist/components/scroll-area/src/hooks/use-scrollbar.d.ts

@@ -1,9 +1,9 @@
 import { ScrollState, ScrollbarVisibilityType } from '../types';
 /**
- * 缓存的溢出检查 hook
+ * Cached overflow check hook
  */
 export declare function useHasOverflow(scrollState: ScrollState, orientation: "vertical" | "horizontal"): boolean;
 /**
- * 缓存的滚动条显示判断 hook
+ * Cached scrollbar display judgment hook
  */
 export declare function useScrollbarShouldShow(type: ScrollbarVisibilityType, hasOverflow: boolean, isScrolling: boolean, isHovering: boolean): boolean;

package/dist/components/scroll-area/src/hooks/use-thumb.d.ts

@@ -1,6 +1,6 @@
 import { ScrollState } from '../types';
 /**
- * 缓存的 thumb 样式计算 hook
+ * Cached thumb style calculation hook
  */
 export declare function useThumbStyle(scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     height: string;
@@ -14,7 +14,7 @@ export declare function useThumbStyle(scrollState: ScrollState, orientation: "ve
     top?: undefined;
 };
 /**
- * 🚀 高性能 thumb 拖拽 hook - 优化拖拽响应性和性能
+ * 🚀 High-performance thumb drag hook - optimize drag responsiveness and performance
  */
 export declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     isDragging: boolean;