@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

package/bpk-react-utils/src/Portal-v1.js

@@ -1,310 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016-2021 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 {
-  unstable_renderSubtreeIntoContainer, // eslint-disable-line camelcase
-  unmountComponentAtNode,
-  findDOMNode,
-} from 'react-dom';
-import { Component } from 'react';
-import assign from 'object-assign';
-import PropTypes from 'prop-types';
-
-const KEYCODES = {
-  ESCAPE: 'Escape',
-};
-
-class PortalV1 extends Component {
-  constructor() {
-    super();
-
-    this.portalElement = null;
-
-    // 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);
-    this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this);
-    this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
-    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());
-    }
-  }
-
-  // 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) {
-    if (this.props.isOpen) {
-      if (!prevProps.isOpen) {
-        this.open();
-        return;
-      }
-    } else if (prevProps.isOpen) {
-      if (this.props.beforeClose) {
-        this.props.beforeClose(this.close);
-      } else {
-        this.close();
-      }
-      return;
-    }
-
-    this.renderPortal();
-  }
-
-  componentWillUnmount() {
-    this.close();
-  }
-
-  onDocumentMouseDown(event) {
-    const clickEventProperties = this.getClickEventProperties(event);
-    if (
-      clickEventProperties.isNotLeftClick ||
-      clickEventProperties.isTargetClick ||
-      clickEventProperties.isPortalClick
-    ) {
-      this.shouldClose = false;
-      return;
-    }
-
-    this.shouldClose = true;
-  }
-
-  onDocumentMouseUp(event) {
-    const clickEventProperties = this.getClickEventProperties(event);
-
-    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' });
-    }
-  }
-
-  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' });
-    }
-  }
-
-  onDocumentMouseMove() {
-    this.shouldClose = false;
-  }
-
-  getClickEventProperties(event) {
-    const isNotLeftClick = event.button && event.button !== 0;
-
-    const targetElement = this.getTargetElement();
-    const isTargetClick =
-      targetElement &&
-      (event.target === targetElement || targetElement.contains(event.target));
-
-    const isPortalClick =
-      this.portalElement &&
-      (event.target === this.portalElement ||
-        this.portalElement.contains(event.target));
-
-    return {
-      isNotLeftClick,
-      isTargetClick,
-      isPortalClick,
-    };
-  }
-
-  getTargetElement() {
-    if (typeof this.props.target === 'function') {
-      return this.props.target();
-    }
-
-    // Whilst findDOMNode is planned for deprecation in a future implementation of react, since this is the only usage
-    // in backpack, we have decided to ignore this instance as it'll be deleted in favour of React 16 first class portal
-    // implementation (see https://reactjs.org/docs/portals.html).
-    // eslint-disable-next-line react/no-find-dom-node
-    return this.props.target && findDOMNode(this);
-  }
-
-  getRenderTarget() {
-    if (typeof this.props.renderTarget === 'function') {
-      return this.props.renderTarget();
-    }
-
-    return document.body;
-  }
-
-  open() {
-    if (this.portalElement) {
-      return;
-    }
-
-    this.portalElement = document.createElement('div');
-    this.getRenderTarget().appendChild(this.portalElement);
-
-    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(this.portalElement.style, this.props.style);
-    }
-
-    if (this.props.className) {
-      this.portalElement.className = this.props.className;
-    }
-
-    this.renderPortal(() => {
-      this.props.onOpen(this.portalElement, this.getTargetElement());
-    });
-  }
-
-  close() {
-    if (!this.portalElement) {
-      return;
-    }
-
-    unmountComponentAtNode(this.portalElement);
-
-    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 function is taken from modernizr
-  // See https://github.com/modernizr/modernizr
-  // eslint-disable-next-line class-methods-use-this
-  supportsPassiveEvents() {
-    let supportsPassiveOption = false;
-    try {
-      const opts = Object.defineProperty({}, 'passive', {
-        // eslint-disable-next-line getter-return
-        get() {
-          supportsPassiveOption = true;
-        },
-      });
-      window.addEventListener('test', null, opts);
-    } catch (e) {
-      return false;
-    }
-    return supportsPassiveOption;
-  }
-
-  renderPortal(cb = () => {}) {
-    // If the `target` prop is null, it's fine that there is no targetElement
-    // Otherwise, if a `target` is provided, we don't render if we cannot find the respective element
-    const missesExpectedTarget = this.props.target && !this.getTargetElement();
-
-    if (this.portalElement && !missesExpectedTarget) {
-      unstable_renderSubtreeIntoContainer(
-        this,
-        this.props.children,
-        this.portalElement,
-        () => {
-          if (this.props.isOpen) {
-            this.props.onRender(this.portalElement, this.getTargetElement());
-          }
-          cb();
-        },
-      );
-    } else {
-      setImmediate(cb);
-    }
-  }
-
-  render() {
-    return typeof this.props.target === 'function' ? null : this.props.target;
-  }
-}
-
-PortalV1.propTypes = {
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  beforeClose: PropTypes.func,
-  className: PropTypes.string,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  onRender: PropTypes.func,
-  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  renderTarget: PropTypes.func,
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  targetRef: PropTypes.func,
-  closeOnEscPressed: PropTypes.bool,
-};
-
-PortalV1.defaultProps = {
-  beforeClose: null,
-  className: null,
-  onClose: () => null,
-  onOpen: () => null,
-  onRender: () => null,
-  style: null,
-  renderTarget: null,
-  target: null,
-  targetRef: null,
-  closeOnEscPressed: true,
-};
-
-export default PortalV1;

package/bpk-react-utils/src/Portal.js

@@ -1,298 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component } from 'react';
-import { createPortal } from 'react-dom';
-import assign from 'object-assign';
-import PropTypes from 'prop-types';
-
-const KEYCODES = {
-  ESCAPE: 'Escape',
-};
-
-class Portal extends Component {
-  constructor() {
-    super();
-
-    this.portalElement = null;
-
-    this.state = {
-      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);
-    this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this);
-    this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
-    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());
-    }
-  }
-
-  // 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) {
-    if (this.props.isOpen) {
-      if (!prevProps.isOpen) {
-        this.open();
-      } else {
-        this.props.onRender(this.portalElement, this.getTargetElement());
-      }
-    } else if (prevProps.isOpen) {
-      if (this.props.beforeClose) {
-        this.props.beforeClose(this.close);
-      } else {
-        this.close();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.close();
-  }
-
-  onDocumentMouseDown(event) {
-    const clickEventProperties = this.getClickEventProperties(event);
-    if (
-      clickEventProperties.isNotLeftClick ||
-      clickEventProperties.isTargetClick ||
-      clickEventProperties.isPortalClick
-    ) {
-      this.shouldClose = false;
-      return;
-    }
-
-    this.shouldClose = true;
-  }
-
-  onDocumentMouseUp(event) {
-    const clickEventProperties = this.getClickEventProperties(event);
-
-    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' });
-    }
-  }
-
-  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' });
-    }
-  }
-
-  onDocumentMouseMove() {
-    this.shouldClose = false;
-  }
-
-  getClickEventProperties(event) {
-    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));
-
-    return {
-      isNotLeftClick: !!isNotLeftClick,
-      isTargetClick: !!isTargetClick,
-      isPortalClick: !!isPortalClick,
-    };
-  }
-
-  getTargetElement() {
-    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;
-
-    if (target) {
-      return target;
-    }
-    if (document.body) {
-      return document.body;
-    }
-
-    throw new Error('Render target and fallback unavailable');
-  }
-
-  open() {
-    if (this.portalElement) {
-      return;
-    }
-
-    this.portalElement = document.createElement('div');
-    this.getRenderTarget().appendChild(this.portalElement);
-
-    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(this.portalElement.style, this.props.style);
-    }
-
-    if (this.props.className) {
-      this.portalElement.className = this.props.className;
-    }
-    this.setState({ isVisible: true }, () =>
-      this.props.onOpen(this.portalElement),
-    );
-  }
-
-  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 function is taken from modernizr
-  // See https://github.com/modernizr/modernizr
-  // eslint-disable-next-line class-methods-use-this
-  supportsPassiveEvents() {
-    let supportsPassiveOption = false;
-    try {
-      const opts = Object.defineProperty({}, 'passive', {
-        // eslint-disable-next-line getter-return
-        get() {
-          supportsPassiveOption = true;
-        },
-      });
-      window.addEventListener('test', null, opts);
-    } catch (e) {
-      return false;
-    }
-    return supportsPassiveOption;
-  }
-
-  render() {
-    const {
-      portalElement,
-      props: { children },
-      state: { isVisible },
-    } = this;
-
-    if (!isVisible || !portalElement) {
-      return null;
-    }
-
-    return createPortal(children, portalElement);
-  }
-}
-
-Portal.propTypes = {
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  beforeClose: PropTypes.func,
-  className: PropTypes.string,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  onRender: PropTypes.func,
-  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  renderTarget: PropTypes.func,
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  targetRef: PropTypes.func,
-  closeOnEscPressed: PropTypes.bool,
-};
-
-Portal.defaultProps = {
-  beforeClose: null,
-  className: null,
-  onClose: () => null,
-  onOpen: () => null,
-  onRender: () => null,
-  style: null,
-  renderTarget: null,
-  target: null,
-  targetRef: null,
-  closeOnEscPressed: true,
-};
-
-export default Portal;

package/bpk-react-utils/src/TransitionInitialMount.js

@@ -1,63 +0,0 @@
-/*
- * 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.
- */
-
-/* @flow strict */
-
-import assign from 'object-assign';
-import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
-import CSSTransition from 'react-transition-group/CSSTransition';
-
-// Object.assign() is used unpolyfilled in react-transition-group.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = assign;
-
-type Props = {
-  appearClassName: string,
-  appearActiveClassName: string,
-  transitionTimeout: number,
-  children: Node,
-};
-
-const TransitionInitialMount = ({
-  appearActiveClassName,
-  appearClassName,
-  children,
-  transitionTimeout,
-}: Props) => (
-  <CSSTransition
-    classNames={{
-      appear: appearClassName,
-      appearActive: appearActiveClassName,
-    }}
-    in
-    appear
-    timeout={{ exit: 0, enter: 0, appear: transitionTimeout }}
-  >
-    {children}
-  </CSSTransition>
-);
-
-TransitionInitialMount.propTypes = {
-  children: PropTypes.node.isRequired,
-  appearClassName: PropTypes.string.isRequired,
-  appearActiveClassName: PropTypes.string.isRequired,
-  transitionTimeout: PropTypes.number.isRequired,
-};
-
-export default TransitionInitialMount;

package/bpk-react-utils/src/cssModules.js

@@ -1,29 +0,0 @@
-/*
- * 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.
- */
-
-/* @flow strict */
-
-export default (styles: {} = {}) =>
-  (...classNames: Array<?string | ?boolean | ?number | ?{}>) =>
-    classNames.reduce((className, currentClass) => {
-      if (currentClass && typeof currentClass === 'string') {
-        const realName = styles[currentClass] || currentClass;
-        return className ? `${className} ${realName}` : realName;
-      }
-      return className;
-    }, '');