@skyscanner/backpack-web 6.1.0 → 8.0.0

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack slider 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": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.12"
+    "bpk-component-rtl-toggle": "^3.1.13"
   }
 }

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-svgs": "^14.1.9",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-split-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-split-input",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Backpack split-input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,9 +13,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-input": "^6.1.17",
+    "bpk-component-input": "^6.1.19",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.14",
+  "version": "3.1.15",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.13",
+    "bpk-component-icon": "^9.2.14",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-table": "^3.1.12",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-component-table": "^3.1.13",
+    "bpk-storybook-utils": "^1.1.12"
   }
 }

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "7.0.6",
+  "version": "7.0.7",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "4.2.12",
+  "version": "4.2.13",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.12",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-component-label": "^5.1.13",
+    "bpk-storybook-utils": "^1.1.12"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-label": "^5.1.12",
-    "bpk-component-select": "^5.1.12",
+    "bpk-component-label": "^5.1.13",
+    "bpk-component-select": "^5.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-icon": "^9.2.13"
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-icon": "^9.2.14"
   }
 }

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

@@ -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.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": "6.1.0",
+  "version": "8.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss

@@ -1,70 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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.
- */
-
-// FIXME: Replace the custom breakpoints with on es from Backpack when ready. (ST-4102)
-
-$breakpoint-landscape-desktop-min: 50.01rem;
-$breakpoint-landscape-tablet-max: 50rem;
-$breakpoint-landscape-tablet-min: 43.76rem;
-$breakpoint-portrait-large-max: 43.75rem;
-$breakpoint-portrait-large-min: 32.01rem;
-$breakpoint-portrait-medium-max: 32rem;
-$breakpoint-portrait-medium-min: 26.51rem;
-$breakpoint-portrait-small-max: 26.5rem;
-
-@mixin breakpoint-landscape-desktop {
-  @media (min-width: $breakpoint-landscape-desktop-min) {
-    @content;
-  }
-}
-
-@mixin breakpoint-landscape-tablet {
-  @media (min-width: $breakpoint-landscape-tablet-min) and (max-width: $breakpoint-landscape-tablet-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait-large {
-  @media (min-width: $breakpoint-portrait-large-min) and (max-width: $breakpoint-portrait-large-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait-medium {
-  @media (min-width: $breakpoint-portrait-medium-min) and (max-width: $breakpoint-portrait-medium-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait-small {
-  @media (max-width: $breakpoint-portrait-small-max) {
-    @content;
-  }
-}
-
-@mixin breakpoint-landscape {
-  @media (min-width: $breakpoint-landscape-tablet-min) {
-    @content;
-  }
-}
-
-@mixin breakpoint-portrait {
-  @media (max-width: $breakpoint-portrait-large-max) {
-    @content;
-  }
-}