@skyscanner/backpack-web 33.3.1 → 34.0.0-premajor

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

@@ -15,14 +15,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { BpkButtonLink } from "../../bpk-component-link";
+import { useState, cloneElement } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useInteractions, FloatingFocusManager } from '@floating-ui/react';
 import BpkCloseButton from "../../bpk-component-close-button";
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkPopover.module.css";
 import { ARROW_ID } from "./constants";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkPopover.module.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
@@ -44,74 +45,116 @@ const BpkPopover = props => {
     closeButtonProps,
     closeButtonText,
     id,
+    isOpen,
     label,
     labelAsTitle,
     onClose,
     padded,
+    placement,
+    popperModifiers,
+    portalStyle,
+    renderTarget,
+    target,
     ...rest
   } = props;
-  const classNames = [getClassName('bpk-popover')];
-  const bodyClassNames = [];
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+  const {
+    context,
+    floatingStyles,
+    refs
+  } = useFloating({
+    open: isOpenState,
+    onOpenChange: setIsOpenState,
+    middleware: [offset(17), popperModifiers],
+    whileElementsMounted: autoUpdate
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
 
-  // outer classNames
-  if (className) {
-    classNames.push(className);
-  }
+  // Merge all the interactions into prop getters
+  const {
+    getFloatingProps,
+    getReferenceProps
+  } = useInteractions([click, dismiss]);
 
-  // inner classNames
-  if (padded) {
-    bodyClassNames.push(getClassName('bpk-popover__body--padded'));
-  }
+  // const getTargetElement = () => typeof target === 'function' ? target() : (target as JSXElementWithRefProps)?.ref.current
+
+  // const targetEl = cloneElement(getRenderTarget(renderTarget), { ...getReferenceProps(), ref: refs.setReference });
+  // console.error('renderTarget', renderTarget());
+  const targetEl = /*#__PURE__*/cloneElement(target, {
+    ...getReferenceProps(),
+    ref: refs.setReference
+  });
+  const classNames = getClassName('bpk-popover', className);
+  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
   const labelId = `bpk-popover-label-${id}`;
-  return /*#__PURE__*/_jsx(TransitionInitialMount, {
-    appearClassName: getClassName('bpk-popover--appear'),
-    appearActiveClassName: getClassName('bpk-popover--appear-active'),
-    transitionTimeout: 200,
-    children: /*#__PURE__*/_jsxs("section", {
-      id: id,
-      tabIndex: "-1",
-      role: "dialog",
-      "aria-labelledby": labelId,
-      className: classNames.join(' '),
-      ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        id: ARROW_ID,
-        className: getClassName('bpk-popover__arrow'),
-        role: "presentation",
-        "data-popper-arrow": true
-      }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
-        className: getClassName('bpk-popover__header'),
-        children: [/*#__PURE__*/_jsx(BpkText, {
-          tagName: "h2",
-          id: labelId,
-          textStyle: TEXT_STYLES.label1,
-          children: label
-        }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
-          className: getClassName('bpk-popover__close-button'),
-          label: closeButtonText,
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose),
-          ...closeButtonProps
-        }) : /*#__PURE__*/_jsx(BpkButtonLink, {
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose),
-          ...closeButtonProps,
-          children: closeButtonText
-        })]
-      }) : /*#__PURE__*/_jsx("span", {
-        id: labelId,
-        className: getClassName('bpk-popover__label'),
-        children: label
-      }), /*#__PURE__*/_jsx("div", {
-        className: bodyClassNames.join(' '),
-        children: children
-      }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
-        className: getClassName('bpk-popover__footer'),
-        children: /*#__PURE__*/_jsx(BpkButtonLink, {
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose),
-          ...closeButtonProps,
-          children: closeButtonText
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [targetEl, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
+      context: context,
+      modal: false,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
+          appearClassName: getClassName('bpk-popover--appear'),
+          appearActiveClassName: getClassName('bpk-popover--appear-active'),
+          transitionTimeout: 200,
+          children: /*#__PURE__*/_jsxs("section", {
+            id: id,
+            tabIndex: "-1",
+            role: "dialog",
+            "aria-labelledby": labelId,
+            className: classNames,
+            ...rest,
+            children: [labelAsTitle ? /*#__PURE__*/_jsxs("header", {
+              className: getClassName('bpk-popover__header'),
+              children: [/*#__PURE__*/_jsx(BpkText, {
+                tagName: "h2",
+                id: labelId,
+                textStyle: TEXT_STYLES.label1,
+                children: label
+              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton
+              // TODO: className to be removed
+              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+              , {
+                className: getClassName('bpk-popover__close-button'),
+                label: closeButtonText,
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps
+              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })]
+            }) : /*#__PURE__*/_jsx("span", {
+              id: labelId,
+              className: getClassName('bpk-popover__label'),
+              children: label
+            }), /*#__PURE__*/_jsx("div", {
+              className: bodyClassNames,
+              children: children
+            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
+              className: getClassName('bpk-popover__footer'),
+              children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })
+            })]
+          })
         })
-      })]
-    })
+      })
+    })]
   });
 };
 export const propTypes = {

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

@@ -14,17 +14,15 @@
  * 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 { createPopper } from '@popperjs/core';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
 import { Component } from 'react';
+import { createPopper } from '@popperjs/core';
 import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
+import BpkPopover from "./BpkPopover";
 import keyboardFocusScope from "./keyboardFocusScope";
 import STYLES from "./BpkPopover.module.css";
-import BpkPopover from "./BpkPopover";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { 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() {
@@ -32,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`
@@ -44,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,12 +15,11 @@
  * 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 STYLES from "./BpkPrice.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import { SIZES, ALIGNS } from "./common-types";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkPrice.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkPrice = props => {
   const {
@@ -43,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, {
@@ -61,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-progress/src/BpkProgress.js

@@ -19,8 +19,7 @@ import { Component } from 'react';
 import clamp from 'lodash.clamp';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkProgress.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
 const renderSteps = numberOfSteps => {

package/bpk-component-radio/src/BpkRadio.js

@@ -17,8 +17,7 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkRadio.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkRadio = props => {
   const {

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

@@ -16,12 +16,11 @@
  * 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 STYLES from "./BpkRating.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import STYLES from "./BpkRating.module.css";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const getMinValue = () =>
 // Currently the min value is zero no matter what scale is used.
@@ -80,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",
@@ -93,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]
     });