@skyscanner/backpack-web 38.18.0 → 38.19.1

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -66,14 +66,19 @@ const BpkCardListCarousel = props => {
     const shownIndicatorCount = Math.min(totalPages, PAGINATION_INDICATOR_MAX_SHOWN_COUNT);
     return Math.max(RENDER_BUFFER_SIZE, (shownIndicatorCount - 1) * initiallyShownCards);
   }, [childrenLength, initiallyShownCards, isMobile]);
-  const renderList = useMemo(() => visibilityList.map((_, index) => index >= firstVisibleIndex - dynamicRenderBufferSize && index <= lastVisibleIndex + dynamicRenderBufferSize ? 1 : 0), [visibilityList, firstVisibleIndex, lastVisibleIndex, dynamicRenderBufferSize]);
+  const renderList = useMemo(() => visibilityList.map((_, index) => {
+    const isIndexVisible = index >= firstVisibleIndex - dynamicRenderBufferSize && index <= lastVisibleIndex + dynamicRenderBufferSize;
+    if (isIndexVisible) {
+      hasBeenVisibleRef.current.add(index);
+    }
+    return isIndexVisible ? 1 : 0;
+  }), [visibilityList, firstVisibleIndex, lastVisibleIndex, dynamicRenderBufferSize]);
   const cardRefFns = useMemo(() => Array(childrenLength).fill(null).map((_, i) => el => {
     cardRefs.current[i] = el;
     observerVisibility(el, i);
     setA11yTabIndex(el, i, visibilityList);
     // record the first card's width and height when it becomes visible
     if (el && visibilityList[i] === 0) {
-      hasBeenVisibleRef.current.add(i);
       if (firstCardWidthRef.current == null && el.offsetWidth) {
         firstCardWidthRef.current = el.offsetWidth;
       }
@@ -81,7 +86,7 @@ const BpkCardListCarousel = props => {
         firstCardHeightRef.current = el.offsetHeight;
       }
     }
-  }), [childrenLength, observerVisibility, visibilityList, hasBeenVisibleRef, firstCardWidthRef, firstCardHeightRef]);
+  }), [childrenLength, observerVisibility, visibilityList, firstCardWidthRef, firstCardHeightRef]);
   useEffect(() => {
     const container = root;
     if (isMobile || !container) return undefined;
@@ -143,30 +148,36 @@ const BpkCardListCarousel = props => {
       if (firstCardHeightRef.current) {
         cardDimensionStyle.height = `${firstCardHeightRef.current}px`;
       }
+      const commonProps = {
+        className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
+        style: {
+          ...shownNumberStyle,
+          ...cardDimensionStyle
+        },
+        key: `carousel-card-${index.toString()}`,
+        role: "group"
+      };
 
       // Only render cards that are within the renderList range or have been visible before
-      if (renderList[index] !== 1 && !hasBeenVisibleRef.current.has(index)) {
+      const shouldRenderCard = renderList[index] === 1 || hasBeenVisibleRef.current.has(index);
+      if (!shouldRenderCard) {
         return /*#__PURE__*/_jsx("div", {
+          ...commonProps,
           style: {
-            ...shownNumberStyle,
-            ...cardDimensionStyle,
-            flexShrink: 0,
-            visibility: 'hidden'
+            ...commonProps.style,
+            contain: 'paint'
           },
-          "aria-hidden": "true"
-        }, `placeholder-${index.toString()}`);
+          "data-testid": "bpk-card-list-carousel--placeholder",
+          "aria-hidden": "true",
+          children: card
+        });
       }
       return /*#__PURE__*/_jsx("div", {
-        className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
+        ...commonProps,
         ref: cardRefFns[index],
-        style: {
-          ...shownNumberStyle,
-          ...cardDimensionStyle
-        },
-        role: "group",
         "aria-label": slideLabel(index, childrenLength),
         children: card
-      }, `carousel-card-${index.toString()}`);
+      });
     })
   });
 };

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

@@ -28,8 +28,10 @@ const setPageProperties = ({
   isDialogOpen
 }) => {
   document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
-  document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
-  document.body.style.width = isDialogOpen ? '100%' : 'auto';
+  if (!dialogSupported) {
+    document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
+    document.body.style.width = isDialogOpen ? '100%' : 'auto';
+  }
 };
 export const BpkDialogWrapper = ({
   children,

package/package.json

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