@skyscanner/backpack-web 7.1.0 → 8.0.0

package/bpk-component-tooltip/README.md

@@ -16,10 +16,17 @@ import BpkText from 'bpk-component-text';
 import BpkTooltip from 'bpk-component-tooltip';
 
 const App = () => (
+  const targetRef = useRef(null);
+  const target = (
+    <div ref={targetRef} className={'my-tooltip-target'}>
+      <BpkText textStyle="lg">LHR</BpkText>
+    </div>
+  );
+
   <BpkTooltip
     ariaLabel="London Heathrow"
     id="my-tooltip"
-    target={<BpkText textStyle="lg">LHR</BpkText>}
+    target={target}
   >
     London Heathrow
   </BpkTooltip>
@@ -54,3 +61,7 @@ The label will be used on the `target` element, so any existing `aria-label` att
 #### `popperModifiers`
 
 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.
+
+#### target
+
+`target` should be a DOM element with a `ref` attached to it.

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "7.0.3",
+  "version": "8.0.0",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.6"
+    "bpk-component-text": "^7.0.7"
   }
 }

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

@@ -26,6 +26,10 @@ $dark-background-color: $bpk-color-sky-gray;
 
 .bpk-tooltip-portal {
   z-index: $bpk-zindex-tooltip;
+
+  &--target {
+    display: inline-block;
+  }
 }
 
 .bpk-tooltip {

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

@@ -22,7 +22,7 @@ import { createPopper } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node, type Element } from 'react';
 
-import { PortalV1, cssModules } from '../../bpk-react-utils';
+import { Portal, cssModules } from '../../bpk-react-utils';
 
 import BpkTooltip, {
   propTypes as tooltipPropTypes,
@@ -195,26 +195,29 @@ class BpkTooltipPortal extends Component<Props, State> {
       classNames.push(portalClassName);
     }
 
-    return renderPortal ? (
-      <PortalV1
-        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>
-      </PortalV1>
-    ) : (
-      targetWithAccessibilityProps
+    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>
+        )}
+      </>
     );
   }
 }

package/bpk-react-utils/package.json

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

package/bpk-react-utils/src/Portal.js

@@ -208,7 +208,7 @@ class Portal extends Component {
       this.portalElement.className = this.props.className;
     }
     this.setState({ isVisible: true }, () =>
-      this.props.onOpen(this.portalElement),
+      this.props.onOpen(this.portalElement, this.getTargetElement()),
     );
   }
 

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "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": "^6.0.0"
+    "bpk-react-utils": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",