@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

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

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _objectAssign = _interopRequireDefault(require("object-assign"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,29 +27,20 @@
  * 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',
+  ESCAPE: 'Escape'
 };
-
-class Portal extends Component {
+class Portal extends _react.Component {
   constructor() {
     super();
-
     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);
@@ -47,12 +49,10 @@ class Portal extends Component {
     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());
     }
@@ -76,161 +76,110 @@ class Portal extends Component {
       }
     }
   }
-
   componentWillUnmount() {
     this.close();
   }
-
   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) {
     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) {
-    if (
-      event.key === KEYCODES.ESCAPE &&
-      this.props.isOpen &&
-      this.props.closeOnEscPressed
-    ) {
+    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) {
     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?.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;
     }
-
     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,
-    );
+    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);
+      (0, _objectAssign.default)(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, this.getTargetElement()),
-    );
+    this.setState({
+      isVisible: true
+    }, () => this.props.onOpen(this.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
@@ -243,7 +192,7 @@ class Portal extends Component {
         // eslint-disable-next-line getter-return
         get() {
           supportsPassiveOption = true;
-        },
+        }
       });
       window.addEventListener('test', null, opts);
     } catch (e) {
@@ -251,37 +200,37 @@ class Portal extends Component {
     }
     return supportsPassiveOption;
   }
-
   render() {
     const {
       portalElement,
-      props: { children },
-      state: { isVisible },
+      props: {
+        children
+      },
+      state: {
+        isVisible
+      }
     } = this;
-
     if (!isVisible || !portalElement) {
       return null;
     }
-
-    return createPortal(children, portalElement);
+    return /*#__PURE__*/(0, _reactDom.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,
+  children: _propTypes.default.node.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  beforeClose: _propTypes.default.func,
+  className: _propTypes.default.string,
+  onClose: _propTypes.default.func,
+  onOpen: _propTypes.default.func,
+  onRender: _propTypes.default.func,
+  style: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  renderTarget: _propTypes.default.func,
+  target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  targetRef: _propTypes.default.func,
+  closeOnEscPressed: _propTypes.default.bool
 };
-
 Portal.defaultProps = {
   beforeClose: null,
   className: null,
@@ -292,7 +241,7 @@ Portal.defaultProps = {
   renderTarget: null,
   target: null,
   targetRef: null,
-  closeOnEscPressed: true,
+  closeOnEscPressed: true
 };
-
-export default Portal;
+var _default = Portal;
+exports.default = _default;

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

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectAssign = _interopRequireDefault(require("object-assign"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,50 +25,33 @@
  * 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 type { Node } from 'react';
-import CSSTransition from 'react-transition-group/CSSTransition';
-
-// Object.assign() is used unpolyfilled in react-transition-group.
+ */ // 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,
-};
-
+Object.assign = _objectAssign.default;
 const TransitionInitialMount = ({
   appearActiveClassName,
   appearClassName,
   children,
-  transitionTimeout,
-}: Props) => (
-  <CSSTransition
-    classNames={{
-      appear: appearClassName,
-      appearActive: appearActiveClassName,
-    }}
-    in
-    appear
-    timeout={{ exit: 0, enter: 0, appear: transitionTimeout }}
-  >
-    {children}
-  </CSSTransition>
-);
-
+  transitionTimeout
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CSSTransition.default, {
+  classNames: {
+    appear: appearClassName,
+    appearActive: appearActiveClassName
+  },
+  in: true,
+  appear: true,
+  timeout: {
+    exit: 0,
+    enter: 0,
+    appear: transitionTimeout
+  },
+  children: children
+});
 TransitionInitialMount.propTypes = {
-  children: PropTypes.node.isRequired,
-  appearClassName: PropTypes.string.isRequired,
-  appearActiveClassName: PropTypes.string.isRequired,
-  transitionTimeout: PropTypes.number.isRequired,
+  children: _propTypes.default.node.isRequired,
+  appearClassName: _propTypes.default.string.isRequired,
+  appearActiveClassName: _propTypes.default.string.isRequired,
+  transitionTimeout: _propTypes.default.number.isRequired
 };
-
-export default TransitionInitialMount;
+var _default = TransitionInitialMount;
+exports.default = _default;

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

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,15 +21,11 @@
  * 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;
-    }, '');
+var _default = (styles = {}) => (...classNames) => classNames.reduce((className, currentClass) => {
+  if (currentClass && typeof currentClass === 'string') {
+    const realName = styles[currentClass] || currentClass;
+    return className ? `${className} ${realName}` : realName;
+  }
+  return className;
+}, '');
+exports.default = _default;

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

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,27 +20,18 @@
  * 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 { type PropType } from 'prop-types';
-
-// We disable eslint on the below line because it breaks the flow type definitions and the FlowIssue comment below
+ */ // We disable eslint on the below line because it breaks the flow type definitions and the FlowIssue comment below
 // We can remove this when we migrate this file to TypeScript.
 // $FlowIssue[value-as-type] - PropType is imported as a type so is incorrectly reporting the PropType is not a valid type
-const deprecated = (propType: PropType, alternativeSuggestion: string) => // eslint-disable-line
-  (
-    props: { [string]: any },
-    propName: string,
-    componentName: string,
-    ...rest: [any]
-  ) => {
-    if (props[propName] != null) {
-      const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`;
-      // eslint-disable-next-line no-console
-      console.warn(message);
-    }
-    return propType(props, propName, componentName, ...rest);
-  };
-
-export default deprecated;
+const deprecated = (propType, alternativeSuggestion) =>
+// eslint-disable-line
+(props, propName, componentName, ...rest) => {
+  if (props[propName] != null) {
+    const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`;
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+  return propType(props, propName, componentName, ...rest);
+};
+var _default = deprecated;
+exports.default = _default;

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

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDeviceIphone = exports.isDeviceIpad = exports.isDeviceIos = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,18 +20,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.
- */
-
-/* @flow strict */
-
-const isDeviceIphone = () =>
-  /iPhone/i.test(
-    typeof window !== 'undefined' ? window.navigator.userAgent : '',
-  );
-
-const isDeviceIpad = () =>
-  /iPad/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '');
-
+ */const isDeviceIphone = () => /iPhone/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '');
+exports.isDeviceIphone = isDeviceIphone;
+const isDeviceIpad = () => /iPad/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '');
+exports.isDeviceIpad = isDeviceIpad;
 const isDeviceIos = () => isDeviceIphone() || isDeviceIpad();
-
-export { isDeviceIphone, isDeviceIpad, isDeviceIos };
+exports.isDeviceIos = isDeviceIos;

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

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,23 +20,11 @@
  * 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 */
-
-const DIRECTIONS = {
+ */const DIRECTIONS = {
   LTR: 'ltr',
-  RTL: 'rtl',
+  RTL: 'rtl'
 };
-
-const getDirection = () =>
-  (
-    (typeof document !== 'undefined' &&
-      document.documentElement !== null &&
-      document.documentElement.getAttribute('dir')) ||
-    DIRECTIONS.LTR
-  ).toLowerCase();
-
+const getDirection = () => (typeof document !== 'undefined' && document.documentElement !== null && document.documentElement.getAttribute('dir') || DIRECTIONS.LTR).toLowerCase();
 const isRTL = () => getDirection() === DIRECTIONS.RTL;
-
-export default isRTL;
+var _default = isRTL;
+exports.default = _default;