@skyscanner/backpack-web 23.2.2 → 24.0.0

package/bpk-component-input/src/BpkInput.d.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { Component } from 'react';
+
+import type { Props } from './common-types';
+
+type State = {
+  persistClearButton: boolean;
+};
+declare class BpkInput extends Component<Props, State> {
+  static defaultProps: {
+    type: 'text';
+    className: null;
+    valid: null;
+    large: boolean;
+    docked: boolean;
+    dockedFirst: boolean;
+    dockedMiddle: boolean;
+    dockedLast: boolean;
+    inputRef: null;
+    clearButtonMode: 'never';
+    clearButtonLabel: null;
+    onClear: null;
+  };
+
+  constructor(props: Props);
+
+  render(): JSX.Element;
+}
+export default BpkInput;

package/bpk-component-input/src/BpkInput.js

@@ -134,7 +134,7 @@ class BpkInput extends _react.Component {
     return clearable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: containerClassNames.join(' '),
       children: [renderedInput, value.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BpkClearButton.default, {
-        tabIndex: "-1",
+        tabIndex: -1,
         label: clearButtonLabel || '',
         onMouseDown: onMouseDown,
         onClick: e => {
@@ -142,7 +142,12 @@ class BpkInput extends _react.Component {
             ref.focus();
           }
           if (onClear) {
-            e.target.name = name;
+            if (e.target instanceof HTMLButtonElement) {
+              const {
+                target
+              } = e;
+              target.name = name;
+            }
             onClear(e);
             this.setState({
               persistClearButton: false
@@ -154,7 +159,6 @@ class BpkInput extends _react.Component {
     }) : renderedInput;
   }
 }
-_defineProperty(BpkInput, "propTypes", _commonTypes.propTypes);
 _defineProperty(BpkInput, "defaultProps", _commonTypes.defaultProps);
 var _default = BpkInput;
 exports.default = _default;

package/bpk-component-input/src/common-types.d.ts

@@ -0,0 +1,91 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import type { SyntheticEvent } from 'react';
+export declare const CLEAR_BUTTON_MODES: {
+    readonly never: "never";
+    readonly whileEditing: "whileEditing";
+    readonly always: "always";
+};
+export declare const INPUT_TYPES: {
+    readonly text: "text";
+    readonly email: "email";
+    readonly number: "number";
+    readonly password: "password";
+    readonly tel: "tel";
+};
+type BaseProps = {
+    id: string;
+    name: string;
+    value: string;
+    type?: typeof INPUT_TYPES[keyof typeof INPUT_TYPES];
+    className?: string | null;
+    valid?: boolean | null;
+    large?: boolean;
+    docked?: boolean;
+    dockedFirst?: boolean;
+    dockedMiddle?: boolean;
+    dockedLast?: boolean;
+    inputRef?: ((ref: HTMLInputElement) => void) | null;
+    [rest: string]: any;
+};
+export type PropsWithoutClearButonMode = BaseProps & {
+    clearButtonMode?: 'never';
+    clearButtonLabel?: string | null;
+    onClear?: ((e?: SyntheticEvent<HTMLButtonElement>) => void) | null;
+};
+export type PropsWithClearButtonMode = BaseProps & {
+    clearButtonMode: typeof CLEAR_BUTTON_MODES[keyof Omit<typeof CLEAR_BUTTON_MODES, 'never'>];
+    clearButtonLabel: string;
+    onClear: (e?: SyntheticEvent<HTMLButtonElement>) => void;
+};
+export type Props = PropsWithoutClearButonMode | PropsWithClearButtonMode;
+export declare const clearablePropType: (props: any, propName: string, componentName: string) => Error | null;
+export declare const propTypes: {
+    id: PropTypes.Validator<string>;
+    name: PropTypes.Validator<string>;
+    value: PropTypes.Validator<string>;
+    type: PropTypes.Requireable<"number" | "text" | "tel" | "email" | "password">;
+    className: PropTypes.Requireable<string>;
+    valid: PropTypes.Requireable<boolean>;
+    large: PropTypes.Requireable<boolean>;
+    docked: PropTypes.Requireable<boolean>;
+    dockedFirst: PropTypes.Requireable<boolean>;
+    dockedMiddle: PropTypes.Requireable<boolean>;
+    dockedLast: PropTypes.Requireable<boolean>;
+    inputRef: PropTypes.Requireable<(...args: any[]) => any>;
+    clearButtonMode: PropTypes.Requireable<string>;
+    clearButtonLabel: (props: any, propName: string, componentName: string) => Error | null;
+    onClear: (props: any, propName: string, componentName: string) => Error | null;
+};
+export declare const defaultProps: {
+    type: "text";
+    className: null;
+    valid: null;
+    large: boolean;
+    docked: boolean;
+    dockedFirst: boolean;
+    dockedMiddle: boolean;
+    dockedLast: boolean;
+    inputRef: null;
+    clearButtonMode: "never";
+    clearButtonLabel: null;
+    onClear: null;
+};
+export {};

package/bpk-component-input/src/common-types.js

@@ -22,7 +22,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */const CLEAR_BUTTON_MODES = {
+ */
+
+const CLEAR_BUTTON_MODES = {
   never: 'never',
   whileEditing: 'whileEditing',
   always: 'always'
@@ -36,6 +38,7 @@ const INPUT_TYPES = {
   tel: 'tel'
 };
 exports.INPUT_TYPES = INPUT_TYPES;
+// TODO - this function should be removed once all input examples have been migrated to TS
 const clearablePropType = (props, propName, componentName) => {
   const createError = message => new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`);
   const propBeingChecked = props[propName];

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -0,0 +1,121 @@
+/*
+ * 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 { ComponentType, ReactElement, UIEvent } from 'react';
+
+type WithOpenEventsProps = {
+  isOpen?: boolean;
+  onOpen?: () => void;
+  hasTouchSupport?: boolean;
+};
+type InputProps = {
+  className?: string | null;
+  onClick?: (event: UIEvent) => void;
+  onFocus?: (event: UIEvent) => void;
+  onBlur?: (event: UIEvent) => void;
+  onTouchEnd?: (event: UIEvent) => void;
+  onKeyDown?: (event: UIEvent) => void;
+  onKeyUp?: (event: UIEvent) => void;
+};
+declare const withOpenEvents: <P extends InputProps>(
+  InputComponent: ComponentType<P>,
+) => {
+  new (props: P & WithOpenEventsProps): {
+    focusCanOpen: boolean;
+    handleTouchEnd: (event: UIEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    render(): ReactElement;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<P & WithOpenEventsProps>, // eslint-disable-line no-shadow
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<P & WithOpenEventsProps> &
+      Readonly<{
+        children?: import('react').ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: import('react').ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<P & WithOpenEventsProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(
+      error: Error,
+      errorInfo: import('react').ErrorInfo,
+    ): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<P & WithOpenEventsProps>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<P & WithOpenEventsProps>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<P & WithOpenEventsProps>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillReceiveProps?(
+      nextProps: Readonly<P & WithOpenEventsProps>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<P & WithOpenEventsProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<P & WithOpenEventsProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  displayName: string;
+  defaultProps: {
+    isOpen: boolean;
+    hasTouchSupport: boolean;
+    onOpen: null;
+    className: null;
+    onClick: null;
+    onFocus: null;
+    onBlur: null;
+    onTouchEnd: null;
+    onKeyDown: null;
+    onKeyUp: null;
+  };
+  contextType?: import('react').Context<any> | undefined;
+};
+export default withOpenEvents;

package/bpk-component-input/src/withOpenEvents.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkInputModule = _interopRequireDefault(require("./BpkInput.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "hasTouchSupport", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onOpen", "onTouchEnd"];
+const _excluded = ["className", "hasTouchSupport", "isOpen", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onOpen", "onTouchEnd"];
 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,13 +39,17 @@ const KEYCODES = {
   SPACEBAR: 32
 };
 const handleKeyEvent = (keyCode, callback) => e => {
-  if (e.keyCode === keyCode) {
+  if (e instanceof KeyboardEvent && e.keyCode === keyCode) {
     e.preventDefault();
-    callback();
+    if (callback) {
+      callback();
+    }
   }
 };
 const withEventHandler = (fn, eventHandler) => e => {
-  fn(e);
+  if (fn) {
+    fn(e);
+  }
   if (eventHandler) {
     eventHandler(e);
   }
@@ -55,6 +58,7 @@ const withOpenEvents = InputComponent => {
   class WithOpenEvents extends _react.Component {
     constructor(props) {
       super(props);
+      _defineProperty(this, "focusCanOpen", void 0);
       _defineProperty(this, "handleTouchEnd", event => {
         // preventDefault fixes an issue on Android and iOS in which the popover closes immediately
         // because a touch event is registered on one of the dates.
@@ -89,6 +93,7 @@ const withOpenEvents = InputComponent => {
         {
           className,
           hasTouchSupport,
+          isOpen,
           onBlur,
           onClick,
           onFocus,
@@ -98,7 +103,6 @@ const withOpenEvents = InputComponent => {
           onTouchEnd
         } = _this$props,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      delete rest.isOpen;
       const classNames = [getClassName('bpk-input--with-open-events')];
       if (className) {
         classNames.push(className);
@@ -124,26 +128,11 @@ const withOpenEvents = InputComponent => {
       }, eventHandlers), rest));
     }
   }
-  WithOpenEvents.propTypes = {
-    // Custom props
-    isOpen: _propTypes.default.bool,
-    hasTouchSupport: _propTypes.default.bool,
-    onOpen: _propTypes.default.func,
-    // Input props
-    className: _propTypes.default.string,
-    onClick: _propTypes.default.func,
-    onFocus: _propTypes.default.func,
-    onBlur: _propTypes.default.func,
-    onTouchEnd: _propTypes.default.func,
-    onKeyDown: _propTypes.default.func,
-    onKeyUp: _propTypes.default.func
-  };
-  WithOpenEvents.defaultProps = {
+  _defineProperty(WithOpenEvents, "displayName", void 0);
+  _defineProperty(WithOpenEvents, "defaultProps", {
     // Custom props
     isOpen: false,
-    hasTouchSupport: !!(typeof window !== 'undefined' && ('ontouchstart' in window ||
-    // eslint-disable-next-line no-undef
-    window.DocumentTouch && document instanceof DocumentTouch)),
+    hasTouchSupport: !!(typeof window !== 'undefined' && 'ontouchstart' in window),
     onOpen: null,
     // Input props
     className: null,
@@ -153,7 +142,7 @@ const withOpenEvents = InputComponent => {
     onTouchEnd: null,
     onKeyDown: null,
     onKeyUp: null
-  };
+  });
   WithOpenEvents.displayName = (0, _bpkReactUtils.wrapDisplayName)(InputComponent, 'withOpenEvents');
   return WithOpenEvents;
 };

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

@@ -3,17 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "BpkModalV2", {
+  enumerable: true,
+  get: function () {
+    return _BpkModal.BpkModalV2;
+  }
+});
 exports.default = void 0;
 Object.defineProperty(exports, "defaultProps", {
   enumerable: true,
   get: function () {
-    return _BpkModal.defaultProps;
+    return _legacyPropTypes.defaultProps;
   }
 });
 Object.defineProperty(exports, "propTypes", {
   enumerable: true,
   get: function () {
-    return _BpkModal.propTypes;
+    return _legacyPropTypes.propTypes;
   }
 });
 Object.defineProperty(exports, "themeAttributes", {
@@ -22,10 +28,10 @@ Object.defineProperty(exports, "themeAttributes", {
     return _themeAttributes.default;
   }
 });
+var _BpkModal = require("./src/BpkModalV2/BpkModal");
 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; }
+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
@@ -44,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.
  */
-var _default = _BpkModal.default;
+// @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;