@skyscanner/backpack-web 7.0.0 → 8.0.1

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

@@ -18,11 +18,11 @@
 
 /* @flow strict */
 
-import { createPopper, basePlacements } from '@popperjs/core';
+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,
@@ -67,7 +67,7 @@ class BpkTooltipPortal extends Component<Props, State> {
     ariaLabel: PropTypes.string.isRequired,
     target: PropTypes.node.isRequired,
     children: PropTypes.node.isRequired,
-    placement: PropTypes.oneOf(basePlacements),
+    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
     hideOnTouchDevices: PropTypes.bool,
     portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     portalClassName: PropTypes.string,
@@ -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.13",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,8 +16,8 @@
   "dependencies": {
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0"
+    "bpk-mixins": "^31.1.6",
+    "bpk-react-utils": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-theming",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.2.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "7.0.0",
+  "version": "8.0.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "@skyscanner/bpk-svgs": "^14.1.9",
+    "@skyscanner/bpk-foundations-web": "^8.2.1",
+    "@skyscanner/bpk-svgs": "^14.3.3",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.1.1",
+    "bpk-mixins": "^31.1.6",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",