@skyscanner/backpack-web 17.1.0-beta.1 → 17.1.0

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -1,23 +1,39 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkScrimUtils = require("../../bpk-scrim-utils");
-var _bpkComponentFlare = require("../../bpk-component-flare");
-var _commonTypes = require("./common-types");
-var _BpkDialogInnerModule = _interopRequireDefault(require("./BpkDialogInner.module.css"));
-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); }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDialogInnerModule.default);
-const BpkDialogInner = props => {
+/*
+ * 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 React from 'react';
+
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
+import { BpkContentBubble } from '../../bpk-component-flare';
+
+import {
+  type DialogInnerProps as Props,
+  dialogInnerPropTypes,
+  dialogInnerDefaultProps,
+} from './common-types';
+import STYLES from './BpkDialogInner.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkDialogInner = (props: Props) => {
   const {
     ariaLabel,
     children,
@@ -26,33 +42,49 @@ const BpkDialogInner = props => {
     dialogRef,
     flare,
     flareClassName,
-    id
+    id,
   } = props;
+
   const classNames = getClassName('bpk-dialog-inner', className);
-  const contentClassNames = getClassName('bpk-dialog-inner__content', contentClassName);
-  const flareClassNames = getClassName('bpk-dialog-inner__flare', flareClassName);
-  return /*#__PURE__*/_react.default.createElement(_bpkReactUtils.TransitionInitialMount, {
-    appearClassName: getClassName('bpk-dialog-inner--appear'),
-    appearActiveClassName: getClassName('bpk-dialog-inner--appear-active'),
-    transitionTimeout: 300
-  }, /*#__PURE__*/_react.default.createElement("section", {
-    id: id,
-    tabIndex: "-1",
-    role: "dialog",
-    "aria-label": ariaLabel,
-    className: classNames,
-    ref: dialogRef
-  }, flare && /*#__PURE__*/_react.default.createElement(_bpkComponentFlare.BpkContentBubble, {
-    className: flareClassNames
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: contentClassNames
-  }, children)));
+  const contentClassNames = getClassName(
+    'bpk-dialog-inner__content',
+    contentClassName,
+  );
+  const flareClassNames = getClassName(
+    'bpk-dialog-inner__flare',
+    flareClassName,
+  );
+
+  return (
+    <TransitionInitialMount
+      appearClassName={getClassName('bpk-dialog-inner--appear')}
+      appearActiveClassName={getClassName('bpk-dialog-inner--appear-active')}
+      transitionTimeout={300}
+    >
+      <section
+        id={id}
+        tabIndex="-1"
+        role="dialog"
+        aria-label={ariaLabel}
+        className={classNames}
+        ref={dialogRef}
+      >
+        {flare && <BpkContentBubble className={flareClassNames} />}
+        <div className={contentClassNames}>{children}</div>
+      </section>
+    </TransitionInitialMount>
+  );
+};
+
+export const propTypes = {
+  ...dialogInnerPropTypes,
 };
-const propTypes = _objectSpread({}, _commonTypes.dialogInnerPropTypes);
-exports.propTypes = propTypes;
-const defaultProps = _objectSpread({}, _commonTypes.dialogInnerDefaultProps);
-exports.defaultProps = defaultProps;
-BpkDialogInner.propTypes = _objectSpread({}, propTypes);
-BpkDialogInner.defaultProps = _objectSpread({}, defaultProps);
-var _default = (0, _bpkScrimUtils.withScrim)(BpkDialogInner);
-exports.default = _default;
+
+export const defaultProps = {
+  ...dialogInnerDefaultProps,
+};
+
+BpkDialogInner.propTypes = { ...propTypes };
+BpkDialogInner.defaultProps = { ...defaultProps };
+
+export default withScrim(BpkDialogInner);

package/bpk-component-dialog/src/BpkDialogInner.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-dialog-inner{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;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#05203c}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:32.25rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#0770e3}

package/bpk-component-dialog/src/BpkDialogInner.module.scss

@@ -0,0 +1,64 @@
+/*
+* 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 '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+
+.bpk-dialog-inner {
+  z-index: $bpk-zindex-modal;
+  width: 100%;
+  max-width: $bpk-modal-max-width;
+  margin: auto;
+  transform: scale(1);
+  transition: opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  outline: 0;
+  background-color: $bpk-modal-background-color;
+  opacity: $bpk-modal-opacity;
+
+  // FIX: Prevents ugly flickering when tapping inside the dialog in Mobile Safari
+  -webkit-tap-highlight-color: transparent;
+
+  @include bpk-box-shadow-xl;
+  @include bpk-border-radius-sm;
+
+  &--appear {
+    transform: scale(0.9);
+    opacity: $bpk-modal-initial-opacity;
+  }
+
+  &--appear-active {
+    transform: scale(1);
+    opacity: $bpk-modal-opacity;
+  }
+
+  &__content {
+    padding: $bpk-modal-content-padding;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__flare {
+    height: bpk-spacing-lg() * 10;
+
+    // We inherit radius from the outer modal so they match and align correctly to the container.
+    border-radius: inherit;
+    background-color: $bpk-surface-contrast-day;
+  }
+}

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

@@ -1,65 +1,99 @@
-"use strict";
+/*
+ * 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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.dialogInnerPropTypes = exports.dialogInnerDefaultProps = exports.defaultProps = exports.HEADER_ICON_TYPES = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const HEADER_ICON_TYPES = {
+/* @flow strict */
+import { type Node } from 'react';
+import PropTypes from 'prop-types';
+
+export const HEADER_ICON_TYPES = {
   primary: 'primary',
   warning: 'warning',
-  destructive: 'destructive'
+  destructive: 'destructive',
+};
+
+export type DialogInnerProps = {
+  ariaLabel: string,
+  id: string,
+  children: Node,
+  dialogRef: (ref: ?HTMLElement) => void,
+  className: ?string,
+  contentClassName?: ?string,
+  flare: boolean,
+  flareClassName: ?string,
 };
-exports.HEADER_ICON_TYPES = HEADER_ICON_TYPES;
-const dialogInnerPropTypes = {
-  ariaLabel: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node.isRequired,
-  dialogRef: _propTypes.default.func.isRequired,
-  id: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  contentClassName: _propTypes.default.string,
-  flare: _propTypes.default.bool,
-  flareClassName: _propTypes.default.string,
-  withIcon: _propTypes.default.bool
+
+export const dialogInnerPropTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  dialogRef: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  contentClassName: PropTypes.string,
+  flare: PropTypes.bool,
+  flareClassName: PropTypes.string,
+  withIcon: PropTypes.bool,
 };
-exports.dialogInnerPropTypes = dialogInnerPropTypes;
-const dialogInnerDefaultProps = {
+
+export const dialogInnerDefaultProps = {
   className: null,
   flare: false,
   flareClassName: null,
-  withIcon: false
+  withIcon: false,
 };
 
 // Please remove this type when `withScrim` is flow-typed
-exports.dialogInnerDefaultProps = dialogInnerDefaultProps;
-const {
-    dialogRef
-  } = dialogInnerPropTypes,
-  newDialogPropTypes = _objectWithoutProperties(dialogInnerPropTypes, ["dialogRef"]);
-const propTypes = _objectSpread(_objectSpread({}, newDialogPropTypes), {}, {
-  isOpen: _propTypes.default.bool.isRequired,
-  renderTarget: _propTypes.default.func,
-  closeLabel: _propTypes.default.string,
-  onClose: _propTypes.default.func,
-  dismissible: _propTypes.default.bool,
-  headerIcon: _propTypes.default.node,
-  headerIconType: _propTypes.default.oneOf(Object.keys(HEADER_ICON_TYPES))
-});
-exports.propTypes = propTypes;
-const defaultProps = _objectSpread(_objectSpread({}, dialogInnerDefaultProps), {}, {
+type ScrimProps = {
+  dialogRef: () => ?HTMLElement,
+};
+
+export type Props = {
+  // The `withScrim` HOC satisfies some of the ModalDialogs required
+  // props but it's not flow typed yet so this
+  // diff will suffice for now.
+  ...$Exact<$Diff<DialogInnerProps, ScrimProps>>,
+  isOpen: boolean,
+  renderTarget: ?() => ?HTMLElement,
+  onClose: (event: SyntheticEvent<>) => void | null,
+  closeLabel: string,
+  dismissible: boolean,
+  headerIcon: ?Node,
+  headerIconType: $Keys<typeof HEADER_ICON_TYPES>,
+};
+
+const { dialogRef, ...newDialogPropTypes } = dialogInnerPropTypes;
+
+export const propTypes = {
+  ...newDialogPropTypes,
+  isOpen: PropTypes.bool.isRequired,
+  renderTarget: PropTypes.func,
+  closeLabel: PropTypes.string,
+  onClose: PropTypes.func,
+  dismissible: PropTypes.bool,
+  headerIcon: PropTypes.node,
+  headerIconType: PropTypes.oneOf(Object.keys(HEADER_ICON_TYPES)),
+};
+
+export const defaultProps = {
+  ...dialogInnerDefaultProps,
   renderTarget: null,
   closeLabel: '',
   onClose: () => null,
   dismissible: true,
   headerIcon: null,
-  headerIconType: HEADER_ICON_TYPES.primary
-});
-exports.defaultProps = defaultProps;
+  headerIconType: HEADER_ICON_TYPES.primary,
+};

package/bpk-component-drawer/README.md

@@ -0,0 +1,88 @@
+# bpk-component-drawer
+
+> Backpack drawer component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React, { Component } from 'react';
+import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+
+class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  onOpen = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <div id="pagewrap">
+          <BpkButton onClick={this.onOpen}>Open drawer</BpkButton>
+        </div>
+        <BpkDrawer
+          id="my-drawer"
+          isOpen={this.state.isOpen}
+          onClose={this.onClose}
+          title="Drawer title"
+          closeLabel="Close drawer"
+          getApplicationElement={() => document.getElementById('pagewrap')}
+        >
+          This is a drawer. You can put anything you want in here.
+        </BpkDrawer>
+      </div>
+    );
+  }
+}
+```
+
+> **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
+> the root element for your application is by returning it's DOM node via the function passed to the
+> `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+
+> **Theming:** In order to theme the drawer, a `renderTarget` needs to be supplied as a function which returns a DOM node
+> in the scope of a `BpkThemeProvider`.
+
+## Props
+
+| Property              | PropType | Required | Default Value |
+| --------------------- | -------- | -------- | ------------- |
+| id                    | string   | true     | -             |
+| className             | string   | true     | -             |
+| contentClassName      | string   | true     | -             |
+| children              | node     | true     | -             |
+| isOpen                | bool     | true     | -             |
+| onClose               | func     | true     | -             |
+| title                 | string   | true     | -             |
+| getApplicationElement | func     | true     | -             |
+| closeLabel            | string   | false    | null          |
+| closeText             | string   | false    | null          |
+| hideTitle             | bool     | false    | false         |
+| renderTarget          | func     | false    | null          |
+
+## Theme Props
+
+- `linkColor`
+- `linkHoverColor`
+- `linkActiveColor`
+- `linkVisitedColor`

package/bpk-component-drawer/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _BpkDrawer = _interopRequireDefault(require("./src/BpkDrawer"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,5 +15,11 @@ 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 = _BpkDrawer.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkDrawer from './src/BpkDrawer';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkDrawer;
+export { themeAttributes };

package/bpk-component-drawer/src/BpkDrawer.js

@@ -1,79 +1,97 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkScrimUtils = require("../../bpk-scrim-utils");
-var _BpkDrawerContent = _interopRequireDefault(require("./BpkDrawerContent"));
-var _BpkDrawerModule = _interopRequireDefault(require("./BpkDrawer.module.css"));
-const _excluded = ["isOpen", "onClose", "renderTarget"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDrawerModule.default);
-const BpkScrimDrawerContent = (0, _bpkScrimUtils.withScrim)(_BpkDrawerContent.default);
-class BpkDrawer extends _react.Component {
+/*
+ * 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, { Component } from 'react';
+
+import { Portal, cssModules } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
+
+import BpkDrawerContent from './BpkDrawerContent';
+import STYLES from './BpkDrawer.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
+
+type Props = {
+  isOpen: boolean,
+  onClose: () => mixed,
+  renderTarget: ?() => mixed,
+};
+
+type State = {
+  isDrawerShown: boolean,
+};
+
+class BpkDrawer extends Component<Props, State> {
+  static defaultProps = {
+    renderTarget: null,
+  };
+
   constructor() {
     super();
-    _defineProperty(this, "onCloseAnimationComplete", () => {
-      this.props.onClose();
-    });
-    _defineProperty(this, "hide", () => {
-      this.setState({
-        isDrawerShown: false
-      });
-    });
+
     this.state = {
-      isDrawerShown: true
+      isDrawerShown: true,
     };
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (!this.props.isOpen && nextProps.isOpen) {
-      this.setState({
-        isDrawerShown: true
-      });
+      this.setState({ isDrawerShown: true });
     }
   }
+
+  onCloseAnimationComplete = () => {
+    this.props.onClose();
+  };
+
+  hide = () => {
+    this.setState({ isDrawerShown: false });
+  };
+
   render() {
-    const _this$props = this.props,
-      {
-        isOpen,
-        onClose,
-        renderTarget
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
-    const {
-      isDrawerShown
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_bpkReactUtils.Portal, {
-      isOpen: isOpen,
-      onClose: this.hide,
-      renderTarget: renderTarget
-    }, /*#__PURE__*/_react.default.createElement(BpkScrimDrawerContent, _extends({
-      isDrawerShown: isDrawerShown,
-      onClose: this.hide,
-      onCloseAnimationComplete: this.onCloseAnimationComplete,
-      containerClassName: getClassName('bpk-drawer__container')
-    }, rest)));
+    const { isOpen, onClose, renderTarget, ...rest } = this.props;
+
+    const { isDrawerShown } = this.state;
+
+    return (
+      <Portal isOpen={isOpen} onClose={this.hide} renderTarget={renderTarget}>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */}
+        <BpkScrimDrawerContent
+          isDrawerShown={isDrawerShown}
+          onClose={this.hide}
+          onCloseAnimationComplete={this.onCloseAnimationComplete}
+          containerClassName={getClassName('bpk-drawer__container')}
+          {...rest}
+        />
+      </Portal>
+    );
   }
 }
-_defineProperty(BpkDrawer, "defaultProps", {
-  renderTarget: null
-});
+
 BpkDrawer.propTypes = {
-  isOpen: _propTypes.default.bool.isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  renderTarget: _propTypes.default.func
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  renderTarget: PropTypes.func,
 };
-var _default = BpkDrawer;
-exports.default = _default;
+
+export default BpkDrawer;