@skyscanner/backpack-web 25.0.0 → 25.2.0

package/bpk-component-image/src/BpkImage.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
 var _bpkReactUtils = require("../../bpk-react-utils");
@@ -38,7 +37,9 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
+                                                                                                                                                                                                                                                                                                                                                                                           */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkImageModule.default);
 class Image extends _react.Component {
   constructor(props) {
@@ -68,30 +69,20 @@ class Image extends _react.Component {
     if (hidden) {
       imgClassNames.push(getClassName('bpk-image__img--hidden'));
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      (0, _jsxRuntime.jsx)("img", _objectSpread({
-        className: imgClassNames.join(' '),
-        alt: altText,
-        onLoad: onImageLoad,
-        ref: this.setImgRef
-      }, rest))
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread({
+      className: imgClassNames.join(' '),
+      alt: altText,
+      onLoad: onImageLoad,
+      ref: this.setImgRef
+    }, rest));
   }
 }
-_defineProperty(Image, "propTypes", {
-  altText: _propTypes.default.string.isRequired,
-  hidden: _propTypes.default.bool,
-  onImageLoad: _propTypes.default.func.isRequired
-});
 _defineProperty(Image, "defaultProps", {
   hidden: false
 });
 class BpkImage extends _react.Component {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "onImageLoad", void 0);
     _defineProperty(this, "placeholder", void 0);
     _defineProperty(this, "onImageLoad", () => {
       if (this.props.onLoad) {
@@ -143,10 +134,7 @@ class BpkImage extends _react.Component {
         },
         className: classNames.join(' '),
         suppressHydrationWarning: this.props.suppressHydrationWarning,
-        children: [inView &&
-        /*#__PURE__*/
-        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        (0, _jsxRuntime.jsx)(Image, _objectSpread({
+        children: [inView && /*#__PURE__*/(0, _jsxRuntime.jsx)(Image, _objectSpread({
           hidden: loading,
           altText: altText,
           onImageLoad: this.onImageLoad
@@ -170,22 +158,8 @@ class BpkImage extends _react.Component {
     });
   }
 }
-_defineProperty(BpkImage, "propTypes", {
-  altText: _propTypes.default.string.isRequired,
-  src: _propTypes.default.string.isRequired,
-  aspectRatio: _propTypes.default.number.isRequired,
-  borderRadiusStyle: _propTypes.default.oneOf(Object.keys(_BpkImageBorderRadiusStyles.default)),
-  className: _propTypes.default.string,
-  inView: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  onLoad: _propTypes.default.func,
-  style: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  suppressHydrationWarning: _propTypes.default.bool
-});
 _defineProperty(BpkImage, "defaultProps", {
   borderRadiusStyle: _BpkImageBorderRadiusStyles.default.none,
-  className: null,
   inView: true,
   loading: false,
   onLoad: null,

package/bpk-component-image/src/BpkImageBorderRadiusStyles.d.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+declare const BORDER_RADIUS_STYLES: {
+    readonly none: "none";
+    readonly sm: "sm";
+};
+export default BORDER_RADIUS_STYLES;

package/bpk-component-image/src/BpkImageBorderRadiusStyles.js

@@ -20,7 +20,9 @@ exports.default = void 0;
  * 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.
- */const BORDER_RADIUS_STYLES = {
+ */
+
+const BORDER_RADIUS_STYLES = {
   none: 'none',
   sm: 'sm'
 };

package/bpk-component-image/src/withLazyLoading.d.ts

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+/// <reference types="lodash" />
+import type { ComponentType } from 'react';
+type WithLazyLoadingProps = {
+    className?: string;
+    style?: {};
+    [rest: string]: any;
+};
+type WithLazyLoadingState = {
+    inView: boolean;
+};
+export default function withLazyLoading<P extends object>(WrappedComponent: ComponentType<P>, documentRef?: Document | null): {
+    new (props: Omit<P, 'inView'> & WithLazyLoadingProps): {
+        element?: HTMLElement | null | undefined;
+        placeholderReference?: string | undefined;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        setInView: () => void;
+        getPassiveArgs(): {
+            capture: boolean;
+            passive?: boolean;
+        };
+        removeEventListeners: () => void;
+        checkInView: import("lodash").DebouncedFunc<() => void>;
+        supportsPassiveEvents: () => boolean;
+        isInViewPort: () => boolean;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "inView">(state: WithLazyLoadingState | ((prevState: Readonly<WithLazyLoadingState>, props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>) => WithLazyLoadingState | Pick<WithLazyLoadingState, K> | null) | Pick<WithLazyLoadingState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<WithLazyLoadingState>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): void;
+    };
+    displayName: string;
+    defaultProps: {
+        style: {};
+        className: string;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export {};

package/bpk-component-image/src/withLazyLoading.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = withLazyLoading;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,16 +35,10 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            */
 function withLazyLoading(WrappedComponent, documentRef) {
   class WithLazyLoading extends _react.Component {
-    constructor() {
-      super();
-      _defineProperty(this, "checkInView", void 0);
+    constructor(props) {
+      super(props);
       _defineProperty(this, "element", void 0);
-      _defineProperty(this, "isInViewPort", void 0);
       _defineProperty(this, "placeholderReference", void 0);
-      _defineProperty(this, "removeEventListeners", void 0);
-      _defineProperty(this, "setInView", void 0);
-      _defineProperty(this, "state", void 0);
-      _defineProperty(this, "supportsPassiveEvents", void 0);
       _defineProperty(this, "setInView", () => {
         this.setState(() => ({
           inView: true
@@ -53,10 +46,10 @@ function withLazyLoading(WrappedComponent, documentRef) {
         this.removeEventListeners();
       });
       _defineProperty(this, "removeEventListeners", () => {
-        documentRef.removeEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
-        documentRef.removeEventListener('resize', this.checkInView);
-        documentRef.removeEventListener('orientationchange', this.checkInView);
-        documentRef.removeEventListener('fullscreenchange', this.checkInView);
+        documentRef?.removeEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
+        documentRef?.removeEventListener('resize', this.checkInView);
+        documentRef?.removeEventListener('orientationchange', this.checkInView);
+        documentRef?.removeEventListener('fullscreenchange', this.checkInView);
       });
       _defineProperty(this, "checkInView", (0, _throttle.default)(() => {
         if (this.isInViewPort()) {
@@ -74,8 +67,9 @@ function withLazyLoading(WrappedComponent, documentRef) {
               return supportsPassiveOption;
             }
           });
-          window.addEventListener('test', null, opts);
-          window.removeEventListener('test');
+          const noop = function () {};
+          window.addEventListener('test', noop, opts);
+          window.removeEventListener('test', noop, opts);
         } catch (e) {
           return false;
         }
@@ -84,8 +78,8 @@ function withLazyLoading(WrappedComponent, documentRef) {
       _defineProperty(this, "isInViewPort", () => {
         if (!this.element) return false;
         const rect = this.element.getBoundingClientRect();
-        const viewPortHeight = Math.max(window.innerHeight, documentRef.documentElement.clientHeight);
-        const viewPortWidth = Math.max(window.innerWidth, documentRef.documentElement.clientWidth);
+        const viewPortHeight = documentRef ? Math.max(window.innerHeight, documentRef.documentElement.clientHeight) : -1;
+        const viewPortWidth = documentRef ? Math.max(window.innerWidth, documentRef.documentElement.clientWidth) : -1;
         return rect.bottom >= 0 && rect.right >= 0 && rect.top < viewPortHeight && rect.left < viewPortWidth;
       });
       this.state = {
@@ -93,10 +87,10 @@ function withLazyLoading(WrappedComponent, documentRef) {
       };
     }
     componentDidMount() {
-      documentRef.addEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
-      documentRef.addEventListener('resize', this.checkInView);
-      documentRef.addEventListener('orientationchange', this.checkInView);
-      documentRef.addEventListener('fullscreenchange', this.checkInView);
+      documentRef?.addEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
+      documentRef?.addEventListener('resize', this.checkInView);
+      documentRef?.addEventListener('orientationchange', this.checkInView);
+      documentRef?.addEventListener('fullscreenchange', this.checkInView);
       // call checkInView immediately incase the
       // component is already in view prior to scrolling
       this.checkInView();
@@ -132,14 +126,10 @@ function withLazyLoading(WrappedComponent, documentRef) {
       });
     }
   }
-  _defineProperty(WithLazyLoading, "propTypes", {
-    style: _propTypes.default.object,
-    // eslint-disable-line react/forbid-prop-types
-    className: _propTypes.default.string
-  });
+  _defineProperty(WithLazyLoading, "displayName", void 0);
   _defineProperty(WithLazyLoading, "defaultProps", {
-    style: null,
-    className: null
+    style: {},
+    className: ''
   });
   WithLazyLoading.displayName = (0, _bpkReactUtils.wrapDisplayName)(WrappedComponent, 'withLazyLoading');
   return WithLazyLoading;

package/bpk-component-image/src/withLoadingBehavior.d.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 type { ComponentType } from 'react';
+type InjectedProps = {
+    onLoad: () => void;
+    loading: boolean;
+};
+type State = {
+    loading: boolean;
+};
+export default function withLoadingBehavior<P extends object>(WrappedComponent: ComponentType<P>): {
+    new (props: Omit<P, keyof InjectedProps>): {
+        onLoad: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "loading">(state: State | ((prevState: Readonly<State>, props: Readonly<Omit<P, keyof InjectedProps>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<P, keyof InjectedProps>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<State>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType?: import("react").Context<any> | undefined;
+};
+export {};

package/bpk-component-image/src/withLoadingBehavior.js

@@ -30,8 +30,8 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            */
 function withLoadingBehavior(WrappedComponent) {
   class WithLoadingBehavior extends _react.Component {
-    constructor() {
-      super();
+    constructor(props) {
+      super(props);
       _defineProperty(this, "onLoad", () => {
         this.setState(() => ({
           loading: false
@@ -48,6 +48,7 @@ function withLoadingBehavior(WrappedComponent) {
       }, this.props));
     }
   }
+  _defineProperty(WithLoadingBehavior, "displayName", void 0);
   WithLoadingBehavior.displayName = (0, _bpkReactUtils.wrapDisplayName)(WrappedComponent, 'withLoadingBehavior');
   return WithLoadingBehavior;
 }

package/bpk-component-modal/src/BpkModal.js

@@ -9,7 +9,7 @@ var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkModalModule = _interopRequireDefault(require("./BpkModal.module.css"));
 var _BpkModalInner = _interopRequireDefault(require("./BpkModalInner"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView", "renderTarget", "isIphone", "closeOnScrimClick", "closeOnEscPressed", "dialogRef", "isOpen"];
+const _excluded = ["accessoryView", "className", "closeLabel", "closeOnEscPressed", "closeOnScrimClick", "closeText", "contentClassName", "dialogRef", "fullScreen", "fullScreenOnMobile", "isIphone", "isOpen", "onClose", "padded", "renderTarget", "showHeader", "title", "wide"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -39,24 +39,24 @@ const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalModule.default);
 const ScrimBpkModalInner = (0, _bpkScrimUtils.withScrim)(_BpkModalInner.default);
 const BpkModal = _ref => {
   let {
-      title = null,
-      onClose = () => null,
+      accessoryView = null,
       className = null,
-      contentClassName = null,
       closeLabel = '',
+      closeOnEscPressed = true,
+      closeOnScrimClick = true,
       closeText = null,
-      wide = false,
-      showHeader = true,
-      fullScreenOnMobile = true,
+      contentClassName = null,
+      dialogRef = () => null,
       fullScreen = false,
+      fullScreenOnMobile = true,
+      isIphone = (0, _bpkReactUtils.isDeviceIphone)(),
+      isOpen,
+      onClose = () => null,
       padded = true,
-      accessoryView = null,
       renderTarget = null,
-      isIphone = (0, _bpkReactUtils.isDeviceIphone)(),
-      closeOnScrimClick = true,
-      closeOnEscPressed = true,
-      dialogRef = () => null,
-      isOpen
+      showHeader = true,
+      title = null,
+      wide = false
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const containerClass = [getClassName('bpk-modal__container')];

package/bpk-component-modal/src/BpkModalInner.js

@@ -37,22 +37,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalInnerModule.default);
 const BpkModalInner = ({
-  isIphone,
-  id,
-  dialogRef,
+  accessoryView = null,
   children,
-  title = null,
-  onClose = () => null,
   className = null,
-  contentClassName = null,
   closeLabel = '',
   closeText = null,
-  wide = false,
-  showHeader = true,
-  fullScreenOnMobile = true,
+  contentClassName = null,
+  dialogRef,
   fullScreen = false,
+  fullScreenOnMobile = true,
+  id,
+  isIphone,
+  onClose = () => null,
   padded = true,
-  accessoryView = null
+  showHeader = true,
+  title = null,
+  wide = false
 }) => {
   const classNames = [getClassName('bpk-modal')];
   const contentClassNames = [getClassName('bpk-modal__content')];

package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#fff;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{padding:0;border:none;border-radius:.75rem;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}

package/bpk-component-modal/src/BpkModalV2/BpkModal.js

@@ -99,16 +99,21 @@ const BpkModalV2 = props => {
     if (isOpen) {
       ref.current?.showModal?.();
       const dialog = document.getElementById(`${id}`);
-      if (dialog) {
-        dialog.addEventListener('click', event => {
-          const {
-            target
-          } = event;
-          if (target instanceof HTMLElement && target.id === `${id}`) {
-            ref.current?.close?.();
-          }
-        });
-      }
+      const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
+      const handleBackdropClick = modal => {
+        if (modal) {
+          modal.addEventListener('click', event => {
+            const {
+              target
+            } = event;
+            if (target === modal) {
+              modal === dialog ? ref.current?.close?.() : onClose();
+            }
+          });
+        }
+      };
+      handleBackdropClick(dialog);
+      handleBackdropClick(dialogWithPolyfill);
     } else {
       ref.current?.close?.();
     }
@@ -118,7 +123,7 @@ const BpkModalV2 = props => {
     return () => setPageProperties({
       isDialogOpen: false
     });
-  }, [id, isOpen]);
+  }, [id, isOpen, onClose]);
   const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
   const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
   return isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/bpk-component-radio/src/BpkRadio.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.125rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.125rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.5rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.5rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto}

package/bpk-component-scrollable-calendar/index.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
+import BpkScrollableCalendar from './src/BpkScrollableCalendar';
+import BpkScrollableCalendarDate from './src/BpkScrollableCalendarDate';
+import BpkScrollableCalendarGrid from './src/BpkScrollableCalendarGrid';
+import BpkScrollableCalendarGridList from './src/BpkScrollableCalendarGridList';
+export default BpkScrollableCalendar;
+export { CALENDAR_SELECTION_TYPE, BpkScrollableCalendarDate, BpkScrollableCalendarGrid, BpkScrollableCalendarGridList, };