@skyscanner/backpack-web 4.1.0 → 6.0.0

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.16",
+  "version": "6.1.17",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.12",
+    "bpk-component-icon": "^9.2.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^6.1.16",
-    "bpk-component-label": "^5.1.11",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-banner-alert": "^6.1.17",
+    "bpk-component-label": "^5.1.12",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-label/package.json

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

package/bpk-component-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-list/package.json

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

package/bpk-component-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "6.1.6",
+  "version": "6.1.7",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-spinner": "^5.1.11",
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-spinner": "^5.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-storybook-utils": "^1.1.11"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "6.0.7",
+  "version": "6.0.8",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,18 +15,18 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
-    "bpk-component-spinner": "^5.1.11",
+    "bpk-component-spinner": "^5.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^16.8.3 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-text": "^7.0.5",
-    "bpk-storybook-utils": "^1.1.10",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-text": "^7.0.6",
+    "bpk-storybook-utils": "^1.1.11",
     "prop-types": "^15.5.8"
   }
 }

package/bpk-component-mobile-scroll-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack mobile scroll container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
   },

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.12",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-link": "^3.1.11",
-    "bpk-component-navigation-bar": "^3.1.13",
+    "bpk-component-close-button": "^3.1.13",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-link": "^3.1.12",
+    "bpk-component-navigation-bar": "^3.1.14",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "bpk-scrim-utils": "^5.1.10",
+    "bpk-react-utils": "^6.0.0",
+    "bpk-scrim-utils": "^5.1.11",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-text": "^7.0.5"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-text": "^7.0.6"
   }
 }

package/bpk-component-modal/src/BpkModal.js

@@ -19,10 +19,10 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Element } from 'react';
+import React from 'react';
 
 import { withScrim } from '../../bpk-scrim-utils';
-import { PortalV1, cssModules, isDeviceIphone } from '../../bpk-react-utils';
+import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {
@@ -50,7 +50,6 @@ export type Props = {
   closeOnScrimClick: boolean,
   closeOnEscPressed: boolean,
   renderTarget: ?() => ?HTMLElement,
-  target: ?((() => ?HTMLElement) | Element<any>),
   onClose: (event: SyntheticEvent<>) => void | null,
 };
 
@@ -64,7 +63,6 @@ const BpkModal = (props: Props) => {
     isOpen,
     onClose,
     renderTarget,
-    target,
     ...rest
   } = props;
 
@@ -79,10 +77,9 @@ const BpkModal = (props: Props) => {
   }
 
   return (
-    <PortalV1
+    <Portal
       isOpen={isOpen}
       onClose={onClose}
-      target={target}
       renderTarget={renderTarget}
       closeOnEscPressed={closeOnEscPressed}
     >
@@ -96,7 +93,7 @@ const BpkModal = (props: Props) => {
         isIphone={isIphone}
         {...rest}
       />
-    </PortalV1>
+    </Portal>
   );
 };
 
@@ -108,7 +105,6 @@ export const propTypes = {
   isIphone: PropTypes.bool,
   isOpen: PropTypes.bool.isRequired,
   renderTarget: PropTypes.func,
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   closeOnScrimClick: PropTypes.bool,
   closeOnEscPressed: PropTypes.bool,
 };
@@ -117,7 +113,6 @@ export const defaultProps = {
   ...modalDialogDefaultProps,
   onClose: () => null,
   renderTarget: null,
-  target: null,
   isIphone: isDeviceIphone(),
   closeOnScrimClick: true,
   closeOnEscPressed: true,

package/bpk-component-navigation-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.12",
-    "bpk-component-link": "^3.1.11",
-    "bpk-component-text": "^7.0.5",
+    "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": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-icon": "^9.2.13",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-navigation-stack/README.md

@@ -1,3 +1,4 @@
+# This component is deprecated and should be considered as not supported.
 # bpk-component-navigation-stack
 
 > Backpack navigation stack component.

package/bpk-component-navigation-stack/package.json

@@ -1,8 +1,9 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.13",
+  "version": "3.2.0",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
+  "private": true,
   "repository": {
     "type": "git",
     "url": "git@github.com:Skyscanner/backpack.git"
@@ -16,7 +17,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -24,9 +25,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-navigation-bar": "^3.1.13",
-    "bpk-component-rtl-toggle": "^3.1.11"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-navigation-bar": "^3.1.14",
+    "bpk-component-rtl-toggle": "^3.1.12"
   }
 }

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-icon": "^9.2.12",
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-icon": "^9.2.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -26,7 +26,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.11",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-label": "^5.1.12",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.13",
-    "bpk-component-text": "^7.0.5"
+    "bpk-component-image": "^5.1.14",
+    "bpk-component-text": "^7.0.6"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.6",
+    "bpk-component-button": "^6.2.7",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.12"
+    "bpk-component-icon": "^9.2.13"
   }
 }

package/bpk-component-panel/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.18",
+  "version": "7.1.19",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,19 +15,19 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-input": "^6.1.16",
-    "bpk-component-label": "^5.1.11",
-    "bpk-component-select": "^5.1.11",
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-input": "^6.1.17",
+    "bpk-component-label": "^5.1.12",
+    "bpk-component-select": "^5.1.12",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.18",
-    "bpk-component-image": "^5.1.13"
+    "bpk-component-fieldset": "^4.1.19",
+    "bpk-component-image": "^5.1.14"
   }
 }

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "5.0.3",
+  "version": "6.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.12",
-    "bpk-component-link": "^3.1.11",
-    "bpk-component-text": "^7.0.5",
+    "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": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-content-container": "^5.0.5",
-    "bpk-component-input": "^6.1.16"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-content-container": "^5.0.6",
+    "bpk-component-input": "^6.1.17"
   }
 }

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

@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
 
-import { PortalV1, cssModules } from '../../bpk-react-utils';
+import { Portal, cssModules } from '../../bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';
 import STYLES from './BpkPopover.module.scss';
@@ -83,6 +83,7 @@ class BpkPopoverPortal extends Component<Props> {
 
     this.popper = null;
     this.previousTargetElement = null;
+    this.ref = React.createRef();
   }
 
   onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
@@ -216,20 +217,30 @@ class BpkPopoverPortal extends Component<Props> {
       classNames.push(portalClassName);
     }
 
+    const targetElement =
+      typeof target === 'function' ? (
+        target
+      ) : (
+        <div ref={this.ref}>{target}</div>
+      );
+
     return (
-      <PortalV1
-        beforeClose={this.beforeClose}
-        className={classNames.join(' ')}
-        isOpen={isOpen}
-        onClose={this.onClose}
-        onRender={this.onRender}
-        style={portalStyle}
-        renderTarget={renderTarget}
-        target={target}
-      >
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkPopover onClose={this.onClose} {...rest} />
-      </PortalV1>
+      <>
+        {typeof targetElement !== 'function' && targetElement}
+        <Portal
+          beforeClose={this.beforeClose}
+          className={classNames.join(' ')}
+          isOpen={isOpen}
+          onClose={this.onClose}
+          onRender={this.onRender}
+          style={portalStyle}
+          renderTarget={renderTarget}
+          target={targetElement}
+        >
+          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+          <BpkPopover onClose={this.onClose} {...rest} />
+        </Portal>
+      </>
     );
   }
 }

package/bpk-component-price/README.md

@@ -12,14 +12,15 @@ npm install bpk-component-price --save-dev
 
 ```js
 import React from 'react';
-import BpkPrice, { SIZES } from 'bpk-component-price';
+import BpkPrice, { SIZES, ALIGNS } from 'bpk-component-price';
 
 export default () => (
   <BpkPrice
     size={SIZES.large}
+    align={ALIGNS.left}
     subtitle="£209"
     title="£1,830"
-    description="/ night"
+    description="a night"
   />
 );
 ```
@@ -30,6 +31,7 @@ export default () => (
 | --------- | -------- | -------- | ------------- |
 | title     | string   | true     | -             |
 | size | oneOf(SIZES)   | false    | SIZES.small         |
+| align | oneOf(ALIGNS)   | false    | ALIGNS.left         |
 | subtitle  | string   | false    | null          |
 | description | string   | false    | null          |
 | className | string   | false    | null          |

package/bpk-component-price/index.js

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
 
-import BpkPrice, { SIZES } from './src/BpkPrice';
+import BpkPrice from './src/BpkPrice';
+import { SIZES, ALIGNS } from './src/common-types';
 
 export default BpkPrice;
-export { SIZES };
+export { SIZES, ALIGNS };

package/bpk-component-price/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-price",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Backpack price component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,9 +13,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {