@dhis2-ui/transfer 10.13.0 → 10.14.0

package/build/cjs/transfer/get-highlighted-picked-indices.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHighlightedPickedIndices = void 0;
+/**
+ * Returns the indices, in ascending order, of `highlightedPickedOptions`
+ * within `selected`. Values in `highlightedPickedOptions` that don't appear
+ * in `selected` are ignored, so callers can pass a potentially stale
+ * highlight list without filtering first.
+ *
+ * Runs in O(n) over `selected` via a Set lookup.
+ *
+ * @param {Object} args
+ * @param {string[]} args.selected
+ * @param {string[]} args.highlightedPickedOptions
+ * @returns {number[]}
+ */
+const getHighlightedPickedIndices = _ref => {
+  let {
+    selected,
+    highlightedPickedOptions
+  } = _ref;
+  const highlightedSet = new Set(highlightedPickedOptions);
+  const indices = [];
+  selected.forEach((value, index) => {
+    if (highlightedSet.has(value)) {
+      indices.push(index);
+    }
+  });
+  return indices;
+};
+exports.getHighlightedPickedIndices = getHighlightedPickedIndices;

package/build/cjs/transfer/index.js

@@ -47,6 +47,17 @@ Object.keys(_defaultFilterCallback).forEach(function (key) {
     }
   });
 });
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
+Object.keys(_getHighlightedPickedIndices).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getHighlightedPickedIndices[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getHighlightedPickedIndices[key];
+    }
+  });
+});
 var _getOptionClickHandlers = require("./get-option-click-handlers.js");
 Object.keys(_getOptionClickHandlers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -91,6 +102,28 @@ Object.keys(_moveHighlightedPickedOptionDown).forEach(function (key) {
     }
   });
 });
+var _moveHighlightedPickedOptionToBottom = require("./move-highlighted-picked-option-to-bottom.js");
+Object.keys(_moveHighlightedPickedOptionToBottom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _moveHighlightedPickedOptionToBottom[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _moveHighlightedPickedOptionToBottom[key];
+    }
+  });
+});
+var _moveHighlightedPickedOptionToTop = require("./move-highlighted-picked-option-to-top.js");
+Object.keys(_moveHighlightedPickedOptionToTop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _moveHighlightedPickedOptionToTop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _moveHighlightedPickedOptionToTop[key];
+    }
+  });
+});
 var _moveHighlightedPickedOptionUp = require("./move-highlighted-picked-option-up.js");
 Object.keys(_moveHighlightedPickedOptionUp).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/cjs/transfer/is-reorder-down-disabled.js

@@ -4,22 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isReorderDownDisabled = void 0;
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
 /**
  * @param {Object} args
- * @param {string} args.highlightedPickedOptions
+ * @param {string[]} args.highlightedPickedOptions
  * @param {string[]} args.selected
+ * @param {boolean} [args.filterActivePicked] reorder is disabled while a filter is applied to the picked side
  * @returns {bool}
  */
 const isReorderDownDisabled = _ref => {
   let {
     highlightedPickedOptions,
-    selected
+    selected,
+    filterActivePicked = false
   } = _ref;
-  return (
-    // only one item can be moved with the buttons
-    highlightedPickedOptions.length !== 1 ||
-    // can't move an item down if it's the last one
-    selected.indexOf(highlightedPickedOptions[0]) === selected.length - 1
-  );
+  if (filterActivePicked) {
+    return true;
+  }
+  const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
+    selected,
+    highlightedPickedOptions
+  });
+  if (indices.length === 0) {
+    return true;
+  }
+  const lastIndex = selected.length - 1;
+
+  // Flush to the bottom: indices are [len-n, ..., len-1]
+  return indices.every((index, i) => index === lastIndex - (indices.length - 1 - i));
 };
 exports.isReorderDownDisabled = isReorderDownDisabled;

package/build/cjs/transfer/is-reorder-up-disabled.js

@@ -4,22 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isReorderUpDisabled = void 0;
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
 /**
  * @param {Object} args
- * @param {string} args.highlightedPickedOptions
+ * @param {string[]} args.highlightedPickedOptions
  * @param {string[]} args.selected
+ * @param {boolean} [args.filterActivePicked] reorder is disabled while a filter is applied to the picked side
  * @returns {bool}
  */
 const isReorderUpDisabled = _ref => {
   let {
     highlightedPickedOptions,
-    selected
+    selected,
+    filterActivePicked = false
   } = _ref;
-  return (
-    // only one item can be moved with the buttons
-    highlightedPickedOptions.length !== 1 ||
-    // can't move an item up if it's the first one
-    selected.indexOf(highlightedPickedOptions[0]) === 0
-  );
+  if (filterActivePicked) {
+    return true;
+  }
+  const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
+    selected,
+    highlightedPickedOptions
+  });
+  if (indices.length === 0) {
+    return true;
+  }
+
+  // Flush to the top: indices are [0, 1, ..., n-1]
+  return indices.every((index, i) => index === i);
 };
 exports.isReorderUpDisabled = isReorderUpDisabled;

package/build/cjs/transfer/move-highlighted-picked-option-down.js

@@ -4,7 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.moveHighlightedPickedOptionDown = void 0;
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
 /**
+ * Moves the highlighted picked options down by one slot as a group.
+ * If the selection is non-contiguous, the group collapses into a contiguous
+ * block (preserving relative order) with its bottom edge landing at
+ * `min(selected.length - 1, bottommostHighlightedIndex + 1)`.
+ *
  * @param {Object} args
  * @param {string[]} args.selected
  * @param {string[]} args.highlightedPickedOptions
@@ -17,15 +23,26 @@ const moveHighlightedPickedOptionDown = _ref => {
     highlightedPickedOptions,
     onChange
   } = _ref;
-  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]);
-
-  // Can't move down last or non-existing option
-  if (optionIndex === -1 || optionIndex > selected.length - 2) {
+  const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
+    selected,
+    highlightedPickedOptions
+  });
+  if (indices.length === 0) {
     return;
   }
+  const lastIndex = selected.length - 1;
 
-  // swap with next item
-  const reordered = [...selected.slice(0, optionIndex), selected[optionIndex + 1], selected[optionIndex], ...selected.slice(optionIndex + 2)];
+  // Already flush to the bottom — nothing to do
+  if (indices.every((index, i) => index === lastIndex - (indices.length - 1 - i))) {
+    return;
+  }
+  const indexSet = new Set(indices);
+  const highlightedBlock = indices.map(index => selected[index]);
+  const remaining = selected.filter((_, index) => !indexSet.has(index));
+  const bottommost = indices.at(-1);
+  const targetBottom = Math.min(lastIndex, bottommost + 1);
+  const insertPos = targetBottom - (indices.length - 1);
+  const reordered = [...remaining.slice(0, insertPos), ...highlightedBlock, ...remaining.slice(insertPos)];
   onChange({
     selected: reordered
   });

package/build/cjs/transfer/move-highlighted-picked-option-to-bottom.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveHighlightedPickedOptionToBottom = void 0;
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
+/**
+ * Moves the highlighted picked options to the very bottom of the list as a
+ * single contiguous block, preserving their relative order. Non-contiguous
+ * selections are collapsed.
+ *
+ * @param {Object} args
+ * @param {string[]} args.selected
+ * @param {string[]} args.highlightedPickedOptions
+ * @param {Function} args.onChange
+ * @returns {void}
+ */
+const moveHighlightedPickedOptionToBottom = _ref => {
+  let {
+    selected,
+    highlightedPickedOptions,
+    onChange
+  } = _ref;
+  const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
+    selected,
+    highlightedPickedOptions
+  });
+  if (indices.length === 0) {
+    return;
+  }
+  const lastIndex = selected.length - 1;
+
+  // Already a contiguous block flush to the bottom — nothing to do
+  if (indices.every((index, i) => index === lastIndex - (indices.length - 1 - i))) {
+    return;
+  }
+  const indexSet = new Set(indices);
+  const highlightedBlock = indices.map(index => selected[index]);
+  const remaining = selected.filter((_, index) => !indexSet.has(index));
+  onChange({
+    selected: [...remaining, ...highlightedBlock]
+  });
+};
+exports.moveHighlightedPickedOptionToBottom = moveHighlightedPickedOptionToBottom;

package/build/cjs/transfer/move-highlighted-picked-option-to-top.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveHighlightedPickedOptionToTop = void 0;
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
+/**
+ * Moves the highlighted picked options to the very top of the list as a
+ * single contiguous block, preserving their relative order. Non-contiguous
+ * selections are collapsed.
+ *
+ * @param {Object} args
+ * @param {string[]} args.selected
+ * @param {string[]} args.highlightedPickedOptions
+ * @param {Function} args.onChange
+ * @returns {void}
+ */
+const moveHighlightedPickedOptionToTop = _ref => {
+  let {
+    selected,
+    highlightedPickedOptions,
+    onChange
+  } = _ref;
+  const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
+    selected,
+    highlightedPickedOptions
+  });
+  if (indices.length === 0) {
+    return;
+  }
+
+  // Already a contiguous block flush to the top — nothing to do
+  if (indices.every((index, i) => index === i)) {
+    return;
+  }
+  const indexSet = new Set(indices);
+  const highlightedBlock = indices.map(index => selected[index]);
+  const remaining = selected.filter((_, index) => !indexSet.has(index));
+  onChange({
+    selected: [...highlightedBlock, ...remaining]
+  });
+};
+exports.moveHighlightedPickedOptionToTop = moveHighlightedPickedOptionToTop;

package/build/cjs/transfer/move-highlighted-picked-option-up.js

@@ -4,7 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.moveHighlightedPickedOptionUp = void 0;
+var _getHighlightedPickedIndices = require("./get-highlighted-picked-indices.js");
 /**
+ * Moves the highlighted picked options up by one slot as a group.
+ * If the selection is non-contiguous, the group collapses into a contiguous
+ * block (preserving relative order) with its top edge landing at
+ * `max(0, topmostHighlightedIndex - 1)`.
+ *
  * @param {Object} args
  * @param {string[]} args.selected
  * @param {string[]} args.highlightedPickedOptions
@@ -17,15 +23,24 @@ const moveHighlightedPickedOptionUp = _ref => {
     highlightedPickedOptions,
     onChange
   } = _ref;
-  const optionIndex = selected.findIndex(selectedOption => selectedOption === highlightedPickedOptions[0]);
-
-  // Can't move up option at index 0 or non-existing option
-  if (optionIndex < 1) {
+  const indices = (0, _getHighlightedPickedIndices.getHighlightedPickedIndices)({
+    selected,
+    highlightedPickedOptions
+  });
+  if (indices.length === 0) {
     return;
   }
 
-  // swap with previous item
-  const reordered = [...selected.slice(0, optionIndex - 1), selected[optionIndex], selected[optionIndex - 1], ...selected.slice(optionIndex + 1)];
+  // Already flush to the top — nothing to do
+  if (indices.every((index, i) => index === i)) {
+    return;
+  }
+  const indexSet = new Set(indices);
+  const highlightedBlock = indices.map(index => selected[index]);
+  const remaining = selected.filter((_, index) => !indexSet.has(index));
+  const topmost = indices[0];
+  const insertPos = Math.max(0, topmost - 1);
+  const reordered = [...remaining.slice(0, insertPos), ...highlightedBlock, ...remaining.slice(insertPos)];
   onChange({
     selected: reordered
   });

package/build/cjs/transfer.js

@@ -130,6 +130,7 @@ const Transfer = _ref => {
     externalSearchTerm: searchTermPicked,
     filterCallback: filterCallbackPicked
   });
+  const filterActivePicked = Boolean(actualFilterPicked);
 
   /*
    * Actual picked options:
@@ -174,6 +175,26 @@ const Transfer = _ref => {
     maxSelections
   });
 
+  /*
+   * Reorder scroll-into-view:
+   * After a reorder move, scroll the moved block so the leading edge
+   * (top on Up, bottom on Down) is visible inside the picked-side
+   * scroll container. `block: 'nearest'` means no scroll when the
+   * element is already fully in view.
+   */
+  const reorderScrollTargetRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const target = reorderScrollTargetRef.current;
+    if (target == null) {
+      return;
+    }
+    reorderScrollTargetRef.current = null;
+    const element = document.querySelector(`[data-test="${dataTest}-pickedoptions"] [data-value="${CSS.escape(target)}"]`);
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [selected, dataTest]);
+
   /**
    * Disabled button states
    */
@@ -310,25 +331,56 @@ const Transfer = _ref => {
     dataTest: `${dataTest}-rightfooter`
   }, enableOrderChange && /*#__PURE__*/_react.default.createElement(_reorderingActions.ReorderingActions, {
     dataTest: `${dataTest}-reorderingactions`,
+    filterActive: filterActivePicked,
     disabledDown: (0, _index.isReorderDownDisabled)({
       highlightedPickedOptions,
-      selected
+      selected,
+      filterActivePicked
     }),
     disabledUp: (0, _index.isReorderUpDisabled)({
       highlightedPickedOptions,
-      selected
-    }),
-    onChangeUp: () => (0, _index.moveHighlightedPickedOptionUp)({
       selected,
-      highlightedPickedOptions,
-      onChange
+      filterActivePicked
     }),
+    onChangeUp: () => {
+      var _selected$find;
+      const highlightedSet = new Set(highlightedPickedOptions);
+      reorderScrollTargetRef.current = (_selected$find = selected.find(value => highlightedSet.has(value))) !== null && _selected$find !== void 0 ? _selected$find : null;
+      (0, _index.moveHighlightedPickedOptionUp)({
+        selected,
+        highlightedPickedOptions,
+        onChange
+      });
+    },
     onChangeDown: () => {
+      var _selected$findLast;
+      const highlightedSet = new Set(highlightedPickedOptions);
+      reorderScrollTargetRef.current = (_selected$findLast = selected.findLast(value => highlightedSet.has(value))) !== null && _selected$findLast !== void 0 ? _selected$findLast : null;
       (0, _index.moveHighlightedPickedOptionDown)({
         selected,
         highlightedPickedOptions,
         onChange
       });
+    },
+    onChangeToTop: () => {
+      var _selected$find2;
+      const highlightedSet = new Set(highlightedPickedOptions);
+      reorderScrollTargetRef.current = (_selected$find2 = selected.find(value => highlightedSet.has(value))) !== null && _selected$find2 !== void 0 ? _selected$find2 : null;
+      (0, _index.moveHighlightedPickedOptionToTop)({
+        selected,
+        highlightedPickedOptions,
+        onChange
+      });
+    },
+    onChangeToBottom: () => {
+      var _selected$findLast2;
+      const highlightedSet = new Set(highlightedPickedOptions);
+      reorderScrollTargetRef.current = (_selected$findLast2 = selected.findLast(value => highlightedSet.has(value))) !== null && _selected$findLast2 !== void 0 ? _selected$findLast2 : null;
+      (0, _index.moveHighlightedPickedOptionToBottom)({
+        selected,
+        highlightedPickedOptions,
+        onChange
+      });
     }
   }), rightFooter)));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SourceEmptyPlaceholder = exports.SingleSelection = exports.Reordering = exports.RTL = exports.PickedEmptyComponent = exports.OptionsFooter = exports.Multiple = exports.LoadingSource = exports.LoadingPicked = exports.InfiniteLoading = exports.IndividualCustomOption = exports.IncreasedOptionsHeight = exports.Header = exports.FilteredPlaceholder = exports.FilteredPicked = exports.Filtered = exports.DifferentWidths = exports.CustomListOptions = exports.CustomFilteringWithoutFilterInput = exports.CustomFilteringWithFilterInput = exports.CustomButtonText = void 0;
+exports.default = exports.SourceEmptyPlaceholder = exports.SingleSelection = exports.ReorderingWithRightFooterContent = exports.ReorderingWithPickedFilter = exports.ReorderingWithCustomOptions = exports.Reordering = exports.RTL = exports.PickedEmptyComponent = exports.OptionsFooter = exports.Multiple = exports.LoadingSource = exports.LoadingPicked = exports.InfiniteLoading = exports.IndividualCustomOption = exports.IncreasedOptionsHeight = exports.Header = exports.FilteredPlaceholder = exports.FilteredPicked = exports.Filtered = exports.DifferentWidths = exports.CustomListOptions = exports.CustomFilteringWithoutFilterInput = exports.CustomFilteringWithFilterInput = exports.CustomButtonText = void 0;
 var _select = require("@dhis2-ui/select");
 var _tab = require("@dhis2-ui/tab");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -312,14 +312,84 @@ PickedEmptyComponent.args = {
 const Reordering = exports.Reordering = StatefulTemplate.bind({});
 Reordering.args = {
   enableOrderChange: true,
-  options: options.slice(0, 4),
-  initiallySelected: options.slice(0, 4).map(_ref6 => {
+  options: options.slice(0, 20),
+  initiallySelected: options.slice(0, 8).map(_ref6 => {
     let {
       value
     } = _ref6;
     return value;
   })
 };
+const ReorderingWithPickedFilter = exports.ReorderingWithPickedFilter = StatefulTemplate.bind({});
+ReorderingWithPickedFilter.storyName = 'Reordering with picked filter';
+ReorderingWithPickedFilter.args = {
+  enableOrderChange: true,
+  filterablePicked: true,
+  filterPlaceholderPicked: 'Search picked options',
+  options: options.slice(0, 20),
+  initiallySelected: options.slice(0, 8).map(_ref7 => {
+    let {
+      value
+    } = _ref7;
+    return value;
+  })
+};
+const ReorderingWithRightFooterTemplate = _ref8 => {
+  let {
+    initiallySelected = [],
+    ...args
+  } = _ref8;
+  const [selected, setSelected] = (0, _react.useState)(initiallySelected);
+  const onChange = payload => setSelected(payload.selected);
+  return /*#__PURE__*/_react.default.createElement(_transfer.Transfer, _extends({}, args, {
+    selected: selected,
+    onChange: onChange,
+    rightFooter: /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: '0 8px'
+      }
+    }, "Right footer content")
+  }));
+};
+ReorderingWithRightFooterTemplate.propTypes = {
+  initiallySelected: _propTypes.default.array
+};
+const ReorderingWithRightFooterContent = exports.ReorderingWithRightFooterContent = ReorderingWithRightFooterTemplate.bind({});
+ReorderingWithRightFooterContent.storyName = 'Reordering with right footer content';
+ReorderingWithRightFooterContent.args = {
+  enableOrderChange: true,
+  options: options.slice(0, 20),
+  initiallySelected: options.slice(0, 8).map(_ref9 => {
+    let {
+      value
+    } = _ref9;
+    return value;
+  })
+};
+const ReorderingWithCustomOptions = exports.ReorderingWithCustomOptions = StatefulTemplateCustomRenderOption.bind({});
+ReorderingWithCustomOptions.storyName = 'Reordering with custom options';
+ReorderingWithCustomOptions.args = {
+  enableOrderChange: true,
+  options: options.slice(0, 20),
+  initiallySelected: options.slice(0, 8).map(_ref10 => {
+    let {
+      value
+    } = _ref10;
+    return value;
+  }),
+  renderOption: option => {
+    if (option.value === options[0].value) {
+      return renderOption(option);
+    }
+    if (option.value === options[2].value) {
+      return renderOption(option);
+    }
+    if (option.value === options[5].value) {
+      return renderOption(option);
+    }
+    return /*#__PURE__*/_react.default.createElement(_transferOption.TransferOption, option);
+  }
+};
 const IncreasedOptionsHeight = exports.IncreasedOptionsHeight = StatefulTemplate.bind({});
 IncreasedOptionsHeight.args = {
   maxSelections: Infinity,
@@ -343,13 +413,13 @@ const createCustomFilteringInHeader = hideFilterInput => {
     year: index < 5 ? '2020' : '2019'
   }));
   const allOptions = [...relativePeriods, ...fixedPeriods];
-  const Header = _ref7 => {
+  const Header = _ref11 => {
     let {
       onClick,
       relativePeriod,
       selectedYear,
       onSelectedYearChange
-    } = _ref7;
+    } = _ref11;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tab.TabBar, null, /*#__PURE__*/_react.default.createElement(_tab.Tab, {
       selected: relativePeriod,
       onClick: () => onClick({
@@ -389,26 +459,26 @@ const createCustomFilteringInHeader = hideFilterInput => {
       if (filter === '') {
         return optionsWithPeriod;
       }
-      return optionsWithPeriod.filter(_ref8 => {
+      return optionsWithPeriod.filter(_ref12 => {
         let {
           label
-        } = _ref8;
+        } = _ref12;
         return label.indexOf(filter) !== -1;
       });
     };
     const header = /*#__PURE__*/_react.default.createElement(Header, {
       relativePeriod: relativePeriod,
       selectedYear: year,
-      onSelectedYearChange: _ref9 => {
+      onSelectedYearChange: _ref13 => {
         let {
           selected
-        } = _ref9;
+        } = _ref13;
         return setYear(selected);
       },
-      onClick: _ref10 => {
+      onClick: _ref14 => {
         let {
           relativePeriod: newRelativePeriod
-        } = _ref10;
+        } = _ref14;
         return setRelativePeriod(newRelativePeriod);
       }
     });
@@ -420,10 +490,10 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterCallback: filterCallback,
       leftHeader: header,
       rightHeader: /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("b", null, "Selected Periods")),
-      onFilterChange: _ref11 => {
+      onFilterChange: _ref15 => {
         let {
           value
-        } = _ref11;
+        } = _ref15;
         return setFilter(value);
       },
       height: "400px",
@@ -431,11 +501,11 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterPlaceholder: "Search"
     }));
   };
-  return _ref12 => {
+  return _ref16 => {
     let {
       initiallySelected,
       ...args
-    } = _ref12;
+    } = _ref16;
     const [selected, setSelected] = (0, _react.useState)(initiallySelected);
     const onChange = payload => setSelected(payload.selected);
     return /*#__PURE__*/_react.default.createElement(CustomTransfer, _extends({}, args, {
@@ -469,10 +539,10 @@ const InfiniteLoading = args => {
   // selected options
   const [selected] = (0, _react.useState)(
   // Last 4 options preselected
-  preSelectedOptions.map(_ref13 => {
+  preSelectedOptions.map(_ref17 => {
     let {
       value
-    } = _ref13;
+    } = _ref17;
     return value;
   }));
   const selectedOptionsLookup = (0, _react.useMemo)(() => preSelectedOptions.reduce((lookup, option) => {
@@ -514,10 +584,10 @@ const LoadingPicked = exports.LoadingPicked = StatefulTemplate.bind({});
 LoadingPicked.args = {
   loadingPicked: true,
   options: options.slice(0, 3),
-  initiallySelected: options.slice(0, 2).map(_ref14 => {
+  initiallySelected: options.slice(0, 2).map(_ref18 => {
     let {
       value
-    } = _ref14;
+    } = _ref18;
     return value;
   })
 };

package/build/es/__e2e__/reorder-with-buttons.e2e.stories.js

@@ -5,7 +5,7 @@ import { statefulDecorator } from './common/stateful-decorator.js';
 export default {
   title: 'Transfer Reorder Buttons'
 };
-export const HasSomeSelected = (_, _ref) => {
+const renderReorderTransfer = (_, _ref) => {
   let {
     selected,
     onChange
@@ -17,13 +17,25 @@ export const HasSomeSelected = (_, _ref) => {
     options: options
   });
 };
+export const HasSomeSelected = renderReorderTransfer.bind({});
 HasSomeSelected.story = {
   decorators: [statefulDecorator({
-    initialState: options.slice(0, 3).map(_ref2 => {
+    initialState: options.slice(0, 8).map(_ref2 => {
       let {
         value
       } = _ref2;
       return value;
     })
   })]
+};
+export const HasThreeSelected = renderReorderTransfer.bind({});
+HasThreeSelected.story = {
+  decorators: [statefulDecorator({
+    initialState: options.slice(0, 3).map(_ref3 => {
+      let {
+        value
+      } = _ref3;
+      return value;
+    })
+  })]
 };