@dhis2-ui/transfer 10.13.1 → 10.14.0

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

@@ -1,4 +1,11 @@
+import { getHighlightedPickedIndices } from './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
@@ -11,15 +18,26 @@ export 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 = 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/es/transfer/move-highlighted-picked-option-to-bottom.js

@@ -0,0 +1,39 @@
+import { getHighlightedPickedIndices } from './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}
+ */
+export const moveHighlightedPickedOptionToBottom = _ref => {
+  let {
+    selected,
+    highlightedPickedOptions,
+    onChange
+  } = _ref;
+  const indices = 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]
+  });
+};

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

@@ -0,0 +1,38 @@
+import { getHighlightedPickedIndices } from './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}
+ */
+export const moveHighlightedPickedOptionToTop = _ref => {
+  let {
+    selected,
+    highlightedPickedOptions,
+    onChange
+  } = _ref;
+  const indices = 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]
+  });
+};

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

@@ -1,4 +1,11 @@
+import { getHighlightedPickedIndices } from './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
@@ -11,15 +18,24 @@ export 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 = 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/es/transfer.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { Actions } from './actions.js';
 import { AddAll } from './add-all.js';
 import { AddIndividual } from './add-individual.js';
@@ -15,7 +15,7 @@ import { ReorderingActions } from './reordering-actions.js';
 import { RightFooter } from './right-footer.js';
 import { RightHeader } from './right-header.js';
 import { RightSide } from './right-side.js';
-import { addAllSelectableSourceOptions, addIndividualSourceOptions, createDoubleClickHandlers, defaultFilterCallback, getOptionClickHandlers, isReorderDownDisabled, isReorderUpDisabled, moveHighlightedPickedOptionDown, moveHighlightedPickedOptionUp, removeAllPickedOptions, removeIndividualPickedOptions, useFilter, useHighlightedOptions } from './transfer/index.js';
+import { addAllSelectableSourceOptions, addIndividualSourceOptions, createDoubleClickHandlers, defaultFilterCallback, getOptionClickHandlers, isReorderDownDisabled, isReorderUpDisabled, moveHighlightedPickedOptionDown, moveHighlightedPickedOptionToBottom, moveHighlightedPickedOptionToTop, moveHighlightedPickedOptionUp, removeAllPickedOptions, removeIndividualPickedOptions, useFilter, useHighlightedOptions } from './transfer/index.js';
 import { TransferOption } from './transfer-option.js';
 const identity = value => value;
 const defaultSelected = [];
@@ -121,6 +121,7 @@ export const Transfer = _ref => {
     externalSearchTerm: searchTermPicked,
     filterCallback: filterCallbackPicked
   });
+  const filterActivePicked = Boolean(actualFilterPicked);
 
   /*
    * Actual picked options:
@@ -165,6 +166,26 @@ export 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 = useRef(null);
+  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
    */
@@ -301,25 +322,56 @@ export const Transfer = _ref => {
     dataTest: `${dataTest}-rightfooter`
   }, enableOrderChange && /*#__PURE__*/React.createElement(ReorderingActions, {
     dataTest: `${dataTest}-reorderingactions`,
+    filterActive: filterActivePicked,
     disabledDown: isReorderDownDisabled({
       highlightedPickedOptions,
-      selected
+      selected,
+      filterActivePicked
     }),
     disabledUp: isReorderUpDisabled({
       highlightedPickedOptions,
-      selected
-    }),
-    onChangeUp: () => 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;
+      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;
       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;
+      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;
+      moveHighlightedPickedOptionToBottom({
+        selected,
+        highlightedPickedOptions,
+        onChange
+      });
     }
   }), rightFooter)));
 };

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

@@ -302,14 +302,84 @@ PickedEmptyComponent.args = {
 export const 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;
   })
 };
+export const 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] = useState(initiallySelected);
+  const onChange = payload => setSelected(payload.selected);
+  return /*#__PURE__*/React.createElement(Transfer, _extends({}, args, {
+    selected: selected,
+    onChange: onChange,
+    rightFooter: /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: '0 8px'
+      }
+    }, "Right footer content")
+  }));
+};
+ReorderingWithRightFooterTemplate.propTypes = {
+  initiallySelected: PropTypes.array
+};
+export const 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;
+  })
+};
+export const 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.createElement(TransferOption, option);
+  }
+};
 export const IncreasedOptionsHeight = StatefulTemplate.bind({});
 IncreasedOptionsHeight.args = {
   maxSelections: Infinity,
@@ -333,13 +403,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, null, /*#__PURE__*/React.createElement(Tab, {
       selected: relativePeriod,
       onClick: () => onClick({
@@ -379,26 +449,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.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);
       }
     });
@@ -410,10 +480,10 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterCallback: filterCallback,
       leftHeader: header,
       rightHeader: /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Selected Periods")),
-      onFilterChange: _ref11 => {
+      onFilterChange: _ref15 => {
         let {
           value
-        } = _ref11;
+        } = _ref15;
         return setFilter(value);
       },
       height: "400px",
@@ -421,11 +491,11 @@ const createCustomFilteringInHeader = hideFilterInput => {
       filterPlaceholder: "Search"
     }));
   };
-  return _ref12 => {
+  return _ref16 => {
     let {
       initiallySelected,
       ...args
-    } = _ref12;
+    } = _ref16;
     const [selected, setSelected] = useState(initiallySelected);
     const onChange = payload => setSelected(payload.selected);
     return /*#__PURE__*/React.createElement(CustomTransfer, _extends({}, args, {
@@ -459,10 +529,10 @@ export const InfiniteLoading = args => {
   // selected options
   const [selected] = useState(
   // Last 4 options preselected
-  preSelectedOptions.map(_ref13 => {
+  preSelectedOptions.map(_ref17 => {
     let {
       value
-    } = _ref13;
+    } = _ref17;
     return value;
   }));
   const selectedOptionsLookup = useMemo(() => preSelectedOptions.reduce((lookup, option) => {
@@ -503,10 +573,10 @@ export const 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "10.13.1",
+    "version": "10.14.0",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -27,18 +27,20 @@
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
+        "@dhis2/d2-i18n": "^1",
         "react": "^16.13 || ^18",
         "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.13.1",
-        "@dhis2-ui/field": "10.13.1",
-        "@dhis2-ui/input": "10.13.1",
-        "@dhis2-ui/intersection-detector": "10.13.1",
-        "@dhis2-ui/loader": "10.13.1",
-        "@dhis2/ui-constants": "10.13.1",
+        "@dhis2-ui/button": "10.14.0",
+        "@dhis2-ui/field": "10.14.0",
+        "@dhis2-ui/input": "10.14.0",
+        "@dhis2-ui/intersection-detector": "10.14.0",
+        "@dhis2-ui/loader": "10.14.0",
+        "@dhis2-ui/tooltip": "10.14.0",
+        "@dhis2/ui-constants": "10.14.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },