@zag-js/remove-scroll 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,4 +1,30 @@
-// ../dom/dist/index.js
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  preventBodyScroll: () => preventBodyScroll
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../dom/dist/index.mjs
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
   const agent = navigator.userAgentData;
@@ -79,6 +105,7 @@ function preventBodyScroll(_document) {
     body.removeAttribute(LOCK_CLASSNAME);
   };
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   preventBodyScroll
-};
+});

package/dist/index.mjs

@@ -0,0 +1,84 @@
+// ../dom/dist/index.mjs
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  const agent = navigator.userAgentData;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+var isIos = () => isApple() && !isMac();
+
+// src/index.ts
+var LOCK_CLASSNAME = "data-scroll-lock";
+function assignStyle(el, style) {
+  if (!el)
+    return () => {
+    };
+  const previousStyle = el.style.cssText;
+  Object.assign(el.style, style);
+  return () => {
+    el.style.cssText = previousStyle;
+  };
+}
+function setCSSProperty(el, property, value) {
+  if (!el)
+    return () => {
+    };
+  const previousValue = el.style.getPropertyValue(property);
+  el.style.setProperty(property, value);
+  return () => {
+    if (previousValue) {
+      el.style.setProperty(property, previousValue);
+    } else {
+      el.style.removeProperty(property);
+    }
+  };
+}
+function getPaddingProperty(documentElement) {
+  const documentLeft = documentElement.getBoundingClientRect().left;
+  const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
+  return scrollbarX ? "paddingLeft" : "paddingRight";
+}
+function preventBodyScroll(_document) {
+  const doc = _document ?? document;
+  const win = doc.defaultView ?? window;
+  const { documentElement, body } = doc;
+  const locked = body.hasAttribute(LOCK_CLASSNAME);
+  if (locked)
+    return;
+  body.setAttribute(LOCK_CLASSNAME, "");
+  const scrollbarWidth = win.innerWidth - documentElement.clientWidth;
+  const setScrollbarWidthProperty = () => setCSSProperty(documentElement, "--scrollbar-width", `${scrollbarWidth}px`);
+  const paddingProperty = getPaddingProperty(documentElement);
+  const setStyle = () => assignStyle(body, {
+    overflow: "hidden",
+    [paddingProperty]: `${scrollbarWidth}px`
+  });
+  const setIOSStyle = () => {
+    const { scrollX, scrollY, visualViewport } = win;
+    const offsetLeft = (visualViewport == null ? void 0 : visualViewport.offsetLeft) ?? 0;
+    const offsetTop = (visualViewport == null ? void 0 : visualViewport.offsetTop) ?? 0;
+    const restoreStyle = assignStyle(body, {
+      position: "fixed",
+      overflow: "hidden",
+      top: `${-(scrollY - Math.floor(offsetTop))}px`,
+      left: `${-(scrollX - Math.floor(offsetLeft))}px`,
+      right: "0",
+      [paddingProperty]: `${scrollbarWidth}px`
+    });
+    return () => {
+      restoreStyle();
+      win.scrollTo(scrollX, scrollY);
+    };
+  };
+  const cleanups = [setScrollbarWidthProperty(), isIos() ? setIOSStyle() : setStyle()];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup());
+    body.removeAttribute(LOCK_CLASSNAME);
+  };
+}
+export {
+  preventBodyScroll
+};

package/package.json

@@ -1,8 +1,10 @@
 {
-  "type": "module",
   "name": "@zag-js/remove-scroll",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "JavaScript utility to remove scroll on body",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "utils",
@@ -11,8 +13,6 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/remove-scroll",
   "sideEffects": false,
   "files": [
@@ -22,15 +22,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.12"
+    "@zag-js/dom-utils": "0.1.13"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm --dts",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir tests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand -u",