@spark-ui/hooks 11.1.6 → 11.2.1
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.
- package/CHANGELOG.md +10 -0
- package/dist/use-scroll-overflow/index.d.mts +6 -2
- package/dist/use-scroll-overflow/index.d.ts +6 -2
- package/dist/use-scroll-overflow/index.js +24 -19
- package/dist/use-scroll-overflow/index.js.map +1 -1
- package/dist/use-scroll-overflow/index.mjs +25 -20
- package/dist/use-scroll-overflow/index.mjs.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [11.2.1](https://github.com/leboncoin/spark-web/compare/v11.2.0...v11.2.1) (2025-11-05)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **components:** avoid using global resize event in scrolling list ([af1c666](https://github.com/leboncoin/spark-web/commit/af1c6663766a8b488a1015f51371c5f5e6284ea5))
|
|
11
|
+
|
|
12
|
+
# [11.2.0](https://github.com/leboncoin/spark-web/compare/v11.1.6...v11.2.0) (2025-11-05)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @spark-ui/hooks
|
|
15
|
+
|
|
6
16
|
## [11.1.6](https://github.com/leboncoin/spark-web/compare/v11.1.5...v11.1.6) (2025-11-03)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @spark-ui/hooks
|
|
@@ -6,6 +6,10 @@ interface ScrollOverflow {
|
|
|
6
6
|
left: number;
|
|
7
7
|
right: number;
|
|
8
8
|
}
|
|
9
|
+
interface UseScrollOverflowReturn {
|
|
10
|
+
overflow: ScrollOverflow;
|
|
11
|
+
refresh: () => void;
|
|
12
|
+
}
|
|
9
13
|
declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>,
|
|
10
14
|
/**
|
|
11
15
|
* Tolerance threshold for floating-point precision issues.
|
|
@@ -13,6 +17,6 @@ declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>,
|
|
|
13
17
|
*/
|
|
14
18
|
{ precisionTreshold }?: {
|
|
15
19
|
precisionTreshold?: number;
|
|
16
|
-
}):
|
|
20
|
+
}): UseScrollOverflowReturn;
|
|
17
21
|
|
|
18
|
-
export { type ScrollOverflow, useScrollOverflow };
|
|
22
|
+
export { type ScrollOverflow, type UseScrollOverflowReturn, useScrollOverflow };
|
|
@@ -6,6 +6,10 @@ interface ScrollOverflow {
|
|
|
6
6
|
left: number;
|
|
7
7
|
right: number;
|
|
8
8
|
}
|
|
9
|
+
interface UseScrollOverflowReturn {
|
|
10
|
+
overflow: ScrollOverflow;
|
|
11
|
+
refresh: () => void;
|
|
12
|
+
}
|
|
9
13
|
declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>,
|
|
10
14
|
/**
|
|
11
15
|
* Tolerance threshold for floating-point precision issues.
|
|
@@ -13,6 +17,6 @@ declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>,
|
|
|
13
17
|
*/
|
|
14
18
|
{ precisionTreshold }?: {
|
|
15
19
|
precisionTreshold?: number;
|
|
16
|
-
}):
|
|
20
|
+
}): UseScrollOverflowReturn;
|
|
17
21
|
|
|
18
|
-
export { type ScrollOverflow, useScrollOverflow };
|
|
22
|
+
export { type ScrollOverflow, type UseScrollOverflowReturn, useScrollOverflow };
|
|
@@ -33,24 +33,26 @@ function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
|
|
|
33
33
|
left: 0,
|
|
34
34
|
right: 0
|
|
35
35
|
});
|
|
36
|
+
const precisionTresholdRef = (0, import_react.useRef)(precisionTreshold);
|
|
37
|
+
precisionTresholdRef.current = precisionTreshold;
|
|
38
|
+
const checkScrollContent = (0, import_react.useCallback)(() => {
|
|
39
|
+
const scrollElement = scrollRef.current;
|
|
40
|
+
if (scrollElement) {
|
|
41
|
+
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement;
|
|
42
|
+
const applyPrecision = (value) => {
|
|
43
|
+
return value <= precisionTresholdRef.current ? 0 : value;
|
|
44
|
+
};
|
|
45
|
+
const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
|
|
46
|
+
const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
|
|
47
|
+
setOverflow({
|
|
48
|
+
top: applyPrecision(scrollTop),
|
|
49
|
+
bottom: applyPrecision(bottomOverflow),
|
|
50
|
+
left: applyPrecision(scrollLeft),
|
|
51
|
+
right: applyPrecision(rightOverflow)
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}, [scrollRef]);
|
|
36
55
|
(0, import_react.useEffect)(() => {
|
|
37
|
-
const checkScrollContent = () => {
|
|
38
|
-
const scrollElement2 = scrollRef.current;
|
|
39
|
-
if (scrollElement2) {
|
|
40
|
-
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement2;
|
|
41
|
-
const applyPrecision = (value) => {
|
|
42
|
-
return value <= precisionTreshold ? 0 : value;
|
|
43
|
-
};
|
|
44
|
-
const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
|
|
45
|
-
const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
|
|
46
|
-
setOverflow({
|
|
47
|
-
top: applyPrecision(scrollTop),
|
|
48
|
-
bottom: applyPrecision(bottomOverflow),
|
|
49
|
-
left: applyPrecision(scrollLeft),
|
|
50
|
-
right: applyPrecision(rightOverflow)
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
56
|
checkScrollContent();
|
|
55
57
|
const scrollElement = scrollRef.current;
|
|
56
58
|
if (scrollElement) {
|
|
@@ -63,8 +65,11 @@ function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
|
|
|
63
65
|
window.removeEventListener("resize", checkScrollContent);
|
|
64
66
|
}
|
|
65
67
|
};
|
|
66
|
-
}, [scrollRef]);
|
|
67
|
-
return
|
|
68
|
+
}, [scrollRef, checkScrollContent]);
|
|
69
|
+
return {
|
|
70
|
+
overflow,
|
|
71
|
+
refresh: checkScrollContent
|
|
72
|
+
};
|
|
68
73
|
}
|
|
69
74
|
// Annotate the CommonJS export names for ESM import in node:
|
|
70
75
|
0 && (module.exports = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/use-scroll-overflow/index.ts","../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["export { useScrollOverflow } from './useScrollOverflow'\n\nexport type { ScrollOverflow } from './useScrollOverflow'\n","import { RefObject, useEffect, useState } from 'react'\n\nexport interface ScrollOverflow {\n top: number\n bottom: number\n left: number\n right: number\n}\n\nexport function useScrollOverflow(\n scrollRef: RefObject<HTMLElement | null>,\n /**\n * Tolerance threshold for floating-point precision issues.\n * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n */\n { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n):
|
|
1
|
+
{"version":3,"sources":["../../src/use-scroll-overflow/index.ts","../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["export { useScrollOverflow } from './useScrollOverflow'\n\nexport type { ScrollOverflow, UseScrollOverflowReturn } from './useScrollOverflow'\n","import { RefObject, useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface ScrollOverflow {\n top: number\n bottom: number\n left: number\n right: number\n}\n\nexport interface UseScrollOverflowReturn {\n overflow: ScrollOverflow\n refresh: () => void\n}\n\nexport function useScrollOverflow(\n scrollRef: RefObject<HTMLElement | null>,\n /**\n * Tolerance threshold for floating-point precision issues.\n * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n */\n { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n): UseScrollOverflowReturn {\n const [overflow, setOverflow] = useState<ScrollOverflow>({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n })\n\n const precisionTresholdRef = useRef(precisionTreshold)\n precisionTresholdRef.current = precisionTreshold\n\n const checkScrollContent = useCallback(() => {\n const scrollElement = scrollRef.current\n\n if (scrollElement) {\n const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n scrollElement\n\n const applyPrecision = (value: number): number => {\n return value <= precisionTresholdRef.current ? 0 : value\n }\n\n const rightOverflow = scrollWidth - (scrollLeft + clientWidth)\n const bottomOverflow = scrollHeight - (scrollTop + clientHeight)\n\n setOverflow({\n top: applyPrecision(scrollTop),\n bottom: applyPrecision(bottomOverflow),\n left: applyPrecision(scrollLeft),\n right: applyPrecision(rightOverflow),\n })\n }\n }, [scrollRef])\n\n useEffect(() => {\n checkScrollContent()\n\n const scrollElement = scrollRef.current\n if (scrollElement) {\n scrollElement.addEventListener('scroll', checkScrollContent)\n window.addEventListener('resize', checkScrollContent)\n }\n\n return () => {\n if (scrollElement) {\n scrollElement.removeEventListener('scroll', checkScrollContent)\n window.removeEventListener('resize', checkScrollContent)\n }\n }\n }, [scrollRef, checkScrollContent])\n\n return {\n overflow,\n refresh: checkScrollContent,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAoE;AAc7D,SAAS,kBACd,WAKA,EAAE,oBAAoB,EAAE,IAAoC,CAAC,GACpC;AACzB,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAyB;AAAA,IACvD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AAED,QAAM,2BAAuB,qBAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,UAAM,gBAAgB,UAAU;AAEhC,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,YAAY,IAClF;AAEF,YAAM,iBAAiB,CAAC,UAA0B;AAChD,eAAO,SAAS,qBAAqB,UAAU,IAAI;AAAA,MACrD;AAEA,YAAM,gBAAgB,eAAe,aAAa;AAClD,YAAM,iBAAiB,gBAAgB,YAAY;AAEnD,kBAAY;AAAA,QACV,KAAK,eAAe,SAAS;AAAA,QAC7B,QAAQ,eAAe,cAAc;AAAA,QACrC,MAAM,eAAe,UAAU;AAAA,QAC/B,OAAO,eAAe,aAAa;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACd,uBAAmB;AAEnB,UAAM,gBAAgB,UAAU;AAChC,QAAI,eAAe;AACjB,oBAAc,iBAAiB,UAAU,kBAAkB;AAC3D,aAAO,iBAAiB,UAAU,kBAAkB;AAAA,IACtD;AAEA,WAAO,MAAM;AACX,UAAI,eAAe;AACjB,sBAAc,oBAAoB,UAAU,kBAAkB;AAC9D,eAAO,oBAAoB,UAAU,kBAAkB;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,kBAAkB,CAAC;AAElC,SAAO;AAAA,IACL;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/use-scroll-overflow/useScrollOverflow.tsx
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
3
|
function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
|
|
4
4
|
const [overflow, setOverflow] = useState({
|
|
5
5
|
top: 0,
|
|
@@ -7,24 +7,26 @@ function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
|
|
|
7
7
|
left: 0,
|
|
8
8
|
right: 0
|
|
9
9
|
});
|
|
10
|
+
const precisionTresholdRef = useRef(precisionTreshold);
|
|
11
|
+
precisionTresholdRef.current = precisionTreshold;
|
|
12
|
+
const checkScrollContent = useCallback(() => {
|
|
13
|
+
const scrollElement = scrollRef.current;
|
|
14
|
+
if (scrollElement) {
|
|
15
|
+
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement;
|
|
16
|
+
const applyPrecision = (value) => {
|
|
17
|
+
return value <= precisionTresholdRef.current ? 0 : value;
|
|
18
|
+
};
|
|
19
|
+
const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
|
|
20
|
+
const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
|
|
21
|
+
setOverflow({
|
|
22
|
+
top: applyPrecision(scrollTop),
|
|
23
|
+
bottom: applyPrecision(bottomOverflow),
|
|
24
|
+
left: applyPrecision(scrollLeft),
|
|
25
|
+
right: applyPrecision(rightOverflow)
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}, [scrollRef]);
|
|
10
29
|
useEffect(() => {
|
|
11
|
-
const checkScrollContent = () => {
|
|
12
|
-
const scrollElement2 = scrollRef.current;
|
|
13
|
-
if (scrollElement2) {
|
|
14
|
-
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement2;
|
|
15
|
-
const applyPrecision = (value) => {
|
|
16
|
-
return value <= precisionTreshold ? 0 : value;
|
|
17
|
-
};
|
|
18
|
-
const rightOverflow = scrollWidth - (scrollLeft + clientWidth);
|
|
19
|
-
const bottomOverflow = scrollHeight - (scrollTop + clientHeight);
|
|
20
|
-
setOverflow({
|
|
21
|
-
top: applyPrecision(scrollTop),
|
|
22
|
-
bottom: applyPrecision(bottomOverflow),
|
|
23
|
-
left: applyPrecision(scrollLeft),
|
|
24
|
-
right: applyPrecision(rightOverflow)
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
30
|
checkScrollContent();
|
|
29
31
|
const scrollElement = scrollRef.current;
|
|
30
32
|
if (scrollElement) {
|
|
@@ -37,8 +39,11 @@ function useScrollOverflow(scrollRef, { precisionTreshold = 0 } = {}) {
|
|
|
37
39
|
window.removeEventListener("resize", checkScrollContent);
|
|
38
40
|
}
|
|
39
41
|
};
|
|
40
|
-
}, [scrollRef]);
|
|
41
|
-
return
|
|
42
|
+
}, [scrollRef, checkScrollContent]);
|
|
43
|
+
return {
|
|
44
|
+
overflow,
|
|
45
|
+
refresh: checkScrollContent
|
|
46
|
+
};
|
|
42
47
|
}
|
|
43
48
|
export {
|
|
44
49
|
useScrollOverflow
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react'\n\nexport interface ScrollOverflow {\n top: number\n bottom: number\n left: number\n right: number\n}\n\nexport function useScrollOverflow(\n scrollRef: RefObject<HTMLElement | null>,\n /**\n * Tolerance threshold for floating-point precision issues.\n * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n */\n { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n):
|
|
1
|
+
{"version":3,"sources":["../../src/use-scroll-overflow/useScrollOverflow.tsx"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface ScrollOverflow {\n top: number\n bottom: number\n left: number\n right: number\n}\n\nexport interface UseScrollOverflowReturn {\n overflow: ScrollOverflow\n refresh: () => void\n}\n\nexport function useScrollOverflow(\n scrollRef: RefObject<HTMLElement | null>,\n /**\n * Tolerance threshold for floating-point precision issues.\n * Values below this threshold are considered as \"no overflow\" to handle sub-pixel rendering artifacts.\n */\n { precisionTreshold = 0 }: { precisionTreshold?: number } = {}\n): UseScrollOverflowReturn {\n const [overflow, setOverflow] = useState<ScrollOverflow>({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n })\n\n const precisionTresholdRef = useRef(precisionTreshold)\n precisionTresholdRef.current = precisionTreshold\n\n const checkScrollContent = useCallback(() => {\n const scrollElement = scrollRef.current\n\n if (scrollElement) {\n const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n scrollElement\n\n const applyPrecision = (value: number): number => {\n return value <= precisionTresholdRef.current ? 0 : value\n }\n\n const rightOverflow = scrollWidth - (scrollLeft + clientWidth)\n const bottomOverflow = scrollHeight - (scrollTop + clientHeight)\n\n setOverflow({\n top: applyPrecision(scrollTop),\n bottom: applyPrecision(bottomOverflow),\n left: applyPrecision(scrollLeft),\n right: applyPrecision(rightOverflow),\n })\n }\n }, [scrollRef])\n\n useEffect(() => {\n checkScrollContent()\n\n const scrollElement = scrollRef.current\n if (scrollElement) {\n scrollElement.addEventListener('scroll', checkScrollContent)\n window.addEventListener('resize', checkScrollContent)\n }\n\n return () => {\n if (scrollElement) {\n scrollElement.removeEventListener('scroll', checkScrollContent)\n window.removeEventListener('resize', checkScrollContent)\n }\n }\n }, [scrollRef, checkScrollContent])\n\n return {\n overflow,\n refresh: checkScrollContent,\n }\n}\n"],"mappings":";AAAA,SAAoB,aAAa,WAAW,QAAQ,gBAAgB;AAc7D,SAAS,kBACd,WAKA,EAAE,oBAAoB,EAAE,IAAoC,CAAC,GACpC;AACzB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAyB;AAAA,IACvD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,gBAAgB,UAAU;AAEhC,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,YAAY,IAClF;AAEF,YAAM,iBAAiB,CAAC,UAA0B;AAChD,eAAO,SAAS,qBAAqB,UAAU,IAAI;AAAA,MACrD;AAEA,YAAM,gBAAgB,eAAe,aAAa;AAClD,YAAM,iBAAiB,gBAAgB,YAAY;AAEnD,kBAAY;AAAA,QACV,KAAK,eAAe,SAAS;AAAA,QAC7B,QAAQ,eAAe,cAAc;AAAA,QACrC,MAAM,eAAe,UAAU;AAAA,QAC/B,OAAO,eAAe,aAAa;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,uBAAmB;AAEnB,UAAM,gBAAgB,UAAU;AAChC,QAAI,eAAe;AACjB,oBAAc,iBAAiB,UAAU,kBAAkB;AAC3D,aAAO,iBAAiB,UAAU,kBAAkB;AAAA,IACtD;AAEA,WAAO,MAAM;AACX,UAAI,eAAe;AACjB,sBAAc,oBAAoB,UAAU,kBAAkB;AAC9D,eAAO,oBAAoB,UAAU,kBAAkB;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,kBAAkB,CAAC;AAElC,SAAO;AAAA,IACL;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/hooks",
|
|
3
|
-
"version": "11.1
|
|
3
|
+
"version": "11.2.1",
|
|
4
4
|
"description": "Common hooks for Spark UI",
|
|
5
5
|
"exports": {
|
|
6
6
|
"./*": {
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
},
|
|
50
50
|
"homepage": "https://sparkui.vercel.app",
|
|
51
51
|
"license": "MIT",
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "a92cb7950a5637402c5f13ab9cd16f6d2d6726bc"
|
|
53
53
|
}
|