@skyscanner/backpack-web 37.3.2 → 37.4.1

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

@@ -7,6 +7,7 @@ export type BpkBackgroundImageProps = {
     loading?: boolean;
     src: string;
     className?: string;
+    onError?: (() => void) | null;
     onLoad?: (() => void) | null;
     style?: {};
     imageStyle?: CSSProperties;
@@ -18,12 +19,15 @@ declare class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
         inView: boolean;
         loading: boolean;
         onLoad: null;
+        onError: null;
         style: {};
         imageStyle: {};
     };
     constructor(props: BpkBackgroundImageProps);
     componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(newProps: BpkBackgroundImageProps): void;
+    componentDidUpdate(prevProps: BpkBackgroundImageProps): void;
+    onBackgroundImageError: () => void;
     onBackgroundImageLoad: () => void;
     getAspectRatio: () => number;
     startImageLoad: () => void;

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

@@ -30,6 +30,7 @@ class BpkBackgroundImage extends Component {
     inView: true,
     loading: false,
     onLoad: null,
+    onError: null,
     style: {},
     imageStyle: {}
   };
@@ -47,6 +48,16 @@ class BpkBackgroundImage extends Component {
       this.startImageLoad();
     }
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.startImageLoad();
+    }
+  }
+  onBackgroundImageError = () => {
+    if (this.props.onError) {
+      this.props.onError();
+    }
+  };
   onBackgroundImageLoad = () => {
     if (this.props.onLoad) {
       this.props.onLoad();
@@ -62,6 +73,7 @@ class BpkBackgroundImage extends Component {
   startImageLoad = () => {
     this.trackImg = new Image();
     this.trackImg.src = this.props.src;
+    this.trackImg.onerror = this.onBackgroundImageError;
     this.trackImg.onload = this.onBackgroundImageLoad;
   };
   render() {

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, ElementType, CSSProperties } from 'react';
+import type { ReactNode, ElementType, CSSProperties, UIEvent } from 'react';
 import { Component } from 'react';
 import type { DebouncedFunc } from 'lodash';
 declare const computeScrollBarAwareHeight: (scrollerEl: HTMLElement | null, innerEl: HTMLElement | null) => string | null;
@@ -13,6 +13,7 @@ type Props = {
     scrollerRef?: (el: HTMLElement | null) => void;
     style?: CSSProperties;
     showScrollbar?: boolean;
+    onScroll?: (event: UIEvent) => void;
 };
 type State = {
     computedHeight: string;

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

@@ -109,6 +109,7 @@ class BpkMobileScrollContainer extends Component {
       className,
       innerContainerTagName = 'div',
       leadingIndicatorClassName,
+      onScroll,
       scrollerRef,
       showScrollbar,
       style,
@@ -137,7 +138,12 @@ class BpkMobileScrollContainer extends Component {
           }
           this.scrollerEl = el;
         },
-        onScroll: this.setScrollIndicatorClassName,
+        onScroll: event => {
+          this.setScrollIndicatorClassName();
+          if (onScroll) {
+            onScroll(event);
+          }
+        },
         className: scrollerClassNames,
         children: /*#__PURE__*/_jsx(InnerContainer, {
           "aria-label": ariaLabel,

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -23,8 +23,8 @@ The actual component that developers create (i.e. the default export from this p
 */
 
 import { cloneElement, useRef, useState, useEffect } from 'react';
-import { arrow, FloatingArrow, FloatingPortal, offset, shift, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react';
-import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { arrow, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useFloating, useFocus, useHover, useInteractions, useRole } from '@floating-ui/react';
+import { surfaceHighlightDay, onePixelRem } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
@@ -39,12 +39,12 @@ const strokeWidth = 1;
 const getArrowAlignment = placement => {
   if (placement.includes('bottom')) {
     return {
-      bottom: '98%'
+      bottom: `calc(100% - ${onePixelRem})`
     };
   }
   if (placement.includes('top')) {
     return {
-      top: '98%'
+      top: `calc(100% - ${onePixelRem})`
     };
   }
   return undefined;
@@ -82,7 +82,8 @@ const BpkTooltip = ({
     })]
   });
   const hover = useHover(context, {
-    mouseOnly: !hasTouchSupport() || !hideOnTouchDevices
+    mouseOnly: !hasTouchSupport() || !hideOnTouchDevices,
+    handleClose: safePolygon()
   });
   const role = useRole(context, {
     role: 'tooltip'
@@ -90,7 +91,7 @@ const BpkTooltip = ({
   const {
     getFloatingProps,
     getReferenceProps
-  } = useInteractions([hover, role]);
+  } = useInteractions([hover, role, useFocus(context)]);
   const targetWithAccessibilityProps = /*#__PURE__*/cloneElement(target, {
     tabIndex: '0',
     'aria-label': ariaLabel,

package/package.json

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