@skyscanner/backpack-web 42.2.0 → 42.4.0

package/bpk-component-layout/src/BpkStack.js

@@ -16,46 +16,53 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Stack, VStack, HStack } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkStack = ({
+export const BpkStack = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
   return /*#__PURE__*/_jsx(Stack, {
+    ref: ref,
     ...getDataComponentAttribute('Stack'),
     ...processedProps,
     children: children
   });
-};
-export const BpkHStack = ({
+});
+BpkStack.displayName = 'BpkStack';
+export const BpkHStack = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
   return /*#__PURE__*/_jsx(HStack, {
+    ref: ref,
     ...getDataComponentAttribute('HStack'),
     ...processedProps,
     children: children
   });
-};
-export const BpkVStack = ({
+});
+BpkHStack.displayName = 'BpkHStack';
+export const BpkVStack = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
   return /*#__PURE__*/_jsx(VStack, {
+    ref: ref,
     ...getDataComponentAttribute('VStack'),
     ...processedProps,
     children: children
   });
-};
+});
+BpkVStack.displayName = 'BpkVStack';

package/bpk-component-layout/src/commonProps.d.ts

@@ -1,4 +1,6 @@
+import type { AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
 import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
+import type { TextStyle } from '../../bpk-component-text/src/BpkText';
 /**
  * Common spacing-related props shared by all Backpack layout components
  * All spacing props must use Backpack spacing tokens or percentages
@@ -39,13 +41,18 @@ export interface BpkSpacingProps {
  * layout components purely structural.
  *
  * NOTE:
- * - Layout components other than BpkBox do not expose event handlers.
- * - BpkBox reintroduces a minimal set of events (onClick, onFocus, onBlur)
- *   on its own props type.
+ * - Layout components expose onClick, tabIndex and role to support interactive
+ *   container patterns (e.g. clickable cards, landmark regions).
+ * - BpkBox additionally exposes onFocus and onBlur on its own props type.
  */
 export interface BpkCommonLayoutProps extends BpkSpacingProps {
     className?: never;
     style?: never;
+    tabIndex?: number;
+    role?: AriaRole;
+    onClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    textStyle?: BpkResponsiveValue<TextStyle>;
     'data-testid'?: string;
     'data-cy'?: string;
     color?: never;

package/bpk-component-layout/src/theme.js

@@ -17,11 +17,10 @@
  */
 
 import { defineConfig } from '@chakra-ui/react';
+
 // Import tokens from Backpack foundations
 // Note: Some tokens may not be in TypeScript definitions but exist at runtime
-
-const bpkTokens = require('@skyscanner/bpk-foundations-web/tokens/base.es6');
-
+import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
@@ -210,6 +209,242 @@ export function getBorderRadiusValue(token) {
 export function getShadowValue(token) {
   return shadowMap[token];
 }
+
+/**
+ * Maps Backpack text style tokens to Chakra UI textStyles.
+ * CSS property values are sourced from @skyscanner/bpk-foundations-web/tokens/base.es6.
+ * Each entry mirrors the corresponding SCSS mixin in bpk-mixins/_typography.scss.
+ */
+const textStylesMap = {
+  xs: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  sm: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  base: {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  lg: {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  xxxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  caption: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  footnote: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'label-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'body-default': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'body-longform': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  subheading: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'heading-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXlTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLgTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBaseTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'hero-1': {
+    value: {
+      fontSize: bpkTokens.fontSize8Xl,
+      lineHeight: bpkTokens.lineHeight8Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-2': {
+    value: {
+      fontSize: bpkTokens.fontSize7Xl,
+      lineHeight: bpkTokens.lineHeight7Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-3': {
+    value: {
+      fontSize: bpkTokens.fontSize6Xl,
+      lineHeight: bpkTokens.lineHeight6Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-6': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'editorial-1': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-2': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-3': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  }
+};
 export function createBpkConfig() {
   // Convert breakpoint map to Chakra UI format
   // Breakpoints in Chakra v3 are typically simple strings in the breakpoints object
@@ -227,6 +462,7 @@ export function createBpkConfig() {
       tokens: {
         spacing: spacingMap
       },
+      textStyles: textStylesMap,
       breakpoints: chakraBreakpoints
     }
   });

package/bpk-component-layout/src/tokenUtils.d.ts

@@ -1,4 +1,4 @@
-export type BpkLayoutComponentName = 'BpkBox' | 'BpkFlex' | 'BpkGrid' | 'BpkStack';
+export type BpkLayoutComponentName = 'BpkBox' | 'BpkFlex' | 'BpkGrid' | 'BpkGridItem' | 'BpkStack';
 /**
  * Allowlisted, component-scoped prop groups that are eligible for Backpack responsive value
  * processing (Backpack breakpoint keys -> Chakra breakpoint keys).

package/bpk-component-layout/src/tokenUtils.js

@@ -34,6 +34,8 @@ import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isVali
 export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   BpkBox: {
     container: [
+    // Typography
+    'textStyle',
     // Display
     'display',
     // Flex container props
@@ -48,25 +50,29 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['flexDirection', 'justifyContent', 'alignItems', 'flexWrap'],
+    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
+    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
     item: [
     // Used when placing the grid itself within a parent grid.
     'gridColumn', 'gridRow']
   },
+  BpkGridItem: {
+    container: ['textStyle']
+  },
   // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: StackOptionKeys
+    container: ['textStyle', ...StackOptionKeys]
   }
 };
 export const BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT = {
   BpkBox: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkBox.container, ...(BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkBox.item ?? [])],
   BpkFlex: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkFlex.container, ...(BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkFlex.item ?? [])],
   BpkGrid: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkGrid.container, ...(BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkGrid.item ?? [])],
+  BpkGridItem: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkGridItem.container],
   BpkStack: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkStack.container]
 };
 function filterToAllowlist(props, allowlist) {

package/bpk-component-layout/src/types.d.ts

@@ -4,11 +4,11 @@ import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
 import type { BoxProps, FlexProps, GridProps, GridItemProps, StackProps } from '@chakra-ui/react';
 /**
- * Layout-level event props that should not be exposed on layout components
- * by default. BpkBox will reintroduce a minimal subset (onClick, onFocus,
- * onBlur) explicitly on its own props type.
+ * Layout-level event props that should not be exposed on layout components.
+ * onClick is handled via BpkCommonLayoutProps; onFocus/onBlur are reintroduced
+ * on BpkBoxProps only.
  */
-type LayoutEventProps = 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOver' | 'onMouseOut' | 'onMouseDown' | 'onMouseUp' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress';
+type LayoutEventProps = 'onMouseEnter' | 'onMouseLeave' | 'onMouseOver' | 'onMouseOut' | 'onMouseDown' | 'onMouseUp' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress';
 /**
  * Shorthand props from the underlying layout system that we do NOT expose on
  * Backpack layout components. These mostly mirror longer-form spacing,
@@ -93,13 +93,14 @@ export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, B
 }
 /**
  * Props for BpkBox component
- * Combines Box-specific props with Backpack common layout props
- * and reintroduces a minimal set of interaction props.
+ * Combines Box-specific props with Backpack common layout props.
+ * onClick is inherited from BpkCommonLayoutProps.
+ * onFocus and onBlur are reintroduced here as BpkBox-only interaction props.
+ * textStyle maps to Chakra's `textStyle` theme prop for Backpack typography and supports responsive values.
  */
-type BoxEventProps = Pick<BoxProps, 'onClick' | 'onFocus' | 'onBlur'>;
+type BoxEventProps = Pick<BoxProps, 'onFocus' | 'onBlur'>;
 export interface BpkBoxProps extends BpkCommonLayoutProps, BpkBoxSpecificProps {
     children?: ReactNode;
-    onClick?: BoxEventProps['onClick'];
     onFocus?: BoxEventProps['onFocus'];
     onBlur?: BoxEventProps['onBlur'];
 }

package/bpk-component-modal/index.d.ts

@@ -2,9 +2,10 @@ import BpkModal from './src/BpkModal';
 import { MODAL_STYLING } from './src/BpkModalInner';
 import { BpkModalV2 } from './src/BpkModalV2/BpkModal';
 import BpkModalV3 from './src/BpkModalV3/BpkModalV3';
+import { MODAL_V3_TYPES } from './src/BpkModalV3/common-types';
 import { propTypes, defaultProps } from './src/legacy-prop-types';
 import themeAttributes from './src/themeAttributes';
 import type { Props } from './src/BpkModal';
 export type BpkModalProps = Props;
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_STYLING, };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING, };

package/bpk-component-modal/index.js

@@ -20,8 +20,9 @@ import BpkModal from "./src/BpkModal";
 import { MODAL_STYLING } from "./src/BpkModalInner";
 import { BpkModalV2 } from "./src/BpkModalV2/BpkModal";
 import BpkModalV3 from "./src/BpkModalV3/BpkModalV3";
+import { MODAL_V3_TYPES } from "./src/BpkModalV3/common-types";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { propTypes, defaultProps } from "./src/legacy-prop-types";
 import themeAttributes from "./src/themeAttributes";
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_STYLING };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING };

package/bpk-component-modal/src/BpkModalV3/{BpkModalV3Body.module.css → BpkModalV3Body/BpkModalV3Body.module.css}

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-modal-v3__body{flex:1;overflow-y:auto}
+.bpk-modal-v3__body{flex:1;overflow-y:auto;overscroll-behavior:contain}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.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-modal-v3__positioner{position:fixed;display:flex;z-index:1100;justify-content:center;align-items:center;inset:0;pointer-events:none}.bpk-modal-v3__positioner--sheet{align-items:flex-end}.bpk-modal-v3__positioner--full{align-items:stretch}.bpk-modal-v3__positioner--chatbot{align-items:stretch}.bpk-modal-v3__content{position:relative;display:flex;flex-direction:column;background-color:#fff;overflow:clip;pointer-events:none}.bpk-modal-v3__content[data-state=open]{pointer-events:auto}.bpk-modal-v3__content--default{width:100%;max-width:50rem;max-height:90vh;transform:scale(0.9);transition:transform 200ms ease-in-out;border-radius:1.5rem;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-modal-v3__content--default{max-width:none;height:100%;max-height:none;transform:translateY(100%);border-radius:0;box-shadow:none}.bpk-modal-v3__content--default[data-state=open]{transform:translateY(0)}.bpk-modal-v3__content--default[data-state=closed]{transform:translateY(100%)}}.bpk-modal-v3__content--default[data-state=open]{transform:scale(1);opacity:1}.bpk-modal-v3__content--default[data-state=closed]{transform:scale(0.9);opacity:0}.bpk-modal-v3__content--sheet{width:100%;height:fit-content;max-height:100dvh;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:1.5rem 1.5rem 0 0;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-modal-v3__content--sheet[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--sheet[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--full{width:100%;height:100%;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;opacity:0}.bpk-modal-v3__content--full[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--full[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--chatbot{width:100%;height:100%;transform:translateX(100%);transition:transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;background-color:#eff3f8}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(-100%)}.bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}.bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(100%)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(-100%)}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--default{transform:scale(1);transition:none;opacity:1}}@media(prefers-reduced-motion: reduce)and (max-width: 32rem){.bpk-modal-v3__content--default{transform:translateY(0)}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--sheet,.bpk-modal-v3__content--full{transform:translateY(0);transition:none;opacity:1}.bpk-modal-v3__content--chatbot{transform:translateX(0);transition:none;opacity:1}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(0)}}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { BpkModalV3Type } from '../common-types';
+import { type ReactNode } from 'react';
+import { type BpkModalV3Type } from '../common-types';
 type BpkModalV3RootProps = {
     children: ReactNode;
     open?: boolean;

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

@@ -16,29 +16,52 @@
  * limitations under the License.
  */
 
+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 { 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,
   onOpenChange,
   open,
-  type = 'default'
-}) => /*#__PURE__*/_jsx(Dialog.Root, {
-  ...(open !== undefined && {
-    open
-  }),
-  ...(onOpenChange !== undefined && {
-    onOpenChange
-  }),
-  children: /*#__PURE__*/_jsx(ModalTypeProvider, {
-    value: type,
-    children: /*#__PURE__*/_jsx("div", {
-      "data-type": type,
-      ...getDataComponentAttribute('ModalV3'),
-      children: children
+  type = MODAL_V3_TYPES.default
+}) => {
+  const [internalOpen, setInternalOpen] = useState(open ?? false);
+  const isOpen = open ?? internalOpen;
+  const [bodyLockOpen, setBodyLockOpen] = useState(isOpen);
+  useEffect(() => {
+    if (isOpen) {
+      setBodyLockOpen(true);
+    } else {
+      const timer = setTimeout(() => setBodyLockOpen(false), parseInt(durationBase, 10));
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isOpen]);
+  useBodyLock(type === MODAL_V3_TYPES.chatbot && bodyLockOpen);
+  const handleOpenChange = details => {
+    if (open === undefined) {
+      setInternalOpen(details.open);
+    }
+    onOpenChange?.(details);
+  };
+  return /*#__PURE__*/_jsx(Dialog.Root, {
+    ...(open !== undefined && {
+      open
+    }),
+    onOpenChange: handleOpenChange,
+    children: /*#__PURE__*/_jsx(ModalTypeProvider, {
+      value: type,
+      children: /*#__PURE__*/_jsx("div", {
+        "data-type": type,
+        ...getDataComponentAttribute('ModalV3'),
+        children: children
+      })
     })
-  })
-});
+  });
+};
 export default BpkModalV3Root;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/useBodyLock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ * @param {boolean} isLocked - Whether the body scroll should be locked.
+ * @returns {void}
+ */
+declare const useBodyLock: (isLocked: boolean) => void;
+export default useBodyLock;

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

@@ -0,0 +1,69 @@
+/*
+ * 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';
+
+/**
+ * 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.
+ * @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;
+    }
+    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';
+    return () => {
+      if (savedBodyStylesRef.current) {
+        const saved = savedBodyStylesRef.current;
+        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);
+      }
+    };
+  }, [isLocked]);
+};
+export default useBodyLock;

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

@@ -25,7 +25,7 @@ const getClassName = cssModules(STYLES);
 const BpkModalV3Scrim = () => {
   const type = useModalType();
   return /*#__PURE__*/_jsx(Dialog.Backdrop, {
-    className: getClassName('bpk-modal-v3__scrim', type === 'full' && 'bpk-modal-v3__scrim--full'),
+    className: getClassName('bpk-modal-v3__scrim', type === 'full' && 'bpk-modal-v3__scrim--full', type === 'chatbot' && 'bpk-modal-v3__scrim--chatbot'),
     ...getDataComponentAttribute('ModalV3Scrim')
   });
 };