@skyscanner/backpack-web 2.0.1 → 3.1.0

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -19,27 +19,13 @@
 @import '~bpk-mixins';
 $bpk-spacing-v2: true;
 
-$arrow-size: bpk-spacing-sm();
+$arrow-size: bpk-spacing-md();
+$arrow-inset-margin: -($bpk-one-pixel-rem * 3);
+$light-arrow-border-color: $bpk-color-sky-gray-tint-06;
 $dark-background-color: $bpk-color-sky-gray;
 
 .bpk-tooltip-portal {
   z-index: $bpk-zindex-tooltip;
-
-  &[x-placement='top'] {
-    margin-bottom: $arrow-size;
-  }
-
-  &[x-placement='right'] {
-    margin-left: $arrow-size;
-  }
-
-  &[x-placement='bottom'] {
-    margin-top: $arrow-size;
-  }
-
-  &[x-placement='left'] {
-    margin-right: $arrow-size;
-  }
 }
 
 .bpk-tooltip {
@@ -51,24 +37,26 @@ $dark-background-color: $bpk-color-sky-gray;
   &--appear {
     opacity: 0;
 
-    .bpk-tooltip-portal[x-placement='top'] &:not(.bpk-tooltip--appear-active) {
+    .bpk-tooltip-portal[data-popper-placement='top']
+      &:not(.bpk-tooltip--appear-active) {
       transform: translate(0, -1rem);
       transition: none;
     }
 
-    .bpk-tooltip-portal[x-placement='right']
+    .bpk-tooltip-portal[data-popper-placement='right']
       &:not(.bpk-tooltip--appear-active) {
       transform: translate(1rem, 0);
       transition: none;
     }
 
-    .bpk-tooltip-portal[x-placement='bottom']
+    .bpk-tooltip-portal[data-popper-placement='bottom']
       &:not(.bpk-tooltip--appear-active) {
       transform: translate(0, 1rem);
       transition: none;
     }
 
-    .bpk-tooltip-portal[x-placement='left'] &:not(.bpk-tooltip--appear-active) {
+    .bpk-tooltip-portal[data-popper-placement='left']
+      &:not(.bpk-tooltip--appear-active) {
       transform: translate(-1rem, 0);
       transition: none;
     }
@@ -82,55 +70,58 @@ $dark-background-color: $bpk-color-sky-gray;
   }
 
   &__arrow {
-    @include bpk-layer-arrow($arrow-size);
-
-    .bpk-tooltip-portal[x-placement='top'] & {
-      @include bpk-layer-arrow-bottom($arrow-size);
+    position: aboslute;
+    width: $arrow-size;
+    height: $arrow-size;
+    transform: rotate(45deg);
+    border: $bpk-one-pixel-rem solid transparent;
+    background: inherit;
+    background-color: $bpk-color-white;
+
+    .bpk-tooltip-portal[data-popper-placement='top'] & {
+      bottom: $arrow-inset-margin;
+      border-right-color: $light-arrow-border-color;
+      border-bottom-color: $light-arrow-border-color;
     }
 
-    .bpk-tooltip-portal[x-placement='right'] & {
-      @include bpk-layer-arrow-left($arrow-size);
+    .bpk-tooltip-portal[data-popper-placement='right'] & {
+      left: $arrow-inset-margin;
+      border-bottom-color: $light-arrow-border-color;
+      border-left-color: $light-arrow-border-color;
     }
 
-    .bpk-tooltip-portal[x-placement='bottom'] & {
-      @include bpk-layer-arrow-top($arrow-size);
+    .bpk-tooltip-portal[data-popper-placement='bottom'] & {
+      top: $arrow-inset-margin;
+      border-top-color: $light-arrow-border-color;
+      border-left-color: $light-arrow-border-color;
     }
 
-    .bpk-tooltip-portal[x-placement='left'] & {
-      @include bpk-layer-arrow-right($arrow-size);
+    .bpk-tooltip-portal[data-popper-placement='left'] & {
+      right: $arrow-inset-margin;
+      border-top-color: $light-arrow-border-color;
+      border-right-color: $light-arrow-border-color;
     }
 
     &--dark {
-      .bpk-tooltip-portal[x-placement='top'] & {
-        @include bpk-layer-arrow-bottom(
-          $arrow-size,
-          $dark-background-color,
-          $dark-background-color
-        );
+      background-color: $dark-background-color;
+      .bpk-tooltip-portal[data-popper-placement='top'] & {
+        border-right-color: $dark-background-color;
+        border-bottom-color: $dark-background-color;
       }
 
-      .bpk-tooltip-portal[x-placement='right'] & {
-        @include bpk-layer-arrow-left(
-          $arrow-size,
-          $dark-background-color,
-          $dark-background-color
-        );
+      .bpk-tooltip-portal[data-popper-placement='right'] & {
+        border-bottom-color: $dark-background-color;
+        border-left-color: $dark-background-color;
       }
 
-      .bpk-tooltip-portal[x-placement='bottom'] & {
-        @include bpk-layer-arrow-top(
-          $arrow-size,
-          $dark-background-color,
-          $dark-background-color
-        );
+      .bpk-tooltip-portal[data-popper-placement='bottom'] & {
+        border-top-color: $dark-background-color;
+        border-left-color: $dark-background-color;
       }
 
-      .bpk-tooltip-portal[x-placement='left'] & {
-        @include bpk-layer-arrow-right(
-          $arrow-size,
-          $dark-background-color,
-          $dark-background-color
-        );
+      .bpk-tooltip-portal[data-popper-placement='left'] & {
+        border-top-color: $dark-background-color;
+        border-right-color: $dark-background-color;
       }
     }
   }

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

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import Popper from '@skyscanner/popper.js';
+import { createPopper, basePlacements } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node, type Element } from 'react';
 
@@ -29,7 +29,6 @@ import BpkTooltip, {
   defaultProps as tooltipDefaultProps,
   type TooltipProps,
 } from './BpkTooltip';
-import { ARROW_ID } from './constants';
 import STYLES from './BpkTooltip.module.scss';
 
 const getClassName = cssModules(STYLES);
@@ -59,7 +58,7 @@ type State = {
 };
 
 class BpkTooltipPortal extends Component<Props, State> {
-  popper: ?typeof Popper;
+  popper: ?typeof createPopper;
 
   targetRef: ?HTMLElement;
 
@@ -68,7 +67,7 @@ class BpkTooltipPortal extends Component<Props, State> {
     ariaLabel: PropTypes.string.isRequired,
     target: PropTypes.node.isRequired,
     children: PropTypes.node.isRequired,
-    placement: PropTypes.oneOf(Popper.placements),
+    placement: PropTypes.oneOf(basePlacements),
     hideOnTouchDevices: PropTypes.bool,
     portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     portalClassName: PropTypes.string,
@@ -120,22 +119,32 @@ class BpkTooltipPortal extends Component<Props, State> {
   }
 
   onOpen = (tooltipElement: HTMLElement, targetElement: HTMLElement) => {
+    // The default modifiers for the popper
     // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
     // which can cause blurriness in Safari and Chrome.
-    this.popper = new Popper(targetElement, tooltipElement, {
-      placement: this.props.placement,
-      modifiers: {
-        ...this.props.popperModifiers,
-        computeStyle: {
+    const stdModifiers = [
+      {
+        name: 'computeStyles',
+        options: {
           gpuAcceleration: false,
         },
-        arrow: {
-          element: `#${ARROW_ID}`,
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 8],
         },
       },
+    ];
+
+    this.popper = createPopper(targetElement, tooltipElement, {
+      placement: this.props.placement,
+      modifiers: this.props.popperModifiers
+        ? [...this.props.popperModifiers, ...stdModifiers]
+        : stdModifiers,
     });
 
-    this.popper.scheduleUpdate();
+    this.popper.update();
   };
 
   beforeClose = (done: () => mixed) => {

package/bpk-react-utils/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bpk-react-utils",
+  "version": "4.1.2",
+  "description": "Utilities for Backpack's React components.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
+  "dependencies": {
+    "object-assign": "^4.1.1",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^2.5.3"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0",
+    "react-dom": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-scrim-utils/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bpk-scrim-utils",
+  "version": "5.1.9",
+  "description": "Higher order component that adds an overlay behind components and manages scroll states.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "a11y-focus-scope": "^1.1.3",
+    "a11y-focus-store": "^1.0.0",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-theming/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "bpk-theming",
+  "version": "2.1.6",
+  "description": "Backpack theming utlities.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
+  "dependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "2.0.1",
+  "version": "3.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,14 +22,16 @@
     "access": "public"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "@skyscanner/popper.js": "^1.12.9-beta.1",
+    "@skyscanner/bpk-svgs": "^14.1.9",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "date-fns": "^2.21.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
+    "date-fns": "^2.21.1",
     "intersection-observer": "^0.7.0",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",