@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

package/bpk-component-map/src/withGoogleMapsScript.js

@@ -1,48 +1,53 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LibraryShapeType = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _api = require("@react-google-maps/api");
-
-var _DefaultLoadingElement = _interopRequireDefault(require("./DefaultLoadingElement"));
-
-const _excluded = ["googleMapsApiKey", "libraries", "loadingElement", "preventGoogleFontsLoading"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 LibraryShapeType = _propTypes.default.arrayOf(_propTypes.default.oneOf(['drawing', 'geometry', 'localContext', 'places', 'visualization']));
-
-exports.LibraryShapeType = LibraryShapeType;
-
-function withGoogleMapsScript(Component) {
-  const WithGoogleMapsScript = _ref => {
-    let {
-      googleMapsApiKey,
-      libraries,
-      loadingElement,
-      preventGoogleFontsLoading
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    const {
-      isLoaded,
-      loadError
-    } = (0, _api.useJsApiLoader)({
+/*
+ * 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, { type ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import { useJsApiLoader } from '@react-google-maps/api';
+
+import DefaultLoadingElement from './DefaultLoadingElement';
+
+export const LibraryShapeType = PropTypes.arrayOf(
+  PropTypes.oneOf([
+    'drawing',
+    'geometry',
+    'localContext',
+    'places',
+    'visualization',
+  ]),
+);
+
+function withGoogleMapsScript(Component: ComponentType<any>) {
+  const WithGoogleMapsScript = ({
+    googleMapsApiKey,
+    libraries,
+    loadingElement,
+    preventGoogleFontsLoading,
+    ...rest
+  }: {
+    [string]: any,
+  }) => {
+    const { isLoaded, loadError } = useJsApiLoader({
       googleMapsApiKey,
       libraries,
       preventGoogleFontsLoading,
-      version: '3.46'
+      version: '3.46',
     });
 
     if (!isLoaded) {
@@ -53,22 +58,23 @@ function withGoogleMapsScript(Component) {
       throw new Error('Google maps cannot be loaded!');
     }
 
-    return /*#__PURE__*/_react.default.createElement(Component, rest);
+    return <Component {...rest} />;
   };
 
   WithGoogleMapsScript.propTypes = {
-    loadingElement: _propTypes.default.node,
-    googleMapsApiKey: _propTypes.default.string.isRequired,
+    loadingElement: PropTypes.node,
+    googleMapsApiKey: PropTypes.string.isRequired,
     libraries: LibraryShapeType,
-    preventGoogleFontsLoading: _propTypes.default.bool
+    preventGoogleFontsLoading: PropTypes.bool,
   };
+
   WithGoogleMapsScript.defaultProps = {
-    loadingElement: /*#__PURE__*/_react.default.createElement(_DefaultLoadingElement.default, null),
+    loadingElement: <DefaultLoadingElement />,
     preventGoogleFontsLoading: false,
-    libraries: ['geometry', 'drawing', 'places']
+    libraries: ['geometry', 'drawing', 'places'],
   };
+
   return WithGoogleMapsScript;
 }
 
-var _default = withGoogleMapsScript;
-exports.default = _default;
+export default withGoogleMapsScript;

package/bpk-component-mobile-scroll-container/README.md

@@ -0,0 +1,74 @@
+# bpk-component-mobile-scroll-container
+
+> Backpack mobile scroll container component.
+
+## Installation
+
+```sh
+npm install bpk-component-mobile-scroll-container --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+
+import STYLES from './MyComponent.scss';
+
+const getClassName = cssModules(STYLES);
+
+export default () => (
+  <BpkMobileScrollContainer>
+    <div className={getClassName('my-component')}>
+      {new Array(10).fill().map((item, index) => {
+        const classNames = ['my-component__item'];
+
+        if (index % 2 === 0) {
+          classNames.push('my-component__item--alternate');
+        }
+
+        return (
+          <div key={index} className={classNames.map(getClassName).join(' ')}>
+            {index}
+          </div>
+        );
+      })}
+    </div>
+  </BpkMobileScrollContainer>
+);
+```
+
+*`MyComponent.scss`:*
+```scss
+@import '~bpk-mixins/index';
+
+.my-component {
+  display: flex;
+
+  &__item {
+    display: flex;
+    min-width: $bpk-spacing-xxl * 5;
+    height: $bpk-spacing-xxl * 5;
+    justify-content: center;
+    align-items: center;
+    background-color: $bpk-color-sky-gray-tint-07;
+
+    &--alternate {
+      background-color: $bpk-color-sky-gray-tint-06;
+    }
+  }
+}
+```
+
+## Props
+
+| Property                    | PropType | Required | Default Value |
+| --------------------------- | -------- | -------- | ------------- |
+| children                    | node     | true     | -             |
+| className                   | string   | false    | null          |
+| leadingIndicatorClassName   | string   | false    | null          |
+| scrollerRef                 | func     | false    | null          |
+| trailingIndicatorClassName  | string   | false    | null          |
+| showScrollbar               | bool     | false    | false         |

package/bpk-component-mobile-scroll-container/index.js

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

package/bpk-component-mobile-scroll-container/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-mobile-scroll-container",
+  "version": "4.0.1",
+  "description": "Backpack mobile scroll container component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "bpk-mixins": "^31.4.0",
+    "bpk-react-utils": "^7.0.0",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.5.0"
+  }
+}

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

@@ -1,50 +1,36 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.computeScrollIndicatorClassName = exports.computeScrollBarAwareHeight = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-const _excluded = ["children", "className", "innerContainerTagName", "leadingIndicatorClassName", "scrollerRef", "showScrollbar", "style", "trailingIndicatorClassName"];
-
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var STYLES = {
-  "bpk-mobile-scroll-container": "BpkMobileScrollContainer-module__bpk-mobile-scroll-container___6X9_-",
-  "bpk-mobile-scroll-container--left-indicator": "BpkMobileScrollContainer-module__bpk-mobile-scroll-container--left-indicator___3v-1J",
-  "bpk-mobile-scroll-container--right-indicator": "BpkMobileScrollContainer-module__bpk-mobile-scroll-container--right-indicator___11zEO",
-  "bpk-mobile-scroll-container__scroller": "BpkMobileScrollContainer-module__bpk-mobile-scroll-container__scroller___1Dsac",
-  "bpk-mobile-scroll-container__showScrollbar": "BpkMobileScrollContainer-module__bpk-mobile-scroll-container__showScrollbar___IZ847",
-  "bpk-mobile-scroll-container__inner": "BpkMobileScrollContainer-module__bpk-mobile-scroll-container__inner___2LexL",
-  "bpk-keyframe-spin": "BpkMobileScrollContainer-module__bpk-keyframe-spin___r6TSa"
-};
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-
-const computeScrollBarAwareHeight = (scrollerEl, innerEl) => {
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import React, { Component, type Node } from 'react';
+import { cssModules, isRTL } from 'bpk-react-utils';
+
+import STYLES from './BpkMobileScrollContainer.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const computeScrollBarAwareHeight = (
+  scrollerEl: ?HTMLElement,
+  innerEl: ?HTMLElement,
+): ?string => {
   if (!(scrollerEl && innerEl)) {
     return null;
   }
@@ -53,20 +39,19 @@ const computeScrollBarAwareHeight = (scrollerEl, innerEl) => {
   return scrollBarVisibile ? `${innerEl.offsetHeight / 16}rem` : 'auto';
 };
 
-exports.computeScrollBarAwareHeight = computeScrollBarAwareHeight;
-
-const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName = null, trailingIndicatorClassName = null) => {
+const computeScrollIndicatorClassName = (
+  scrollerEl: ?HTMLElement,
+  leadingIndicatorClassName: ?string = null,
+  trailingIndicatorClassName: ?string = null,
+) => {
   if (!scrollerEl) {
     return null;
   }
 
   const classNames = [];
-  const {
-    offsetWidth,
-    scrollLeft,
-    scrollWidth
-  } = scrollerEl;
-  const rtl = (0, _bpkReactUtils.isRTL)();
+  const { offsetWidth, scrollLeft, scrollWidth } = scrollerEl;
+
+  const rtl = isRTL();
   const scrollValue = rtl ? -Math.floor(scrollLeft) : Math.ceil(scrollLeft);
   const showLeadingIndicator = scrollValue > 0;
   const showTrailingIndicator = scrollValue < scrollWidth - offsetWidth;
@@ -74,17 +59,18 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   const showRightIndicator = rtl ? showLeadingIndicator : showTrailingIndicator;
 
   if (showLeftIndicator) {
-    classNames.push(getClassName('bpk-mobile-scroll-container--left-indicator'));
+    classNames.push(
+      getClassName('bpk-mobile-scroll-container--left-indicator'),
+    );
   }
-
   if (showRightIndicator) {
-    classNames.push(getClassName('bpk-mobile-scroll-container--right-indicator'));
+    classNames.push(
+      getClassName('bpk-mobile-scroll-container--right-indicator'),
+    );
   }
-
   if (showLeadingIndicator && leadingIndicatorClassName) {
     classNames.push(leadingIndicatorClassName);
   }
-
   if (showTrailingIndicator && trailingIndicatorClassName) {
     classNames.push(trailingIndicatorClassName);
   }
@@ -92,52 +78,54 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   return classNames;
 };
 
-exports.computeScrollIndicatorClassName = computeScrollIndicatorClassName;
-
-class BpkMobileScrollContainer extends _react.Component {
-  constructor() {
-    super();
-
-    _defineProperty(this, "innerEl", void 0);
-
-    _defineProperty(this, "scrollerEl", void 0);
-
-    _defineProperty(this, "onWindowResize", (0, _lodash.default)(() => {
-      this.setScrollBarAwareHeight();
-      this.setScrollIndicatorClassName();
-    }, 100));
-
-    _defineProperty(this, "setScrollIndicatorClassName", () => {
-      const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
-
-      if (!classNames) {
-        return;
-      }
-
-      this.setState(() => ({
-        scrollIndicatorClassName: classNames.join(' ')
-      }));
-    });
-
-    _defineProperty(this, "setScrollBarAwareHeight", () => {
-      if (this.props.showScrollbar) {
-        return;
-      }
+type Props = {
+  children: Node,
+  innerContainerTagName: string,
+  className: ?string,
+  leadingIndicatorClassName: ?string,
+  trailingIndicatorClassName: ?string,
+  scrollerRef: ?Function,
+  style: ?Object,
+  showScrollbar: ?boolean,
+};
 
-      const computedHeight = computeScrollBarAwareHeight(this.scrollerEl, this.innerEl);
+type State = {
+  computedHeight: ?string,
+  scrollIndicatorClassName: ?string,
+};
 
-      if (!computedHeight) {
-        return;
-      }
+class BpkMobileScrollContainer extends Component<Props, State> {
+  innerEl: ?HTMLElement;
+
+  scrollerEl: ?HTMLElement;
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    scrollerRef: PropTypes.func,
+    innerContainerTagName: PropTypes.string,
+    className: PropTypes.string,
+    leadingIndicatorClassName: PropTypes.string,
+    trailingIndicatorClassName: PropTypes.string,
+    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    showScrollbar: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    scrollerRef: null,
+    innerContainerTagName: 'div',
+    className: null,
+    leadingIndicatorClassName: null,
+    trailingIndicatorClassName: null,
+    style: null,
+    showScrollbar: false,
+  };
 
-      this.setState(() => ({
-        computedHeight
-      }));
-    });
+  constructor() {
+    super();
 
     this.state = {
       computedHeight: 'auto',
-      scrollIndicatorClassName: null
+      scrollIndicatorClassName: null,
     };
   }
 
@@ -151,11 +139,46 @@ class BpkMobileScrollContainer extends _react.Component {
     window.removeEventListener('resize', this.onWindowResize);
   }
 
+  onWindowResize = debounce(() => {
+    this.setScrollBarAwareHeight();
+    this.setScrollIndicatorClassName();
+  }, 100);
+
+  setScrollIndicatorClassName = () => {
+    const classNames = computeScrollIndicatorClassName(
+      this.scrollerEl,
+      this.props.leadingIndicatorClassName,
+      this.props.trailingIndicatorClassName,
+    );
+
+    if (!classNames) {
+      return;
+    }
+
+    this.setState(() => ({
+      scrollIndicatorClassName: classNames.join(' '),
+    }));
+  };
+
+  setScrollBarAwareHeight = () => {
+    if (this.props.showScrollbar) {
+      return;
+    }
+    const computedHeight = computeScrollBarAwareHeight(
+      this.scrollerEl,
+      this.innerEl,
+    );
+
+    if (!computedHeight) {
+      return;
+    }
+
+    this.setState(() => ({ computedHeight }));
+  };
+
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];
-
-    const _this$props = this.props,
-          {
+    const {
       children,
       className,
       innerContainerTagName,
@@ -163,66 +186,53 @@ class BpkMobileScrollContainer extends _react.Component {
       scrollerRef,
       showScrollbar,
       style,
-      trailingIndicatorClassName
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+      trailingIndicatorClassName,
+      ...rest
+    } = this.props;
 
     if (className) {
       classNames.push(className);
     }
-
     if (this.state.scrollIndicatorClassName) {
       classNames.push(this.state.scrollIndicatorClassName);
     }
 
-    const scrollerClassNames = getClassName('bpk-mobile-scroll-container__scroller', showScrollbar && 'bpk-mobile-scroll-container__showScrollbar');
+    const scrollerClassNames = getClassName(
+      'bpk-mobile-scroll-container__scroller',
+      showScrollbar && 'bpk-mobile-scroll-container__showScrollbar',
+    );
+
     const InnerContainer = innerContainerTagName;
-    return /*#__PURE__*/_react.default.createElement("div", _extends({}, rest, {
-      className: classNames.join(' '),
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        height: this.state.computedHeight
-      })
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      ref: el => {
-        if (scrollerRef) {
-          scrollerRef(el);
-        }
-
-        this.scrollerEl = el;
-      },
-      onScroll: this.setScrollIndicatorClassName,
-      className: scrollerClassNames
-    }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
-      ref: el => {
-        this.innerEl = el;
-      },
-      className: getClassName('bpk-mobile-scroll-container__inner')
-    }, children)));
-  }
 
+    return (
+      <div
+        {...rest}
+        className={classNames.join(' ')}
+        style={{ ...style, height: this.state.computedHeight }}
+      >
+        <div
+          ref={(el) => {
+            if (scrollerRef) {
+              scrollerRef(el);
+            }
+            this.scrollerEl = el;
+          }}
+          onScroll={this.setScrollIndicatorClassName}
+          className={scrollerClassNames}
+        >
+          <InnerContainer
+            ref={(el) => {
+              this.innerEl = el;
+            }}
+            className={getClassName('bpk-mobile-scroll-container__inner')}
+          >
+            {children}
+          </InnerContainer>
+        </div>
+      </div>
+    );
+  }
 }
 
-_defineProperty(BpkMobileScrollContainer, "propTypes", {
-  children: _propTypes.default.node.isRequired,
-  scrollerRef: _propTypes.default.func,
-  innerContainerTagName: _propTypes.default.string,
-  className: _propTypes.default.string,
-  leadingIndicatorClassName: _propTypes.default.string,
-  trailingIndicatorClassName: _propTypes.default.string,
-  style: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  showScrollbar: _propTypes.default.bool
-});
-
-_defineProperty(BpkMobileScrollContainer, "defaultProps", {
-  scrollerRef: null,
-  innerContainerTagName: 'div',
-  className: null,
-  leadingIndicatorClassName: null,
-  trailingIndicatorClassName: null,
-  style: null,
-  showScrollbar: false
-});
-
-var _default = BpkMobileScrollContainer;
-exports.default = _default;
+export default BpkMobileScrollContainer;
+export { computeScrollBarAwareHeight, computeScrollIndicatorClassName };

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}