@skyscanner/backpack-web 1.0.1 → 3.0.0

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.10",
-    "bpk-component-text": "^7.0.3"
+    "bpk-component-image": "^5.1.11",
+    "bpk-component-text": "^7.0.4"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.4",
+    "bpk-component-button": "^6.2.5",
     "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-icon": "^9.2.10"
+    "bpk-component-icon": "^9.2.11"
   }
 }

package/bpk-component-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Backpack panel 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-phone-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.14",
+  "version": "7.1.15",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,19 +15,19 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-input": "^6.1.12",
-    "bpk-component-label": "^5.1.9",
-    "bpk-component-select": "^5.1.9",
-    "bpk-component-text": "^7.0.3",
+    "bpk-component-input": "^6.1.13",
+    "bpk-component-label": "^5.1.10",
+    "bpk-component-select": "^5.1.10",
+    "bpk-component-text": "^7.0.4",
     "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-fieldset": "^4.1.14",
-    "bpk-component-image": "^5.1.10"
+    "bpk-component-fieldset": "^4.1.15",
+    "bpk-component-image": "^5.1.11"
   }
 }

package/bpk-component-popover/README.md

@@ -84,7 +84,7 @@ class App extends Component {
 | labelAsTitle          | bool                                      | false    | false         |
 | padded                | bool                                      | false    | true          |
 | placement             | oneOf(['top', 'right', 'bottom', 'left']) | false    | 'bottom'      |
-| popperModifiers       | object                                    | false    | null          |
+| popperModifiers       | arrayOf(object)                           | false    | null          |
 | portalClassName       | string                                    | false    | null          |
 | portalStyle           | object                                    | false    | null          |
 | renderTarget          | func                                      | false    | null          |
@@ -118,7 +118,7 @@ const onClose = (event, {
 
 #### 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 popover 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 popover to overflow the viewport etc.
 
 ## Theme Props
 

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "4.1.12",
+  "version": "5.0.0",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,22 +14,22 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/popper.js": "^1.12.9-beta.1",
+    "@popperjs/core": "^2.11.5",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.10",
-    "bpk-component-link": "^3.1.9",
-    "bpk-component-text": "^7.0.3",
+    "bpk-component-close-button": "^3.1.11",
+    "bpk-component-link": "^3.1.10",
+    "bpk-component-text": "^7.0.4",
     "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-content-container": "^5.0.3",
-    "bpk-component-input": "^6.1.12"
+    "bpk-component-button": "^6.2.5",
+    "bpk-component-content-container": "^5.0.4",
+    "bpk-component-input": "^6.1.13"
   }
 }

package/bpk-component-popover/src/BpkPopover.js

@@ -108,6 +108,7 @@ const BpkPopover = (props: Props) => {
           id={ARROW_ID}
           className={getClassName('bpk-popover__arrow')}
           role="presentation"
+          data-popper-arrow
         />
         {labelAsTitle ? (
           <header className={getClassName('bpk-popover__header')}>

package/bpk-component-popover/src/BpkPopover.module.scss

@@ -20,7 +20,8 @@
 
 $bpk-spacing-v2: true;
 
-$arrow-size: bpk-spacing-sm() * 3;
+$arrow-size: bpk-spacing-lg();
+$arrow-inset-margin: -($bpk-one-pixel-rem * 11);
 
 .bpk-popover-portal {
   z-index: $bpk-zindex-popover;
@@ -29,22 +30,6 @@ $arrow-size: bpk-spacing-sm() * 3;
     margin-right: bpk-spacing-base();
     margin-left: bpk-spacing-base();
   }
-
-  &[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-popover {
@@ -68,22 +53,39 @@ $arrow-size: bpk-spacing-sm() * 3;
   }
 
   &__arrow {
-    @include bpk-layer-arrow($arrow-size);
+    position: aboslute;
+    width: $arrow-size;
+    height: $arrow-size;
+    transform: rotate(45deg);
+    border: $bpk-one-pixel-rem solid transparent;
+    background: inherit;
+
+    .bpk-popover-portal[data-popper-placement='top'] & {
+      bottom: $arrow-inset-margin;
+      border-right-color: $bpk-color-sky-gray-tint-06;
+      border-bottom-color: $bpk-color-sky-gray-tint-06;
+    }
 
-    .bpk-popover-portal[x-placement='top'] & {
-      @include bpk-layer-arrow-bottom($arrow-size);
+    .bpk-popover-portal[data-popper-placement='right'] & {
+      left: $arrow-inset-margin;
+      border-bottom-color: $bpk-color-sky-gray-tint-06;
+      border-left-color: $bpk-color-sky-gray-tint-06;
     }
 
-    .bpk-popover-portal[x-placement='right'] & {
-      @include bpk-layer-arrow-left($arrow-size);
+    .bpk-popover-portal[data-popper-placement='bottom'] & {
+      top: $arrow-inset-margin;
+      border-top-color: $bpk-color-sky-gray-tint-06;
+      border-left-color: $bpk-color-sky-gray-tint-06;
     }
 
-    .bpk-popover-portal[x-placement='bottom'] & {
-      @include bpk-layer-arrow-top($arrow-size);
+    .bpk-popover-portal[data-popper-placement='left'] & {
+      right: $arrow-inset-margin;
+      border-top-color: $bpk-color-sky-gray-tint-06;
+      border-right-color: $bpk-color-sky-gray-tint-06;
     }
 
-    .bpk-popover-portal[x-placement='left'] & {
-      @include bpk-layer-arrow-right($arrow-size);
+    &[data-hide] {
+      visibility: hidden;
     }
   }
 

package/bpk-component-popover/src/BpkPopoverPortal.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 } from 'react';
 import focusStore from 'a11y-focus-store';
@@ -31,7 +31,6 @@ import BpkPopover, {
   defaultProps as popoverDefaultProps,
   type Props as PopoverProps,
 } from './BpkPopover';
-import { ARROW_ID } from './constants';
 
 const getClassName = cssModules(STYLES);
 
@@ -51,7 +50,7 @@ export const propTypes = {
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  placement: PropTypes.oneOf(basePlacements),
   portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   portalClassName: PropTypes.string,
   renderTarget: PropTypes.func,
@@ -68,7 +67,7 @@ export const defaultProps = {
 };
 
 class BpkPopoverPortal extends Component<Props> {
-  popper: ?typeof Popper;
+  popper: ?typeof createPopper;
 
   suppressRestoreFocus: boolean;
 
@@ -139,34 +138,61 @@ class BpkPopoverPortal extends Component<Props> {
       this.popper = null;
     }
 
+    // Custom modifier that makes the arrow display at the edge of the target.
+    const applyArrowHide = {
+      name: 'applyArrowHide',
+      enabled: true,
+      phase: 'write',
+      fn({ state }) {
+        const { arrow } = state.elements;
+        if (arrow) {
+          if (state.modifiersData.arrow.centerOffset !== 0) {
+            arrow.setAttribute('data-hide', '');
+          } else {
+            arrow.removeAttribute('data-hide');
+          }
+        }
+      },
+    };
+
+    // 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.
+    const stdModifiers = [
+      {
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 17],
+        },
+      },
+      applyArrowHide,
+    ];
+
     if (!this.popper) {
-      this.popper = new Popper(targetElement, popoverElement, {
+      this.popper = createPopper(targetElement, popoverElement, {
         placement: this.props.placement,
-        onCreate: () => {
+        onFirstUpdate: () => {
           if (targetElement) {
             targetElement.focus();
           }
           focusStore.storeFocus();
           keyboardFocusScope.scopeFocus(popoverElement);
         },
-        modifiers: {
-          ...this.props.popperModifiers,
-          computeStyle: {
-            gpuAcceleration: false,
-          },
-          arrow: {
-            element: `#${ARROW_ID}`,
-          },
-        },
+        modifiers: this.props.popperModifiers
+          ? [...this.props.popperModifiers, ...stdModifiers]
+          : stdModifiers,
       });
     }
 
     this.previousTargetElement = targetElement;
-
     if (this.popper) {
-      this.popper.scheduleUpdate();
+      this.popper.update();
     }
   }
 

package/bpk-component-progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-progress",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Backpack progress bar 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",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -24,7 +24,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.4",
-    "bpk-storybook-utils": "^1.1.8"
+    "bpk-component-button": "^6.2.5",
+    "bpk-storybook-utils": "^1.1.9"
   }
 }

package/bpk-component-radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-radio",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack radio button 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": {
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.8"
+    "bpk-storybook-utils": "^1.1.9"
   }
 }

package/bpk-component-rating/README.md

@@ -24,9 +24,9 @@ export default () => (
 
   // Large size rating
   <BpkRating
-    ariaLabel="4.4 Very good This place was amazing"
+    ariaLabel="4.4 Very good 120 reviews"
     title="Very good"
-    subtitle="This place was amazing"
+    subtitle="120 reviews"
     size={RATING_SIZES.large}
     value={4.4}
   />
@@ -40,17 +40,26 @@ export default () => (
 
   // Show scale rating
   <BpkRating
-    ariaLabel="3.8 Good Nice choice"
+    ariaLabel="3.8 Good 530 reviews"
     title="Good"
-    subtitle="Nice choice"
+    subtitle="530 reviews"
     value={3.8}
   />
 
+  // Hide scale rating
+  <BpkRating
+    ariaLabel="3.8 Good 530 reviews"
+    title="Good"
+    subtitle="530 reviews"
+    value={3.8}
+    showScale={false}
+  />
+
   // 0-10 scale
   <BpkRating
-    ariaLabel="9.9 Awesome It was almost perfect"
+    ariaLabel="9.9 Awesome 6,549 reviews"
     title="Awesome"
-    subtitle="It was almost perfect"
+    subtitle="6,549 reviews"
     value={9.9}
     ratingScale={RATING_SCALES.zeroToTen}
   />
@@ -63,7 +72,7 @@ export default () => (
 | --------- | --------------------- | -------- | ----------------- |
 | ariaLabel | string                | true     | -                 |
 | title     | oneOfType(string, node) | true     | -                 |
-| value     | number                | true     | -                 |
+| value     | oneOfType(string, number) | true     | -               |
 | className | string                | false    | null              |
 | ratingScale | oneOf(RATING_SCALES) | false    | RATING_SCALES.zeroToFive |
 | size      | oneOf(RATING_SIZES)   | false    | RATING_SIZES.base |

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "4.0.2",
+  "version": "5.0.1",
   "description": "Backpack rating 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",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
   },
@@ -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-rating/src/BpkRating.js

@@ -51,7 +51,7 @@ type Props = {
   size: $Values<typeof RATING_SIZES>,
   subtitle: ?string,
   title: string | Node,
-  value: number,
+  value: string | number,
 };
 
 const BpkRating = (props: Props) => {
@@ -97,14 +97,17 @@ const BpkRating = (props: Props) => {
   let adjustedValue = value;
 
   if (adjustedValue >= maxValue || adjustedValue <= minValue) {
-    adjustedValue = clamp(adjustedValue, minValue, maxValue).toFixed(1);
-  } else {
-    adjustedValue = value.toFixed(1);
+    adjustedValue = clamp(adjustedValue, minValue, maxValue);
   }
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div className={classNames.join(' ')} aria-label={ariaLabel} {...rest}>
+    <div
+      className={classNames.join(' ')}
+      aria-label={ariaLabel}
+      role="figure"
+      {...rest}
+    >
       <BpkText
         textStyle={valueTextSize}
         tagName="span"
@@ -153,7 +156,7 @@ const BpkRating = (props: Props) => {
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  value: PropTypes.number.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   className: PropTypes.string,
   ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
   size: PropTypes.oneOf(Object.keys(RATING_SIZES)),

package/bpk-component-rating/src/common-types.js

@@ -18,7 +18,7 @@
 
 /* @flow */
 
-export const RATING_SIZES = { base: 'base', large: 'lg' };
+export const RATING_SIZES = { base: 'base', large: 'large' };
 
 export const RATING_SCALES = {
   zeroToFive: 'zeroToFive',

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rtl-toggle",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Backpack RTL toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.9",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-component-link": "^3.1.10",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.14",
+  "version": "6.1.15",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,16 +15,16 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.1.14",
-    "bpk-component-text": "^7.0.3",
+    "bpk-component-calendar": "^11.1.15",
+    "bpk-component-text": "^7.0.4",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-virtualized": "^9.22.3"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.8"
+    "bpk-storybook-utils": "^1.1.9"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.10",
+  "version": "3.2.11",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.10",
-    "bpk-component-text": "^7.0.3",
+    "bpk-component-icon": "^9.2.11",
+    "bpk-component-text": "^7.0.4",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.8"
+    "bpk-storybook-utils": "^1.1.9"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "5.1.9",
+  "version": "5.1.10",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,11 +15,11 @@
   "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-storybook-utils": "^1.1.8"
+    "bpk-storybook-utils": "^1.1.9"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-skip-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.1",
+    "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.5.8"
   },
   "publishConfig": {