@skyscanner/backpack-web 34.11.0 → 34.13.0

package/bpk-component-datepicker/src/BpkDatepicker.d.ts

@@ -40,7 +40,7 @@ type Props = {
     onOpenChange?: (arg0: boolean) => void | null;
     selectionConfiguration?: SelectionConfiguration;
     initiallyFocusedDate?: Date;
-    renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    renderTarget?: (() => HTMLElement | null) | HTMLElement | null;
     isOpen?: boolean;
     valid?: boolean;
     onClose?: () => void;

package/bpk-component-dialog/src/BpkDialog.js

@@ -16,13 +16,16 @@
  * limitations under the License.
  */
 
+import { useEffect } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { cssModules, Portal } from "../../bpk-react-utils";
+import { cssModules } from "../../bpk-react-utils";
 import BpkDialogInner from "./BpkDialogInner";
 import { HEADER_ICON_TYPES } from "./common-types";
 import STYLES from "./BpkDialog.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialog = ({
   children,
@@ -41,27 +44,39 @@ const BpkDialog = ({
     // eslint-disable-next-line no-console
     console.warn('BpkDialog: dismissible is true but no onClose prop was provided. Dialog will not be dismissible.');
   }
-  return /*#__PURE__*/_jsx(Portal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    renderTarget: renderTarget,
-    closeOnEscPressed: dismissible,
-    children: /*#__PURE__*/_jsxs(BpkDialogInner, {
-      onClose: onClose,
-      closeOnScrimClick: dismissible,
-      containerClassName: getClassName('bpk-dialog__container'),
-      contentClassName: headerIcon ? getClassName('bpk-dialog--with-icon') : undefined,
-      ...rest,
-      children: [headerIcon && /*#__PURE__*/_jsx("div", {
-        className: headerIconClassNames,
-        children: headerIcon
-      }), dismissible && /*#__PURE__*/_jsx("span", {
-        className: closeButtonClassNames,
-        children: /*#__PURE__*/_jsx(BpkCloseButton, {
-          label: closeLabel,
-          onClick: onClose
-        })
-      }), children]
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape' && dismissible && onClose) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onClose, dismissible]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: isOpen && /*#__PURE__*/_jsx(FloatingPortal, {
+      root: renderTarget(),
+      children: /*#__PURE__*/_jsxs(BpkDialogInner, {
+        onClose: onClose,
+        closeOnScrimClick: dismissible,
+        containerClassName: getClassName('bpk-dialog__container'),
+        contentClassName: headerIcon ? getClassName('bpk-dialog--with-icon') : undefined,
+        ...rest,
+        children: [headerIcon && /*#__PURE__*/_jsx("div", {
+          className: headerIconClassNames,
+          children: headerIcon
+        }), dismissible && /*#__PURE__*/_jsx("span", {
+          className: closeButtonClassNames,
+          children: /*#__PURE__*/_jsx(BpkCloseButton, {
+            label: closeLabel,
+            onClick: onClose
+          })
+        }), children]
+      })
     })
   });
 };

package/bpk-component-drawer/src/BpkDrawer.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { Component } from 'react';
+export type Props = {
+    id: string;
+    children: ReactNode | string;
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    /**
+     * **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
+     * the root element for your application is by returning it's DOM node via the function passed to the
+     * `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+     */
+    getApplicationElement: () => HTMLElement | null;
+    renderTarget?: () => HTMLElement | HTMLElement | null;
+    dialogRef?: (ref: HTMLElement | null | undefined) => void;
+    className?: string | null;
+    contentClassName?: string | null;
+    closeLabel?: string | null;
+    closeText?: string | null;
+    hideTitle?: boolean;
+    [rest: string]: any;
+};
+type State = {
+    isDrawerShown: boolean;
+};
+declare class BpkDrawer extends Component<Props, State> {
+    static defaultProps: {
+        renderTarget: () => null;
+        className: null;
+        contentClassName: null;
+        closeLabel: null;
+        closeText: null;
+        hideTitle: boolean;
+    };
+    constructor(props: Props);
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    onCloseAnimationComplete: () => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    hide: () => void;
+    render(): JSX.Element;
+}
+export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawer.js

@@ -14,16 +14,25 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { Component } from 'react';
-import { Portal } from "../../bpk-react-utils";
+import { FloatingPortal } from '@floating-ui/react';
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
 class BpkDrawer extends Component {
-  constructor() {
-    super();
+  static defaultProps = {
+    renderTarget: () => null,
+    className: null,
+    contentClassName: null,
+    closeLabel: null,
+    closeText: null,
+    hideTitle: false
+  };
+  constructor(props) {
+    super(props);
     this.state = {
       isDrawerShown: true
     };
@@ -33,11 +42,19 @@ class BpkDrawer extends Component {
       this.setState({
         isDrawerShown: true
       });
+      window.addEventListener('keydown', this.handleKeyDown);
+    } else {
+      window.removeEventListener('keydown', this.handleKeyDown);
     }
   }
   onCloseAnimationComplete = () => {
     this.props.onClose();
   };
+  handleKeyDown = event => {
+    if (event.key === 'Escape' && this.props.onClose) {
+      this.props.onClose();
+    }
+  };
   hide = () => {
     this.setState({
       isDrawerShown: false
@@ -53,45 +70,18 @@ class BpkDrawer extends Component {
     const {
       isDrawerShown
     } = this.state;
-    return /*#__PURE__*/_jsx(Portal, {
-      isOpen: isOpen,
-      onClose: this.hide,
-      renderTarget: renderTarget,
-      children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
-        isDrawerShown: isDrawerShown,
-        onClose: this.hide,
-        onCloseAnimationComplete: this.onCloseAnimationComplete,
-        ...rest
+    const renTarget = typeof renderTarget === 'function' ? renderTarget() : renderTarget;
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: isOpen && /*#__PURE__*/_jsx(FloatingPortal, {
+        root: renTarget,
+        children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
+          isDrawerShown: isDrawerShown,
+          onClose: this.hide,
+          onCloseAnimationComplete: this.onCloseAnimationComplete,
+          ...rest
+        })
       })
     });
   }
 }
-BpkDrawer.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  /**
-   * **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
-   * the root element for your application is by returning it's DOM node via the function passed to the
-   * `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-   */
-  getApplicationElement: PropTypes.func.isRequired,
-  renderTarget: PropTypes.func,
-  dialogRef: PropTypes.func,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  hideTitle: PropTypes.bool
-};
-BpkDrawer.defaultProps = {
-  renderTarget: null,
-  className: null,
-  contentClassName: null,
-  closeLabel: null,
-  closeText: null,
-  hideTitle: false
-};
 export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    dialogRef: () => void;
+    onCloseAnimationComplete: () => void;
+    onClose: () => void;
+    id: string;
+    title: string;
+    className?: string | null;
+    contentClassName?: string | null;
+    closeLabel?: string | null;
+    closeText?: string | null;
+    isDrawerShown?: boolean;
+    hideTitle?: boolean;
+    closeOnScrimClick?: boolean;
+    isIphone?: boolean;
+    isIpad?: boolean;
+    [rest: string]: any;
+};
+declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, onClose, onCloseAnimationComplete, title, ...rest }: Props) => JSX.Element;
+export default BpkDrawerContent;

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -14,37 +14,41 @@
  * 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 PropTypes from 'prop-types';
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDrawerContent.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkDrawerContent = props => {
-  const {
-    children,
-    className,
-    closeLabel,
-    closeOnScrimClick,
-    // Unused from withScrim scrim HOC
-    closeText,
-    contentClassName,
-    dialogRef,
-    hideTitle,
-    id,
-    isDrawerShown,
-    isIpad,
-    // Unused from withScrim scrim HOC
-    isIphone,
-    // Unused from withScrim scrim HOC
-    onClose,
-    onCloseAnimationComplete,
-    title,
-    ...rest
-  } = props;
+const BpkDrawerContent = ({
+  children,
+  className = null,
+  closeLabel = null,
+  closeOnScrimClick = true,
+  // Unused from withScrim scrim HOC
+  closeText = null,
+  contentClassName = null,
+  dialogRef,
+  hideTitle = false,
+  id,
+  isDrawerShown = true,
+  isIpad = false,
+  // Unused from withScrim scrim HOC
+  isIphone = false,
+  // Unused from withScrim scrim HOC
+  onClose,
+  onCloseAnimationComplete,
+  title,
+  ...rest
+}) => {
   const drawerClassNames = [getClassName('bpk-drawer')];
   const headerClassNames = [getClassName('bpk-drawer__heading')];
   const contentClassNames = [getClassName('bpk-drawer__content')];
@@ -68,12 +72,9 @@ const BpkDrawerContent = props => {
     exit: true,
     in: isDrawerShown,
     onExited: onCloseAnimationComplete,
-    children: status =>
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsxs("section", {
+    children: status => /*#__PURE__*/_jsxs("section", {
       id: id,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "dialog",
       "aria-labelledby": headingId,
       className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`)].join(' '),
@@ -102,32 +103,4 @@ const BpkDrawerContent = props => {
     }, "dialog")
   });
 };
-BpkDrawerContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  dialogRef: PropTypes.func.isRequired,
-  onCloseAnimationComplete: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  isDrawerShown: PropTypes.bool,
-  hideTitle: PropTypes.bool,
-  closeOnScrimClick: PropTypes.bool,
-  isIphone: PropTypes.bool,
-  isIpad: PropTypes.bool
-};
-BpkDrawerContent.defaultProps = {
-  className: null,
-  contentClassName: null,
-  closeLabel: null,
-  closeText: null,
-  isDrawerShown: true,
-  hideTitle: false,
-  closeOnScrimClick: true,
-  isIphone: false,
-  isIpad: false
-};
 export default BpkDrawerContent;

package/bpk-component-drawer/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

package/bpk-component-drawer/src/themeAttributes.js

@@ -14,5 +14,8 @@
  * 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 { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

package/bpk-component-inset-banner/index.d.ts

@@ -0,0 +1,4 @@
+import BpkInsetBanner, { type Props as BpkInsetBannerProps, VARIANT } from './src/BpkInsetBanner';
+export type { BpkInsetBannerProps };
+export { VARIANT };
+export default BpkInsetBanner;

package/bpk-component-inset-banner/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 BpkInsetBanner, { VARIANT } from "./src/BpkInsetBanner";
+export { VARIANT };
+export default BpkInsetBanner;

package/bpk-component-inset-banner/src/BpkInsetBanner.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const VARIANT: {
+    onLight: string;
+    onDark: string;
+};
+export type Props = {
+    accessibilityLabel?: string;
+    backgroundColor?: string;
+    body?: {
+        text: string;
+        link?: string;
+        linkText?: string;
+    };
+    callToAction?: {
+        text?: string;
+    };
+    logo?: string;
+    subheadline?: string;
+    title?: string;
+    variant?: (typeof VARIANT)[keyof typeof VARIANT];
+};
+declare const BpkInsetBanner: ({ accessibilityLabel, backgroundColor, body, callToAction, logo, subheadline, title, variant, }: Props) => JSX.Element;
+export default BpkInsetBanner;

package/bpk-component-inset-banner/src/BpkInsetBanner.js

@@ -0,0 +1,86 @@
+/*
+ * 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 { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkInsetBanner.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const VARIANT = {
+  onLight: 'on-light',
+  onDark: 'on-dark'
+};
+const BpkInsetBanner = ({
+  accessibilityLabel,
+  backgroundColor = surfaceHighlightDay,
+  body,
+  callToAction,
+  logo,
+  subheadline,
+  title,
+  variant = VARIANT.onLight
+}) => {
+  const classNames = getClassName('bpk-inset-banner', `bpk-inset-banner--${variant}`, body && 'bpk-inset-banner--with-body');
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
+      "aria-label": accessibilityLabel,
+      className: classNames,
+      style: {
+        backgroundColor
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: getClassName('bpk-inset-banner--content-container'),
+        children: [logo && /*#__PURE__*/_jsx("img", {
+          className: getClassName('bpk-inset-banner--image'),
+          src: logo,
+          alt: "",
+          "aria-hidden": true
+        }), /*#__PURE__*/_jsxs("div", {
+          className: getClassName('bpk-inset-banner--text-container'),
+          children: [/*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.label2,
+            children: title
+          }), /*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.caption,
+            children: subheadline
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-inset-banner--cta-container'),
+        children: callToAction?.text && /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.caption,
+          children: callToAction.text
+        })
+      })]
+    }), body && /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-inset-banner-body-container'),
+      children: [/*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.caption,
+        children: body.text
+      }), body.link && body.linkText && /*#__PURE__*/_jsx("a", {
+        href: body.link,
+        className: getClassName('bpk-inset-banner-body-container--link-text'),
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.caption,
+          children: body.linkText
+        })
+      })]
+    })]
+  });
+};
+export default BpkInsetBanner;

package/bpk-component-inset-banner/src/BpkInsetBanner.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-inset-banner{display:flex;padding:.5rem 1rem;justify-content:space-between;border-radius:.5rem}.bpk-inset-banner--with-body{border-radius:.5rem .5rem 0 0}.bpk-inset-banner--on-light{color:#161616;fill:#161616}.bpk-inset-banner--on-dark{color:#fff;fill:#fff}.bpk-inset-banner--content-container{display:flex;align-items:center}.bpk-inset-banner--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}@media(max-width: 32rem){.bpk-inset-banner--image{max-height:1.5rem}}.bpk-inset-banner--text-container{display:flex;flex-direction:column}.bpk-inset-banner--cta-container{display:flex;align-items:center}.bpk-inset-banner-body-container{display:flex;padding:1rem;flex-direction:column;border-radius:0 0 .5rem .5rem;background-color:#eff3f8;color:#161616}.bpk-inset-banner-body-container--link-text{color:#0062e3;text-decoration:none}.bpk-no-touch-support .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}:global(.bpk-no-touch-support) .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}

package/bpk-component-journey-arrow/src/BpkJourneyArrow.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-journey-arrow{display:flex;width:100%;min-width:2.5rem;height:.5rem;margin:0 .5rem;justify-content:center;border-width:0 .3125rem 0 .125rem;border-style:solid;border-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" fill="none" viewBox="0 0 16 8"><path fill="%23C1C7CF" d="M15.69 4.35a.5.5 0 0 0 0-.7L12.51.46a.5.5 0 1 0-.7.71L14.62 4 11.8 6.83a.5.5 0 0 0 .7.7l3.2-3.17m-.7.14v-1H.5a.5.5 0 0 0 0 1Z"/></svg>') 0 5 0 2 fill/1/0 stretch}html[dir=rtl] .bpk-journey-arrow{transform:scaleX(-1)}.bpk-journey-arrow__stop{width:.5rem;height:.5rem;border:.125rem solid #fff;border-radius:.25rem;background-color:#e70866}
+.bpk-journey-arrow{display:flex;width:100%;height:.5rem;margin:0 .5rem;justify-content:center;border-width:0 .3125rem 0 .125rem;border-style:solid;border-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" fill="none" viewBox="0 0 16 8"><path fill="%23C1C7CF" d="M15.69 4.35a.5.5 0 0 0 0-.7L12.51.46a.5.5 0 1 0-.7.71L14.62 4 11.8 6.83a.5.5 0 0 0 .7.7l3.2-3.17m-.7.14v-1H.5a.5.5 0 0 0 0 1Z"/></svg>') 0 5 0 2 fill/1/0 stretch}html[dir=rtl] .bpk-journey-arrow{transform:scaleX(-1)}.bpk-journey-arrow__stop{width:.5rem;height:.5rem;border:.125rem solid #fff;border-radius:.25rem;background-color:#e70866}

package/bpk-component-modal/src/BpkModal.d.ts

@@ -7,7 +7,7 @@ export type Props = Partial<ModalDialogProps> & {
     isOpen: boolean;
     closeOnScrimClick?: boolean;
     closeOnEscPressed?: boolean;
-    renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    renderTarget?: (() => HTMLElement | null) | HTMLElement | null;
     modalStyle?: ModalStyle;
     onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';

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

@@ -16,11 +16,13 @@
  * limitations under the License.
  */
 
-import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
+import { useEffect } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { cssModules, isDeviceIphone } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkModalInner, { MODAL_STYLING } from "./BpkModalInner";
 import STYLES from "./BpkModal.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkModalInner = withScrim(BpkModalInner);
 const BpkModal = ({
@@ -39,42 +41,55 @@ const BpkModal = ({
   modalStyle = MODAL_STYLING.default,
   onClose = () => null,
   padded = true,
-  renderTarget = null,
+  renderTarget = () => null,
   showHeader = true,
   title = null,
   wide = false,
   ...rest
 }) => {
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape' && onClose) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onClose]);
   const containerClass = [getClassName('bpk-modal__container')];
   if (fullScreen || isIphone) {
     containerClass.push(getClassName('bpk-modal__container--full-screen'));
   } else if (fullScreenOnMobile) {
     containerClass.push(getClassName('bpk-modal__container--full-screen-mobile'));
   }
-  return /*#__PURE__*/_jsx(Portal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    renderTarget: renderTarget,
-    closeOnEscPressed: closeOnEscPressed,
-    children: /*#__PURE__*/_jsx(ScrimBpkModalInner, {
-      onClose: onClose,
-      fullScreenOnMobile: fullScreenOnMobile,
-      fullScreen: fullScreen,
-      closeOnScrimClick: closeOnScrimClick,
-      containerClassName: containerClass.join(' '),
-      isIphone: isIphone,
-      title: title,
-      className: className,
-      contentClassName: contentClassName,
-      closeLabel: closeLabel,
-      closeText: closeText,
-      wide: wide,
-      showHeader: showHeader,
-      padded: padded,
-      accessoryView: accessoryView,
-      dialogRef: dialogRef,
-      modalStyle: modalStyle,
-      ...rest
+  const renTarget = typeof renderTarget === 'function' ? renderTarget() : renderTarget;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: isOpen && /*#__PURE__*/_jsx(FloatingPortal, {
+      root: renTarget,
+      children: /*#__PURE__*/_jsx(ScrimBpkModalInner, {
+        onClose: onClose,
+        fullScreenOnMobile: fullScreenOnMobile,
+        fullScreen: fullScreen,
+        closeOnScrimClick: closeOnScrimClick,
+        containerClassName: containerClass.join(' '),
+        isIphone: isIphone,
+        title: title,
+        className: className,
+        contentClassName: contentClassName,
+        closeLabel: closeLabel,
+        closeText: closeText,
+        wide: wide,
+        showHeader: showHeader,
+        padded: padded,
+        accessoryView: accessoryView,
+        dialogRef: dialogRef,
+        modalStyle: modalStyle,
+        ...rest
+      })
     })
   });
 };

package/bpk-component-segmented-control/src/BpkSegmentedControl.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:rgba(255,255,255,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-left:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-left:.0625rem solid rgba(255,255,255,.5)}.bpk-segmented-control[class*=rightOfOption]{border-left:none}
+.bpk-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:rgba(255,255,255,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid rgba(255,255,255,.5)}.bpk-segmented-control[class*=rightOfOption]{border-inline-start:none}.bpk-segmented-control:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.bpk-segmented-control:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.bpk-segmented-control:focus{border:.125rem solid #0062e3;outline:none}

package/bpk-react-utils/src/Portal.d.ts

@@ -20,6 +20,10 @@ type Props = {
 type State = {
     isVisible: boolean;
 };
+/**
+ * @deprecated the portal is deprecated and will be removed in a future release. Please read [](https://github.com/Skyscanner/backpack/blob/main/packages/bpk-react-utils/docs/portal-migration.md) for further information
+ * @returns{Component} used to render children into a new component tree. For use with Modals, popovers, tooltips.
+*/
 declare class Portal extends Component<Props, State> {
     portalElement: null | HTMLDivElement;
     shouldClose: boolean;

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

@@ -25,6 +25,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const KEYCODES = {
   ESCAPE: 'Escape'
 };
+/**
+ * @deprecated the portal is deprecated and will be removed in a future release. Please read [](https://github.com/Skyscanner/backpack/blob/main/packages/bpk-react-utils/docs/portal-migration.md) for further information
+ * @returns{Component} used to render children into a new component tree. For use with Modals, popovers, tooltips.
+*/
 class Portal extends Component {
   static defaultProps = {
     beforeClose: null,

package/package.json

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