@skyscanner/backpack-web 42.25.0 → 42.26.0-dev-v27635015998.1

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

@@ -35,7 +35,10 @@ class BpkGridToggle extends Component {
     document.addEventListener('keydown', this.handleKeyDown);
   }
   componentWillUnmount() {
-    document.querySelector(this.props.targetContainer).classList.remove(GRID_CLASS_NAME);
+    const {
+      targetContainer = 'body'
+    } = this.props;
+    document.querySelector(targetContainer).classList.remove(GRID_CLASS_NAME);
     document.removeEventListener('keydown', this.handleKeyDown);
   }
   handleKeyDown = e => {
@@ -44,15 +47,18 @@ class BpkGridToggle extends Component {
     }
   };
   toggleGrid = e => {
+    const {
+      targetContainer = 'body'
+    } = this.props;
     e.preventDefault();
-    document.querySelector(this.props.targetContainer).classList.toggle(GRID_CLASS_NAME);
+    document.querySelector(targetContainer).classList.toggle(GRID_CLASS_NAME);
     this.setState(state => ({
       gridEnabled: !state.gridEnabled
     }));
   };
   render() {
     const {
-      className
+      className = null
     } = this.props;
     const {
       gridEnabled
@@ -73,8 +79,4 @@ BpkGridToggle.propTypes = {
   targetContainer: PropTypes.string,
   className: PropTypes.string
 };
-BpkGridToggle.defaultProps = {
-  targetContainer: 'body',
-  className: null
-};
 export default BpkGridToggle;

package/bpk-component-image/src/BpkBackgroundImage.d.ts

@@ -14,21 +14,13 @@ export type BpkBackgroundImageProps = {
 };
 declare class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
     trackImg?: HTMLImageElement | null;
-    static defaultProps: {
-        className: string;
-        inView: boolean;
-        loading: boolean;
-        onLoad: null;
-        onError: null;
-        style: {};
-        imageStyle: {};
-    };
     constructor(props: BpkBackgroundImageProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: BpkBackgroundImageProps): void;
     onBackgroundImageError: () => void;
     onBackgroundImageLoad: () => void;
     getAspectRatio: () => number;
+    spinnerNodeRef: import("react").RefObject<HTMLDivElement>;
     startImageLoad: () => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { Component, createRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
@@ -25,30 +25,27 @@ import STYLES from "./BpkBackgroundImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class BpkBackgroundImage extends Component {
-  static defaultProps = {
-    className: '',
-    inView: true,
-    loading: false,
-    onLoad: null,
-    onError: null,
-    style: {},
-    imageStyle: {}
-  };
   constructor(props) {
     super(props);
     this.trackImg = null;
   }
   componentDidMount() {
-    if (this.props.inView) {
+    const {
+      inView = true
+    } = this.props;
+    if (inView) {
       this.startImageLoad();
     }
   }
   componentDidUpdate(prevProps) {
     const {
-      inView,
+      inView = true,
       src
     } = this.props;
-    if (prevProps.src !== src || inView && !prevProps.inView) {
+    const {
+      inView: prevInView = true
+    } = prevProps;
+    if (prevProps.src !== src || inView && !prevInView) {
       this.startImageLoad();
     }
   }
@@ -69,6 +66,7 @@ class BpkBackgroundImage extends Component {
     }
     return 1;
   };
+  spinnerNodeRef = /*#__PURE__*/createRef();
   startImageLoad = () => {
     this.trackImg = new Image();
     this.trackImg.src = this.props.src;
@@ -78,12 +76,12 @@ class BpkBackgroundImage extends Component {
   render() {
     const {
       children,
-      className,
-      imageStyle,
-      inView,
-      loading,
+      className = '',
+      imageStyle = {},
+      inView = true,
+      loading = false,
       src,
-      style
+      style = {}
     } = this.props;
     const calculatedAspectRatio = this.getAspectRatio();
     const aspectRatioPc = `${100 / calculatedAspectRatio}%`;
@@ -110,12 +108,14 @@ class BpkBackgroundImage extends Component {
           },
           className: imageClassNames.join(' ')
         }), loading && /*#__PURE__*/_jsx(CSSTransition, {
+          nodeRef: this.spinnerNodeRef,
           classNames: {
             exit: getClassName('bpk-background-image__spinner--shown'),
             exitActive: getClassName('bpk-background-image__spinner--hidden')
           },
           timeout: parseInt(animations.durationBase, 10),
           children: /*#__PURE__*/_jsx("div", {
+            ref: this.spinnerNodeRef,
             className: getClassName('bpk-background-image__spinner'),
             children: /*#__PURE__*/_jsx(BpkSpinner, {})
           })

package/bpk-component-image/src/BpkImage.d.ts

@@ -18,16 +18,9 @@ type BpkImageProps = {
 };
 declare class BpkImage extends Component<BpkImageProps> {
     placeholder?: HTMLElement | null;
-    static defaultProps: {
-        borderRadiusStyle: "none";
-        inView: boolean;
-        loading: boolean;
-        onLoad: null;
-        style: {};
-        suppressHydrationWarning: boolean;
-    };
     onImageLoad: () => void;
     getAspectRatio: () => number;
+    spinnerNodeRef: import("react").RefObject<HTMLDivElement>;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export default BpkImage;

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { Component, createRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
@@ -26,9 +26,6 @@ import STYLES from "./BpkImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class Image extends Component {
-  static defaultProps = {
-    hidden: false
-  };
   constructor(props) {
     super(props);
     this.img = null;
@@ -46,7 +43,7 @@ class Image extends Component {
   render() {
     const {
       altText,
-      hidden,
+      hidden = false,
       onImageLoad,
       ...rest
     } = this.props;
@@ -64,14 +61,6 @@ class Image extends Component {
   }
 }
 class BpkImage extends Component {
-  static defaultProps = {
-    borderRadiusStyle: BORDER_RADIUS_STYLES.none,
-    inView: true,
-    loading: false,
-    onLoad: null,
-    style: {},
-    suppressHydrationWarning: false
-  };
   onImageLoad = () => {
     if (this.props.onLoad) {
       this.props.onLoad();
@@ -83,16 +72,17 @@ class BpkImage extends Component {
     }
     return 1;
   };
+  spinnerNodeRef = /*#__PURE__*/createRef();
   render() {
     const {
       altText,
       aspectRatio,
-      borderRadiusStyle,
+      borderRadiusStyle = BORDER_RADIUS_STYLES.none,
       className,
-      inView,
-      loading,
+      inView = true,
+      loading = false,
       onLoad,
-      style,
+      style = {},
       ...rest
     } = this.props;
     const classNames = [getClassName('bpk-image')];
@@ -120,19 +110,21 @@ class BpkImage extends Component {
           paddingBottom: aspectRatioPercentage
         },
         className: classNames.join(' '),
-        suppressHydrationWarning: this.props.suppressHydrationWarning,
+        suppressHydrationWarning: !!this.props.suppressHydrationWarning,
         children: [inView && /*#__PURE__*/_jsx(Image, {
           hidden: loading,
           altText: altText,
           onImageLoad: this.onImageLoad,
           ...rest
         }), loading && /*#__PURE__*/_jsx(CSSTransition, {
+          nodeRef: this.spinnerNodeRef,
           classNames: {
             exit: getClassName('bpk-image__spinner--shown'),
             exitActive: getClassName('bpk-image__spinner--hidden')
           },
           timeout: parseInt(animations.durationBase, 10),
           children: /*#__PURE__*/_jsx("div", {
+            ref: this.spinnerNodeRef,
             className: getClassName('bpk-image__spinner'),
             children: /*#__PURE__*/_jsx(BpkSpinner, {})
           })

package/bpk-component-image/src/withLazyLoading.d.ts

@@ -43,10 +43,6 @@ export default function withLazyLoading<P extends object>(WrappedComponent: Comp
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        style: {};
-        className: string;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export {};

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

@@ -22,10 +22,6 @@ import { wrapDisplayName } from "../../bpk-react-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function withLazyLoading(WrappedComponent, documentRef) {
   class WithLazyLoading extends Component {
-    static defaultProps = {
-      style: {},
-      className: ''
-    };
     constructor(props) {
       super(props);
       this.state = {
@@ -102,8 +98,8 @@ export default function withLazyLoading(WrappedComponent, documentRef) {
     };
     render() {
       const {
-        className,
-        style,
+        className = '',
+        style = {},
         ...rest
       } = this.props;
       return /*#__PURE__*/_jsx("div", {

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

@@ -49,9 +49,6 @@ const withInfiniteScroll = ComponentToExtend => class WithInfiniteScroll extends
   static propTypes = {
     ...propTypes
   };
-  static defaultProps = {
-    ...defaultProps
-  };
   constructor(props) {
     super(props);
     this.state = {
@@ -73,7 +70,7 @@ const withInfiniteScroll = ComponentToExtend => class WithInfiniteScroll extends
   componentDidMount() {
     this.props.dataSource.onDataChange(this.updateData);
     this.fetchItems({
-      elementsPerScroll: this.props.initiallyLoadedElements
+      elementsPerScroll: this.props.initiallyLoadedElements ?? defaultProps.initiallyLoadedElements
     }).then(newState => {
       this.setState(newState);
     });
@@ -87,7 +84,7 @@ const withInfiniteScroll = ComponentToExtend => class WithInfiniteScroll extends
       this.props.dataSource.onDataChange(this.updateData);
       this.fetchItems({
         index: 0,
-        elementsPerScroll: this.props.elementsPerScroll,
+        elementsPerScroll: this.props.elementsPerScroll ?? defaultProps.elementsPerScroll,
         elementsToRender: []
       }).then(newState => this.setStateAfterDsUpdate(newState));
     }
@@ -118,14 +115,15 @@ const withInfiniteScroll = ComponentToExtend => class WithInfiniteScroll extends
     const {
       index
     } = this.state;
+    const elementsPerScroll = this.props.elementsPerScroll ?? defaultProps.elementsPerScroll;
     // This means updateData was called before any data was loaded, e.g.
     // An ArrayDataSource initialized empty and then changed latter on via `updateData`
     // In this case we want to load new data and not just replace the old one.
     // "See More After" should also be computed again in this case.
-    const isFirstLoad = index < this.props.elementsPerScroll;
+    const isFirstLoad = index < elementsPerScroll;
     this.fetchItems({
       index: 0,
-      elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
+      elementsPerScroll: isFirstLoad ? elementsPerScroll : index,
       elementsToRender: [],
       computeShowSeeMore: isFirstLoad
     }).then(newState => this.setStateAfterDsUpdate(newState));
@@ -142,7 +140,7 @@ const withInfiniteScroll = ComponentToExtend => class WithInfiniteScroll extends
       index
     } = extend({
       index: this.state.index,
-      elementsPerScroll: this.props.elementsPerScroll,
+      elementsPerScroll: this.props.elementsPerScroll ?? defaultProps.elementsPerScroll,
       elementsToRender: this.state.elementsToRender,
       computeShowSeeMore: true
     }, config);

package/bpk-component-info-banner/src/AnimateAndFade.d.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 type Props = {
-    animateOnEnter: boolean;
-    animateOnLeave: boolean;
+    animateOnEnter?: boolean;
+    animateOnLeave?: boolean;
     children: ReactNode | string;
     show: boolean;
     className?: string | undefined;
@@ -16,15 +16,12 @@ type State = {
 };
 declare class AnimateAndFade extends Component<Props, State> {
     toggleImmediately: boolean;
-    static defaultProps: {
-        animateOnEnter: boolean;
-        animateOnLeave: boolean;
-    };
     constructor(props: Props);
     componentDidMount(): void;
     componentDidUpdate(prevProps: Props): void;
     onAnimateHeightComplete: () => void;
     onFadeComplete: () => void;
+    nodeRef: RefObject<HTMLElement>;
     toggle: () => void;
     render(): import("react/jsx-runtime").JSX.Element | null;
 }

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { Component, cloneElement, createRef, isValidElement } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkAnimateHeight from "../../bpk-animate-height";
@@ -26,14 +26,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ANIMATION_DURATION = parseInt(durationSm, 10);
 class AnimateAndFade extends Component {
-  static defaultProps = {
-    animateOnEnter: false,
-    animateOnLeave: false
-  };
   constructor(props) {
     super(props);
-    this.toggleImmediately = this.props.show && this.props.animateOnEnter;
-    const initiallyShown = this.toggleImmediately ? false : this.props.show;
+    const {
+      animateOnEnter = false,
+      show
+    } = props;
+    this.toggleImmediately = show && animateOnEnter;
+    const initiallyShown = this.toggleImmediately ? false : show;
     this.state = {
       isExpanded: initiallyShown,
       visible: initiallyShown,
@@ -78,6 +78,7 @@ class AnimateAndFade extends Component {
       });
     }
   };
+  nodeRef = /*#__PURE__*/createRef();
   toggle = () => {
     if (this.state.visible && this.state.isExpanded) {
       this.setState({
@@ -93,8 +94,8 @@ class AnimateAndFade extends Component {
   };
   render() {
     const {
-      animateOnEnter,
-      animateOnLeave,
+      animateOnEnter = false,
+      animateOnLeave = false,
       children,
       className
     } = this.props;
@@ -119,6 +120,7 @@ class AnimateAndFade extends Component {
           appear: animateOnEnter,
           onTransitionEnd: this.onFadeComplete,
           children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
+            nodeRef: this.nodeRef,
             classNames: {
               exit: getClassName('bpk-animate-and-fade--leave'),
               exitActive: getClassName('bpk-animate-and-fade--leave-active'),
@@ -131,7 +133,9 @@ class AnimateAndFade extends Component {
               enter: ANIMATION_DURATION * 2,
               exit: ANIMATION_DURATION * 2
             },
-            children: children
+            children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
+              ref: this.nodeRef
+            }) : children
           })
         })]
       })

package/bpk-component-info-banner/src/withBannerAlertState.d.ts

@@ -71,16 +71,6 @@ declare const withBannerAlertState: <P extends BpkInfoBannerProps>(WrappedCompon
         }>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        onDismiss: null;
-        onExpandToggle: null;
-        onHide: null;
-        expanded: boolean;
-        show: boolean;
-        hideAfter: null;
-        animateOnLeave: boolean;
-        children: null;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default withBannerAlertState;

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

@@ -22,20 +22,10 @@ import BpkInfoBannerExpandable from "./BpkInfoBannerExpandable";
 import { jsx as _jsx } from "react/jsx-runtime";
 const withBannerAlertState = WrappedComponent => {
   class component extends Component {
-    static defaultProps = {
-      onDismiss: null,
-      onExpandToggle: null,
-      onHide: null,
-      expanded: false,
-      show: true,
-      hideAfter: null,
-      animateOnLeave: false,
-      children: null
-    };
     constructor(props) {
       super(props);
       this.state = {
-        expanded: props.expanded,
+        expanded: props.expanded ?? false,
         show: true
       };
       this.hideIntervalId = null;
@@ -84,8 +74,8 @@ const withBannerAlertState = WrappedComponent => {
     };
     render() {
       const {
-        animateOnLeave,
-        children,
+        animateOnLeave = false,
+        children = null,
         expanded,
         hideAfter,
         onDismiss,

package/bpk-component-input/index.d.ts

@@ -1,7 +1,7 @@
 import BpkInput from './src/BpkInput';
-import { propTypes, defaultProps, CLEAR_BUTTON_MODES, INPUT_TYPES, type Props } from './src/common-types';
+import { CLEAR_BUTTON_MODES, INPUT_TYPES, type Props } from './src/common-types';
 import themeAttributes from './src/themeAttributes';
 import withOpenEvents from './src/withOpenEvents';
 export default BpkInput;
 export type BpkInputProps = Props;
-export { propTypes, defaultProps, withOpenEvents, INPUT_TYPES, CLEAR_BUTTON_MODES, themeAttributes, };
+export { withOpenEvents, INPUT_TYPES, CLEAR_BUTTON_MODES, themeAttributes };

package/bpk-component-input/index.js

@@ -17,8 +17,8 @@
  */
 
 import BpkInput from "./src/BpkInput";
-import { propTypes, defaultProps, CLEAR_BUTTON_MODES, INPUT_TYPES } from "./src/common-types";
+import { CLEAR_BUTTON_MODES, INPUT_TYPES } from "./src/common-types";
 import themeAttributes from "./src/themeAttributes";
 import withOpenEvents from "./src/withOpenEvents";
 export default BpkInput;
-export { propTypes, defaultProps, withOpenEvents, INPUT_TYPES, CLEAR_BUTTON_MODES, themeAttributes };
+export { withOpenEvents, INPUT_TYPES, CLEAR_BUTTON_MODES, themeAttributes };

package/bpk-component-input/src/BpkInput.d.ts

@@ -4,19 +4,6 @@ type State = {
     persistClearButton: boolean;
 };
 declare class BpkInput extends Component<Props, State> {
-    static defaultProps: {
-        type: "text";
-        valid: null;
-        large: boolean;
-        docked: boolean;
-        dockedFirst: boolean;
-        dockedMiddle: boolean;
-        dockedLast: boolean;
-        inputRef: null;
-        clearButtonMode: "never";
-        clearButtonLabel: null;
-        onClear: null;
-    };
     constructor(props: Props);
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -20,13 +20,12 @@ import { Component } from 'react';
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ClearIcon from "../../bpk-component-icon/sm/close-circle";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
+import { CLEAR_BUTTON_MODES, INPUT_TYPES } from "./common-types";
 import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ClearButtonIcon = withButtonAlignment(ClearIcon);
 class BpkInput extends Component {
-  static defaultProps = defaultProps;
   constructor(props) {
     super(props);
     this.state = {
@@ -39,17 +38,18 @@ class BpkInput extends Component {
     const clearButtonClassNames = [getClassName('bpk-input__clear-button')];
     const {
       className,
-      clearButtonLabel,
-      clearButtonMode,
-      docked,
-      dockedFirst,
-      dockedLast,
-      dockedMiddle,
-      inputRef,
-      large,
+      clearButtonLabel = null,
+      clearButtonMode = CLEAR_BUTTON_MODES.never,
+      docked = false,
+      dockedFirst = false,
+      dockedLast = false,
+      dockedMiddle = false,
+      inputRef = null,
+      large = false,
       name,
-      onClear,
-      valid,
+      onClear = null,
+      type = INPUT_TYPES.text,
+      valid = null,
       value,
       ...rest
     } = this.props;
@@ -105,6 +105,7 @@ class BpkInput extends Component {
         }
       },
       "aria-invalid": isInvalid,
+      type: type,
       value: value,
       name: name,
       ...getDataComponentAttribute('Input'),

package/bpk-component-input/src/common-types.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import type { ComponentProps, SyntheticEvent } from 'react';
 export declare const CLEAR_BUTTON_MODES: {
     readonly never: "never";
@@ -50,35 +49,4 @@ export type PropsWithClearButtonMode = BaseProps & {
     onClear: (e?: SyntheticEvent<HTMLButtonElement>) => void;
 };
 export type Props = PropsWithoutClearButonMode | PropsWithClearButtonMode;
-export declare const clearablePropType: (props: any, propName: string, componentName: string) => Error | null;
-export declare const propTypes: {
-    id: PropTypes.Validator<string>;
-    name: PropTypes.Validator<string>;
-    value: PropTypes.Validator<string>;
-    type: PropTypes.Requireable<"number" | "text" | "tel" | "email" | "password">;
-    className: PropTypes.Requireable<string>;
-    valid: PropTypes.Requireable<boolean>;
-    large: PropTypes.Requireable<boolean>;
-    docked: PropTypes.Requireable<boolean>;
-    dockedFirst: PropTypes.Requireable<boolean>;
-    dockedMiddle: PropTypes.Requireable<boolean>;
-    dockedLast: PropTypes.Requireable<boolean>;
-    inputRef: PropTypes.Requireable<(...args: any[]) => any>;
-    clearButtonMode: PropTypes.Requireable<string>;
-    clearButtonLabel: (props: any, propName: string, componentName: string) => Error | null;
-    onClear: (props: any, propName: string, componentName: string) => Error | null;
-};
-export declare const defaultProps: {
-    type: "text";
-    valid: null;
-    large: boolean;
-    docked: boolean;
-    dockedFirst: boolean;
-    dockedMiddle: boolean;
-    dockedLast: boolean;
-    inputRef: null;
-    clearButtonMode: "never";
-    clearButtonLabel: null;
-    onClear: null;
-};
 export {};