aport-tools 4.4.19 → 4.4.21

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! aport-tools v4.4.19 | ISC */
+/*! aport-tools v4.4.21 | ISC */
 'use strict';
 
 var React = require('react');
@@ -758,72 +758,83 @@ var InputList = function InputList(_a) {
   var _k = React.useState(false),
     isDropdownVisible = _k[0],
     setIsDropdownVisible = _k[1];
-  var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
-    return a[sortBy] > b[sortBy] ? 1 : -1;
-  }) : options;
+  // Memoize sorted options for performance
+  var sortedOptions = React.useMemo(function () {
+    return sortBy ? __spreadArray([], options, true).sort(function (a, b) {
+      return a[sortBy] > b[sortBy] ? 1 : -1;
+    }) : options;
+  }, [options, sortBy]);
   var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   // Initialize selected options based on firstValue
-  var initialSelections = options.filter(function (opt) {
-    return firstValue.includes(opt.value);
-  });
-  var _l = React.useState(multi ? initialSelections : initialSelections[0] || null),
-    selectedOptions = _l[0];
-    _l[1];
+  // Filter initial selections from options based on `firstValue`
+  React.useMemo(function () {
+    return options.filter(function (opt) {
+      return firstValue.includes(opt.value);
+    });
+  }, [options, firstValue]);
+  // State for selected options
+  var _l = React.useState(multi ? firstValue : firstValue.length > 0 ? firstValue[0] : null),
+    selectedOptions = _l[0],
+    setSelectedOptions = _l[1];
   // Update form value on mount if firstValue is provided
+  // Update form value and internal state on mount or `firstValue` change
   React.useEffect(function () {
-    setFormValue(name, multi ? initialSelections : initialSelections[0] || null);
-  }, [firstValue]);
+    var isDifferent = multi ? Array.isArray(selectedOptions) && (selectedOptions.length !== firstValue.length || !selectedOptions.every(function (opt) {
+      return firstValue.includes(opt);
+    })) : selectedOptions !== firstValue[0];
+    if (firstValue && isDifferent) {
+      setSelectedOptions(multi ? firstValue : firstValue[0] || null);
+    }
+  }, [firstValue, selectedOptions, multi]);
+  // Handle option selection
   var handleSelectOption = function handleSelectOption(option) {
     var updatedSelections;
     if (multi) {
-      // Ensure selectedOptions is treated as an array
-      var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
-      var alreadySelected = selectedArray.some(function (opt) {
+      var alreadySelected = Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
         return opt.id === option.id;
       });
-      updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
+      updatedSelections = alreadySelected ? selectedOptions.filter(function (opt) {
         return opt.id !== option.id;
-      }) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
+      }) : Array.isArray(selectedOptions) ? __spreadArray(__spreadArray([], selectedOptions, true), [option], false) : [option];
       if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
         setIsDropdownVisible(false);
       }
-      setFormValue(name, updatedSelections);
     } else {
-      // Handle single-selection case
       updatedSelections = option;
-      setFormValue(name, option);
       if (closeOnSelect) setIsDropdownVisible(false);
     }
-    // Trigger onChange callback with the updated selection
+    setSelectedOptions(updatedSelections);
+    setFormValue(name, updatedSelections);
     if (onChange) {
       onChange(updatedSelections);
     }
   };
+  // Check if an option should be disabled
   var isItemDisabled = function isItemDisabled(option) {
-    if (!multi) return false; // Disable check only applies for multi-select
-    // Ensure selectedOptions is treated as an array
-    var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
-    return maxSelection && selectedArray.length >= maxSelection && !selectedArray.some(function (opt) {
+    if (!multi) return false;
+    return maxSelection && Array.isArray(selectedOptions) && selectedOptions.length >= maxSelection && !selectedOptions.some(function (opt) {
       return opt.id === option.id;
     });
   };
+  // Render selected text
   var renderSelectedText = function renderSelectedText() {
     if (multi) {
-      // Ensure selectedOptions is treated as an array
       var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
       return selectedArray.map(function (opt) {
         return opt.label;
-      }).join(', ') || placeholder;
+      }).join(", ") || placeholder;
     }
     return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
   };
+  // Toggle dropdown visibility
   var toggleDropdown = function toggleDropdown() {
     if (!disabled) {
       setIsDropdownVisible(!isDropdownVisible);
       if (!isDropdownVisible) reactNative.Keyboard.dismiss();
     }
   };
+  // Close dropdown
   var handleCloseDropdown = React.useCallback(function () {
     if (isDropdownVisible) setIsDropdownVisible(false);
   }, [isDropdownVisible]);