@choice-ui/react 1.9.4 → 1.9.7

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

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from "react";
-function useScrollStateAndVisibility(viewport) {
+function useScrollStateAndVisibility(viewport, content) {
   const [scrollState, setScrollState] = useState({
     scrollLeft: 0,
     scrollTop: 0,
@@ -13,8 +13,6 @@ function useScrollStateAndVisibility(viewport) {
   const scrollTimeoutRef = useRef();
   const rafRef = useRef();
   const resizeObserverRef = useRef();
-  const mutationObserverRef = useRef();
-  const mutationTimeoutRef = useRef();
   const lastUpdateTimeRef = useRef(0);
   const minUpdateIntervalRef = useRef(16);
   const updateScrollState = useCallback(() => {
@@ -26,36 +24,36 @@ function useScrollStateAndVisibility(viewport) {
         cancelAnimationFrame(rafRef.current);
       }
       rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = void 0;
         updateScrollState();
       });
       return;
     }
     if (rafRef.current) {
       cancelAnimationFrame(rafRef.current);
+      rafRef.current = void 0;
     }
-    rafRef.current = requestAnimationFrame(() => {
-      const newState = {
-        scrollLeft: viewport.scrollLeft,
-        scrollTop: viewport.scrollTop,
-        scrollWidth: viewport.scrollWidth,
-        scrollHeight: viewport.scrollHeight,
-        clientWidth: viewport.clientWidth,
-        clientHeight: viewport.clientHeight
-      };
-      setScrollState((prevState) => {
-        const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
-        const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
-        const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
-        const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
-        const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
-        const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
-        const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
-        if (hasChanges) {
-          lastUpdateTimeRef.current = now;
-          return newState;
-        }
-        return prevState;
-      });
+    const newState = {
+      scrollLeft: viewport.scrollLeft,
+      scrollTop: viewport.scrollTop,
+      scrollWidth: viewport.scrollWidth,
+      scrollHeight: viewport.scrollHeight,
+      clientWidth: viewport.clientWidth,
+      clientHeight: viewport.clientHeight
+    };
+    setScrollState((prevState) => {
+      const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
+      const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
+      const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
+      const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
+      const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
+      const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
+      const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
+      if (hasChanges) {
+        lastUpdateTimeRef.current = now;
+        return newState;
+      }
+      return prevState;
     });
   }, [viewport]);
   const delayedUpdateScrollState = useCallback(() => {
@@ -92,54 +90,19 @@ function useScrollStateAndVisibility(viewport) {
       passive: true,
       signal,
       capture: false
-      // Avoid unnecessary event capture
     });
     window.addEventListener("resize", handleResize, {
       passive: true,
       signal
     });
     if (window.ResizeObserver) {
-      resizeObserverRef.current = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          if (entry.target === viewport) {
-            updateScrollState();
-            break;
-          }
-        }
+      resizeObserverRef.current = new ResizeObserver(() => {
+        updateScrollState();
       });
       resizeObserverRef.current.observe(viewport);
-    }
-    if (window.MutationObserver) {
-      mutationObserverRef.current = new MutationObserver((mutations) => {
-        const hasLayoutChanges = mutations.some((mutation) => {
-          if (mutation.type === "childList") {
-            return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
-          }
-          if (mutation.type === "attributes") {
-            const attr = mutation.attributeName;
-            return attr === "style" || attr === "class";
-          }
-          return mutation.type === "characterData";
-        });
-        if (!hasLayoutChanges) return;
-        if (mutationTimeoutRef.current) {
-          clearTimeout(mutationTimeoutRef.current);
-        }
-        mutationTimeoutRef.current = window.setTimeout(() => {
-          updateScrollState();
-        }, 16);
-      });
-      mutationObserverRef.current.observe(viewport, {
-        childList: true,
-        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
-      });
+      if (content) {
+        resizeObserverRef.current.observe(content);
+      }
     }
     delayedUpdateScrollState();
     return () => {
@@ -148,10 +111,6 @@ function useScrollStateAndVisibility(viewport) {
         clearTimeout(scrollTimeoutRef.current);
         scrollTimeoutRef.current = void 0;
       }
-      if (mutationTimeoutRef.current) {
-        clearTimeout(mutationTimeoutRef.current);
-        mutationTimeoutRef.current = void 0;
-      }
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
         rafRef.current = void 0;
@@ -160,12 +119,8 @@ function useScrollStateAndVisibility(viewport) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = void 0;
       }
-      if (mutationObserverRef.current) {
-        mutationObserverRef.current.disconnect();
-        mutationObserverRef.current = void 0;
-      }
     };
-  }, [viewport, handleScroll, delayedUpdateScrollState]);
+  }, [viewport, content, handleScroll, delayedUpdateScrollState, updateScrollState]);
   const handleMouseEnter = useCallback(() => setIsHovering(true), []);
   const handleMouseLeave = useCallback(() => setIsHovering(false), []);
   return {

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

@@ -14,7 +14,7 @@ export declare function useThumbStyle(scrollState: ScrollState, orientation: "ve
     top?: undefined;
 };
 /**
- * 🚀 High-performance thumb drag hook - optimize drag responsiveness and performance
+ * High-performance thumb drag hook
  */
 export declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
     isDragging: boolean;

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

@@ -42,16 +42,13 @@ function useThumbDrag(viewport, scrollState, orientation) {
   const isDragging = useRef(false);
   const startPos = useRef(0);
   const startScroll = useRef(0);
-  const rafId = useRef();
   const cleanupRef = useRef(null);
+  const scrollStateRef = useRef(scrollState);
+  scrollStateRef.current = scrollState;
   const dragContextRef = useRef(null);
   useEffect(() => {
     return () => {
       isDragging.current = false;
-      if (rafId.current) {
-        cancelAnimationFrame(rafId.current);
-        rafId.current = void 0;
-      }
       if (cleanupRef.current) {
         cleanupRef.current();
         cleanupRef.current = null;
@@ -61,13 +58,21 @@ function useThumbDrag(viewport, scrollState, orientation) {
   const handleMouseDown = useCallback(
     (e) => {
       if (!viewport) return;
+      const currentScrollState = scrollStateRef.current;
       const target = e.currentTarget;
       const scrollbar = target.closest('[role="scrollbar"]');
       if (!scrollbar) return;
       const scrollbarRect = scrollbar.getBoundingClientRect();
-      const scrollableRange = orientation === "vertical" ? Math.max(0, scrollState.scrollHeight - scrollState.clientHeight) : Math.max(0, scrollState.scrollWidth - scrollState.clientWidth);
+      const scrollableRange = orientation === "vertical" ? Math.max(0, currentScrollState.scrollHeight - currentScrollState.clientHeight) : Math.max(0, currentScrollState.scrollWidth - currentScrollState.clientWidth);
       const scrollbarRange = orientation === "vertical" ? scrollbarRect.height : scrollbarRect.width;
       if (scrollableRange <= 0 || scrollbarRange <= 0) return;
+      const thumbFraction = Math.max(
+        0.1,
+        orientation === "vertical" ? currentScrollState.clientHeight / currentScrollState.scrollHeight : currentScrollState.clientWidth / currentScrollState.scrollWidth
+      );
+      const thumbSizePixels = scrollbarRange * thumbFraction;
+      const effectiveTrackRange = scrollbarRange - thumbSizePixels;
+      if (effectiveTrackRange <= 0) return;
       dragContextRef.current = {
         scrollbarRect,
         scrollableRange,
@@ -75,34 +80,26 @@ function useThumbDrag(viewport, scrollState, orientation) {
       };
       isDragging.current = true;
       startPos.current = orientation === "vertical" ? e.clientY : e.clientX;
-      startScroll.current = orientation === "vertical" ? scrollState.scrollTop : scrollState.scrollLeft;
-      const scrollRatio = scrollableRange / scrollbarRange;
+      startScroll.current = orientation === "vertical" ? currentScrollState.scrollTop : currentScrollState.scrollLeft;
+      const scrollRatio = scrollableRange / effectiveTrackRange;
       const handleMouseMove = (e2) => {
         if (!isDragging.current || !viewport || !dragContextRef.current) return;
-        if (rafId.current) {
-          cancelAnimationFrame(rafId.current);
+        const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
+        const delta = currentPos - startPos.current;
+        const scrollDelta = delta * scrollRatio;
+        const newScrollValue = Math.max(
+          0,
+          Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
+        );
+        if (orientation === "vertical") {
+          viewport.scrollTop = newScrollValue;
+        } else {
+          viewport.scrollLeft = newScrollValue;
         }
-        rafId.current = requestAnimationFrame(() => {
-          const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
-          const delta = currentPos - startPos.current;
-          const scrollDelta = delta * scrollRatio;
-          const newScrollValue = Math.max(
-            0,
-            Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
-          );
-          if (orientation === "vertical") {
-            viewport.scrollTop = newScrollValue;
-          } else {
-            viewport.scrollLeft = newScrollValue;
-          }
-        });
       };
       const handleMouseUp = () => {
         isDragging.current = false;
         dragContextRef.current = null;
-        if (rafId.current) {
-          cancelAnimationFrame(rafId.current);
-        }
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
         cleanupRef.current = null;
@@ -116,7 +113,7 @@ function useThumbDrag(viewport, scrollState, orientation) {
       document.addEventListener("mouseup", handleMouseUp, { passive: true });
       e.preventDefault();
     },
-    [viewport, orientation, scrollState]
+    [viewport, orientation]
   );
   return {
     isDragging: isDragging.current,

package/dist/components/scroll-area/src/types.d.ts

@@ -24,14 +24,22 @@ export interface ScrollPosition {
  * Render prop function type
  */
 export type ScrollAreaRenderProp = (position: ScrollPosition) => React.ReactNode;
-export interface ScrollAreaContextType {
-    content: HTMLDivElement | null;
-    hoverBoundary: HoverBoundary;
+/**
+ * Frequently changing state — triggers re-renders on scroll
+ */
+export interface ScrollAreaStateContextType {
     isHovering: boolean;
     isScrolling: boolean;
+    scrollState: ScrollState;
+}
+/**
+ * Rarely changing config, refs, setters — does NOT change on scroll
+ */
+export interface ScrollAreaConfigContextType {
+    content: HTMLDivElement | null;
+    hoverBoundary: HoverBoundary;
     orientation: ScrollOrientation;
     rootId: string;
-    scrollState: ScrollState;
     scrollbarMode: ScrollbarMode;
     scrollbarX: HTMLDivElement | null;
     scrollbarXId: string;
@@ -50,6 +58,10 @@ export interface ScrollAreaContextType {
     viewport: HTMLDivElement | null;
     viewportId: string;
 }
+/**
+ * Combined context type for components that need both state and config
+ */
+export type ScrollAreaContextType = ScrollAreaStateContextType & ScrollAreaConfigContextType;
 export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
     /** Accessible name */
     "aria-label"?: string;

package/dist/index.js

@@ -233,7 +233,6 @@ import { ScrollArea } from "./components/scroll-area/src/scroll-area.js";
 import { useScrollStateAndVisibility } from "./components/scroll-area/src/hooks/use-scroll-state-and-visibility.js";
 import { useThumbDrag, useThumbStyle } from "./components/scroll-area/src/hooks/use-thumb.js";
 import { useHasOverflow, useScrollbarShouldShow } from "./components/scroll-area/src/hooks/use-scrollbar.js";
-import { useScrollPerformanceMonitor } from "./components/scroll-area/src/hooks/use-scroll-performance-monitor.js";
 import { SearchInput } from "./components/search-input/src/search-input.js";
 import { Segmented } from "./components/segmented/src/segmented.js";
 import { Select } from "./components/select/src/select.js";
@@ -770,7 +769,6 @@ export {
   useRangeContext,
   useRangeTupleContext,
   useRenderData,
-  useScrollPerformanceMonitor,
   useScrollStateAndVisibility,
   useScrollbarShouldShow,
   useSlot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.9.4",
+  "version": "1.9.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",

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

@@ -1,23 +0,0 @@
-interface PerformanceMetrics {
-    averageFrameTime: number;
-    droppedFrames: number;
-    maxFrameTime: number;
-    scrollEventFrequency: number;
-    updateFrequency: number;
-}
-interface PerformanceMonitorOptions {
-    enabled?: boolean;
-    frameTimeThreshold?: number;
-    logInterval?: number;
-}
-/**
- * 🔍 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

@@ -1,123 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-function useScrollPerformanceMonitor(viewport, options = {}) {
-  const {
-    enabled = false,
-    // Default disabled, only enabled in development
-    logInterval = 5e3,
-    // Report every 5 seconds
-    frameTimeThreshold = 16.67
-    // 60fps threshold
-  } = options;
-  const [metrics, setMetrics] = useState({
-    averageFrameTime: 0,
-    maxFrameTime: 0,
-    droppedFrames: 0,
-    scrollEventFrequency: 0,
-    updateFrequency: 0
-  });
-  const countersRef = useRef({
-    frameCount: 0,
-    totalFrameTime: 0,
-    scrollEventCount: 0,
-    updateCount: 0,
-    lastReportTime: 0,
-    maxFrameTime: 0,
-    droppedFrames: 0
-  });
-  const lastFrameTimeRef = useRef(0);
-  const reportIntervalRef = useRef();
-  const updateIntervalRef = useRef();
-  useEffect(() => {
-    if (!enabled || !viewport) return;
-    const startTime = performance.now();
-    countersRef.current.lastReportTime = startTime;
-    const handleScroll = () => {
-      countersRef.current.scrollEventCount++;
-    };
-    const monitorFrame = () => {
-      const now = performance.now();
-      if (lastFrameTimeRef.current > 0) {
-        const frameTime = now - lastFrameTimeRef.current;
-        countersRef.current.totalFrameTime += frameTime;
-        countersRef.current.frameCount++;
-        if (frameTime > countersRef.current.maxFrameTime) {
-          countersRef.current.maxFrameTime = frameTime;
-        }
-        if (frameTime > frameTimeThreshold) {
-          countersRef.current.droppedFrames++;
-        }
-      }
-      lastFrameTimeRef.current = now;
-      countersRef.current.updateCount++;
-      requestAnimationFrame(monitorFrame);
-    };
-    viewport.addEventListener("scroll", handleScroll, { passive: true });
-    requestAnimationFrame(monitorFrame);
-    updateIntervalRef.current = window.setInterval(() => {
-      const now = performance.now();
-      const timeElapsed = Math.max(1, now - (countersRef.current.lastReportTime || startTime));
-      const currentMetrics = {
-        averageFrameTime: countersRef.current.frameCount > 0 ? countersRef.current.totalFrameTime / countersRef.current.frameCount : 0,
-        maxFrameTime: countersRef.current.maxFrameTime,
-        droppedFrames: countersRef.current.droppedFrames,
-        scrollEventFrequency: countersRef.current.scrollEventCount / timeElapsed * 1e3,
-        updateFrequency: countersRef.current.updateCount / timeElapsed * 1e3
-      };
-      setMetrics(currentMetrics);
-    }, 500);
-    reportIntervalRef.current = window.setInterval(() => {
-      const now = performance.now();
-      const timeElapsed = now - countersRef.current.lastReportTime;
-      const reportMetrics = {
-        averageFrameTime: countersRef.current.frameCount > 0 ? countersRef.current.totalFrameTime / countersRef.current.frameCount : 0,
-        maxFrameTime: countersRef.current.maxFrameTime,
-        droppedFrames: countersRef.current.droppedFrames,
-        scrollEventFrequency: countersRef.current.scrollEventCount / timeElapsed * 1e3,
-        updateFrequency: countersRef.current.updateCount / timeElapsed * 1e3
-      };
-      console.group("🔍 ScrollArea Performance Report");
-      console.log("📊 Frame Performance:");
-      console.log(`  • Average frame time: ${reportMetrics.averageFrameTime.toFixed(2)}ms`);
-      console.log(`  • Max frame time: ${reportMetrics.maxFrameTime.toFixed(2)}ms`);
-      console.log(`  • Dropped frames: ${reportMetrics.droppedFrames}`);
-      console.log(`  • Current FPS: ${(1e3 / reportMetrics.averageFrameTime).toFixed(1)}`);
-      console.log("⚡ Event Frequency:");
-      console.log(`  • Scroll events/sec: ${reportMetrics.scrollEventFrequency.toFixed(1)}`);
-      console.log(`  • Updates/sec: ${reportMetrics.updateFrequency.toFixed(1)}`);
-      if (reportMetrics.averageFrameTime > frameTimeThreshold) {
-        console.warn("⚠️ Performance Warning: Average frame time exceeds 60fps threshold");
-      }
-      if (reportMetrics.droppedFrames > 10) {
-        console.warn("⚠️ Performance Warning: High number of dropped frames detected");
-      }
-      if (reportMetrics.scrollEventFrequency > 200) {
-        console.warn(
-          "⚠️ Performance Warning: Very high scroll event frequency, consider throttling"
-        );
-      }
-      console.groupEnd();
-      countersRef.current = {
-        frameCount: 0,
-        totalFrameTime: 0,
-        scrollEventCount: 0,
-        updateCount: 0,
-        lastReportTime: now,
-        maxFrameTime: 0,
-        droppedFrames: 0
-      };
-    }, logInterval);
-    return () => {
-      viewport.removeEventListener("scroll", handleScroll);
-      if (reportIntervalRef.current) {
-        clearInterval(reportIntervalRef.current);
-      }
-      if (updateIntervalRef.current) {
-        clearInterval(updateIntervalRef.current);
-      }
-    };
-  }, [enabled, viewport, logInterval, frameTimeThreshold]);
-  return enabled ? metrics : null;
-}
-export {
-  useScrollPerformanceMonitor
-};