@skyscanner/backpack-web 8.0.0 → 9.1.0-alpha.1

package/bpk-component-modal/index.css

@@ -0,0 +1,46 @@
+/*  imported from BpkModal.module.scss  */
+
+@keyframes BpkModal-module__bpk-keyframe-spin___mvc0C{100%{transform:rotate(1turn)}}
+
+.BpkModal-module__bpk-modal__container___33Wc9{display:flex;padding:1.5rem}
+
+@media screen\0 {.BpkModal-module__bpk-modal__container___33Wc9{display:block}}
+
+@media (max-width: 32rem){.BpkModal-module__bpk-modal__container--full-screen-mobile___B9loV{display:flex;padding:0}}
+
+.BpkModal-module__bpk-modal__container--full-screen___2rIwQ{display:flex;padding:0}
+/*  imported from BpkModalInner.module.scss  */
+
+@keyframes BpkModalInner-module__bpk-keyframe-spin___1wGLi{100%{transform:rotate(1turn)}}
+
+.BpkModalInner-module__bpk-modal___3gk7A{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}
+
+@media (max-width: 32rem){.BpkModalInner-module__bpk-modal--full-screen-mobile___3xn1W{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}
+
+.BpkModalInner-module__bpk-modal--full-screen___1hjPL{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}
+
+@media (min-width: 32.0625rem){.BpkModalInner-module__bpk-modal--wide___8BhLC{max-width:64rem}}
+
+.BpkModalInner-module__bpk-modal--appear___2u9II{transform:scale(0.9);opacity:0}
+
+.BpkModalInner-module__bpk-modal--appear-active___2XFSF{transform:scale(1);opacity:1}
+
+.BpkModalInner-module__bpk-modal__header___2Wuxn{box-shadow:0 -1px 0 0 #dddde5 inset}
+
+.BpkModalInner-module__bpk-modal__navigation___196Ds{display:flex;justify-content:space-between;background-color:#fff}
+
+.BpkModalInner-module__bpk-modal__heading___3LHXI{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}
+
+.BpkModalInner-module__bpk-modal__close-button___v91f3{position:relative;right:auto;margin-left:1rem;margin-right:0}
+
+html[dir='rtl'] .BpkModalInner-module__bpk-modal__close-button___v91f3{margin-left:0;margin-right:1rem}
+
+html[dir='rtl'] .BpkModalInner-module__bpk-modal__close-button___v91f3{left:auto}
+
+.BpkModalInner-module__bpk-modal__accessory-view___34J1c{position:relative;left:auto;margin-right:1rem}
+
+html[dir='rtl'] .BpkModalInner-module__bpk-modal__accessory-view___34J1c{right:auto;margin-left:1rem}
+
+.BpkModalInner-module__bpk-modal__content___23H5k{flex:1;overflow-y:auto}
+
+.BpkModalInner-module__bpk-modal__content--padded___3xJ_V{padding:1rem}

package/bpk-component-modal/index.js

@@ -1,3 +1,38 @@
+"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 +50,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,59 +1,50 @@
-/*
- * 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 React from 'react';
-
-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);
-
-// Please remove this type when `withScrim` is flow-typed
-type ScrimProps = {
-  isIphone: boolean,
-  dialogRef: () => ?HTMLElement,
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bpkScrimUtils = require("../../bpk-scrim-utils");
+
+var _bpkReactUtils = require("../../bpk-react-utils");
+
+var _BpkModalInner = _interopRequireWildcard(require("./BpkModalInner"));
+
+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 }; }
 
-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,
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+var STYLES = {
+  "bpk-modal__container": "BpkModal-module__bpk-modal__container___33Wc9",
+  "bpk-modal__container--full-screen-mobile": "BpkModal-module__bpk-modal__container--full-screen-mobile___B9loV",
+  "bpk-modal__container--full-screen": "BpkModal-module__bpk-modal__container--full-screen___2rIwQ",
+  "bpk-keyframe-spin": "BpkModal-module__bpk-keyframe-spin___mvc0C"
 };
+const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
+const ScrimBpkModalInner = (0, _bpkScrimUtils.withScrim)(_BpkModalInner.default); // Please remove this type when `withScrim` is flow-typed
 
-const BpkModal = (props: Props) => {
+const BpkModal = props => {
   const {
     closeOnEscPressed,
     closeOnScrimClick,
@@ -62,63 +53,59 @@ const BpkModal = (props: Props) => {
     isIphone,
     isOpen,
     onClose,
-    renderTarget,
-    ...rest
-  } = props;
+    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>
-  );
+  return /*#__PURE__*/_react.default.createElement(_bpkReactUtils.Portal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    renderTarget: renderTarget,
+    closeOnEscPressed: closeOnEscPressed
+  }, /*#__PURE__*/_react.default.createElement(ScrimBpkModalInner, _extends({
+    onClose: onClose,
+    fullScreenOnMobile: fullScreenOnMobile,
+    fullScreen: fullScreen,
+    closeOnScrimClick: closeOnScrimClick,
+    containerClassName: containerClass.join(' '),
+    isIphone: isIphone
+  }, rest)));
 };
 
-const { dialogRef, ...newModalDialogPropTypes } = modalDialogPropTypes;
+const {
+  dialogRef
+} = _BpkModalInner.propTypes,
+      newModalDialogPropTypes = _objectWithoutProperties(_BpkModalInner.propTypes, ["dialogRef"]);
 
-export const propTypes = {
-  ...newModalDialogPropTypes,
-  onClose: PropTypes.func,
-  isIphone: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-  renderTarget: PropTypes.func,
-  closeOnScrimClick: PropTypes.bool,
-  closeOnEscPressed: PropTypes.bool,
-};
+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;
 
-export const defaultProps = {
-  ...modalDialogDefaultProps,
+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/BpkModalInner.js

@@ -1,56 +1,51 @@
-/*
- * 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 React, { type Node, type Element } from 'react';
-
-import { BpkButtonLink } from '../../bpk-component-link';
-import BpkCloseButton from '../../bpk-component-close-button';
-import BpkNavigationBar from '../../bpk-component-navigation-bar';
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkModalInner.module.scss';
-import { titlePropType, onClosePropType } from './customPropTypes';
-
-const getClassName = cssModules(STYLES);
-
-export type Props = {
-  id: string,
-  children: Node,
-  wide: boolean,
-  isIphone: boolean,
-  showHeader: boolean,
-  fullScreenOnMobile: boolean,
-  fullScreen: boolean,
-  padded: boolean,
-  dialogRef: (ref: ?HTMLElement) => void,
-  onClose: (event: SyntheticEvent<>) => void,
-  className: ?string,
-  contentClassName: ?string,
-  title: ?string,
-  closeLabel: string,
-  closeText: ?string,
-  accessoryView: ?Element<any>,
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.default = void 0;
+
+var _bpkComponentLink = require("../../bpk-component-link");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bpkComponentCloseButton = _interopRequireDefault(require("../../bpk-component-close-button"));
+
+var _bpkComponentNavigationBar = _interopRequireDefault(require("../../bpk-component-navigation-bar"));
+
+var _bpkReactUtils = require("../../bpk-react-utils");
+
+var _customPropTypes = require("./customPropTypes");
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var STYLES = {
+  "bpk-modal": "BpkModalInner-module__bpk-modal___3gk7A",
+  "bpk-modal--full-screen-mobile": "BpkModalInner-module__bpk-modal--full-screen-mobile___3xn1W",
+  "bpk-modal--full-screen": "BpkModalInner-module__bpk-modal--full-screen___1hjPL",
+  "bpk-modal--wide": "BpkModalInner-module__bpk-modal--wide___8BhLC",
+  "bpk-modal--appear": "BpkModalInner-module__bpk-modal--appear___2u9II",
+  "bpk-modal--appear-active": "BpkModalInner-module__bpk-modal--appear-active___2XFSF",
+  "bpk-modal__header": "BpkModalInner-module__bpk-modal__header___2Wuxn",
+  "bpk-modal__navigation": "BpkModalInner-module__bpk-modal__navigation___196Ds",
+  "bpk-modal__heading": "BpkModalInner-module__bpk-modal__heading___3LHXI",
+  "bpk-modal__close-button": "BpkModalInner-module__bpk-modal__close-button___v91f3",
+  "bpk-modal__accessory-view": "BpkModalInner-module__bpk-modal__accessory-view___34J1c",
+  "bpk-modal__content": "BpkModalInner-module__bpk-modal__content___23H5k",
+  "bpk-modal__content--padded": "BpkModalInner-module__bpk-modal__content--padded___3xJ_V",
+  "bpk-keyframe-spin": "BpkModalInner-module__bpk-keyframe-spin___1wGLi"
 };
+const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
 
-const BpkModalInner = (props: Props) => {
+const BpkModalInner = props => {
   const classNames = [getClassName('bpk-modal')];
   const contentClassNames = [getClassName('bpk-modal__content')];
   const navigationStyles = [getClassName('bpk-modal__navigation')];
@@ -58,6 +53,7 @@ const BpkModalInner = (props: Props) => {
   if (props.wide) {
     classNames.push(getClassName('bpk-modal--wide'));
   }
+
   if (props.className) {
     classNames.push(props.className);
   }
@@ -77,87 +73,63 @@ const BpkModalInner = (props: Props) => {
   }
 
   const headingId = `bpk-modal-heading-${props.id}`;
-
-  const accessoryViewFinal = props.accessoryView ? (
-    <span className={getClassName('bpk-modal__accessory-view')}>
-      {props.accessoryView}
-    </span>
-  ) : null;
-
-  return (
-    <TransitionInitialMount
-      appearClassName={getClassName('bpk-modal--appear')}
-      appearActiveClassName={getClassName('bpk-modal--appear-active')}
-      transitionTimeout={300}
-    >
-      <section
-        id={props.id}
-        tabIndex="-1"
-        role="dialog"
-        aria-labelledby={props.showHeader ? headingId : null}
-        className={classNames.join(' ')}
-        ref={props.dialogRef}
-      >
-        {props.showHeader && (
-          <header className={getClassName('bpk-modal__header')}>
-            <BpkNavigationBar
-              id={headingId}
-              className={navigationStyles.join(' ')}
-              title={
-                <h2
-                  id={headingId}
-                  className={getClassName('bpk-modal__heading')}
-                >
-                  {props.title}
-                </h2>
-              }
-              leadingButton={accessoryViewFinal}
-              trailingButton={
-                props.closeText ? (
-                  <BpkButtonLink
-                    className={getClassName('bpk-modal__close-button')}
-                    onClick={props.onClose}
-                  >
-                    {/* $FlowIgnore[incompatible-type] this is perfectly good because we're already doing a null check above. THANKS FLOW */}
-                    {props.closeText}
-                  </BpkButtonLink>
-                ) : (
-                  <BpkCloseButton
-                    className={getClassName('bpk-modal__close-button')}
-                    label={props.closeLabel}
-                    onClick={props.onClose}
-                  />
-                )
-              }
-            />
-          </header>
-        )}
-        <div className={contentClassNames.join(' ')}>{props.children}</div>
-      </section>
-    </TransitionInitialMount>
-  );
+  const accessoryViewFinal = props.accessoryView ? /*#__PURE__*/_react.default.createElement("span", {
+    className: getClassName('bpk-modal__accessory-view')
+  }, props.accessoryView) : null;
+  return /*#__PURE__*/_react.default.createElement(_bpkReactUtils.TransitionInitialMount, {
+    appearClassName: getClassName('bpk-modal--appear'),
+    appearActiveClassName: getClassName('bpk-modal--appear-active'),
+    transitionTimeout: 300
+  }, /*#__PURE__*/_react.default.createElement("section", {
+    id: props.id,
+    tabIndex: "-1",
+    role: "dialog",
+    "aria-labelledby": props.showHeader ? headingId : null,
+    className: classNames.join(' '),
+    ref: props.dialogRef
+  }, props.showHeader && /*#__PURE__*/_react.default.createElement("header", {
+    className: getClassName('bpk-modal__header')
+  }, /*#__PURE__*/_react.default.createElement(_bpkComponentNavigationBar.default, {
+    id: headingId,
+    className: navigationStyles.join(' '),
+    title: /*#__PURE__*/_react.default.createElement("h2", {
+      id: headingId,
+      className: getClassName('bpk-modal__heading')
+    }, props.title),
+    leadingButton: accessoryViewFinal,
+    trailingButton: props.closeText ? /*#__PURE__*/_react.default.createElement(_bpkComponentLink.BpkButtonLink, {
+      className: getClassName('bpk-modal__close-button'),
+      onClick: props.onClose
+    }, props.closeText) : /*#__PURE__*/_react.default.createElement(_bpkComponentCloseButton.default, {
+      className: getClassName('bpk-modal__close-button'),
+      label: props.closeLabel,
+      onClick: props.onClose
+    })
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: contentClassNames.join(' ')
+  }, props.children)));
 };
 
-export const propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isIphone: PropTypes.bool.isRequired,
-  dialogRef: PropTypes.func.isRequired,
-  title: titlePropType,
-  onClose: onClosePropType,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  wide: PropTypes.bool,
-  showHeader: PropTypes.bool,
-  fullScreenOnMobile: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-  padded: PropTypes.bool,
-  accesoryView: PropTypes.func,
+const propTypes = {
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node.isRequired,
+  isIphone: _propTypes.default.bool.isRequired,
+  dialogRef: _propTypes.default.func.isRequired,
+  title: _customPropTypes.titlePropType,
+  onClose: _customPropTypes.onClosePropType,
+  className: _propTypes.default.string,
+  contentClassName: _propTypes.default.string,
+  closeLabel: _propTypes.default.string,
+  closeText: _propTypes.default.string,
+  wide: _propTypes.default.bool,
+  showHeader: _propTypes.default.bool,
+  fullScreenOnMobile: _propTypes.default.bool,
+  fullScreen: _propTypes.default.bool,
+  padded: _propTypes.default.bool,
+  accesoryView: _propTypes.default.func
 };
-
-export const defaultProps = {
+exports.propTypes = propTypes;
+const defaultProps = {
   title: null,
   onClose: () => null,
   className: null,
@@ -169,10 +141,10 @@ export const defaultProps = {
   fullScreenOnMobile: true,
   fullScreen: false,
   padded: true,
-  accessoryView: null,
+  accessoryView: null
 };
-
-BpkModalInner.propTypes = { ...propTypes };
-BpkModalInner.defaultProps = { ...defaultProps };
-
-export default BpkModalInner;
+exports.defaultProps = defaultProps;
+BpkModalInner.propTypes = _objectSpread({}, propTypes);
+BpkModalInner.defaultProps = _objectSpread({}, defaultProps);
+var _default = BpkModalInner;
+exports.default = _default;

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

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titlePropType = exports.onClosePropType = void 0;
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,40 +22,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-export const titlePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+const titlePropType = (props, propName, componentName) => {
   const titleValue = props[propName];
 
   if (props.showHeader && (!titleValue || typeof titleValue !== 'string')) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`,
-    );
+    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`);
   }
 
   return null;
 };
 
-export const onClosePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+exports.titlePropType = titlePropType;
+
+const onClosePropType = (props, propName, componentName) => {
   const onCloseValue = props[propName];
 
-  if (
-    props.showHeader &&
-    (!onCloseValue || typeof onCloseValue !== 'function')
-  ) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`,
-    );
+  if (props.showHeader && (!onCloseValue || typeof onCloseValue !== 'function')) {
+    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`);
   }
 
   return null;
 };
+
+exports.onClosePropType = onClosePropType;