@skyscanner/backpack-web 2.0.1 → 3.0.0

package/bpk-component-text/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-text",
+  "version": "7.0.4",
+  "description": "Backpack text component.",
+  "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": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-text/src/BpkText.js

@@ -20,8 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules, deprecated } from 'bpk-react-utils';
 
 import STYLES from './BpkText.module.scss';
 

package/bpk-component-textarea/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-textarea",
+  "version": "4.2.10",
+  "description": "Backpack textarea component.",
+  "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": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "bpk-component-label": "^5.1.10",
+    "bpk-storybook-utils": "^1.1.9"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-textarea/src/BpkTextarea.js

@@ -20,8 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkTextarea.module.scss';
 

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

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-theme-toggle",
+  "version": "3.1.10",
+  "description": "Backpack theme toggle component.",
+  "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": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-label": "^5.1.10",
+    "bpk-component-select": "^5.1.10",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "konami": "^1.6.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -18,10 +18,9 @@
 
 import React from 'react';
 import Konami from 'konami';
-
-import BpkLabel from '../../bpk-component-label';
-import BpkSelect from '../../bpk-component-select';
-import { cssModules } from '../../bpk-react-utils';
+import BpkLabel from 'bpk-component-label';
+import BpkSelect from 'bpk-component-select';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkThemeToggle.module.scss';
 import bpkCustomThemes from './theming';

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -18,8 +18,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
+import { wrapDisplayName } from 'bpk-react-utils';
 
 import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
 

package/bpk-component-ticket/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-ticket",
+  "version": "4.1.11",
+  "description": "Backpack ticket component.",
+  "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": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-mixins": "^31.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.5",
+    "bpk-component-icon": "^9.2.11"
+  }
+}

package/bpk-component-ticket/src/BpkTicket.js

@@ -20,8 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkTicket.module.scss';
 

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

@@ -0,0 +1,29 @@
+{
+  "name": "bpk-component-tooltip",
+  "version": "7.0.0",
+  "description": "Backpack tooltip component.",
+  "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": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-text": "^7.0.4"
+  }
+}

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

@@ -26,8 +26,7 @@ The actual component that developers create (i.e. the default export from this p
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkTooltip.module.scss';
 import { ARROW_ID, TOOLTIP_TYPES } from './constants';
@@ -72,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,18 +18,16 @@
 
 /* @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';
+import { Portal, cssModules } from 'bpk-react-utils';
 
 import BpkTooltip, {
   propTypes as tooltipPropTypes,
   defaultProps as tooltipDefaultProps,
   type TooltipProps,
 } from './BpkTooltip';
-import { ARROW_ID } from './constants';
 import STYLES from './BpkTooltip.module.scss';
 
 const getClassName = cssModules(STYLES);
@@ -59,7 +57,7 @@ type State = {
 };
 
 class BpkTooltipPortal extends Component<Props, State> {
-  popper: ?typeof Popper;
+  popper: ?typeof createPopper;
 
   targetRef: ?HTMLElement;
 
@@ -68,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,
@@ -120,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

@@ -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-scrim-utils/src/BpkScrim.js

@@ -18,8 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
 
 import STYLES from './bpk-scrim.module.scss';
 

package/bpk-scrim-utils/src/withScrim.js

@@ -20,13 +20,12 @@ import focusScope from 'a11y-focus-scope';
 import focusStore from 'a11y-focus-store';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-
 import {
   cssModules,
   isDeviceIpad,
   isDeviceIphone,
   wrapDisplayName,
-} from '../../bpk-react-utils';
+} from 'bpk-react-utils';
 
 import BpkScrim from './BpkScrim';
 import {

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.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",