Make userSelections return label, value, and index

Resolves #230.

Author: jakezatecky

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## 6.0.0 (TBA)
 
-_This new version includes minor breaking changes. Please review them before upgrading._
+_This new version includes a variety of breaking changes. Please review them before upgrading._
 
 ### Added
 
@@ -11,6 +11,7 @@ _This new version includes minor breaking changes. Please review them before upg
 
 ### Changed
 
+* **Breaking:** `onChange` property: the second argument now returns objects with `label`, `index`, and `value`, instead of just values (#230)
 * **Breaking:** `icons` property:
   * Will now merge any missing keys with the default icons
   * Rename `moveLeft`, `moveAllLeft`, `moveRight`, and `moveAllRight` to `moveToAvailable`, `moveAllToAvailable`, `moveToSelected`, and `moveAllToSelected`
@@ -20,7 +21,7 @@ _This new version includes minor breaking changes. Please review them before upg
   * Will now merge any missing keys with the default language
   * Rename `moveLeft`, `moveAllLeft`, `moveRight`, and `moveAllRight` to `moveToAvailable`, `moveAllToAvailable`, `moveToSelected`, and `moveAllToSelected`
   * Split `filterPlaceholder` into `availableFilterPlaceholder` and `selectedFilterPlaceholder`
-* **Breaking:** `options` property: no longer has PropTypes validation for `label` and `value`
+* **Breaking:** `options` property: no longer has PropTypes validation for `label` and `value` (#208)
 * **Breaking:** Rename `*-right` and `*-left` classes to `*-to-selected` and `*-to-available`
 * Improve accessibility of required error
 * Change filter input to `type="search"` (#247)

src/js/components/DualListBox.jsx

@@ -145,11 +145,14 @@ function DualListBox(props) {
         }
 
         return Array.from(element.options)
-            .filter(({ selected: isSelected }) => isSelected)
-            .map(({ dataset: { order, value } }) => ({
-                index: parseInt(order, 10),
-                value: JSON.parse(value),
-            }));
+            .map(({ dataset, label, selected: isSelected }, index) => ({
+                index,
+                isSelected,
+                label,
+                order: parseInt(dataset.order, 10),
+                value: JSON.parse(dataset.value),
+            }))
+            .filter(({ isSelected }) => isSelected);
     }
 
     /**
@@ -331,20 +334,20 @@ function DualListBox(props) {
             // If all of the marked options are already as high as they can get, ignore the
             // re-arrangement request because they will end of swapping their order amongst
             // themselves.
-            if (markedOptions[markedOptions.length - 1].index > markedOptions.length - 1) {
-                markedOptions.forEach(({ index }) => {
-                    if (index > 0) {
-                        newOrder = swapOptions(index, index - 1)(newOrder);
+            if (markedOptions[markedOptions.length - 1].order > markedOptions.length - 1) {
+                markedOptions.forEach(({ order }) => {
+                    if (order > 0) {
+                        newOrder = swapOptions(order, order - 1)(newOrder);
                     }
                 });
             }
         } else if (direction === 'down') {
             // Similar to the above, if all of the marked options are already as low as they can
             // get, ignore the re-arrangement request.
-            if (markedOptions[0].index < selected.length - markedOptions.length) {
-                markedOptions.reverse().forEach(({ index }) => {
-                    if (index < selected.length - 1) {
-                        newOrder = swapOptions(index, index + 1)(newOrder);
+            if (markedOptions[0].order < selected.length - markedOptions.length) {
+                markedOptions.reverse().forEach(({ order }) => {
+                    if (order < selected.length - 1) {
+                        newOrder = swapOptions(order, order + 1)(newOrder);
                     }
                 });
             }
@@ -365,13 +368,13 @@ function DualListBox(props) {
         let unmarked = [...selected];
 
         // Filter out marked options
-        markedOptions.forEach(({ index }) => {
-            unmarked[index] = null;
+        markedOptions.forEach(({ order }) => {
+            unmarked[order] = null;
         });
         unmarked = unmarked.filter((v) => v !== null);
 
         // Condense marked options raw values
-        const marked = markedOptions.map(({ index }) => selected[index]);
+        const marked = markedOptions.map(({ order }) => selected[order]);
 
         if (direction === 'top') {
             return [...marked, ...unmarked];
@@ -478,15 +481,15 @@ function DualListBox(props) {
         const toggleItemsMap = { ...selectedItems };
 
         // Add/remove the individual items based on previous state
-        toggleItems.forEach(({ value, index }) => {
+        toggleItems.forEach(({ value, order }) => {
             const inSelectedOptions = selectedItems.indexOf(value) > -1;
 
             if (inSelectedOptions && (!allowDuplicates || controlKey === 'selected')) {
                 // Toggled items that were previously selected are removed unless `allowDuplicates`
                 // is set to true or the option was sourced from the selected ListBox. We use an
                 // object mapping such that we can remove the exact index of the selected items
                 // without the array re-arranging itself.
-                delete toggleItemsMap[index];
+                delete toggleItemsMap[order];
             } else {
                 selectedItems.push(value);
             }
@@ -510,7 +513,7 @@ function DualListBox(props) {
      */
     function onChange(newSelected, selection, controlKey, isRearrange = false) {
         const { onChange: onChangeProp } = props;
-        const userSelection = selection.map(({ value }) => value);
+        const userSelection = selection.map(({ index, label, value }) => ({ index, label, value }));
 
         onChangeProp(newSelected, userSelection, controlKey);
 

src/js/components/ObjectValueWrapper.jsx

@@ -43,8 +43,8 @@ function ObjectValueWrapper(props) {
     const simpleSelected = flattenOptions(selected, getOptionValue);
 
     const simpleOnChange = useCallback((newSelected, userSelection, controlKey) => {
-        const sourceValues = { selected: newSelected, userSelection };
-        const complexValues = { selected: [], userSelection: [] };
+        const sourceValues = { selected: newSelected };
+        const complexValues = { selected: [] };
 
         // Reconstruct option objects for both the selected values and user selection
         Object.keys(sourceValues).forEach((key) => {
@@ -78,7 +78,7 @@ function ObjectValueWrapper(props) {
             });
         });
 
-        onChange(complexValues.selected, complexValues.userSelection, controlKey);
+        onChange(complexValues.selected, userSelection, controlKey);
     }, [getOptionValue, options]);
 
     /* eslint-disable react/jsx-props-no-spreading */

test/DualListBox.jsx

@@ -1376,7 +1376,10 @@ describe('<DualListBox />', async () => {
             await user.click(screen.getByLabelText('Move to available'));
 
             assert.deepEqual(actualSelected, []);
-            assert.deepEqual(actualSelection, ['luna', 'phobos']);
+            assert.deepEqual(actualSelection, [
+                { index: 0, label: 'Moon', value: 'luna' },
+                { index: 1, label: 'Phobos', value: 'phobos' },
+            ]);
         });
 
         it('should identify the control responsible for the changes', async () => {

test/ObjectValueWrapper.jsx

@@ -136,7 +136,7 @@ describe('ObjectValueWrapper', () => {
             await user.click(screen.getByLabelText('Move to selected'));
 
             assert.deepEqual(actualSelection, [
-                { label: 'Phobos', value: 'phobos' },
+                { index: 1, label: 'Phobos', value: 'phobos' },
             ]);
         });
     });