@zuzjs/ui 0.9.5 → 0.9.7

package/dist/esm/hooks/useResizeObserver.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 const useResizeObserver = (ref) => {
     const [size, setSize] = useState({ width: 0, height: 0, top: 0, left: 0 });
     useEffect(() => {
+        const _ref = ref instanceof HTMLElement ? ref : ref.current;
         const handleResize = (entries) => {
             for (let entry of entries) {
                 const { width, height, top, left } = entry.contentRect;
@@ -10,12 +11,12 @@ const useResizeObserver = (ref) => {
             }
         };
         const resizeObserver = new ResizeObserver(handleResize);
-        if (ref.current) {
-            resizeObserver.observe(ref.current);
+        if (_ref) {
+            resizeObserver.observe(_ref);
         }
         return () => {
-            if (ref.current) {
-                resizeObserver.unobserve(ref.current);
+            if (_ref) {
+                resizeObserver.unobserve(_ref);
             }
         };
     }, [ref]);

package/dist/esm/hooks/useScrollbar.js

@@ -13,60 +13,78 @@ const useScrollbar = (speed, breakpoints = {}) => {
     const dragStartY = useRef(0);
     const scrollStartY = useRef(0);
     const scrollStartX = useRef(0);
-    const thumbHeight = useRef(30); // Default min height
-    const thumbWidth = useRef(30); // Default min height
+    // No need for thumbHeight/Width refs if calculating them dynamically
+    // const thumbHeight = useRef(30);
+    // const thumbWidth = useRef(30);
+    // Animation frame ID for batching visual updates
+    const animationFrameId = useRef(null);
     const updateThumb = useCallback(() => {
         if (!containerRef.current || !thumbY.current || !thumbX.current)
             return;
         const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = containerRef.current;
-        //Y thumb
-        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, 30); // Min thumb size: 30px
-        thumbHeight.current = thumbSizeY;
-        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbSizeY);
+        // Y thumb calculations and update
+        const actualThumbMinHeight = 30; // Min thumb size: 30px
+        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, actualThumbMinHeight);
+        const maxThumbPosY = clientHeight - thumbSizeY;
+        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * maxThumbPosY;
         thumbY.current.style.height = `${thumbSizeY}px`;
-        thumbY.current.style.top = `${thumbPosY}px`;
-        //X thumb
-        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, 30); // Min thumb size: 30px
-        thumbWidth.current = thumbSizeX;
-        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbSizeX);
+        // *** KEY CHANGE: Use transform for positioning ***
+        thumbY.current.style.transform = `translateY(${thumbPosY}px)`;
+        thumbY.current.style.willChange = 'transform, height'; // Hint for browser
+        // X thumb calculations and update
+        const actualThumbMinWidth = 30; // Min thumb size: 30px
+        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, actualThumbMinWidth);
+        const maxThumbPosX = clientWidth - thumbSizeX;
+        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * maxThumbPosX;
         thumbX.current.style.width = `${thumbSizeX}px`;
-        thumbX.current.style.left = `${thumbPosX}px`;
-        if (thumbY.current.clientHeight == clientHeight && rootRef) {
-            rootRef.current?.classList.add(`--no-y`);
+        // *** KEY CHANGE: Use transform for positioning ***
+        thumbX.current.style.transform = `translateX(${thumbPosX}px)`;
+        thumbX.current.style.willChange = 'transform, width'; // Hint for browser
+        // Handle --no-y and --no-x classes (consider if these are strictly needed on every frame)
+        // These might still cause reflows, but less frequently than 'top'/'left'
+        if (scrollHeight <= clientHeight && rootRef.current) { // Use scrollHeight <= clientHeight for accurate check
+            rootRef.current.classList.add(`--no-y`);
         }
-        else
-            rootRef.current?.classList.remove(`--no-y`);
-        if (thumbX.current.clientWidth == clientWidth && rootRef) {
-            rootRef.current?.classList.add(`--no-x`);
+        else if (rootRef.current) {
+            rootRef.current.classList.remove(`--no-y`);
         }
-        else
-            rootRef.current?.classList.remove(`--no-x`);
-    }, []);
-    const postScroll = (scrollPercentY) => {
-        updateThumb();
-        // Trigger breakpoints
-        Object.keys(breakpoints).forEach((key) => {
-            const breakpoint = parseFloat(key);
-            if (Math.abs(scrollPercentY - breakpoint) < 1) {
-                breakpoints[breakpoint]?.();
+        if (scrollWidth <= clientWidth && rootRef.current) { // Use scrollWidth <= clientWidth for accurate check
+            rootRef.current.classList.add(`--no-x`);
+        }
+        else if (rootRef.current) {
+            rootRef.current.classList.remove(`--no-x`);
+        }
+    }, []); // Dependencies can be added here if needed, but often not for core calculations
+    // *** NEW: Central function to request a visual update via requestAnimationFrame ***
+    const requestVisualUpdate = useCallback(() => {
+        if (animationFrameId.current) {
+            cancelAnimationFrame(animationFrameId.current);
+        }
+        animationFrameId.current = requestAnimationFrame(() => {
+            updateThumb();
+            // Trigger breakpoints after the visual update for this frame
+            if (containerRef.current) {
+                const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+                const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
+                const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
+                Object.keys(breakpoints).forEach((key) => {
+                    const breakpoint = parseFloat(key);
+                    if (Math.abs(scrollPercentY - breakpoint) < 1) {
+                        breakpoints[breakpoint]?.();
+                    }
+                    if (Math.abs(scrollPercentX - breakpoint) < 1) { // Assuming breakpoints can be for X too
+                        breakpoints[breakpoint]?.();
+                    }
+                });
             }
         });
-    };
+    }, [updateThumb, breakpoints]);
     const handleScroll = useCallback(() => {
-        if (!containerRef.current
-        // || 
-        // (
-        //     typeof window !== `undefined` &&
-        //     window.document.body.classList.contains(`--no-scroll`)
-        // )
-        )
+        if (!containerRef.current)
             return;
-        const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
-        const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
-        const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
-        postScroll(scrollPercentY);
-        postScroll(scrollPercentX);
-    }, [breakpoints, updateThumb]);
+        // *** Call requestVisualUpdate instead of postScroll ***
+        requestVisualUpdate();
+    }, [requestVisualUpdate]);
     // Dragging logic
     const onScrollY = (e) => {
         isDraggingY.current = true;
@@ -85,30 +103,37 @@ const useScrollbar = (speed, breakpoints = {}) => {
             rootRef.current?.classList.add(`--scrolling`);
     };
     const handleDragMove = useCallback((e) => {
-        if (!containerRef.current || !thumbY.current || !thumbX.current)
+        if (!containerRef.current || (!isDraggingY.current && !isDraggingX.current))
             return;
         const { clientHeight, scrollHeight, clientWidth, scrollWidth } = containerRef.current;
         if (isDraggingY.current) {
             const maxScroll = scrollHeight - clientHeight;
-            const maxThumbMove = clientHeight - thumbHeight.current;
+            const thumbCurrentHeight = thumbY.current?.clientHeight || 30; // Use actual thumb height
+            const maxThumbMove = clientHeight - thumbCurrentHeight;
             const deltaY = e.clientY - dragStartY.current;
             const newScrollTop = Math.min(Math.max(scrollStartY.current + (deltaY / maxThumbMove) * maxScroll, 0), maxScroll);
             containerRef.current.scrollTop = newScrollTop;
+            // *** No direct updateThumb here, the scroll event listener will trigger requestVisualUpdate ***
         }
         if (isDraggingX.current) {
             const maxScrollX = scrollWidth - clientWidth;
-            const maxThumbMoveX = clientWidth - thumbWidth.current;
+            const thumbCurrentWidth = thumbX.current?.clientWidth || 30; // Use actual thumb width
+            const maxThumbMoveX = clientWidth - thumbCurrentWidth;
             const deltaX = e.clientX - dragStartX.current;
             const newScrollLeft = Math.min(Math.max(scrollStartX.current + (deltaX / maxThumbMoveX) * maxScrollX, 0), maxScrollX);
             containerRef.current.scrollLeft = newScrollLeft;
+            // *** No direct updateThumb here, the scroll event listener will trigger requestVisualUpdate ***
         }
-    }, []);
+    }, []); // No dependencies needed if current values are always fresh
     const handleDragEnd = () => {
         isDraggingY.current = false;
         isDraggingX.current = false;
         document.body.style.userSelect = "";
         if (rootRef.current)
             rootRef.current?.classList.remove(`--scrolling`);
+        if (animationFrameId.current) {
+            cancelAnimationFrame(animationFrameId.current); // Clear any pending rAF
+        }
     };
     const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
     const scrollToBottom = () => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: "smooth" });
@@ -119,49 +144,69 @@ const useScrollbar = (speed, breakpoints = {}) => {
         if (!container)
             return;
         const handleWheel = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+            // *** Passive listener means preventDefault is often not needed/effective here ***
+            // e.preventDefault();
+            // e.stopPropagation();
             if (!containerRef.current)
                 return;
-            // Adjust scrollTop manually based on deltaY
             const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+            let newScrollTop = scrollTop;
+            let newScrollLeft = scrollLeft;
+            let changed = false;
             if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
                 const maxScrollY = scrollHeight - clientHeight;
-                let newScrollTop = scrollTop + e.deltaY;
+                newScrollTop = scrollTop + e.deltaY * SCROLL_SPEED;
                 newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
-                containerRef.current.scrollTop = newScrollTop * SCROLL_SPEED;
+                if (newScrollTop !== scrollTop) {
+                    containerRef.current.scrollTop = newScrollTop;
+                    changed = true;
+                }
             }
-            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+            else { // Prefer deltaX if it's larger or if deltaY is 0
                 const maxScrollX = scrollWidth - clientWidth;
-                let newScrollLeft = scrollLeft + e.deltaX;
+                newScrollLeft = scrollLeft + e.deltaX * SCROLL_SPEED;
                 newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
-                containerRef.current.scrollLeft = newScrollLeft * SCROLL_SPEED;
+                if (newScrollLeft !== scrollLeft) {
+                    containerRef.current.scrollLeft = newScrollLeft;
+                    changed = true;
+                }
+            }
+            // *** Only request update if scroll position actually changed ***
+            if (changed) {
+                requestVisualUpdate();
             }
-            const scrollPercentY = (containerRef.current.scrollTop / (containerRef.current.scrollHeight - clientHeight)) * 100;
-            const scrollPercentX = (containerRef.current.scrollLeft / (containerRef.current.scrollWidth - clientWidth)) * 100;
-            postScroll(scrollPercentY);
-            postScroll(scrollPercentX);
         };
-        window.addEventListener("resize", updateThumb);
-        container.addEventListener("scroll", handleScroll);
-        // Prevent blocking default scrolling (fixes touchpad scrolling)
-        container.addEventListener("wheel", handleWheel, { passive: false });
+        window.addEventListener("resize", requestVisualUpdate); // Use requestVisualUpdate for resize
+        container.addEventListener("scroll", handleScroll, { passive: true }); // Make scroll passive if you don't preventDefault
+        container.addEventListener("wheel", handleWheel, { passive: true }); // Keep passive for wheel
         document.addEventListener("mousemove", handleDragMove);
         document.addEventListener("mouseup", handleDragEnd);
-        updateThumb();
+        // Initial update
+        requestVisualUpdate(); // Use requestVisualUpdate for initial render
         return () => {
-            window.removeEventListener("resize", updateThumb);
-            window.removeEventListener("wheel", handleWheel);
+            window.removeEventListener("resize", requestVisualUpdate);
             container.removeEventListener("scroll", handleScroll);
+            container.removeEventListener("wheel", handleWheel); // Corrected: remove from container
             document.removeEventListener("mousemove", handleDragMove);
             document.removeEventListener("mouseup", handleDragEnd);
+            if (animationFrameId.current) {
+                cancelAnimationFrame(animationFrameId.current); // Clean up any pending rAF
+            }
         };
-    }, [handleScroll, handleDragMove, updateThumb]);
-    useMutationObserver(containerRef.current, updateThumb);
+    }, [handleScroll, handleDragMove, requestVisualUpdate, SCROLL_SPEED]); // Added SCROLL_SPEED to deps
+    // *** NEW: Hook useMutationObserver to call requestVisualUpdate ***
+    useMutationObserver(containerRef.current, requestVisualUpdate);
     return {
-        rootRef, containerRef, thumbY, thumbX,
-        scrollToTop, scrollToBottom, scrollToLeft, scrollToRight,
-        onScrollY, onScrollX
+        rootRef,
+        containerRef,
+        thumbY,
+        thumbX,
+        scrollToTop,
+        scrollToBottom,
+        scrollToLeft,
+        scrollToRight,
+        onScrollY,
+        onScrollX,
     };
 };
 export default useScrollbar;

package/dist/esm/types/enums.d.ts

@@ -14,6 +14,8 @@ export declare enum FORMVALIDATION_STYLE {
     Dots = "DOTS"
 }
 export declare enum FORMVALIDATION {
+    IPV4 = "IPV4",
+    IPV6 = "IPV6",
     Email = "EMAIL",
     Uri = "URI",
     Password = "PASSWORD",

package/dist/esm/types/enums.js

@@ -19,6 +19,8 @@ export var FORMVALIDATION_STYLE;
 })(FORMVALIDATION_STYLE || (FORMVALIDATION_STYLE = {}));
 export var FORMVALIDATION;
 (function (FORMVALIDATION) {
+    FORMVALIDATION["IPV4"] = "IPV4";
+    FORMVALIDATION["IPV6"] = "IPV6";
     FORMVALIDATION["Email"] = "EMAIL";
     FORMVALIDATION["Uri"] = "URI";
     FORMVALIDATION["Password"] = "PASSWORD";

package/dist/esm/types/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { DragOptions } from "../hooks";
-import { SHIMMER, SORT, TRANSITIONS } from "./enums";
+import { Position, SHIMMER, SORT, TRANSITIONS } from "./enums";
 import { animationProps, Skeleton } from "./interfaces";
 export type Deprecated<T, M extends string> = T & {
     __deprecatedMessage?: M;
@@ -85,3 +85,4 @@ export type cssShortKeys = {
     sy: string | number;
     sz: string | number;
 };
+export type Direction = Position;