@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0-alpha.1

package/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js

@@ -1,373 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = require("@testing-library/react");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _withInfiniteScroll = _interopRequireDefault(require("./withInfiniteScroll"));
-
-var _DataSource = require("./DataSource");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/*
- * 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.
- */
-const nextTick = () => new Promise(res => setImmediate(res));
-
-const mockDataSource = data => {
-  const myDs = new _DataSource.ArrayDataSource(data);
-  const mockFetch = myDs.fetchItems.bind(myDs);
-  myDs.fetchItems = jest.fn((...args) => mockFetch(...args));
-  return myDs;
-};
-
-describe('withInfiniteScroll', () => {
-  const elementsArray = [];
-
-  for (let i = 0; i < 5; i += 1) {
-    elementsArray.push(`Element ${i}`);
-  }
-
-  const List = props => /*#__PURE__*/_react.default.createElement("div", {
-    id: "list"
-  }, props.elements.map(element => /*#__PURE__*/_react.default.createElement("div", {
-    key: element
-  }, element)));
-
-  List.propTypes = {
-    elements: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.number)]).isRequired
-  };
-  const InfiniteList = (0, _withInfiniteScroll.default)(List);
-  let intersect;
-  let currentOptions = {};
-  beforeEach(() => {
-    global.IntersectionObserver = class {
-      constructor(callback, options) {
-        intersect = async () => callback([{
-          isIntersecting: true
-        }]);
-
-        currentOptions = options;
-      }
-
-      observe() {} // eslint-disable-line class-methods-use-this
-
-
-      unobserve() {} // eslint-disable-line class-methods-use-this
-
-
-    };
-  });
-  it('renders an empty list for the first render', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray)
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('renders items after the first render', async () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray)
-    }));
-    await intersect();
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('renders correctly with different initial and onScroll numbers', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      initiallyLoadedElements: 3,
-      elementsPerScroll: 2
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render correctly when no more elements', async () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray)
-    }));
-    await intersect();
-    await intersect();
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render correctly with an "elementsPerScroll" attribute', async () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      elementsPerScroll: 1
-    }));
-    await intersect();
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render correctly with a "renderSeeMoreComponent" attribute', async () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      elementsPerScroll: 1,
-      renderSeeMoreComponent: ({
-        onSeeMoreClick
-      }) => /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        onClick: onSeeMoreClick
-      }, "see more"),
-      seeMoreAfter: 0
-    }));
-    await intersect();
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render correctly with a "renderLoadingComponent" attribute', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      renderLoadingComponent: () => /*#__PURE__*/_react.default.createElement("span", null, "Loading")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render correctly with a "loaderIntersectionTrigger" attribute', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      renderLoadingComponent: () => /*#__PURE__*/_react.default.createElement("span", null, "Loading"),
-      loaderIntersectionTrigger: "small"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should create the IntersectionObserver with a 0.01 threshold if the prop is set to "small"', () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      renderLoadingComponent: () => /*#__PURE__*/_react.default.createElement("span", null, "Loading"),
-      loaderIntersectionTrigger: "small"
-    }));
-    expect(currentOptions).toEqual({
-      threshold: 0.01
-    });
-  });
-  it('should create the IntersectionObserver with a 0.5 threshold if the prop is set to "half"', () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      renderLoadingComponent: () => /*#__PURE__*/_react.default.createElement("span", null, "Loading"),
-      loaderIntersectionTrigger: "half"
-    }));
-    expect(currentOptions).toEqual({
-      threshold: 0.5
-    });
-  });
-  it('should create the IntersectionObserver with a 0.99 threshold if the prop is set to "full"', () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      renderLoadingComponent: () => /*#__PURE__*/_react.default.createElement("span", null, "Loading"),
-      loaderIntersectionTrigger: "full"
-    }));
-    expect(currentOptions).toEqual({
-      threshold: 0.99
-    });
-  });
-  it('should create the IntersectionObserver with a 0.99 threshold if the prop is not set', () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray)
-    }));
-    expect(currentOptions).toEqual({
-      threshold: 0.99
-    });
-  });
-  it('should pass extra props to the decorated component', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      "aria-label": "Test"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should call onScroll on intersection fired', async () => {
-    const spy = jest.fn();
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource(elementsArray),
-      onScroll: spy
-    }));
-    await intersect();
-    expect(spy).toHaveBeenCalledWith({
-      currentIndex: 0
-    });
-  });
-  it('should call onScrollFinished when no more elements to render', async () => {
-    const spy = jest.fn();
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: new _DataSource.ArrayDataSource([1, 2]),
-      onScrollFinished: spy,
-      elementsPerScroll: 2
-    }));
-    await intersect();
-    await intersect();
-    expect(spy).toHaveBeenCalledWith({
-      totalNumberElements: 2
-    });
-  });
-  it('should fetch more items when see more is clicked', async () => {
-    const myDs = mockDataSource(elementsArray);
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs,
-      elementsPerScroll: 1,
-      renderSeeMoreComponent: ({
-        onSeeMoreClick
-      }) => /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "test-button",
-        onClick: onSeeMoreClick
-      }, "see more"),
-      seeMoreAfter: 0
-    }));
-    await intersect();
-
-    const button = _react2.screen.getByRole('button');
-
-    _userEvent.default.click(button);
-
-    expect(myDs.fetchItems).toHaveBeenCalledTimes(2);
-  });
-  it('should refresh data when data changes', async () => {
-    const myDs = mockDataSource(elementsArray);
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs
-    }));
-    await nextTick();
-    myDs.updateData([1, 2, 3]);
-    await nextTick();
-    expect(myDs.fetchItems).toHaveBeenCalledTimes(2);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should refresh data when data changes from an empty Array', async () => {
-    const myDs = mockDataSource(elementsArray);
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs
-    }));
-    await nextTick();
-    myDs.updateData([1, 2, 3]);
-    await nextTick();
-    expect(myDs.fetchItems).toHaveBeenCalledTimes(2);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should finish the list when array changes to empty', async () => {
-    const myDs = mockDataSource(elementsArray);
-    const onFinished = jest.fn();
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs,
-      seeMoreAfter: 0,
-      elementsPerScroll: 1,
-      onScrollFinished: onFinished
-    }));
-    await nextTick();
-    myDs.updateData([]);
-    await nextTick();
-    expect(myDs.fetchItems).toHaveBeenCalledTimes(2);
-    expect(onFinished).toHaveBeenCalled();
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should refresh when data source changes', async () => {
-    const myDs = mockDataSource(elementsArray);
-    const {
-      rerender
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs
-    }));
-    await nextTick();
-    const newDs = mockDataSource([1, 2, 3]);
-    rerender( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: newDs
-    }));
-    await nextTick();
-    expect(myDs.fetchItems).toHaveBeenCalled();
-    expect(newDs.fetchItems).toHaveBeenCalled();
-  });
-  it('should refresh data when data source changes from an empty data source', async () => {
-    const myDs = mockDataSource([]);
-    const {
-      rerender
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs
-    }));
-    await nextTick();
-    const newDs = mockDataSource([1, 2, 3]);
-    rerender( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: newDs
-    }));
-    await nextTick();
-    expect(myDs.fetchItems).toHaveBeenCalled();
-    expect(newDs.fetchItems).toHaveBeenCalled();
-  });
-  it('should finish the list when data source changes to an empty data source', async () => {
-    const myDs = mockDataSource(elementsArray);
-    const onFinished = jest.fn();
-    const {
-      rerender
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs,
-      seeMoreAfter: 0,
-      elementsPerScroll: 1,
-      onScrollFinished: onFinished
-    }));
-    await nextTick();
-    const newDs = mockDataSource([]);
-    rerender( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: newDs,
-      seeMoreAfter: 0,
-      elementsPerScroll: 1,
-      onScrollFinished: onFinished
-    }));
-    await nextTick();
-    expect(myDs.fetchItems).toHaveBeenCalled();
-    expect(newDs.fetchItems).toHaveBeenCalled();
-    expect(onFinished).toHaveBeenCalled();
-  });
-  it('should finish the list when data source returns less than the number of elements requested', async () => {
-    const myDs = mockDataSource(elementsArray);
-    const onFinished = jest.fn();
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(InfiniteList, {
-      dataSource: myDs,
-      elementsPerScroll: 3,
-      initiallyLoadedElements: 3,
-      onScrollFinished: onFinished
-    }));
-    await intersect();
-    await intersect();
-    expect(myDs.fetchItems).toHaveBeenCalledTimes(3);
-    expect(onFinished).toHaveBeenCalled();
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-infinite-scroll/src/withInfiniteScroll.css

@@ -1,18 +0,0 @@
-/*
- * 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-sentinel{width:100%;height:1.5rem}

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js

@@ -1,271 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
-var _extend = _interopRequireDefault(require("lodash/extend"));
-
-require("./intersection-observer");
-
-var _DataSource = _interopRequireDefault(require("./DataSource"));
-
-var _withInfiniteScrollModule = _interopRequireDefault(require("./withInfiniteScroll.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _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 _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; }
-
-const getClassNames = (0, _bpkReactUtils.cssModules)(_withInfiniteScrollModule.default);
-const propTypes = {
-  initiallyLoadedElements: _propTypes.default.number,
-  elementsPerScroll: _propTypes.default.number,
-  dataSource: _propTypes.default.instanceOf(_DataSource.default).isRequired,
-  loaderIntersectionTrigger: _propTypes.default.oneOf(['small', 'half', 'full']),
-  onScroll: _propTypes.default.func,
-  onScrollFinished: _propTypes.default.func,
-  renderLoadingComponent: _propTypes.default.func,
-  renderSeeMoreComponent: _propTypes.default.func,
-  seeMoreAfter: _propTypes.default.number
-};
-const defaultProps = {
-  initiallyLoadedElements: 5,
-  elementsPerScroll: 5,
-  loaderIntersectionTrigger: 'full',
-  onScroll: null,
-  onScrollFinished: null,
-  renderLoadingComponent: null,
-  renderSeeMoreComponent: null,
-  seeMoreAfter: null
-};
-
-const withInfiniteScroll = ComponentToExtend => {
-  var _class;
-
-  return _class = class WithInfiniteScroll extends _react.Component {
-    constructor(props) {
-      super(props);
-
-      _defineProperty(this, "handleIntersection", void 0);
-
-      _defineProperty(this, "handleKeyPress", void 0);
-
-      _defineProperty(this, "handleSeeMoreClick", void 0);
-
-      _defineProperty(this, "observer", void 0);
-
-      _defineProperty(this, "sentinel", void 0);
-
-      _defineProperty(this, "updateData", () => {
-        const {
-          index
-        } = this.state; // This means updateData was called before any data was loaded, e.g.
-        // An ArrayDataSource initialized empty and then changed latter on via `updateData`
-        // In this case we want to load new data and not just replace the old one.
-        // "See More After" should also be computed again in this case.
-
-        const isFirstLoad = index < this.props.elementsPerScroll;
-        this.fetchItems({
-          index: 0,
-          elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
-          elementsToRender: [],
-          computeShowSeeMore: isFirstLoad
-        }).then(newState => this.setStateAfterDsUpdate(newState));
-      });
-
-      _defineProperty(this, "handleIntersection", entries => {
-        const {
-          onScroll
-        } = this.props;
-        const entry = entries[0];
-
-        if (entry.isIntersecting) {
-          if (this.sentinel) {
-            this.observer.unobserve(this.sentinel);
-          }
-
-          if (onScroll) {
-            onScroll({
-              currentIndex: this.state.index
-            });
-          }
-
-          return this.fetchItems().then(newState => {
-            this.setState(newState);
-          });
-        }
-
-        return Promise.resolve();
-      });
-
-      _defineProperty(this, "handleSeeMoreClick", () => {
-        this.fetchItems().then(newState => {
-          this.setState(newState);
-        });
-      });
-
-      this.state = {
-        index: 0,
-        elementsToRender: [],
-        isListFinished: false,
-        showSeeMore: false
-      };
-      this.props.dataSource.onDataChange(this.updateData);
-      const thresholds = {
-        small: 0.01,
-        half: 0.5,
-        full: 0.99 // using 0.99 instead of 1 to avoid problems with float precision in IE11
-
-      };
-      const displaySize = this.props.loaderIntersectionTrigger || 'full';
-      this.observer = new IntersectionObserver(this.handleIntersection, {
-        threshold: thresholds[displaySize] || thresholds.full
-      });
-    }
-
-    componentDidMount() {
-      this.fetchItems({
-        elementsPerScroll: this.props.initiallyLoadedElements
-      }).then(newState => {
-        this.setState(newState);
-      });
-    }
-
-    componentDidUpdate(prevProps) {
-      if (this.sentinel && this.state.index > 0) {
-        this.observer.observe(this.sentinel);
-      }
-
-      if (this.props.dataSource !== prevProps.dataSource) {
-        prevProps.dataSource.removeListener(this.updateData);
-        this.props.dataSource.onDataChange(this.updateData);
-        this.fetchItems({
-          index: 0,
-          elementsPerScroll: this.props.elementsPerScroll,
-          elementsToRender: []
-        }).then(newState => this.setStateAfterDsUpdate(newState));
-      }
-    }
-
-    componentWillUnmount() {
-      this.props.dataSource.removeListener(this.updateData);
-
-      if (this.sentinel) {
-        this.observer.unobserve(this.sentinel);
-      }
-    }
-
-    setStateAfterDsUpdate(newState) {
-      // After a data source update (calling updateData in the data source or changing the dataSource prop)
-      // all visible data is fetched again (from 0 to current index) to update the list with the new data.
-      // If after this call there is no elementsToRender or index present in state
-      // it means the new data source has no items and we need to
-      // reset the list, which we do by setting `elementsToRender` to `[]` and `index` to `0`
-      const {
-        elementsToRender,
-        index
-      } = newState;
-      this.setState(_objectSpread(_objectSpread({}, newState), {}, {
-        elementsToRender: elementsToRender || [],
-        index: index || 0
-      }));
-    }
-
-    fetchItems(config) {
-      const {
-        onScrollFinished,
-        seeMoreAfter
-      } = this.props;
-      const {
-        computeShowSeeMore,
-        elementsPerScroll,
-        elementsToRender,
-        index
-      } = (0, _extend.default)({
-        index: this.state.index,
-        elementsPerScroll: this.props.elementsPerScroll,
-        elementsToRender: this.state.elementsToRender,
-        computeShowSeeMore: true
-      }, config);
-      return this.props.dataSource.fetchItems(index, elementsPerScroll).then(nextElements => {
-        let result = {
-          isListFinished: true
-        };
-
-        if (nextElements && nextElements.length > 0) {
-          const nextIndex = index + elementsPerScroll;
-          result = {
-            index: nextIndex,
-            elementsToRender: (elementsToRender || []).concat(nextElements),
-            showSeeMore: computeShowSeeMore ? seeMoreAfter === index / elementsPerScroll : this.state.showSeeMore,
-            isListFinished: nextElements.length < elementsPerScroll
-          };
-        }
-
-        if (onScrollFinished && result.isListFinished) {
-          onScrollFinished({
-            totalNumberElements: elementsToRender.length
-          });
-        }
-
-        return result;
-      });
-    }
-
-    render() {
-      const {
-        elementsToRender,
-        isListFinished,
-        showSeeMore
-      } = this.state;
-      const {
-        renderLoadingComponent,
-        renderSeeMoreComponent
-      } = this.props;
-      const rest = (0, _omit.default)(this.props, Object.keys(propTypes));
-      let loadingOrButton = null;
-
-      if (!isListFinished) {
-        if (showSeeMore && renderSeeMoreComponent) {
-          loadingOrButton = renderSeeMoreComponent({
-            onSeeMoreClick: this.handleSeeMoreClick
-          });
-        } else {
-          loadingOrButton = /*#__PURE__*/_react.default.createElement("div", {
-            ref: spinner => {
-              this.sentinel = spinner;
-            },
-            className: renderLoadingComponent ? null : getClassNames('bpk-sentinel')
-          }, renderLoadingComponent && renderLoadingComponent());
-        }
-      }
-
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ComponentToExtend, _extends({}, rest, {
-        elements: elementsToRender
-      })), loadingOrButton);
-    }
-
-  }, _defineProperty(_class, "propTypes", _objectSpread({}, propTypes)), _defineProperty(_class, "defaultProps", _objectSpread({}, defaultProps)), _class;
-};
-
-var _default = withInfiniteScroll;
-exports.default = _default;