@skyscanner/backpack-web 34.0.0-premajor.2 → 34.0.0

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

@@ -16,25 +16,47 @@
  * limitations under the License.
  */
 
-import { useState, useRef } from 'react';
-import { Popover, PopoverContent, PopoverTrigger } from "./PopperUtils";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, cloneElement, isValidElement } from 'react';
+import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, flip, shift } from '@floating-ui/react';
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { ARROW_ID } from "./constants";
+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',
   CLOSE_LINK: 'CLOSE_LINK'
 };
+
+// The stroke width is used to set the border width of the arrow.
+const strokeWidth = 0.0625;
+const bindEventSource = (source, callback, event) => {
+  if (event.persist) {
+    event.persist();
+  }
+  callback(event, {
+    source
+  });
+};
 const BpkPopover = ({
-  // children,
-  // className = null,
-  // closeButtonIcon = true,
-  // closeButtonProps = {},
-  // closeButtonText,
-  // id,
+  children,
+  className = null,
+  closeButtonIcon = true,
+  closeButtonProps = {},
+  closeButtonText,
+  id,
   isOpen = false,
-  // label,
-  // labelAsTitle = false,
-  // onClose,
-  // padded = true,
+  label,
+  labelAsTitle = false,
+  onClose,
+  padded = true,
   placement = 'bottom',
   showArrow = true,
   target,
@@ -42,68 +64,112 @@ const BpkPopover = ({
 }) => {
   const [isOpenState, setIsOpenState] = useState(isOpen);
   const arrowRef = useRef(null);
-
-  // const { context, floatingStyles, refs } = useFloating({
-  //   open: isOpenState,
-  //   onOpenChange: setIsOpenState,
-  //   placement,
-  //   middleware: [
-  //     showArrow && offset(14),
-  //     flip({ fallbackAxisSideDirection: 'start' }),
-  //     arrow({ element: arrowRef }),
-  //   ],
-  //   whileElementsMounted: autoUpdate,
-  // });
-
-  // const click = useClick(context);
-  // const dismiss = useDismiss(context);
+  const {
+    context,
+    floatingStyles,
+    refs
+  } = useFloating({
+    open: isOpenState,
+    onOpenChange: setIsOpenState,
+    placement,
+    middleware: [showArrow && offset(17), flip({
+      crossAxis: true
+    }), shift(), showArrow && arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
 
   // Merge all the interactions into prop getters
-  // const { getFloatingProps, getReferenceProps } = useInteractions([
-  //   click,
-  //   dismiss,
-  // ]);
-
-  // const targetElement = 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__*/
-    // <>
-    //   {targetElement}
-    //   {isOpenState && (
-    //     <FloatingFocusManager context={context} modal={false}>
-    //       <div
-    //         ref={refs.setFloating}
-    //         style={floatingStyles}
-    //         {...getFloatingProps()}
-    //       >
-    //       </div>
-    //     </FloatingFocusManager>
-    //   )}
-    // </>
-    _jsxs(Popover, {
-      open: isOpenState,
-      onOpenChange: setIsOpenState,
-      arrowRef: arrowRef,
-      showArrow: showArrow,
-      placement: placement,
-      children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-        onClick: () => setIsOpenState(v => !v),
-        children: target
-      }), /*#__PURE__*/_jsx(PopoverContent, {
-        setState: setIsOpenState,
-        arrowRef: arrowRef,
-        showArrow: showArrow,
-        ...rest
-      })]
-    })
-  );
+  const {
+    getFloatingProps,
+    getReferenceProps
+  } = useInteractions([click, dismiss]);
+  const targetElement = /*#__PURE__*/isValidElement(target) ? ( /*#__PURE__*/cloneElement(target, {
+    ...getReferenceProps(),
+    // @ts-ignore - we're adding a popover ref to the target element so we can position the popover relative to it
+    ref: refs.setReference
+  })) : /*#__PURE__*/_jsx("div", {
+    ref: refs.setReference,
+    ...getReferenceProps(),
+    children: target
+  });
+  const classNames = getClassName('bpk-popover', className);
+  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
+  const labelId = `bpk-popover-label-${id}`;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [targetElement, 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: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: context,
+              id: ARROW_ID,
+              className: getClassName('bpk-popover__arrow'),
+              role: "presentation",
+              stroke: surfaceHighlightDay,
+              strokeWidth: strokeWidth
+            }), 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, {
+                label: closeButtonText,
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps
+              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+                  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: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })
+            })]
+          })
+        })
+      })
+    })]
+  });
 };
 export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}
+.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}

package/bpk-component-popover/src/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ARROW_ID = "js-bpk-popover-arrow";
+declare const _default: {
+    ARROW_ID: string;
+};
+export default _default;

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

@@ -14,7 +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.
- */export const ARROW_ID = 'js-bpk-popover-arrow';
+ */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
 export default {
   ARROW_ID
 };

package/bpk-component-popover/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

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

@@ -42,22 +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
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
+      children: [previousPrice && /*#__PURE__*/_jsx("span", {
         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"
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+          tagName: "span",
+          children: previousPrice
+        })
+      }), previousPrice && leadingText && /*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-price__separator'),
-        children: "\uD802\uDD1F"
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+          tagName: "span",
+          children: "\uD802\uDD1F"
+        })
       }), leadingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
         tagName: "span",
@@ -65,22 +63,20 @@ 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
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+      children: [/*#__PURE__*/_jsx("span", {
         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"
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
+          tagName: "span",
+          children: price
+        })
+      }), trailingText && /*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-price__trailing'),
-        children: trailingText
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+          tagName: "span",
+          children: trailingText
+        })
       })]
     })]
   });

package/bpk-component-price/src/BpkPrice.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{flex-direction:row-reverse}.bpk-price__previous-price{text-decoration-line:line-through}.bpk-price__separator{margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{white-space:nowrap}
+.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{display:flex;flex-direction:row-reverse}.bpk-price__previous-price{display:flex;text-decoration-line:line-through}.bpk-price__separator{display:flex;margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{display:contents;color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{display:contents;white-space:nowrap}

package/bpk-component-rtl-toggle/index.d.ts

@@ -1,23 +1,4 @@
-/*
- * 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 BpkRtlToggle from './src/BpkRtlToggle';
 import updateOnDirectionChange from './src/updateOnDirectionChange';
-
 export default BpkRtlToggle;
 export { updateOnDirectionChange };

package/bpk-component-rtl-toggle/src/BpkRtlToggle.d.ts

@@ -1,41 +1,15 @@
-/*
- * 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';
-
 type State = {
-  direction: string;
-};
-type Props = {
-  className?: string | null;
+    direction: string;
 };
+type Props = {};
 type InteractionEvents = KeyboardEvent | MouseEvent | TouchEvent;
 declare class BpkRtlToggle extends Component<Props, State> {
-  constructor(props: Props);
-
-  componentDidMount(): void;
-
-  componentWillUnmount(): void;
-
-  handleKeyDown: (e: KeyboardEvent) => void;
-
-  toggleRtl: (e: InteractionEvents) => void;
-
-  render(): JSX.Element;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    toggleRtl: (e: InteractionEvents) => void;
+    render(): JSX.Element;
 }
 export default BpkRtlToggle;

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

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

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.d.ts

@@ -1,151 +1,58 @@
-/*
- * 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';
-
-declare const updateOnDirectionChange: (
-  EnhancedComponent: ComponentType<any> | string,
-) => {
-  new (props: {} | Readonly<{}>): {
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onDirectionChange: () => void;
-    render(): JSX.Element;
-    context: any;
-    setState<K extends never>(
-      state:
-        | {}
-        | ((
-            prevState: Readonly<{}>,
-            props: Readonly<{}>,
-          ) => {} | Pick<{}, K> | null)
-        | Pick<{}, K>
-        | null,
-      callback?: (() => void) | undefined,
-    ): void;
-    forceUpdate(callback?: (() => void) | undefined): void;
-    readonly props: Readonly<{}> &
-      Readonly<{
-        children?: import('react').ReactNode;
-      }>;
-    state: Readonly<{}>;
-    refs: {
-      [key: string]: import('react').ReactInstance;
+declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> | string) => {
+    new (props: {} | Readonly<{}>): {
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onDirectionChange: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    shouldComponentUpdate?(
-      nextProps: Readonly<{}>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): boolean;
-    componentDidCatch?(
-      error: Error,
-      errorInfo: import('react').ErrorInfo,
-    ): void;
-    getSnapshotBeforeUpdate?(
-      prevProps: Readonly<{}>,
-      prevState: Readonly<{}>,
-    ): any;
-    componentDidUpdate?(
-      prevProps: Readonly<{}>,
-      prevState: Readonly<{}>,
-      snapshot?: any,
-    ): void;
-    componentWillMount?(): void;
-    UNSAFE_componentWillMount?(): void;
-    componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-    UNSAFE_componentWillReceiveProps?(
-      nextProps: Readonly<{}>,
-      nextContext: any,
-    ): void;
-    componentWillUpdate?(
-      nextProps: Readonly<{}>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): void;
-    UNSAFE_componentWillUpdate?(
-      nextProps: Readonly<{}>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): void;
-  };
-  new (props: {}, context: any): {
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onDirectionChange: () => void;
-    render(): JSX.Element;
-    context: any;
-    setState<K extends never>(
-      state:
-        | {}
-        | ((
-            prevState: Readonly<{}>,
-            props: Readonly<{}>,
-          ) => {} | Pick<{}, K> | null)
-        | Pick<{}, K>
-        | null,
-      callback?: (() => void) | undefined,
-    ): void;
-    forceUpdate(callback?: (() => void) | undefined): void;
-    readonly props: Readonly<{}> &
-      Readonly<{
-        children?: import('react').ReactNode;
-      }>;
-    state: Readonly<{}>;
-    refs: {
-      [key: string]: import('react').ReactInstance;
+    new (props: {}, context: any): {
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onDirectionChange: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    shouldComponentUpdate?(
-      nextProps: Readonly<{}>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): boolean;
-    componentDidCatch?(
-      error: Error,
-      errorInfo: import('react').ErrorInfo,
-    ): void;
-    getSnapshotBeforeUpdate?(
-      prevProps: Readonly<{}>,
-      prevState: Readonly<{}>,
-    ): any;
-    componentDidUpdate?(
-      prevProps: Readonly<{}>,
-      prevState: Readonly<{}>,
-      snapshot?: any,
-    ): void;
-    componentWillMount?(): void;
-    UNSAFE_componentWillMount?(): void;
-    componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-    UNSAFE_componentWillReceiveProps?(
-      nextProps: Readonly<{}>,
-      nextContext: any,
-    ): void;
-    componentWillUpdate?(
-      nextProps: Readonly<{}>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): void;
-    UNSAFE_componentWillUpdate?(
-      nextProps: Readonly<{}>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): void;
-  };
-  displayName: string;
-  contextType?: import('react').Context<any> | undefined;
+    displayName: string;
+    contextType?: import("react").Context<any> | undefined;
 };
 export default updateOnDirectionChange;