@skyscanner/backpack-web 7.1.0 → 9.0.0

package/bpk-component-popover/README.md

@@ -20,6 +20,7 @@ class App extends Component {
   constructor() {
     super();
 
+    this.ref = React.createRef();
     this.state = {
       isOpen: false,
     };
@@ -38,14 +39,21 @@ class App extends Component {
     });
   }
 
+  const target = (
+    <div ref={this.ref} className={'my-popover-target'}>
+      <BpkButton
+        onClick={this.openPopover}>
+          Open
+      </BpkButton>
+    </div>
+  )
+
   render() {
     return (
       <div id="popover-container">
         <BpkPopover
           id="my-popover"
-          target={
-            <BpkButton onClick={this.openPopover}>Open</BpkButton>
-          }
+          target={target}
           onClose={this.closePopover}
           isOpen={this.state.isOpen}
           label="My popover"
@@ -120,6 +128,10 @@ const onClose = (event, {
 
 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 popover to overflow the viewport etc.
 
+#### target
+
+`target` can be a DOM element with a `ref` attached to it or a function that returns a DOM element.
+
 ## Theme Props
 
 * `linkColor`

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "6.0.1",
+  "version": "8.0.0",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,19 +17,19 @@
     "@popperjs/core": "^2.11.5",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.13",
-    "bpk-component-link": "^3.1.12",
-    "bpk-component-text": "^7.0.6",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-component-close-button": "^4.0.0",
+    "bpk-component-link": "^4.0.0",
+    "bpk-component-text": "^8.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-content-container": "^5.0.6",
-    "bpk-component-input": "^6.1.18"
+    "bpk-component-button": "^7.0.0",
+    "bpk-component-content-container": "^6.0.0",
+    "bpk-component-input": "^7.0.0"
   }
 }

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -83,7 +83,6 @@ class BpkPopoverPortal extends Component<Props> {
 
     this.popper = null;
     this.previousTargetElement = null;
-    this.ref = React.createRef();
   }
 
   onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
@@ -217,16 +216,9 @@ class BpkPopoverPortal extends Component<Props> {
       classNames.push(portalClassName);
     }
 
-    const targetElement =
-      typeof target === 'function' ? (
-        target
-      ) : (
-        <div ref={this.ref}>{target}</div>
-      );
-
     return (
       <>
-        {typeof targetElement !== 'function' && targetElement}
+        {typeof target !== 'function' && target}
         <Portal
           beforeClose={this.beforeClose}
           className={classNames.join(' ')}
@@ -235,7 +227,7 @@ class BpkPopoverPortal extends Component<Props> {
           onRender={this.onRender}
           style={portalStyle}
           renderTarget={renderTarget}
-          target={targetElement}
+          target={target}
         >
           {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
           <BpkPopover onClose={this.onClose} {...rest} />

package/bpk-component-price/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-price",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Backpack price component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,12 +13,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-text": "^7.0.6",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-component-text": "^8.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-progress",
-  "version": "3.1.12",
+  "version": "4.0.0",
   "description": "Backpack progress bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-component-button": "^7.0.0",
+    "bpk-storybook-utils": "^2.0.0"
   }
 }

package/bpk-component-radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-radio",
-  "version": "3.1.13",
+  "version": "4.0.0",
   "description": "Backpack radio button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.11"
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-storybook-utils": "^2.0.0"
   }
 }

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "5.0.3",
+  "version": "6.0.0",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.6"
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-component-text": "^8.0.0"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rtl-toggle",
-  "version": "3.1.12",
+  "version": "4.0.0",
   "description": "Backpack RTL toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.12",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-component-link": "^4.0.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.2.1",
+  "version": "7.0.0",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.2.1",
-    "bpk-component-text": "^7.0.6",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-component-calendar": "^12.0.0",
+    "bpk-component-text": "^8.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-virtualized": "^9.22.3"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-storybook-utils": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.13",
+  "version": "4.0.0",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-component-text": "^7.0.6",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-component-icon": "^10.0.0",
+    "bpk-component-text": "^8.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-storybook-utils": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "5.1.12",
+  "version": "6.0.0",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,14 +14,14 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-storybook-utils": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-skip-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "2.1.12",
+  "version": "3.0.0",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -10,11 +10,11 @@
   "author": "Backpack Design System <backpack@skyscanner.net>",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   },
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
   "publishConfig": {

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.12",
+  "version": "4.0.0",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.12"
+    "bpk-component-rtl-toggle": "^4.0.0"
   }
 }

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.12",
+  "version": "6.0.0",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-svgs": "^14.1.9",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "@skyscanner/bpk-svgs": "^14.3.4",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-split-input",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Backpack split-input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,12 +13,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-input": "^6.1.18",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-component-input": "^7.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

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

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

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.13",
+  "version": "3.0.0",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.12",
+  "version": "4.0.0",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "7.0.6",
+  "version": "8.0.0",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-textarea/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.13",
+  "version": "4.0.0",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,14 +14,14 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-label": "^5.1.12",
-    "bpk-component-select": "^5.1.12",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-component-label": "^6.0.0",
+    "bpk-component-select": "^6.0.0",
+    "bpk-mixins": "^31.2.0",
+    "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-component-ticket/package.json

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