@trafilea/afrodita-components 4.0.2-beta.11 → 4.0.2-beta.12

package/build/index.d.ts

@@ -452,23 +452,27 @@ declare const ButtonSecondary: ({ text, onClick, disabled, wide, size, className
 
 declare const ButtonSecondaryOutline: ({ text, onClick, disabled, wide, size, className, }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+declare type Value<T> = DropdownOption<T>;
+declare type OnChange<T> = (option: Value<T>) => void;
 declare type CommonProps<T> = {
-    options: DropdownOption<T>[];
+    options: Value<T>[];
     disabled?: boolean;
     wide?: boolean;
-    onChange: (option: DropdownOption<T>) => void;
     label?: string;
     sort?: boolean;
-};
-declare type ConditionalProps<T> = {
-    initialValue: DropdownOption<T>;
-    placeHolder?: string;
-} | {
-    initialValue?: undefined;
+    initialValue?: Value<T>;
     placeHolder: string;
 };
-declare type SimpleDropdownProps<T> = CommonProps<T> & ConditionalProps<T>;
-declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, }: SimpleDropdownProps<T>): JSX.Element;
+declare type ControlledProps<T> = {
+    value: Value<T>;
+    onChange: OnChange<T>;
+} & CommonProps<T>;
+declare type UncontrolledProps<T> = {
+    value?: never;
+    onChange?: OnChange<T>;
+} & CommonProps<T>;
+declare type SimpleDropdownProps<T> = UncontrolledProps<T> | ControlledProps<T>;
+declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, value, }: SimpleDropdownProps<T>): JSX.Element;
 
 interface SizeSelectorProps {
     label: string;

package/build/index.esm.js

@@ -6243,20 +6243,28 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
 });
 
 function SimpleDropdown(_a) {
-    var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange;
-    var _e = useState(initialValue), selectedValue = _e[0], setSelectedValue = _e[1];
-    var selectedOptionLabel = function () {
-        if (selectedValue)
+    var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value;
+    var _e = useState(value || initialValue), selectedValue = _e[0], setSelectedValue = _e[1];
+    var selectedOptionLabel = useMemo(function () {
+        if (selectedValue) {
             return selectedValue.label;
-        else
-            return placeHolder;
-    };
+        }
+        return placeHolder;
+    }, [selectedValue, placeHolder]);
     var onChangeHandler = function (value) {
-        onChange(value);
+        if (onChange) {
+            onChange(value);
+        }
         setSelectedValue(value);
     };
+    useEffect(function () {
+        if (value == null) {
+            return;
+        }
+        setSelectedValue(value);
+    }, [value]);
     var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
-    return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel() }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
+    return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
 }
 
 var getStylesBySize$8 = function (size, theme) {