npm - @skyscanner/backpack-web - Versions diffs - 42.13.0 → 42.13.2 - Mend

@skyscanner/backpack-web 42.13.0 → 42.13.2

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.

Files changed (7) hide show

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js +21 -3
package/bpk-scrim-utils/src/bpk-scrim-content.module.css +1 -1
package/bpk-scrim-utils/src/focusStore.js +3 -1
package/bpk-scrim-utils/src/scroll-utils.d.ts +2 -0
package/bpk-scrim-utils/src/scroll-utils.js +78 -8
package/bpk-scrim-utils/src/withScrim.js +25 -28
package/package.json +1 -1

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js CHANGED Viewed

@@ -101,6 +101,18 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       changes,
       type
     } = actionAndChanges;
+    // Intercept InputBlur before the alwaysRenderSuggestions early-return
+    if (type === useCombobox.stateChangeTypes.InputBlur) {
+      const keepOpen = Boolean(alwaysRenderSuggestions && hasSuggestions);
+      return {
+        ...changes,
+        isOpen: keepOpen,
+        highlightedIndex: -1,
+        selectedItem: state.selectedItem,
+        inputValue: state.inputValue
+      };
+    }
     const shouldForceKeepOpen = alwaysRenderSuggestions && hasSuggestions && changes.isOpen === false;
     if (shouldForceKeepOpen) {
       return {
@@ -205,6 +217,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       onSuggestionHighlighted?.({
         suggestion: currentSuggestion
       });
+      // Only arm auto-select-on-blur for non-mouse-driven highlight changes.
+      if (type !== useCombobox.stateChangeTypes.ItemMouseMove && type !== useCombobox.stateChangeTypes.MenuMouseLeave) {
+        savedHighlightedIndexRef.current = newIndex ?? null;
+      }
       const isArrowKey = type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp;
       if (isArrowKey) {
         if (currentSuggestion) {
@@ -272,8 +289,6 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (highlightedIndex === previousHighlightedIndexRef.current) return;
     previousHighlightedIndexRef.current = highlightedIndex;
-    // Save highlighted index to allow auto-selection on blur
-    savedHighlightedIndexRef.current = highlightedIndex;
     const currentSuggestion = highlightedIndex != null && highlightedIndex >= 0 ? flattenedSuggestions?.[highlightedIndex] ?? null : null;
     if (!currentSuggestion && originalInputOnPreviewRef.current !== null) {
       if ((inputValue ?? '') !== originalInputOnPreviewRef.current) {
@@ -463,8 +478,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         highlightedSuggestion = firstSuggestion;
       }
       if (highlightedSuggestion) {
-        // Use setTimeout to ensure selectItem runs after the blur event completes
+        // Use setTimeout to ensure selectItem runs after the blur event completes.
         setTimeout(() => {
+          if (committedSelectionRef.current) {
+            return;
+          }
           selectItem(highlightedSuggestion);
         }, 0);
       }

package/bpk-scrim-utils/src/bpk-scrim-content.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrim-content{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
+.bpk-scrim-content{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}

package/bpk-scrim-utils/src/focusStore.js CHANGED Viewed

@@ -64,7 +64,9 @@ const focusStore = {
       return;
     }
     try {
-      storedFocusElement.focus();
+      storedFocusElement.focus({
+        preventScroll: true
+      });
     } catch {
       // Element may have been detached from the DOM
     }

package/bpk-scrim-utils/src/scroll-utils.d.ts CHANGED Viewed

@@ -4,3 +4,5 @@ export declare const fixBody: () => void;
 export declare const unfixBody: () => void;
 export declare const lockScroll: () => void;
 export declare const unlockScroll: () => void;
+export declare const lockTouchAction: () => void;
+export declare const unlockTouchAction: () => void;

package/bpk-scrim-utils/src/scroll-utils.js CHANGED Viewed

@@ -16,7 +16,19 @@
  * limitations under the License.
  */
+// Module-level state is intentional: the <body> element is a global singleton,
+// so nested scrims must coordinate through a shared counter. Each lock/unlock
+// pair maintains its own depth counter so the "save original value, apply
+// locked value" logic only runs on the 0↔1 transition. Inner nested calls are
+// no-ops that simply bump the counter. This prevents the inner scrim from
+// overwriting the outer scrim's saved "pre-lock" value — see the Nested story
+// in BpkModal.stories.tsx.
 let scrollOffset = 0;
+let savedTouchAction = '';
+let savedOverscrollBehavior = '';
+let fixBodyDepth = 0;
+let lockScrollDepth = 0;
+let lockTouchActionDepth = 0;
 const getWindow = () => typeof window !== 'undefined' ? window : null;
 const getBodyElement = () => typeof document !== 'undefined' && typeof document.body !== 'undefined' ? document.body : null;
 const getScrollBarWidth = () => {
@@ -41,6 +53,12 @@ const getScrollBarWidth = () => {
   return scrollBarWidth === 0 ? '' : `${scrollBarWidth}px`;
 };
 export const storeScroll = () => {
+  // Skip while an outer scrim already fixed the body: pageYOffset reads 0 once
+  // the body is position:fixed, so capturing it would clobber the outer
+  // scroll position and cause restoreScroll to jump back to the top on close.
+  if (fixBodyDepth > 0) {
+    return;
+  }
   const window = getWindow();
   if (window) {
     scrollOffset = window.pageYOffset;
@@ -57,29 +75,81 @@ export const fixBody = () => {
   if (!body) {
     return;
   }
-  body.style.position = 'fixed';
+  if (fixBodyDepth === 0) {
+    // Set top before position:fixed so the browser doesn't jump to scrollY=0.
+    // scrollOffset is captured by storeScroll() immediately before this call.
+    body.style.top = `-${scrollOffset}px`;
+    body.style.width = '100%';
+    body.style.position = 'fixed';
+  }
+  fixBodyDepth += 1;
 };
 export const unfixBody = () => {
   const body = getBodyElement();
-  if (!body) {
+  if (!body || fixBodyDepth === 0) {
     return;
   }
-  body.style.position = '';
+  fixBodyDepth -= 1;
+  if (fixBodyDepth === 0) {
+    body.style.position = '';
+    body.style.top = '';
+    body.style.width = '';
+  }
 };
+// Locks background scroll on the body. Safe to call on all platforms.
+// None of these block user touch gestures.
 export const lockScroll = () => {
   const body = getBodyElement();
   if (!body) {
     return;
   }
-  const paddingRight = getScrollBarWidth();
-  body.style.overflow = 'hidden';
-  body.style.paddingRight = paddingRight;
+  if (lockScrollDepth === 0) {
+    savedOverscrollBehavior = body.style.overscrollBehavior;
+    body.style.overflow = 'hidden';
+    body.style.paddingRight = getScrollBarWidth();
+    body.style.overscrollBehavior = 'contain';
+  }
+  lockScrollDepth += 1;
 };
 export const unlockScroll = () => {
+  const body = getBodyElement();
+  if (!body || lockScrollDepth === 0) {
+    return;
+  }
+  lockScrollDepth -= 1;
+  if (lockScrollDepth === 0) {
+    body.style.overflow = '';
+    body.style.paddingRight = '';
+    body.style.overscrollBehavior = savedOverscrollBehavior;
+  }
+};
+// Blocks touch gestures on the body via `touch-action: none`. iOS-only.
+//
+// On iOS Safari, `overflow: hidden` alone does not stop touch-scroll or
+// rubber-band overscroll on the body — `touch-action: none` is needed. Do NOT
+// call this on non-iOS platforms: `touch-action` combines with descendants'
+// effective touch-action, so setting `none` on body blocks touch scrolling in
+// any modal content that doesn't explicitly declare its own `touch-action`.
+export const lockTouchAction = () => {
   const body = getBodyElement();
   if (!body) {
     return;
   }
-  body.style.overflow = '';
-  body.style.paddingRight = '';
+  if (lockTouchActionDepth === 0) {
+    savedTouchAction = body.style.touchAction;
+    body.style.touchAction = 'none';
+  }
+  lockTouchActionDepth += 1;
+};
+export const unlockTouchAction = () => {
+  const body = getBodyElement();
+  if (!body || lockTouchActionDepth === 0) {
+    return;
+  }
+  lockTouchActionDepth -= 1;
+  if (lockTouchActionDepth === 0) {
+    body.style.touchAction = savedTouchAction;
+  }
 };

package/bpk-scrim-utils/src/withScrim.js CHANGED Viewed

@@ -21,7 +21,7 @@ import { cssModules, isDeviceIpad, isDeviceIphone, wrapDisplayName } from "../..
 import BpkScrim from "./BpkScrim";
 import focusScope from "./focusScope";
 import focusStore from "./focusStore";
-import { fixBody, lockScroll, restoreScroll, storeScroll, unfixBody, unlockScroll } from "./scroll-utils";
+import { fixBody, lockScroll, lockTouchAction, restoreScroll, storeScroll, unfixBody, unlockScroll, unlockTouchAction } from "./scroll-utils";
 import STYLES from "./bpk-scrim-content.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -41,33 +41,27 @@ const withScrim = WrappedComponent => {
         isIphone
       } = this.props;
       const applicationElement = getApplicationElement();
-      requestAnimationFrame(() => {
-        /**
-         * iPhones & iPads need to have a fixed body
-         * and scrolling stored to prevent some iOS specific issues occuring
-         *
-         * Issue description:
-         * iOS safari does not prevent scrolling on the underlying content.
-         * Without the below fixes this results in users being able to scroll below any modal or dialog that uses withScrim.
-         *
-         * The fixes can be summaried here: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
-         *
-         * The most dangerous of the fixes below is the fixBody, this function applies changes to the <body> style.
-         * This has the potential to override any custom styles already applied. The assumption here is that no one internally is making these changes to body.
-         *
-         * There is a corresponding set of functions in the componentWillUnmount block that deals with undoing these changes.
-         */
-        if (isIphone || isIpad) {
-          storeScroll();
-          fixBody();
-        }
-        /**
-         * lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
-         * The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
-         */
-        lockScroll();
-      });
+      /**
+       * iPhones & iPads need to have a fixed body and scrolling stored to prevent some iOS
+       * specific issues occurring. iOS Safari does not prevent scrolling on the underlying
+       * content — without these fixes users can scroll below a modal or dialog that uses
+       * withScrim. See: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
+       *
+       * The most dangerous of the fixes below is fixBody — it applies changes to the <body>
+       * style and has the potential to override any custom styles already applied. The
+       * assumption here is that no one internally is making these changes to body.
+       *
+       * These must run synchronously (not inside requestAnimationFrame) so the body is
+       * locked before the first paint, otherwise a visible scroll-jump occurs on open.
+       * componentWillUnmount has a corresponding set of calls that undo these changes.
+       */
+      if (isIphone || isIpad) {
+        storeScroll();
+        fixBody();
+        lockTouchAction();
+      }
+      lockScroll();
       if (applicationElement) {
         applicationElement.setAttribute('aria-hidden', 'true');
       }
@@ -84,8 +78,11 @@ const withScrim = WrappedComponent => {
       } = this.props;
       const applicationElement = getApplicationElement();
       if (isIphone || isIpad) {
-        setTimeout(restoreScroll, 0);
+        // unfixBody before restoreScroll: restoring scroll while body is still fixed
+        // prevents a second visual jump on close.
         unfixBody();
+        restoreScroll();
+        unlockTouchAction();
       }
       unlockScroll();
       if (applicationElement) {

package/package.json CHANGED Viewed

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