@dhis2-ui/transfer 10.13.0 → 10.14.0

package/build/es/features/reorder-with-buttons/index.js

@@ -3,7 +3,7 @@ Given('reordering of items is enabled', () => {
   // no op
 });
 Given('the selected list has three items', () => {
-  cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
+  cy.visitStory('Transfer Reorder Buttons', 'Has Three Selected');
 });
 Given('the selected list has some items', () => {
   cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
@@ -34,11 +34,79 @@ When("the user clicks the 'move down' button", () => {
     force: true
   });
 });
+When("the user clicks the 'move to top' button", () => {
+  // force, so we click disabled buttons
+  cy.get('{transfer-reorderingactions-buttonmovetotop}').click({
+    force: true
+  });
+});
+When("the user clicks the 'move to bottom' button", () => {
+  // force, so we click disabled buttons
+  cy.get('{transfer-reorderingactions-buttonmovetobottom}').click({
+    force: true
+  });
+});
 Then('the highlighted item should be moved to the {int}. place', next => {
   const index = next - 1;
   cy.get('@previousValue').then(previousValue => cy.get(`[data-value="${previousValue}"]`)).invoke('index').should('equal', index);
 });
-Then("the 'move up' and 'move down' buttons should be disabled", () => {
+Then('all four reorder buttons should be disabled', () => {
+  cy.get('{transfer-reorderingactions-buttonmovetotop}').should('have.attr', 'disabled');
   cy.get('{transfer-reorderingactions-buttonmoveup}').should('have.attr', 'disabled');
   cy.get('{transfer-reorderingactions-buttonmovedown}').should('have.attr', 'disabled');
+  cy.get('{transfer-reorderingactions-buttonmovetobottom}').should('have.attr', 'disabled');
+});
+
+// --- Multi-select ---
+
+Given('the selected list has eight items', () => {
+  cy.visitStory('Transfer Reorder Buttons', 'Has Some Selected');
+  cy.get('{transfer-pickedoptions} {transferoption}').should('have.length', 8);
+});
+const highlightPositionWithCtrl = position => cy.get('{transfer-pickedoptions} {transferoption}').eq(position - 1).then($option => cy.get('@highlightedValues').then(values => {
+  values.push($option.attr('data-value'));
+  return $option;
+})).clickWith('ctrl');
+When('the user highlights the items at positions {int} and {int}', (first, second) => {
+  cy.wrap([]).as('highlightedValues');
+  highlightPositionWithCtrl(first);
+  highlightPositionWithCtrl(second);
+});
+When('the user highlights every item in the selected list', () => {
+  cy.wrap([]).as('highlightedValues');
+  cy.get('{transfer-pickedoptions} {transferoption}').each($option => {
+    cy.get('@highlightedValues').then(values => {
+      values.push($option.attr('data-value'));
+    });
+    cy.wrap($option).clickWith('ctrl');
+  });
+});
+Then('those items should be at positions {int} and {int}', (first, second) => {
+  cy.get('@highlightedValues').then(values => {
+    const targetIndices = [first - 1, second - 1];
+    values.forEach((value, i) => {
+      cy.get(`[data-value="${value}"]`).invoke('index').should('equal', targetIndices[i]);
+    });
+  });
+});
+Then('those items should still be highlighted', () => {
+  cy.get('@highlightedValues').then(values => {
+    values.forEach(value => {
+      cy.get(`{transfer-pickedoptions} [data-value="${value}"]`).should('have.class', 'highlighted');
+    });
+  });
+});
+const reorderButtonSelectors = {
+  'move up': '{transfer-reorderingactions-buttonmoveup}',
+  'move down': '{transfer-reorderingactions-buttonmovedown}',
+  'move to top': '{transfer-reorderingactions-buttonmovetotop}',
+  'move to bottom': '{transfer-reorderingactions-buttonmovetobottom}'
+};
+Then('the {string} and {string} buttons should be disabled', (first, second) => {
+  cy.get(reorderButtonSelectors[first]).should('have.attr', 'disabled');
+  cy.get(reorderButtonSelectors[second]).should('have.attr', 'disabled');
+});
+Then('the {string} and {string} buttons should not be disabled', (first, second) => {
+  cy.get(reorderButtonSelectors[first]).should('not.have.attr', 'disabled');
+  cy.get(reorderButtonSelectors[second]).should('not.have.attr', 'disabled');
 });

package/build/es/features/reorder-with-buttons.feature

@@ -35,12 +35,104 @@ Feature: Reorder items in the selected list using buttons
             | 2        | 3    |
             | 3        | 3    |
 
+    Scenario Outline: The user clicks the 'move to top' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move to top' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 1    |
+            | 2        | 1    |
+            | 3        | 1    |
+
+    Scenario Outline: The user clicks the 'move to bottom' button with a highlighted item in the selected list
+        Given the selected list has three items
+        And the <previous>. item is highlighted
+        When the user clicks the 'move to bottom' button
+        Then the highlighted item should be moved to the <next>. place
+
+        Examples:
+            | previous | next |
+            | 1        | 3    |
+            | 2        | 3    |
+            | 3        | 3    |
+
     Scenario: Disable reorder buttons when no items are highlighted
         Given the selected list has some items
         And no items are highlighted in the list
-        Then the 'move up' and 'move down' buttons should be disabled
+        Then all four reorder buttons should be disabled
 
-    Scenario: Disabled reorder buttons when multiple selected items are highlighted
-        Given the selected list has some items
-        And more than one item is highlighted in the list
-        Then the 'move up' and 'move down' buttons should be disabled
+    # --- Multi-select ---
+    #
+    # All four buttons act on the highlighted picked items as a group,
+    # preserving the group's relative order. Non-contiguous selections
+    # collapse into a contiguous block before landing at the target edge.
+
+    Scenario: 'move up' shifts a contiguous block of highlighted items up by one slot
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 4
+        And the user clicks the 'move up' button
+        Then those items should be at positions 2 and 3
+        And those items should still be highlighted
+
+    Scenario: 'move up' collapses and shifts a non-contiguous selection in one press
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move up' button
+        Then those items should be at positions 1 and 2
+
+    Scenario: 'move down' shifts a contiguous block of highlighted items down by one slot
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 3
+        And the user clicks the 'move down' button
+        Then those items should be at positions 3 and 4
+
+    Scenario: 'move down' collapses and shifts a non-contiguous selection in one press
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move down' button
+        Then those items should be at positions 4 and 5
+
+    Scenario: 'move to top' collapses a non-contiguous selection flush to the top
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 5
+        And the user clicks the 'move to top' button
+        Then those items should be at positions 1 and 2
+
+    Scenario: 'move to bottom' collapses a non-contiguous selection flush to the bottom
+        Given the selected list has eight items
+        When the user highlights the items at positions 2 and 4
+        And the user clicks the 'move to bottom' button
+        Then those items should be at positions 7 and 8
+
+    Scenario: The highlighted group stays highlighted after moving, allowing chained presses
+        Given the selected list has eight items
+        When the user highlights the items at positions 3 and 4
+        And the user clicks the 'move up' button
+        And the user clicks the 'move up' button
+        Then those items should be at positions 1 and 2
+        And those items should still be highlighted
+
+    Scenario: Both up-side buttons are disabled when the highlighted block is flush to the top
+        Given the selected list has eight items
+        When the user highlights the items at positions 1 and 2
+        Then the 'move up' and 'move to top' buttons should be disabled
+        And the 'move down' and 'move to bottom' buttons should not be disabled
+
+    Scenario: Both down-side buttons are disabled when the highlighted block is flush to the bottom
+        Given the selected list has eight items
+        When the user highlights the items at positions 7 and 8
+        Then the 'move down' and 'move to bottom' buttons should be disabled
+        And the 'move up' and 'move to top' buttons should not be disabled
+
+    Scenario: Up-side buttons remain enabled when a non-contiguous selection contains the top item
+        Given the selected list has eight items
+        When the user highlights the items at positions 1 and 3
+        Then the 'move up' and 'move to top' buttons should not be disabled
+
+    Scenario: All four reorder buttons are disabled when every picked item is highlighted
+        Given the selected list has eight items
+        When the user highlights every item in the selected list
+        Then all four reorder buttons should be disabled

package/build/es/icons.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import { theme } from '@dhis2/ui-constants';
+import { colors, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 const centerButtonStyles = ["svg.jsx-2392683210{min-width:20px;}", "div.centerButton.jsx-2392683210:dir(rtl){-webkit-transform:rotate(180deg) translateX(4px);-ms-transform:rotate(180deg) translateX(4px);transform:rotate(180deg) translateX(4px);}"];
@@ -17,7 +17,7 @@ export const IconAddAll = _ref => {
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest,
-    fill: disabled ? theme.disabled : '#404B5A',
+    fill: disabled ? theme.disabled : colors.grey800,
     className: `jsx-${centerButtonStyles.__hash}`
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
@@ -46,7 +46,7 @@ export const IconAddIndividual = _ref2 => {
   return /*#__PURE__*/React.createElement("div", {
     className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
-    fill: disabled ? theme.disabled : '#404B5A',
+    fill: disabled ? theme.disabled : colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -72,7 +72,7 @@ export const IconRemoveAll = _ref3 => {
   return /*#__PURE__*/React.createElement("div", {
     className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
-    fill: disabled ? theme.disabled : '#404B5A',
+    fill: disabled ? theme.disabled : colors.grey800,
     width: "16px",
     height: "16px",
     viewBox: "0 0 16 16",
@@ -108,7 +108,7 @@ export const IconRemoveIndividual = _ref4 => {
   return /*#__PURE__*/React.createElement("div", {
     className: `jsx-${centerButtonStyles.__hash}` + " " + "centerButton"
   }, /*#__PURE__*/React.createElement("svg", {
-    fill: disabled ? theme.disabled : '#404B5A',
+    fill: disabled ? theme.disabled : colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -133,15 +133,14 @@ export const IconMoveDown = _ref5 => {
     disabled
   } = _ref5;
   return /*#__PURE__*/React.createElement("svg", {
-    fill: disabled ? theme.disabled : '#404B5A',
+    fill: disabled ? colors.grey500 : colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest
-  }, /*#__PURE__*/React.createElement("polygon", {
-    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-    transform: "matrix(0 1 1 0 0 0)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.5303 8.53027L12.4697 7.46973L8.75 11.1895V2H7.25V11.1895L3.53027 7.46973L2.46973 8.53027L8 14.0605L13.5303 8.53027Z"
   }));
 };
 IconMoveDown.propTypes = {
@@ -154,18 +153,57 @@ export const IconMoveUp = _ref6 => {
     disabled
   } = _ref6;
   return /*#__PURE__*/React.createElement("svg", {
-    fill: disabled ? theme.disabled : '#404B5A',
+    fill: disabled ? colors.grey500 : colors.grey800,
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     "data-test": dataTest
-  }, /*#__PURE__*/React.createElement("polygon", {
-    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-    transform: "rotate(-90 8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.5303 7.46973L12.4697 8.53027L8.75 4.81055V14H7.25V4.81055L3.53027 8.53027L2.46973 7.46973L8 1.93945L13.5303 7.46973Z"
   }));
 };
 IconMoveUp.propTypes = {
   dataTest: PropTypes.string.isRequired,
   disabled: PropTypes.bool
+};
+export const IconMoveToTop = _ref7 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref7;
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: disabled ? colors.grey500 : colors.grey800,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.5303 10.4697L12.4697 11.5303L8.75 7.81055V14H7.25V7.81055L3.53027 11.5303L2.46973 10.4697L8 4.93945L13.5303 10.4697ZM13.5303 6.46973L12.4697 7.53027L8 3.06055L3.53027 7.53027L2.46973 6.46973L8 0.939453L13.5303 6.46973Z"
+  }));
+};
+IconMoveToTop.propTypes = {
+  dataTest: PropTypes.string.isRequired,
+  disabled: PropTypes.bool
+};
+export const IconMoveToBottom = _ref8 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref8;
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: disabled ? colors.grey500 : colors.grey800,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.5303 5.53027L12.4697 4.46973L8.75 8.18945V2H7.25V8.18945L3.53027 4.46973L2.46973 5.53027L8 11.0605L13.5303 5.53027ZM13.5303 9.53027L12.4697 8.46973L8 12.9395L3.53027 8.46973L2.46973 9.53027L8 15.0605L13.5303 9.53027Z"
+  }));
+};
+IconMoveToBottom.propTypes = {
+  dataTest: PropTypes.string.isRequired,
+  disabled: PropTypes.bool
 };

package/build/es/locales/en/translations.json

@@ -0,0 +1,7 @@
+{
+    "Reordering not allowed when filtering list": "Reordering not allowed when filtering list",
+    "Move selected items to top": "Move selected items to top",
+    "Move selected items up": "Move selected items up",
+    "Move selected items down": "Move selected items down",
+    "Move selected items to bottom": "Move selected items to bottom"
+}

package/build/es/locales/index.js

@@ -0,0 +1,13 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n';
+import enTranslations from './en/translations.json';
+const namespace = 'default';
+i18n.addResources('en', namespace, enTranslations);
+export default i18n;

package/build/es/reordering-actions.js

@@ -1,47 +1,113 @@
 import _JSXStyle from "styled-jsx/style";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { spacers } from '@dhis2/ui-constants';
 import { Button } from '@dhis2-ui/button';
+import { Tooltip } from '@dhis2-ui/tooltip';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { IconMoveDown, IconMoveUp } from './icons.js';
+import { IconMoveDown, IconMoveToBottom, IconMoveToTop, IconMoveUp } from './icons.js';
+import i18n from './locales/index.js';
+const filterActiveTooltip = i18n.t('Reordering not allowed when filtering list');
 export const ReorderingActions = _ref => {
   let {
     dataTest,
     disabledDown,
     disabledUp,
+    filterActive,
     onChangeUp,
-    onChangeDown
+    onChangeDown,
+    onChangeToTop,
+    onChangeToBottom
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["874845231", [spacers.dp8, spacers.dp8, spacers.dp8]]])
-  }, /*#__PURE__*/React.createElement(Button, {
-    small: true,
-    disabled: disabledDown,
-    onClick: () => !disabledDown && onChangeDown(event),
-    dataTest: `${dataTest}-buttonmovedown`,
-    icon: /*#__PURE__*/React.createElement(IconMoveDown, {
-      dataTest: `${dataTest}-iconmovedown`,
-      disabled: disabledDown
-    })
-  }), /*#__PURE__*/React.createElement(Button, {
-    small: true,
-    disabled: disabledUp,
-    onClick: () => !disabledUp && onChangeUp(event),
-    dataTest: `${dataTest}-buttonmoveup`,
-    icon: /*#__PURE__*/React.createElement(IconMoveUp, {
-      dataTest: `${dataTest}-iconmoveup`,
-      disabled: disabledUp
-    })
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "874845231",
-    dynamic: [spacers.dp8, spacers.dp8, spacers.dp8]
-  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;padding-top:${spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${spacers.dp8};}`, `div.__jsx-style-dynamic-selector>button:first-child{margin-inline-start:${spacers.dp8};}`]));
+  const moveToTopLabel = i18n.t('Move selected items to top');
+  const moveUpLabel = i18n.t('Move selected items up');
+  const moveDownLabel = i18n.t('Move selected items down');
+  const moveToBottomLabel = i18n.t('Move selected items to bottom');
+  const renderButtons = function () {
+    let tooltipHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-test": dataTest
+    }, tooltipHandlers, {
+      className: _JSXStyle.dynamic([["3663884558", [spacers.dp4, spacers.dp8, spacers.dp8]]]) + " " + (tooltipHandlers && tooltipHandlers.className != null && tooltipHandlers.className || "")
+    }), /*#__PURE__*/React.createElement(Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledUp,
+      onClick: () => !disabledUp && onChangeToTop(),
+      dataTest: `${dataTest}-buttonmovetotop`,
+      "aria-label": moveToTopLabel,
+      icon: /*#__PURE__*/React.createElement(IconMoveToTop, {
+        dataTest: `${dataTest}-iconmovetotop`,
+        disabled: disabledUp
+      })
+    }), /*#__PURE__*/React.createElement(Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledUp,
+      onClick: () => !disabledUp && onChangeUp(),
+      dataTest: `${dataTest}-buttonmoveup`,
+      "aria-label": moveUpLabel,
+      icon: /*#__PURE__*/React.createElement(IconMoveUp, {
+        dataTest: `${dataTest}-iconmoveup`,
+        disabled: disabledUp
+      })
+    }), /*#__PURE__*/React.createElement(Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledDown,
+      onClick: () => !disabledDown && onChangeDown(),
+      dataTest: `${dataTest}-buttonmovedown`,
+      "aria-label": moveDownLabel,
+      icon: /*#__PURE__*/React.createElement(IconMoveDown, {
+        dataTest: `${dataTest}-iconmovedown`,
+        disabled: disabledDown
+      })
+    }), /*#__PURE__*/React.createElement(Button, {
+      small: true,
+      secondary: true,
+      disabled: disabledDown,
+      onClick: () => !disabledDown && onChangeToBottom(),
+      dataTest: `${dataTest}-buttonmovetobottom`,
+      "aria-label": moveToBottomLabel,
+      icon: /*#__PURE__*/React.createElement(IconMoveToBottom, {
+        dataTest: `${dataTest}-iconmovetobottom`,
+        disabled: disabledDown
+      })
+    }), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "3663884558",
+      dynamic: [spacers.dp4, spacers.dp8, spacers.dp8]
+    }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-inline-start:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;gap:${spacers.dp4};padding-top:${spacers.dp8};}`, `div.__jsx-style-dynamic-selector:last-child{padding-bottom:${spacers.dp8};}`]));
+  };
+  if (filterActive) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      openDelay: 500,
+      content: filterActiveTooltip
+    }, _ref2 => {
+      let {
+        onMouseOver,
+        onMouseOut,
+        onFocus,
+        onBlur,
+        ref
+      } = _ref2;
+      return renderButtons({
+        ref,
+        onMouseOver,
+        onMouseOut,
+        onFocus,
+        onBlur
+      });
+    });
+  }
+  return renderButtons();
 };
 ReorderingActions.propTypes = {
   dataTest: PropTypes.string.isRequired,
   onChangeDown: PropTypes.func.isRequired,
+  onChangeToBottom: PropTypes.func.isRequired,
+  onChangeToTop: PropTypes.func.isRequired,
   onChangeUp: PropTypes.func.isRequired,
   disabledDown: PropTypes.bool,
-  disabledUp: PropTypes.bool
+  disabledUp: PropTypes.bool,
+  filterActive: PropTypes.bool
 };

package/build/es/transfer/default-filter-callback.js

@@ -3,9 +3,20 @@
  * @param {string} filter
  * @returns {Object[]}
  */
-export const defaultFilterCallback = (options, filter) => filter === '' ? options : options.filter(_ref => {
-  let {
-    label
-  } = _ref;
-  return label.match(new RegExp(filter, 'i'));
-});
+export const defaultFilterCallback = (options, filter) => {
+  if (filter === '') {
+    return options;
+  }
+  try {
+    const regex = new RegExp(filter, 'i');
+    return options.filter(_ref => {
+      let {
+        label
+      } = _ref;
+      return label.match(regex);
+    });
+  } catch {
+    console.warn('Invalid regex filter:', filter);
+    return options;
+  }
+};

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

@@ -0,0 +1,27 @@
+/**
+ * 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[]}
+ */
+export 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;
+};

package/build/es/transfer/index.js

@@ -2,10 +2,13 @@ export * from './add-all-selectable-source-options.js';
 export * from './add-individual-source-options.js';
 export * from './create-double-click-handlers.js';
 export * from './default-filter-callback.js';
+export * from './get-highlighted-picked-indices.js';
 export * from './get-option-click-handlers.js';
 export * from './is-reorder-down-disabled.js';
 export * from './is-reorder-up-disabled.js';
 export * from './move-highlighted-picked-option-down.js';
+export * from './move-highlighted-picked-option-to-bottom.js';
+export * from './move-highlighted-picked-option-to-top.js';
 export * from './move-highlighted-picked-option-up.js';
 export * from './remove-all-picked-options.js';
 export * from './remove-individual-picked-options.js';

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

@@ -1,18 +1,30 @@
+import { getHighlightedPickedIndices } from './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}
  */
 export 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 = 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));
 };

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

@@ -1,18 +1,29 @@
+import { getHighlightedPickedIndices } from './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}
  */
 export 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 = 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);
 };