@zag-js/remove-scroll 0.70.0 → 0.72.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/dist/index.js +6 -30
- package/dist/index.mjs +4 -5
- package/package.json +4 -5
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/index.ts +0 -84
package/dist/index.js
CHANGED
|
@@ -1,29 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
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);
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var domQuery = require('@zag-js/dom-query');
|
|
19
4
|
|
|
20
5
|
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
preventBodyScroll: () => preventBodyScroll
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(src_exports);
|
|
26
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
27
6
|
var LOCK_CLASSNAME = "data-zag-scroll-lock";
|
|
28
7
|
function assignStyle(el, style) {
|
|
29
8
|
if (!el) return;
|
|
@@ -81,14 +60,11 @@ function preventBodyScroll(_document) {
|
|
|
81
60
|
win.scrollTo({ left: scrollX, top: scrollY, behavior: "instant" });
|
|
82
61
|
};
|
|
83
62
|
};
|
|
84
|
-
const cleanups = [setScrollbarWidthProperty(),
|
|
63
|
+
const cleanups = [setScrollbarWidthProperty(), domQuery.isIos() ? setIOSStyle() : setStyle()];
|
|
85
64
|
return () => {
|
|
86
65
|
cleanups.forEach((fn) => fn?.());
|
|
87
66
|
body.removeAttribute(LOCK_CLASSNAME);
|
|
88
67
|
};
|
|
89
68
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
preventBodyScroll
|
|
93
|
-
});
|
|
94
|
-
//# sourceMappingURL=index.js.map
|
|
69
|
+
|
|
70
|
+
exports.preventBodyScroll = preventBodyScroll;
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { isIos } from '@zag-js/dom-query';
|
|
2
|
+
|
|
1
3
|
// src/index.ts
|
|
2
|
-
import { isIos } from "@zag-js/dom-query";
|
|
3
4
|
var LOCK_CLASSNAME = "data-zag-scroll-lock";
|
|
4
5
|
function assignStyle(el, style) {
|
|
5
6
|
if (!el) return;
|
|
@@ -63,7 +64,5 @@ function preventBodyScroll(_document) {
|
|
|
63
64
|
body.removeAttribute(LOCK_CLASSNAME);
|
|
64
65
|
};
|
|
65
66
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
};
|
|
69
|
-
//# sourceMappingURL=index.mjs.map
|
|
67
|
+
|
|
68
|
+
export { preventBodyScroll };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/remove-scroll",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.72.0",
|
|
4
4
|
"description": "JavaScript utility to remove scroll on body",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -13,14 +13,13 @@
|
|
|
13
13
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/remove-scroll",
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"files": [
|
|
16
|
-
"dist"
|
|
17
|
-
"src"
|
|
16
|
+
"dist"
|
|
18
17
|
],
|
|
19
18
|
"publishConfig": {
|
|
20
19
|
"access": "public"
|
|
21
20
|
},
|
|
22
21
|
"dependencies": {
|
|
23
|
-
"@zag-js/dom-query": "0.
|
|
22
|
+
"@zag-js/dom-query": "0.72.0"
|
|
24
23
|
},
|
|
25
24
|
"devDependencies": {
|
|
26
25
|
"clean-package": "2.2.0"
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
},
|
|
43
42
|
"scripts": {
|
|
44
43
|
"build": "tsup",
|
|
45
|
-
"test": "
|
|
44
|
+
"test": "vitest",
|
|
46
45
|
"lint": "eslint src",
|
|
47
46
|
"test-ci": "pnpm test --ci --runInBand -u",
|
|
48
47
|
"test-watch": "pnpm test --watchAll"
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isIos } from \"@zag-js/dom-query\"\n\nconst LOCK_CLASSNAME = \"data-zag-scroll-lock\"\n\nfunction assignStyle(el: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>) {\n if (!el) return\n const previousStyle = el.style.cssText\n Object.assign(el.style, style)\n return () => {\n el.style.cssText = previousStyle\n }\n}\n\nfunction setCSSProperty(el: HTMLElement | null | undefined, property: string, value: string) {\n if (!el) return\n const previousValue = el.style.getPropertyValue(property)\n el.style.setProperty(property, value)\n return () => {\n if (previousValue) {\n el.style.setProperty(property, previousValue)\n } else {\n el.style.removeProperty(property)\n }\n }\n}\n\nfunction getPaddingProperty(documentElement: HTMLElement) {\n // RTL <body> scrollbar\n const documentLeft = documentElement.getBoundingClientRect().left\n const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft\n return scrollbarX ? \"paddingLeft\" : \"paddingRight\"\n}\n\nexport function preventBodyScroll(_document?: Document) {\n const doc = _document ?? document\n const win = doc.defaultView ?? window\n\n const { documentElement, body } = doc\n\n const locked = body.hasAttribute(LOCK_CLASSNAME)\n if (locked) return\n\n body.setAttribute(LOCK_CLASSNAME, \"\")\n\n const scrollbarWidth = win.innerWidth - documentElement.clientWidth\n const setScrollbarWidthProperty = () => setCSSProperty(documentElement, \"--scrollbar-width\", `${scrollbarWidth}px`)\n const paddingProperty = getPaddingProperty(documentElement)\n\n const setStyle = () =>\n assignStyle(body, {\n overflow: \"hidden\",\n [paddingProperty]: `${scrollbarWidth}px`,\n })\n\n // Only iOS doesn't respect `overflow: hidden` on document.body\n const setIOSStyle = () => {\n const { scrollX, scrollY, visualViewport } = win\n\n // iOS 12 does not support `visuaViewport`.\n const offsetLeft = visualViewport?.offsetLeft ?? 0\n const offsetTop = visualViewport?.offsetTop ?? 0\n\n const restoreStyle = assignStyle(body, {\n position: \"fixed\",\n overflow: \"hidden\",\n top: `${-(scrollY - Math.floor(offsetTop))}px`,\n left: `${-(scrollX - Math.floor(offsetLeft))}px`,\n right: \"0\",\n [paddingProperty]: `${scrollbarWidth}px`,\n })\n\n return () => {\n restoreStyle?.()\n win.scrollTo({ left: scrollX, top: scrollY, behavior: \"instant\" })\n }\n }\n\n const cleanups = [setScrollbarWidthProperty(), isIos() ? setIOSStyle() : setStyle()]\n\n return () => {\n cleanups.forEach((fn) => fn?.())\n body.removeAttribute(LOCK_CLASSNAME)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AAEtB,IAAM,iBAAiB;AAEvB,SAAS,YAAY,IAAoC,OAAqC;AAC5F,MAAI,CAAC,GAAI;AACT,QAAM,gBAAgB,GAAG,MAAM;AAC/B,SAAO,OAAO,GAAG,OAAO,KAAK;AAC7B,SAAO,MAAM;AACX,OAAG,MAAM,UAAU;AAAA,EACrB;AACF;AAEA,SAAS,eAAe,IAAoC,UAAkB,OAAe;AAC3F,MAAI,CAAC,GAAI;AACT,QAAM,gBAAgB,GAAG,MAAM,iBAAiB,QAAQ;AACxD,KAAG,MAAM,YAAY,UAAU,KAAK;AACpC,SAAO,MAAM;AACX,QAAI,eAAe;AACjB,SAAG,MAAM,YAAY,UAAU,aAAa;AAAA,IAC9C,OAAO;AACL,SAAG,MAAM,eAAe,QAAQ;AAAA,IAClC;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,iBAA8B;AAExD,QAAM,eAAe,gBAAgB,sBAAsB,EAAE;AAC7D,QAAM,aAAa,KAAK,MAAM,YAAY,IAAI,gBAAgB;AAC9D,SAAO,aAAa,gBAAgB;AACtC;AAEO,SAAS,kBAAkB,WAAsB;AACtD,QAAM,MAAM,aAAa;AACzB,QAAM,MAAM,IAAI,eAAe;AAE/B,QAAM,EAAE,iBAAiB,KAAK,IAAI;AAElC,QAAM,SAAS,KAAK,aAAa,cAAc;AAC/C,MAAI,OAAQ;AAEZ,OAAK,aAAa,gBAAgB,EAAE;AAEpC,QAAM,iBAAiB,IAAI,aAAa,gBAAgB;AACxD,QAAM,4BAA4B,MAAM,eAAe,iBAAiB,qBAAqB,GAAG,cAAc,IAAI;AAClH,QAAM,kBAAkB,mBAAmB,eAAe;AAE1D,QAAM,WAAW,MACf,YAAY,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,CAAC,eAAe,GAAG,GAAG,cAAc;AAAA,EACtC,CAAC;AAGH,QAAM,cAAc,MAAM;AACxB,UAAM,EAAE,SAAS,SAAS,eAAe,IAAI;AAG7C,UAAM,aAAa,gBAAgB,cAAc;AACjD,UAAM,YAAY,gBAAgB,aAAa;AAE/C,UAAM,eAAe,YAAY,MAAM;AAAA,MACrC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK,GAAG,EAAE,UAAU,KAAK,MAAM,SAAS,EAAE;AAAA,MAC1C,MAAM,GAAG,EAAE,UAAU,KAAK,MAAM,UAAU,EAAE;AAAA,MAC5C,OAAO;AAAA,MACP,CAAC,eAAe,GAAG,GAAG,cAAc;AAAA,IACtC,CAAC;AAED,WAAO,MAAM;AACX,qBAAe;AACf,UAAI,SAAS,EAAE,MAAM,SAAS,KAAK,SAAS,UAAU,UAAU,CAAC;AAAA,IACnE;AAAA,EACF;AAEA,QAAM,WAAW,CAAC,0BAA0B,OAAG,wBAAM,IAAI,YAAY,IAAI,SAAS,CAAC;AAEnF,SAAO,MAAM;AACX,aAAS,QAAQ,CAAC,OAAO,KAAK,CAAC;AAC/B,SAAK,gBAAgB,cAAc;AAAA,EACrC;AACF;","names":[]}
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isIos } from \"@zag-js/dom-query\"\n\nconst LOCK_CLASSNAME = \"data-zag-scroll-lock\"\n\nfunction assignStyle(el: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>) {\n if (!el) return\n const previousStyle = el.style.cssText\n Object.assign(el.style, style)\n return () => {\n el.style.cssText = previousStyle\n }\n}\n\nfunction setCSSProperty(el: HTMLElement | null | undefined, property: string, value: string) {\n if (!el) return\n const previousValue = el.style.getPropertyValue(property)\n el.style.setProperty(property, value)\n return () => {\n if (previousValue) {\n el.style.setProperty(property, previousValue)\n } else {\n el.style.removeProperty(property)\n }\n }\n}\n\nfunction getPaddingProperty(documentElement: HTMLElement) {\n // RTL <body> scrollbar\n const documentLeft = documentElement.getBoundingClientRect().left\n const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft\n return scrollbarX ? \"paddingLeft\" : \"paddingRight\"\n}\n\nexport function preventBodyScroll(_document?: Document) {\n const doc = _document ?? document\n const win = doc.defaultView ?? window\n\n const { documentElement, body } = doc\n\n const locked = body.hasAttribute(LOCK_CLASSNAME)\n if (locked) return\n\n body.setAttribute(LOCK_CLASSNAME, \"\")\n\n const scrollbarWidth = win.innerWidth - documentElement.clientWidth\n const setScrollbarWidthProperty = () => setCSSProperty(documentElement, \"--scrollbar-width\", `${scrollbarWidth}px`)\n const paddingProperty = getPaddingProperty(documentElement)\n\n const setStyle = () =>\n assignStyle(body, {\n overflow: \"hidden\",\n [paddingProperty]: `${scrollbarWidth}px`,\n })\n\n // Only iOS doesn't respect `overflow: hidden` on document.body\n const setIOSStyle = () => {\n const { scrollX, scrollY, visualViewport } = win\n\n // iOS 12 does not support `visuaViewport`.\n const offsetLeft = visualViewport?.offsetLeft ?? 0\n const offsetTop = visualViewport?.offsetTop ?? 0\n\n const restoreStyle = assignStyle(body, {\n position: \"fixed\",\n overflow: \"hidden\",\n top: `${-(scrollY - Math.floor(offsetTop))}px`,\n left: `${-(scrollX - Math.floor(offsetLeft))}px`,\n right: \"0\",\n [paddingProperty]: `${scrollbarWidth}px`,\n })\n\n return () => {\n restoreStyle?.()\n win.scrollTo({ left: scrollX, top: scrollY, behavior: \"instant\" })\n }\n }\n\n const cleanups = [setScrollbarWidthProperty(), isIos() ? setIOSStyle() : setStyle()]\n\n return () => {\n cleanups.forEach((fn) => fn?.())\n body.removeAttribute(LOCK_CLASSNAME)\n }\n}\n"],"mappings":";AAAA,SAAS,aAAa;AAEtB,IAAM,iBAAiB;AAEvB,SAAS,YAAY,IAAoC,OAAqC;AAC5F,MAAI,CAAC,GAAI;AACT,QAAM,gBAAgB,GAAG,MAAM;AAC/B,SAAO,OAAO,GAAG,OAAO,KAAK;AAC7B,SAAO,MAAM;AACX,OAAG,MAAM,UAAU;AAAA,EACrB;AACF;AAEA,SAAS,eAAe,IAAoC,UAAkB,OAAe;AAC3F,MAAI,CAAC,GAAI;AACT,QAAM,gBAAgB,GAAG,MAAM,iBAAiB,QAAQ;AACxD,KAAG,MAAM,YAAY,UAAU,KAAK;AACpC,SAAO,MAAM;AACX,QAAI,eAAe;AACjB,SAAG,MAAM,YAAY,UAAU,aAAa;AAAA,IAC9C,OAAO;AACL,SAAG,MAAM,eAAe,QAAQ;AAAA,IAClC;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,iBAA8B;AAExD,QAAM,eAAe,gBAAgB,sBAAsB,EAAE;AAC7D,QAAM,aAAa,KAAK,MAAM,YAAY,IAAI,gBAAgB;AAC9D,SAAO,aAAa,gBAAgB;AACtC;AAEO,SAAS,kBAAkB,WAAsB;AACtD,QAAM,MAAM,aAAa;AACzB,QAAM,MAAM,IAAI,eAAe;AAE/B,QAAM,EAAE,iBAAiB,KAAK,IAAI;AAElC,QAAM,SAAS,KAAK,aAAa,cAAc;AAC/C,MAAI,OAAQ;AAEZ,OAAK,aAAa,gBAAgB,EAAE;AAEpC,QAAM,iBAAiB,IAAI,aAAa,gBAAgB;AACxD,QAAM,4BAA4B,MAAM,eAAe,iBAAiB,qBAAqB,GAAG,cAAc,IAAI;AAClH,QAAM,kBAAkB,mBAAmB,eAAe;AAE1D,QAAM,WAAW,MACf,YAAY,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,CAAC,eAAe,GAAG,GAAG,cAAc;AAAA,EACtC,CAAC;AAGH,QAAM,cAAc,MAAM;AACxB,UAAM,EAAE,SAAS,SAAS,eAAe,IAAI;AAG7C,UAAM,aAAa,gBAAgB,cAAc;AACjD,UAAM,YAAY,gBAAgB,aAAa;AAE/C,UAAM,eAAe,YAAY,MAAM;AAAA,MACrC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK,GAAG,EAAE,UAAU,KAAK,MAAM,SAAS,EAAE;AAAA,MAC1C,MAAM,GAAG,EAAE,UAAU,KAAK,MAAM,UAAU,EAAE;AAAA,MAC5C,OAAO;AAAA,MACP,CAAC,eAAe,GAAG,GAAG,cAAc;AAAA,IACtC,CAAC;AAED,WAAO,MAAM;AACX,qBAAe;AACf,UAAI,SAAS,EAAE,MAAM,SAAS,KAAK,SAAS,UAAU,UAAU,CAAC;AAAA,IACnE;AAAA,EACF;AAEA,QAAM,WAAW,CAAC,0BAA0B,GAAG,MAAM,IAAI,YAAY,IAAI,SAAS,CAAC;AAEnF,SAAO,MAAM;AACX,aAAS,QAAQ,CAAC,OAAO,KAAK,CAAC;AAC/B,SAAK,gBAAgB,cAAc;AAAA,EACrC;AACF;","names":[]}
|
package/src/index.ts
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { isIos } from "@zag-js/dom-query"
|
|
2
|
-
|
|
3
|
-
const LOCK_CLASSNAME = "data-zag-scroll-lock"
|
|
4
|
-
|
|
5
|
-
function assignStyle(el: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>) {
|
|
6
|
-
if (!el) return
|
|
7
|
-
const previousStyle = el.style.cssText
|
|
8
|
-
Object.assign(el.style, style)
|
|
9
|
-
return () => {
|
|
10
|
-
el.style.cssText = previousStyle
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function setCSSProperty(el: HTMLElement | null | undefined, property: string, value: string) {
|
|
15
|
-
if (!el) return
|
|
16
|
-
const previousValue = el.style.getPropertyValue(property)
|
|
17
|
-
el.style.setProperty(property, value)
|
|
18
|
-
return () => {
|
|
19
|
-
if (previousValue) {
|
|
20
|
-
el.style.setProperty(property, previousValue)
|
|
21
|
-
} else {
|
|
22
|
-
el.style.removeProperty(property)
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function getPaddingProperty(documentElement: HTMLElement) {
|
|
28
|
-
// RTL <body> scrollbar
|
|
29
|
-
const documentLeft = documentElement.getBoundingClientRect().left
|
|
30
|
-
const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft
|
|
31
|
-
return scrollbarX ? "paddingLeft" : "paddingRight"
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export function preventBodyScroll(_document?: Document) {
|
|
35
|
-
const doc = _document ?? document
|
|
36
|
-
const win = doc.defaultView ?? window
|
|
37
|
-
|
|
38
|
-
const { documentElement, body } = doc
|
|
39
|
-
|
|
40
|
-
const locked = body.hasAttribute(LOCK_CLASSNAME)
|
|
41
|
-
if (locked) return
|
|
42
|
-
|
|
43
|
-
body.setAttribute(LOCK_CLASSNAME, "")
|
|
44
|
-
|
|
45
|
-
const scrollbarWidth = win.innerWidth - documentElement.clientWidth
|
|
46
|
-
const setScrollbarWidthProperty = () => setCSSProperty(documentElement, "--scrollbar-width", `${scrollbarWidth}px`)
|
|
47
|
-
const paddingProperty = getPaddingProperty(documentElement)
|
|
48
|
-
|
|
49
|
-
const setStyle = () =>
|
|
50
|
-
assignStyle(body, {
|
|
51
|
-
overflow: "hidden",
|
|
52
|
-
[paddingProperty]: `${scrollbarWidth}px`,
|
|
53
|
-
})
|
|
54
|
-
|
|
55
|
-
// Only iOS doesn't respect `overflow: hidden` on document.body
|
|
56
|
-
const setIOSStyle = () => {
|
|
57
|
-
const { scrollX, scrollY, visualViewport } = win
|
|
58
|
-
|
|
59
|
-
// iOS 12 does not support `visuaViewport`.
|
|
60
|
-
const offsetLeft = visualViewport?.offsetLeft ?? 0
|
|
61
|
-
const offsetTop = visualViewport?.offsetTop ?? 0
|
|
62
|
-
|
|
63
|
-
const restoreStyle = assignStyle(body, {
|
|
64
|
-
position: "fixed",
|
|
65
|
-
overflow: "hidden",
|
|
66
|
-
top: `${-(scrollY - Math.floor(offsetTop))}px`,
|
|
67
|
-
left: `${-(scrollX - Math.floor(offsetLeft))}px`,
|
|
68
|
-
right: "0",
|
|
69
|
-
[paddingProperty]: `${scrollbarWidth}px`,
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
return () => {
|
|
73
|
-
restoreStyle?.()
|
|
74
|
-
win.scrollTo({ left: scrollX, top: scrollY, behavior: "instant" })
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
const cleanups = [setScrollbarWidthProperty(), isIos() ? setIOSStyle() : setStyle()]
|
|
79
|
-
|
|
80
|
-
return () => {
|
|
81
|
-
cleanups.forEach((fn) => fn?.())
|
|
82
|
-
body.removeAttribute(LOCK_CLASSNAME)
|
|
83
|
-
}
|
|
84
|
-
}
|