@skyscanner/backpack-web 1.0.1 → 3.0.0

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.9"
+    "bpk-component-rtl-toggle": "^3.1.10"
   }
 }

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.9",
+  "version": "5.1.10",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-svgs": "^14.1.9",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.10",
+    "bpk-component-icon": "^9.2.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-table": "^3.1.9",
-    "bpk-storybook-utils": "^1.1.8"
+    "bpk-component-table": "^3.1.10",
+    "bpk-storybook-utils": "^1.1.9"
   }
 }

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -92,7 +92,12 @@ const BpkStarRating = (props: Props) => {
       : ratingLabel(rating, maxRating);
 
   return (
-    <div {...rest} aria-label={label} className={classNames.join(' ')}>
+    <div
+      {...rest}
+      role="img"
+      aria-label={label}
+      className={classNames.join(' ')}
+    >
       {stars}
     </div>
   );

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "4.2.9",
+  "version": "4.2.10",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.9",
-    "bpk-storybook-utils": "^1.1.8"
+    "bpk-component-label": "^5.1.10",
+    "bpk-storybook-utils": "^1.1.9"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-theme-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-label": "^5.1.9",
-    "bpk-component-select": "^5.1.9",
+    "bpk-component-label": "^5.1.10",
+    "bpk-component-select": "^5.1.10",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "konami": "^1.6.2",
     "prop-types": "^15.7.2"
   },

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.10",
+  "version": "4.1.11",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.4",
-    "bpk-component-icon": "^9.2.10"
+    "bpk-component-button": "^6.2.5",
+    "bpk-component-icon": "^9.2.11"
   }
 }

package/bpk-component-tooltip/README.md

@@ -39,7 +39,7 @@ const App = () => (
 | padded                | bool                                           | false    | true                |
 | portalStyle           | object                                         | false    | null                |
 | portalClassName       | string                                         | false    | null                |
-| popperModifiers       | object                                         | false    | null                |
+| popperModifiers       | arrayOf(object)                                | false    | null                |
 | renderTarget          | func                                           | false    | null                |
 | type                  | oneOf(`TOOLTIP_TYPES.light`, `TOOLTIP_TYPES.dark`) | false    | `TOOLTIP_TYPES.light` |
 
@@ -53,4 +53,4 @@ The label will be used on the `target` element, so any existing `aria-label` att
 
 #### `popperModifiers`
 
-Please refer to the [documentation](https://github.com/FezVrasta/popper.js/blob/v1.12.9/docs/_includes/popper-documentation.md#modifiers) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.
+Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "6.1.10",
+  "version": "7.0.0",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/popper.js": "^1.12.9-beta.1",
+    "@popperjs/core": "^2.11.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.3"
+    "bpk-component-text": "^7.0.4"
   }
 }

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

@@ -71,7 +71,12 @@ const BpkTooltip = (props: TooltipProps) => {
         className={classNames}
         {...rest}
       >
-        <span id={ARROW_ID} className={arrowClassNames} role="presentation" />
+        <span
+          id={ARROW_ID}
+          data-popper-arrow
+          className={arrowClassNames}
+          role="presentation"
+        />
         <div className={innerClassNames}>{children}</div>
       </section>
     </TransitionInitialMount>

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';
 import { Portal, cssModules } from 'bpk-react-utils';
@@ -28,7 +28,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);
@@ -58,7 +57,7 @@ type State = {
 };
 
 class BpkTooltipPortal extends Component<Props, State> {
-  popper: ?typeof Popper;
+  popper: ?typeof createPopper;
 
   targetRef: ?HTMLElement;
 
@@ -67,7 +66,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,
@@ -119,22 +118,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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "5.1.8",
+  "version": "5.1.9",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,7 +17,7 @@
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1"
+    "bpk-react-utils": "^4.1.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-theming",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "1.0.1",
+  "version": "3.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "@skyscanner/popper.js": "^1.12.9-beta.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",