@agility/plenum-ui 1.2.6 → 1.2.7

package/lib/components/Combobox/Combobox.d.ts

@@ -22,7 +22,7 @@ export interface ComboboxProps<T extends Record<string, unknown>> {
     isRequired?: boolean;
     /** Message shown under field */
     message?: string;
-    value?: string;
+    displayValue?: string;
     /**
      * Whether this item is nullable or not.
      *
@@ -31,4 +31,4 @@ export interface ComboboxProps<T extends Record<string, unknown>> {
      */
     nullable?: boolean;
 }
-export declare const Combobox: <T extends Record<string, unknown>>({ label, items, displayProperty, keyProperty, onChange, placeholder, message, isDisabled, isError, isRequired, id, nullable }: ComboboxProps<T>) => JSX.Element;
+export declare const Combobox: <T extends Record<string, unknown>>({ label, items, displayProperty, displayValue, keyProperty, onChange, placeholder, message, isDisabled, isError, isRequired, id, nullable }: ComboboxProps<T>) => JSX.Element;

package/lib/index.esm.js

@@ -7158,7 +7158,7 @@ function classNames() {
 }
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 var Combobox = function (_a) {
-    var label = _a.label, items = _a.items, displayProperty = _a.displayProperty, keyProperty = _a.keyProperty, onChange = _a.onChange, placeholder = _a.placeholder, message = _a.message, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id, nullable = _a.nullable;
+    var label = _a.label, items = _a.items, displayProperty = _a.displayProperty, displayValue = _a.displayValue, keyProperty = _a.keyProperty, onChange = _a.onChange, placeholder = _a.placeholder, message = _a.message, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id, nullable = _a.nullable;
     var _b = useState(""), query = _b[0], setQuery = _b[1];
     var _c = useState(), selectedItem = _c[0], setSelectedItem = _c[1];
     var onChangeValue = function (value) {
@@ -7169,6 +7169,12 @@ var Combobox = function (_a) {
             setSelectedItem(value);
         }
     };
+    useEffect(function () {
+        if (displayValue) {
+            var dv = items.find(function (i) { return i[displayProperty] === displayValue; });
+            setSelectedItem(dv);
+        }
+    }, [displayValue]);
     useEffect(function () {
         typeof onChange === "function" && onChange(selectedItem);
     }, [selectedItem]);