@skyscanner/backpack-web 23.3.0 → 24.1.0

package/bpk-component-modal/index.d.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import { BpkModalV2 } from './src/BpkModalV2/BpkModal';
+import themeAttributes from './src/themeAttributes';
+import BpkModal from './src/BpkModal';
+import type { Props } from './src/BpkModal';
+import { propTypes, defaultProps } from './src/legacy-prop-types';
+export type BpkModalProps = Props;
+export default BpkModal;
+export { propTypes, defaultProps, themeAttributes, BpkModalV2 };

package/bpk-component-modal/index.js

@@ -13,13 +13,13 @@ exports.default = void 0;
 Object.defineProperty(exports, "defaultProps", {
   enumerable: true,
   get: function () {
-    return _BpkModal2.defaultProps;
+    return _legacyPropTypes.defaultProps;
   }
 });
 Object.defineProperty(exports, "propTypes", {
   enumerable: true,
   get: function () {
-    return _BpkModal2.propTypes;
+    return _legacyPropTypes.propTypes;
   }
 });
 Object.defineProperty(exports, "themeAttributes", {
@@ -30,9 +30,8 @@ Object.defineProperty(exports, "themeAttributes", {
 });
 var _BpkModal = require("./src/BpkModalV2/BpkModal");
 var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-var _BpkModal2 = _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; }
+var _BpkModal2 = _interopRequireDefault(require("./src/BpkModal"));
+var _legacyPropTypes = require("./src/legacy-prop-types");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
@@ -51,5 +50,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 var _default = _BpkModal2.default;
 exports.default = _default;

package/bpk-component-modal/src/BpkModal.d.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/// <reference types="react" />
+import type { Props as ModalDialogProps } from './BpkModalInner';
+export type Props = ModalDialogProps & {
+    isOpen: boolean;
+    closeOnScrimClick?: boolean;
+    closeOnEscPressed?: boolean;
+    renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    onClose: (arg0: TouchEvent | MouseEvent | KeyboardEvent, arg1: {
+        source: 'ESCAPE' | 'DOCUMENT_CLICK';
+    }) => void;
+    getApplicationElement: () => HTMLElement | null;
+};
+declare const BpkModal: ({ title, onClose, className, contentClassName, closeLabel, closeText, wide, showHeader, fullScreenOnMobile, fullScreen, padded, accessoryView, renderTarget, isIphone, closeOnScrimClick, closeOnEscPressed, isOpen, ...rest }: Props) => JSX.Element;
+export default BpkModal;

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

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.defaultProps = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
 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 _BpkModalInner = _interopRequireDefault(require("./BpkModalInner"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["closeOnEscPressed", "closeOnScrimClick", "fullScreen", "fullScreenOnMobile", "isIphone", "isOpen", "onClose", "renderTarget"];
+const _excluded = ["title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView", "renderTarget", "isIphone", "closeOnScrimClick", "closeOnEscPressed", "isOpen"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,8 +27,6 @@ const _excluded = ["closeOnEscPressed", "closeOnScrimClick", "fullScreen", "full
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-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; }
@@ -40,21 +37,27 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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
-
-const BpkModal = props => {
-  const {
-      closeOnEscPressed,
-      closeOnScrimClick,
-      fullScreen,
-      fullScreenOnMobile,
-      isIphone,
-      isOpen,
-      onClose,
-      renderTarget
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+const BpkModal = _ref => {
+  let {
+      title = null,
+      onClose = () => null,
+      className = null,
+      contentClassName = null,
+      closeLabel = '',
+      closeText = null,
+      wide = false,
+      showHeader = true,
+      fullScreenOnMobile = true,
+      fullScreen = false,
+      padded = true,
+      accessoryView = null,
+      renderTarget = null,
+      isIphone = (0, _bpkReactUtils.isDeviceIphone)(),
+      closeOnScrimClick = true,
+      closeOnEscPressed = true,
+      isOpen
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const containerClass = [getClassName('bpk-modal__container')];
   if (fullScreen || isIphone) {
     containerClass.push(getClassName('bpk-modal__container--full-screen'));
@@ -76,28 +79,5 @@ const BpkModal = props => {
     }, rest))
   });
 };
-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: (0, _bpkReactUtils.isDeviceIphone)(),
-  closeOnScrimClick: true,
-  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.d.ts

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+import type { ReactNode } from 'react';
+export type Props = {
+    id: string;
+    children: ReactNode;
+    wide?: boolean;
+    isIphone: boolean;
+    showHeader?: boolean;
+    fullScreenOnMobile?: boolean;
+    fullScreen?: boolean;
+    padded?: boolean;
+    dialogRef: (ref: HTMLElement | null | undefined) => void;
+    onClose?: () => void;
+    className?: string | null;
+    contentClassName?: string | null;
+    title?: string | null;
+    closeLabel?: string;
+    closeText?: string | null;
+    accessoryView?: ReactNode;
+};
+declare const BpkModalInner: ({ isIphone, id, dialogRef, children, title, onClose, className, contentClassName, closeLabel, closeText, wide, showHeader, fullScreenOnMobile, fullScreen, padded, accessoryView, ...rest }: Props) => JSX.Element;
+export default BpkModalInner;

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

@@ -3,76 +3,95 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.defaultProps = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
 var _bpkComponentLink = require("../../bpk-component-link");
 var _bpkComponentCloseButton = _interopRequireDefault(require("../../bpk-component-close-button"));
 var _bpkComponentNavigationBar = _interopRequireDefault(require("../../bpk-component-navigation-bar"));
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkModalInnerModule = _interopRequireDefault(require("./BpkModalInner.module.css"));
-var _customPropTypes = require("./customPropTypes");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["isIphone", "id", "dialogRef", "children", "title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView"];
+/*
+ * 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.
+ */
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 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); } /*
-                                                                                                                                                                                                                                                                                                                                                                                           * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
+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)(_BpkModalInnerModule.default);
-const BpkModalInner = props => {
+const BpkModalInner = _ref => {
+  let {
+      isIphone,
+      id,
+      dialogRef,
+      children,
+      title = null,
+      onClose = () => null,
+      className = null,
+      contentClassName = null,
+      closeLabel = '',
+      closeText = null,
+      wide = false,
+      showHeader = true,
+      fullScreenOnMobile = true,
+      fullScreen = false,
+      padded = true,
+      accessoryView = null
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const classNames = [getClassName('bpk-modal')];
   const contentClassNames = [getClassName('bpk-modal__content')];
   const navigationStyles = [getClassName('bpk-modal__navigation')];
-  if (props.wide) {
+  if (wide) {
     classNames.push(getClassName('bpk-modal--wide'));
   }
-  if (props.className) {
-    classNames.push(props.className);
+  if (className) {
+    classNames.push(className);
   }
-  if (props.fullScreen || props.isIphone) {
+  if (fullScreen || isIphone) {
     classNames.push(getClassName('bpk-modal--full-screen'));
-  } else if (props.fullScreenOnMobile) {
+  } else if (fullScreenOnMobile) {
     classNames.push(getClassName('bpk-modal--full-screen-mobile'));
   }
-  if (props.padded) {
+  if (padded) {
     contentClassNames.push(getClassName('bpk-modal__content--padded'));
   }
-  if (props.contentClassName) {
-    contentClassNames.push(props.contentClassName);
+  if (contentClassName) {
+    contentClassNames.push(contentClassName);
   }
-  const headingId = `bpk-modal-heading-${props.id}`;
-  const accessoryViewFinal = props.accessoryView ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  const headingId = `bpk-modal-heading-${id}`;
+  const accessoryViewFinal = accessoryView ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: getClassName('bpk-modal__accessory-view'),
-    children: props.accessoryView
+    children: accessoryView
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkReactUtils.TransitionInitialMount, {
     appearClassName: getClassName('bpk-modal--appear'),
     appearActiveClassName: getClassName('bpk-modal--appear-active'),
     transitionTimeout: 300,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
-      id: props.id,
-      tabIndex: "-1",
+      id: id,
+      tabIndex: -1,
       role: "dialog",
-      "aria-labelledby": props.showHeader ? headingId : null,
+      "aria-labelledby": showHeader ? headingId : undefined,
       className: classNames.join(' '),
-      ref: props.dialogRef,
-      children: [props.showHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+      ref: dialogRef,
+      children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
         className: getClassName('bpk-modal__header'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentNavigationBar.default, {
           id: headingId,
@@ -80,61 +99,25 @@ const BpkModalInner = props => {
           title: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
             id: headingId,
             className: getClassName('bpk-modal__heading'),
-            children: props.title
+            children: title
           }),
           leadingButton: accessoryViewFinal,
-          trailingButton: props.closeText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentLink.BpkButtonLink, {
+          trailingButton: closeText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentLink.BpkButtonLink, {
             className: getClassName('bpk-modal__close-button'),
-            onClick: props.onClose,
-            children: props.closeText
+            onClick: onClose,
+            children: closeText
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
             className: getClassName('bpk-modal__close-button'),
-            label: props.closeLabel,
-            onClick: props.onClose
+            label: closeLabel,
+            onClick: onClose
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: contentClassNames.join(' '),
-        children: props.children
+        children: children
       })]
     })
   });
 };
-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
-};
-exports.propTypes = propTypes;
-const defaultProps = {
-  title: null,
-  onClose: () => null,
-  className: null,
-  contentClassName: null,
-  closeLabel: '',
-  closeText: null,
-  wide: false,
-  showHeader: true,
-  fullScreenOnMobile: true,
-  fullScreen: false,
-  padded: true,
-  accessoryView: null
-};
-exports.defaultProps = defaultProps;
-BpkModalInner.propTypes = _objectSpread({}, propTypes);
-BpkModalInner.defaultProps = _objectSpread({}, defaultProps);
 var _default = BpkModalInner;
 exports.default = _default;

package/bpk-component-modal/src/BpkModalV2/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-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#eff1f2;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#fff;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}

package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts

@@ -29,6 +29,7 @@ export type Props = {
   noFullScreenOnMobile?: boolean;
   onClose: () => void | null;
   padded?: boolean;
+  showHeader?: boolean;
   title?: string | null;
   wide?: boolean;
 };

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

@@ -33,9 +33,36 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpKModalModule.default);
+const Header = ({
+  closeLabel,
+  id,
+  onClose,
+  title
+}) => {
+  if (title) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: id,
+      className: getClassName('bpk-modal__header-title'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: getClassName('bpk-modal__header-title-container'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
+        label: closeLabel,
+        onClick: onClose
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: getClassName('bpk-modal__button-container'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
+      label: closeLabel,
+      onClick: onClose
+    })
+  });
+};
 const Heading = (0, _bpkReactUtils.withDefaultProps)(_bpkComponentText.default, {
   textStyle: _bpkComponentText.TEXT_STYLES.label1,
   tagName: 'h2',
@@ -63,6 +90,7 @@ const BpkModalV2 = props => {
     noFullScreenOnMobile,
     onClose,
     padded,
+    showHeader = true,
     title,
     wide
   } = props;
@@ -93,12 +121,6 @@ const BpkModalV2 = props => {
   }, [id, isOpen]);
   const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
   const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
-  const closeButton = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
-      label: closeLabel,
-      onClick: onClose
-    })
-  });
   return isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
     children: [!dialogSupported && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -112,17 +134,11 @@ const BpkModalV2 = props => {
       "aria-labelledby": ariaLabelledby,
       "data-open": isOpen,
       ref: ref,
-      children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: getClassName('bpk-modal__header-title'),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: getClassName('bpk-modal__header-title-container'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
-            children: title
-          })
-        }), closeButton]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getClassName('bpk-modal__button-container'),
-        children: closeButton
+      children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
+        id: `${id}-title`,
+        title: title,
+        closeLabel: closeLabel,
+        onClose: onClose
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: contentClassNames,
         children: children