@skyscanner/backpack-web 34.13.0 → 34.14.0

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-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-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-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-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}
+.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}html[dir=rtl] .bpk-segmented-control:first-child{border-top-left-radius:0;border-top-right-radius:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:.5rem}.bpk-segmented-control:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}html[dir=rtl] .bpk-segmented-control:last-child{border-top-left-radius:.5rem;border-top-right-radius:0;border-bottom-left-radius:.5rem;border-bottom-right-radius:0}.bpk-segmented-control:focus{border:.125rem solid #0062e3;outline:none}

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/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.0",
+  "version": "34.14.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);
-  });
-});