@vnejs/uis.react.scrollbar 0.1.12 → 0.2.1

package/dist/Scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAuB3D,eAAO,MAAM,SAAS,oHAWnB,cAAc,gCA2DhB,CAAC"}
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA6B3D,eAAO,MAAM,SAAS,oHAWnB,cAAc,gCAmEhB,CAAC"}

package/dist/Scrollbar.js

@@ -2,15 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
 import { getVneLength } from "@vnejs/uis.utils";
 import { useThumbHook } from "./hooks/thumb.hook";
+import { useTrackClickHook } from "./hooks/track-click.hook";
 import { useScrollHook } from "./hooks/scroll.hook";
 import { useScrollToHook } from "./hooks/scroll-to.hook";
 import { useRefForScrollHook } from "./hooks/ref.hook";
 import { b } from "./Scrollbar.styles.js";
-const renderScroll = (thumbRef, isVisible, isHorizontal, isVertical) => (_jsx("div", { className: b("scroll", { isVisible, isHorizontal, isVertical }), children: _jsx("div", { className: b("thumb", { isHorizontal, isVertical }), ref: thumbRef }) }));
+const renderScroll = (trackRef, thumbRef, isVisible, isHorizontal, isVertical) => (_jsx("div", { className: b("scroll", { isVisible, isHorizontal, isVertical }), ref: trackRef, "vne-cursor-type": isVisible ? "pointer" : "", children: _jsx("div", { className: b("thumb", { isHorizontal, isVertical }), ref: thumbRef }) }));
 export const Scrollbar = ({ className = "", children, width = 0, height = 0, scrollTo = 0, scrollToEnd = false, hideScrolbars = false, disableScroll = false, wrapRef = null, textSize = null, }) => {
-    const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
+    const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef, trackHorizontalRef, trackVerticalRef, } = useRefForScrollHook();
     const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
     useThumbHook(scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef);
+    useTrackClickHook(scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef);
     useScrollToHook(scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef);
     const style = useMemo(() => {
         const result = {};
@@ -42,6 +44,6 @@ export const Scrollbar = ({ className = "", children, width = 0, height = 0, scr
         if (wrapRef)
             wrapRef.current = scrollbarWrapRef.current;
     }, [wrapRef, scrollbarWrapRef.current]);
-    return (_jsxs("div", { className: b({}, [className]), style: style, children: [!hideScrolbars && renderScroll(thumbHorizontalRef, shouldRenderHorizontal, true, false), !hideScrolbars && renderScroll(thumbVerticalRef, shouldRenderVertical, false, true), _jsx("div", { className: b("wrap"), ref: scrollbarWrapRef, style: styleWrap, children: _jsx("div", { className: b("children"), ref: scrollbarChildrenRef, children: children }) })] }));
+    return (_jsxs("div", { className: b({}, [className]), style: style, children: [!hideScrolbars && renderScroll(trackHorizontalRef, thumbHorizontalRef, shouldRenderHorizontal, true, false), !hideScrolbars && renderScroll(trackVerticalRef, thumbVerticalRef, shouldRenderVertical, false, true), _jsx("div", { className: b("wrap"), ref: scrollbarWrapRef, style: styleWrap, children: _jsx("div", { className: b("children"), ref: scrollbarChildrenRef, children: children }) })] }));
 };
 //# sourceMappingURL=Scrollbar.js.map

package/dist/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}

package/dist/Scrollbar.styles.js

@@ -18,6 +18,7 @@ ${sel(b("scroll"))} {
   transition: 1000ms;
   border-radius: ${getVneLength(8)};
   opacity: 0;
+  pointer-events: none;
 }
 
 ${sel(b("thumb"))} {
@@ -56,6 +57,7 @@ ${sel(b("thumb", { isHorizontal: true }))} {
 
 ${sel(b("scroll", { isVisible: true }))} {
   opacity: 1;
+  pointer-events: auto;
 }
 `;
 injectStyles(CSS);

package/dist/Scrollbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.styles.js","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;;;;EAId,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;;;mBAGC,YAAY,CAAC,CAAC,CAAC;;;;EAIhC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;mBAGE,YAAY,CAAC,EAAE,CAAC;;;EAGjC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC7B,YAAY,CAAC,CAAC,EAAE,CAAC;;YAEhB,YAAY,CAAC,EAAE,CAAC;WACjB,YAAY,CAAC,EAAE,CAAC;;;;EAIzB,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC5B,YAAY,CAAC,CAAC,CAAC,CAAC;WAChB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9B,YAAY,CAAC,CAAC,EAAE,CAAC;;WAElB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC,CAAC;WACd,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGtC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Scrollbar.styles.js","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;;;;EAId,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;;;mBAGC,YAAY,CAAC,CAAC,CAAC;;;;;EAKhC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;mBAGE,YAAY,CAAC,EAAE,CAAC;;;EAGjC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC7B,YAAY,CAAC,CAAC,EAAE,CAAC;;YAEhB,YAAY,CAAC,EAAE,CAAC;WACjB,YAAY,CAAC,EAAE,CAAC;;;;EAIzB,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC5B,YAAY,CAAC,CAAC,CAAC,CAAC;WAChB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9B,YAAY,CAAC,CAAC,EAAE,CAAC;;WAElB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC,CAAC;WACd,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;CAItC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/dist/hooks/ref.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ref.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,eAAO,MAAM,mBAAmB,QAAO,yBAQtC,CAAC"}
+{"version":3,"file":"ref.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,eAAO,MAAM,mBAAmB,QAAO,yBAiBtC,CAAC"}

package/dist/hooks/ref.hook.js

@@ -4,6 +4,15 @@ export const useRefForScrollHook = () => {
     const scrollbarChildrenRef = useRef(null);
     const thumbVerticalRef = useRef(null);
     const thumbHorizontalRef = useRef(null);
-    return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
+    const trackVerticalRef = useRef(null);
+    const trackHorizontalRef = useRef(null);
+    return {
+        scrollbarWrapRef,
+        scrollbarChildrenRef,
+        thumbVerticalRef,
+        thumbHorizontalRef,
+        trackVerticalRef,
+        trackHorizontalRef,
+    };
 };
 //# sourceMappingURL=ref.hook.js.map

package/dist/hooks/ref.hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref.hook.js","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAA8B,EAAE;IACjE,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;AAC1F,CAAC,CAAC"}
+{"version":3,"file":"ref.hook.js","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAA8B,EAAE;IACjE,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,OAAO;QACL,gBAAgB;QAChB,oBAAoB;QACpB,gBAAgB;QAChB,kBAAkB;QAClB,gBAAgB;QAChB,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC"}

package/dist/hooks/ref.hook.types.d.ts

@@ -4,6 +4,8 @@ export type ScrollbarRefs = {
     scrollbarChildrenRef: RefObject<HTMLDivElement | null>;
     thumbVerticalRef: RefObject<HTMLDivElement | null>;
     thumbHorizontalRef: RefObject<HTMLDivElement | null>;
+    trackVerticalRef: RefObject<HTMLDivElement | null>;
+    trackHorizontalRef: RefObject<HTMLDivElement | null>;
 };
 export type UseRefForScrollHookReturn = ScrollbarRefs;
 //# sourceMappingURL=ref.hook.types.d.ts.map

package/dist/hooks/ref.hook.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ref.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,oBAAoB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC"}
+{"version":3,"file":"ref.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,oBAAoB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,gBAAgB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC"}

package/dist/hooks/track-click.hook.d.ts

@@ -0,0 +1,3 @@
+import { type UseTrackClickHook } from "./track-click.hook.types.js";
+export declare const useTrackClickHook: UseTrackClickHook;
+//# sourceMappingURL=track-click.hook.d.ts.map

package/dist/hooks/track-click.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-click.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/track-click.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAgBrE,eAAO,MAAM,iBAAiB,EAAE,iBA8C/B,CAAC"}

package/dist/hooks/track-click.hook.js

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const getScrollFromTrackClick = (clickOffset, trackSize, thumbSize, maxScroll) => {
+    if (maxScroll <= 0 || trackSize <= 0)
+        return 0;
+    const travel = trackSize - thumbSize;
+    if (travel <= 0)
+        return 0;
+    const ratio = clamp((clickOffset - thumbSize / 2) / travel, 0, 1);
+    return ratio * maxScroll;
+};
+export const useTrackClickHook = (scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef) => {
+    useEffect(() => {
+        const wrap = scrollbarWrapRef.current;
+        const trackVertical = trackVerticalRef.current;
+        const trackHorizontal = trackHorizontalRef.current;
+        if (!wrap)
+            return;
+        const handleVerticalPointerDown = (event) => {
+            const thumb = thumbVerticalRef.current;
+            if (!trackVertical || !thumb)
+                return;
+            if (thumb.contains(event.target))
+                return;
+            const clickOffset = event.clientY - trackVertical.getBoundingClientRect().top;
+            const maxScroll = wrap.scrollHeight - wrap.clientHeight;
+            wrap.scrollTop = getScrollFromTrackClick(clickOffset, trackVertical.clientHeight, thumb.clientHeight, maxScroll);
+        };
+        const handleHorizontalPointerDown = (event) => {
+            const thumb = thumbHorizontalRef.current;
+            if (!trackHorizontal || !thumb)
+                return;
+            if (thumb.contains(event.target))
+                return;
+            const clickOffset = event.clientX - trackHorizontal.getBoundingClientRect().left;
+            const maxScroll = wrap.scrollWidth - wrap.clientWidth;
+            wrap.scrollLeft = getScrollFromTrackClick(clickOffset, trackHorizontal.clientWidth, thumb.clientWidth, maxScroll);
+        };
+        trackVertical?.addEventListener("pointerdown", handleVerticalPointerDown);
+        trackHorizontal?.addEventListener("pointerdown", handleHorizontalPointerDown);
+        return () => {
+            trackVertical?.removeEventListener("pointerdown", handleVerticalPointerDown);
+            trackHorizontal?.removeEventListener("pointerdown", handleHorizontalPointerDown);
+        };
+    }, [scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef]);
+};
+//# sourceMappingURL=track-click.hook.js.map

package/dist/hooks/track-click.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-click.hook.js","sourceRoot":"","sources":["../../src/hooks/track-click.hook.ts"],"names":[],"mappings":"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"}

package/dist/hooks/track-click.hook.types.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+export type UseTrackClickHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
+export type UseTrackClickHookTrackRef = RefObject<HTMLDivElement | null>;
+export type UseTrackClickHookThumbRef = RefObject<HTMLDivElement | null>;
+export type UseTrackClickHookParams = [
+    scrollbarWrapRef: UseTrackClickHookScrollbarWrapRef,
+    trackVerticalRef: UseTrackClickHookTrackRef,
+    trackHorizontalRef: UseTrackClickHookTrackRef,
+    thumbVerticalRef: UseTrackClickHookThumbRef,
+    thumbHorizontalRef: UseTrackClickHookThumbRef
+];
+export type UseTrackClickHook = (...args: UseTrackClickHookParams) => void;
+//# sourceMappingURL=track-click.hook.types.d.ts.map

package/dist/hooks/track-click.hook.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-click.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/track-click.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,iCAAiC,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AACjF,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AACzE,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAEzE,MAAM,MAAM,uBAAuB,GAAG;IACpC,gBAAgB,EAAE,iCAAiC;IACnD,gBAAgB,EAAE,yBAAyB;IAC3C,kBAAkB,EAAE,yBAAyB;IAC7C,gBAAgB,EAAE,yBAAyB;IAC3C,kBAAkB,EAAE,yBAAyB;CAC9C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC"}

package/dist/hooks/track-click.hook.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=track-click.hook.types.js.map

package/dist/hooks/track-click.hook.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-click.hook.types.js","sourceRoot":"","sources":["../../src/hooks/track-click.hook.types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/uis.react.scrollbar",
-  "version": "0.1.12",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -10,7 +10,7 @@
     "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "peerDependencies": {
-    "@vnejs/uis.utils": "~0.1.0"
+    "@vnejs/uis.utils": "~0.2.0"
   },
   "files": [
     "dist",

package/src/Scrollbar.styles.ts

@@ -20,6 +20,7 @@ ${sel(b("scroll"))} {
   transition: 1000ms;
   border-radius: ${getVneLength(8)};
   opacity: 0;
+  pointer-events: none;
 }
 
 ${sel(b("thumb"))} {
@@ -58,6 +59,7 @@ ${sel(b("thumb", { isHorizontal: true }))} {
 
 ${sel(b("scroll", { isVisible: true }))} {
   opacity: 1;
+  pointer-events: auto;
 }
 `;
 

package/src/Scrollbar.tsx

@@ -6,6 +6,7 @@ import { getVneLength } from "@vnejs/uis.utils";
 import { type ScrollbarProps } from "./Scrollbar.types.js";
 
 import { useThumbHook } from "./hooks/thumb.hook";
+import { useTrackClickHook } from "./hooks/track-click.hook";
 import { useScrollHook } from "./hooks/scroll.hook";
 import { useScrollToHook } from "./hooks/scroll-to.hook";
 import { useRefForScrollHook } from "./hooks/ref.hook";
@@ -13,12 +14,17 @@ import { useRefForScrollHook } from "./hooks/ref.hook";
 import { b } from "./Scrollbar.styles.js";
 
 const renderScroll = (
+  trackRef: RefObject<HTMLDivElement | null>,
   thumbRef: RefObject<HTMLDivElement | null>,
   isVisible: boolean,
   isHorizontal: boolean,
   isVertical: boolean,
 ) => (
-  <div className={b("scroll", { isVisible, isHorizontal, isVertical })}>
+  <div
+    className={b("scroll", { isVisible, isHorizontal, isVertical })}
+    ref={trackRef}
+    vne-cursor-type={isVisible ? "pointer" : ""}
+  >
     <div
       className={b("thumb", { isHorizontal, isVertical })}
       ref={thumbRef}
@@ -38,10 +44,18 @@ export const Scrollbar = ({
   wrapRef = null,
   textSize = null,
 }: ScrollbarProps) => {
-  const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
+  const {
+    scrollbarWrapRef,
+    scrollbarChildrenRef,
+    thumbHorizontalRef,
+    thumbVerticalRef,
+    trackHorizontalRef,
+    trackVerticalRef,
+  } = useRefForScrollHook();
   const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
 
   useThumbHook(scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef);
+  useTrackClickHook(scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef);
   useScrollToHook(scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef);
 
   const style = useMemo(() => {
@@ -79,8 +93,8 @@ export const Scrollbar = ({
       className={b({}, [className])}
       style={style}
     >
-      {!hideScrolbars && renderScroll(thumbHorizontalRef, shouldRenderHorizontal, true, false)}
-      {!hideScrolbars && renderScroll(thumbVerticalRef, shouldRenderVertical, false, true)}
+      {!hideScrolbars && renderScroll(trackHorizontalRef, thumbHorizontalRef, shouldRenderHorizontal, true, false)}
+      {!hideScrolbars && renderScroll(trackVerticalRef, thumbVerticalRef, shouldRenderVertical, false, true)}
 
       <div
         className={b("wrap")}

package/src/hooks/ref.hook.ts

@@ -8,6 +8,15 @@ export const useRefForScrollHook = (): UseRefForScrollHookReturn => {
 
   const thumbVerticalRef = useRef<HTMLDivElement>(null);
   const thumbHorizontalRef = useRef<HTMLDivElement>(null);
+  const trackVerticalRef = useRef<HTMLDivElement>(null);
+  const trackHorizontalRef = useRef<HTMLDivElement>(null);
 
-  return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
+  return {
+    scrollbarWrapRef,
+    scrollbarChildrenRef,
+    thumbVerticalRef,
+    thumbHorizontalRef,
+    trackVerticalRef,
+    trackHorizontalRef,
+  };
 };

package/src/hooks/ref.hook.types.ts

@@ -5,6 +5,8 @@ export type ScrollbarRefs = {
   scrollbarChildrenRef: RefObject<HTMLDivElement | null>;
   thumbVerticalRef: RefObject<HTMLDivElement | null>;
   thumbHorizontalRef: RefObject<HTMLDivElement | null>;
+  trackVerticalRef: RefObject<HTMLDivElement | null>;
+  trackHorizontalRef: RefObject<HTMLDivElement | null>;
 };
 
 export type UseRefForScrollHookReturn = ScrollbarRefs;

package/src/hooks/track-click.hook.ts

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+
+import { type UseTrackClickHook } from "./track-click.hook.types.js";
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+const getScrollFromTrackClick = (clickOffset: number, trackSize: number, thumbSize: number, maxScroll: number) => {
+  if (maxScroll <= 0 || trackSize <= 0) return 0;
+
+  const travel = trackSize - thumbSize;
+
+  if (travel <= 0) return 0;
+
+  const ratio = clamp((clickOffset - thumbSize / 2) / travel, 0, 1);
+
+  return ratio * maxScroll;
+};
+
+export const useTrackClickHook: UseTrackClickHook = (
+  scrollbarWrapRef,
+  trackVerticalRef,
+  trackHorizontalRef,
+  thumbVerticalRef,
+  thumbHorizontalRef,
+) => {
+  useEffect(() => {
+    const wrap = scrollbarWrapRef.current;
+    const trackVertical = trackVerticalRef.current;
+    const trackHorizontal = trackHorizontalRef.current;
+
+    if (!wrap) return;
+
+    const handleVerticalPointerDown = (event: PointerEvent) => {
+      const thumb = thumbVerticalRef.current;
+
+      if (!trackVertical || !thumb) return;
+      if (thumb.contains(event.target as Node)) return;
+
+      const clickOffset = event.clientY - trackVertical.getBoundingClientRect().top;
+      const maxScroll = wrap.scrollHeight - wrap.clientHeight;
+
+      wrap.scrollTop = getScrollFromTrackClick(clickOffset, trackVertical.clientHeight, thumb.clientHeight, maxScroll);
+    };
+
+    const handleHorizontalPointerDown = (event: PointerEvent) => {
+      const thumb = thumbHorizontalRef.current;
+
+      if (!trackHorizontal || !thumb) return;
+      if (thumb.contains(event.target as Node)) return;
+
+      const clickOffset = event.clientX - trackHorizontal.getBoundingClientRect().left;
+      const maxScroll = wrap.scrollWidth - wrap.clientWidth;
+
+      wrap.scrollLeft = getScrollFromTrackClick(clickOffset, trackHorizontal.clientWidth, thumb.clientWidth, maxScroll);
+    };
+
+    trackVertical?.addEventListener("pointerdown", handleVerticalPointerDown);
+    trackHorizontal?.addEventListener("pointerdown", handleHorizontalPointerDown);
+
+    return () => {
+      trackVertical?.removeEventListener("pointerdown", handleVerticalPointerDown);
+      trackHorizontal?.removeEventListener("pointerdown", handleHorizontalPointerDown);
+    };
+  }, [scrollbarWrapRef, trackVerticalRef, trackHorizontalRef, thumbVerticalRef, thumbHorizontalRef]);
+};

package/src/hooks/track-click.hook.types.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from "react";
+
+export type UseTrackClickHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
+export type UseTrackClickHookTrackRef = RefObject<HTMLDivElement | null>;
+export type UseTrackClickHookThumbRef = RefObject<HTMLDivElement | null>;
+
+export type UseTrackClickHookParams = [
+  scrollbarWrapRef: UseTrackClickHookScrollbarWrapRef,
+  trackVerticalRef: UseTrackClickHookTrackRef,
+  trackHorizontalRef: UseTrackClickHookTrackRef,
+  thumbVerticalRef: UseTrackClickHookThumbRef,
+  thumbHorizontalRef: UseTrackClickHookThumbRef,
+];
+
+export type UseTrackClickHook = (...args: UseTrackClickHookParams) => void;