@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-tooltip/src/{BpkTooltipPortal.tsx → BpkTooltipPortal.js}

@@ -18,44 +18,16 @@
 
 import { createPopper } from '@popperjs/core';
 import { cloneElement, Component } from 'react';
-import type { ReactNode, ReactElement } from 'react';
-
-import { Portal, cssModules } from '../../bpk-react-utils';
-
-import BpkTooltip from './BpkTooltip';
-import type { TooltipProps } from './BpkTooltip';
-import STYLES from './BpkTooltip.module.scss';
-import { TOOLTIP_TYPES } from './constants';
-
+import { Portal, cssModules } from "../../bpk-react-utils";
+import BpkTooltip from "./BpkTooltip";
+import STYLES from "./BpkTooltip.module.css";
+import { TOOLTIP_TYPES } from "./constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const hasTouchSupport = () =>
-  !!(
-    typeof window !== 'undefined' &&
-    ('ontouchstart' in window || navigator.maxTouchPoints > 0)
-  );
-
-export type Props = TooltipProps & {
-  ariaLabel: string;
-  target: ReactElement<any>;
-  children: ReactNode | string;
-  placement?: 'top' | 'right' | 'bottom' | 'left' | 'auto';
-  hideOnTouchDevices?: boolean;
-  portalStyle?: object;
-  portalClassName?: string;
-  renderTarget: null | (() => null | HTMLElement);
-  popperModifiers?: object[];
-};
-
-type State = {
-  isOpen: boolean;
-};
-
-class BpkTooltipPortal extends Component<Props, State> {
-  popper?: ReturnType<typeof createPopper> | null;
-
-  targetRef?: Element | null;
-
+const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0));
+class BpkTooltipPortal extends Component {
   static defaultProps = {
     // Disabling as the rule doesn't work when types are defined in a different file
     /* eslint-disable react/default-props-match-prop-types */
@@ -68,95 +40,72 @@ class BpkTooltipPortal extends Component<Props, State> {
     portalStyle: null,
     portalClassName: null,
     renderTarget: null,
-    popperModifiers: null,
+    popperModifiers: null
   };
-
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
-
     this.state = {
-      isOpen: false,
+      isOpen: false
     };
-
     this.popper = null;
     this.targetRef = null;
   }
-
   componentDidMount() {
     if (this.targetRef) {
       const ref = this.targetRef;
-
       ref.addEventListener('focusin', this.openTooltip);
       ref.addEventListener('focusout', this.closeTooltip);
       ref.addEventListener('mouseenter', this.openTooltip);
       ref.addEventListener('mouseleave', this.closeTooltip);
     }
   }
-
   componentWillUnmount() {
     if (this.targetRef) {
       const ref = this.targetRef;
-
       ref.addEventListener('focusin', this.openTooltip);
       ref.addEventListener('focusout', this.closeTooltip);
       ref.removeEventListener('mouseenter', this.openTooltip);
       ref.removeEventListener('mouseleave', this.closeTooltip);
     }
   }
-
-  onOpen = (
-    tooltipElement: HTMLElement,
-    targetElement?: HTMLElement | null | undefined,
-  ) => {
+  onOpen = (tooltipElement, targetElement) => {
     // 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, 8],
-        },
-      },
-    ];
-
-    this.popper = createPopper(targetElement as HTMLElement, tooltipElement, {
+    const stdModifiers = [{
+      name: 'computeStyles',
+      options: {
+        gpuAcceleration: false
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 8]
+      }
+    }];
+    this.popper = createPopper(targetElement, tooltipElement, {
       placement: this.props.placement,
-      modifiers: this.props.popperModifiers
-        ? [...this.props.popperModifiers, ...stdModifiers]
-        : stdModifiers,
+      modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
     });
-
     this.popper.update();
   };
-
-  beforeClose = (done: () => void | null) => {
+  beforeClose = done => {
     if (this.popper) {
       this.popper.destroy();
       this.popper = null;
     }
-
     done();
   };
-
   openTooltip = () => {
     this.setState({
-      isOpen: true,
+      isOpen: true
     });
   };
-
   closeTooltip = () => {
     this.setState({
-      isOpen: false,
+      isOpen: false
     });
   };
-
   render() {
     const {
       ariaLabel,
@@ -171,44 +120,34 @@ class BpkTooltipPortal extends Component<Props, State> {
       target,
       ...rest
     } = this.props;
-
     const classNames = [getClassName('bpk-tooltip-portal')];
     const renderPortal = !hasTouchSupport() || !hideOnTouchDevices;
-
-    const targetWithAccessibilityProps = cloneElement(target, {
+    const targetWithAccessibilityProps = /*#__PURE__*/cloneElement(target, {
       tabIndex: '0',
-      'aria-label': ariaLabel,
+      'aria-label': ariaLabel
     });
-
     if (portalClassName) {
       classNames.push(portalClassName);
     }
-
-    return (
-      <>
-        {targetWithAccessibilityProps}
-        {renderPortal && (
-          <Portal
-            target={targetWithAccessibilityProps}
-            targetRef={(targetRef) => {
-              this.targetRef = targetRef;
-            }}
-            isOpen={this.state.isOpen}
-            onOpen={this.onOpen}
-            onClose={this.closeTooltip}
-            style={portalStyle}
-            renderTarget={renderTarget}
-            className={classNames.join(' ')}
-          >
-            {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-            <BpkTooltip padded={padded} {...rest}>
-              {children}
-            </BpkTooltip>
-          </Portal>
-        )}
-      </>
-    );
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [targetWithAccessibilityProps, renderPortal && /*#__PURE__*/_jsx(Portal, {
+        target: targetWithAccessibilityProps,
+        targetRef: targetRef => {
+          this.targetRef = targetRef;
+        },
+        isOpen: this.state.isOpen,
+        onOpen: this.onOpen,
+        onClose: this.closeTooltip,
+        style: portalStyle,
+        renderTarget: renderTarget,
+        className: classNames.join(' '),
+        children: /*#__PURE__*/_jsx(BpkTooltip, {
+          padded: padded,
+          ...rest,
+          children: children
+        })
+      })]
+    });
   }
 }
-
-export default BpkTooltipPortal;
+export default BpkTooltipPortal;

package/bpk-component-tooltip/src/{constants.ts → constants.js}

@@ -19,7 +19,9 @@
 export const ARROW_ID = 'js-bpk-popover-arrow';
 export const TOOLTIP_TYPES = {
   light: 'light',
-  dark: 'dark',
-} as const;
-
-export default { ARROW_ID, TOOLTIP_TYPES };
+  dark: 'dark'
+};
+export default {
+  ARROW_ID,
+  TOOLTIP_TYPES
+};

package/bpk-react-utils/{index.ts → index.js}

@@ -16,32 +16,16 @@
  * limitations under the License.
  */
 
-import wrapDisplayName from './src/wrapDisplayName';
-import Portal from './src/Portal';
-import TransitionInitialMount from './src/TransitionInitialMount';
-import cssModules from './src/cssModules';
+import wrapDisplayName from "./src/wrapDisplayName";
+import Portal from "./src/Portal";
+import TransitionInitialMount from "./src/TransitionInitialMount";
+import cssModules from "./src/cssModules";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import deprecated from './src/deprecated';
-import {
-  isDeviceIphone,
-  isDeviceIpad,
-  isDeviceIos,
-} from './src/deviceDetection';
-import withDefaultProps from './src/withDefaultProps';
-import isRTL from './src/isRTL';
-
-export {
-  Portal,
-  TransitionInitialMount,
-  cssModules,
-  deprecated,
-  withDefaultProps,
-  wrapDisplayName,
-  isDeviceIphone,
-  isDeviceIpad,
-  isDeviceIos,
-  isRTL,
-};
+import deprecated from "./src/deprecated";
+import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
+import withDefaultProps from "./src/withDefaultProps";
+import isRTL from "./src/isRTL";
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL };
 export default {
   Portal,
   TransitionInitialMount,
@@ -52,5 +36,5 @@ export default {
   isDeviceIphone,
   isDeviceIpad,
   isDeviceIos,
-  isRTL,
-};
+  isRTL
+};

package/bpk-react-utils/src/{Portal.tsx → Portal.js}

@@ -17,53 +17,14 @@
  */
 
 import { Component } from 'react';
-import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 const KEYCODES = {
-  ESCAPE: 'Escape',
-} as const;
-
-type InteractionEvents = TouchEvent | MouseEvent | KeyboardEvent;
-
-type JSXElementWithRefProps = JSX.Element & {
-  ref: React.RefObject<HTMLElement>;
-};
-
-type Props = {
-  children: string | ReactNode;
-  isOpen: boolean;
-  beforeClose: ((arg0: () => void) => void) | null | undefined;
-  className: string | null | undefined;
-  onClose: (
-    arg0: InteractionEvents,
-    arg1: {
-      source: 'ESCAPE' | 'DOCUMENT_CLICK';
-    },
-  ) => void;
-  onOpen: (arg0: HTMLElement, arg1?: HTMLElement | null | undefined) => void;
-  onRender: (
-    arg0: HTMLElement | null | undefined,
-    arg1: HTMLElement | null | undefined,
-  ) => void;
-  style: {} | null | undefined;
-  renderTarget: null | HTMLElement | (() => null | HTMLElement);
-  target: null | HTMLElement | JSX.Element | (() => HTMLElement);
-  targetRef: ((arg0: null | Element | undefined) => void) | null | undefined;
-  closeOnEscPressed: boolean;
-};
-
-type State = {
-  isVisible: boolean;
+  ESCAPE: 'Escape'
 };
-
-class Portal extends Component<Props, State> {
-  portalElement: null | HTMLDivElement;
-
-  shouldClose: boolean;
-
+class Portal extends Component {
   static defaultProps = {
     beforeClose: null,
     className: null,
@@ -74,22 +35,18 @@ class Portal extends Component<Props, State> {
     renderTarget: null,
     target: null,
     targetRef: null,
-    closeOnEscPressed: true,
+    closeOnEscPressed: true
   };
-
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
-
     this.portalElement = null;
-
     this.state = {
-      isVisible: false,
+      isVisible: false
     };
 
     // shouldClose is used to keep track of the user's mouse-down events in order to
     // prevent the dialog closing if the mouse leaves / enters the portal during the click
     this.shouldClose = false;
-
     this.close = this.close.bind(this);
     this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
     this.onDocumentMouseDown = this.onDocumentMouseDown.bind(this);
@@ -98,12 +55,10 @@ class Portal extends Component<Props, State> {
     this.getClickEventProperties = this.getClickEventProperties.bind(this);
     this.supportsPassiveEvents = this.supportsPassiveEvents.bind(this);
   }
-
   componentDidMount() {
     if (this.props.isOpen) {
       this.open();
     }
-
     if (this.props.targetRef) {
       this.props.targetRef(this.getTargetElement());
     }
@@ -112,7 +67,7 @@ class Portal extends Component<Props, State> {
   // When the consumer updates `isOpen` to be `false`, we
   // call their beforeClose function so that they can trigger the close.
   // If they don't provide `beforeClose` we just call `close` directly.
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps) {
     if (this.props.isOpen) {
       if (!prevProps.isOpen) {
         this.open();
@@ -127,164 +82,112 @@ class Portal extends Component<Props, State> {
       }
     }
   }
-
   componentWillUnmount() {
     this.close();
   }
-
-  onDocumentMouseDown(event: MouseEvent | TouchEvent) {
+  onDocumentMouseDown(event) {
     const clickEventProperties = this.getClickEventProperties(event);
-    if (
-      clickEventProperties.isNotLeftClick ||
-      clickEventProperties.isTargetClick ||
-      clickEventProperties.isPortalClick
-    ) {
+    if (clickEventProperties.isNotLeftClick || clickEventProperties.isTargetClick || clickEventProperties.isPortalClick) {
       this.shouldClose = false;
       return;
     }
-
     this.shouldClose = true;
   }
-
-  onDocumentMouseUp(event: MouseEvent | TouchEvent) {
+  onDocumentMouseUp(event) {
     const clickEventProperties = this.getClickEventProperties(event);
-
-    if (
-      clickEventProperties.isNotLeftClick ||
-      clickEventProperties.isTargetClick ||
-      clickEventProperties.isPortalClick
-    ) {
+    if (clickEventProperties.isNotLeftClick || clickEventProperties.isTargetClick || clickEventProperties.isPortalClick) {
       this.shouldClose = false;
       return;
     }
-
     if (this.shouldClose) {
       // `onClose` tells the consumer that they should change `isOpen` to false.
       // Once the consumer has responded to `onClose`, `beforeClose` and `close` will be called.
-      this.props.onClose(event, { source: 'DOCUMENT_CLICK' });
+      this.props.onClose(event, {
+        source: 'DOCUMENT_CLICK'
+      });
     }
   }
-
-  onDocumentKeyDown(event: KeyboardEvent) {
-    if (
-      event.key === KEYCODES.ESCAPE &&
-      this.props.isOpen &&
-      this.props.closeOnEscPressed
-    ) {
+  onDocumentKeyDown(event) {
+    if (event.key === KEYCODES.ESCAPE && this.props.isOpen && this.props.closeOnEscPressed) {
       // `onClose` tells the consumer that they should change `isOpen` to false.
       // Once the consumer has responded to `onClose`, `beforeClose` and `close` will be called.
-      this.props.onClose(event, { source: 'ESCAPE' });
+      this.props.onClose(event, {
+        source: 'ESCAPE'
+      });
     }
   }
-
   onDocumentMouseMove() {
     this.shouldClose = false;
   }
-
-  getClickEventProperties(event: MouseEvent | TouchEvent) {
+  getClickEventProperties(event) {
     // @ts-expect-error FIXME: TS2339: Property 'button' does not exist on type 'TouchEvent | MouseEvent'.
     const isNotLeftClick = event.button && event.button !== 0;
-
     const targetElement = this.getTargetElement();
-    const isTargetClick =
-      targetElement &&
-      event.target instanceof Node &&
-      (event.target === targetElement || targetElement.contains(event.target));
-
-    const isPortalClick =
-      this.portalElement &&
-      event.target instanceof Node &&
-      (event.target === this.portalElement ||
-        this.portalElement.contains(event.target));
-
+    const isTargetClick = targetElement && event.target instanceof Node && (event.target === targetElement || targetElement.contains(event.target));
+    const isPortalClick = this.portalElement && event.target instanceof Node && (event.target === this.portalElement || this.portalElement.contains(event.target));
     return {
       isNotLeftClick: !!isNotLeftClick,
       isTargetClick: !!isTargetClick,
-      isPortalClick: !!isPortalClick,
+      isPortalClick: !!isPortalClick
     };
   }
-
   getTargetElement() {
-    return typeof this.props.target === 'function'
-      ? this.props.target()
-      : (this.props.target as JSXElementWithRefProps)?.ref.current;
+    return typeof this.props.target === 'function' ? this.props.target() : this.props.target?.ref.current;
   }
-
   getRenderTarget() {
-    const target =
-      typeof this.props.renderTarget === 'function'
-        ? this.props.renderTarget()
-        : this.props.renderTarget;
-
+    const target = typeof this.props.renderTarget === 'function' ? this.props.renderTarget() : this.props.renderTarget;
     if (target) {
       return target;
     }
     if (document.body) {
       return document.body;
     }
-
     throw new Error('Render target and fallback unavailable');
   }
-
   open() {
     if (this.portalElement) {
       return;
     }
-
     const portalElement = document.createElement('div');
     this.getRenderTarget().appendChild(portalElement);
-
-    const passiveArgs = this.supportsPassiveEvents()
-      ? { passive: true }
-      : false;
-    document.addEventListener(
-      'touchstart',
-      this.onDocumentMouseDown,
-      passiveArgs,
-    );
-    document.addEventListener(
-      'touchmove',
-      this.onDocumentMouseMove,
-      passiveArgs,
-    );
+    const passiveArgs = this.supportsPassiveEvents() ? {
+      passive: true
+    } : false;
+    document.addEventListener('touchstart', this.onDocumentMouseDown, passiveArgs);
+    document.addEventListener('touchmove', this.onDocumentMouseMove, passiveArgs);
     document.addEventListener('touchend', this.onDocumentMouseUp, passiveArgs);
     document.addEventListener('mousedown', this.onDocumentMouseDown, false);
     document.addEventListener('mouseup', this.onDocumentMouseUp, false);
     document.addEventListener('keydown', this.onDocumentKeyDown, false);
-
     if (this.props.style) {
       assign(portalElement.style, this.props.style);
     }
-
     if (this.props.className) {
       portalElement.className = this.props.className;
     }
-
     this.portalElement = portalElement;
-    this.setState({ isVisible: true }, () =>
-      this.props.onOpen(portalElement, this.getTargetElement()),
-    );
+    this.setState({
+      isVisible: true
+    }, () => this.props.onOpen(portalElement, this.getTargetElement()));
   }
-
   close() {
     if (!this.portalElement) {
       return;
     }
-
     const renderTarget = this.getRenderTarget();
     if (renderTarget) {
       renderTarget.removeChild(this.portalElement);
     }
-
     document.removeEventListener('touchstart', this.onDocumentMouseDown);
     document.removeEventListener('touchmove', this.onDocumentMouseMove);
     document.removeEventListener('touchend', this.onDocumentMouseUp);
     document.removeEventListener('mousedown', this.onDocumentMouseDown);
     document.removeEventListener('mouseup', this.onDocumentMouseUp);
     document.removeEventListener('keydown', this.onDocumentKeyDown);
-
     this.portalElement = null;
-    this.setState({ isVisible: false });
+    this.setState({
+      isVisible: false
+    });
   }
 
   // This function is taken from modernizr
@@ -297,7 +200,7 @@ class Portal extends Component<Props, State> {
         // eslint-disable-next-line getter-return
         get() {
           supportsPassiveOption = true;
-        },
+        }
       });
       // @ts-expect-error FIXME: TS2769: No overload matches this call.
       window.addEventListener('test', null, opts);
@@ -306,37 +209,30 @@ class Portal extends Component<Props, State> {
     }
     return supportsPassiveOption;
   }
-
   render() {
     const {
       portalElement,
-      props: { children },
-      state: { isVisible },
+      props: {
+        children
+      },
+      state: {
+        isVisible
+      }
     } = this;
-
     if (!isVisible || !portalElement) {
       return null;
     }
-
-    const stopPropagationHandler = (
-      e: React.KeyboardEvent | React.MouseEvent | React.TouchEvent,
-    ) => e.stopPropagation();
-
-    return createPortal(
-      <div
-        onClick={stopPropagationHandler}
-        onMouseDown={stopPropagationHandler}
-        onMouseUp={stopPropagationHandler}
-        onKeyDown={stopPropagationHandler}
-        onKeyUp={stopPropagationHandler}
-        tabIndex={-1}
-        role="none"
-      >
-        {children}
-      </div>,
-      portalElement,
-    );
+    const stopPropagationHandler = e => e.stopPropagation();
+    return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
+      onClick: stopPropagationHandler,
+      onMouseDown: stopPropagationHandler,
+      onMouseUp: stopPropagationHandler,
+      onKeyDown: stopPropagationHandler,
+      onKeyUp: stopPropagationHandler,
+      tabIndex: -1,
+      role: "none",
+      children: children
+    }), portalElement);
   }
 }
-
-export default Portal;
+export default Portal;