@longline/aqua-ui 1.0.271 → 1.0.272

package/inputs/Dropdown/Dropdown.d.ts

@@ -90,6 +90,14 @@ interface IDropdownProps {
      * A minimum body width can be set for dropdowns that are very narrow.
      */
     minBodyWidth?: number;
+    /**
+     * Item matching strategy. By default, items are matched by converting
+     * them to JSON using JSON.stringify, then comparing the results. On some
+     * occasions (for example, when the items in `data` have fewer fields than
+     * the selected item), a different strategy is required.
+     * @default json
+     */
+    match?: 'equals' | 'json' | 'id' | 'uuid' | ((item1: any, item2: any) => boolean);
     /**
      * Fired when the Dropdown value changes.
      */
@@ -123,7 +131,7 @@ interface IDropdownProps {
  * ```
  */
 declare const Dropdown: {
-    ({ direction, fluid, clearable, disabled, transparent, error, multiple, resetOnOpen, gap, maxItems, tall, label, ...props }: IDropdownProps): React.JSX.Element;
+    ({ direction, fluid, clearable, disabled, transparent, error, multiple, resetOnOpen, gap, maxItems, tall, label, match, ...props }: IDropdownProps): React.JSX.Element;
     displayName: string;
     /**
      * A Dropdown.Column's child is an item formatter function. A column can

package/inputs/Dropdown/Dropdown.js

@@ -269,6 +269,27 @@ var DropdownBase = function (props) {
         // Any other key's propagation is not stopped (most importantly
         // the TAB key to navigate to the next control).
     };
+    //
+    // Returns true if two items are equal. Comparison is done using
+    // different strategies.
+    // 
+    var match = function (item1, item2) {
+        if (props.match === 'json') {
+            return JSON.stringify(item1) === JSON.stringify(item2);
+        }
+        else if (props.match === 'id') {
+            return (item1 === null || item1 === void 0 ? void 0 : item1.id) != null && (item2 === null || item2 === void 0 ? void 0 : item2.id) != null && item1.id === item2.id;
+        }
+        else if (props.match === 'uuid') {
+            return (item1 === null || item1 === void 0 ? void 0 : item1.uuid) != null && (item2 === null || item2 === void 0 ? void 0 : item2.uuid) != null && item1.uuid === item2.uuid;
+        }
+        else if (typeof (props.match) === 'function') {
+            return props.match(item1, item2);
+        }
+        else { // equals}
+            return item1 === item2;
+        }
+    };
     var updateValue = function (item) {
         setValue(item);
         if (props.onChange) {
@@ -288,10 +309,9 @@ var DropdownBase = function (props) {
             var array = Array.isArray(value) ? value : [];
             // Compare the new item with the existing selection items
             // using deep comparision.
-            var newItem_1 = JSON.stringify(item);
-            if (array.find(function (x) { return JSON.stringify(x) == newItem_1; })) {
+            if (array.find(function (x) { return match(x, item); })) {
                 // Item already in selection. Remove it from the selection.
-                updateValue(__spreadArray([], array.filter(function (x) { return x !== item; }), true));
+                updateValue(__spreadArray([], array.filter(function (x) { return !match(x, item); }), true));
             }
             else {
                 // Item not in selection. Add it.
@@ -308,8 +328,7 @@ var DropdownBase = function (props) {
     var handleDelete = function (item) {
         // Find item in value array:
         var array = value;
-        var toDelete = JSON.stringify(item);
-        var index = array.findIndex(function (x) { return JSON.stringify(x) == toDelete; });
+        var index = array.findIndex(function (x) { return match(x, item); });
         // Remove item from selection:
         array.splice(index, 1);
         // Set new selection:
@@ -343,7 +362,7 @@ var DropdownBase = function (props) {
         var activeIndex = (props.data || []).indexOf(value);
         return (props.data || []).map(function (row, index) {
             return (React.createElement(ListRow, { active: index == activeIndex, key: index + 1, gap: props.gap, onClick: function (e) { return handleClick(e, row); } },
-                props.multiple && React.createElement(Selector, { locked: true, checked: Array.isArray(value) && value.find(function (x) { return JSON.stringify(x) == JSON.stringify(row); }) }),
+                props.multiple && React.createElement(Selector, { locked: true, checked: Array.isArray(value) && value.find(function (x) { return match(x, row); }) }),
                 columns.map(function (child, index) {
                     return (React.createElement(ListCell, { key: index, width: child.props.width, align: child.props.align }, row !== null && child.props.children(row)));
                 })));
@@ -434,8 +453,8 @@ var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2
  * ```
  */
 var Dropdown = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.clearable, clearable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.transparent, transparent = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, _j = _a.resetOnOpen, resetOnOpen = _j === void 0 ? false : _j, _k = _a.gap, gap = _k === void 0 ? 16 : _k, _l = _a.maxItems, maxItems = _l === void 0 ? 6 : _l, _m = _a.tall, tall = _m === void 0 ? false : _m, _o = _a.label, label = _o === void 0 ? function (item) { return item; } : _o, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label"]);
-    return React.createElement(DropdownStyled, __assign({ direction: direction, fluid: fluid, clearable: clearable, disabled: disabled, transparent: transparent, error: error, multiple: multiple, resetOnOpen: resetOnOpen, gap: gap, maxItems: maxItems, tall: tall, label: label }, props));
+    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.clearable, clearable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.transparent, transparent = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, _j = _a.resetOnOpen, resetOnOpen = _j === void 0 ? false : _j, _k = _a.gap, gap = _k === void 0 ? 16 : _k, _l = _a.maxItems, maxItems = _l === void 0 ? 6 : _l, _m = _a.tall, tall = _m === void 0 ? false : _m, _o = _a.label, label = _o === void 0 ? function (item) { return item; } : _o, _p = _a.match, match = _p === void 0 ? 'json' : _p, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label", "match"]);
+    return React.createElement(DropdownStyled, __assign({ direction: direction, fluid: fluid, clearable: clearable, disabled: disabled, transparent: transparent, error: error, multiple: multiple, resetOnOpen: resetOnOpen, gap: gap, maxItems: maxItems, tall: tall, label: label, match: match }, props));
 };
 Dropdown.displayName = 'Dropdown';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.271",
+  "version": "1.0.272",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",