@skyscanner/backpack-web 22.3.0 → 23.0.0

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -1,140 +1,114 @@
-/*
- * 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 type { Node } from 'react';
-import { Component } from 'react';
-import focusStore from 'a11y-focus-store';
-
-import { Portal, cssModules } from '../../bpk-react-utils';
-
-import keyboardFocusScope from './keyboardFocusScope';
-import STYLES from './BpkPopover.module.scss';
-import BpkPopover, {
-  propTypes as popoverPropTypes,
-  defaultProps as popoverDefaultProps,
-  type Props as PopoverProps,
-} from './BpkPopover';
-
-const getClassName = cssModules(STYLES);
-
-export type Props = {
-  ...$Exact<PopoverProps>,
-  target: (() => ?HTMLElement) | Node,
-  isOpen: boolean,
-  placement: ?('top' | 'right' | 'bottom' | 'left'),
-  portalStyle: ?Object,
-  portalClassName: ?string,
-  renderTarget: ?() => ?HTMLElement,
-  popperModifiers: ?Array<Object>,
-};
-
-export const propTypes = {
-  ...popoverPropTypes,
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  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
-};
-
-export const defaultProps = {
-  ...popoverDefaultProps,
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.default = void 0;
+var _core = require("@popperjs/core");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _a11yFocusStore = _interopRequireDefault(require("a11y-focus-store"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _keyboardFocusScope = _interopRequireDefault(require("./keyboardFocusScope"));
+var _BpkPopoverModule = _interopRequireDefault(require("./BpkPopover.module.css"));
+var _BpkPopover = _interopRequireWildcard(require("./BpkPopover"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["isOpen", "onClose", "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 _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 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 _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)(_BpkPopoverModule.default);
+const propTypes = _objectSpread(_objectSpread({}, _BpkPopover.propTypes), {}, {
+  target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  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
+});
+exports.propTypes = propTypes;
+const defaultProps = _objectSpread(_objectSpread({}, _BpkPopover.defaultProps), {}, {
   placement: 'bottom',
   portalStyle: null,
   portalClassName: null,
   renderTarget: null,
-  popperModifiers: null,
-};
-
-class BpkPopoverPortal extends Component<Props> {
-  popper: ?typeof createPopper;
-
-  suppressRestoreFocus: boolean;
-
-  previousTargetElement: ?HTMLElement;
-
-  static propTypes = propTypes;
-
-  static defaultProps = defaultProps;
-
+  popperModifiers: null
+});
+exports.defaultProps = defaultProps;
+class BpkPopoverPortal extends _react.Component {
   constructor() {
     super();
-
+    _defineProperty(this, "popper", void 0);
+    _defineProperty(this, "suppressRestoreFocus", void 0);
+    _defineProperty(this, "previousTargetElement", void 0);
+    _defineProperty(this, "onRender", (popoverElement, targetElement) => {
+      this.position(popoverElement, targetElement);
+    });
+    // The order of events here is as follows:
+    // - `onClose` is called by `Portal`
+    // - The consumer changes `isOpen` to `false`
+    // - `beforeClose` is called by `Portal`
+    // - `beforeClose` calls the `done` callback which closes the `Portal`
+    // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
+    // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
+    _defineProperty(this, "onClose", (event, information) => {
+      // If the user has clicked outside the popover then we don't want focus to be restored
+      // otherwise it will be stolen back from the element they clicked on.
+      // Here we suppress restoring focus before the consumer is told about the close and updates state.
+      this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
+      if (this.props.onClose) {
+        this.props.onClose(event, information);
+      }
+    });
+    // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
+    // As a result, `onClose` is called first, followed by `beforeClose`.
+    _defineProperty(this, "beforeClose", done => {
+      if (this.popper) {
+        this.popper.destroy();
+        this.popper = null;
+        this.previousTargetElement = null;
+      }
+      _keyboardFocusScope.default.unscopeFocus();
+      if (!this.suppressRestoreFocus) {
+        _a11yFocusStore.default.restoreFocus();
+        this.suppressRestoreFocus = false;
+      }
+      done();
+    });
     this.popper = null;
     this.previousTargetElement = null;
   }
-
-  onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
-    this.position(popoverElement, targetElement);
-  };
-
-  // The order of events here is as follows:
-  // - `onClose` is called by `Portal`
-  // - The consumer changes `isOpen` to `false`
-  // - `beforeClose` is called by `Portal`
-  // - `beforeClose` calls the `done` callback which closes the `Portal`
-
-  // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
-  // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
-  onClose = (event: Object, information: { source: string }) => {
-    // If the user has clicked outside the popover then we don't want focus to be restored
-    // otherwise it will be stolen back from the element they clicked on.
-    // Here we suppress restoring focus before the consumer is told about the close and updates state.
-    this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
-
-    if (this.props.onClose) {
-      this.props.onClose(event, information);
-    }
-  };
-
-  // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
-  // As a result, `onClose` is called first, followed by `beforeClose`.
-  beforeClose = (done: () => void) => {
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-      this.previousTargetElement = null;
-    }
-
-    keyboardFocusScope.unscopeFocus();
-    if (!this.suppressRestoreFocus) {
-      focusStore.restoreFocus();
-      this.suppressRestoreFocus = false;
-    }
-
-    done();
-  };
-
-  position(popoverElement: HTMLElement, targetElement: ?HTMLElement) {
+  position(popoverElement, targetElement) {
     if (!targetElement) {
       return;
     }
-
-    const targetElementHasChanged =
-      targetElement !== this.previousTargetElement;
-
+    const targetElementHasChanged = targetElement !== this.previousTargetElement;
     if (targetElementHasChanged && this.popper) {
       this.popper.destroy();
       this.popper = null;
@@ -145,8 +119,12 @@ class BpkPopoverPortal extends Component<Props> {
       name: 'applyArrowHide',
       enabled: true,
       phase: 'write',
-      fn({ state }) {
-        const { arrow } = state.elements;
+      fn({
+        state
+      }) {
+        const {
+          arrow
+        } = state.elements;
         if (arrow) {
           if (state.modifiersData.arrow.centerOffset !== 0) {
             arrow.setAttribute('data-hide', '');
@@ -154,88 +132,76 @@ class BpkPopoverPortal extends Component<Props> {
             arrow.removeAttribute('data-hide');
           }
         }
-      },
+      }
     };
 
     // 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, 17],
-        },
-      },
-      applyArrowHide,
-    ];
-
+    const stdModifiers = [{
+      name: 'computeStyles',
+      options: {
+        gpuAcceleration: false
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 17]
+      }
+    }, applyArrowHide];
     if (!this.popper) {
-      this.popper = createPopper(targetElement, popoverElement, {
+      this.popper = (0, _core.createPopper)(targetElement, popoverElement, {
         placement: this.props.placement,
         onFirstUpdate: () => {
           if (targetElement) {
             targetElement.focus();
           }
-          focusStore.storeFocus();
-          keyboardFocusScope.scopeFocus(popoverElement);
+          _a11yFocusStore.default.storeFocus();
+          _keyboardFocusScope.default.scopeFocus(popoverElement);
         },
-        modifiers: this.props.popperModifiers
-          ? [...this.props.popperModifiers, ...stdModifiers]
-          : stdModifiers,
+        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
       });
     }
-
     this.previousTargetElement = targetElement;
     if (this.popper) {
       this.popper.update();
     }
   }
-
   render() {
-    const {
-      isOpen,
-      onClose,
-      placement,
-      popperModifiers,
-      portalClassName,
-      portalStyle,
-      renderTarget,
-      target,
-      ...rest
-    } = this.props;
-
+    const _this$props = this.props,
+      {
+        isOpen,
+        onClose,
+        placement,
+        popperModifiers,
+        portalClassName,
+        portalStyle,
+        renderTarget,
+        target
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
     const classNames = [getClassName('bpk-popover-portal')];
-
     if (portalClassName) {
       classNames.push(portalClassName);
     }
-
-    return (
-      <>
-        {typeof target !== 'function' && target}
-        <Portal
-          beforeClose={this.beforeClose}
-          className={classNames.join(' ')}
-          isOpen={isOpen}
-          onClose={this.onClose}
-          onRender={this.onRender}
-          style={portalStyle}
-          renderTarget={renderTarget}
-          target={target}
-        >
-          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-          <BpkPopover onClose={this.onClose} {...rest} />
-        </Portal>
-      </>
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [typeof target !== 'function' && target, /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkReactUtils.Portal, {
+        beforeClose: this.beforeClose,
+        className: classNames.join(' '),
+        isOpen: isOpen,
+        onClose: this.onClose,
+        onRender: this.onRender,
+        style: portalStyle,
+        renderTarget: renderTarget,
+        target: target,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BpkPopover.default, _objectSpread({
+          onClose: this.onClose
+        }, rest))
+      })]
+    });
   }
 }
-
-export default BpkPopoverPortal;
+_defineProperty(BpkPopoverPortal, "propTypes", propTypes);
+_defineProperty(BpkPopoverPortal, "defaultProps", defaultProps);
+var _default = BpkPopoverPortal;
+exports.default = _default;

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

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

package/bpk-component-popover/src/keyboardFocusScope.js

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _tabbable = _interopRequireDefault(require("tabbable"));
+var _focusin = _interopRequireDefault(require("focusin"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,41 +30,31 @@
 // it only prevents it leaving due to keyboard events.
 // Clicks outside the target element will move focus as normal.
 
-import tabbable from 'tabbable';
-import focusin from 'focusin';
-
 let polyfilled = false;
 let focusTrapped = false;
-
-const init = (element) => {
+const init = element => {
   // lazily polyfill focusin for firefox
   if (!polyfilled) {
-    focusin.polyfill();
+    _focusin.default.polyfill();
     polyfilled = true;
   }
-
   const focus = () => {
-    (tabbable(element)[0] || element).focus();
+    ((0, _tabbable.default)(element)[0] || element).focus();
   };
-
   const enableFocusTrapping = () => {
     focusTrapped = true;
   };
-
   const disableFocusTrapping = () => {
     focusTrapped = false;
   };
-
-  const checkFocus = (event) => {
+  const checkFocus = event => {
     if (!focusTrapped) {
       return;
     }
-
     if (element !== event.target && !element.contains(event.target)) {
       focus();
     }
   };
-
   focus();
 
   // As we only want to trap focus for keyboard navigation, we enable focus trapping on keydown and disable it again on keyup.
@@ -63,24 +62,23 @@ const init = (element) => {
   document.addEventListener('keydown', enableFocusTrapping);
   document.addEventListener('focusin', checkFocus);
   document.addEventListener('keyup', disableFocusTrapping);
-
   return () => {
     document.removeEventListener('keydown', enableFocusTrapping);
     document.removeEventListener('focusin', checkFocus);
     document.removeEventListener('keyup', disableFocusTrapping);
   };
 };
-
 let teardownFn;
-
-const scopeFocus = (element) => {
+const scopeFocus = element => {
   if (teardownFn) teardownFn();
   teardownFn = init(element);
 };
-
 const unscopeFocus = () => {
   if (teardownFn) teardownFn();
   teardownFn = null;
 };
-
-export default { scopeFocus, unscopeFocus };
+var _default = {
+  scopeFocus,
+  unscopeFocus
+};
+exports.default = _default;

package/bpk-component-popover/src/themeAttributes.js

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bpkComponentLink = require("../../bpk-component-link");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,9 +22,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
-
-export default [...linkAttributes];
+var _default = [..._bpkComponentLink.themeAttributes];
+exports.default = _default;

package/bpk-component-price/index.js

@@ -1,3 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ALIGNS", {
+  enumerable: true,
+  get: function () {
+    return _commonTypes.ALIGNS;
+  }
+});
+Object.defineProperty(exports, "SIZES", {
+  enumerable: true,
+  get: function () {
+    return _commonTypes.SIZES;
+  }
+});
+exports.default = void 0;
+var _BpkPrice = _interopRequireDefault(require("./src/BpkPrice"));
+var _commonTypes = require("./src/common-types");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,10 +36,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
-
-import BpkPrice from './src/BpkPrice';
-import { SIZES, ALIGNS } from './src/common-types';
-
-export default BpkPrice;
-export { SIZES, ALIGNS };
+var _default = _BpkPrice.default;
+exports.default = _default;