@vnejs/uis.react.scrollbar 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/Scrollbar.d.ts +2 -12
  2. package/dist/Scrollbar.d.ts.map +1 -1
  3. package/dist/Scrollbar.js.map +1 -1
  4. package/dist/Scrollbar.styles.d.ts +1 -1
  5. package/dist/Scrollbar.styles.d.ts.map +1 -1
  6. package/dist/Scrollbar.types.d.ts +15 -0
  7. package/dist/Scrollbar.types.d.ts.map +1 -0
  8. package/dist/Scrollbar.types.js +2 -0
  9. package/dist/Scrollbar.types.js.map +1 -0
  10. package/dist/hooks/ref.hook.d.ts +2 -6
  11. package/dist/hooks/ref.hook.d.ts.map +1 -1
  12. package/dist/hooks/ref.hook.js.map +1 -1
  13. package/dist/hooks/ref.hook.types.d.ts +9 -0
  14. package/dist/hooks/ref.hook.types.d.ts.map +1 -0
  15. package/dist/hooks/ref.hook.types.js +2 -0
  16. package/dist/hooks/ref.hook.types.js.map +1 -0
  17. package/dist/hooks/scroll-to.hook.d.ts +2 -1
  18. package/dist/hooks/scroll-to.hook.d.ts.map +1 -1
  19. package/dist/hooks/scroll-to.hook.js +7 -7
  20. package/dist/hooks/scroll-to.hook.js.map +1 -1
  21. package/dist/hooks/scroll-to.hook.types.d.ts +11 -0
  22. package/dist/hooks/scroll-to.hook.types.d.ts.map +1 -0
  23. package/dist/hooks/scroll-to.hook.types.js +2 -0
  24. package/dist/hooks/scroll-to.hook.types.js.map +1 -0
  25. package/dist/hooks/scroll.hook.d.ts +2 -4
  26. package/dist/hooks/scroll.hook.d.ts.map +1 -1
  27. package/dist/hooks/scroll.hook.js +4 -4
  28. package/dist/hooks/scroll.hook.js.map +1 -1
  29. package/dist/hooks/scroll.hook.types.d.ts +15 -0
  30. package/dist/hooks/scroll.hook.types.d.ts.map +1 -0
  31. package/dist/hooks/scroll.hook.types.js +2 -0
  32. package/dist/hooks/scroll.hook.types.js.map +1 -0
  33. package/dist/hooks/thumb.hook.d.ts +2 -1
  34. package/dist/hooks/thumb.hook.d.ts.map +1 -1
  35. package/dist/hooks/thumb.hook.js +4 -2
  36. package/dist/hooks/thumb.hook.js.map +1 -1
  37. package/dist/hooks/thumb.hook.types.d.ts +10 -0
  38. package/dist/hooks/thumb.hook.types.d.ts.map +1 -0
  39. package/dist/hooks/thumb.hook.types.js +2 -0
  40. package/dist/hooks/thumb.hook.types.js.map +1 -0
  41. package/dist/index.d.ts +2 -1
  42. package/dist/index.d.ts.map +1 -1
  43. package/dist/index.js +2 -1
  44. package/dist/index.js.map +1 -1
  45. package/package.json +1 -1
  46. package/src/Scrollbar.tsx +10 -2
  47. package/src/Scrollbar.types.tsx +15 -0
  48. package/src/hooks/ref.hook.ts +7 -5
  49. package/src/hooks/ref.hook.types.ts +10 -0
  50. package/src/hooks/scroll-to.hook.ts +16 -9
  51. package/src/hooks/scroll-to.hook.types.ts +13 -0
  52. package/src/hooks/scroll.hook.ts +13 -5
  53. package/src/hooks/scroll.hook.types.ts +17 -0
  54. package/src/hooks/thumb.hook.ts +8 -4
  55. package/src/hooks/thumb.hook.types.ts +12 -0
  56. package/src/index.ts +2 -1
  57. package/tsconfig.json +0 -1
@@ -1,13 +1,3 @@
1
- export declare const Scrollbar: ({ className, children, width, height, scrollTo, scrollToEnd, hideScrolbars, disableScroll, wrapRef, textSize, }: {
2
- className?: string;
3
- children: any;
4
- width?: number;
5
- height?: number;
6
- scrollTo?: number;
7
- scrollToEnd?: boolean;
8
- hideScrolbars?: boolean;
9
- disableScroll?: boolean;
10
- wrapRef?: any;
11
- textSize?: any;
12
- }) => import("react/jsx-runtime").JSX.Element;
1
+ import { type ScrollbarProps } from "./Scrollbar.types.js";
2
+ export declare const Scrollbar: ({ className, children, width, height, scrollTo, scrollToEnd, hideScrolbars, disableScroll, wrapRef, textSize, }: ScrollbarProps) => import("react/jsx-runtime").JSX.Element;
13
3
  //# sourceMappingURL=Scrollbar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;CAWzB,4CA2DA,CAAC"}
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,GAAI,iHAWvB,cAAc,4CA2DhB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- export declare const b: (...args: any[]) => string;
1
+ export declare const b: any;
2
2
  //# sourceMappingURL=Scrollbar.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Scrollbar.styles.d.ts","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,4BAAkB,CAAC"}
1
+ {"version":3,"file":"Scrollbar.styles.d.ts","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,KAAkB,CAAC"}
@@ -0,0 +1,15 @@
1
+ import type { CssInsertValueLength } from "@vnejs/uis.utils";
2
+ import type { MutableRefObject, ReactNode } from "react";
3
+ export type ScrollbarProps = {
4
+ className?: string;
5
+ children?: ReactNode;
6
+ width?: CssInsertValueLength;
7
+ height?: CssInsertValueLength;
8
+ scrollTo?: number;
9
+ scrollToEnd?: boolean;
10
+ hideScrolbars?: boolean;
11
+ disableScroll?: boolean;
12
+ wrapRef?: MutableRefObject<HTMLDivElement | null> | null;
13
+ textSize?: number | null;
14
+ };
15
+ //# sourceMappingURL=Scrollbar.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scrollbar.types.d.ts","sourceRoot":"","sources":["../src/Scrollbar.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Scrollbar.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Scrollbar.types.js","sourceRoot":"","sources":["../src/Scrollbar.types.tsx"],"names":[],"mappings":""}
@@ -1,7 +1,3 @@
1
- export declare const useRefForScrollHook: () => {
2
- scrollbarWrapRef: import("react").RefObject<any>;
3
- scrollbarChildrenRef: import("react").RefObject<any>;
4
- thumbVerticalRef: import("react").RefObject<any>;
5
- thumbHorizontalRef: import("react").RefObject<any>;
6
- };
1
+ import { type UseRefForScrollHookReturn } from "./ref.hook.types.js";
2
+ export declare const useRefForScrollHook: () => UseRefForScrollHookReturn;
7
3
  //# sourceMappingURL=ref.hook.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ref.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;;;;;CAQ/B,CAAC"}
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"}
@@ -1 +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;AAE/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAExC,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;AAC1F,CAAC,CAAC"}
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"}
@@ -0,0 +1,9 @@
1
+ import type { RefObject } from "react";
2
+ export type ScrollbarRefs = {
3
+ scrollbarWrapRef: RefObject<HTMLDivElement | null>;
4
+ scrollbarChildrenRef: RefObject<HTMLDivElement | null>;
5
+ thumbVerticalRef: RefObject<HTMLDivElement | null>;
6
+ thumbHorizontalRef: RefObject<HTMLDivElement | null>;
7
+ };
8
+ export type UseRefForScrollHookReturn = ScrollbarRefs;
9
+ //# sourceMappingURL=ref.hook.types.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ref.hook.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ref.hook.types.js","sourceRoot":"","sources":["../../src/hooks/ref.hook.types.ts"],"names":[],"mappings":""}
@@ -1,2 +1,3 @@
1
- export declare const useScrollToHook: (scrollTo: any, scrollToEnd: any, scrollbarWrapRef: any, scrollbarChildrenRef: any) => void;
1
+ import { type UseScrollToHook } from "./scroll-to.hook.types.js";
2
+ export declare const useScrollToHook: UseScrollToHook;
2
3
  //# sourceMappingURL=scroll-to.hook.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"scroll-to.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAAI,aAAQ,EAAE,gBAAW,EAAE,qBAAgB,EAAE,yBAAoB,SA+B5F,CAAC"}
1
+ {"version":3,"file":"scroll-to.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,eAgC7B,CAAC"}
@@ -1,27 +1,27 @@
1
1
  import { useEffect } from "react";
2
2
  export const useScrollToHook = (scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef) => {
3
3
  useEffect(() => {
4
- if (!scrollTo)
4
+ if (!scrollTo || !scrollbarWrapRef.current || !scrollbarChildrenRef.current)
5
5
  return;
6
6
  const children = [...scrollbarChildrenRef.current.children];
7
7
  if (children[scrollTo]) {
8
8
  const element = children[scrollTo];
9
9
  if (scrollbarWrapRef.current.scrollTop > element.offsetTop ||
10
10
  scrollbarWrapRef.current.scrollTop + scrollbarWrapRef.current.clientHeight < element.offsetTop + element.clientHeight ||
11
- scrollbarWrapRef.current.scrollLeft > element.offsetleft ||
12
- scrollbarWrapRef.current.scrollleft + scrollbarWrapRef.current.clientWidth < element.offsetleft + element.clientWidth)
11
+ scrollbarWrapRef.current.scrollLeft > element.offsetLeft ||
12
+ scrollbarWrapRef.current.scrollLeft + scrollbarWrapRef.current.clientWidth < element.offsetLeft + element.clientWidth)
13
13
  element.scrollIntoView({ behavior: "smooth" });
14
14
  }
15
- }, [scrollTo, scrollbarWrapRef.current]);
15
+ }, [scrollTo, scrollbarWrapRef, scrollbarChildrenRef]);
16
16
  useEffect(() => {
17
- if (!scrollToEnd)
17
+ if (!scrollToEnd || !scrollbarChildrenRef.current)
18
18
  return;
19
- const scrollToBottom = () => scrollbarChildrenRef?.current?.scrollIntoView({ behavior: "smooth", block: "end" });
19
+ const scrollToBottom = () => scrollbarChildrenRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
20
20
  const resizeObserver = new ResizeObserver(() => {
21
21
  setTimeout(scrollToBottom, 100);
22
22
  });
23
23
  resizeObserver.observe(scrollbarChildrenRef.current);
24
24
  return () => resizeObserver.disconnect();
25
- }, [scrollToEnd, scrollbarWrapRef.current]);
25
+ }, [scrollToEnd, scrollbarChildrenRef]);
26
26
  };
27
27
  //# sourceMappingURL=scroll-to.hook.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"scroll-to.hook.js","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,EAAE;IAC/F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,CAAC,GAAG,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAE5D,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAEnC,IACE,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS;gBACtD,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY;gBACrH,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU;gBACxD,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,WAAW;gBAErH,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,oBAAoB,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAEjH,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,UAAU,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC"}
1
+ {"version":3,"file":"scroll-to.hook.js","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlC,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,EAAE;IAChH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,OAAO;YAAE,OAAO;QAEpF,MAAM,QAAQ,GAAG,CAAC,GAAG,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAE5D,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAgB,CAAC;YAElD,IACE,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS;gBACtD,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY;gBACrH,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU;gBACxD,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,WAAW;gBAErH,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,CAAC,oBAAoB,CAAC,OAAO;YAAE,OAAO;QAE1D,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAEhH,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,UAAU,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAC1C,CAAC,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type { RefObject } from "react";
2
+ export type UseScrollToHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
3
+ export type UseScrollToHookScrollbarChildrenRef = RefObject<HTMLDivElement | null>;
4
+ export type UseScrollToHookParams = {
5
+ scrollTo: number;
6
+ scrollToEnd: boolean;
7
+ scrollbarWrapRef: UseScrollToHookScrollbarWrapRef;
8
+ scrollbarChildrenRef: UseScrollToHookScrollbarChildrenRef;
9
+ };
10
+ export type UseScrollToHook = (scrollTo: number, scrollToEnd: boolean, scrollbarWrapRef: UseScrollToHookScrollbarWrapRef, scrollbarChildrenRef: UseScrollToHookScrollbarChildrenRef) => void;
11
+ //# sourceMappingURL=scroll-to.hook.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll-to.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,+BAA+B,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAC/E,MAAM,MAAM,mCAAmC,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,+BAA+B,CAAC;IAClD,oBAAoB,EAAE,mCAAmC,CAAC;CAC3D,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,EAAE,+BAA+B,EAAE,oBAAoB,EAAE,mCAAmC,KAAK,IAAI,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=scroll-to.hook.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll-to.hook.types.js","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.types.ts"],"names":[],"mappings":""}
@@ -1,5 +1,3 @@
1
- export declare const useScrollHook: (scrollbarWrapRef: any, scrollbarChildrenRef: any, width: any, height: any, textSize: any) => {
2
- shouldRenderHorizontal: boolean;
3
- shouldRenderVertical: boolean;
4
- };
1
+ import { type UseScrollHookReturn, type UseScrollHookScrollbarChildrenRef, type UseScrollHookScrollbarWrapRef } from "./scroll.hook.types.js";
2
+ export declare const useScrollHook: (scrollbarWrapRef: UseScrollHookScrollbarWrapRef, scrollbarChildrenRef: UseScrollHookScrollbarChildrenRef, width: number, height: number, textSize: number | null) => UseScrollHookReturn;
5
3
  //# sourceMappingURL=scroll.hook.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"scroll.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,GAAI,qBAAgB,EAAE,yBAAoB,EAAE,UAAK,EAAE,WAAM,EAAE,aAAQ;;;CAsD5F,CAAC"}
1
+ {"version":3,"file":"scroll.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,iCAAiC,EAAE,KAAK,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAE9I,eAAO,MAAM,aAAa,GACxB,kBAAkB,6BAA6B,EAC/C,sBAAsB,iCAAiC,EACvD,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,UAAU,MAAM,GAAG,IAAI,KACtB,mBAsDF,CAAC"}
@@ -5,15 +5,15 @@ export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, hei
5
5
  const calcShouldRenderVertical = useCallback(() => {
6
6
  const raf = requestAnimationFrame(() => scrollbarWrapRef.current && setShouldRenderVertical(scrollbarWrapRef.current.scrollHeight !== scrollbarWrapRef.current.clientHeight));
7
7
  return () => cancelAnimationFrame(raf);
8
- }, [scrollbarWrapRef.current, setShouldRenderVertical, textSize]);
8
+ }, [scrollbarWrapRef, textSize]);
9
9
  const calcShouldRenderHorizontal = useCallback(() => {
10
10
  const raf = requestAnimationFrame(() => scrollbarWrapRef.current && setShouldRenderHorizontal(scrollbarWrapRef.current.scrollWidth > scrollbarWrapRef.current.clientWidth));
11
11
  return () => cancelAnimationFrame(raf);
12
- }, [scrollbarWrapRef.current, setShouldRenderHorizontal, textSize]);
12
+ }, [scrollbarWrapRef, textSize]);
13
13
  useEffect(calcShouldRenderVertical, [height, calcShouldRenderVertical, textSize]);
14
14
  useEffect(calcShouldRenderHorizontal, [width, calcShouldRenderHorizontal, textSize]);
15
15
  useEffect(() => {
16
- if (!scrollbarWrapRef.current)
16
+ if (!scrollbarWrapRef.current || !scrollbarChildrenRef.current)
17
17
  return;
18
18
  const observer = new ResizeObserver(() => {
19
19
  if (!scrollbarWrapRef.current)
@@ -34,7 +34,7 @@ export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, hei
34
34
  });
35
35
  observer.observe(scrollbarChildrenRef.current);
36
36
  return () => observer.disconnect();
37
- }, [scrollbarWrapRef.current, scrollbarChildrenRef.current, calcShouldRenderVertical, calcShouldRenderHorizontal, textSize]);
37
+ }, [scrollbarWrapRef, scrollbarChildrenRef, calcShouldRenderVertical, calcShouldRenderHorizontal, textSize]);
38
38
  return { shouldRenderHorizontal, shouldRenderVertical };
39
39
  };
40
40
  //# sourceMappingURL=scroll.hook.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"scroll.hook.js","sourceRoot":"","sources":["../../src/hooks/scroll.hook.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"scroll.hook.js","sourceRoot":"","sources":["../../src/hooks/scroll.hook.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import type { RefObject } from "react";
2
+ export type UseScrollHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
3
+ export type UseScrollHookScrollbarChildrenRef = RefObject<HTMLDivElement | null>;
4
+ export type UseScrollHookReturn = {
5
+ shouldRenderHorizontal: boolean;
6
+ shouldRenderVertical: boolean;
7
+ };
8
+ export type UseScrollHookParams = {
9
+ scrollbarWrapRef: UseScrollHookScrollbarWrapRef;
10
+ scrollbarChildrenRef: UseScrollHookScrollbarChildrenRef;
11
+ width: number;
12
+ height: number;
13
+ textSize: number | null;
14
+ };
15
+ //# sourceMappingURL=scroll.hook.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,6BAA6B,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAC7E,MAAM,MAAM,iCAAiC,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAEjF,MAAM,MAAM,mBAAmB,GAAG;IAChC,sBAAsB,EAAE,OAAO,CAAC;IAChC,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,gBAAgB,EAAE,6BAA6B,CAAC;IAChD,oBAAoB,EAAE,iCAAiC,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=scroll.hook.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll.hook.types.js","sourceRoot":"","sources":["../../src/hooks/scroll.hook.types.ts"],"names":[],"mappings":""}
@@ -1,2 +1,3 @@
1
- export declare const useThumbHook: (scrollbarWrapRef: any, thumbVerticalRef: any, thumbHorizontalRef: any) => void;
1
+ import { type UseThumbHook } from "./thumb.hook.types.js";
2
+ export declare const useThumbHook: UseThumbHook;
2
3
  //# sourceMappingURL=thumb.hook.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"thumb.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/thumb.hook.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,GAAI,qBAAgB,EAAE,qBAAgB,EAAE,uBAAkB,SAwBlF,CAAC"}
1
+ {"version":3,"file":"thumb.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/thumb.hook.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,eAAO,MAAM,YAAY,EAAE,YA0B1B,CAAC"}
@@ -5,7 +5,7 @@ export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontal
5
5
  const handleScroll = () => {
6
6
  if (!scrollbarWrapRef.current)
7
7
  return;
8
- if (thumbHorizontalRef.current) {
8
+ if (thumbHorizontalRef.current && thumbVerticalRef.current) {
9
9
  const maxScroll = scrollbarWrapRef.current.scrollWidth - scrollbarWrapRef.current.clientWidth;
10
10
  thumbHorizontalRef.current.style.left = getPosition(scrollbarWrapRef.current.scrollLeft / maxScroll, thumbVerticalRef.current.clientWidth);
11
11
  }
@@ -15,9 +15,11 @@ export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontal
15
15
  }
16
16
  };
17
17
  const ref = scrollbarWrapRef.current;
18
+ if (!ref)
19
+ return;
18
20
  ref.addEventListener("scroll", handleScroll);
19
21
  handleScroll();
20
22
  return () => ref.removeEventListener("scroll", handleScroll);
21
- }, [scrollbarWrapRef.current, thumbHorizontalRef.current, thumbVerticalRef.current]);
23
+ }, [scrollbarWrapRef, thumbHorizontalRef, thumbVerticalRef]);
22
24
  };
23
25
  //# sourceMappingURL=thumb.hook.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"thumb.hook.js","sourceRoot":"","sources":["../../src/hooks/thumb.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,GAAG,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,GAAG,GAAG,cAAc,OAAO,cAAc,GAAG,SAAS,KAAK,CAAC;AAEtH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,EAAE;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO;gBAAE,OAAO;YACtC,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;gBAE9F,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC7I,CAAC;YACD,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAC7B,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC;gBAEhG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAC1I,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,GAAG,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAErC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,YAAY,EAAE,CAAC;QAEf,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AACvF,CAAC,CAAC"}
1
+ {"version":3,"file":"thumb.hook.js","sourceRoot":"","sources":["../../src/hooks/thumb.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,WAAW,GAAG,CAAC,cAAsB,EAAE,SAAiB,EAAE,EAAE,CAAC,QAAQ,GAAG,GAAG,cAAc,OAAO,cAAc,GAAG,SAAS,KAAK,CAAC;AAEtI,MAAM,CAAC,MAAM,YAAY,GAAiB,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,EAAE;IACnG,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO;gBAAE,OAAO;YACtC,IAAI,kBAAkB,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAC3D,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;gBAE9F,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC7I,CAAC;YACD,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAC7B,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC;gBAEhG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAC1I,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,GAAG,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAErC,IAAI,CAAC,GAAG;YAAE,OAAO;QAEjB,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,YAAY,EAAE,CAAC;QAEf,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAC/D,CAAC,CAAC"}
@@ -0,0 +1,10 @@
1
+ import type { RefObject } from "react";
2
+ export type UseThumbHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
3
+ export type UseThumbHookThumbRef = RefObject<HTMLDivElement | null>;
4
+ export type UseThumbHookParams = [
5
+ scrollbarWrapRef: UseThumbHookScrollbarWrapRef,
6
+ thumbVerticalRef: UseThumbHookThumbRef,
7
+ thumbHorizontalRef: UseThumbHookThumbRef
8
+ ];
9
+ export type UseThumbHook = (...args: UseThumbHookParams) => void;
10
+ //# sourceMappingURL=thumb.hook.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"thumb.hook.types.d.ts","sourceRoot":"","sources":["../../src/hooks/thumb.hook.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAC5E,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,4BAA4B;IAC9C,gBAAgB,EAAE,oBAAoB;IACtC,kBAAkB,EAAE,oBAAoB;CACzC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=thumb.hook.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"thumb.hook.types.js","sourceRoot":"","sources":["../../src/hooks/thumb.hook.types.ts"],"names":[],"mappings":""}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export * from "./Scrollbar";
1
+ export * from "./Scrollbar.types.js";
2
+ export * from "./Scrollbar.js";
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
- export * from "./Scrollbar";
1
+ export * from "./Scrollbar.types.js";
2
+ export * from "./Scrollbar.js";
2
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vnejs/uis.react.scrollbar",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/Scrollbar.tsx CHANGED
@@ -1,7 +1,10 @@
1
1
  import { useEffect, useMemo } from "react";
2
+ import type { RefObject } from "react";
2
3
 
3
4
  import { getVneLength } from "@vnejs/uis.utils";
4
5
 
6
+ import { type ScrollbarProps } from "./Scrollbar.types.js";
7
+
5
8
  import { useThumbHook } from "./hooks/thumb.hook";
6
9
  import { useScrollHook } from "./hooks/scroll.hook";
7
10
  import { useScrollToHook } from "./hooks/scroll-to.hook";
@@ -9,7 +12,12 @@ import { useRefForScrollHook } from "./hooks/ref.hook";
9
12
 
10
13
  import { b } from "./Scrollbar.styles.js";
11
14
 
12
- const renderScroll = (thumbRef, isVisible, isHorizontal, isVertical) => (
15
+ const renderScroll = (
16
+ thumbRef: RefObject<HTMLDivElement | null>,
17
+ isVisible: boolean,
18
+ isHorizontal: boolean,
19
+ isVertical: boolean,
20
+ ) => (
13
21
  <div className={b("scroll", { isVisible, isHorizontal, isVertical })}>
14
22
  <div
15
23
  className={b("thumb", { isHorizontal, isVertical })}
@@ -29,7 +37,7 @@ export const Scrollbar = ({
29
37
  disableScroll = false,
30
38
  wrapRef = null,
31
39
  textSize = null,
32
- }) => {
40
+ }: ScrollbarProps) => {
33
41
  const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
34
42
  const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
35
43
 
@@ -0,0 +1,15 @@
1
+ import type { CssInsertValueLength } from "@vnejs/uis.utils";
2
+ import type { MutableRefObject, ReactNode } from "react";
3
+
4
+ export type ScrollbarProps = {
5
+ className?: string;
6
+ children?: ReactNode;
7
+ width?: CssInsertValueLength;
8
+ height?: CssInsertValueLength;
9
+ scrollTo?: number;
10
+ scrollToEnd?: boolean;
11
+ hideScrolbars?: boolean;
12
+ disableScroll?: boolean;
13
+ wrapRef?: MutableRefObject<HTMLDivElement | null> | null;
14
+ textSize?: number | null;
15
+ };
@@ -1,11 +1,13 @@
1
1
  import { useRef } from "react";
2
2
 
3
- export const useRefForScrollHook = () => {
4
- const scrollbarWrapRef = useRef(null);
5
- const scrollbarChildrenRef = useRef(null);
3
+ import { type UseRefForScrollHookReturn } from "./ref.hook.types.js";
6
4
 
7
- const thumbVerticalRef = useRef(null);
8
- const thumbHorizontalRef = useRef(null);
5
+ export const useRefForScrollHook = (): UseRefForScrollHookReturn => {
6
+ const scrollbarWrapRef = useRef<HTMLDivElement>(null);
7
+ const scrollbarChildrenRef = useRef<HTMLDivElement>(null);
8
+
9
+ const thumbVerticalRef = useRef<HTMLDivElement>(null);
10
+ const thumbHorizontalRef = useRef<HTMLDivElement>(null);
9
11
 
10
12
  return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
11
13
  };
@@ -0,0 +1,10 @@
1
+ import type { RefObject } from "react";
2
+
3
+ export type ScrollbarRefs = {
4
+ scrollbarWrapRef: RefObject<HTMLDivElement | null>;
5
+ scrollbarChildrenRef: RefObject<HTMLDivElement | null>;
6
+ thumbVerticalRef: RefObject<HTMLDivElement | null>;
7
+ thumbHorizontalRef: RefObject<HTMLDivElement | null>;
8
+ };
9
+
10
+ export type UseRefForScrollHookReturn = ScrollbarRefs;
@@ -1,27 +1,34 @@
1
1
  import { useEffect } from "react";
2
2
 
3
- export const useScrollToHook = (scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef) => {
3
+ import {
4
+ type UseScrollToHook,
5
+ type UseScrollToHookScrollbarChildrenRef,
6
+ type UseScrollToHookScrollbarWrapRef,
7
+ } from "./scroll-to.hook.types.js";
8
+
9
+ export const useScrollToHook: UseScrollToHook = (scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef) => {
4
10
  useEffect(() => {
5
- if (!scrollTo) return;
11
+ if (!scrollTo || !scrollbarWrapRef.current || !scrollbarChildrenRef.current) return;
6
12
 
7
13
  const children = [...scrollbarChildrenRef.current.children];
8
14
 
9
15
  if (children[scrollTo]) {
10
- const element = children[scrollTo];
16
+ const element = children[scrollTo] as HTMLElement;
11
17
 
12
18
  if (
13
19
  scrollbarWrapRef.current.scrollTop > element.offsetTop ||
14
20
  scrollbarWrapRef.current.scrollTop + scrollbarWrapRef.current.clientHeight < element.offsetTop + element.clientHeight ||
15
- scrollbarWrapRef.current.scrollLeft > element.offsetleft ||
16
- scrollbarWrapRef.current.scrollleft + scrollbarWrapRef.current.clientWidth < element.offsetleft + element.clientWidth
21
+ scrollbarWrapRef.current.scrollLeft > element.offsetLeft ||
22
+ scrollbarWrapRef.current.scrollLeft + scrollbarWrapRef.current.clientWidth < element.offsetLeft + element.clientWidth
17
23
  )
18
24
  element.scrollIntoView({ behavior: "smooth" });
19
25
  }
20
- }, [scrollTo, scrollbarWrapRef.current]);
26
+ }, [scrollTo, scrollbarWrapRef, scrollbarChildrenRef]);
27
+
21
28
  useEffect(() => {
22
- if (!scrollToEnd) return;
29
+ if (!scrollToEnd || !scrollbarChildrenRef.current) return;
23
30
 
24
- const scrollToBottom = () => scrollbarChildrenRef?.current?.scrollIntoView({ behavior: "smooth", block: "end" });
31
+ const scrollToBottom = () => scrollbarChildrenRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
25
32
 
26
33
  const resizeObserver = new ResizeObserver(() => {
27
34
  setTimeout(scrollToBottom, 100);
@@ -30,5 +37,5 @@ export const useScrollToHook = (scrollTo, scrollToEnd, scrollbarWrapRef, scrollb
30
37
  resizeObserver.observe(scrollbarChildrenRef.current);
31
38
 
32
39
  return () => resizeObserver.disconnect();
33
- }, [scrollToEnd, scrollbarWrapRef.current]);
40
+ }, [scrollToEnd, scrollbarChildrenRef]);
34
41
  };
@@ -0,0 +1,13 @@
1
+ import type { RefObject } from "react";
2
+
3
+ export type UseScrollToHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
4
+ export type UseScrollToHookScrollbarChildrenRef = RefObject<HTMLDivElement | null>;
5
+
6
+ export type UseScrollToHookParams = {
7
+ scrollTo: number;
8
+ scrollToEnd: boolean;
9
+ scrollbarWrapRef: UseScrollToHookScrollbarWrapRef;
10
+ scrollbarChildrenRef: UseScrollToHookScrollbarChildrenRef;
11
+ };
12
+
13
+ export type UseScrollToHook = (scrollTo: number, scrollToEnd: boolean, scrollbarWrapRef: UseScrollToHookScrollbarWrapRef, scrollbarChildrenRef: UseScrollToHookScrollbarChildrenRef) => void;
@@ -1,6 +1,14 @@
1
1
  import { useCallback, useEffect, useState } from "react";
2
2
 
3
- export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize) => {
3
+ import { type UseScrollHookReturn, type UseScrollHookScrollbarChildrenRef, type UseScrollHookScrollbarWrapRef } from "./scroll.hook.types.js";
4
+
5
+ export const useScrollHook = (
6
+ scrollbarWrapRef: UseScrollHookScrollbarWrapRef,
7
+ scrollbarChildrenRef: UseScrollHookScrollbarChildrenRef,
8
+ width: number,
9
+ height: number,
10
+ textSize: number | null,
11
+ ): UseScrollHookReturn => {
4
12
  const [shouldRenderHorizontal, setShouldRenderHorizontal] = useState(false);
5
13
  const [shouldRenderVertical, setShouldRenderVertical] = useState(false);
6
14
 
@@ -10,7 +18,7 @@ export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, hei
10
18
  );
11
19
 
12
20
  return () => cancelAnimationFrame(raf);
13
- }, [scrollbarWrapRef.current, setShouldRenderVertical, textSize]);
21
+ }, [scrollbarWrapRef, textSize]);
14
22
 
15
23
  const calcShouldRenderHorizontal = useCallback(() => {
16
24
  const raf = requestAnimationFrame(
@@ -18,13 +26,13 @@ export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, hei
18
26
  );
19
27
 
20
28
  return () => cancelAnimationFrame(raf);
21
- }, [scrollbarWrapRef.current, setShouldRenderHorizontal, textSize]);
29
+ }, [scrollbarWrapRef, textSize]);
22
30
 
23
31
  useEffect(calcShouldRenderVertical, [height, calcShouldRenderVertical, textSize]);
24
32
  useEffect(calcShouldRenderHorizontal, [width, calcShouldRenderHorizontal, textSize]);
25
33
 
26
34
  useEffect(() => {
27
- if (!scrollbarWrapRef.current) return;
35
+ if (!scrollbarWrapRef.current || !scrollbarChildrenRef.current) return;
28
36
 
29
37
  const observer = new ResizeObserver(() => {
30
38
  if (!scrollbarWrapRef.current) return;
@@ -51,7 +59,7 @@ export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, hei
51
59
  observer.observe(scrollbarChildrenRef.current);
52
60
 
53
61
  return () => observer.disconnect();
54
- }, [scrollbarWrapRef.current, scrollbarChildrenRef.current, calcShouldRenderVertical, calcShouldRenderHorizontal, textSize]);
62
+ }, [scrollbarWrapRef, scrollbarChildrenRef, calcShouldRenderVertical, calcShouldRenderHorizontal, textSize]);
55
63
 
56
64
  return { shouldRenderHorizontal, shouldRenderVertical };
57
65
  };
@@ -0,0 +1,17 @@
1
+ import type { RefObject } from "react";
2
+
3
+ export type UseScrollHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
4
+ export type UseScrollHookScrollbarChildrenRef = RefObject<HTMLDivElement | null>;
5
+
6
+ export type UseScrollHookReturn = {
7
+ shouldRenderHorizontal: boolean;
8
+ shouldRenderVertical: boolean;
9
+ };
10
+
11
+ export type UseScrollHookParams = {
12
+ scrollbarWrapRef: UseScrollHookScrollbarWrapRef;
13
+ scrollbarChildrenRef: UseScrollHookScrollbarChildrenRef;
14
+ width: number;
15
+ height: number;
16
+ textSize: number | null;
17
+ };
@@ -1,12 +1,14 @@
1
1
  import { useEffect } from "react";
2
2
 
3
- const getPosition = (scrollPosition, thumbSize) => `calc(${100 * scrollPosition}% - ${scrollPosition * thumbSize}px)`;
3
+ import { type UseThumbHook } from "./thumb.hook.types.js";
4
4
 
5
- export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef) => {
5
+ const getPosition = (scrollPosition: number, thumbSize: number) => `calc(${100 * scrollPosition}% - ${scrollPosition * thumbSize}px)`;
6
+
7
+ export const useThumbHook: UseThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef) => {
6
8
  useEffect(() => {
7
9
  const handleScroll = () => {
8
10
  if (!scrollbarWrapRef.current) return;
9
- if (thumbHorizontalRef.current) {
11
+ if (thumbHorizontalRef.current && thumbVerticalRef.current) {
10
12
  const maxScroll = scrollbarWrapRef.current.scrollWidth - scrollbarWrapRef.current.clientWidth;
11
13
 
12
14
  thumbHorizontalRef.current.style.left = getPosition(scrollbarWrapRef.current.scrollLeft / maxScroll, thumbVerticalRef.current.clientWidth);
@@ -20,10 +22,12 @@ export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontal
20
22
 
21
23
  const ref = scrollbarWrapRef.current;
22
24
 
25
+ if (!ref) return;
26
+
23
27
  ref.addEventListener("scroll", handleScroll);
24
28
 
25
29
  handleScroll();
26
30
 
27
31
  return () => ref.removeEventListener("scroll", handleScroll);
28
- }, [scrollbarWrapRef.current, thumbHorizontalRef.current, thumbVerticalRef.current]);
32
+ }, [scrollbarWrapRef, thumbHorizontalRef, thumbVerticalRef]);
29
33
  };
@@ -0,0 +1,12 @@
1
+ import type { RefObject } from "react";
2
+
3
+ export type UseThumbHookScrollbarWrapRef = RefObject<HTMLDivElement | null>;
4
+ export type UseThumbHookThumbRef = RefObject<HTMLDivElement | null>;
5
+
6
+ export type UseThumbHookParams = [
7
+ scrollbarWrapRef: UseThumbHookScrollbarWrapRef,
8
+ thumbVerticalRef: UseThumbHookThumbRef,
9
+ thumbHorizontalRef: UseThumbHookThumbRef,
10
+ ];
11
+
12
+ export type UseThumbHook = (...args: UseThumbHookParams) => void;
package/src/index.ts CHANGED
@@ -1 +1,2 @@
1
- export * from "./Scrollbar";
1
+ export * from "./Scrollbar.types.js";
2
+ export * from "./Scrollbar.js";
package/tsconfig.json CHANGED
@@ -8,7 +8,6 @@
8
8
  "src/**/*.ts",
9
9
  "src/**/*.tsx",
10
10
  "../../../globals.d.ts",
11
- "../../peer-modules.d.ts"
12
11
  ],
13
12
  "exclude": [
14
13
  "dist",