@skyscanner/backpack-web 22.3.1 → 23.0.0

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -1,226 +1,176 @@
-/*
- * 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 { createPopper } from '@popperjs/core';
-import PropTypes from 'prop-types';
-import { cloneElement, Component } from 'react';
-import type { Node, Element } from 'react';
-
-import { Portal, cssModules } from '../../bpk-react-utils';
-
-import BpkTooltip, {
-  propTypes as tooltipPropTypes,
-  defaultProps as tooltipDefaultProps,
-  type TooltipProps,
-} from './BpkTooltip';
-import STYLES from './BpkTooltip.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const hasTouchSupport = () =>
-  !!(
-    typeof window !== 'undefined' &&
-    ('ontouchstart' in window ||
-      (window.DocumentTouch && document instanceof window.DocumentTouch))
-  );
-
-export type Props = {
-  ...$Exact<TooltipProps>,
-  ariaLabel: string,
-  target: Element<any>,
-  children: Node,
-  placement: 'top' | 'right' | 'bottom' | 'left' | 'auto',
-  hideOnTouchDevices: boolean,
-  portalStyle: ?Object,
-  portalClassName: ?string,
-  renderTarget: ?() => HTMLElement,
-  popperModifiers: ?Array<Object>,
-};
-
-type State = {
-  isOpen: boolean,
-};
-
-class BpkTooltipPortal extends Component<Props, State> {
-  popper: ?typeof createPopper;
-
-  targetRef: ?HTMLElement;
-
-  static propTypes = {
-    ...tooltipPropTypes,
-    ariaLabel: PropTypes.string.isRequired,
-    target: PropTypes.node.isRequired,
-    children: PropTypes.node.isRequired,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
-    hideOnTouchDevices: PropTypes.bool,
-    portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    portalClassName: PropTypes.string,
-    renderTarget: PropTypes.func,
-    popperModifiers: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
-  };
-
-  static defaultProps = {
-    ...tooltipDefaultProps,
-    placement: 'bottom',
-    hideOnTouchDevices: true,
-    portalStyle: null,
-    portalClassName: null,
-    renderTarget: null,
-    popperModifiers: null,
-  };
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@popperjs/core");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkTooltip = _interopRequireWildcard(require("./BpkTooltip"));
+var _BpkTooltipModule = _interopRequireDefault(require("./BpkTooltip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ariaLabel", "children", "hideOnTouchDevices", "padded", "placement", "popperModifiers", "portalClassName", "portalStyle", "renderTarget", "target"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
+                                                                                                                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                                                                                                                           */
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTooltipModule.default);
+const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch));
+class BpkTooltipPortal extends _react.Component {
   constructor() {
     super();
-
+    _defineProperty(this, "popper", void 0);
+    _defineProperty(this, "targetRef", void 0);
+    _defineProperty(this, "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 = (0, _core.createPopper)(targetElement, tooltipElement, {
+        placement: this.props.placement,
+        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
+      });
+      this.popper.update();
+    });
+    _defineProperty(this, "beforeClose", done => {
+      if (this.popper) {
+        this.popper.destroy();
+        this.popper = null;
+      }
+      done();
+    });
+    _defineProperty(this, "openTooltip", () => {
+      this.setState({
+        isOpen: true
+      });
+    });
+    _defineProperty(this, "closeTooltip", () => {
+      this.setState({
+        isOpen: false
+      });
+    });
     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) => {
-    // 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, tooltipElement, {
-      placement: this.props.placement,
-      modifiers: this.props.popperModifiers
-        ? [...this.props.popperModifiers, ...stdModifiers]
-        : stdModifiers,
-    });
-
-    this.popper.update();
-  };
-
-  beforeClose = (done: () => mixed) => {
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-
-    done();
-  };
-
-  openTooltip = () => {
-    this.setState({
-      isOpen: true,
-    });
-  };
-
-  closeTooltip = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
   render() {
-    const {
-      ariaLabel,
-      children,
-      hideOnTouchDevices,
-      padded,
-      placement,
-      popperModifiers,
-      portalClassName,
-      portalStyle,
-      renderTarget,
-      target,
-      ...rest
-    } = this.props;
-
+    const _this$props = this.props,
+      {
+        ariaLabel,
+        children,
+        hideOnTouchDevices,
+        padded,
+        placement,
+        popperModifiers,
+        portalClassName,
+        portalStyle,
+        renderTarget,
+        target
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
     const classNames = [getClassName('bpk-tooltip-portal')];
     const renderPortal = !hasTouchSupport() || !hideOnTouchDevices;
-
-    const targetWithAccessibilityProps = cloneElement(target, {
+    const targetWithAccessibilityProps = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [targetWithAccessibilityProps, renderPortal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkReactUtils.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__*/(0, _jsxRuntime.jsx)(_BpkTooltip.default, _objectSpread(_objectSpread({
+          padded: padded
+        }, rest), {}, {
+          children: children
+        }))
+      })]
+    });
   }
 }
-
-export default BpkTooltipPortal;
+_defineProperty(BpkTooltipPortal, "propTypes", _objectSpread(_objectSpread({}, _BpkTooltip.propTypes), {}, {
+  ariaLabel: _propTypes.default.string.isRequired,
+  target: _propTypes.default.node.isRequired,
+  children: _propTypes.default.node.isRequired,
+  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
+  hideOnTouchDevices: _propTypes.default.bool,
+  portalStyle: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  portalClassName: _propTypes.default.string,
+  renderTarget: _propTypes.default.func,
+  popperModifiers: _propTypes.default.arrayOf(_propTypes.default.object) // eslint-disable-line react/forbid-prop-types
+}));
+_defineProperty(BpkTooltipPortal, "defaultProps", _objectSpread(_objectSpread({}, _BpkTooltip.defaultProps), {}, {
+  placement: 'bottom',
+  hideOnTouchDevices: true,
+  portalStyle: null,
+  portalClassName: null,
+  renderTarget: null,
+  popperModifiers: null
+}));
+var _default = BpkTooltipPortal;
+exports.default = _default;

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

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TOOLTIP_TYPES = exports.ARROW_ID = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,14 +20,15 @@
  * 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 const ARROW_ID = 'js-bpk-popover-arrow';
-export const TOOLTIP_TYPES = {
+ */const ARROW_ID = 'js-bpk-popover-arrow';
+exports.ARROW_ID = ARROW_ID;
+const TOOLTIP_TYPES = {
   light: 'light',
-  dark: 'dark',
+  dark: 'dark'
 };
-
-export default { ARROW_ID, TOOLTIP_TYPES };
+exports.TOOLTIP_TYPES = TOOLTIP_TYPES;
+var _default = {
+  ARROW_ID,
+  TOOLTIP_TYPES
+};
+exports.default = _default;

package/bpk-react-utils/index.js

@@ -1,3 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _Portal.default;
+  }
+});
+Object.defineProperty(exports, "TransitionInitialMount", {
+  enumerable: true,
+  get: function () {
+    return _TransitionInitialMount.default;
+  }
+});
+Object.defineProperty(exports, "cssModules", {
+  enumerable: true,
+  get: function () {
+    return _cssModules.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "deprecated", {
+  enumerable: true,
+  get: function () {
+    return _deprecated.default;
+  }
+});
+Object.defineProperty(exports, "isDeviceIos", {
+  enumerable: true,
+  get: function () {
+    return _deviceDetection.isDeviceIos;
+  }
+});
+Object.defineProperty(exports, "isDeviceIpad", {
+  enumerable: true,
+  get: function () {
+    return _deviceDetection.isDeviceIpad;
+  }
+});
+Object.defineProperty(exports, "isDeviceIphone", {
+  enumerable: true,
+  get: function () {
+    return _deviceDetection.isDeviceIphone;
+  }
+});
+Object.defineProperty(exports, "isRTL", {
+  enumerable: true,
+  get: function () {
+    return _isRTL.default;
+  }
+});
+Object.defineProperty(exports, "withDefaultProps", {
+  enumerable: true,
+  get: function () {
+    return _withDefaultProps.default;
+  }
+});
+Object.defineProperty(exports, "wrapDisplayName", {
+  enumerable: true,
+  get: function () {
+    return _wrapDisplayName.default;
+  }
+});
+var _wrapDisplayName = _interopRequireDefault(require("./src/wrapDisplayName"));
+var _Portal = _interopRequireDefault(require("./src/Portal"));
+var _TransitionInitialMount = _interopRequireDefault(require("./src/TransitionInitialMount"));
+var _cssModules = _interopRequireDefault(require("./src/cssModules"));
+var _deprecated = _interopRequireDefault(require("./src/deprecated"));
+var _deviceDetection = require("./src/deviceDetection");
+var _withDefaultProps = _interopRequireDefault(require("./src/withDefaultProps"));
+var _isRTL = _interopRequireDefault(require("./src/isRTL"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,43 +90,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import wrapDisplayName from './src/wrapDisplayName';
-import Portal from './src/Portal';
-import TransitionInitialMount from './src/TransitionInitialMount';
-import cssModules from './src/cssModules';
-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,
-  cssModules,
-  deprecated,
-  withDefaultProps,
-  wrapDisplayName,
-  isDeviceIphone,
-  isDeviceIpad,
-  isDeviceIos,
-  isRTL,
+var _default = {
+  Portal: _Portal.default,
+  TransitionInitialMount: _TransitionInitialMount.default,
+  cssModules: _cssModules.default,
+  deprecated: _deprecated.default,
+  withDefaultProps: _withDefaultProps.default,
+  wrapDisplayName: _wrapDisplayName.default,
+  isDeviceIphone: _deviceDetection.isDeviceIphone,
+  isDeviceIpad: _deviceDetection.isDeviceIpad,
+  isDeviceIos: _deviceDetection.isDeviceIos,
+  isRTL: _isRTL.default
 };
+exports.default = _default;