@nulogy/components 13.1.3 → 13.1.4

package/dist/main.js

@@ -355,12 +355,12 @@
     }
 
     var isBrowser$7 = typeof window !== "undefined";
-    var useIsomorphicLayoutEffect$4 = isBrowser$7 ? React.useLayoutEffect : React.useEffect;
+    var useIsomorphicLayoutEffect$5 = isBrowser$7 ? React.useLayoutEffect : React.useEffect;
 
     function useSnapshotOnUnmount(visualElement) {
         var syncLayout = React.useContext(SharedLayoutContext);
         var framerSyncLayout = React.useContext(FramerTreeLayoutContext);
-        useIsomorphicLayoutEffect$4(function () { return function () {
+        useIsomorphicLayoutEffect$5(function () { return function () {
             if (isSharedLayout(syncLayout)) {
                 syncLayout.remove(visualElement);
             }
@@ -391,7 +391,7 @@
                 blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
             });
         });
-        useIsomorphicLayoutEffect$4(function () {
+        useIsomorphicLayoutEffect$5(function () {
             visualElement.setProps(__assign$3(__assign$3(__assign$3({}, config), props), { layoutId: layoutId }));
             visualElement.isPresent = isPresent(presenceContext);
             visualElement.isPresenceRoot =
@@ -10719,225 +10719,6 @@
       };
     }
 
-    function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-    // Older browsers don't support event options, feature detect it.
-
-    // Adopted and modified solution from Bohdan Didukh (2017)
-    // https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
-
-    var hasPassiveEvents = false;
-    if (typeof window !== 'undefined') {
-      var passiveTestOptions = {
-        get passive() {
-          hasPassiveEvents = true;
-          return undefined;
-        }
-      };
-      window.addEventListener('testPassive', null, passiveTestOptions);
-      window.removeEventListener('testPassive', null, passiveTestOptions);
-    }
-
-    var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
-
-
-    var locks = [];
-    var documentListenerAdded = false;
-    var initialClientY = -1;
-    var previousBodyOverflowSetting = void 0;
-    var previousBodyPaddingRight = void 0;
-
-    // returns true if `el` should be allowed to receive touchmove events.
-    var allowTouchMove$1 = function allowTouchMove(el) {
-      return locks.some(function (lock) {
-        if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-          return true;
-        }
-
-        return false;
-      });
-    };
-
-    var preventDefault = function preventDefault(rawEvent) {
-      var e = rawEvent || window.event;
-
-      // For the case whereby consumers adds a touchmove event listener to document.
-      // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
-      // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
-      // the touchmove event on document will break.
-      if (allowTouchMove$1(e.target)) {
-        return true;
-      }
-
-      // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
-      if (e.touches.length > 1) return true;
-
-      if (e.preventDefault) e.preventDefault();
-
-      return false;
-    };
-
-    var setOverflowHidden = function setOverflowHidden(options) {
-      // If previousBodyPaddingRight is already set, don't set it again.
-      if (previousBodyPaddingRight === undefined) {
-        var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
-        var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-
-        if (_reserveScrollBarGap && scrollBarGap > 0) {
-          previousBodyPaddingRight = document.body.style.paddingRight;
-          document.body.style.paddingRight = scrollBarGap + 'px';
-        }
-      }
-
-      // If previousBodyOverflowSetting is already set, don't set it again.
-      if (previousBodyOverflowSetting === undefined) {
-        previousBodyOverflowSetting = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-      }
-    };
-
-    var restoreOverflowSetting = function restoreOverflowSetting() {
-      if (previousBodyPaddingRight !== undefined) {
-        document.body.style.paddingRight = previousBodyPaddingRight;
-
-        // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
-        // can be set again.
-        previousBodyPaddingRight = undefined;
-      }
-
-      if (previousBodyOverflowSetting !== undefined) {
-        document.body.style.overflow = previousBodyOverflowSetting;
-
-        // Restore previousBodyOverflowSetting to undefined
-        // so setOverflowHidden knows it can be set again.
-        previousBodyOverflowSetting = undefined;
-      }
-    };
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
-    var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
-      return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
-    };
-
-    var handleScroll$1 = function handleScroll(event, targetElement) {
-      var clientY = event.targetTouches[0].clientY - initialClientY;
-
-      if (allowTouchMove$1(event.target)) {
-        return false;
-      }
-
-      if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
-        // element is at the top of its scroll.
-        return preventDefault(event);
-      }
-
-      if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
-        // element is at the bottom of its scroll.
-        return preventDefault(event);
-      }
-
-      event.stopPropagation();
-      return true;
-    };
-
-    var disableBodyScroll = function disableBodyScroll(targetElement, options) {
-      // targetElement must be provided
-      if (!targetElement) {
-        // eslint-disable-next-line no-console
-        console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
-        return;
-      }
-
-      // disableBodyScroll must not have been called on this targetElement before
-      if (locks.some(function (lock) {
-        return lock.targetElement === targetElement;
-      })) {
-        return;
-      }
-
-      var lock = {
-        targetElement: targetElement,
-        options: options || {}
-      };
-
-      locks = [].concat(_toConsumableArray$1(locks), [lock]);
-
-      if (isIosDevice) {
-        targetElement.ontouchstart = function (event) {
-          if (event.targetTouches.length === 1) {
-            // detect single touch.
-            initialClientY = event.targetTouches[0].clientY;
-          }
-        };
-        targetElement.ontouchmove = function (event) {
-          if (event.targetTouches.length === 1) {
-            // detect single touch.
-            handleScroll$1(event, targetElement);
-          }
-        };
-
-        if (!documentListenerAdded) {
-          document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-          documentListenerAdded = true;
-        }
-      } else {
-        setOverflowHidden(options);
-      }
-    };
-
-    var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {
-      if (isIosDevice) {
-        // Clear all locks ontouchstart/ontouchmove handlers, and the references.
-        locks.forEach(function (lock) {
-          lock.targetElement.ontouchstart = null;
-          lock.targetElement.ontouchmove = null;
-        });
-
-        if (documentListenerAdded) {
-          document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-          documentListenerAdded = false;
-        }
-
-        // Reset initial clientY.
-        initialClientY = -1;
-      } else {
-        restoreOverflowSetting();
-      }
-
-      locks = [];
-    };
-
-    var PreventBodyElementScrolling = /*#__PURE__*/function (_React$Component) {
-      _inheritsLoose__default["default"](PreventBodyElementScrolling, _React$Component);
-
-      function PreventBodyElementScrolling() {
-        return _React$Component.apply(this, arguments) || this;
-      }
-
-      var _proto = PreventBodyElementScrolling.prototype;
-
-      _proto.componentDidMount = function componentDidMount() {
-        var scrollableRef = this.props.scrollableRef;
-        var refs = Array.isArray(scrollableRef) ? scrollableRef : [scrollableRef];
-        refs.every(function (ref) {
-          if (ref && ref.current) {
-            disableBodyScroll(ref.current);
-          }
-        });
-      };
-
-      _proto.componentWillUnmount = function componentWillUnmount() {
-        clearAllBodyScrollLocks();
-      };
-
-      _proto.render = function render() {
-        var children = this.props.children;
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
-      };
-
-      return PreventBodyElementScrolling;
-    }(React__default["default"].Component);
-
     var convertPxToNumber = function convertPxToNumber(px) {
       return parseFloat(px);
     };
@@ -11253,7 +11034,7 @@
      * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
      */
 
-    var useIsomorphicLayoutEffect$3 = typeof window !== 'undefined' && window.document && window.document.createElement ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+    var useIsomorphicLayoutEffect$4 = typeof window !== 'undefined' && window.document && window.document.createElement ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
     var top = 'top';
     var bottom = 'bottom';
@@ -13198,12 +12979,12 @@
         }
       }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
       var popperInstanceRef = React__namespace.useRef();
-      useIsomorphicLayoutEffect$3(function () {
+      useIsomorphicLayoutEffect$4(function () {
         if (popperInstanceRef.current) {
           popperInstanceRef.current.setOptions(popperOptions);
         }
       }, [popperOptions]);
-      useIsomorphicLayoutEffect$3(function () {
+      useIsomorphicLayoutEffect$4(function () {
         if (referenceElement == null || popperElement == null) {
           return;
         }
@@ -18406,7 +18187,7 @@
       capture: false,
       passive: false
     };
-    function useScrollLock(_ref) {
+    function useScrollLock$1(_ref) {
       var isEnabled = _ref.isEnabled,
         _ref$accountForScroll = _ref.accountForScrollbars,
         accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
@@ -18525,7 +18306,7 @@
         onTopArrive: onTopArrive,
         onTopLeave: onTopLeave
       });
-      var setScrollLockTarget = useScrollLock({
+      var setScrollLockTarget = useScrollLock$1({
         isEnabled: lockEnabled
       });
       var targetRef = function targetRef(element) {
@@ -24742,7 +24523,7 @@
      * @param deps
      */
 
-    var useIsomorphicLayoutEffect$2 = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
+    var useIsomorphicLayoutEffect$3 = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
 
     /**
      * Forces a re-render, similar to `forceUpdate` in class components.
@@ -24817,7 +24598,7 @@
         }, [containerRef]);
       }
 
-      useIsomorphicLayoutEffect$2(function () {
+      useIsomorphicLayoutEffect$3(function () {
         // This ref may be null when a hot-loader replaces components on the page
         if (!mountNode.current) return; // It's possible that the content of the portal has, itself, been portaled.
         // In that case, it's important to append to the correct document element.
@@ -25138,7 +24919,7 @@
         return ref.facade;
     }
 
-    var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+    var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
     var currentValues = new WeakMap();
     /**
      * Merges two or more refs together providing a single interface to set their value
@@ -25159,7 +24940,7 @@
             return refs.forEach(function (ref) { return assignRef(ref, newValue); });
         });
         // handle refs changes - added or removed
-        useIsomorphicLayoutEffect$1(function () {
+        useIsomorphicLayoutEffect$2(function () {
             var oldValue = currentValues.get(callbackRef);
             if (oldValue) {
                 var prevRefs_1 = new Set(oldValue);
@@ -29611,6 +29392,116 @@
       };
     });
 
+    var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+    var IS_SERVER = typeof window === "undefined";
+    /**
+     * A custom hook that locks and unlocks scroll.
+     * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
+     * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
+     * @public
+     * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
+     * @example
+     * ```tsx
+     * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
+     * useScrollLock()
+     * ```
+     * @example
+     * ```tsx
+     * // Manually lock and unlock the scroll
+     * const { lock, unlock } = useScrollLock({ autoLock: false })
+     *
+     * return (
+     *  <div>
+     *   <button onClick={lock}>Lock</button>
+     *   <button onClick={unlock}>Unlock</button>
+     *  </div>
+     * )
+     * ```
+     */
+
+    function useScrollLock(options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      var _options = options,
+          _options$autoLock = _options.autoLock,
+          autoLock = _options$autoLock === void 0 ? true : _options$autoLock,
+          lockTarget = _options.lockTarget,
+          _options$widthReflow = _options.widthReflow,
+          widthReflow = _options$widthReflow === void 0 ? true : _options$widthReflow;
+
+      var _useState = React.useState(false),
+          isLocked = _useState[0],
+          setIsLocked = _useState[1];
+
+      var target = React.useRef(null);
+      var originalStyle = React.useRef(null);
+
+      var lock = function lock() {
+        if (target.current) {
+          var _target$current$style = target.current.style,
+              overflow = _target$current$style.overflow,
+              paddingRight = _target$current$style.paddingRight; // Save the original styles
+
+          originalStyle.current = {
+            overflow: overflow,
+            paddingRight: paddingRight
+          }; // Prevent width reflow
+
+          if (widthReflow) {
+            // Use window inner width if body is the target as global scrollbar isn't part of the document
+            var offsetWidth = target.current === document.body ? window.innerWidth : target.current.offsetWidth; // Get current computed padding right in pixels
+
+            var currentPaddingRight = parseInt(window.getComputedStyle(target.current).paddingRight, 10) || 0;
+            var scrollbarWidth = offsetWidth - target.current.scrollWidth;
+            target.current.style.paddingRight = scrollbarWidth + currentPaddingRight + "px";
+          } // Lock the scroll
+
+
+          target.current.style.overflow = "hidden";
+          setIsLocked(true);
+        }
+      };
+
+      var unlock = function unlock() {
+        if (target.current && originalStyle.current) {
+          target.current.style.overflow = originalStyle.current.overflow; // Only reset padding right if we changed it
+
+          if (widthReflow) {
+            target.current.style.paddingRight = originalStyle.current.paddingRight;
+          }
+        }
+
+        setIsLocked(false);
+      };
+
+      useIsomorphicLayoutEffect$1(function () {
+        if (IS_SERVER) return;
+
+        if (lockTarget) {
+          target.current = typeof lockTarget === "string" ? document.querySelector(lockTarget) : lockTarget;
+        }
+
+        if (!target.current) {
+          target.current = document.body;
+        }
+
+        if (autoLock) {
+          lock();
+        }
+
+        return function () {
+          unlock();
+        }; // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [autoLock, lockTarget, widthReflow]);
+      return {
+        isLocked: isLocked,
+        lock: lock,
+        unlock: unlock
+      };
+    }
+
     var borderStyle = "1px solid #e4e7eb";
     var BrandingWrap = styled__default["default"].div.withConfig({
       displayName: "MobileMenu__BrandingWrap",
@@ -29841,6 +29732,7 @@
           showNulogyLogo = _a.showNulogyLogo,
           props = __rest$3(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
 
+      useScrollLock();
       return /*#__PURE__*/React__default["default"].createElement(Nav, Object.assign({
         backgroundColor: themeColorObject && themeColorObject.background
       }, props), /*#__PURE__*/React__default["default"].createElement(BrandingWrap, null, /*#__PURE__*/React__default["default"].createElement(BrandingText, {
@@ -29997,13 +29889,13 @@
         "aria-expanded": ariaExpanded
       }), /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
         isOpen: isOpen
-      }))))), isOpen && /*#__PURE__*/React__default["default"].createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
+      }))))), isOpen && /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
         themeColorObject: themeColorObject,
         subtext: subtext,
         menuData: menuData,
         closeMenu: closeMenu,
         showNulogyLogo: showNulogyLogo
-      })));
+      }));
     };
     /* eslint-enable react/destructuring-assignment */
 
@@ -45493,6 +45385,9 @@
       var sideBarRef = React.useRef(null);
       var contentRef = React.useRef(null);
       var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
+      useScrollLock({
+        autoLock: overlay && disableScroll && isOpen
+      });
       React.useEffect(function () {
         var _a;
 
@@ -45623,9 +45518,7 @@
         width: "100%",
         p: p,
         pt: "x2"
-      }, footer), overlay && disableScroll && isOpen && /*#__PURE__*/React__default["default"].createElement(PreventBodyElementScrolling, {
-        scrollRef: sideBarRef
-      })));
+      }, footer)));
     }
 
     function LoadingAnimation(_ref) {
@@ -47683,7 +47576,7 @@
           footerContent = _ref4.footerContent,
           closeAriaLabel = _ref4.closeAriaLabel,
           parentSelector = _ref4.parentSelector;
-      var modalHasHeader = onRequestClose || title;
+      var modalHasHeader = Boolean(onRequestClose || title);
       var themeContext = React.useContext(styled.ThemeContext);
       return /*#__PURE__*/React__default["default"].createElement(StyledReactModal, {
         maxWidth: maxWidth,
@@ -47709,22 +47602,40 @@
         appElement: appElement,
         ariaHideApp: ariaHideApp,
         parentSelector: parentSelector
-      }, /*#__PURE__*/React__default["default"].createElement(PreventBodyElementScrolling, null, modalHasHeader && /*#__PURE__*/React__default["default"].createElement(ModalHeader, {
+      }, /*#__PURE__*/React__default["default"].createElement(ModalWrapper, {
+        closeAriaLabel: closeAriaLabel,
+        modalHasHeader: modalHasHeader,
+        title: title,
+        onRequestClose: onRequestClose,
+        footerContent: footerContent
+      }, children));
+    };
+
+    function ModalWrapper(_ref5) {
+      var modalHasHeader = _ref5.modalHasHeader,
+          title = _ref5.title,
+          onRequestClose = _ref5.onRequestClose,
+          closeAriaLabel = _ref5.closeAriaLabel,
+          children = _ref5.children,
+          footerContent = _ref5.footerContent;
+      var theme = styled.useTheme();
+      useScrollLock();
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, modalHasHeader && /*#__PURE__*/React__default["default"].createElement(ModalHeader, {
         hasCloseButton: Boolean(onRequestClose)
       }, title ? /*#__PURE__*/React__default["default"].createElement(Heading2, {
         id: "modal-title",
         mb: "none"
       }, title) : /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
-          height: themeContext.space.x4
+          height: theme.space.x4
         }
       }), onRequestClose && /*#__PURE__*/React__default["default"].createElement(ModalCloseButton, {
         onClick: onRequestClose,
         "aria-label": closeAriaLabel
       })), /*#__PURE__*/React__default["default"].createElement(ModalContent, {
         hasFooter: !!footerContent
-      }, children), footerContent && /*#__PURE__*/React__default["default"].createElement(ModalFooter, null, footerContent)));
-    };
+      }, children), footerContent && /*#__PURE__*/React__default["default"].createElement(ModalFooter, null, footerContent));
+    }
 
     Modal.setAppElement = ReactModal.setAppElement;
 

package/dist/main.module.js

@@ -338,12 +338,12 @@ function useVisualElementContext() {
 }
 
 var isBrowser$7 = typeof window !== "undefined";
-var useIsomorphicLayoutEffect$4 = isBrowser$7 ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect$5 = isBrowser$7 ? useLayoutEffect : useEffect;
 
 function useSnapshotOnUnmount(visualElement) {
     var syncLayout = useContext(SharedLayoutContext);
     var framerSyncLayout = useContext(FramerTreeLayoutContext);
-    useIsomorphicLayoutEffect$4(function () { return function () {
+    useIsomorphicLayoutEffect$5(function () { return function () {
         if (isSharedLayout(syncLayout)) {
             syncLayout.remove(visualElement);
         }
@@ -374,7 +374,7 @@ function useVisualElement(isStatic, visualState, createVisualElement, props) {
             blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
         });
     });
-    useIsomorphicLayoutEffect$4(function () {
+    useIsomorphicLayoutEffect$5(function () {
         visualElement.setProps(__assign$3(__assign$3(__assign$3({}, config), props), { layoutId: layoutId }));
         visualElement.isPresent = isPresent(presenceContext);
         visualElement.isPresenceRoot =
@@ -10702,225 +10702,6 @@ function withMenuState(MenuComponent) {
   };
 }
 
-function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-// Older browsers don't support event options, feature detect it.
-
-// Adopted and modified solution from Bohdan Didukh (2017)
-// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
-
-var hasPassiveEvents = false;
-if (typeof window !== 'undefined') {
-  var passiveTestOptions = {
-    get passive() {
-      hasPassiveEvents = true;
-      return undefined;
-    }
-  };
-  window.addEventListener('testPassive', null, passiveTestOptions);
-  window.removeEventListener('testPassive', null, passiveTestOptions);
-}
-
-var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
-
-
-var locks = [];
-var documentListenerAdded = false;
-var initialClientY = -1;
-var previousBodyOverflowSetting = void 0;
-var previousBodyPaddingRight = void 0;
-
-// returns true if `el` should be allowed to receive touchmove events.
-var allowTouchMove$1 = function allowTouchMove(el) {
-  return locks.some(function (lock) {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true;
-    }
-
-    return false;
-  });
-};
-
-var preventDefault = function preventDefault(rawEvent) {
-  var e = rawEvent || window.event;
-
-  // For the case whereby consumers adds a touchmove event listener to document.
-  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
-  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
-  // the touchmove event on document will break.
-  if (allowTouchMove$1(e.target)) {
-    return true;
-  }
-
-  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
-  if (e.touches.length > 1) return true;
-
-  if (e.preventDefault) e.preventDefault();
-
-  return false;
-};
-
-var setOverflowHidden = function setOverflowHidden(options) {
-  // If previousBodyPaddingRight is already set, don't set it again.
-  if (previousBodyPaddingRight === undefined) {
-    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
-    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-
-    if (_reserveScrollBarGap && scrollBarGap > 0) {
-      previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = scrollBarGap + 'px';
-    }
-  }
-
-  // If previousBodyOverflowSetting is already set, don't set it again.
-  if (previousBodyOverflowSetting === undefined) {
-    previousBodyOverflowSetting = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-  }
-};
-
-var restoreOverflowSetting = function restoreOverflowSetting() {
-  if (previousBodyPaddingRight !== undefined) {
-    document.body.style.paddingRight = previousBodyPaddingRight;
-
-    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
-    // can be set again.
-    previousBodyPaddingRight = undefined;
-  }
-
-  if (previousBodyOverflowSetting !== undefined) {
-    document.body.style.overflow = previousBodyOverflowSetting;
-
-    // Restore previousBodyOverflowSetting to undefined
-    // so setOverflowHidden knows it can be set again.
-    previousBodyOverflowSetting = undefined;
-  }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
-var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
-  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
-};
-
-var handleScroll$1 = function handleScroll(event, targetElement) {
-  var clientY = event.targetTouches[0].clientY - initialClientY;
-
-  if (allowTouchMove$1(event.target)) {
-    return false;
-  }
-
-  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
-    // element is at the top of its scroll.
-    return preventDefault(event);
-  }
-
-  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
-    // element is at the bottom of its scroll.
-    return preventDefault(event);
-  }
-
-  event.stopPropagation();
-  return true;
-};
-
-var disableBodyScroll = function disableBodyScroll(targetElement, options) {
-  // targetElement must be provided
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
-    return;
-  }
-
-  // disableBodyScroll must not have been called on this targetElement before
-  if (locks.some(function (lock) {
-    return lock.targetElement === targetElement;
-  })) {
-    return;
-  }
-
-  var lock = {
-    targetElement: targetElement,
-    options: options || {}
-  };
-
-  locks = [].concat(_toConsumableArray$1(locks), [lock]);
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        initialClientY = event.targetTouches[0].clientY;
-      }
-    };
-    targetElement.ontouchmove = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        handleScroll$1(event, targetElement);
-      }
-    };
-
-    if (!documentListenerAdded) {
-      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = true;
-    }
-  } else {
-    setOverflowHidden(options);
-  }
-};
-
-var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {
-  if (isIosDevice) {
-    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
-    locks.forEach(function (lock) {
-      lock.targetElement.ontouchstart = null;
-      lock.targetElement.ontouchmove = null;
-    });
-
-    if (documentListenerAdded) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = false;
-    }
-
-    // Reset initial clientY.
-    initialClientY = -1;
-  } else {
-    restoreOverflowSetting();
-  }
-
-  locks = [];
-};
-
-var PreventBodyElementScrolling = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose$3(PreventBodyElementScrolling, _React$Component);
-
-  function PreventBodyElementScrolling() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-
-  var _proto = PreventBodyElementScrolling.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var scrollableRef = this.props.scrollableRef;
-    var refs = Array.isArray(scrollableRef) ? scrollableRef : [scrollableRef];
-    refs.every(function (ref) {
-      if (ref && ref.current) {
-        disableBodyScroll(ref.current);
-      }
-    });
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    clearAllBodyScrollLocks();
-  };
-
-  _proto.render = function render() {
-    var children = this.props.children;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
-  };
-
-  return PreventBodyElementScrolling;
-}(React__default.Component);
-
 var convertPxToNumber = function convertPxToNumber(px) {
   return parseFloat(px);
 };
@@ -11236,7 +11017,7 @@ var fromEntries$1 = function fromEntries(entries) {
  * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
  */
 
-var useIsomorphicLayoutEffect$3 = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect$4 = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
 
 var top = 'top';
 var bottom = 'bottom';
@@ -13181,12 +12962,12 @@ var usePopper$1 = function usePopper(referenceElement, popperElement, options) {
     }
   }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
   var popperInstanceRef = React.useRef();
-  useIsomorphicLayoutEffect$3(function () {
+  useIsomorphicLayoutEffect$4(function () {
     if (popperInstanceRef.current) {
       popperInstanceRef.current.setOptions(popperOptions);
     }
   }, [popperOptions]);
-  useIsomorphicLayoutEffect$3(function () {
+  useIsomorphicLayoutEffect$4(function () {
     if (referenceElement == null || popperElement == null) {
       return;
     }
@@ -18389,7 +18170,7 @@ var listenerOptions = {
   capture: false,
   passive: false
 };
-function useScrollLock(_ref) {
+function useScrollLock$1(_ref) {
   var isEnabled = _ref.isEnabled,
     _ref$accountForScroll = _ref.accountForScrollbars,
     accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
@@ -18508,7 +18289,7 @@ function ScrollManager(_ref) {
     onTopArrive: onTopArrive,
     onTopLeave: onTopLeave
   });
-  var setScrollLockTarget = useScrollLock({
+  var setScrollLockTarget = useScrollLock$1({
     isEnabled: lockEnabled
   });
   var targetRef = function targetRef(element) {
@@ -24725,7 +24506,7 @@ function canUseDOM() {
  * @param deps
  */
 
-var useIsomorphicLayoutEffect$2 = /*#__PURE__*/canUseDOM() ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect$3 = /*#__PURE__*/canUseDOM() ? useLayoutEffect : useEffect;
 
 /**
  * Forces a re-render, similar to `forceUpdate` in class components.
@@ -24800,7 +24581,7 @@ var PortalImpl = function PortalImpl(_ref) {
     }, [containerRef]);
   }
 
-  useIsomorphicLayoutEffect$2(function () {
+  useIsomorphicLayoutEffect$3(function () {
     // This ref may be null when a hot-loader replaces components on the page
     if (!mountNode.current) return; // It's possible that the content of the portal has, itself, been portaled.
     // In that case, it's important to append to the correct document element.
@@ -25121,7 +24902,7 @@ function useCallbackRef(initialValue, callback) {
     return ref.facade;
 }
 
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var currentValues = new WeakMap();
 /**
  * Merges two or more refs together providing a single interface to set their value
@@ -25142,7 +24923,7 @@ function useMergeRefs(refs, defaultValue) {
         return refs.forEach(function (ref) { return assignRef(ref, newValue); });
     });
     // handle refs changes - added or removed
-    useIsomorphicLayoutEffect$1(function () {
+    useIsomorphicLayoutEffect$2(function () {
         var oldValue = currentValues.get(callbackRef);
         if (oldValue) {
             var prevRefs_1 = new Set(oldValue);
@@ -29594,6 +29375,116 @@ var NavBarSearch = styled(BaseNavBarSearch).withConfig({
   };
 });
 
+var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var IS_SERVER = typeof window === "undefined";
+/**
+ * A custom hook that locks and unlocks scroll.
+ * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
+ * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
+ * @example
+ * ```tsx
+ * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
+ * useScrollLock()
+ * ```
+ * @example
+ * ```tsx
+ * // Manually lock and unlock the scroll
+ * const { lock, unlock } = useScrollLock({ autoLock: false })
+ *
+ * return (
+ *  <div>
+ *   <button onClick={lock}>Lock</button>
+ *   <button onClick={unlock}>Unlock</button>
+ *  </div>
+ * )
+ * ```
+ */
+
+function useScrollLock(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      _options$autoLock = _options.autoLock,
+      autoLock = _options$autoLock === void 0 ? true : _options$autoLock,
+      lockTarget = _options.lockTarget,
+      _options$widthReflow = _options.widthReflow,
+      widthReflow = _options$widthReflow === void 0 ? true : _options$widthReflow;
+
+  var _useState = useState(false),
+      isLocked = _useState[0],
+      setIsLocked = _useState[1];
+
+  var target = useRef(null);
+  var originalStyle = useRef(null);
+
+  var lock = function lock() {
+    if (target.current) {
+      var _target$current$style = target.current.style,
+          overflow = _target$current$style.overflow,
+          paddingRight = _target$current$style.paddingRight; // Save the original styles
+
+      originalStyle.current = {
+        overflow: overflow,
+        paddingRight: paddingRight
+      }; // Prevent width reflow
+
+      if (widthReflow) {
+        // Use window inner width if body is the target as global scrollbar isn't part of the document
+        var offsetWidth = target.current === document.body ? window.innerWidth : target.current.offsetWidth; // Get current computed padding right in pixels
+
+        var currentPaddingRight = parseInt(window.getComputedStyle(target.current).paddingRight, 10) || 0;
+        var scrollbarWidth = offsetWidth - target.current.scrollWidth;
+        target.current.style.paddingRight = scrollbarWidth + currentPaddingRight + "px";
+      } // Lock the scroll
+
+
+      target.current.style.overflow = "hidden";
+      setIsLocked(true);
+    }
+  };
+
+  var unlock = function unlock() {
+    if (target.current && originalStyle.current) {
+      target.current.style.overflow = originalStyle.current.overflow; // Only reset padding right if we changed it
+
+      if (widthReflow) {
+        target.current.style.paddingRight = originalStyle.current.paddingRight;
+      }
+    }
+
+    setIsLocked(false);
+  };
+
+  useIsomorphicLayoutEffect$1(function () {
+    if (IS_SERVER) return;
+
+    if (lockTarget) {
+      target.current = typeof lockTarget === "string" ? document.querySelector(lockTarget) : lockTarget;
+    }
+
+    if (!target.current) {
+      target.current = document.body;
+    }
+
+    if (autoLock) {
+      lock();
+    }
+
+    return function () {
+      unlock();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoLock, lockTarget, widthReflow]);
+  return {
+    isLocked: isLocked,
+    lock: lock,
+    unlock: unlock
+  };
+}
+
 var borderStyle = "1px solid #e4e7eb";
 var BrandingWrap = styled.div.withConfig({
   displayName: "MobileMenu__BrandingWrap",
@@ -29824,6 +29715,7 @@ var BaseMobileMenu = function BaseMobileMenu(_a) {
       showNulogyLogo = _a.showNulogyLogo,
       props = __rest$3(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
 
+  useScrollLock();
   return /*#__PURE__*/React__default.createElement(Nav, Object.assign({
     backgroundColor: themeColorObject && themeColorObject.background
   }, props), /*#__PURE__*/React__default.createElement(BrandingWrap, null, /*#__PURE__*/React__default.createElement(BrandingText, {
@@ -29980,13 +29872,13 @@ var SmallNavBarNoState = function SmallNavBarNoState(_a) {
     "aria-expanded": ariaExpanded
   }), /*#__PURE__*/React__default.createElement(MenuIcon, {
     isOpen: isOpen
-  }))))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu, {
+  }))))), isOpen && /*#__PURE__*/React__default.createElement(MobileMenu, {
     themeColorObject: themeColorObject,
     subtext: subtext,
     menuData: menuData,
     closeMenu: closeMenu,
     showNulogyLogo: showNulogyLogo
-  })));
+  }));
 };
 /* eslint-enable react/destructuring-assignment */
 
@@ -45476,6 +45368,9 @@ function Sidebar(_a) {
   var sideBarRef = useRef(null);
   var contentRef = useRef(null);
   var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
+  useScrollLock({
+    autoLock: overlay && disableScroll && isOpen
+  });
   useEffect(function () {
     var _a;
 
@@ -45606,9 +45501,7 @@ function Sidebar(_a) {
     width: "100%",
     p: p,
     pt: "x2"
-  }, footer), overlay && disableScroll && isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, {
-    scrollRef: sideBarRef
-  })));
+  }, footer)));
 }
 
 function LoadingAnimation(_ref) {
@@ -47666,7 +47559,7 @@ var Modal = function Modal(_ref4) {
       footerContent = _ref4.footerContent,
       closeAriaLabel = _ref4.closeAriaLabel,
       parentSelector = _ref4.parentSelector;
-  var modalHasHeader = onRequestClose || title;
+  var modalHasHeader = Boolean(onRequestClose || title);
   var themeContext = useContext(ThemeContext$1);
   return /*#__PURE__*/React__default.createElement(StyledReactModal, {
     maxWidth: maxWidth,
@@ -47692,22 +47585,40 @@ var Modal = function Modal(_ref4) {
     appElement: appElement,
     ariaHideApp: ariaHideApp,
     parentSelector: parentSelector
-  }, /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, modalHasHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
+  }, /*#__PURE__*/React__default.createElement(ModalWrapper, {
+    closeAriaLabel: closeAriaLabel,
+    modalHasHeader: modalHasHeader,
+    title: title,
+    onRequestClose: onRequestClose,
+    footerContent: footerContent
+  }, children));
+};
+
+function ModalWrapper(_ref5) {
+  var modalHasHeader = _ref5.modalHasHeader,
+      title = _ref5.title,
+      onRequestClose = _ref5.onRequestClose,
+      closeAriaLabel = _ref5.closeAriaLabel,
+      children = _ref5.children,
+      footerContent = _ref5.footerContent;
+  var theme = useTheme();
+  useScrollLock();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, modalHasHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
     hasCloseButton: Boolean(onRequestClose)
   }, title ? /*#__PURE__*/React__default.createElement(Heading2, {
     id: "modal-title",
     mb: "none"
   }, title) : /*#__PURE__*/React__default.createElement("div", {
     style: {
-      height: themeContext.space.x4
+      height: theme.space.x4
     }
   }), onRequestClose && /*#__PURE__*/React__default.createElement(ModalCloseButton, {
     onClick: onRequestClose,
     "aria-label": closeAriaLabel
   })), /*#__PURE__*/React__default.createElement(ModalContent, {
     hasFooter: !!footerContent
-  }, children), footerContent && /*#__PURE__*/React__default.createElement(ModalFooter, null, footerContent)));
-};
+  }, children), footerContent && /*#__PURE__*/React__default.createElement(ModalFooter, null, footerContent));
+}
 
 Modal.setAppElement = ReactModal.setAppElement;
 

package/dist/src/Layout/Sidebar.d.ts

@@ -2,7 +2,7 @@ import React, { RefObject } from "react";
 import { AnimatedBoxProps } from "../Box/Box";
 type PredefinedSidebarWidth = "xs" | "s" | "m" | "l" | "xl";
 type SidebarWidth = PredefinedSidebarWidth | (string & {});
-type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
+export type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
     children?: React.ReactNode;
     onClose?: () => void;
     title?: string;

package/dist/src/utils/index.d.ts

@@ -8,5 +8,4 @@ export { default as PopperArrow } from "./PopperArrow";
 export { default as ScrollIndicators } from "./ScrollIndicators";
 export { default as withMenuState } from "./withMenuState";
 export type { WithMenuStateProps, AcceptsMenuStateProps } from "./withMenuState";
-export { default as PreventBodyElementScrolling } from "./PreventBodyElementScrolling";
 export { default as useWindowDimensions } from "./useWindowDimensions";

package/dist/src/utils/testing/useUrlProps.d.ts

@@ -0,0 +1,6 @@
+/**
+ * useUrlProps is a hook that reads URL search parameters and returns them as an object.
+ * It is meant to be used in Storybook stories to allow for easy URL-based configuration from Cypress specs.
+ *
+ */
+export declare function useUrlProps<T extends Record<string, unknown>>(defaultProps?: T): T;

package/dist/src/utils/useScrollLock.d.ts

@@ -0,0 +1,55 @@
+import { useLayoutEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+/** Hook options. */
+type UseScrollLockOptions = {
+    /**
+     * Whether to lock the scroll initially.
+     * @default true
+     */
+    autoLock?: boolean;
+    /**
+     * The target element to lock the scroll (default is the body element).
+     * @default document.body
+     */
+    lockTarget?: HTMLElement | string;
+    /**
+     * Whether to prevent width reflow when locking the scroll.
+     * @default true
+     */
+    widthReflow?: boolean;
+};
+/** Hook return type. */
+type UseScrollLockReturn = {
+    /** Whether the scroll is locked. */
+    isLocked: boolean;
+    /** Lock the scroll. */
+    lock: () => void;
+    /** Unlock the scroll. */
+    unlock: () => void;
+};
+/**
+ * A custom hook that locks and unlocks scroll.
+ * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
+ * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
+ * @example
+ * ```tsx
+ * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
+ * useScrollLock()
+ * ```
+ * @example
+ * ```tsx
+ * // Manually lock and unlock the scroll
+ * const { lock, unlock } = useScrollLock({ autoLock: false })
+ *
+ * return (
+ *  <div>
+ *   <button onClick={lock}>Lock</button>
+ *   <button onClick={unlock}>Unlock</button>
+ *  </div>
+ * )
+ * ```
+ */
+export declare function useScrollLock(options?: UseScrollLockOptions): UseScrollLockReturn;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "13.1.3",
+  "version": "13.1.4",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {

package/dist/src/utils/PreventBodyElementScrolling.d.ts

@@ -1,8 +0,0 @@
-export default class PreventBodyElementScrolling extends React.Component<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-import React from "react";