npm - @skyscanner/backpack-web - Versions diffs - 18.2.0 → 19.0.0 - Mend

@skyscanner/backpack-web 18.2.0 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { Component, type Node } from 'react';
+import { Component, Children, cloneElement } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
@@ -159,7 +160,7 @@ class BpkHorizontalNav extends Component<Props> {
     let children = rawChildren;
     if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
-      children = React.Children.map(rawChildren, (child) => {
+      children = Children.map(rawChildren, (child) => {
         const childProps = {};
         let childRef;
         if (autoScrollToSelected) {
@@ -175,7 +176,7 @@ class BpkHorizontalNav extends Component<Props> {
         }
         return child ? (
-          <div ref={childRef}>{React.cloneElement(child, childProps)}</div>
+          <div ref={childRef}>{cloneElement(child, childProps)}</div>
         ) : null;
       });
     }

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js CHANGED Viewed

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
-import React, { Component, type Node } from 'react';
+import { Component } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-icon/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Basic usage
 ```js
-import React from 'react';
 import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
 import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';
@@ -39,7 +38,6 @@ export default () => (
 ### Aligning to BpkButton components
 ```js
-import React from 'react';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
 import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';
@@ -63,7 +61,6 @@ export default () => (
 ### RTL support
 ```js
-import React from 'react';
 import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';

package/bpk-component-icon/src/classNameModifierHOCFactory.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { wrapDisplayName } from '../../bpk-react-utils';

package/bpk-component-icon/src/withAlignment.js CHANGED Viewed

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 import { wrapDisplayName } from '../../bpk-react-utils';
 export default function withAlignment(Component, objectHeight, subjectHeight) {

package/bpk-component-icon/src/withDescription.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React, { type AbstractComponent } from 'react';
+import type { AbstractComponent } from 'react';
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';

package/bpk-component-image/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkImage from '@skyscanner/backpack-web/bpk-component-image';
 import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-image/src/BpkBackgroundImage.js CHANGED Viewed

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
-import React, { type Node, Component } from 'react';
+import { Component } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-image/src/BpkImage.js CHANGED Viewed

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
-import React, { type Node, Component } from 'react';
+import { Component } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-image/src/withLazyLoading.js CHANGED Viewed

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
-import React, { type Node, type ComponentType } from 'react';
+import type { Node, ComponentType } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
@@ -33,10 +34,10 @@ type WithLazyLoadingState = {
 };
 export default function withLazyLoading(
-  Component: ComponentType<any>,
+  WrappedComponent: ComponentType<any>,
   documentRef: typeof window,
 ): ComponentType<any> {
-  class WithLazyLoading extends React.Component<
+  class WithLazyLoading extends Component<
     WithLazyLoadingProps,
     WithLazyLoadingState,
   > {
@@ -171,12 +172,15 @@ export default function withLazyLoading(
           className={className}
         >
           {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-          <Component inView={this.state.inView} {...rest} />
+          <WrappedComponent inView={this.state.inView} {...rest} />
         </div>
       );
     }
   }
-  WithLazyLoading.displayName = wrapDisplayName(Component, 'withLazyLoading');
+  WithLazyLoading.displayName = wrapDisplayName(
+    WrappedComponent,
+    'withLazyLoading',
+  );
   return WithLazyLoading;
 }

package/bpk-component-image/src/withLoadingBehavior.js CHANGED Viewed

@@ -17,7 +17,8 @@
  */
 /* @flow */
-import React, { type AbstractComponent } from 'react';
+import { Component } from 'react';
+import type { AbstractComponent } from 'react';
 import { wrapDisplayName } from '../../bpk-react-utils';
@@ -27,9 +28,9 @@ type InjectedProps = {|
 |};
 export default function withLoadingBehavior<Config>(
-  Component: AbstractComponent<{| ...Config, ...InjectedProps |}>,
+  WrappedComponent: AbstractComponent<{| ...Config, ...InjectedProps |}>,
 ): AbstractComponent<Config> {
-  class WithLoadingBehavior<C: Config> extends React.Component<
+  class WithLoadingBehavior<C: Config> extends Component<
     C,
     {| loading: boolean |},
   > {
@@ -49,7 +50,7 @@ export default function withLoadingBehavior<Config>(
     render() {
       return (
-        <Component
+        <WrappedComponent
           onLoad={this.onLoad}
           loading={this.state.loading}
           {...this.props}
@@ -58,7 +59,7 @@ export default function withLoadingBehavior<Config>(
     }
   }
   WithLoadingBehavior.displayName = wrapDisplayName(
-    Component,
+    WrappedComponent,
     'withLoadingBehavior',
   );

package/bpk-component-infinite-scroll/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import PropTypes from 'prop-types';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import BpkSpinner, { SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
@@ -104,7 +103,6 @@ used by subclasses to tell the `InfiniteScroll` component it should refresh
 its data.
 ```js
-import React from 'react';
 import PropTypes from 'prop-types';
 import withInfiniteScroll, { DataSource } from '@skyscanner/backpack-web/bpk-component-infinite-scroll';

package/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { Component } from 'react';
+import { Component, Fragment } from 'react';
 import withInfiniteScroll from './withInfiniteScroll';
 import { ArrayDataSource } from './DataSource';
@@ -64,7 +64,7 @@ List.defaultProps = {
 const InfiniteList = withInfiniteScroll(List);
 (() => (
-  <React.Fragment>
+  <Fragment>
     {/* $FlowExpectedError[prop-missing] */}
     <InfiniteList dataSource={new ArrayDataSource([])} />
@@ -98,5 +98,5 @@ const InfiniteList = withInfiniteScroll(List);
       )}
       seeMoreAfter={5}
     />
-  </React.Fragment>
+  </Fragment>
 ))();

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js CHANGED Viewed

@@ -18,12 +18,8 @@
 /* @flow strict */
-import React, {
-  Component,
-  type Element,
-  type Config,
-  type AbstractComponent,
-} from 'react';
+import { Component } from 'react';
+import type { Element, Config, AbstractComponent } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import extend from 'lodash/extend';

package/bpk-component-input/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from '@skyscanner/backpack-web/bpk-component-input';
 export default () => (
@@ -72,7 +71,6 @@ You can still attach custom handlers for these events as they will still be call
 | hasTouchSupport | bool                 | false     | (feature detection) |
 ```js
-import React from 'react';
 import BpkInput, { withOpenEvents } from '@skyscanner/backpack-web/bpk-component-input';
 import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';

package/bpk-component-input/src/BpkClearButton.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import ClearIcon from '../../bpk-component-icon/sm/close-circle';
 import { withButtonAlignment } from '../../bpk-component-icon';

package/bpk-component-input/src/BpkInput.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-input/src/withOpenEvents.js CHANGED Viewed

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
@@ -45,7 +45,7 @@ const withEventHandler = (fn, eventHandler) => (e) => {
 };
 const withOpenEvents = (InputComponent) => {
-  class WithOpenEvents extends React.Component {
+  class WithOpenEvents extends Component {
     constructor(props) {
       super(props);

package/bpk-component-label/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 export default () => (

package/bpk-component-label/src/BpkLabel.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-link/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
 export default () => (

package/bpk-component-link/src/BpkButtonLink.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-link/src/BpkLink.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-list/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkList, BpkListItem } from '@skyscanner/backpack-web/bpk-component-list';
 export default () => (

package/bpk-component-list/src/BpkList.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-list/src/BpkListItem.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-loading-button/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
 import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
 import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';

package/bpk-component-loading-button/src/BpkLoadingButton.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
 import BpkButton from '../../bpk-component-button';
 import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';

package/bpk-component-map/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 import LandmarkIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/landmark';
@@ -61,7 +60,6 @@ export default () => (
 Price markers are used to display clickable prices on a map.
 ```js
-import React from 'react';
 import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from '@skyscanner/backpack-web/bpk-component-map';
 export default () => (
@@ -103,7 +101,6 @@ export default () => (
 If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript in this HOC, as it ensures that script will not be re-downloaded every time it's used.
 ```js
-import React from 'react';
 import BpkMap, { withGoogleMapsScript } from '@skyscanner/backpack-web/bpk-component-map';
 const BpkMapWithScript = withGoogleMapsScript(BpkMap);

package/bpk-component-map/src/BpkBasicMapMarker.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import BpkOverlayView from './BpkOverlayView';

package/bpk-component-map/src/BpkIconMarker.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-map/src/BpkIconMarkerBackground.js CHANGED Viewed

@@ -18,8 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import STYLES from './BpkIconMarkerBackground.module.scss';

package/bpk-component-map/src/BpkMap.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
-import React, { type Node, useCallback, useRef } from 'react';
+import type { Node } from 'react';
+import { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { GoogleMap } from '@react-google-maps/api';

package/bpk-component-map/src/BpkOverlayView.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { OverlayView } from '@react-google-maps/api';

package/bpk-component-map/src/BpkPriceMarker.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-map/src/DefaultLoadingElement.js CHANGED Viewed

@@ -17,8 +17,6 @@
  */
 /* @flow strict */
-import React from 'react';
 import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-map/src/withGoogleMapsScript.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React, { type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { useJsApiLoader } from '@react-google-maps/api';

package/bpk-component-mobile-scroll-container/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
 import BpkMobileScrollContainer from '@skyscanner/backpack-web/bpk-component-mobile-scroll-container';

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js CHANGED Viewed

@@ -20,7 +20,8 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import React, { Component, type Node } from 'react';
+import type { Node } from 'react';
+import { Component } from 'react';
 import { cssModules, isRTL } from '../../bpk-react-utils';

package/bpk-component-modal/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkModal from '@skyscanner/backpack-web/bpk-component-modal';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';

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

@@ -19,7 +19,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { withScrim } from '../../bpk-scrim-utils';
 import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';

package/bpk-component-modal/src/BpkModalInner.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';

package/bpk-component-navigation-bar/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### BpkNavigationBar
 ```js
-import React from 'react';
 import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
@@ -55,7 +54,6 @@ export default () => (
 ### BpkNavigationBarIconButton
 ```js
-import React from 'react';
 import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
 import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
@@ -86,7 +84,6 @@ export default () => (
 ### BpkNavigationBarButtonLink
 ```js
-import React from 'react';
 import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 export default () => (

package/bpk-component-navigation-bar/src/BpkNavigationBar.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
+import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';
@@ -39,7 +40,7 @@ export type Props = {
 const cloneWithClass = (elem: Element<any>, newStyle: string) => {
   const className = getClassNames(elem.props.className, newStyle);
-  return React.cloneElement(elem, { ...elem.props, className });
+  return cloneElement(elem, { ...elem.props, className });
 };
 const BpkNavigationBar = (props: Props) => {

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here