@dhis2-ui/transfer 10.10.2 → 10.12.0

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

@@ -11,6 +11,10 @@ Given('the Transfer does not have enough items to fill the source list completel
   cy.visitStory('Transfer End Of List', 'Partial Source List');
   cy.wrap('source').as('listType');
 });
+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');
+});
 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');
@@ -21,6 +25,12 @@ When('the user scroll to the end of the list', () => {
     cy.get(`{${listSelector}-endintersectiondetector}`).scrollIntoView();
   });
 });
+When('the user adds an item by clicking the button', () => {
+  cy.contains('Increment options lists').click();
+});
+Then('the last list item should be fully visible', () => {
+  cy.contains('ARI treated with antibiotics (pneumonia) new').should('be.visible');
+});
 Then('the callback for reaching the end should not be called', () => {
   cy.all(() => cy.window(), () => cy.get('@listType')).should(_ref => {
     let [win, listType] = _ref;
@@ -34,4 +44,29 @@ Then('the callback for reaching the end should be called', () => {
     const callback = listType === 'source' ? win.onEndReached : win.onEndReachedPicked;
     expect(callback).to.be.calledOnce;
   });
+});
+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();
+});
+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');
+});
+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');
+});
+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);
+  });
+});
+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');
+});
+When('the user selects option nr. {}', function (int) {
+  cy.contains(`Option nr. ${int}`).dblclick();
+});
+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/es/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/es/options-container.js

@@ -3,9 +3,10 @@ import { CircularLoader } from '@dhis2-ui/loader';
 import PropTypes from 'prop-types';
 import React, { Fragment, useRef } from 'react';
 import { EndIntersectionDetector } from './end-intersection-detector.js';
-import { useResizeCounter } from './use-resize-counter.js';
+import { useOptionsKeyMonitor } from './transfer/use-options-key-monitor.js';
 export const OptionsContainer = _ref => {
   let {
+    allOptionsKey,
     dataTest,
     emptyComponent,
     onEndReached,
@@ -18,19 +19,24 @@ export const OptionsContainer = _ref => {
     selectionHandler,
     toggleHighlightedOption
   } = _ref;
-  const optionsRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const resizeCounter = useResizeCounter(wrapperRef.current);
+  const scrollBoxRef = useRef(null);
+  const listRef = useRef(null);
+  useOptionsKeyMonitor({
+    scrollBoxRef,
+    listRef,
+    allOptionsKey,
+    onEndReached
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: "jsx-1882699425" + " " + "optionsContainer"
   }, loading && /*#__PURE__*/React.createElement("div", {
     className: "jsx-1882699425" + " " + "loading"
   }, /*#__PURE__*/React.createElement(CircularLoader, null)), /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    ref: optionsRef,
+    ref: scrollBoxRef,
     className: "jsx-1882699425" + " " + "container"
   }, /*#__PURE__*/React.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);
@@ -44,14 +50,14 @@ export const OptionsContainer = _ref => {
     }));
   }), onEndReached && /*#__PURE__*/React.createElement(EndIntersectionDetector, {
     dataTest: `${dataTest}-endintersectiondetector`,
-    key: `key-${resizeCounter}`,
-    rootRef: optionsRef,
+    rootRef: scrollBoxRef,
     onEndReached: onEndReached
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1882699425"
   }, [".optionsContainer.jsx-1882699425{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;overflow:hidden;}", ".container.jsx-1882699425{overflow-y:auto;height:100%;}", ".loading.jsx-1882699425{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:2;top:0;inset-inline-start:0;}", ".content-container.jsx-1882699425{z-index:1;position:relative;}", ".loading.jsx-1882699425+.container.jsx-1882699425 .content-container.jsx-1882699425{-webkit-filter:blur(2px);filter:blur(2px);}"]));
 };
 OptionsContainer.propTypes = {
+  allOptionsKey: PropTypes.string.isRequired,
   dataTest: PropTypes.string.isRequired,
   getOptionClickHandlers: PropTypes.func.isRequired,
   emptyComponent: PropTypes.node,

package/build/es/transfer/index.js

@@ -10,4 +10,5 @@ export * from './move-highlighted-picked-option-up.js';
 export * from './remove-all-picked-options.js';
 export * from './remove-individual-picked-options.js';
 export * from './use-filter.js';
-export * from './use-highlighted-options.js';
+export * from './use-highlighted-options.js';
+export * from './use-options-key-monitor.js';

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

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+import { INTERSECTION_DETECTOR_HEIGHT } from '../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 < INTERSECTION_DETECTOR_HEIGHT;
+};
+export 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 = useRef(onEndReached);
+  const prevAllOptionsKey = useRef(allOptionsKey);
+  onEndReachedRef.current = onEndReached;
+  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]);
+};

package/build/es/transfer.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Actions } from './actions.js';
 import { AddAll } from './add-all.js';
 import { AddIndividual } from './add-individual.js';
@@ -19,6 +19,7 @@ import { addAllSelectableSourceOptions, addIndividualSourceOptions, createDouble
 import { TransferOption } from './transfer-option.js';
 const identity = value => value;
 const defaultSelected = [];
+const defaultSelectedOptionsLookup = {};
 export const Transfer = _ref => {
   let {
     options,
@@ -42,6 +43,7 @@ export const Transfer = _ref => {
     hideFilterInputPicked,
     initialSearchTerm = '',
     initialSearchTermPicked = '',
+    selectedOptionsLookup = defaultSelectedOptionsLookup,
     leftFooter,
     leftHeader,
     loadingPicked,
@@ -124,16 +126,15 @@ export 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 = 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:
@@ -176,6 +177,18 @@ export const Transfer = _ref => {
   const isAddIndividualDisabled = disabled || !highlightedSourceOptions.length;
   const isRemoveAllDisabled = disabled || !selected.length;
   const isRemoveIndividualDisabled = disabled || !highlightedPickedOptions.length;
+  const allOptionsKey = useMemo(() => options.map(_ref4 => {
+    let {
+      value
+    } = _ref4;
+    return value;
+  }).join('|'), [options]);
+  const pickedOptionsKey = useMemo(() => pickedOptions.map(_ref5 => {
+    let {
+      value
+    } = _ref5;
+    return value;
+  }).join('|'), [pickedOptions]);
   return /*#__PURE__*/React.createElement(Container, {
     dataTest: dataTest,
     className: className,
@@ -190,13 +203,14 @@ export 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.createElement(OptionsContainer, {
+    allOptionsKey: allOptionsKey,
     dataTest: `${dataTest}-sourceoptions`,
     emptyComponent: sourceEmptyPlaceholder,
     getOptionClickHandlers: getOptionClickHandlers,
@@ -264,14 +278,15 @@ export 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.createElement(OptionsContainer, {
     selected: true,
+    allOptionsKey: pickedOptionsKey,
     dataTest: `${dataTest}-pickedoptions`,
     emptyComponent: selectedEmptyComponent,
     getOptionClickHandlers: getOptionClickHandlers,
@@ -350,6 +365,16 @@ Transfer.propTypes = {
   searchTermPicked: PropTypes.string,
   selected: PropTypes.arrayOf(PropTypes.string),
   selectedEmptyComponent: PropTypes.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.objectOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    disabled: PropTypes.bool
+  })),
   selectedWidth: PropTypes.string,
   sourceEmptyPlaceholder: PropTypes.node,
   onEndReached: PropTypes.func,

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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { SingleSelectField, SingleSelectOption } from '@dhis2-ui/select';
 import { Tab, TabBar } from '@dhis2-ui/tab';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { TransferOption } from './transfer-option.js';
 import { Transfer } from './transfer.js';
 const subtitle = 'Allows users to select options from a list';
@@ -444,6 +444,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));
 export const InfiniteLoading = args => {
   useEffect(() => {
     console.clear();
@@ -451,59 +453,45 @@ export const InfiniteLoading = args => {
 
   // state for whether the next page's options are being loaded
   const [loading, setLoading] = useState(false);
-  // captures the current page
-  const [page, setPage] = useState(0);
-  // all options (incl. available AND selected options)
+  // prevent fetches after list is complete
+  const [isOptionsListComplete, setIsOptionsListComplete] = useState(false);
   const [options, setOptions] = useState([]);
   // selected options
   const [selected] = 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 = useMemo(() => preSelectedOptions.reduce((lookup, option) => {
+    lookup[option.value] = option;
+    return lookup;
+  }, {}), []);
+  const loadMoreOptions = 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);
     }
-  };
-  useEffect(() => {
-    // prevent initial call
-    if (page > 0) {
-      loadNextOptions();
+    setLoading(false);
+  }, [options]);
+  const onEndReached = useCallback(() => {
+    if (!isOptionsListComplete) {
+      loadMoreOptions();
     }
-  }, [page]);
+  }, [loadMoreOptions, isOptionsListComplete]);
   return /*#__PURE__*/React.createElement(Transfer, _extends({}, args, {
     loading: loading,
     options: options,
     selected: selected,
     onChange: () => null /* noop */,
-    onEndReached: onEndReached
+    onEndReached: onEndReached,
+    selectedOptionsLookup: selectedOptionsLookup
   }));
 };
 export const LoadingSource = StatefulTemplate.bind({});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "10.10.2",
+    "version": "10.12.0",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.10.2",
-        "@dhis2-ui/field": "10.10.2",
-        "@dhis2-ui/input": "10.10.2",
-        "@dhis2-ui/intersection-detector": "10.10.2",
-        "@dhis2-ui/loader": "10.10.2",
-        "@dhis2/ui-constants": "10.10.2",
+        "@dhis2-ui/button": "10.12.0",
+        "@dhis2-ui/field": "10.12.0",
+        "@dhis2-ui/input": "10.12.0",
+        "@dhis2-ui/intersection-detector": "10.12.0",
+        "@dhis2-ui/loader": "10.12.0",
+        "@dhis2/ui-constants": "10.12.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/types/index.d.ts

@@ -44,6 +44,12 @@ export interface TransferProps {
     searchTermPicked?: string
     selected?: string[]
     selectedEmptyComponent?: React.ReactNode
+    /**
+     * 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?: Record<string, TransferOption>
     selectedWidth?: string
     sourceEmptyPlaceholder?: React.ReactNode
     onEndReached?: () => void

package/build/cjs/picked-options.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PickedOptions = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _uiConstants = require("@dhis2/ui-constants");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _endIntersectionDetector = require("./end-intersection-detector.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const PickedOptions = _ref => {
-  let {
-    children,
-    dataTest,
-    selectedEmptyComponent,
-    pickedOptionsRef,
-    onPickedEndReached
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    ref: pickedOptionsRef,
-    className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "content-container"
-  }, !_react.default.Children.count(children) && selectedEmptyComponent, children, onPickedEndReached && /*#__PURE__*/_react.default.createElement(_endIntersectionDetector.EndIntersectionDetector, {
-    rootRef: pickedOptionsRef,
-    onEndReached: onPickedEndReached
-  })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "392419471",
-    dynamic: [_uiConstants.spacers.dp4]
-  }, [`.container.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp4} 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}`, ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
-};
-exports.PickedOptions = PickedOptions;
-PickedOptions.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  dataTest: _propTypes.default.string.isRequired,
-  pickedOptionsRef: _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(HTMLElement)
-  }),
-  selectedEmptyComponent: _propTypes.default.node,
-  onPickedEndReached: _propTypes.default.func
-};

package/build/cjs/source-options.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SourceOptions = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _uiConstants = require("@dhis2/ui-constants");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _endIntersectionDetector = require("./end-intersection-detector.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SourceOptions = _ref => {
-  let {
-    children,
-    dataTest,
-    sourceEmptyPlaceholder,
-    sourceOptionsRef,
-    onSourceEndReached
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    ref: sourceOptionsRef,
-    className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["392419471", [_uiConstants.spacers.dp4]]]) + " " + "content-container"
-  }, children, !_react.default.Children.count(children) && sourceEmptyPlaceholder, onSourceEndReached && /*#__PURE__*/_react.default.createElement(_endIntersectionDetector.EndIntersectionDetector, {
-    rootRef: sourceOptionsRef,
-    onEndReached: onSourceEndReached
-  })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "392419471",
-    dynamic: [_uiConstants.spacers.dp4]
-  }, [`.container.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp4} 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}`, ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
-};
-exports.SourceOptions = SourceOptions;
-SourceOptions.propTypes = {
-  dataTest: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node,
-  sourceEmptyPlaceholder: _propTypes.default.node,
-  sourceOptionsRef: _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(HTMLElement)
-  }),
-  onSourceEndReached: _propTypes.default.func
-};

package/build/cjs/use-resize-counter.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useResizeCounter = void 0;
-var _react = require("react");
-/*
- * The initial call is irrelevant as there has been
- * no resize yet that we want to react to
- * So we start with -1 with will returned as 0 by this hook
- *
- * @param {Element} element
- * @returns {number}
- */
-const useResizeCounter = element => {
-  const [counter, setCounter] = (0, _react.useState)(-1);
-  (0, _react.useEffect)(() => {
-    // using an internal counter as using the one from `useState`
-    // would cause an infinite loop as this `useEffect` would
-    // both depend on that value as well as change it every time
-    // it's executed as the callback passed to `ResizeObserver`
-    // will be executed on construction
-    let internalCounter = counter;
-    if (element) {
-      const observer = new ResizeObserver(() => {
-        ++internalCounter;
-        setCounter(internalCounter);
-      });
-      observer.observe(element);
-      return () => observer.disconnect();
-    }
-  }, [element, setCounter]);
-  return counter < 1 ? 0 : counter;
-};
-exports.useResizeCounter = useResizeCounter;

package/build/es/picked-options.js

@@ -1,36 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import { spacers } from '@dhis2/ui-constants';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { EndIntersectionDetector } from './end-intersection-detector.js';
-export const PickedOptions = _ref => {
-  let {
-    children,
-    dataTest,
-    selectedEmptyComponent,
-    pickedOptionsRef,
-    onPickedEndReached
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    ref: pickedOptionsRef,
-    className: _JSXStyle.dynamic([["392419471", [spacers.dp4]]]) + " " + "container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["392419471", [spacers.dp4]]]) + " " + "content-container"
-  }, !React.Children.count(children) && selectedEmptyComponent, children, onPickedEndReached && /*#__PURE__*/React.createElement(EndIntersectionDetector, {
-    rootRef: pickedOptionsRef,
-    onEndReached: onPickedEndReached
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "392419471",
-    dynamic: [spacers.dp4]
-  }, [`.container.__jsx-style-dynamic-selector{padding:${spacers.dp4} 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}`, ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
-};
-PickedOptions.propTypes = {
-  children: PropTypes.node.isRequired,
-  dataTest: PropTypes.string.isRequired,
-  pickedOptionsRef: PropTypes.shape({
-    current: PropTypes.instanceOf(HTMLElement)
-  }),
-  selectedEmptyComponent: PropTypes.node,
-  onPickedEndReached: PropTypes.func
-};

package/build/es/source-options.js

@@ -1,36 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import { spacers } from '@dhis2/ui-constants';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { EndIntersectionDetector } from './end-intersection-detector.js';
-export const SourceOptions = _ref => {
-  let {
-    children,
-    dataTest,
-    sourceEmptyPlaceholder,
-    sourceOptionsRef,
-    onSourceEndReached
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    ref: sourceOptionsRef,
-    className: _JSXStyle.dynamic([["392419471", [spacers.dp4]]]) + " " + "container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["392419471", [spacers.dp4]]]) + " " + "content-container"
-  }, children, !React.Children.count(children) && sourceEmptyPlaceholder, onSourceEndReached && /*#__PURE__*/React.createElement(EndIntersectionDetector, {
-    rootRef: sourceOptionsRef,
-    onEndReached: onSourceEndReached
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "392419471",
-    dynamic: [spacers.dp4]
-  }, [`.container.__jsx-style-dynamic-selector{padding:${spacers.dp4} 0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;}`, ".content-container.__jsx-style-dynamic-selector{position:relative;}"]));
-};
-SourceOptions.propTypes = {
-  dataTest: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  sourceEmptyPlaceholder: PropTypes.node,
-  sourceOptionsRef: PropTypes.shape({
-    current: PropTypes.instanceOf(HTMLElement)
-  }),
-  onSourceEndReached: PropTypes.func
-};