@simplybusiness/mobius 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file, or link in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.8.0] - 2023-08-01
+
+### Added
+
+- Added custom `useBodyScrollLock` hook to prevent scrolling of body when modal is open
+
 ## [3.7.0] - 2023-07-31
 
 ### Added
@@ -278,6 +284,7 @@ Additionally, mobius and themes are available on the public NPM registry and can
 
 ## Github Links
 
+[3.8.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.8.0
 [3.7.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.7.1
 [3.7.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.7.0
 [3.6.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.6.2

package/dist/cjs/components/Modal/Modal.js

@@ -10,9 +10,11 @@ const react_1 = require("react");
 const react_modal_1 = __importDefault(require("react-modal"));
 const clsx_1 = __importDefault(require("clsx"));
 const sizeClasses_1 = require("../../utils/sizeClasses");
+const useBodyScrollLock_1 = require("../../hooks/useBodyScrollLock");
 const Modal = ({ isOpen, onClose, children, className, closeLabel, size = "md", appElement = "body", preventCloseOnEsc, animation, shouldFocusAfterRender = true, parentSelector, }) => {
     const noPreference = window.matchMedia("(prefers-reduced-motion: no-preference)");
     const shouldAnimate = noPreference.matches && !!animation;
+    (0, useBodyScrollLock_1.useBodyScrollLock)({ enabled: isOpen });
     const modalClasses = (0, clsx_1.default)("mobius", "mobius/Modal", Object.assign({ "--slide-up": animation === "slideUp", "--fade": animation === "fade", "--has-reduced-motion": !noPreference.matches, "--is-fullscreen": size === "fullscreen" }, (size !== "fullscreen" && (0, sizeClasses_1.sizeClasses)(size))), className);
     const overlayClasses = (0, clsx_1.default)("mobius/ModalOverlay", {
         "--fade": shouldAnimate,

package/dist/cjs/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;AAEb,iCAMe;AACf,8DAAqC;AACrC,gDAAwB;AAExB,yDAAsD;AAmBtD,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,MAAM,EACnB,iBAAiB,EACjB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,cAAc,GACH,EAAE,EAAE;IACf,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CACpC,yCAAyC,CAC1C,CAAC;IACF,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,CAAC;IAE1D,MAAM,YAAY,GAAG,IAAA,cAAI,EACvB,QAAQ,EACR,cAAc,kBAEZ,YAAY,EAAE,SAAS,KAAK,SAAS,EACrC,QAAQ,EAAE,SAAS,KAAK,MAAM,EAC9B,sBAAsB,EAAE,CAAC,YAAY,CAAC,OAAO,EAC7C,iBAAiB,EAAE,IAAI,KAAK,YAAY,IACrC,CAAC,IAAI,KAAK,YAAY,IAAI,IAAA,yBAAW,EAAC,IAAI,CAAC,CAAC,GAEjD,SAAS,CACV,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,cAAI,EAAC,qBAAqB,EAAE;QACjD,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,wDAAwD;QACxD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;YACnC,qBAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,uBAAC,qBAAU,kBACT,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,cAAc;SAC5B,EACD,eAAe,EAAC,oBAAoB,EACpC,gBAAgB,EAAE;YAChB,IAAI,EAAE,cAAc;YACpB,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,cAAc;SAC5B,EACD,iBAAiB,EAAC,uBAAuB,EACzC,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAC5C,gBAAgB,EAAE,CAAC,iBAAiB,EACpC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACvC,sBAAsB,EAAE,sBAAsB,EAC9C,cAAc,EAAE,cAAc,gBAE7B,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;YAC9B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;gBACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,EAAE;oBACzB,OAAO;oBACP,UAAU;iBACJ,CAAC,CAAC;aACX;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,IACS,CACd,CAAC;AACJ,CAAC,CAAC;AAGO,sBAAK;AADd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;AAEb,iCAMe;AACf,8DAAqC;AACrC,gDAAwB;AAExB,yDAAsD;AACtD,qEAAkE;AAmBlE,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,MAAM,EACnB,iBAAiB,EACjB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,cAAc,GACH,EAAE,EAAE;IACf,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CACpC,yCAAyC,CAC1C,CAAC;IACF,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,CAAC;IAC1D,IAAA,qCAAiB,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAG,IAAA,cAAI,EACvB,QAAQ,EACR,cAAc,kBAEZ,YAAY,EAAE,SAAS,KAAK,SAAS,EACrC,QAAQ,EAAE,SAAS,KAAK,MAAM,EAC9B,sBAAsB,EAAE,CAAC,YAAY,CAAC,OAAO,EAC7C,iBAAiB,EAAE,IAAI,KAAK,YAAY,IACrC,CAAC,IAAI,KAAK,YAAY,IAAI,IAAA,yBAAW,EAAC,IAAI,CAAC,CAAC,GAEjD,SAAS,CACV,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,cAAI,EAAC,qBAAqB,EAAE;QACjD,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,wDAAwD;QACxD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE;YACnC,qBAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,uBAAC,qBAAU,kBACT,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,cAAc;SAC5B,EACD,eAAe,EAAC,oBAAoB,EACpC,gBAAgB,EAAE;YAChB,IAAI,EAAE,cAAc;YACpB,SAAS,EAAE,EAAE;YACb,WAAW,EAAE,cAAc;SAC5B,EACD,iBAAiB,EAAC,uBAAuB,EACzC,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAC5C,gBAAgB,EAAE,CAAC,iBAAiB,EACpC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACvC,sBAAsB,EAAE,sBAAsB,EAC9C,cAAc,EAAE,cAAc,gBAE7B,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;YAC9B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;gBACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,EAAE;oBACzB,OAAO;oBACP,UAAU;iBACJ,CAAC,CAAC;aACX;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,IACS,CACd,CAAC;AACJ,CAAC,CAAC;AAGO,sBAAK;AADd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/cjs/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useBreakpoint";
 export * from "./useHideColumns";
 export * from "./useButton";
+export * from "./useBodyScrollLock";

package/dist/cjs/hooks/index.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useBreakpoint"), exports);
 __exportStar(require("./useHideColumns"), exports);
 __exportStar(require("./useButton"), exports);
+__exportStar(require("./useBodyScrollLock"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC;AAChC,mDAAiC;AACjC,8CAA4B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC;AAChC,mDAAiC;AACjC,8CAA4B;AAC5B,sDAAoC"}

package/dist/cjs/hooks/useBodyScrollLock/index.d.ts

@@ -0,0 +1 @@
+export * from "./useBodyScrollLock";

package/dist/cjs/hooks/useBodyScrollLock/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useBodyScrollLock"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/hooks/useBodyScrollLock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/hooks/useBodyScrollLock/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sDAAoC"}

package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.d.ts

@@ -0,0 +1,3 @@
+export declare function useBodyScrollLock({ enabled, }?: {
+    enabled?: boolean;
+}): void;

package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBodyScrollLock = void 0;
+const react_1 = require("react");
+function useBodyScrollLock({ enabled = true, } = {}) {
+    function disableScrollLock() {
+        document.body.style.removeProperty("overflow");
+    }
+    function enableScrollLock() {
+        document.body.style.overflow = "hidden";
+    }
+    (0, react_1.useEffect)(() => {
+        if (enabled) {
+            enableScrollLock();
+        }
+        else {
+            disableScrollLock();
+        }
+        return () => {
+            disableScrollLock();
+        };
+    }, [enabled]);
+}
+exports.useBodyScrollLock = useBodyScrollLock;
+//# sourceMappingURL=useBodyScrollLock.js.map

package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBodyScrollLock.js","sourceRoot":"","sources":["../../../../src/hooks/useBodyScrollLock/useBodyScrollLock.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC,SAAgB,iBAAiB,CAAC,EAChC,OAAO,GAAG,IAAI,MACW,EAAE;IAC3B,SAAS,iBAAiB;QACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACjD,CAAC;IAED,SAAS,gBAAgB;QACvB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE;YACX,gBAAgB,EAAE,CAAC;SACpB;aAAM;YACL,iBAAiB,EAAE,CAAC;SACrB;QAED,OAAO,GAAG,EAAE;YACV,iBAAiB,EAAE,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB,CAAC;AAtBD,8CAsBC"}

package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.test.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const useBodyScrollLock_1 = require("./useBodyScrollLock");
+describe("useBodyScrollLock", () => {
+    it("should be defined", () => {
+        expect(useBodyScrollLock_1.useBodyScrollLock).toBeDefined();
+    });
+    it("should not throw", () => {
+        expect(() => (0, react_1.renderHook)(() => (0, useBodyScrollLock_1.useBodyScrollLock)())).not.toThrow();
+    });
+    it("should disable scroll by default", () => {
+        (0, react_1.renderHook)(() => (0, useBodyScrollLock_1.useBodyScrollLock)());
+        expect(document.body.style.overflow).toBe("hidden");
+    });
+    it("should disable scroll when enabled is true", () => {
+        (0, react_1.renderHook)(() => (0, useBodyScrollLock_1.useBodyScrollLock)({ enabled: true }));
+        expect(document.body.style.overflow).toBe("hidden");
+    });
+    it("should enable scroll when enabled is false", () => {
+        (0, react_1.renderHook)(() => (0, useBodyScrollLock_1.useBodyScrollLock)({ enabled: false }));
+        expect(document.body.style.overflow).toBe("");
+    });
+    it("should enable scroll on unmount", () => {
+        const { unmount } = (0, react_1.renderHook)(() => (0, useBodyScrollLock_1.useBodyScrollLock)());
+        expect(document.body.style.overflow).toBe("hidden");
+        unmount();
+        expect(document.body.style.overflow).toBe("");
+    });
+});
+//# sourceMappingURL=useBodyScrollLock.test.js.map

package/dist/cjs/hooks/useBodyScrollLock/useBodyScrollLock.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBodyScrollLock.test.js","sourceRoot":"","sources":["../../../../src/hooks/useBodyScrollLock/useBodyScrollLock.test.ts"],"names":[],"mappings":";;AAAA,kDAAoD;AACpD,2DAAwD;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,CAAC,qCAAiB,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC1B,MAAM,CAAC,GAAG,EAAE,CAAC,IAAA,kBAAU,EAAC,GAAG,EAAE,CAAC,IAAA,qCAAiB,GAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,IAAA,kBAAU,EAAC,GAAG,EAAE,CAAC,IAAA,qCAAiB,GAAE,CAAC,CAAC;QACtC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,IAAA,kBAAU,EAAC,GAAG,EAAE,CAAC,IAAA,qCAAiB,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,IAAA,kBAAU,EAAC,GAAG,EAAE,CAAC,IAAA,qCAAiB,EAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACxD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,kBAAU,EAAC,GAAG,EAAE,CAAC,IAAA,qCAAiB,GAAE,CAAC,CAAC;QAC1D,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC;QACV,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}