@skyscanner/backpack-web 42.5.0 → 42.5.1

package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:0;flex:1;overflow-y:auto}.bpk-bottom-sheet--padding-base-top{padding-top:1rem}.bpk-bottom-sheet--padding-base-bottom{padding-bottom:1rem}.bpk-bottom-sheet--padding-base-start{padding-inline-start:1rem}.bpk-bottom-sheet--padding-base-end{padding-inline-end:1rem}.bpk-bottom-sheet--padding-lg-top{padding-top:1.5rem}.bpk-bottom-sheet--padding-lg-bottom{padding-bottom:1.5rem}.bpk-bottom-sheet--padding-lg-start{padding-inline-start:1.5rem}.bpk-bottom-sheet--padding-lg-end{padding-inline-end:1.5rem}.bpk-bottom-sheet--padding-xxl-top{padding-top:2.5rem}.bpk-bottom-sheet--padding-xxl-bottom{padding-bottom:2.5rem}.bpk-bottom-sheet--padding-xxl-start{padding-inline-start:2.5rem}.bpk-bottom-sheet--padding-xxl-end{padding-inline-end:2.5rem}.bpk-bottom-sheet--padding-xxxl-top{padding-top:4rem}.bpk-bottom-sheet--padding-xxxl-bottom{padding-bottom:4rem}.bpk-bottom-sheet--padding-xxxl-start{padding-inline-start:4rem}.bpk-bottom-sheet--padding-xxxl-end{padding-inline-end:4rem}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header-wrapper{position:sticky;top:0;z-index:899;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-bottom-sheet--header{min-height:fit-content;padding:1.5rem}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}@keyframes slide-down{0%{transform:translateY(0%)}100%{transform:translateY(100%)}}
+.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:0;flex:1;overflow-y:auto}.bpk-bottom-sheet--padding-base-top{padding-top:1rem}.bpk-bottom-sheet--padding-base-bottom{padding-bottom:1rem}.bpk-bottom-sheet--padding-base-start{padding-inline-start:1rem}.bpk-bottom-sheet--padding-base-end{padding-inline-end:1rem}.bpk-bottom-sheet--padding-lg-top{padding-top:1.5rem}.bpk-bottom-sheet--padding-lg-bottom{padding-bottom:1.5rem}.bpk-bottom-sheet--padding-lg-start{padding-inline-start:1.5rem}.bpk-bottom-sheet--padding-lg-end{padding-inline-end:1.5rem}.bpk-bottom-sheet--padding-xxl-top{padding-top:2.5rem}.bpk-bottom-sheet--padding-xxl-bottom{padding-bottom:2.5rem}.bpk-bottom-sheet--padding-xxl-start{padding-inline-start:2.5rem}.bpk-bottom-sheet--padding-xxl-end{padding-inline-end:2.5rem}.bpk-bottom-sheet--padding-xxxl-top{padding-top:4rem}.bpk-bottom-sheet--padding-xxxl-bottom{padding-bottom:4rem}.bpk-bottom-sheet--padding-xxxl-start{padding-inline-start:4rem}.bpk-bottom-sheet--padding-xxxl-end{padding-inline-end:4rem}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header-wrapper{position:sticky;top:0;z-index:899;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-bottom-sheet--header{min-height:fit-content;padding:1.5rem}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}@keyframes slide-down{0%{transform:translateY(0%)}100%{transform:translateY(100%)}}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.js

@@ -19,10 +19,9 @@
 import { useEffect, useState } from 'react';
 import { Dialog } from '@ark-ui/react';
 import { durationBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { getDataComponentAttribute, useBodyLock } from "../../../../bpk-react-utils";
 import { ModalTypeProvider } from "../BpkModalV3Context";
 import { MODAL_V3_TYPES } from "../common-types";
-import useBodyLock from "./useBodyLock";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkModalV3Root = ({
   children,

package/bpk-react-utils/index.d.ts

@@ -8,10 +8,11 @@ import { getDataComponentAttribute } from './src/getDataComponentAttribute';
 import isRTL from './src/isRTL';
 import { setNativeValue } from './src/nativeEventHandler';
 import { SURFACE_COLORS } from './src/surfaceColors';
+import useBodyLock from './src/useBodyLock';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
 export type { SurfaceBgColor } from './src/surfaceColors';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS, };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS, useBodyLock, };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -55,5 +56,6 @@ declare const _default: {
         readonly surfaceLowContrast: "surface-low-contrast";
         readonly surfaceTint: "surface-tint";
     };
+    useBodyLock: (isLocked: boolean) => void;
 };
 export default _default;

package/bpk-react-utils/index.js

@@ -27,9 +27,10 @@ import { getDataComponentAttribute } from "./src/getDataComponentAttribute";
 import isRTL from "./src/isRTL";
 import { setNativeValue } from "./src/nativeEventHandler";
 import { SURFACE_COLORS } from "./src/surfaceColors";
+import useBodyLock from "./src/useBodyLock";
 import withDefaultProps from "./src/withDefaultProps";
 import wrapDisplayName from "./src/wrapDisplayName";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS, useBodyLock };
 export default {
   Portal,
   TransitionInitialMount,
@@ -44,5 +45,6 @@ export default {
   BpkDialogWrapper,
   setNativeValue,
   getDataComponentAttribute,
-  SURFACE_COLORS
+  SURFACE_COLORS,
+  useBodyLock
 };

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js

@@ -20,20 +20,12 @@ import { useEffect, useRef, useState } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import cssModules from "../cssModules";
 import { getDataComponentAttribute } from "../getDataComponentAttribute";
+import useBodyLock from "../useBodyLock";
 import STYLES from "./BpkDialogWrapper.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 // TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
 const dialogSupported = typeof HTMLDialogElement === 'function';
-const setPageProperties = ({
-  isDialogOpen
-}) => {
-  document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
-  if (!dialogSupported) {
-    document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
-    document.body.style.width = isDialogOpen ? '100%' : 'auto';
-  }
-};
 export const BpkDialogWrapper = ({
   children,
   closeOnEscPressed = false,
@@ -100,18 +92,7 @@ export const BpkDialogWrapper = ({
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
-
-  // Lock the scroll of the page when the dialog is open
-  useEffect(() => {
-    setPageProperties({
-      isDialogOpen: isOpen
-    });
-    return () => {
-      setPageProperties({
-        isDialogOpen: false
-      });
-    };
-  }, [isOpen]);
+  useBodyLock(isOpen);
   const aria = {
     ...('ariaLabelledby' in ariaProps ? {
       'aria-labelledby': ariaProps.ariaLabelledby

package/{bpk-component-modal/src/BpkModalV3/BpkModalV3Root → bpk-react-utils/src}/useBodyLock.d.ts

@@ -2,6 +2,11 @@
  * Locks body scroll when the modal is open, preventing background scroll and
  * iOS Safari bounce effects. Restores all body styles and scroll position on
  * cleanup.
+ *
+ * Uses reference counting so multiple concurrent callers (e.g. Modal + BottomSheet)
+ * coordinate correctly: styles are locked on the first caller and only restored
+ * when the last caller unlocks.
+ *
  * @param {boolean} isLocked - Whether the body scroll should be locked.
  * @returns {void}
  */

package/{bpk-component-modal/src/BpkModalV3/BpkModalV3Root → bpk-react-utils/src}/useBodyLock.js

@@ -16,18 +16,25 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
+// Module-level shared state for reference counting across concurrent callers
+let lockCount = 0;
+let savedBodyStyles = null;
+let savedScrollY = 0;
 
 /**
  * Locks body scroll when the modal is open, preventing background scroll and
  * iOS Safari bounce effects. Restores all body styles and scroll position on
  * cleanup.
+ *
+ * Uses reference counting so multiple concurrent callers (e.g. Modal + BottomSheet)
+ * coordinate correctly: styles are locked on the first caller and only restored
+ * when the last caller unlocks.
+ *
  * @param {boolean} isLocked - Whether the body scroll should be locked.
  * @returns {void}
  */
 const useBodyLock = isLocked => {
-  const savedScrollYRef = useRef(0);
-  const savedBodyStylesRef = useRef(null);
   useEffect(() => {
     if (!isLocked) {
       return undefined;
@@ -35,33 +42,36 @@ const useBodyLock = isLocked => {
     const {
       body
     } = document;
-    const currentScrollY = window.scrollY;
-    savedScrollYRef.current = currentScrollY;
-    savedBodyStylesRef.current = {
-      overflow: body.style.overflow || '',
-      position: body.style.position || '',
-      top: body.style.top || '',
-      width: body.style.width || '',
-      touchAction: body.style.touchAction || '',
-      overscrollBehavior: body.style.overscrollBehavior || ''
-    };
-    body.style.overflow = 'hidden';
-    body.style.position = 'fixed';
-    body.style.top = `-${currentScrollY}px`;
-    body.style.width = '100%';
-    body.style.touchAction = 'none';
-    body.style.overscrollBehavior = 'contain';
+    if (lockCount === 0) {
+      savedScrollY = window.scrollY;
+      savedBodyStyles = {
+        overflow: body.style.overflow || '',
+        position: body.style.position || '',
+        top: body.style.top || '',
+        width: body.style.width || '',
+        touchAction: body.style.touchAction || '',
+        overscrollBehavior: body.style.overscrollBehavior || ''
+      };
+      body.style.overflow = 'hidden';
+      body.style.position = 'fixed';
+      body.style.top = `-${savedScrollY}px`;
+      body.style.width = '100%';
+      body.style.touchAction = 'none';
+      body.style.overscrollBehavior = 'contain';
+    }
+    lockCount += 1;
     return () => {
-      if (savedBodyStylesRef.current) {
-        const saved = savedBodyStylesRef.current;
+      lockCount -= 1;
+      if (lockCount === 0 && savedBodyStyles) {
+        const saved = savedBodyStyles;
         body.style.overflow = saved.overflow;
         body.style.position = saved.position;
         body.style.top = saved.top;
         body.style.width = saved.width;
         body.style.touchAction = saved.touchAction;
         body.style.overscrollBehavior = saved.overscrollBehavior;
-        savedBodyStylesRef.current = null;
-        window.scrollTo(0, savedScrollYRef.current);
+        savedBodyStyles = null;
+        window.scrollTo(0, savedScrollY);
       }
     };
   }, [isLocked]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.5.0",
+  "version": "42.5.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",