expensify-common 2.0.166 → 2.0.167

package/dist/components/form/element/combobox.js

@@ -193,22 +193,37 @@ class Combobox extends react_1.default.Component {
     }
     // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps) {
-        if (!nextProps.value || (0, isEqual_1.default)(nextProps.value, this.state.currentValue)) {
-            return;
+        if (nextProps.value && !(0, isEqual_1.default)(nextProps.value, this.state.currentValue)) {
+            this.setValue(nextProps.value);
         }
-        this.setValue(nextProps.value);
         if (nextProps.options !== undefined) {
             // If the options have an id property, we use that to compare them and determine if they changed, if not
             // we'll use the whole options array.
-            if ((0, has_1.default)(nextProps.options, '0.id')) {
-                if (nextProps.options.some((option, index) => !(0, isEqual_1.default)(option.id, this.props.options[index].id)) ||
-                    nextProps.alreadySelectedOptions.some((alreadySelectedOption, index) => !(0, isEqual_1.default)(alreadySelectedOption.id, this.props.alreadySelectedOptions[index].id))) {
+            const optionsChanged = (0, has_1.default)(nextProps.options, '0.id')
+                ? nextProps.options.some((option, index) => !(0, isEqual_1.default)(option.id, this.props.options[index] && this.props.options[index].id))
+                : !(0, isEqual_1.default)(nextProps.options, this.props.options);
+            // Check if alreadySelectedOptions changed - compare by id if available, otherwise by value or full comparison
+            const hasAlreadySelectedId = nextProps.alreadySelectedOptions && nextProps.alreadySelectedOptions.length > 0 && (0, has_1.default)(nextProps.alreadySelectedOptions[0], 'id');
+            const alreadySelectedChanged = hasAlreadySelectedId
+                ? nextProps.alreadySelectedOptions.length !== this.props.alreadySelectedOptions.length ||
+                    nextProps.alreadySelectedOptions.some((alreadySelectedOption, index) => {
+                        const prevOption = this.props.alreadySelectedOptions[index];
+                        return !prevOption || !(0, isEqual_1.default)(alreadySelectedOption.id, prevOption.id);
+                    })
+                : !(0, isEqual_1.default)(nextProps.alreadySelectedOptions, this.props.alreadySelectedOptions);
+            if (optionsChanged || alreadySelectedChanged) {
+                // If only alreadySelectedOptions changed and dropdown is open, just update options without resetting
+                if (!optionsChanged && alreadySelectedChanged && this.state.isDropdownOpen) {
+                    const { currentValue } = this.state;
+                    this.setState(() => ({
+                        options: this.getTruncatedOptions(currentValue, nextProps.alreadySelectedOptions),
+                    }));
+                }
+                else {
+                    // Options changed or dropdown is closed - do full reset
                     this.reset(false, nextProps.options, nextProps.alreadySelectedOptions);
                 }
             }
-            else if (!(0, isEqual_1.default)(nextProps.options, this.props.options) || !(0, isEqual_1.default)(nextProps.alreadySelectedOptions, this.props.alreadySelectedOptions)) {
-                this.reset(false, nextProps.options, nextProps.alreadySelectedOptions);
-            }
         }
         if (nextProps.openOnInit !== undefined && !(0, isEqual_1.default)(nextProps.openOnInit, this.props.openOnInit)) {
             this.setState({
@@ -431,7 +446,7 @@ class Combobox extends react_1.default.Component {
         const dividerIndex = this.options.findIndex(findDivider);
         // Split into two arrays everything before and after the divider (if the divider does not exist then we'll return a single array)
         const splitOptions = dividerIndex ? [this.options.slice(0, dividerIndex + 1), this.options.slice(dividerIndex + 1)] : [this.options];
-        const formatOption = (option) => (Object.assign({ focused: false, isSelected: option.selected && ((0, isEqual_1.default)(option.value, currentValue) || !!alreadySelected.find((item) => item.value === option.value)) }, option));
+        const formatOption = (option, index) => (Object.assign({ focused: false, isSelected: (option.selected && (0, isEqual_1.default)(option.value, currentValue)) || !!alreadySelected.find((item) => item.value === option.value), originalIndex: index }, option));
         const sortByOption = (o) => {
             // Unselectable text-only entries (isFake: true) go to the bottom and selected entries go to the top only if alwaysShowSelectedOnTop was passed
             if (o.showLast) {
@@ -440,11 +455,24 @@ class Combobox extends react_1.default.Component {
             return o.isSelected && this.props.alwaysShowSelectedOnTop ? 0 : 1;
         };
         // Take each array and format it, sort it, and move selected items to top (if applicable)
-        const formatOptions = (array) => array
-            .map(formatOption)
-            .sort((a, b) => sortByOption(a) - sortByOption(b))
-            .slice(0, this.props.maxItemsToShow);
-        const truncatedOptions = splitOptions.map(formatOptions).flat();
+        const formatOptions = (array, arrayStartIndex) => {
+            return array
+                .map((option, index) => formatOption(option, arrayStartIndex + index))
+                .sort((a, b) => {
+                const sortDiff = sortByOption(a) - sortByOption(b);
+                // If sort priority is the same, preserve original order using originalIndex
+                return sortDiff !== 0 ? sortDiff : a.originalIndex - b.originalIndex;
+            })
+                .slice(0, this.props.maxItemsToShow);
+        };
+        let cumulativeIndex = 0;
+        const truncatedOptions = splitOptions
+            .map((array) => {
+            const result = formatOptions(array, cumulativeIndex);
+            cumulativeIndex += array.length;
+            return result;
+        })
+            .flat();
         if (!truncatedOptions.length) {
             truncatedOptions.push({
                 text: 'No items',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify-common",
-  "version": "2.0.166",
+  "version": "2.0.167",
   "author": "Expensify, Inc.",
   "description": "Expensify libraries and components shared across different repos",
   "homepage": "https://expensify.com",