@spark-ui/hooks 10.8.2 → 10.9.0
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 +7 -0
- package/dist/use-scroll-overflow/index.d.mts +11 -0
- package/dist/use-scroll-overflow/index.d.ts +11 -0
- package/dist/use-scroll-overflow/index.js +68 -0
- package/dist/use-scroll-overflow/index.js.map +1 -0
- package/dist/use-scroll-overflow/index.mjs +41 -0
- package/dist/use-scroll-overflow/index.mjs.map +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
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
|
+
# [10.9.0](https://github.com/leboncoin/spark-web/compare/v10.8.2...v10.9.0) (2025-07-01)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **components:** added fade scroll indicator on Drawer ([4bc8f20](https://github.com/leboncoin/spark-web/commit/4bc8f2008a4daa12c13060b91929b5dc73eaaf2c))
|
|
11
|
+
- **components:** fade scroll effect on Dialog ([4b5d171](https://github.com/leboncoin/spark-web/commit/4b5d171a20e6433a61bbd6ccf7b680aa1e74c0ed))
|
|
12
|
+
|
|
6
13
|
## [10.8.2](https://github.com/leboncoin/spark-web/compare/v10.8.1...v10.8.2) (2025-07-01)
|
|
7
14
|
|
|
8
15
|
**Note:** Version bump only for package @spark-ui/hooks
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
interface ScrollOverflow {
|
|
4
|
+
top: number;
|
|
5
|
+
bottom: number;
|
|
6
|
+
left: number;
|
|
7
|
+
right: number;
|
|
8
|
+
}
|
|
9
|
+
declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>): ScrollOverflow;
|
|
10
|
+
|
|
11
|
+
export { type ScrollOverflow, useScrollOverflow };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
interface ScrollOverflow {
|
|
4
|
+
top: number;
|
|
5
|
+
bottom: number;
|
|
6
|
+
left: number;
|
|
7
|
+
right: number;
|
|
8
|
+
}
|
|
9
|
+
declare function useScrollOverflow(scrollRef: RefObject<HTMLElement | null>): ScrollOverflow;
|
|
10
|
+
|
|
11
|
+
export { type ScrollOverflow, useScrollOverflow };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/use-scroll-overflow/index.ts
|
|
21
|
+
var use_scroll_overflow_exports = {};
|
|
22
|
+
__export(use_scroll_overflow_exports, {
|
|
23
|
+
useScrollOverflow: () => useScrollOverflow
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(use_scroll_overflow_exports);
|
|
26
|
+
|
|
27
|
+
// src/use-scroll-overflow/useScrollOverflow.tsx
|
|
28
|
+
var import_react = require("react");
|
|
29
|
+
function useScrollOverflow(scrollRef) {
|
|
30
|
+
const [overflow, setOverflow] = (0, import_react.useState)({
|
|
31
|
+
top: 0,
|
|
32
|
+
bottom: 0,
|
|
33
|
+
left: 0,
|
|
34
|
+
right: 0
|
|
35
|
+
});
|
|
36
|
+
(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
|
+
setOverflow({
|
|
42
|
+
top: scrollTop,
|
|
43
|
+
bottom: scrollHeight - (scrollTop + clientHeight),
|
|
44
|
+
left: scrollLeft,
|
|
45
|
+
right: scrollWidth - (scrollLeft + clientWidth)
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
checkScrollContent();
|
|
50
|
+
const scrollElement = scrollRef.current;
|
|
51
|
+
if (scrollElement) {
|
|
52
|
+
scrollElement.addEventListener("scroll", checkScrollContent);
|
|
53
|
+
window.addEventListener("resize", checkScrollContent);
|
|
54
|
+
}
|
|
55
|
+
return () => {
|
|
56
|
+
if (scrollElement) {
|
|
57
|
+
scrollElement.removeEventListener("scroll", checkScrollContent);
|
|
58
|
+
window.addEventListener("resize", checkScrollContent);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
}, [scrollRef]);
|
|
62
|
+
return overflow;
|
|
63
|
+
}
|
|
64
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
65
|
+
0 && (module.exports = {
|
|
66
|
+
useScrollOverflow
|
|
67
|
+
});
|
|
68
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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(scrollRef: RefObject<HTMLElement | null>): ScrollOverflow {\n const [overflow, setOverflow] = useState<ScrollOverflow>({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n })\n\n useEffect(() => {\n const checkScrollContent = () => {\n const scrollElement = scrollRef.current\n\n if (scrollElement) {\n const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n scrollElement\n\n setOverflow({\n top: scrollTop,\n bottom: scrollHeight - (scrollTop + clientHeight),\n left: scrollLeft,\n right: scrollWidth - (scrollLeft + clientWidth),\n })\n }\n }\n\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.addEventListener('resize', checkScrollContent)\n }\n }\n }, [scrollRef])\n\n return overflow\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA+C;AASxC,SAAS,kBAAkB,WAA0D;AAC1F,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAyB;AAAA,IACvD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AAED,8BAAU,MAAM;AACd,UAAM,qBAAqB,MAAM;AAC/B,YAAMA,iBAAgB,UAAU;AAEhC,UAAIA,gBAAe;AACjB,cAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,YAAY,IAClFA;AAEF,oBAAY;AAAA,UACV,KAAK;AAAA,UACL,QAAQ,gBAAgB,YAAY;AAAA,UACpC,MAAM;AAAA,UACN,OAAO,eAAe,aAAa;AAAA,QACrC,CAAC;AAAA,MACH;AAAA,IACF;AAEA,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,iBAAiB,UAAU,kBAAkB;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AACT;","names":["scrollElement"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
// src/use-scroll-overflow/useScrollOverflow.tsx
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
function useScrollOverflow(scrollRef) {
|
|
4
|
+
const [overflow, setOverflow] = useState({
|
|
5
|
+
top: 0,
|
|
6
|
+
bottom: 0,
|
|
7
|
+
left: 0,
|
|
8
|
+
right: 0
|
|
9
|
+
});
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const checkScrollContent = () => {
|
|
12
|
+
const scrollElement2 = scrollRef.current;
|
|
13
|
+
if (scrollElement2) {
|
|
14
|
+
const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = scrollElement2;
|
|
15
|
+
setOverflow({
|
|
16
|
+
top: scrollTop,
|
|
17
|
+
bottom: scrollHeight - (scrollTop + clientHeight),
|
|
18
|
+
left: scrollLeft,
|
|
19
|
+
right: scrollWidth - (scrollLeft + clientWidth)
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
checkScrollContent();
|
|
24
|
+
const scrollElement = scrollRef.current;
|
|
25
|
+
if (scrollElement) {
|
|
26
|
+
scrollElement.addEventListener("scroll", checkScrollContent);
|
|
27
|
+
window.addEventListener("resize", checkScrollContent);
|
|
28
|
+
}
|
|
29
|
+
return () => {
|
|
30
|
+
if (scrollElement) {
|
|
31
|
+
scrollElement.removeEventListener("scroll", checkScrollContent);
|
|
32
|
+
window.addEventListener("resize", checkScrollContent);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}, [scrollRef]);
|
|
36
|
+
return overflow;
|
|
37
|
+
}
|
|
38
|
+
export {
|
|
39
|
+
useScrollOverflow
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +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(scrollRef: RefObject<HTMLElement | null>): ScrollOverflow {\n const [overflow, setOverflow] = useState<ScrollOverflow>({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n })\n\n useEffect(() => {\n const checkScrollContent = () => {\n const scrollElement = scrollRef.current\n\n if (scrollElement) {\n const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n scrollElement\n\n setOverflow({\n top: scrollTop,\n bottom: scrollHeight - (scrollTop + clientHeight),\n left: scrollLeft,\n right: scrollWidth - (scrollLeft + clientWidth),\n })\n }\n }\n\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.addEventListener('resize', checkScrollContent)\n }\n }\n }, [scrollRef])\n\n return overflow\n}\n"],"mappings":";AAAA,SAAoB,WAAW,gBAAgB;AASxC,SAAS,kBAAkB,WAA0D;AAC1F,QAAM,CAAC,UAAU,WAAW,IAAI,SAAyB;AAAA,IACvD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,UAAM,qBAAqB,MAAM;AAC/B,YAAMA,iBAAgB,UAAU;AAEhC,UAAIA,gBAAe;AACjB,cAAM,EAAE,WAAW,cAAc,cAAc,YAAY,aAAa,YAAY,IAClFA;AAEF,oBAAY;AAAA,UACV,KAAK;AAAA,UACL,QAAQ,gBAAgB,YAAY;AAAA,UACpC,MAAM;AAAA,UACN,OAAO,eAAe,aAAa;AAAA,QACrC,CAAC;AAAA,MACH;AAAA,IACF;AAEA,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,iBAAiB,UAAU,kBAAkB;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AACT;","names":["scrollElement"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/hooks",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.9.0",
|
|
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": "4691d05bd0265c6d427343bf4980fe0590d86a9a"
|
|
53
53
|
}
|