@skyscanner/backpack-web 33.4.0 → 34.0.0-premajor

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -19,10 +19,10 @@ import { Component } from 'react';
 import { createPopper } from '@popperjs/core';
 import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
-import keyboardFocusScope from "./keyboardFocusScope";
 import BpkPopover from "./BpkPopover";
+import keyboardFocusScope from "./keyboardFocusScope";
 import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class BpkPopoverPortal extends Component {
   constructor() {
@@ -30,9 +30,10 @@ class BpkPopoverPortal extends Component {
     this.popper = null;
     this.previousTargetElement = null;
   }
-  onRender = (popoverElement, targetElement) => {
-    this.position(popoverElement, targetElement);
-  };
+
+  // onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
+  //   this.position(popoverElement, targetElement);
+  // };
 
   // The order of events here is as follows:
   // - `onClose` is called by `Portal`
@@ -42,125 +43,130 @@ class BpkPopoverPortal extends Component {
 
   // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
   // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
-  onClose = (event, information) => {
-    // If the user has clicked outside the popover then we don't want focus to be restored
-    // otherwise it will be stolen back from the element they clicked on.
-    // Here we suppress restoring focus before the consumer is told about the close and updates state.
-    this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
-    if (this.props.onClose) {
-      this.props.onClose(event, information);
-    }
-  };
+  // onClose = (event: Object, information: { source: string }) => {
+  //   // If the user has clicked outside the popover then we don't want focus to be restored
+  //   // otherwise it will be stolen back from the element they clicked on.
+  //   // Here we suppress restoring focus before the consumer is told about the close and updates state.
+  //   this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
+
+  //   if (this.props.onClose) {
+  //     this.props.onClose(event, information);
+  //   }
+  // };
 
   // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
   // As a result, `onClose` is called first, followed by `beforeClose`.
-  beforeClose = done => {
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-      this.previousTargetElement = null;
-    }
-    keyboardFocusScope.unscopeFocus();
-    if (!this.suppressRestoreFocus) {
-      focusStore.restoreFocus();
-      this.suppressRestoreFocus = false;
-    }
-    done();
-  };
-  position(popoverElement, targetElement) {
-    if (!targetElement) {
-      return;
-    }
-    const targetElementHasChanged = targetElement !== this.previousTargetElement;
-    if (targetElementHasChanged && this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-
-    // Custom modifier that makes the arrow display at the edge of the target.
-    const applyArrowHide = {
-      name: 'applyArrowHide',
-      enabled: true,
-      phase: 'write',
-      fn({
-        state
-      }) {
-        const {
-          arrow
-        } = state.elements;
-        if (arrow) {
-          if (state.modifiersData.arrow.centerOffset !== 0) {
-            arrow.setAttribute('data-hide', '');
-          } else {
-            arrow.removeAttribute('data-hide');
-          }
-        }
-      }
-    };
-
-    // The default modifiers for the popper
-    // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
-    // which can cause blurriness in Safari and Chrome.
-    const stdModifiers = [{
-      name: 'computeStyles',
-      options: {
-        gpuAcceleration: false
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 17]
-      }
-    }, applyArrowHide];
-    if (!this.popper) {
-      this.popper = createPopper(targetElement, popoverElement, {
-        placement: this.props.placement,
-        onFirstUpdate: () => {
-          if (targetElement) {
-            targetElement.focus();
-          }
-          focusStore.storeFocus();
-          keyboardFocusScope.scopeFocus(popoverElement);
-        },
-        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
-      });
-    }
-    this.previousTargetElement = targetElement;
-    if (this.popper) {
-      this.popper.update();
-    }
-  }
+  // beforeClose = (done: () => void) => {
+  //   if (this.popper) {
+  //     this.popper.destroy();
+  //     this.popper = null;
+  //     this.previousTargetElement = null;
+  //   }
+
+  //   keyboardFocusScope.unscopeFocus();
+  //   if (!this.suppressRestoreFocus) {
+  //     focusStore.restoreFocus();
+  //     this.suppressRestoreFocus = false;
+  //   }
+
+  //   done();
+  // };
+
+  // position(popoverElement: HTMLElement, targetElement: ?HTMLElement) {
+  //   if (!targetElement) {
+  //     return;
+  //   }
+
+  //   const targetElementHasChanged =
+  //     targetElement !== this.previousTargetElement;
+
+  //   if (targetElementHasChanged && this.popper) {
+  //     this.popper.destroy();
+  //     this.popper = null;
+  //   }
+
+  //   // Custom modifier that makes the arrow display at the edge of the target.
+  //   const applyArrowHide = {
+  //     name: 'applyArrowHide',
+  //     enabled: true,
+  //     phase: 'write',
+  //     fn({ state }) {
+  //       const { arrow } = state.elements;
+  //       if (arrow) {
+  //         if (state.modifiersData.arrow.centerOffset !== 0) {
+  //           arrow.setAttribute('data-hide', '');
+  //         } else {
+  //           arrow.removeAttribute('data-hide');
+  //         }
+  //       }
+  //     },
+  //   };
+
+  //   // The default modifiers for the popper
+  //   // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
+  //   // which can cause blurriness in Safari and Chrome.
+  //   const stdModifiers = [
+  //     {
+  //       name: 'computeStyles',
+  //       options: {
+  //         gpuAcceleration: false,
+  //       },
+  //     },
+  //     {
+  //       name: 'offset',
+  //       options: {
+  //         offset: [0, 17],
+  //       },
+  //     },
+  //     applyArrowHide,
+  //   ];
+
+  //   if (!this.popper) {
+  //     this.popper = createPopper(targetElement, popoverElement, {
+  //       placement: this.props.placement,
+  //       onFirstUpdate: () => {
+  //         if (targetElement) {
+  //           targetElement.focus();
+  //         }
+  //         focusStore.storeFocus();
+  //         keyboardFocusScope.scopeFocus(popoverElement);
+  //       },
+  //       modifiers: this.props.popperModifiers
+  //         ? [...this.props.popperModifiers, ...stdModifiers]
+  //         : stdModifiers,
+  //     });
+  //   }
+
+  //   this.previousTargetElement = targetElement;
+  //   if (this.popper) {
+  //     this.popper.update();
+  //   }
+  // }
+
   render() {
     const {
-      isOpen,
-      onClose,
-      placement,
-      popperModifiers,
+      // isOpen,
+      // onClose,
+      // placement,
+      // popperModifiers,
       portalClassName,
-      portalStyle,
-      renderTarget,
-      target,
+      // portalStyle,
+      // renderTarget,
+      // target,
       ...rest
     } = this.props;
-    const classNames = [getClassName('bpk-popover-portal')];
-    if (portalClassName) {
-      classNames.push(portalClassName);
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [typeof target !== 'function' && target, /*#__PURE__*/_jsx(Portal, {
-        beforeClose: this.beforeClose,
-        className: classNames.join(' '),
-        isOpen: isOpen,
+    const classNames = getClassName('bpk-popover-portal', portalClassName);
+
+    // if (portalClassName) {
+    //   classNames.push(portalClassName);
+    // }
+
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(BpkPopover, {
+        className: classNames,
         onClose: this.onClose,
-        onRender: this.onRender,
-        style: portalStyle,
-        renderTarget: renderTarget,
-        target: target,
-        children: /*#__PURE__*/_jsx(BpkPopover, {
-          onClose: this.onClose,
-          ...rest
-        })
-      })]
+        ...rest
+      })
     });
   }
 }

package/bpk-component-popover/src/keyboardFocusScope.js

@@ -21,8 +21,8 @@
 // it only prevents it leaving due to keyboard events.
 // Clicks outside the target element will move focus as normal.
 
-import tabbable from 'tabbable';
 import focusin from 'focusin';
+import tabbable from 'tabbable';
 let polyfilled = false;
 let focusTrapped = false;
 const init = element => {

package/bpk-component-price/src/BpkPrice.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import { SIZES, ALIGNS } from "./common-types";
 import STYLES from "./BpkPrice.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,14 +42,20 @@ const BpkPrice = props => {
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
       className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right', leadingClassName),
-      children: [previousPrice && /*#__PURE__*/_jsx(BpkText, {
+      children: [previousPrice && /*#__PURE__*/_jsx(BpkText
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: getClassName('bpk-price__previous-price'),
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
         tagName: "span",
         children: previousPrice
       }), previousPrice && leadingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__separator'),
         children: "\uD802\uDD1F"
       }), leadingText && /*#__PURE__*/_jsx(BpkText, {
@@ -60,13 +66,19 @@ const BpkPrice = props => {
     }), /*#__PURE__*/_jsxs("div", {
       className: getClassName(isAlignRight && 'bpk-price__column-container'),
       children: [/*#__PURE__*/_jsx(BpkText, {
-        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
+        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
         tagName: "span",
         children: price
       }), trailingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__trailing'),
         children: trailingText
       })]

package/bpk-component-rating/src/BpkRating.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
 import STYLES from "./BpkRating.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -79,11 +79,17 @@ const BpkRating = props => {
       ...rest,
       children: [/*#__PURE__*/_jsxs(BpkText, {
         textStyle: valueTextSize,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: valueStyles,
         "aria-hidden": "true",
         children: [adjustedValue, showScale && /*#__PURE__*/_jsxs(BpkText, {
-          textStyle: scaleTextSize,
+          textStyle: scaleTextSize
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: scaleStyles,
           tagName: "span",
           "aria-hidden": "true",
@@ -92,12 +98,18 @@ const BpkRating = props => {
       }), /*#__PURE__*/_jsxs("div", {
         className: textWrapperStyles,
         children: [title && /*#__PURE__*/_jsx(BpkText, {
-          textStyle: titleTextSize,
+          textStyle: titleTextSize
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: titleStyles,
           tagName: "span",
           "aria-hidden": "true",
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        }), subtitle && /*#__PURE__*/_jsx(BpkText
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: subtitleStyles,
           textStyle: subtitleTextSize,
           tagName: "span",

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -66,7 +66,10 @@ class BpkRtlToggle extends Component {
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
     return /*#__PURE__*/_jsxs(BpkButtonLink, {
       title: "Keyboard Shortcut: ctrl + cmd + r",
-      onClick: this.toggleRtl,
+      onClick: this.toggleRtl
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: className,
       children: ["RTL ", onOrOff]
     });

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { BpkCalendarGrid } from "../../bpk-component-calendar";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkScrollableCalendarGrid.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,7 +32,10 @@ const BpkScrollableCalendarGrid = ({
   const classNames = getClassName('bpk-scrollable-calendar-grid', className);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [/*#__PURE__*/_jsx(BpkText, {
+    children: [/*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
       tagName: "h1",
       textStyle: TEXT_STYLES.heading4,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -18,10 +18,10 @@
 
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
-import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { cssModules } from "../../bpk-react-utils";
+import { VariableSizeList as List } from 'react-window';
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
+import { cssModules } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
@@ -82,7 +82,10 @@ const BpkScrollableCalendarGridList = props => {
       month: months[index],
       focusedDate: focusedDate,
       preventKeyboardFocus: rest.preventKeyboardFocus,
-      "aria-hidden": index !== 1,
+      "aria-hidden": index !== 1
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-scrollable-calendar-grid-list__item')
     })
   });

package/bpk-component-section-header/src/BpkSectionHeader.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
 import BpkText from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionHeader.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -35,10 +35,16 @@ const BpkSectionHeader = ({
   children: [/*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-section-header__title-description', `bpk-section-header__title-description--${type}`),
     children: [/*#__PURE__*/_jsx(BpkText, {
-      tagName: "h2",
+      tagName: "h2"
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-section-header__title'),
       children: title
-    }), description && /*#__PURE__*/_jsx(BpkText, {
+    }), description && /*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-section-header__description'),
       children: description
     })]

package/bpk-component-section-list/index.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkSectionList from "./src/BpkSectionList";
-import BpkSectionListSection from "./src/BpkSectionListSection";
 import BpkSectionListItem from "./src/BpkSectionListItem";
+import BpkSectionListSection from "./src/BpkSectionListSection";
 export default BpkSectionList;
 export { BpkSectionListSection, BpkSectionListItem };

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -15,9 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
-import BpkLargeChevronRightIcon from "../../bpk-component-icon/lg/chevron-right";
 import { withRtlSupport } from "../../bpk-component-icon";
+import BpkLargeChevronRightIcon from "../../bpk-component-icon/lg/chevron-right";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionListItem.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BpkLargeChevronRightIconWithRtlSupport = withRtlSupport(BpkLargeChevronRightIcon);
@@ -43,7 +43,10 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {
+        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: getClassName('bpk-section-list-item__chevron')
         })]
       })
@@ -58,7 +61,10 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {
+        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: getClassName('bpk-section-list-item__chevron')
         })]
       })

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Children } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionListSection.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-slider/src/BpkSlider.js

@@ -44,7 +44,10 @@ const BpkSlider = props => {
     ...rest,
     withTracks: true,
     snapDragDisabled: false,
-    invert: invert,
+    invert: invert
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: classNames.join(' '),
     thumbClassName: thumbClassNames.join(' '),
     thumbActiveClassName: getClassName('bpk-slider__handle--active'),

package/bpk-component-spinner/index.js

@@ -14,9 +14,9 @@
  * 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 BpkSpinner from "./src/BpkSpinner";
-import SPINNER_TYPES from "./src/spinnerTypes";
+ */import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
 import BpkLargeSpinner from "./src/BpkLargeSpinner";
-import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
+import BpkSpinner from "./src/BpkSpinner";
+import SPINNER_TYPES from "./src/spinnerTypes";
 import themeAttributes from "./src/themeAttributes";
 export { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES, themeAttributes };

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -86,10 +86,13 @@ const BpkExtraLargeSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(XlSpinner, {
-    className: classNames,
+  return /*#__PURE__*/_jsx(XlSpinner
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
     ...rest
   });
 };

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -87,10 +87,13 @@ const BpkLargeSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(LgSpinner, {
-    className: classNames,
+  return /*#__PURE__*/_jsx(LgSpinner
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
     ...rest
   });
 };

package/bpk-component-spinner/src/BpkSpinner.js

@@ -74,10 +74,13 @@ const BpkSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(SmSpinner, {
-    className: classNames,
+  return /*#__PURE__*/_jsx(SmSpinner
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
     ...rest
   });
 };

package/bpk-component-split-input/src/BpkInputField.js

@@ -14,8 +14,8 @@
  * 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 PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkInputField.module.css";

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -14,10 +14,10 @@
  * 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 PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
+import { cssModules } from "../../bpk-react-utils";
 import InputField from "./BpkInputField";
 import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";