@skyscanner/backpack-web 25.1.0 → 25.3.0

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

@@ -0,0 +1,27 @@
+/*
+ * 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 BpkImage from './src/BpkImage';
+import BpkBackgroundImage from './src/BpkBackgroundImage';
+import type { BpkBackgroundImageProps } from './src/BpkBackgroundImage';
+import withLazyLoading from './src/withLazyLoading';
+import withLoadingBehavior from './src/withLoadingBehavior';
+import BORDER_RADIUS_STYLES from './src/BpkImageBorderRadiusStyles';
+export type { BpkBackgroundImageProps };
+export default BpkImage;
+export { BpkBackgroundImage, withLazyLoading, withLoadingBehavior, BORDER_RADIUS_STYLES, };

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { Component, CSSProperties } from 'react';
+import type { ReactNode } from 'react';
+export type BpkBackgroundImageProps = {
+    children?: ReactNode;
+    aspectRatio: number;
+    inView?: boolean;
+    loading?: boolean;
+    src: string;
+    className?: string;
+    onLoad?: (() => void) | null;
+    style?: {};
+    imageStyle?: CSSProperties;
+};
+declare class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
+    trackImg?: HTMLImageElement | null;
+    static defaultProps: {
+        className: string;
+        inView: boolean;
+        loading: boolean;
+        onLoad: null;
+        style: {};
+        imageStyle: {};
+    };
+    constructor(props: BpkBackgroundImageProps);
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(newProps: BpkBackgroundImageProps): void;
+    onBackgroundImageLoad: () => void;
+    getAspectRatio: () => number;
+    startImageLoad: () => void;
+    render(): JSX.Element;
+}
+export default BpkBackgroundImage;

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
 var _bpkReactUtils = require("../../bpk-react-utils");
@@ -33,14 +32,14 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
+                                                                                                                                                                                                                                                                                                                                                                                           */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBackgroundImageModule.default);
 class BpkBackgroundImage extends _react.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "trackImg", void 0);
-    _defineProperty(this, "startImageLoad", void 0);
-    _defineProperty(this, "onBackgroundImageLoad", void 0);
     _defineProperty(this, "onBackgroundImageLoad", () => {
       if (this.props.onLoad) {
         this.props.onLoad();
@@ -127,19 +126,8 @@ class BpkBackgroundImage extends _react.Component {
     });
   }
 }
-_defineProperty(BpkBackgroundImage, "propTypes", {
-  aspectRatio: _propTypes.default.number.isRequired,
-  src: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  inView: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  onLoad: _propTypes.default.func,
-  style: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  imageStyle: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-});
 _defineProperty(BpkBackgroundImage, "defaultProps", {
-  className: null,
+  className: '',
   inView: true,
   loading: false,
   onLoad: null,

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

@@ -0,0 +1,48 @@
+/*
+ * 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 { Component } from 'react';
+import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';
+type BpkImageProps = {
+    altText: string;
+    src: string;
+    aspectRatio: number;
+    inView?: boolean;
+    loading?: boolean;
+    borderRadiusStyle?: typeof BORDER_RADIUS_STYLES[keyof typeof BORDER_RADIUS_STYLES];
+    className?: string;
+    onLoad?: (() => void) | null;
+    style?: {};
+    suppressHydrationWarning?: boolean;
+    [rest: string]: any;
+};
+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;
+    render(): JSX.Element;
+}
+export default BpkImage;

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
 var _bpkReactUtils = require("../../bpk-react-utils");
@@ -38,7 +37,9 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
+                                                                                                                                                                                                                                                                                                                                                                                           */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkImageModule.default);
 class Image extends _react.Component {
   constructor(props) {
@@ -68,30 +69,20 @@ class Image extends _react.Component {
     if (hidden) {
       imgClassNames.push(getClassName('bpk-image__img--hidden'));
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      (0, _jsxRuntime.jsx)("img", _objectSpread({
-        className: imgClassNames.join(' '),
-        alt: altText,
-        onLoad: onImageLoad,
-        ref: this.setImgRef
-      }, rest))
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread({
+      className: imgClassNames.join(' '),
+      alt: altText,
+      onLoad: onImageLoad,
+      ref: this.setImgRef
+    }, rest));
   }
 }
-_defineProperty(Image, "propTypes", {
-  altText: _propTypes.default.string.isRequired,
-  hidden: _propTypes.default.bool,
-  onImageLoad: _propTypes.default.func.isRequired
-});
 _defineProperty(Image, "defaultProps", {
   hidden: false
 });
 class BpkImage extends _react.Component {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "onImageLoad", void 0);
     _defineProperty(this, "placeholder", void 0);
     _defineProperty(this, "onImageLoad", () => {
       if (this.props.onLoad) {
@@ -143,10 +134,7 @@ class BpkImage extends _react.Component {
         },
         className: classNames.join(' '),
         suppressHydrationWarning: this.props.suppressHydrationWarning,
-        children: [inView &&
-        /*#__PURE__*/
-        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        (0, _jsxRuntime.jsx)(Image, _objectSpread({
+        children: [inView && /*#__PURE__*/(0, _jsxRuntime.jsx)(Image, _objectSpread({
           hidden: loading,
           altText: altText,
           onImageLoad: this.onImageLoad
@@ -170,22 +158,8 @@ class BpkImage extends _react.Component {
     });
   }
 }
-_defineProperty(BpkImage, "propTypes", {
-  altText: _propTypes.default.string.isRequired,
-  src: _propTypes.default.string.isRequired,
-  aspectRatio: _propTypes.default.number.isRequired,
-  borderRadiusStyle: _propTypes.default.oneOf(Object.keys(_BpkImageBorderRadiusStyles.default)),
-  className: _propTypes.default.string,
-  inView: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  onLoad: _propTypes.default.func,
-  style: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  suppressHydrationWarning: _propTypes.default.bool
-});
 _defineProperty(BpkImage, "defaultProps", {
   borderRadiusStyle: _BpkImageBorderRadiusStyles.default.none,
-  className: null,
   inView: true,
   loading: false,
   onLoad: null,

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

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+declare const BORDER_RADIUS_STYLES: {
+    readonly none: "none";
+    readonly sm: "sm";
+};
+export default BORDER_RADIUS_STYLES;

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

@@ -20,7 +20,9 @@ exports.default = void 0;
  * 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.
- */const BORDER_RADIUS_STYLES = {
+ */
+
+const BORDER_RADIUS_STYLES = {
   none: 'none',
   sm: 'sm'
 };

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

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+/// <reference types="lodash" />
+import type { ComponentType } from 'react';
+type WithLazyLoadingProps = {
+    className?: string;
+    style?: {};
+    [rest: string]: any;
+};
+type WithLazyLoadingState = {
+    inView: boolean;
+};
+export default function withLazyLoading<P extends object>(WrappedComponent: ComponentType<P>, documentRef?: Document | null): {
+    new (props: Omit<P, 'inView'> & WithLazyLoadingProps): {
+        element?: HTMLElement | null | undefined;
+        placeholderReference?: string | undefined;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        setInView: () => void;
+        getPassiveArgs(): {
+            capture: boolean;
+            passive?: boolean;
+        };
+        removeEventListeners: () => void;
+        checkInView: import("lodash").DebouncedFunc<() => void>;
+        supportsPassiveEvents: () => boolean;
+        isInViewPort: () => boolean;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "inView">(state: WithLazyLoadingState | ((prevState: Readonly<WithLazyLoadingState>, props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>) => WithLazyLoadingState | Pick<WithLazyLoadingState, K> | null) | Pick<WithLazyLoadingState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<WithLazyLoadingState>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): void;
+        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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = withLazyLoading;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,16 +35,10 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            */
 function withLazyLoading(WrappedComponent, documentRef) {
   class WithLazyLoading extends _react.Component {
-    constructor() {
-      super();
-      _defineProperty(this, "checkInView", void 0);
+    constructor(props) {
+      super(props);
       _defineProperty(this, "element", void 0);
-      _defineProperty(this, "isInViewPort", void 0);
       _defineProperty(this, "placeholderReference", void 0);
-      _defineProperty(this, "removeEventListeners", void 0);
-      _defineProperty(this, "setInView", void 0);
-      _defineProperty(this, "state", void 0);
-      _defineProperty(this, "supportsPassiveEvents", void 0);
       _defineProperty(this, "setInView", () => {
         this.setState(() => ({
           inView: true
@@ -53,10 +46,10 @@ function withLazyLoading(WrappedComponent, documentRef) {
         this.removeEventListeners();
       });
       _defineProperty(this, "removeEventListeners", () => {
-        documentRef.removeEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
-        documentRef.removeEventListener('resize', this.checkInView);
-        documentRef.removeEventListener('orientationchange', this.checkInView);
-        documentRef.removeEventListener('fullscreenchange', this.checkInView);
+        documentRef?.removeEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
+        documentRef?.removeEventListener('resize', this.checkInView);
+        documentRef?.removeEventListener('orientationchange', this.checkInView);
+        documentRef?.removeEventListener('fullscreenchange', this.checkInView);
       });
       _defineProperty(this, "checkInView", (0, _throttle.default)(() => {
         if (this.isInViewPort()) {
@@ -74,8 +67,9 @@ function withLazyLoading(WrappedComponent, documentRef) {
               return supportsPassiveOption;
             }
           });
-          window.addEventListener('test', null, opts);
-          window.removeEventListener('test');
+          const noop = function () {};
+          window.addEventListener('test', noop, opts);
+          window.removeEventListener('test', noop, opts);
         } catch (e) {
           return false;
         }
@@ -84,8 +78,8 @@ function withLazyLoading(WrappedComponent, documentRef) {
       _defineProperty(this, "isInViewPort", () => {
         if (!this.element) return false;
         const rect = this.element.getBoundingClientRect();
-        const viewPortHeight = Math.max(window.innerHeight, documentRef.documentElement.clientHeight);
-        const viewPortWidth = Math.max(window.innerWidth, documentRef.documentElement.clientWidth);
+        const viewPortHeight = documentRef ? Math.max(window.innerHeight, documentRef.documentElement.clientHeight) : -1;
+        const viewPortWidth = documentRef ? Math.max(window.innerWidth, documentRef.documentElement.clientWidth) : -1;
         return rect.bottom >= 0 && rect.right >= 0 && rect.top < viewPortHeight && rect.left < viewPortWidth;
       });
       this.state = {
@@ -93,10 +87,10 @@ function withLazyLoading(WrappedComponent, documentRef) {
       };
     }
     componentDidMount() {
-      documentRef.addEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
-      documentRef.addEventListener('resize', this.checkInView);
-      documentRef.addEventListener('orientationchange', this.checkInView);
-      documentRef.addEventListener('fullscreenchange', this.checkInView);
+      documentRef?.addEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
+      documentRef?.addEventListener('resize', this.checkInView);
+      documentRef?.addEventListener('orientationchange', this.checkInView);
+      documentRef?.addEventListener('fullscreenchange', this.checkInView);
       // call checkInView immediately incase the
       // component is already in view prior to scrolling
       this.checkInView();
@@ -132,14 +126,10 @@ function withLazyLoading(WrappedComponent, documentRef) {
       });
     }
   }
-  _defineProperty(WithLazyLoading, "propTypes", {
-    style: _propTypes.default.object,
-    // eslint-disable-line react/forbid-prop-types
-    className: _propTypes.default.string
-  });
+  _defineProperty(WithLazyLoading, "displayName", void 0);
   _defineProperty(WithLazyLoading, "defaultProps", {
-    style: null,
-    className: null
+    style: {},
+    className: ''
   });
   WithLazyLoading.displayName = (0, _bpkReactUtils.wrapDisplayName)(WrappedComponent, 'withLazyLoading');
   return WithLazyLoading;

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

@@ -0,0 +1,57 @@
+/*
+ * 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 type { ComponentType } from 'react';
+type InjectedProps = {
+    onLoad: () => void;
+    loading: boolean;
+};
+type State = {
+    loading: boolean;
+};
+export default function withLoadingBehavior<P extends object>(WrappedComponent: ComponentType<P>): {
+    new (props: Omit<P, keyof InjectedProps>): {
+        onLoad: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "loading">(state: State | ((prevState: Readonly<State>, props: Readonly<Omit<P, keyof InjectedProps>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<P, keyof InjectedProps>> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<State>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType?: import("react").Context<any> | undefined;
+};
+export {};

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

@@ -30,8 +30,8 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            */
 function withLoadingBehavior(WrappedComponent) {
   class WithLoadingBehavior extends _react.Component {
-    constructor() {
-      super();
+    constructor(props) {
+      super(props);
       _defineProperty(this, "onLoad", () => {
         this.setState(() => ({
           loading: false
@@ -48,6 +48,7 @@ function withLoadingBehavior(WrappedComponent) {
       }, this.props));
     }
   }
+  _defineProperty(WithLoadingBehavior, "displayName", void 0);
   WithLoadingBehavior.displayName = (0, _bpkReactUtils.wrapDisplayName)(WrappedComponent, 'withLoadingBehavior');
   return WithLoadingBehavior;
 }

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

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

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

@@ -16,13 +16,9 @@
  * limitations under the License.
  */
 
-type Props = {
-  label: string;
-};
-declare const BpkClearButton: ({
-  className,
-  label,
-  onClick,
-  ...rest
-}: Props) => JSX.Element;
+import type { ComponentProps } from 'react';
+interface Props extends ComponentProps<'button'> {
+    label: string;
+}
+declare const BpkClearButton: ({ className, label, onClick, ...rest }: Props) => JSX.Element;
 export default BpkClearButton;

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

@@ -17,30 +17,25 @@
  */
 
 import { Component } from 'react';
-
 import type { Props } from './common-types';
-
 type State = {
-  persistClearButton: boolean;
+    persistClearButton: boolean;
 };
 declare class BpkInput extends Component<Props, State> {
-  static defaultProps: {
-    type: 'text';
-    className: null;
-    valid: null;
-    large: boolean;
-    docked: boolean;
-    dockedFirst: boolean;
-    dockedMiddle: boolean;
-    dockedLast: boolean;
-    inputRef: null;
-    clearButtonMode: 'never';
-    clearButtonLabel: null;
-    onClear: null;
-  };
-
-  constructor(props: Props);
-
-  render(): JSX.Element;
+    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(): JSX.Element;
 }
 export default BpkInput;