@skyscanner/backpack-web 34.13.1 → 34.15.0

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -31,6 +31,7 @@ const BpkAccordionItem = props => {
     divider,
     onDark
   } = useContext(BpkAccordionContext);
+  const itemClassNames = [getClassName('bpk-accordion__item')];
   const iconClassNames = [getClassName('bpk-accordion__item-expand-icon')];
   const titleTextClassNames = [getClassName('bpk-accordion__title-text')];
   const titleClassNames = [getClassName('bpk-accordion__title')];
@@ -52,6 +53,9 @@ const BpkAccordionItem = props => {
   // it, but the benefit of a better container api versus this was worth it
   // $FlowFixMe[prop-missing] - see above
   delete rest.initiallyExpanded;
+  if (onDark) {
+    itemClassNames.push(getClassName('bpk-accordion__item--on-dark'));
+  }
   if (expanded && !onDark) {
     iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--flipped'));
     if (divider) {
@@ -85,6 +89,7 @@ const BpkAccordionItem = props => {
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
     _jsxs("div", {
       id: id,
+      className: getClassName('bpk-accordion__item'),
       ...rest,
       children: [/*#__PURE__*/_jsx("div", {
         className: titleClassNames.join(' '),
@@ -115,7 +120,10 @@ const BpkAccordionItem = props => {
         children: /*#__PURE__*/_jsx(AnimateHeight, {
           duration: 200,
           height: expanded ? 'auto' : 0,
-          children: children
+          children: /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-accordion__content-inner-container'),
+            children: children
+          })
         })
       })]
     })

package/bpk-component-accordion/src/BpkAccordionItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-accordion__title{height:auto}.bpk-accordion__title--collapsed{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__title--collapsed-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-container--expanded{padding-bottom:1rem;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__content-container--expanded-on-dark{padding-bottom:1rem;box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}
+.bpk-accordion__item{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container{padding-bottom:1rem}

package/bpk-component-carousel/src/utils.js

@@ -18,25 +18,15 @@
 
 import { useEffect, useMemo, useRef } from 'react';
 export function useScrollToInitialImage(initialImageIndex, imagesRef) {
-  const handleIntersecting = index => {
-    const element = imagesRef.current[index];
+  useEffect(() => {
+    const element = imagesRef.current[initialImageIndex];
     if (element) {
       element.scrollIntoView({
         block: 'nearest',
         inline: 'start'
       });
     }
-  };
-  const observe = useIntersectionObserver(handleIntersecting, {
-    root: null,
-    threshold: 0.1
-  });
-  useEffect(() => {
-    const element = imagesRef.current[initialImageIndex];
-    if (element) {
-      observe(element);
-    }
-  }, [initialImageIndex, imagesRef, observe]);
+  }, [initialImageIndex, imagesRef]);
 }
 export function useIntersectionObserver(onIntersecting, {
   root,

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

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

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

@@ -16,16 +16,13 @@
  * 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 } from "../../bpk-react-utils";
+import { cssModules, Portal } 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialog = ({
   children,
@@ -44,39 +41,27 @@ 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.');
   }
-  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]
-      })
+  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]
     })
   });
 };

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

@@ -14,25 +14,16 @@
  * 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 { FloatingPortal } from '@floating-ui/react';
+import { Portal } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
 class BpkDrawer extends Component {
-  static defaultProps = {
-    renderTarget: () => null,
-    className: null,
-    contentClassName: null,
-    closeLabel: null,
-    closeText: null,
-    hideTitle: false
-  };
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       isDrawerShown: true
     };
@@ -42,19 +33,11 @@ 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
@@ -70,18 +53,45 @@ class BpkDrawer extends Component {
     const {
       isDrawerShown
     } = this.state;
-    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
-        })
+    return /*#__PURE__*/_jsx(Portal, {
+      isOpen: isOpen,
+      onClose: this.hide,
+      renderTarget: renderTarget,
+      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.js

@@ -14,41 +14,37 @@
  * 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`.
+ */import PropTypes from 'prop-types';
 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 = ({
-  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 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 drawerClassNames = [getClassName('bpk-drawer')];
   const headerClassNames = [getClassName('bpk-drawer__heading')];
   const contentClassNames = [getClassName('bpk-drawer__content')];
@@ -72,9 +68,12 @@ const BpkDrawerContent = ({
     exit: true,
     in: isDrawerShown,
     onExited: onCloseAnimationComplete,
-    children: status => /*#__PURE__*/_jsxs("section", {
+    children: status =>
+    /*#__PURE__*/
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+    _jsxs("section", {
       id: id,
-      tabIndex: -1,
+      tabIndex: "-1",
       role: "dialog",
       "aria-labelledby": headingId,
       className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`)].join(' '),
@@ -103,4 +102,32 @@ const BpkDrawerContent = ({
     }, "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.js

@@ -14,8 +14,5 @@
  * 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`.
-import { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}
+.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}

package/bpk-component-image/src/BpkImage.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-image{opacity:1;position:relative;display:block;max-width:100%;transition:background-color 400ms ease-in-out;background-color:#e0e4e9;overflow:hidden;transition-delay:400ms}.bpk-image__img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;transition:opacity 400ms ease-in-out}.bpk-image__img--hidden{opacity:0}.bpk-image__spinner{position:absolute;top:50%;left:50%;display:block;align-items:center;transform:translate(-50%, -50%)}.bpk-image__spinner--hidden{transition:opacity 400ms ease-in-out;opacity:0}.bpk-image__spinner--shown{transition:opacity 400ms ease-in-out;opacity:1}.bpk-image--no-background{background-color:rgba(0,0,0,0)}.bpk-image--border-radius-sm{border-radius:.5rem}
+.bpk-image{opacity:1;position:relative;display:block;max-width:100%;transition:background-color 400ms ease-in-out;background-color:#e0e4e9;overflow:hidden;transition-delay:400ms}.bpk-image__img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;transition:opacity 400ms ease-in-out}.bpk-image__img--hidden{opacity:0}.bpk-image__spinner{position:absolute;top:50%;left:50%;display:block;align-items:center;transform:translate(-50%, -50%)}.bpk-image__spinner--hidden{transition:opacity 400ms ease-in-out;opacity:0}.bpk-image__spinner--shown{transition:opacity 400ms ease-in-out;opacity:1}.bpk-image--no-background{background-color:rgba(0,0,0,0)}.bpk-image--border-radius-sm{border-radius:.75rem}

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -94,29 +94,25 @@ class BpkMobileScrollContainer extends Component {
     this.setScrollIndicatorClassName();
   }, 100);
   setScrollIndicatorClassName = () => {
-    requestAnimationFrame(() => {
-      const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
-      if (!classNames) {
-        return;
-      }
-      this.setState(() => ({
-        scrollIndicatorClassName: classNames.join(' ')
-      }));
-    });
+    const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
+    if (!classNames) {
+      return;
+    }
+    this.setState(() => ({
+      scrollIndicatorClassName: classNames.join(' ')
+    }));
   };
   setScrollBarAwareHeight = () => {
     if (this.props.showScrollbar) {
       return;
     }
-    requestAnimationFrame(() => {
-      const computedHeight = computeScrollBarAwareHeight(this.scrollerEl, this.innerEl);
-      if (!computedHeight) {
-        return;
-      }
-      this.setState(() => ({
-        computedHeight
-      }));
-    });
+    const computedHeight = computeScrollBarAwareHeight(this.scrollerEl, this.innerEl);
+    if (!computedHeight) {
+      return;
+    }
+    this.setState(() => ({
+      computedHeight
+    }));
   };
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];

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

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

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

@@ -16,13 +16,11 @@
  * limitations under the License.
  */
 
-import { useEffect } from 'react';
-import { FloatingPortal } from '@floating-ui/react';
-import { cssModules, isDeviceIphone } from "../../bpk-react-utils";
+import { Portal, 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkModalInner = withScrim(BpkModalInner);
 const BpkModal = ({
@@ -41,55 +39,42 @@ 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'));
   }
-  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
-      })
+  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
     })
   });
 };

package/bpk-component-nudger/src/BpkConfigurableNudger.d.ts

@@ -23,5 +23,5 @@ type Props = CommonProps & {
      */
     compareValues: (arg0: any, arg1: any) => number;
 };
-declare const BpkConfigurableNudger: ({ buttonType, className, compareValues, decreaseButtonLabel, decrementValue, formatValue, id, increaseButtonLabel, incrementValue, inputClassName, max, min, onChange, value, ...rest }: Props) => JSX.Element;
+declare const BpkConfigurableNudger: ({ buttonType, className, compareValues, decreaseButtonLabel, decrementValue, formatValue, id, increaseButtonLabel, incrementValue, inputClassName, max, min, name, onChange, value, ...rest }: Props) => JSX.Element;
 export default BpkConfigurableNudger;

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { useRef } from 'react';
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -39,6 +40,7 @@ const BpkConfigurableNudger = ({
   inputClassName = null,
   max,
   min,
+  name,
   onChange,
   value,
   ...rest
@@ -47,12 +49,19 @@ const BpkConfigurableNudger = ({
   const maxButtonDisabled = compareValues(value, max) >= 0;
   const minButtonDisabled = compareValues(value, min) <= 0;
   const inputStyles = getClassName('bpk-nudger__input', inputClassName && inputClassName, buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark');
+  const inputRef = useRef(null);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
     children: [/*#__PURE__*/_jsx(BpkButtonV2, {
       type: BUTTON_TYPES[buttonType],
       iconOnly: true,
-      onClick: () => onChange(decrementValue(value)),
+      onClick: () => {
+        const newValue = decrementValue(value);
+        onChange(newValue);
+        // We want to maintain native input events across our form components. Along with react updating
+        // the value attribute we can set it via native handlers and emit a "change" event.
+        inputRef.current && setNativeValue(inputRef.current, `${newValue}`);
+      },
       disabled: minButtonDisabled,
       title: decreaseButtonLabel,
       "aria-controls": id,
@@ -60,15 +69,23 @@ const BpkConfigurableNudger = ({
     }), /*#__PURE__*/_jsx("input", {
       type: "text",
       "aria-live": "polite",
-      readOnly: true,
-      value: formatValue(value),
+      defaultValue: formatValue(value),
       id: id,
+      ref: inputRef,
+      name: name || id,
+      onChange: event => onChange(parseInt(event?.target.value, 10)),
       className: inputStyles,
       ...rest
     }), /*#__PURE__*/_jsx(BpkButtonV2, {
       type: BUTTON_TYPES[buttonType],
       iconOnly: true,
-      onClick: () => onChange(incrementValue(value)),
+      onClick: () => {
+        const newValue = incrementValue(value);
+        onChange(newValue);
+        // We want to maintain native input events across our form components. Along with react updating
+        // the value attribute we can set it via native handlers and emit a "change" event.
+        inputRef.current && setNativeValue(inputRef.current, `${newValue}`);
+      },
       disabled: maxButtonDisabled,
       title: increaseButtonLabel,
       "aria-controls": id,

package/bpk-component-nudger/src/common-types.d.ts

@@ -9,6 +9,7 @@ export type CommonProps = {
     max: string | number;
     value: string | number;
     onChange: (arg0: any) => void | null;
+    name?: string | null;
     className?: string | null;
     /**
      * This is the label that will be read out when screen reader users tab to the increase button. Make sure you use a descriptive label.

package/bpk-react-utils/index.d.ts

@@ -6,9 +6,10 @@ import cssModules from './src/cssModules';
 import deprecated from './src/deprecated';
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection';
 import isRTL from './src/isRTL';
+import { setNativeValue } from './src/nativeEventHandler';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -38,5 +39,6 @@ declare const _default: {
     isDeviceIos: () => boolean;
     isRTL: () => boolean;
     BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: import("./src/BpkDialogWrapper/BpkDialogWrapper").Props) => JSX.Element | null;
+    setNativeValue: typeof setNativeValue;
 };
 export default _default;

package/bpk-react-utils/index.js

@@ -24,9 +24,10 @@ import cssModules from "./src/cssModules";
 import deprecated from "./src/deprecated";
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
 import isRTL from "./src/isRTL";
+import { setNativeValue } from "./src/nativeEventHandler";
 import withDefaultProps from "./src/withDefaultProps";
 import wrapDisplayName from "./src/wrapDisplayName";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue };
 export default {
   Portal,
   TransitionInitialMount,
@@ -38,5 +39,6 @@ export default {
   isDeviceIpad,
   isDeviceIos,
   isRTL,
-  BpkDialogWrapper
+  BpkDialogWrapper,
+  setNativeValue
 };

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

@@ -20,10 +20,6 @@ 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,10 +25,6 @@ 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/bpk-react-utils/src/nativeEventHandler.d.ts

@@ -0,0 +1,2 @@
+declare function setNativeValue(element: HTMLInputElement, value: string): void;
+export { setNativeValue };

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

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+// There are cases where input element's values are modifed indirectly.
+// This causes the elements to not emit events that would have been if they had been modified by the user directly.
+// In order to maintain the expected native behaviour of the input element, It's possible to call this function during an
+// "onEvent" handler and update the element value, together with updating react it's own state which isn't mapped to the elements value prop.
+function setNativeValue(element, value) {
+  const inputProto = window.HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value');
+  const setValue = descriptor.set;
+  if (setValue) {
+    const event = new Event('change', {
+      bubbles: true
+    });
+    setValue.call(element, value);
+    element.dispatchEvent(event);
+  }
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export { setNativeValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.13.1",
+  "version": "34.15.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-slider": "^1.1.2",
-    "@react-google-maps/api": "^2.12.0",
+    "@react-google-maps/api": "^2.19.3",
     "@skyscanner/bpk-foundations-web": "^18.1.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
     "a11y-focus-scope": "^1.1.3",

package/bpk-component-carousel/src/utils.test.js

@@ -1,12 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { useScrollToInitialImage } from "./utils";
-describe('useScrollToInitialImage', () => {
-  it('should scroll to initial image on mount', () => {
-    const imagesRef = {
-      current: [document.createElement('div'), document.createElement('div')]
-    };
-    const initialImageIndex = 0;
-    renderHook(() => useScrollToInitialImage(initialImageIndex, imagesRef));
-    expect(imagesRef.current[initialImageIndex].scrollIntoView).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -1,43 +0,0 @@
-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/BpkDrawerContent.d.ts

@@ -1,21 +0,0 @@
-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/themeAttributes.d.ts

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