@skyscanner/backpack-web 3.1.0 → 4.0.0

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

@@ -0,0 +1,310 @@
+/*
+ * 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

@@ -16,17 +16,13 @@
  * limitations under the License.
  */
 
-import {
-  unstable_renderSubtreeIntoContainer, // eslint-disable-line camelcase
-  unmountComponentAtNode,
-  findDOMNode,
-} from 'react-dom';
 import { Component } from 'react';
+import { createPortal } from 'react-dom';
 import assign from 'object-assign';
 import PropTypes from 'prop-types';
 
 const KEYCODES = {
-  ESCAPE: 27,
+  ESCAPE: 'Escape',
 };
 
 class Portal extends Component {
@@ -35,6 +31,10 @@ class Portal extends Component {
 
     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;
@@ -65,7 +65,8 @@ class Portal extends Component {
     if (this.props.isOpen) {
       if (!prevProps.isOpen) {
         this.open();
-        return;
+      } else {
+        this.props.onRender(this.portalElement, this.getTargetElement());
       }
     } else if (prevProps.isOpen) {
       if (this.props.beforeClose) {
@@ -73,10 +74,7 @@ class Portal extends Component {
       } else {
         this.close();
       }
-      return;
     }
-
-    this.renderPortal();
   }
 
   componentWillUnmount() {
@@ -118,7 +116,7 @@ class Portal extends Component {
 
   onDocumentKeyDown(event) {
     if (
-      event.keyCode === KEYCODES.ESCAPE &&
+      event.key === KEYCODES.ESCAPE &&
       this.props.isOpen &&
       this.props.closeOnEscPressed
     ) {
@@ -138,38 +136,42 @@ class Portal extends Component {
     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,
-      isTargetClick,
-      isPortalClick,
+      isNotLeftClick: !!isNotLeftClick,
+      isTargetClick: !!isTargetClick,
+      isPortalClick: !!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);
+    return typeof this.props.target === 'function'
+      ? this.props.target()
+      : this.props.target;
   }
 
   getRenderTarget() {
-    if (typeof this.props.renderTarget === 'function') {
-      return 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;
     }
 
-    return document.body;
+    throw new Error('Render target and fallback unavailable');
   }
 
   open() {
@@ -205,10 +207,9 @@ class Portal extends Component {
     if (this.props.className) {
       this.portalElement.className = this.props.className;
     }
-
-    this.renderPortal(() => {
-      this.props.onOpen(this.portalElement, this.getTargetElement());
-    });
+    this.setState({ isVisible: true }, () =>
+      this.props.onOpen(this.portalElement),
+    );
   }
 
   close() {
@@ -216,8 +217,6 @@ class Portal extends Component {
       return;
     }
 
-    unmountComponentAtNode(this.portalElement);
-
     const renderTarget = this.getRenderTarget();
     if (renderTarget) {
       renderTarget.removeChild(this.portalElement);
@@ -231,6 +230,7 @@ class Portal extends Component {
     document.removeEventListener('keydown', this.onDocumentKeyDown);
 
     this.portalElement = null;
+    this.setState({ isVisible: false });
   }
 
   // This function is taken from modernizr
@@ -252,30 +252,18 @@ class Portal extends Component {
     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() {
+    const {
+      portalElement,
+      props: { children },
+      state: { isVisible },
+    } = this;
+
+    if (!isVisible || !portalElement) {
+      return null;
     }
-  }
 
-  render() {
-    return typeof this.props.target === 'function' ? null : this.props.target;
+    return createPortal(children, portalElement);
   }
 }
 

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "5.1.9",
+  "version": "5.1.10",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,7 +17,7 @@
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2"
+    "bpk-react-utils": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",