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

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -1,74 +1,54 @@
-/*
- * 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 PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import type { Node } from 'react';
-import { Component } from 'react';
-
-import { cssModules, isRTL } from '../../bpk-react-utils';
-
-import STYLES from './BpkMobileScrollContainer.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const computeScrollBarAwareHeight = (
-  scrollerEl: ?HTMLElement,
-  innerEl: ?HTMLElement,
-): ?string => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.computeScrollIndicatorClassName = exports.computeScrollBarAwareHeight = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _react = require("react");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkMobileScrollContainerModule = _interopRequireDefault(require("./BpkMobileScrollContainer.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "innerContainerTagName", "leadingIndicatorClassName", "scrollerRef", "showScrollbar", "style", "trailingIndicatorClassName"];
+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); }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkMobileScrollContainerModule.default);
+const computeScrollBarAwareHeight = (scrollerEl, innerEl) => {
   if (!(scrollerEl && innerEl)) {
     return null;
   }
-
   const scrollBarVisibile = scrollerEl.offsetHeight - innerEl.offsetHeight > 0;
   return scrollBarVisibile ? `${innerEl.offsetHeight / 16}rem` : 'auto';
 };
-
-const computeScrollIndicatorClassName = (
-  scrollerEl: ?HTMLElement,
-  leadingIndicatorClassName: ?string = null,
-  trailingIndicatorClassName: ?string = null,
-) => {
+exports.computeScrollBarAwareHeight = computeScrollBarAwareHeight;
+const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName = null, trailingIndicatorClassName = null) => {
   if (!scrollerEl) {
     return null;
   }
-
   const classNames = [];
-  const { offsetWidth, scrollLeft, scrollWidth } = scrollerEl;
-
-  const rtl = isRTL();
+  const {
+    offsetWidth,
+    scrollLeft,
+    scrollWidth
+  } = scrollerEl;
+  const rtl = (0, _bpkReactUtils.isRTL)();
   const scrollValue = rtl ? -Math.floor(scrollLeft) : Math.ceil(scrollLeft);
   const showLeadingIndicator = scrollValue > 0;
   const showTrailingIndicator = scrollValue < scrollWidth - offsetWidth;
   const showLeftIndicator = rtl ? showTrailingIndicator : showLeadingIndicator;
   const showRightIndicator = rtl ? showLeadingIndicator : showTrailingIndicator;
-
   if (showLeftIndicator) {
-    classNames.push(
-      getClassName('bpk-mobile-scroll-container--left-indicator'),
-    );
+    classNames.push(getClassName('bpk-mobile-scroll-container--left-indicator'));
   }
   if (showRightIndicator) {
-    classNames.push(
-      getClassName('bpk-mobile-scroll-container--right-indicator'),
-    );
+    classNames.push(getClassName('bpk-mobile-scroll-container--right-indicator'));
   }
   if (showLeadingIndicator && leadingIndicatorClassName) {
     classNames.push(leadingIndicatorClassName);
@@ -76,165 +56,118 @@ const computeScrollIndicatorClassName = (
   if (showTrailingIndicator && trailingIndicatorClassName) {
     classNames.push(trailingIndicatorClassName);
   }
-
   return classNames;
 };
-
-type Props = {
-  children: Node,
-  innerContainerTagName: string,
-  className: ?string,
-  leadingIndicatorClassName: ?string,
-  trailingIndicatorClassName: ?string,
-  scrollerRef: ?Function,
-  style: ?Object,
-  showScrollbar: ?boolean,
-};
-
-type State = {
-  computedHeight: ?string,
-  scrollIndicatorClassName: ?string,
-};
-
-class BpkMobileScrollContainer extends Component<Props, State> {
-  innerEl: ?HTMLElement;
-
-  scrollerEl: ?HTMLElement;
-
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    scrollerRef: PropTypes.func,
-    innerContainerTagName: PropTypes.string,
-    className: PropTypes.string,
-    leadingIndicatorClassName: PropTypes.string,
-    trailingIndicatorClassName: PropTypes.string,
-    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    showScrollbar: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    scrollerRef: null,
-    innerContainerTagName: 'div',
-    className: null,
-    leadingIndicatorClassName: null,
-    trailingIndicatorClassName: null,
-    style: null,
-    showScrollbar: false,
-  };
-
+exports.computeScrollIndicatorClassName = computeScrollIndicatorClassName;
+class BpkMobileScrollContainer extends _react.Component {
   constructor() {
     super();
-
+    _defineProperty(this, "innerEl", void 0);
+    _defineProperty(this, "scrollerEl", void 0);
+    _defineProperty(this, "onWindowResize", (0, _lodash.default)(() => {
+      this.setScrollBarAwareHeight();
+      this.setScrollIndicatorClassName();
+    }, 100));
+    _defineProperty(this, "setScrollIndicatorClassName", () => {
+      const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
+      if (!classNames) {
+        return;
+      }
+      this.setState(() => ({
+        scrollIndicatorClassName: classNames.join(' ')
+      }));
+    });
+    _defineProperty(this, "setScrollBarAwareHeight", () => {
+      if (this.props.showScrollbar) {
+        return;
+      }
+      const computedHeight = computeScrollBarAwareHeight(this.scrollerEl, this.innerEl);
+      if (!computedHeight) {
+        return;
+      }
+      this.setState(() => ({
+        computedHeight
+      }));
+    });
     this.state = {
       computedHeight: 'auto',
-      scrollIndicatorClassName: null,
+      scrollIndicatorClassName: null
     };
   }
-
   componentDidMount() {
     this.setScrollBarAwareHeight();
     this.setScrollIndicatorClassName();
     window.addEventListener('resize', this.onWindowResize);
   }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.onWindowResize);
   }
-
-  onWindowResize = debounce(() => {
-    this.setScrollBarAwareHeight();
-    this.setScrollIndicatorClassName();
-  }, 100);
-
-  setScrollIndicatorClassName = () => {
-    const classNames = computeScrollIndicatorClassName(
-      this.scrollerEl,
-      this.props.leadingIndicatorClassName,
-      this.props.trailingIndicatorClassName,
-    );
-
-    if (!classNames) {
-      return;
-    }
-
-    this.setState(() => ({
-      scrollIndicatorClassName: classNames.join(' '),
-    }));
-  };
-
-  setScrollBarAwareHeight = () => {
-    if (this.props.showScrollbar) {
-      return;
-    }
-    const computedHeight = computeScrollBarAwareHeight(
-      this.scrollerEl,
-      this.innerEl,
-    );
-
-    if (!computedHeight) {
-      return;
-    }
-
-    this.setState(() => ({ computedHeight }));
-  };
-
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];
-    const {
-      children,
-      className,
-      innerContainerTagName,
-      leadingIndicatorClassName,
-      scrollerRef,
-      showScrollbar,
-      style,
-      trailingIndicatorClassName,
-      ...rest
-    } = this.props;
-
+    const _this$props = this.props,
+      {
+        children,
+        className,
+        innerContainerTagName,
+        leadingIndicatorClassName,
+        scrollerRef,
+        showScrollbar,
+        style,
+        trailingIndicatorClassName
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
     if (className) {
       classNames.push(className);
     }
     if (this.state.scrollIndicatorClassName) {
       classNames.push(this.state.scrollIndicatorClassName);
     }
-
-    const scrollerClassNames = getClassName(
-      'bpk-mobile-scroll-container__scroller',
-      showScrollbar && 'bpk-mobile-scroll-container__showScrollbar',
-    );
-
+    const scrollerClassNames = getClassName('bpk-mobile-scroll-container__scroller', showScrollbar && 'bpk-mobile-scroll-container__showScrollbar');
     const InnerContainer = innerContainerTagName;
-
-    return (
-      <div
-        {...rest}
-        className={classNames.join(' ')}
-        style={{ ...style, height: this.state.computedHeight }}
-      >
-        <div
-          ref={(el) => {
-            if (scrollerRef) {
-              scrollerRef(el);
-            }
-            this.scrollerEl = el;
-          }}
-          onScroll={this.setScrollIndicatorClassName}
-          className={scrollerClassNames}
-        >
-          <InnerContainer
-            ref={(el) => {
-              this.innerEl = el;
-            }}
-            className={getClassName('bpk-mobile-scroll-container__inner')}
-          >
-            {children}
-          </InnerContainer>
-        </div>
-      </div>
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      className: classNames.join(' '),
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        height: this.state.computedHeight
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: el => {
+          if (scrollerRef) {
+            scrollerRef(el);
+          }
+          this.scrollerEl = el;
+        },
+        onScroll: this.setScrollIndicatorClassName,
+        className: scrollerClassNames,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerContainer, {
+          ref: el => {
+            this.innerEl = el;
+          },
+          className: getClassName('bpk-mobile-scroll-container__inner'),
+          children: children
+        })
+      })
+    }));
   }
 }
-
-export default BpkMobileScrollContainer;
-export { computeScrollBarAwareHeight, computeScrollIndicatorClassName };
+_defineProperty(BpkMobileScrollContainer, "propTypes", {
+  children: _propTypes.default.node.isRequired,
+  scrollerRef: _propTypes.default.func,
+  innerContainerTagName: _propTypes.default.string,
+  className: _propTypes.default.string,
+  leadingIndicatorClassName: _propTypes.default.string,
+  trailingIndicatorClassName: _propTypes.default.string,
+  style: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  showScrollbar: _propTypes.default.bool
+});
+_defineProperty(BpkMobileScrollContainer, "defaultProps", {
+  scrollerRef: null,
+  innerContainerTagName: 'div',
+  className: null,
+  leadingIndicatorClassName: null,
+  trailingIndicatorClassName: null,
+  style: null,
+  showScrollbar: false
+});
+var _default = BpkMobileScrollContainer;
+exports.default = _default;

package/bpk-component-modal/index.js

@@ -1,3 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "defaultProps", {
+  enumerable: true,
+  get: function () {
+    return _BpkModal.defaultProps;
+  }
+});
+Object.defineProperty(exports, "propTypes", {
+  enumerable: true,
+  get: function () {
+    return _BpkModal.propTypes;
+  }
+});
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+var _BpkModal = _interopRequireWildcard(require("./src/BpkModal"));
+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 }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,13 +44,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import themeAttributes from './src/themeAttributes';
-import BpkModal, { type Props, propTypes, defaultProps } from './src/BpkModal';
-
-export type BpkModalProps = Props;
-
-export default BpkModal;
-export { propTypes, defaultProps, themeAttributes };
+var _default = _BpkModal.default;
+exports.default = _default;

package/bpk-component-modal/src/BpkModal.js

@@ -1,123 +1,86 @@
-/*
- * 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 PropTypes from 'prop-types';
-
-import { withScrim } from '../../bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
-
-import STYLES from './BpkModal.module.scss';
-import BpkModalInner, {
-  propTypes as modalDialogPropTypes,
-  defaultProps as modalDialogDefaultProps,
-  type Props as ModalDialogProps,
-} from './BpkModalInner';
-
-const getClassName = cssModules(STYLES);
-const ScrimBpkModalInner = withScrim(BpkModalInner);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkScrimUtils = require("../../bpk-scrim-utils");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkModalModule = _interopRequireDefault(require("./BpkModal.module.css"));
+var _BpkModalInner = _interopRequireWildcard(require("./BpkModalInner"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["closeOnEscPressed", "closeOnScrimClick", "fullScreen", "fullScreenOnMobile", "isIphone", "isOpen", "onClose", "renderTarget"];
+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 _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); }
+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; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalModule.default);
+const ScrimBpkModalInner = (0, _bpkScrimUtils.withScrim)(_BpkModalInner.default);
 
 // Please remove this type when `withScrim` is flow-typed
-type ScrimProps = {
-  isIphone: boolean,
-  dialogRef: () => ?HTMLElement,
-};
-
-export type Props = {
-  // The `withScrim` HOC satisfies some of the ModalDialogs required
-  // props but it's not flow typed yet so this
-  // diff will suffice for now.
-  ...$Exact<$Diff<ModalDialogProps, ScrimProps>>,
-  isOpen: boolean,
-  isIphone: boolean,
-  closeOnScrimClick: boolean,
-  closeOnEscPressed: boolean,
-  renderTarget: ?() => ?HTMLElement,
-  onClose: (event: SyntheticEvent<>) => void | null,
-};
 
-const BpkModal = (props: Props) => {
+const BpkModal = props => {
   const {
-    closeOnEscPressed,
-    closeOnScrimClick,
-    fullScreen,
-    fullScreenOnMobile,
-    isIphone,
-    isOpen,
-    onClose,
-    renderTarget,
-    ...rest
-  } = props;
-
+      closeOnEscPressed,
+      closeOnScrimClick,
+      fullScreen,
+      fullScreenOnMobile,
+      isIphone,
+      isOpen,
+      onClose,
+      renderTarget
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   const containerClass = [getClassName('bpk-modal__container')];
-
   if (fullScreen || isIphone) {
     containerClass.push(getClassName('bpk-modal__container--full-screen'));
   } else if (fullScreenOnMobile) {
-    containerClass.push(
-      getClassName('bpk-modal__container--full-screen-mobile'),
-    );
+    containerClass.push(getClassName('bpk-modal__container--full-screen-mobile'));
   }
-
-  return (
-    <Portal
-      isOpen={isOpen}
-      onClose={onClose}
-      renderTarget={renderTarget}
-      closeOnEscPressed={closeOnEscPressed}
-    >
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <ScrimBpkModalInner
-        onClose={onClose}
-        fullScreenOnMobile={fullScreenOnMobile}
-        fullScreen={fullScreen}
-        closeOnScrimClick={closeOnScrimClick}
-        containerClassName={containerClass.join(' ')}
-        isIphone={isIphone}
-        {...rest}
-      />
-    </Portal>
-  );
-};
-
-const { dialogRef, ...newModalDialogPropTypes } = modalDialogPropTypes;
-
-export const propTypes = {
-  ...newModalDialogPropTypes,
-  onClose: PropTypes.func,
-  isIphone: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-  renderTarget: PropTypes.func,
-  closeOnScrimClick: PropTypes.bool,
-  closeOnEscPressed: PropTypes.bool,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkReactUtils.Portal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    renderTarget: renderTarget,
+    closeOnEscPressed: closeOnEscPressed,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrimBpkModalInner, _objectSpread({
+      onClose: onClose,
+      fullScreenOnMobile: fullScreenOnMobile,
+      fullScreen: fullScreen,
+      closeOnScrimClick: closeOnScrimClick,
+      containerClassName: containerClass.join(' '),
+      isIphone: isIphone
+    }, rest))
+  });
 };
-
-export const defaultProps = {
-  ...modalDialogDefaultProps,
+const {
+    dialogRef
+  } = _BpkModalInner.propTypes,
+  newModalDialogPropTypes = _objectWithoutProperties(_BpkModalInner.propTypes, ["dialogRef"]);
+const propTypes = _objectSpread(_objectSpread({}, newModalDialogPropTypes), {}, {
+  onClose: _propTypes.default.func,
+  isIphone: _propTypes.default.bool,
+  isOpen: _propTypes.default.bool.isRequired,
+  renderTarget: _propTypes.default.func,
+  closeOnScrimClick: _propTypes.default.bool,
+  closeOnEscPressed: _propTypes.default.bool
+});
+exports.propTypes = propTypes;
+const defaultProps = _objectSpread(_objectSpread({}, _BpkModalInner.defaultProps), {}, {
   onClose: () => null,
   renderTarget: null,
-  isIphone: isDeviceIphone(),
+  isIphone: (0, _bpkReactUtils.isDeviceIphone)(),
   closeOnScrimClick: true,
-  closeOnEscPressed: true,
-};
-
-BpkModal.propTypes = { ...propTypes };
-BpkModal.defaultProps = { ...defaultProps };
-
-export default BpkModal;
+  closeOnEscPressed: true
+});
+exports.defaultProps = defaultProps;
+BpkModal.propTypes = _objectSpread({}, propTypes);
+BpkModal.defaultProps = _objectSpread({}, defaultProps);
+var _default = BpkModal;
+exports.default = _default;

package/bpk-component-modal/src/BpkModal.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-modal__container{display:block}}@media (max-width: 32.25rem){.bpk-modal__container--full-screen-mobile{display:flex;padding:0}}.bpk-modal__container--full-screen{display:flex;padding:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-modal__container{display:block}}@media (max-width: 32rem){.bpk-modal__container--full-screen-mobile{display:flex;padding:0}}.bpk-modal__container--full-screen{display:flex;padding:0}