@skyscanner/backpack-web 7.1.0 → 9.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": "9.0.0",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,15 +15,15 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "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-component-text": "^7.0.6"
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
+    "bpk-component-text": "^8.0.0"
   }
 }

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/index.js

@@ -20,7 +20,6 @@
 
 import wrapDisplayName from './src/wrapDisplayName';
 import Portal from './src/Portal';
-import PortalV1 from './src/Portal-v1';
 import TransitionInitialMount from './src/TransitionInitialMount';
 import cssModules from './src/cssModules';
 import deprecated from './src/deprecated';
@@ -34,7 +33,6 @@ import isRTL from './src/isRTL';
 
 export {
   Portal,
-  PortalV1,
   TransitionInitialMount,
   cssModules,
   deprecated,
@@ -47,7 +45,6 @@ export {
 };
 export default {
   Portal,
-  PortalV1,
   TransitionInitialMount,
   cssModules,
   deprecated,

package/bpk-react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {
@@ -19,7 +19,7 @@
     "react-transition-group": "^2.5.3"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0",
+    "react": "^17.0.2",
     "react-dom": "^16.3.0 || ^17.0.0"
   }
 }

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": "6.0.0",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,10 +16,10 @@
   "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.2.0",
+    "bpk-react-utils": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/bpk-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-theming",
-  "version": "2.1.6",
+  "version": "3.0.0",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "@skyscanner/bpk-foundations-web": "^8.3.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "7.1.0",
+  "version": "9.0.0",
   "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.3.0",
+    "@skyscanner/bpk-svgs": "^14.3.4",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.1.1",
+    "bpk-mixins": "^31.2.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",
@@ -45,6 +45,6 @@
     "react-virtualized": "^9.22.3"
   },
   "peerDependencies": {
-    "react": "^16.8.3 || ^17.0.0"
+    "react": "^17.0.2"
   }
 }

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

@@ -1,49 +0,0 @@
-# This component is deprecated and should be considered as not supported.
-# bpk-component-navigation-stack
-
-> Backpack navigation stack component.
-
-## Installation
-
-```sh
-npm install bpk-component-navigation-stack --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkNavigationStack from 'bpk-component-navigation-stack';
-
-export default () => (
-  <BpkNavigationStack views={[<div />]} />
-);
-```
-
-## Props
-
-| Property  | PropType         | Required | Default Value |
-| --------- | ---------------- | -------- | ------------- |
-| views     | arrayOf(element) | true     | -             |
-| className | string           | false    | null          |
-
-## withNavigationStackState
-
-`withNavigationStackState` returns a HOC with two instance methods, `pushView` and `popView`,
-that can be used to push and pop views from the stack component.
-
-
-```js
-import React from 'react';
-import BpkNavigationStack, { withNavigationStackState } from 'bpk-component-navigation-stack';
-
-const StatefulNavigationStack = withNavigationStackState(BpkNavigationStack);
-
-export default () => (
-  <StatefulNavigationStack initialViews={[<div />]} />
-);
-```
-
-By default the `pushView` and `popView` callbacks are forwarded to the children, if you
-want to disabled this behaviour pass `false` as the second argument, in this case the
-callbacks are forwarded to the Stack component instead.

package/bpk-component-navigation-stack/index.js

@@ -1,30 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 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.
- */
-
-/* @flow strict */
-
-import withNavigationStackState, {
-  type Props as StateProps,
-} from './src/withNavigationStackState';
-import BpkNavigationStack, { type Props } from './src/BpkNavigationStack';
-
-export type BpkNavigationStackProps = Props;
-export type StatefulBpkNavigationStackProps = StateProps;
-
-export default BpkNavigationStack;
-export { withNavigationStackState };

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

@@ -1,33 +0,0 @@
-{
-  "name": "bpk-component-navigation-stack",
-  "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"
-  },
-  "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2",
-    "react-transition-group": "^2.5.3"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "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-navigation-stack/src/BpkNavigationStack.js

@@ -1,128 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 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.
- */
-
-/* @flow strict */
-
-import React, { Children, type Element } from 'react';
-import PropTypes from 'prop-types';
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { TransitionGroup, Transition } from 'react-transition-group';
-import debounce from 'lodash/debounce';
-
-import { cssModules, isRTL } from '../../bpk-react-utils';
-
-import STYLES from './BpkNavigationStack.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-export type Views = Array<Element<any>>;
-
-export type Props = {
-  views: Views,
-  className: ?string,
-};
-
-type Transitions = 'entering' | 'leaving';
-
-type State = {
-  transition: ?Transitions,
-};
-
-class BpkNavigationStack extends React.Component<Props, State> {
-  static propTypes = {
-    views: PropTypes.arrayOf(PropTypes.element).isRequired,
-    className: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: null,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      transition: null,
-    };
-  }
-
-  onTransitionEnter = () => this.startTransition('entering');
-
-  onTransitionExit = () => this.startTransition('leaving');
-
-  startTransition = (transition: Transitions) => {
-    this.stopTransition.cancel();
-    this.setState({ transition });
-  };
-
-  stopTransition = debounce(() => {
-    this.setState({ transition: null });
-  }, parseInt(durationSm, 10) + 10);
-
-  render() {
-    const { className, views, ...rest } = this.props;
-    const { transition } = this.state;
-    const lastIndex = (views || []).length - 1;
-
-    return (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <div
-        className={getClassName('bpk-navigation-stack', className)}
-        {...rest}
-      >
-        <TransitionGroup
-          className={getClassName(
-            'bpk-navigation-stack__view-track',
-            transition &&
-              `bpk-navigation-stack__view-track--view-${transition}`,
-          )}
-          style={{
-            transform: `translateX(${
-              lastIndex === 0 ? '0%' : `${isRTL() ? '' : '-'}${lastIndex}00%`
-            })`,
-          }}
-        >
-          {Children.map(views, (view, idx) => (
-            <Transition
-              in
-              // The order of these is unlikely to change...
-              key={idx} // eslint-disable-line react/no-array-index-key
-              timeout={parseInt(durationSm, 10)}
-              unmountOnExit
-              onEnter={this.onTransitionEnter}
-              onEntered={this.stopTransition}
-              onExit={this.onTransitionExit}
-              onExited={this.stopTransition}
-            >
-              <div
-                aria-hidden={idx !== lastIndex}
-                className={getClassName(
-                  'bpk-navigation-stack__view',
-                  idx === lastIndex && 'bpk-navigation-stack__view--current',
-                )}
-              >
-                {view}
-              </div>
-            </Transition>
-          ))}
-        </TransitionGroup>
-      </div>
-    );
-  }
-}
-
-export default BpkNavigationStack;

package/bpk-component-navigation-stack/src/BpkNavigationStack.module.css

@@ -1,18 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- * 
- * Copyright 2016 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-stack{display:flex;overflow:hidden}.bpk-navigation-stack::after{content:'';min-height:inherit}.bpk-navigation-stack__view-track{display:flex;width:100%;transition:transform 200ms ease}.bpk-navigation-stack__view-track--view-entering .bpk-navigation-stack__view:nth-last-child(2){visibility:visible}.bpk-navigation-stack__view{display:flex;visibility:hidden;min-width:100%}.bpk-navigation-stack__view--current{visibility:visible}

package/bpk-component-navigation-stack/src/BpkNavigationStack.module.scss

@@ -1,51 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 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.
- */
-
-@import '~bpk-mixins/index';
-
-.bpk-navigation-stack {
-  display: flex;
-  overflow: hidden;
-
-  &::after {
-    content: '';
-    min-height: inherit;
-  }
-
-  &__view-track {
-    display: flex;
-    width: 100%;
-    transition: transform $bpk-duration-sm ease;
-
-    &--view-entering {
-      .bpk-navigation-stack__view:nth-last-child(2) {
-        visibility: visible;
-      }
-    }
-  }
-
-  &__view {
-    display: flex;
-    visibility: hidden;
-    min-width: 100%;
-
-    &--current {
-      visibility: visible;
-    }
-  }
-}

package/bpk-component-navigation-stack/src/withNavigationStackState.js

@@ -1,104 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 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.
- */
-
-/* @flow strict */
-
-import React, {
-  Component,
-  cloneElement,
-  type Element,
-  type ComponentType,
-} from 'react';
-
-import BpkNavigationStack, {
-  type Views,
-  type Props as BpkNavigationStackProps,
-} from './BpkNavigationStack';
-
-export type Props = {
-  ...$Diff<$Exact<BpkNavigationStackProps>, { views: Views }>,
-  initialViews: Views,
-};
-
-type State = {
-  views: Views,
-};
-
-export default (
-  Stack: ComponentType<any>, // TODO: Improve type
-  assignCallbacksToChildren: boolean = true,
-) => {
-  class WithNavigationStackState extends Component<Props, State> {
-    static defaultProps = {
-      ...BpkNavigationStack.defaultProps,
-    };
-
-    constructor(props: Props) {
-      super(props);
-
-      this.state = {
-        views: this.props.initialViews,
-      };
-    }
-
-    pushView = (view: Element<any>) => {
-      this.setState((prevState) => {
-        const views = prevState.views.slice();
-        views.push(view);
-
-        return {
-          views,
-        };
-      });
-    };
-
-    popView = () => {
-      this.setState((prevState) => {
-        const views = prevState.views.slice();
-        views.pop();
-
-        return {
-          views,
-        };
-      });
-    };
-
-    render() {
-      const {
-        initialViews, // unused
-        ...rest
-      } = this.props;
-
-      const callbacks = {
-        pushView: this.pushView,
-        popView: this.popView,
-      };
-
-      const [views, optionalCallbacks] = assignCallbacksToChildren
-        ? [this.state.views.map((view) => cloneElement(view, callbacks)), {}]
-        : [this.state.views, callbacks];
-
-      return (
-        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        <Stack views={views} {...optionalCallbacks} {...rest} />
-      );
-    }
-  }
-
-  return WithNavigationStackState;
-};