@skyscanner/backpack-web 18.2.0 → 19.0.0

package/bpk-animate-height/README.md

@@ -15,7 +15,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 
 ```js
 import AnimateHeight from '@skyscanner/backpack-web/bpk-animate-height';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 class AnimateHeightContainer extends Component {
   constructor() {

package/bpk-animate-height/src/AnimateHeight.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 // IE11 doesn't support `Number.isNaN` so we must use the global.
 // When IE11 support drops we can migrate.

package/bpk-component-accordion/README.md

@@ -13,7 +13,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 The `withSingleItemAccordionState` higher-order component is used to limit one section to be expanded at any time.
 
 ```js
-import React from 'react';
 import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from '@skyscanner/backpack-web/bpk-component-accordion';
 
 const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
@@ -38,7 +37,6 @@ export default () => (
 The `withAccordionItemState` higher-order component is used to allow multiple items to be expanded simultaneously.
 
 ```js
-import React from 'react';
 import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from '@skyscanner/backpack-web/bpk-component-accordion';
 
 const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
@@ -63,7 +61,6 @@ export default () => (
 `BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://skyscanner.design/latest/components/alignment/web.html)
 
 ```js
-import React from 'react';
 import { BpkAccordion, BpkAccordionItem } from '@skyscanner/backpack-web/bpk-component-accordion';
 import { withAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
 import StopsIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/stops';

package/bpk-component-accordion/src/BpkAccordion.js

@@ -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-accordion/src/BpkAccordionItem.js

@@ -19,7 +19,8 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
+import { cloneElement } from 'react';
 
 import AnimateHeight from '../../bpk-animate-height';
 import { withButtonAlignment } from '../../bpk-component-icon';
@@ -72,7 +73,7 @@ const BpkAccordionItem = (props: Props) => {
 
   const contentId = `${id}_content`;
   const clonedIcon = icon
-    ? React.cloneElement(icon, {
+    ? cloneElement(icon, {
         className: getClassName('bpk-accordion__leading-icon'),
       })
     : null;

package/bpk-component-accordion/src/withAccordionItemState.js

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

package/bpk-component-accordion/src/withSingleItemAccordionState.js

@@ -19,14 +19,8 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, {
-  Component,
-  Children,
-  cloneElement,
-  type Node,
-  type Element,
-  type ComponentType,
-} from 'react';
+import { Component, Children, cloneElement } from 'react';
+import type { Node, Element, ComponentType } from 'react';
 
 import { wrapDisplayName } from '../../bpk-react-utils';
 

package/bpk-component-aria-live/README.md

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

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import type { ReactElement } from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-autosuggest/README.md

@@ -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 BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';

package/bpk-component-autosuggest/src/BpkAutosuggest.js

@@ -18,7 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
 import Autosuggest from 'react-autosuggest';
 
 import BpkInput from '../../bpk-component-input';

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -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-badge/README.md

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

package/bpk-component-badge/src/BpkBadge.js

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

package/bpk-component-banner-alert/README.md

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### Default
 
 ```js
-import React from 'react';
 import BpkBannerAlert, { ALERT_TYPES } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 
 export default () => (
@@ -25,7 +24,7 @@ export default () => (
 ### Dismissable
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { ALERT_TYPES, BpkBannerAlertDismissable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 
 class DismissableBpkBannerAlert extends Component {
@@ -65,7 +64,7 @@ export default () => (
 ### withBannerAlertState(BpkBannerAlert)
 
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 
 const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);

package/bpk-component-banner-alert/src/AnimateAndFade.js

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

package/bpk-component-banner-alert/src/BpkBannerAlert.js

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 /* @flow strict */
-import React from 'react';
-
 import {
-  type CommonProps,
+  CommonProps,
   COMMON_PROP_TYPES,
   COMMON_DEFAULT_PROPS,
 } from './common-types';

package/bpk-component-banner-alert/src/BpkBannerAlertDismissable.js

@@ -18,7 +18,6 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import {
   type CommonProps,

package/bpk-component-banner-alert/src/BpkBannerAlertExpandable.js

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

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -22,7 +22,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { type Node, type StatelessFunctionalComponent } from 'react';
+import type { Node, StatelessFunctionalComponent } from 'react';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import { withButtonAlignment } from '../../bpk-component-icon';

package/bpk-component-banner-alert/src/withBannerAlertState.js

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

package/bpk-component-barchart/README.md

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

package/bpk-component-barchart/src/BpkBarchart.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { scaleLinear, scaleBand } from 'd3-scale';
 import {
   spacingXs,

package/bpk-component-barchart/src/BpkBarchartBar.js

@@ -18,7 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

package/bpk-component-barchart/src/BpkBarchartBars.js

@@ -18,7 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import PropTypes from 'prop-types';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-barchart/src/BpkBarchartDefs.js

@@ -18,8 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
-
 const GRADIENT_ATTRIBUTES = {
   x1: 0,
   y1: 0,

package/bpk-component-barchart/src/BpkChartAxis.js

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

package/bpk-component-barchart/src/BpkChartDataTable.js

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

package/bpk-component-barchart/src/BpkChartGridLines.js

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

package/bpk-component-barchart/src/BpkChartMargin.js

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

package/bpk-component-blockquote/README.md

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

package/bpk-component-blockquote/src/BpkBlockquote.js

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

package/bpk-component-breadcrumb/README.md

@@ -8,7 +8,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 BpkBreadcrumb, { BpkBreadcrumbItem } from '@skyscanner/backpack-web/bpk-component-breadcrumb';
 
 

package/bpk-component-breadcrumb/src/BpkBreadcrumb.js

@@ -19,7 +19,8 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import { Component, Fragment } from 'react';
+import type { Node } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
@@ -60,7 +61,7 @@ const buildMetaData = (schemaMetaData: SchemaMetaDataItem[]): string => {
   });
 };
 
-class BpkBreadcrumb extends React.Component<Props> {
+class BpkBreadcrumb extends Component<Props> {
   metaData: ?string;
 
   static defaultProps = {
@@ -77,7 +78,7 @@ class BpkBreadcrumb extends React.Component<Props> {
     const { children, label, schemaMetaData, ...rest } = this.props;
 
     return (
-      <React.Fragment>
+      <Fragment>
         {this.metaData && (
           <script
             type="application/ld+json"
@@ -89,7 +90,7 @@ class BpkBreadcrumb extends React.Component<Props> {
         <nav aria-label={label} {...rest}>
           <ol className={getClassName('bpk-breadcrumb')}>{children}</ol>
         </nav>
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 
 import BpkLink from '../../bpk-component-link';
 import BpkText from '../../bpk-component-text';

package/bpk-component-breakpoint/README.md

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

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import MediaQuery from 'react-responsive';
 import TOKENS from '@skyscanner/bpk-foundations-web/tokens/breakpoints.common';
 

package/bpk-component-button/README.md

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

package/bpk-component-button/src/BpkButton.js

@@ -18,7 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 // eslint-disable-next-line import/no-cycle

package/bpk-component-button/src/BpkButtonBase.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, propTypes, defaultProps } from './common-types';
+import { Props, propTypes, defaultProps } from './common-types';
 import COMMON_STYLES from './BpkButtonBase.module.scss';
 
 // This was originally depended upon from the bpk-react-utils package, however

package/bpk-component-button/src/BpkButtonDestructive.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonDestructive.module.scss';
 

package/bpk-component-button/src/BpkButtonFeatured.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonFeatured.module.scss';
 

package/bpk-component-button/src/BpkButtonLink.js

@@ -18,13 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import {
-  type Props as CommonProps,
-  defaultProps,
-  propTypes,
-} from './common-types';
+import { Props as CommonProps, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonLink.module.scss';
 

package/bpk-component-button/src/BpkButtonLinkOnDark.js

@@ -18,13 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import {
-  type Props as CommonProps,
-  defaultProps,
-  propTypes,
-} from './common-types';
+import { Props as CommonProps, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonLinkOnDark.module.scss';
 

package/bpk-component-button/src/BpkButtonOutline.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonOutline.module.scss';
 

package/bpk-component-button/src/BpkButtonPrimary.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase from './BpkButtonBase';
 
 // TODO: BpkButtonBase has the primary button style as it wasn't removed to

package/bpk-component-button/src/BpkButtonPrimaryOnDark.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonPrimaryOnDark.module.scss';
 

package/bpk-component-button/src/BpkButtonPrimaryOnLight.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonPrimaryOnLight.module.scss';
 

package/bpk-component-button/src/BpkButtonSecondary.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonSecondary.module.scss';
 

package/bpk-component-button/src/BpkButtonSecondaryOnDark.js

@@ -18,9 +18,7 @@
 
 /* @flow strict */
 
-import React from 'react';
-
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonSecondaryOnDark.module.scss';
 

package/bpk-component-button/src/commonButtonTests.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 
 const commonButtonTests = (ButtonToTest) => {

package/bpk-component-calendar/README.md

@@ -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 BpkCalendar from '@skyscanner/backpack-web/bpk-component-calendar';
 import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';
 import format from 'date-fns/format';

package/bpk-component-calendar/src/BpkCalendarContainer.js

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

package/bpk-component-calendar/src/BpkCalendarDate.js

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