@skyscanner/backpack-web 42.12.0 → 42.13.1

package/bpk-component-comparison-table/index.d.ts

@@ -1,3 +1,6 @@
+import BpkComparisonTable from './src/BpkComparisonTable/BpkComparisonTable';
 import BpkComparisonTray from './src/BpkComparisonTray/BpkComparisonTray';
 export type { BpkComparisonItem, BpkComparisonTrayRootProps, BpkComparisonTrayItemProps, BpkComparisonTrayNamespace, } from './src/BpkComparisonTray/common-types';
-export default BpkComparisonTray;
+export type { BpkCompareRow, BpkCompareColumn, BpkComparisonTableRootProps, BpkComparisonTableStrings, BpkComparisonTableNamespace, } from './src/BpkComparisonTable/common-types';
+export { BpkComparisonTray };
+export default BpkComparisonTable;

package/bpk-component-comparison-table/index.js

@@ -16,5 +16,7 @@
  * limitations under the License.
  */
 
+import BpkComparisonTable from "./src/BpkComparisonTable/BpkComparisonTable";
 import BpkComparisonTray from "./src/BpkComparisonTray/BpkComparisonTray";
-export default BpkComparisonTray;
+export { BpkComparisonTray };
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.d.ts

@@ -0,0 +1,17 @@
+import type { BpkComparisonTableNamespace } from './common-types';
+/**
+ * BpkComparisonTable — side-by-side comparison modal.
+ *
+ * @example
+ * <BpkComparisonTable.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BpkComparisonTable.Header title="Compare cars" strings={strings} />
+ *   <BpkComparisonTable.Content
+ *     columns={columns}
+ *     onRemove={(itemId) => handleRemove(itemId)}
+ *     onAddMoreClick={() => setIsOpen(false)}
+ *     strings={strings}
+ *   />
+ * </BpkComparisonTable.Root>
+ */
+declare const BpkComparisonTable: BpkComparisonTableNamespace;
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.js

@@ -0,0 +1,41 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkComparisonTableContent from "./BpkComparisonTableContent";
+import BpkComparisonTableHeader from "./BpkComparisonTableHeader";
+import BpkComparisonTableRoot from "./BpkComparisonTableRoot";
+/**
+ * BpkComparisonTable — side-by-side comparison modal.
+ *
+ * @example
+ * <BpkComparisonTable.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BpkComparisonTable.Header title="Compare cars" strings={strings} />
+ *   <BpkComparisonTable.Content
+ *     columns={columns}
+ *     onRemove={(itemId) => handleRemove(itemId)}
+ *     onAddMoreClick={() => setIsOpen(false)}
+ *     strings={strings}
+ *   />
+ * </BpkComparisonTable.Root>
+ */
+const BpkComparisonTable = {
+  Root: BpkComparisonTableRoot,
+  Header: BpkComparisonTableHeader,
+  Content: BpkComparisonTableContent
+};
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-button{opacity:var(--bpk-image-opacity, 1);overflow:clip;margin-block-start:calc(.5rem*var(--bpk-image-opacity, 1));max-block-size:calc(5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts

@@ -0,0 +1,8 @@
+import type { BpkCompareColumn } from './common-types';
+type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'itemId' | 'bestTag' | 'removeA11yLabel'> & {
+    removeLabel: string;
+    bestTagLabel: string;
+    onRemove: (itemId: string) => void;
+};
+declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, itemId, onRemove, removeA11yLabel, removeLabel, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js

@@ -0,0 +1,66 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkBadge, { BADGE_TYPES } from "../../../bpk-component-badge";
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkComparisonTableColumnHeader = ({
+  bestTag = false,
+  bestTagLabel,
+  headerContent,
+  imageAlt = '',
+  imageSrc,
+  itemId,
+  onRemove,
+  removeA11yLabel,
+  removeLabel
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-comparison-table__header-content'),
+  children: [/*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-comparison-table__header-image-wrapper'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-comparison-table__header-image-area'),
+      children: imageSrc && /*#__PURE__*/_jsx("img", {
+        src: imageSrc,
+        alt: imageAlt
+      })
+    }), bestTag && /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-comparison-table__best-tag'),
+      children: /*#__PURE__*/_jsx(BpkBadge, {
+        type: BADGE_TYPES.brand,
+        children: bestTagLabel
+      })
+    })]
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-table__header-id-section'),
+    children: headerContent
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-table__remove-button'),
+    children: /*#__PURE__*/_jsx(BpkButton, {
+      type: BUTTON_TYPES.link,
+      size: SIZE_TYPES.small,
+      onClick: () => onRemove(itemId),
+      "aria-label": removeA11yLabel,
+      children: removeLabel
+    })
+  })]
+});
+export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.d.ts

@@ -0,0 +1,7 @@
+type BpkComparisonTableColumnHeaderPlaceholderProps = {
+    addMoreDescription: string;
+    addMoreLinkText: string;
+    onAddMoreClick: () => void;
+};
+declare const BpkComparisonTableColumnHeaderPlaceholder: ({ addMoreDescription, addMoreLinkText, onAddMoreClick, }: BpkComparisonTableColumnHeaderPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableColumnHeaderPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.js

@@ -0,0 +1,49 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
+import { BpkFlex, BpkSpacing } from "../../../bpk-component-layout";
+import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../../bpk-component-text";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkComparisonTableColumnHeaderPlaceholder = ({
+  addMoreDescription,
+  addMoreLinkText,
+  onAddMoreClick
+}) => /*#__PURE__*/_jsxs(BpkFlex, {
+  direction: "column",
+  align: "center",
+  gap: BpkSpacing.MD,
+  paddingTop: BpkSpacing.LG,
+  paddingInline: BpkSpacing.XL,
+  children: [/*#__PURE__*/_jsx(BpkText, {
+    textAlign: "center",
+    tagName: "p",
+    textStyle: TEXT_STYLES.bodyDefault,
+    color: TEXT_COLORS.textSecondary,
+    children: addMoreDescription
+  }), /*#__PURE__*/_jsx(BpkButton, {
+    type: BUTTON_TYPES.link,
+    size: SIZE_TYPES.small,
+    onClick: onAddMoreClick,
+    children: addMoreLinkText
+  })]
+});
+export default BpkComparisonTableColumnHeaderPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableContentProps } from './common-types';
+declare const BpkComparisonTableContent: ({ columns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableContentProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableContent;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js

@@ -0,0 +1,94 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+import { BpkTable, BpkTableBody, BpkTableCell, BpkTableRow, TABLE_BODY_TYPES } from "../../../bpk-component-table";
+import { cssModules } from "../../../bpk-react-utils";
+import BpkComparisonTableHeaderRow from "./BpkComparisonTableHeaderRow";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const MAX_COLUMNS = 3;
+
+// Matches the image area height (5.1875rem × 16px). Opacity goes from 1 → 0 as the user scrolls 0 → 83 px, giving a smooth parallax fade.
+const IMAGE_FADE_THRESHOLD_PX = 83;
+const BpkComparisonTableContent = ({
+  columns,
+  onAddMoreClick,
+  onRemove,
+  strings
+}) => {
+  const scrollContainerRef = useRef(null);
+
+  // Pad with nulls so the table always renders exactly MAX_COLUMNS slots.
+  const displayColumns = [...columns, null, null, null].slice(0, MAX_COLUMNS);
+  const rowIds = columns[0]?.rows.map(row => row.rowId) ?? [];
+
+  // Dev-mode guard: warn if not all columns share the same rowId sequence.
+  if (process.env.NODE_ENV !== 'production' && columns.length > 1) {
+    const rowIdsByColumn = columns.map(column => column.rows.map(row => row.rowId).join(','));
+    const allMatch = rowIdsByColumn.every(ids => ids === rowIdsByColumn[0]);
+    if (!allMatch) {
+      // eslint-disable-next-line no-console
+      console.warn('[BpkComparisonTable] Not all columns share the same rowId sequence. Rows may misalign.');
+    }
+  }
+
+  // Pre-index cells by itemId → rowId for O(1) lookup during render.
+  const cellsByItemAndRow = new Map(columns.map(column => [column.itemId, new Map(column.rows.map(row => [row.rowId, row.cell]))]));
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return undefined;
+    const handleScroll = () => {
+      const {
+        scrollTop
+      } = container;
+      // During the animation phase, push tbody down by the scroll amount so rows appear locked in place.
+      // Once the fade-out completes the offset is fixed at the threshold and normal scrolling resumes.
+      container.style.setProperty('--bpk-rows-offset', `${Math.min(scrollTop, IMAGE_FADE_THRESHOLD_PX)}px`);
+      container.style.setProperty('--bpk-image-opacity', `${1 - Math.min(scrollTop / IMAGE_FADE_THRESHOLD_PX, 1)}`);
+    };
+    container.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: scrollContainerRef,
+    className: getClassName('bpk-comparison-table__scroll-container'),
+    children: /*#__PURE__*/_jsxs(BpkTable, {
+      children: [/*#__PURE__*/_jsx(BpkComparisonTableHeaderRow, {
+        displayColumns: displayColumns,
+        onRemove: onRemove,
+        onAddMoreClick: onAddMoreClick,
+        strings: strings
+      }), /*#__PURE__*/_jsx(BpkTableBody, {
+        type: TABLE_BODY_TYPES.striped,
+        children: rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
+          children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
+            // Placeholder need a distinct background colour not available via BpkTableCell props
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            className: column ? undefined : getClassName('bpk-comparison-table__placeholder-cell'),
+            children: column ? cellsByItemAndRow.get(column.itemId)?.get(rowId) ?? null : null
+          }, column ? `${rowId}-${column.itemId}` : `${rowId}-placeholder-${index}`))
+        }, rowId))
+      })]
+    })
+  });
+};
+export default BpkComparisonTableContent;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeader.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableHeaderProps } from './common-types';
+declare const BpkComparisonTableHeader: ({ children, strings, title }: BpkComparisonTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeader.js

@@ -0,0 +1,42 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BpkBox, BpkSpacing } from "../../../bpk-component-layout";
+import { BpkModalV3 } from "../../../bpk-component-modal";
+import BpkVisuallyHidden from "../../../bpk-component-visually-hidden";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BpkComparisonTableHeader = ({
+  children,
+  strings,
+  title
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsxs(BpkModalV3.Header, {
+    children: [/*#__PURE__*/_jsx(BpkModalV3.Title, {
+      children: title ?? /*#__PURE__*/_jsx(BpkVisuallyHidden, {
+        children: strings.accessibleLabel
+      })
+    }), /*#__PURE__*/_jsx(BpkModalV3.CloseTrigger, {
+      label: strings.closeLabel
+    })]
+  }), children && /*#__PURE__*/_jsx(BpkBox, {
+    paddingBottom: BpkSpacing.MD,
+    paddingInline: BpkSpacing.Base,
+    children: children
+  })]
+});
+export default BpkComparisonTableHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts

@@ -0,0 +1,9 @@
+import type { BpkComparisonTableStrings, BpkCompareColumn } from './common-types';
+type BpkComparisonTableHeaderRowProps = {
+    displayColumns: Array<BpkCompareColumn | null>;
+    onRemove: (itemId: string) => void;
+    onAddMoreClick: () => void;
+    strings: BpkComparisonTableStrings;
+};
+declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js

@@ -0,0 +1,52 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BpkTableHead, BpkTableHeadCell, BpkTableRow } from "../../../bpk-component-table";
+import BpkComparisonTableColumnHeader from "./BpkComparisonTableColumnHeader";
+import BpkComparisonTableColumnHeaderPlaceholder from "./BpkComparisonTableColumnHeaderPlaceholder";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkComparisonTableHeaderRow = ({
+  displayColumns,
+  onAddMoreClick,
+  onRemove,
+  strings
+}) => {
+  const {
+    addMoreDescription,
+    addMoreLinkText,
+    bestTagLabel,
+    removeLabel
+  } = strings;
+  return /*#__PURE__*/_jsx(BpkTableHead, {
+    children: /*#__PURE__*/_jsx(BpkTableRow, {
+      children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableHeadCell, {
+        children: column ? /*#__PURE__*/_jsx(BpkComparisonTableColumnHeader, {
+          ...column,
+          removeLabel: removeLabel,
+          onRemove: onRemove,
+          bestTagLabel: bestTagLabel
+        }) : /*#__PURE__*/_jsx(BpkComparisonTableColumnHeaderPlaceholder, {
+          addMoreDescription: addMoreDescription,
+          addMoreLinkText: addMoreLinkText,
+          onAddMoreClick: onAddMoreClick
+        })
+      }, column ? column.itemId : `placeholder-${index}`))
+    })
+  });
+};
+export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableRootProps } from './common-types';
+declare const BpkComparisonTableRoot: ({ children, isOpen, onClose }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js

@@ -0,0 +1,38 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BpkModalV3 } from "../../../bpk-component-modal";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BpkComparisonTableRoot = ({
+  children,
+  isOpen,
+  onClose
+}) => /*#__PURE__*/_jsx(BpkModalV3.Root, {
+  open: isOpen,
+  onOpenChange: details => {
+    if (!details.open) {
+      onClose();
+    }
+  },
+  children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
+    children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
+      children: children
+    })]
+  })
+});
+export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+/** A single row entry within a comparison column. */
+export type BpkCompareRow = {
+    /** Stable unique identifier used to align rows across columns. */
+    rowId: string;
+    /** Cell content — consumer-controlled ReactNode. */
+    cell: ReactNode;
+};
+/** Data for one filled comparison column. */
+export type BpkCompareColumn = {
+    /** Stable unique identifier used for removal callbacks. */
+    itemId: string;
+    /** When true, renders a BpkBadge type=brand overlaying the top-left of the image area. */
+    bestTag?: boolean;
+    /** Image src for the header image area. */
+    imageSrc?: string;
+    /** Alt text for the header image. */
+    imageAlt?: string;
+    /** Consumer-owned slot rendered below the image area (name, description, price, CTA...). */
+    headerContent: ReactNode;
+    /** Row data — must match rowId sequences across all columns. */
+    rows: BpkCompareRow[];
+    /** Accessible label for the Remove button (e.g. "Remove rentalcars.com deal"). */
+    removeA11yLabel: string;
+};
+/** All strings required by BpkComparisonTable. */
+export type BpkComparisonTableStrings = {
+    /** Accessible dialog name, used via BpkVisuallyHidden when no visible title is provided. */
+    accessibleLabel: string;
+    /** Accessible label for the modal close button. */
+    closeLabel: string;
+    /** Visible label for the Remove button in each column header. */
+    removeLabel: string;
+    /** Text inside the BpkBadge when bestTag=true (e.g. "Best"). */
+    bestTagLabel: string;
+    /** Description text inside the placeholder column. */
+    addMoreDescription: string;
+    /** Link text inside the placeholder column. */
+    addMoreLinkText: string;
+};
+/** Props for BpkComparisonTable.Root — modal shell only. */
+export type BpkComparisonTableRootProps = {
+    /** Controls whether the modal is open. */
+    isOpen: boolean;
+    /** Called when the modal close trigger is activated or Escape is pressed. */
+    onClose: () => void;
+    /** BpkComparisonTable.Header and BpkComparisonTable.Content. */
+    children: ReactNode;
+};
+/** Props for BpkComparisonTable.Header — modal header + optional AiBlurb slot. */
+export type BpkComparisonTableHeaderProps = {
+    /** Optional modal title rendered via BpkModalV3.Title. */
+    title?: string;
+    strings: BpkComparisonTableStrings;
+    /** Optional slot for AI blurb or any content below the title/close row. */
+    children?: ReactNode;
+};
+/** Props for BpkComparisonTable.Content — modal body with the comparison table. */
+export type BpkComparisonTableContentProps = {
+    /** 1–3 filled columns. Component pads to 3 with placeholder cells automatically. */
+    columns: BpkCompareColumn[];
+    /** Called when a Remove button is clicked, with the column's itemId. */
+    onRemove: (itemId: string) => void;
+    /** Called when the Add more link in a placeholder column is clicked. */
+    onAddMoreClick: () => void;
+    strings: BpkComparisonTableStrings;
+};
+/** Namespace type covering all BpkComparisonTable subcomponents. */
+export type BpkComparisonTableNamespace = {
+    Root: (props: BpkComparisonTableRootProps) => ReactNode;
+    Header: (props: BpkComparisonTableHeaderProps) => ReactNode;
+    Content: (props: BpkComparisonTableContentProps) => ReactNode;
+};

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.js

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

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;right:0;display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translate(50%, -50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}
+.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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