@dhis2-ui/transfer 10.10.2 → 10.12.0

package/build/cjs/__e2e__/notify_at_end_of_list.e2e.stories.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PartialSourceList = exports.PartialPickedList = exports.FullSourceList = exports.FullPickedList = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.PartialSourceList = exports.PartialPickedList = exports.OptionChangesForShortList = exports.FullSourceList = exports.FullPickedList = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _transfer = require("../transfer.js");
 var _options = require("./common/options.js");
 var _statefulDecorator = require("./common/stateful-decorator.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var _default = exports.default = {
   title: 'Transfer End Of List',
   decorators: [(0, _statefulDecorator.statefulDecorator)()]
@@ -86,4 +87,46 @@ PartialPickedList.story = {
       return value;
     })
   })]
+};
+const selectedOptionsLookup = {
+  'val-9': {
+    value: 'val-9',
+    label: 'Option nr. 9'
+  }
+};
+const OptionChangesForShortList = (_, _ref7) => {
+  let {
+    onChange,
+    selected
+  } = _ref7;
+  const [optionsCount, setOptionsCount] = (0, _react.useState)(7);
+  const myOptions = (0, _react.useMemo)(() => {
+    let counter = 1;
+    const newOptions = [];
+    while (counter <= optionsCount) {
+      newOptions.push({
+        value: `val-${counter}`,
+        label: `Option nr. ${counter}`
+      });
+      counter++;
+    }
+    return newOptions;
+  }, [optionsCount]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setOptionsCount(curr => curr + 1)
+  }, "Increment options lists"), /*#__PURE__*/_react.default.createElement(_transfer.Transfer, {
+    filterable: true,
+    selected: selected,
+    selectedOptionsLookup: selectedOptionsLookup,
+    onChange: onChange,
+    options: myOptions,
+    onEndReached: window.onEndReached,
+    onEndReachedPicked: window.onEndReachedPicked
+  }));
+};
+exports.OptionChangesForShortList = OptionChangesForShortList;
+OptionChangesForShortList.story = {
+  decorators: [(0, _statefulDecorator.statefulDecorator)({
+    initialState: ['val-9']
+  })]
 };

package/build/cjs/end-intersection-detector.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EndIntersectionDetector = void 0;
+exports.INTERSECTION_DETECTOR_HEIGHT = exports.EndIntersectionDetector = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _intersectionDetector = require("@dhis2-ui/intersection-detector");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const INTERSECTION_DETECTOR_HEIGHT = exports.INTERSECTION_DETECTOR_HEIGHT = 50;
 const EndIntersectionDetector = _ref => {
   let {
     rootRef,
@@ -17,7 +18,7 @@ const EndIntersectionDetector = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: "jsx-2799340139"
+    className: "jsx-3586508456"
   }, /*#__PURE__*/_react.default.createElement(_intersectionDetector.IntersectionDetector, {
     rootRef: rootRef,
     onChange: _ref2 => {
@@ -27,8 +28,8 @@ const EndIntersectionDetector = _ref => {
       return isIntersecting && onEndReached();
     }
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2799340139"
-  }, ["div.jsx-2799340139{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;inset-inline-start:0;}"]));
+    id: "3586508456"
+  }, [`div.jsx-3586508456{width:100%;height:${INTERSECTION_DETECTOR_HEIGHT}px;position:absolute;z-index:-1;bottom:0;inset-inline-start:0;}`]));
 };
 exports.EndIntersectionDetector = EndIntersectionDetector;
 EndIntersectionDetector.propTypes = {

package/build/cjs/features/notify_at_end_of_list/index.js

@@ -13,6 +13,10 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('Transfer End Of List', 'Partial Source List');
   cy.wrap('source').as('listType');
 });
+(0, _cypressCucumberPreprocessor.Given)('the Transfer source options list does not fill the list completely', () => {
+  cy.visitStory('Transfer End Of List', 'Option Changes For Short List');
+  cy.wrap('source').as('listType');
+});
 (0, _cypressCucumberPreprocessor.Given)('the Transfer does not have enough items to fill the picked list completely', () => {
   cy.visitStory('Transfer End Of List', 'Partial Picked List');
   cy.wrap('picked').as('listType');
@@ -23,6 +27,12 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     cy.get(`{${listSelector}-endintersectiondetector}`).scrollIntoView();
   });
 });
+(0, _cypressCucumberPreprocessor.When)('the user adds an item by clicking the button', () => {
+  cy.contains('Increment options lists').click();
+});
+(0, _cypressCucumberPreprocessor.Then)('the last list item should be fully visible', () => {
+  cy.contains('ARI treated with antibiotics (pneumonia) new').should('be.visible');
+});
 (0, _cypressCucumberPreprocessor.Then)('the callback for reaching the end should not be called', () => {
   cy.all(() => cy.window(), () => cy.get('@listType')).should(_ref => {
     let [win, listType] = _ref;
@@ -36,4 +46,29 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     const callback = listType === 'source' ? win.onEndReached : win.onEndReachedPicked;
     expect(callback).to.be.calledOnce;
   });
+});
+(0, _cypressCucumberPreprocessor.When)('the user scrolls down to the source list end', () => {
+  cy.get('[data-test="dhis2-uicore-transfer-sourceoptions"]').find('[data-test="dhis2-uicore-intersectiondetector"]').scrollIntoView();
+});
+(0, _cypressCucumberPreprocessor.Then)('the list end indicator of the source list should be visible', () => {
+  cy.get('[data-test="dhis2-uicore-transfer-sourceoptions"]').find('[data-test="dhis2-uicore-intersectiondetector"]').should('be.visible');
+});
+(0, _cypressCucumberPreprocessor.Then)('the list end indicator of the source list should not be visible', () => {
+  cy.get('[data-test="dhis2-uicore-transfer-sourceoptions"]').find('[data-test="dhis2-uicore-intersectiondetector"]').should('not.be.visible');
+});
+(0, _cypressCucumberPreprocessor.Then)('the callback for reaching the end of the source list should be called {int} times', function (int) {
+  cy.window().should(win => {
+    expect(win.onEndReached).to.have.callCount(int);
+  });
+});
+(0, _cypressCucumberPreprocessor.Then)('the selected item is being displayed in the picked list', () => {
+  cy.get('[data-test="dhis2-uicore-transfer-pickedoptions"]').contains('Option nr. 9').should('be.visible');
+});
+(0, _cypressCucumberPreprocessor.When)('the user selects option nr. {}', function (int) {
+  cy.contains(`Option nr. ${int}`).dblclick();
+});
+(0, _cypressCucumberPreprocessor.Then)('the callback for reaching the end of the picked list should be called {int} times', function (int) {
+  cy.window().should(win => {
+    expect(win.onEndReachedPicked).to.have.callCount(int);
+  });
 });

package/build/cjs/features/notify_at_end_of_list.feature

@@ -27,3 +27,38 @@ Feature: The source and picked option lists notify the consumer when the end has
             | type   |
             | source |
             | picked |
+
+    Scenario: The list is short and items are added within the list container
+        Given the Transfer source options list does not fill the list completely
+        # Initial state: the list has 7 items and the list ends well above the container bottom
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 1 times
+        Then the callback for reaching the end of the picked list should be called 1 times
+        # Selected item is not in the options array but is present in the `selectedOptionsLookup`
+        Then the selected item is being displayed in the picked list
+        When the user adds an item by clicking the button
+        # The indicator is still just in view
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 2 times
+        When the user adds an item by clicking the button
+        # This adds val-9, which is a selected item so it gets added to picked options
+        # not source options, but the callback is still called
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 3 times
+        # The picked list callback does not get called because the picked item was already present
+        Then the callback for reaching the end of the picked list should be called 1 times
+        When the user adds an item by clicking the button
+        # The indicator is still in view but only just
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 4 times
+        When the user adds an item by clicking the button
+        # The indicator now is out of view, no more calls
+        Then the list end indicator of the source list should not be visible
+        Then the callback for reaching the end of the source list should be called 4 times
+        # But scrolling down does trigger a call
+        When the user scrolls down to the source list end
+        Then the list end indicator of the source list should be visible
+        Then the callback for reaching the end of the source list should be called 5 times
+        # And selecting an item triggers a call in the picked list
+        When the user selects option nr. 11
+        Then the callback for reaching the end of the picked list should be called 2 times

package/build/cjs/options-container.js

@@ -9,12 +9,13 @@ var _loader = require("@dhis2-ui/loader");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _endIntersectionDetector = require("./end-intersection-detector.js");
-var _useResizeCounter = require("./use-resize-counter.js");
+var _useOptionsKeyMonitor = require("./transfer/use-options-key-monitor.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const OptionsContainer = _ref => {
   let {
+    allOptionsKey,
     dataTest,
     emptyComponent,
     onEndReached,
@@ -27,19 +28,24 @@ const OptionsContainer = _ref => {
     selectionHandler,
     toggleHighlightedOption
   } = _ref;
-  const optionsRef = (0, _react.useRef)(null);
-  const wrapperRef = (0, _react.useRef)(null);
-  const resizeCounter = (0, _useResizeCounter.useResizeCounter)(wrapperRef.current);
+  const scrollBoxRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
+  (0, _useOptionsKeyMonitor.useOptionsKeyMonitor)({
+    scrollBoxRef,
+    listRef,
+    allOptionsKey,
+    onEndReached
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-1882699425" + " " + "optionsContainer"
   }, loading && /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-1882699425" + " " + "loading"
   }, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null)), /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    ref: optionsRef,
+    ref: scrollBoxRef,
     className: "jsx-1882699425" + " " + "container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperRef,
+    ref: listRef,
     className: "jsx-1882699425" + " " + "content-container"
   }, !options.length && emptyComponent, options.map(option => {
     const highlighted = !!highlightedOptions.find(highlightedSourceOption => highlightedSourceOption === option.value);
@@ -53,8 +59,7 @@ const OptionsContainer = _ref => {
     }));
   }), onEndReached && /*#__PURE__*/_react.default.createElement(_endIntersectionDetector.EndIntersectionDetector, {
     dataTest: `${dataTest}-endintersectiondetector`,
-    key: `key-${resizeCounter}`,
-    rootRef: optionsRef,
+    rootRef: scrollBoxRef,
     onEndReached: onEndReached
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1882699425"
@@ -62,6 +67,7 @@ const OptionsContainer = _ref => {
 };
 exports.OptionsContainer = OptionsContainer;
 OptionsContainer.propTypes = {
+  allOptionsKey: _propTypes.default.string.isRequired,
   dataTest: _propTypes.default.string.isRequired,
   getOptionClickHandlers: _propTypes.default.func.isRequired,
   emptyComponent: _propTypes.default.node,

package/build/cjs/transfer/index.js

@@ -145,4 +145,15 @@ Object.keys(_useHighlightedOptions).forEach(function (key) {
       return _useHighlightedOptions[key];
     }
   });
+});
+var _useOptionsKeyMonitor = require("./use-options-key-monitor.js");
+Object.keys(_useOptionsKeyMonitor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOptionsKeyMonitor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOptionsKeyMonitor[key];
+    }
+  });
 });

package/build/cjs/transfer/use-options-key-monitor.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOptionsKeyMonitor = void 0;
+var _react = require("react");
+var _endIntersectionDetector = require("../end-intersection-detector.js");
+const isEndIntersectionDetectorWithinScrollBox = (scrollBoxRef, listRef) => {
+  if (!scrollBoxRef.current || !listRef.current) {
+    return false;
+  }
+  const scrollBoxRect = scrollBoxRef.current.getBoundingClientRect();
+  const listRect = listRef.current.getBoundingClientRect();
+  return listRect.bottom - scrollBoxRect.bottom < _endIntersectionDetector.INTERSECTION_DETECTOR_HEIGHT;
+};
+const useOptionsKeyMonitor = _ref => {
+  let {
+    scrollBoxRef,
+    listRef,
+    allOptionsKey,
+    onEndReached
+  } = _ref;
+  /* Store in ref so this works even if a consumer does not pass a stable
+   * function reference */
+  const onEndReachedRef = (0, _react.useRef)(onEndReached);
+  const prevAllOptionsKey = (0, _react.useRef)(allOptionsKey);
+  onEndReachedRef.current = onEndReached;
+  (0, _react.useEffect)(() => {
+    /* When new options are loaded and the list end is (still) in
+     * view we need to call onEndReached, because the end of the list
+     * has indeed been reached but the interception detector will not pick
+     * up on this */
+    if (onEndReachedRef.current && prevAllOptionsKey.current !== allOptionsKey && isEndIntersectionDetectorWithinScrollBox(scrollBoxRef, listRef)) {
+      onEndReachedRef.current();
+    }
+    prevAllOptionsKey.current = allOptionsKey;
+    /* This effect will only run on mount and when allOptionsKey
+     * changes because scrollBoxRef, listRef are stable references */
+  }, [scrollBoxRef, listRef, allOptionsKey]);
+};
+exports.useOptionsKeyMonitor = useOptionsKeyMonitor;

package/build/cjs/transfer.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Transfer = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _actions = require("./actions.js");
 var _addAll = require("./add-all.js");
 var _addIndividual = require("./add-individual.js");
@@ -23,9 +23,12 @@ var _rightHeader = require("./right-header.js");
 var _rightSide = require("./right-side.js");
 var _index = require("./transfer/index.js");
 var _transferOption = require("./transfer-option.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const identity = value => value;
 const defaultSelected = [];
+const defaultSelectedOptionsLookup = {};
 const Transfer = _ref => {
   let {
     options,
@@ -49,6 +52,7 @@ const Transfer = _ref => {
     hideFilterInputPicked,
     initialSearchTerm = '',
     initialSearchTermPicked = '',
+    selectedOptionsLookup = defaultSelectedOptionsLookup,
     leftFooter,
     leftHeader,
     loadingPicked,
@@ -131,16 +135,15 @@ const Transfer = _ref => {
    * Actual picked options:
    * Extract the selected options. Can't use `options.filter`
    * because we need to keep the order of `selected`
+   * Note: Only map if selected is an array
    */
-  let pickedOptions = [];
-
-  // Only map if selected is an array
-  if (Array.isArray(selected)) {
-    pickedOptions = actualFilterPickedCallback(selected.map(value => options.find(option => value === option.value))
-    // filter -> in case a selected value has been provided
-    // that does not exist as option
-    .filter(identity), actualFilterPicked);
-  }
+  const pickedOptions = (0, _react.useMemo)(() => Array.isArray(selected) ? actualFilterPickedCallback(selected.map(value => {
+    var _selectedOptionsLooku;
+    return (_selectedOptionsLooku = selectedOptionsLookup[value]) !== null && _selectedOptionsLooku !== void 0 ? _selectedOptionsLooku : options.find(option => value === option.value);
+  })
+  // filter -> in case a selected value has been provided
+  // that does not exist as option
+  .filter(identity), actualFilterPicked) : [], [selected, options, actualFilterPicked, actualFilterPickedCallback, selectedOptionsLookup]);
 
   /*
    * Source options highlighting:
@@ -183,6 +186,18 @@ const Transfer = _ref => {
   const isAddIndividualDisabled = disabled || !highlightedSourceOptions.length;
   const isRemoveAllDisabled = disabled || !selected.length;
   const isRemoveIndividualDisabled = disabled || !highlightedPickedOptions.length;
+  const allOptionsKey = (0, _react.useMemo)(() => options.map(_ref4 => {
+    let {
+      value
+    } = _ref4;
+    return value;
+  }).join('|'), [options]);
+  const pickedOptionsKey = (0, _react.useMemo)(() => pickedOptions.map(_ref5 => {
+    let {
+      value
+    } = _ref5;
+    return value;
+  }).join('|'), [pickedOptions]);
   return /*#__PURE__*/_react.default.createElement(_container.Container, {
     dataTest: dataTest,
     className: className,
@@ -197,13 +212,14 @@ const Transfer = _ref => {
     placeholder: filterPlaceholder,
     dataTest: `${dataTest}-filter`,
     filter: actualFilter,
-    onChange: onFilterChange ? onFilterChange : _ref4 => {
+    onChange: onFilterChange ? onFilterChange : _ref6 => {
       let {
         value
-      } = _ref4;
+      } = _ref6;
       return setInternalFilter(value);
     }
   })), /*#__PURE__*/_react.default.createElement(_optionsContainer.OptionsContainer, {
+    allOptionsKey: allOptionsKey,
     dataTest: `${dataTest}-sourceoptions`,
     emptyComponent: sourceEmptyPlaceholder,
     getOptionClickHandlers: _index.getOptionClickHandlers,
@@ -271,14 +287,15 @@ const Transfer = _ref => {
     placeholder: filterPlaceholderPicked,
     dataTest: `${dataTest}-filter`,
     filter: actualFilterPicked,
-    onChange: onFilterChangePicked ? onFilterChangePicked : _ref5 => {
+    onChange: onFilterChangePicked ? onFilterChangePicked : _ref7 => {
       let {
         value
-      } = _ref5;
+      } = _ref7;
       return setInternalFilterPicked(value);
     }
   })), /*#__PURE__*/_react.default.createElement(_optionsContainer.OptionsContainer, {
     selected: true,
+    allOptionsKey: pickedOptionsKey,
     dataTest: `${dataTest}-pickedoptions`,
     emptyComponent: selectedEmptyComponent,
     getOptionClickHandlers: _index.getOptionClickHandlers,
@@ -358,6 +375,16 @@ Transfer.propTypes = {
   searchTermPicked: _propTypes.default.string,
   selected: _propTypes.default.arrayOf(_propTypes.default.string),
   selectedEmptyComponent: _propTypes.default.node,
+  /**
+   * To be used in scenarios where selected options may not be present
+   * in the options array. Like when having options that lazy load or can
+   * be filtered async.
+   */
+  selectedOptionsLookup: _propTypes.default.objectOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired,
+    disabled: _propTypes.default.bool
+  })),
   selectedWidth: _propTypes.default.string,
   sourceEmptyPlaceholder: _propTypes.default.node,
   onEndReached: _propTypes.default.func,

package/build/cjs/transfer.prod.stories.js

@@ -454,6 +454,8 @@ const pageSize = 5;
  * To keep the code as small as possible, handling selecting items is not
    included
  */
+const preSelectedOptions = optionsPool.slice(optionsPool.length - 4);
+const waitMs = async ms => new Promise(resolve => setTimeout(resolve, ms));
 const InfiniteLoading = args => {
   (0, _react.useEffect)(() => {
     console.clear();
@@ -461,59 +463,45 @@ const InfiniteLoading = args => {
 
   // state for whether the next page's options are being loaded
   const [loading, setLoading] = (0, _react.useState)(false);
-  // captures the current page
-  const [page, setPage] = (0, _react.useState)(0);
-  // all options (incl. available AND selected options)
+  // prevent fetches after list is complete
+  const [isOptionsListComplete, setIsOptionsListComplete] = (0, _react.useState)(false);
   const [options, setOptions] = (0, _react.useState)([]);
   // selected options
   const [selected] = (0, _react.useState)(
-  // second page is already selected
-  optionsPool.slice(pageSize, pageSize * 2).map(_ref13 => {
+  // Last 4 options preselected
+  preSelectedOptions.map(_ref13 => {
     let {
       value
     } = _ref13;
     return value;
   }));
-  const onEndReached = () => {
-    // do nothing when loading already
-    if (loading) {
-      return;
-    }
-    setPage(page + 1);
-  };
-
-  // fake fetch request
-  const fetchOptions = nextPage => new Promise(resolve => setTimeout(() => {
-    const nextOptions = optionsPool.slice(options.length, nextPage * pageSize);
-    resolve(nextOptions);
-  }, 2000));
-  const loadNextOptions = async () => {
+  const selectedOptionsLookup = (0, _react.useMemo)(() => preSelectedOptions.reduce((lookup, option) => {
+    lookup[option.value] = option;
+    return lookup;
+  }, {}), []);
+  const loadMoreOptions = (0, _react.useCallback)(async () => {
     setLoading(true);
-    const nextOptions = await fetchOptions(page);
-    setOptions([...options, ...nextOptions]);
-    setLoading(false);
-    const allAlreadySelected = nextOptions.length !== 0 && nextOptions.every(nextOption => {
-      const {
-        value
-      } = nextOption;
-      return selected.includes(value);
-    });
-    if (allAlreadySelected) {
-      onEndReached();
+    await waitMs(2000);
+    const newOptions = optionsPool.slice(options.length, Math.min(options.length + pageSize, optionsPool.length));
+    const combinedOptions = [...options, ...newOptions];
+    setOptions(combinedOptions);
+    if (combinedOptions.length === optionsPool.length) {
+      setIsOptionsListComplete(true);
     }
-  };
-  (0, _react.useEffect)(() => {
-    // prevent initial call
-    if (page > 0) {
-      loadNextOptions();
+    setLoading(false);
+  }, [options]);
+  const onEndReached = (0, _react.useCallback)(() => {
+    if (!isOptionsListComplete) {
+      loadMoreOptions();
     }
-  }, [page]);
+  }, [loadMoreOptions, isOptionsListComplete]);
   return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
     loading: loading,
     options: options,
     selected: selected,
     onChange: () => null /* noop */,
-    onEndReached: onEndReached
+    onEndReached: onEndReached,
+    selectedOptionsLookup: selectedOptionsLookup
   }));
 };
 exports.InfiniteLoading = InfiniteLoading;

package/build/es/__e2e__/notify_at_end_of_list.e2e.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { Transfer } from '../transfer.js';
 import { options } from './common/options.js';
 import { statefulDecorator } from './common/stateful-decorator.js';
@@ -75,4 +75,45 @@ PartialPickedList.story = {
       return value;
     })
   })]
+};
+const selectedOptionsLookup = {
+  'val-9': {
+    value: 'val-9',
+    label: 'Option nr. 9'
+  }
+};
+export const OptionChangesForShortList = (_, _ref7) => {
+  let {
+    onChange,
+    selected
+  } = _ref7;
+  const [optionsCount, setOptionsCount] = useState(7);
+  const myOptions = useMemo(() => {
+    let counter = 1;
+    const newOptions = [];
+    while (counter <= optionsCount) {
+      newOptions.push({
+        value: `val-${counter}`,
+        label: `Option nr. ${counter}`
+      });
+      counter++;
+    }
+    return newOptions;
+  }, [optionsCount]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setOptionsCount(curr => curr + 1)
+  }, "Increment options lists"), /*#__PURE__*/React.createElement(Transfer, {
+    filterable: true,
+    selected: selected,
+    selectedOptionsLookup: selectedOptionsLookup,
+    onChange: onChange,
+    options: myOptions,
+    onEndReached: window.onEndReached,
+    onEndReachedPicked: window.onEndReachedPicked
+  }));
+};
+OptionChangesForShortList.story = {
+  decorators: [statefulDecorator({
+    initialState: ['val-9']
+  })]
 };

package/build/es/end-intersection-detector.js

@@ -2,6 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { IntersectionDetector } from '@dhis2-ui/intersection-detector';
 import PropTypes from 'prop-types';
 import React from 'react';
+export const INTERSECTION_DETECTOR_HEIGHT = 50;
 export const EndIntersectionDetector = _ref => {
   let {
     rootRef,
@@ -10,7 +11,7 @@ export const EndIntersectionDetector = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: "jsx-2799340139"
+    className: "jsx-3586508456"
   }, /*#__PURE__*/React.createElement(IntersectionDetector, {
     rootRef: rootRef,
     onChange: _ref2 => {
@@ -20,8 +21,8 @@ export const EndIntersectionDetector = _ref => {
       return isIntersecting && onEndReached();
     }
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2799340139"
-  }, ["div.jsx-2799340139{width:100%;height:50px;position:absolute;z-index:-1;bottom:0;inset-inline-start:0;}"]));
+    id: "3586508456"
+  }, [`div.jsx-3586508456{width:100%;height:${INTERSECTION_DETECTOR_HEIGHT}px;position:absolute;z-index:-1;bottom:0;inset-inline-start:0;}`]));
 };
 EndIntersectionDetector.propTypes = {
   rootRef: PropTypes.shape({