@skyscanner/backpack-web 17.1.0-beta.1 → 17.1.0

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

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-tooltip-portal{z-index:900}.bpk-tooltip-portal--target{display:inline-block}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:aboslute;width:.5rem;height:.5rem;transform:rotate(45deg);border:.0625rem solid transparent;background:inherit;background-color:#fff}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip__arrow{bottom:-.1875rem;border-right-color:#c2c9cd;border-bottom-color:#c2c9cd}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip__arrow{left:-.1875rem;border-bottom-color:#c2c9cd;border-left-color:#c2c9cd}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip__arrow{top:-.1875rem;border-top-color:#c2c9cd;border-left-color:#c2c9cd}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip__arrow{right:-.1875rem;border-top-color:#c2c9cd;border-right-color:#c2c9cd}.bpk-tooltip__arrow--dark{background-color:#05203c}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip__arrow--dark{border-right-color:#05203c;border-bottom-color:#05203c}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip__arrow--dark{border-bottom-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-right-color:#05203c}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #e0e3e5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}.bpk-tooltip__inner--padded{padding:0.25rem .5rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #05203c;background-color:#05203c;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-tooltip-portal{z-index:900}.bpk-tooltip-portal[x-placement='top']{margin-bottom:.25rem}.bpk-tooltip-portal[x-placement='right']{margin-left:.25rem}.bpk-tooltip-portal[x-placement='bottom']{margin-top:.25rem}.bpk-tooltip-portal[x-placement='left']{margin-right:.25rem}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:absolute;pointer-events:none}.bpk-tooltip__arrow::before,.bpk-tooltip__arrow::after{position:absolute;content:' ';display:block}.bpk-tooltip__arrow::before{border:.3125rem solid transparent}.bpk-tooltip__arrow::after{border:.25rem solid transparent}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow{top:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::before{bottom:-.3125rem;margin-left:-.0625rem;border-top-color:#dddde5}html[dir='rtl'] .bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::after{bottom:-.1875rem;border-top-color:#fff}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow{right:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow::before{left:-.3125rem;margin-top:-.0625rem;border-right-color:#dddde5}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow::after{left:-.1875rem;border-right-color:#fff}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow{bottom:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::before{top:-.3125rem;margin-left:-.0625rem;border-bottom-color:#dddde5}html[dir='rtl'] .bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::after{top:-.1875rem;border-bottom-color:#fff}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow{left:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow::before{right:-.3125rem;margin-top:-.0625rem;border-left-color:#dddde5}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow::after{right:-.1875rem;border-left-color:#fff}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark{top:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::before{bottom:-.3125rem;margin-left:-.0625rem;border-top-color:#111236}html[dir='rtl'] .bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::after{bottom:-.1875rem;border-top-color:#111236}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark{right:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark::before{left:-.3125rem;margin-top:-.0625rem;border-right-color:#111236}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark::after{left:-.1875rem;border-right-color:#111236}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark{bottom:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::before{top:-.3125rem;margin-left:-.0625rem;border-bottom-color:#111236}html[dir='rtl'] .bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::after{top:-.1875rem;border-bottom-color:#111236}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark{left:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark::before{right:-.3125rem;margin-top:-.0625rem;border-left-color:#111236}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark::after{right:-.1875rem;border-left-color:#111236}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #dddde5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}.bpk-tooltip__inner--padded{padding:.25rem 0.5rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #111236;background-color:#111236;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}

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

@@ -0,0 +1,149 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+$arrow-size: bpk-spacing-md();
+$arrow-inset-margin: -($bpk-one-pixel-rem * 3);
+$light-arrow-border-color: $bpk-line-day;
+$dark-background-color: $bpk-surface-contrast-day;
+
+.bpk-tooltip-portal {
+  z-index: $bpk-zindex-tooltip;
+
+  &--target {
+    display: inline-block;
+  }
+}
+
+.bpk-tooltip {
+  transition: opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  outline: 0;
+  opacity: 1;
+
+  &--appear {
+    opacity: 0;
+
+    .bpk-tooltip-portal[data-popper-placement='top']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(0, -1rem);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='right']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(1rem, 0);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='bottom']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(0, 1rem);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='left']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(-1rem, 0);
+      transition: none;
+    }
+  }
+
+  &--appear-active {
+    transform: translate(0, 0);
+    transition: opacity $bpk-duration-sm ease-in-out,
+      transform $bpk-duration-sm ease-in-out;
+    opacity: 1;
+  }
+
+  &__arrow {
+    position: aboslute;
+    width: $arrow-size;
+    height: $arrow-size;
+    transform: rotate(45deg);
+    border: $bpk-one-pixel-rem solid transparent;
+    background: inherit;
+    background-color: $bpk-surface-default-day;
+
+    .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[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[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[data-popper-placement='left'] & {
+      right: $arrow-inset-margin;
+      border-top-color: $light-arrow-border-color;
+      border-right-color: $light-arrow-border-color;
+    }
+
+    &--dark {
+      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[data-popper-placement='right'] & {
+        border-bottom-color: $dark-background-color;
+        border-left-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[data-popper-placement='left'] & {
+        border-top-color: $dark-background-color;
+        border-right-color: $dark-background-color;
+      }
+    }
+  }
+
+  &__inner {
+    overflow: hidden;
+
+    @include bpk-layer;
+
+    &--padded {
+      padding: bpk-spacing-md() bpk-spacing-base();
+    }
+
+    &--dark {
+      color: $bpk-text-primary-inverse-day;
+
+      @include bpk-layer($dark-background-color, $dark-background-color);
+    }
+  }
+}

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

@@ -1,155 +1,225 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("@popperjs/core");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkTooltip = _interopRequireWildcard(require("./BpkTooltip"));
-var _BpkTooltipModule = _interopRequireDefault(require("./BpkTooltip.module.css"));
-const _excluded = ["ariaLabel", "children", "hideOnTouchDevices", "padded", "placement", "popperModifiers", "portalClassName", "portalStyle", "renderTarget", "target"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTooltipModule.default);
-const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch));
-class BpkTooltipPortal extends _react.Component {
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import { createPopper } 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 BpkTooltip, {
+  propTypes as tooltipPropTypes,
+  defaultProps as tooltipDefaultProps,
+  type TooltipProps,
+} from './BpkTooltip';
+import STYLES from './BpkTooltip.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const hasTouchSupport = () =>
+  !!(
+    typeof window !== 'undefined' &&
+    ('ontouchstart' in window ||
+      (window.DocumentTouch && document instanceof window.DocumentTouch))
+  );
+
+export type Props = {
+  ...$Exact<TooltipProps>,
+  ariaLabel: string,
+  target: Element<any>,
+  children: Node,
+  placement: 'top' | 'right' | 'bottom' | 'left' | 'auto',
+  hideOnTouchDevices: boolean,
+  portalStyle: ?Object,
+  portalClassName: ?string,
+  renderTarget: ?() => HTMLElement,
+  popperModifiers: ?Object,
+};
+
+type State = {
+  isOpen: boolean,
+};
+
+class BpkTooltipPortal extends Component<Props, State> {
+  popper: ?typeof createPopper;
+
+  targetRef: ?HTMLElement;
+
+  static propTypes = {
+    ...tooltipPropTypes,
+    ariaLabel: PropTypes.string.isRequired,
+    target: PropTypes.node.isRequired,
+    children: PropTypes.node.isRequired,
+    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
+    hideOnTouchDevices: PropTypes.bool,
+    portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    portalClassName: PropTypes.string,
+    renderTarget: PropTypes.func,
+    popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  };
+
+  static defaultProps = {
+    ...tooltipDefaultProps,
+    placement: 'bottom',
+    hideOnTouchDevices: true,
+    portalStyle: null,
+    portalClassName: null,
+    renderTarget: null,
+    popperModifiers: null,
+  };
+
   constructor() {
     super();
-    _defineProperty(this, "popper", void 0);
-    _defineProperty(this, "targetRef", void 0);
-    _defineProperty(this, "onOpen", (tooltipElement, targetElement) => {
-      // 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, 8]
-        }
-      }];
-      this.popper = (0, _core.createPopper)(targetElement, tooltipElement, {
-        placement: this.props.placement,
-        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
-      });
-      this.popper.update();
-    });
-    _defineProperty(this, "beforeClose", done => {
-      if (this.popper) {
-        this.popper.destroy();
-        this.popper = null;
-      }
-      done();
-    });
-    _defineProperty(this, "openTooltip", () => {
-      this.setState({
-        isOpen: true
-      });
-    });
-    _defineProperty(this, "closeTooltip", () => {
-      this.setState({
-        isOpen: false
-      });
-    });
+
     this.state = {
-      isOpen: false
+      isOpen: false,
     };
+
     this.popper = null;
     this.targetRef = null;
   }
+
   componentDidMount() {
     if (this.targetRef) {
       const ref = this.targetRef;
+
       ref.addEventListener('focusin', this.openTooltip);
       ref.addEventListener('focusout', this.closeTooltip);
       ref.addEventListener('mouseenter', this.openTooltip);
       ref.addEventListener('mouseleave', this.closeTooltip);
     }
   }
+
   componentWillUnmount() {
     if (this.targetRef) {
       const ref = this.targetRef;
+
       ref.addEventListener('focusin', this.openTooltip);
       ref.addEventListener('focusout', this.closeTooltip);
       ref.removeEventListener('mouseenter', this.openTooltip);
       ref.removeEventListener('mouseleave', this.closeTooltip);
     }
   }
-  render() {
-    const _this$props = this.props,
+
+  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.
+    const stdModifiers = [
       {
-        ariaLabel,
-        children,
-        hideOnTouchDevices,
-        padded,
-        placement,
-        popperModifiers,
-        portalClassName,
-        portalStyle,
-        renderTarget,
-        target
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+        },
+      },
+      {
+        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.update();
+  };
+
+  beforeClose = (done: () => mixed) => {
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+    }
+
+    done();
+  };
+
+  openTooltip = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  closeTooltip = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    const {
+      ariaLabel,
+      children,
+      hideOnTouchDevices,
+      padded,
+      placement,
+      popperModifiers,
+      portalClassName,
+      portalStyle,
+      renderTarget,
+      target,
+      ...rest
+    } = this.props;
+
     const classNames = [getClassName('bpk-tooltip-portal')];
     const renderPortal = !hasTouchSupport() || !hideOnTouchDevices;
-    const targetWithAccessibilityProps = /*#__PURE__*/_react.default.cloneElement(target, {
+
+    const targetWithAccessibilityProps = React.cloneElement(target, {
       tabIndex: '0',
-      'aria-label': ariaLabel
+      'aria-label': ariaLabel,
     });
+
     if (portalClassName) {
       classNames.push(portalClassName);
     }
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetWithAccessibilityProps, renderPortal && /*#__PURE__*/_react.default.createElement(_bpkReactUtils.Portal, {
-      target: targetWithAccessibilityProps,
-      targetRef: targetRef => {
-        this.targetRef = targetRef;
-      },
-      isOpen: this.state.isOpen,
-      onOpen: this.onOpen,
-      onClose: this.closeTooltip,
-      style: portalStyle,
-      renderTarget: renderTarget,
-      className: classNames.join(' ')
-    }, /*#__PURE__*/_react.default.createElement(_BpkTooltip.default, _extends({
-      padded: padded
-    }, rest), children)));
+
+    return (
+      <>
+        {targetWithAccessibilityProps}
+        {renderPortal && (
+          <Portal
+            target={targetWithAccessibilityProps}
+            targetRef={(targetRef) => {
+              this.targetRef = targetRef;
+            }}
+            isOpen={this.state.isOpen}
+            onOpen={this.onOpen}
+            onClose={this.closeTooltip}
+            style={portalStyle}
+            renderTarget={renderTarget}
+            className={classNames.join(' ')}
+          >
+            {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+            <BpkTooltip padded={padded} {...rest}>
+              {children}
+            </BpkTooltip>
+          </Portal>
+        )}
+      </>
+    );
   }
 }
-_defineProperty(BpkTooltipPortal, "propTypes", _objectSpread(_objectSpread({}, _BpkTooltip.propTypes), {}, {
-  ariaLabel: _propTypes.default.string.isRequired,
-  target: _propTypes.default.node.isRequired,
-  children: _propTypes.default.node.isRequired,
-  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
-  hideOnTouchDevices: _propTypes.default.bool,
-  portalStyle: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  portalClassName: _propTypes.default.string,
-  renderTarget: _propTypes.default.func,
-  popperModifiers: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-}));
-_defineProperty(BpkTooltipPortal, "defaultProps", _objectSpread(_objectSpread({}, _BpkTooltip.defaultProps), {}, {
-  placement: 'bottom',
-  hideOnTouchDevices: true,
-  portalStyle: null,
-  portalClassName: null,
-  renderTarget: null,
-  popperModifiers: null
-}));
-var _default = BpkTooltipPortal;
-exports.default = _default;
+
+export default BpkTooltipPortal;

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TOOLTIP_TYPES = exports.ARROW_ID = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -20,15 +14,14 @@ exports.default = exports.TOOLTIP_TYPES = exports.ARROW_ID = void 0;
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */const ARROW_ID = 'js-bpk-popover-arrow';
-exports.ARROW_ID = ARROW_ID;
-const TOOLTIP_TYPES = {
+ */
+
+/* @flow strict */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
+export const TOOLTIP_TYPES = {
   light: 'light',
-  dark: 'dark'
+  dark: 'dark',
 };
-exports.TOOLTIP_TYPES = TOOLTIP_TYPES;
-var _default = {
-  ARROW_ID,
-  TOOLTIP_TYPES
-};
-exports.default = _default;
+
+export default { ARROW_ID, TOOLTIP_TYPES };