@skyscanner/backpack-web 18.2.1 → 20.0.0

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -17,12 +17,12 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 
 import BpkInput, { withOpenEvents } from '../../bpk-component-input';
 import BpkModal from '../../bpk-component-modal';
 import BpkPopover from '../../bpk-component-popover';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
 import {
   composeCalendar,
@@ -58,7 +58,7 @@ class BpkDatepicker extends Component {
     this.state = {
       isOpen: props.isOpen,
     };
-    this.inputRef = React.createRef();
+    this.inputRef = createRef();
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -319,10 +319,6 @@ BpkDatepicker.propTypes = {
   // Optional
   calendarComponent: PropTypes.elementType,
   inputComponent: PropTypes.elementType,
-  date: deprecated(
-    PropTypes.instanceOf(Date),
-    'Use selectionConfiguration to set date',
-  ),
   dateModifiers: CustomPropTypes.DateModifiers,
   fixedWidth: PropTypes.bool,
   inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -334,11 +330,6 @@ BpkDatepicker.propTypes = {
   onOpenChange: PropTypes.func,
   onMonthChange: PropTypes.func,
   selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-  // eslint-disable-next-line react/require-default-props
-  showWeekendSeparator: deprecated(
-    PropTypes.bool,
-    'The showWeekendSeparator prop in Week is now deprecated as no longer part of the calendar, so is no longer required',
-  ),
   initiallyFocusedDate: PropTypes.instanceOf(Date),
   renderTarget: PropTypes.func,
   isOpen: PropTypes.bool,
@@ -351,7 +342,6 @@ BpkDatepicker.propTypes = {
 BpkDatepicker.defaultProps = {
   calendarComponent: DefaultCalendar,
   inputComponent: null,
-  date: null,
   dateModifiers: DefaultCalendar.defaultProps.dateModifiers,
   inputProps: {},
   fixedWidth: true,

package/bpk-component-description-list/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 { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from '@skyscanner/backpack-web/bpk-component-description-list';
 
 export default () => (

package/bpk-component-description-list/src/ComponentFactory.js

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

package/bpk-component-dialog/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 BpkDialog from '@skyscanner/backpack-web/bpk-component-dialog';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 

package/bpk-component-dialog/src/BpkDialog.js

@@ -18,8 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
-
 import { cssModules, Portal } from '../../bpk-react-utils';
 import BpkCloseButton from '../../bpk-component-close-button';
 

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -18,8 +18,6 @@
 
 /* @flow strict */
 
-import React from 'react';
-
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 import { withScrim } from '../../bpk-scrim-utils';
 import { BpkContentBubble } from '../../bpk-component-flare';

package/bpk-component-drawer/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 BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 

package/bpk-component-drawer/src/BpkDrawer.js

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

package/bpk-component-drawer/src/BpkDrawerContent.js

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

package/bpk-component-fieldset/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 BpkFieldset from '@skyscanner/backpack-web/bpk-component-fieldset';
 import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';
 

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -18,7 +18,8 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { cloneElement, type Element } from 'react';
+import type { Element } from 'react';
+import { cloneElement } from 'react';
 
 import BpkLabel from '../../bpk-component-label';
 import BpkFormValidation from '../../bpk-component-form-validation';

package/bpk-component-flare/README.md

@@ -13,7 +13,6 @@ Note that the default background color is white. You will need to apply a custom
 ### React components
 
 ```js
-import React from 'react';
 import { BpkContentBubble } from '@skyscanner/backpack-web/bpk-component-flare';
 
 export default MyComponent = () => (

package/bpk-component-flare/src/BpkContentBubble.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-flare/src/BpkFlareBar.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-flare/src/svgs/pointer.svg

@@ -1 +1 @@
-<svg viewBox="0 0 14832 55"><path d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"/></svg>
+<svg viewBox="0 0 14832 55"><path d="m7501.307 8.517-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 0 0-29.364 8.517z"/></svg>

package/bpk-component-floating-notification/README.md

@@ -7,7 +7,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React from 'react';
 import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
 import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';
 

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -18,7 +18,7 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, ReactElement } from 'react';
+import { useEffect, useState, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import BpkAriaLive from '../../bpk-component-aria-live';

package/bpk-component-form-validation/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 BpkFormValidation from '@skyscanner/backpack-web/bpk-component-form-validation';
 
 export default () => (

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 import {
   lineHeightSm,
   iconSizeSm,

package/bpk-component-graphic-promotion/README.md

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

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from '../../bpk-react-utils';
@@ -34,7 +34,7 @@ const ACCESSIBILITY_KEYS = {
   Space: 32 /* Space */,
 };
 
-const isAccessibilityClick = (event: React.KeyboardEvent<HTMLElement>) =>
+const isAccessibilityClick = (event: KeyboardEvent<HTMLElement>) =>
   Object.keys(ACCESSIBILITY_KEYS).includes(event.key) ||
   Object.values(ACCESSIBILITY_KEYS).includes(event.keyCode || event.which);
 
@@ -103,11 +103,11 @@ const BpkGraphicPromo = ({
   textAlign,
 }: Props) => {
   // FIXME: Use useCallback() here when React is updated.
-  const onClickWrapper = (event: React.MouseEvent<HTMLElement>) => {
+  const onClickWrapper = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     onClick();
   };
-  const onKeyWrapper = (event: React.KeyboardEvent<HTMLElement>) =>
+  const onKeyWrapper = (event: KeyboardEvent<HTMLElement>) =>
     isAccessibilityClick(event) && onClick();
 
   const cardClasses = getClassName('bpk-card', 'bpk-graphic-promo', className);

package/bpk-component-grid-toggle/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 BpkGridToggle from '@skyscanner/backpack-web/bpk-component-grid-toggle';
 
 export default () => (

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Component } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
@@ -28,7 +28,7 @@ const getClassName = cssModules(STYLES);
 
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
 
-class BpkGridToggle extends React.Component {
+class BpkGridToggle extends Component {
   constructor(props) {
     super(props);
 

package/bpk-component-horizontal-nav/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 BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
 
 export default class App extends Component {

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

@@ -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

@@ -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

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

@@ -36,11 +36,7 @@ function withLargeButtonAlignment(WrappedComponent) {
   return withAlignment(WrappedComponent, buttonLargeLineHeight, iconSizeLg);
 }
 
-// alias to maintain backwards compat, can be deprecated in due course
-// alias to maintain backwards compat, can be deprecated in due course
 export {
-  withButtonAlignment as alignToButton,
-  withLargeButtonAlignment as alignToLargeButton,
   withButtonAlignment,
   withLargeButtonAlignment,
   withAlignment,

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -17,15 +17,15 @@
  */
 /* @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';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { BpkSpinner } from '../../bpk-component-spinner';
 
-import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkBackgroundImage.module.scss';
 
 const getClassName = cssModules(STYLES);
@@ -33,11 +33,9 @@ const getClassName = cssModules(STYLES);
 export type BpkBackgroundImageProps = {
   children: Node,
   aspectRatio: ?number,
-  height: ?number,
   inView: boolean,
   loading: boolean,
   src: string,
-  width: ?number,
   className: ?string,
   onLoad: ?() => mixed,
   style: ?{},
@@ -54,15 +52,7 @@ class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
   onBackgroundImageLoad: () => mixed;
 
   static propTypes = {
-    aspectRatio: widthHeightAspectRatioPropType,
-    height: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
-    width: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
+    aspectRatio: PropTypes.number.isRequired,
     src: PropTypes.string.isRequired,
     className: PropTypes.string,
     inView: PropTypes.bool,
@@ -73,9 +63,6 @@ class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
   };
 
   static defaultProps = {
-    width: null,
-    height: null,
-    aspectRatio: null,
     className: null,
     inView: true,
     loading: false,
@@ -112,9 +99,6 @@ class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
     if (this.props.aspectRatio) {
       return this.props.aspectRatio;
     }
-    if (this.props.width && this.props.height) {
-      return this.props.width / this.props.height;
-    }
     return 1;
   };
 

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

@@ -17,15 +17,15 @@
  */
 /* @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';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { BpkSpinner } from '../../bpk-component-spinner';
 
-import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkImage.module.scss';
 import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';
 
@@ -92,11 +92,9 @@ class Image extends Component<ImageProps> {
 type BpkImageProps = {
   altText: string,
   aspectRatio: ?number,
-  height: ?number,
   inView: boolean,
   loading: boolean,
   src: string,
-  width: ?number,
   borderRadiusStyle: $Keys<typeof BORDER_RADIUS_STYLES>,
   className: ?string,
   onLoad: ?() => mixed,
@@ -112,7 +110,7 @@ class BpkImage extends Component<BpkImageProps> {
   static propTypes = {
     altText: PropTypes.string.isRequired,
     src: PropTypes.string.isRequired,
-    aspectRatio: widthHeightAspectRatioPropType,
+    aspectRatio: PropTypes.number.isRequired,
     borderRadiusStyle: PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
     className: PropTypes.string,
     inView: PropTypes.bool,
@@ -120,27 +118,16 @@ class BpkImage extends Component<BpkImageProps> {
     onLoad: PropTypes.func,
     style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     suppressHydrationWarning: PropTypes.bool,
-    height: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
-    width: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
   };
 
   static defaultProps = {
-    aspectRatio: null,
     borderRadiusStyle: BORDER_RADIUS_STYLES.none,
     className: null,
-    height: null,
     inView: true,
     loading: false,
     onLoad: null,
     style: {},
     suppressHydrationWarning: false,
-    width: null,
   };
 
   onImageLoad = (): void => {
@@ -153,9 +140,6 @@ class BpkImage extends Component<BpkImageProps> {
     if (this.props.aspectRatio) {
       return this.props.aspectRatio;
     }
-    if (this.props.width && this.props.height) {
-      return this.props.width / this.props.height;
-    }
     return 1;
   };
 
@@ -165,12 +149,10 @@ class BpkImage extends Component<BpkImageProps> {
       aspectRatio,
       borderRadiusStyle,
       className,
-      height,
       inView,
       loading,
       onLoad,
       style,
-      width,
       ...rest
     } = this.props;
 

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

@@ -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

@@ -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',
   );