@mtes-mct/monitor-ui 4.0.0 → 4.0.2

package/formiks/FormikSearch.d.ts

@@ -1,3 +1,4 @@
 import type { SearchProps } from '../fields/Search';
-export type FormikSearchProps<OptionValue extends number | string | Record<string, any> = string> = Omit<SearchProps<OptionValue>, 'defaultValue' | 'error' | 'onChange'>;
-export declare function FormikSearch<OptionValue extends number | string | Record<string, any> = string>({ name, ...originalProps }: FormikSearchProps<OptionValue>): JSX.Element;
+import type { OptionValueType } from '../types';
+export type FormikSearchProps<OptionValue extends OptionValueType = string> = Omit<SearchProps<OptionValue>, 'defaultValue' | 'error' | 'onChange'>;
+export declare function FormikSearch<OptionValue extends OptionValueType = string>({ name, ...originalProps }: FormikSearchProps<OptionValue>): JSX.Element;

package/formiks/FormikSelect.d.ts

@@ -1,3 +1,4 @@
 import type { SelectProps } from '../fields/Select';
-export type FormikSelectProps<OptionValue extends number | string | Record<string, any> = string> = Omit<SelectProps<OptionValue>, 'error' | 'onChange' | 'value'>;
-export declare function FormikSelect<OptionValue extends number | string | Record<string, any> = string>({ name, ...originalProps }: FormikSelectProps<OptionValue>): JSX.Element;
+import type { OptionValueType } from '../types';
+export type FormikSelectProps<OptionValue extends OptionValueType = string> = Omit<SelectProps<OptionValue>, 'error' | 'onChange' | 'value'>;
+export declare function FormikSelect<OptionValue extends OptionValueType = string>({ name, ...originalProps }: FormikSelectProps<OptionValue>): JSX.Element;

package/hooks/useFieldControl.d.ts

@@ -0,0 +1,9 @@
+import type { Promisable } from 'type-fest';
+export declare function useFieldControl<T>(value: T, onChange: ((nextValue: T) => Promisable<void>) | undefined, props: {
+    [key: string]: any;
+    disabled: boolean;
+    isUndefinedWhenDisabled: boolean;
+}): {
+    controlledOnChange: (nextValue: T) => Promisable<void>;
+    controlledValue: T | undefined;
+};

package/index.d.ts

@@ -53,7 +53,7 @@ export { noop } from './utils/noop';
 export { isNumeric } from './utils/isNumeric';
 export { stopMouseEventPropagation } from './utils/stopMouseEventPropagation';
 export type { PartialTheme, Theme } from './theme';
-export type { Coordinates, DateAsStringRange, DateRange, IconProps, Option, Undefine } from './types';
+export type { Coordinates, DateAsStringRange, DateRange, IconProps, Option, OptionValueType, Undefine } from './types';
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown';
 export type { SingleTagProps } from './components/SingleTag';
 export type { ButtonProps } from './elements/Button';

package/index.js

@@ -2841,7 +2841,6 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
   margin-bottom: 4px;
 `;
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 function Legend({ disabled = false, hasError = false, isHidden = false, ...nativeProps }) {
     return jsx(StyledLabel, { as: "legend", disabled: disabled, hasError: hasError, isHidden: isHidden, ...nativeProps });
 }
@@ -3491,9 +3490,7 @@ const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
     }, [baseContainer, handleClickOutside]);
 };
 
-function useFieldUndefineEffect(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled, onChange, onDisable) {
+function useFieldUndefineEffect(disabled, onChange, onDisable) {
     useEffect(() => {
         if (!disabled) {
             return;
@@ -20718,8 +20715,7 @@ var lodash = {
  * @see https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
  */
 function useForceUpdate() {
-    // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
-    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    const [, forceUpdate] = useReducer(x => x + 1, 0);
     const forceDebouncedUpdate = useMemo(() => lodashExports.throttle(forceUpdate, 500), [forceUpdate]);
     return { forceDebouncedUpdate, forceUpdate };
 }
@@ -20737,7 +20733,7 @@ const getPseudoRandomString = () => Math.random().toString(36).slice(2);
 function useKey(deps) {
     const keyRef = useRef(getPseudoRandomString());
     const prevDeps = usePrevious(deps);
-    if (!prevDeps || equals(deps, prevDeps)) {
+    if (lodashExports.isEqual(deps, prevDeps)) {
         return keyRef.current;
     }
     keyRef.current = getPseudoRandomString();
@@ -21393,9 +21389,7 @@ const StyledNumberInput = styled.input `
   }
 `;
 
-function DateInputWithRef({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStartDate = false, onBack, onChange, onClick, onNext, onPrevious }, ref) {
+function DateInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStartDate = false, onBack, onChange, onClick, onNext, onPrevious }, ref) {
     const boxRef = useRef();
     const dayInputRef = useRef();
     const monthInputRef = useRef();
@@ -21579,9 +21573,7 @@ const Option = styled.div `
   }
 `;
 
-function TimeInputWithRef({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
+function TimeInputWithRef({ baseContainer, defaultValue, disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
     const boxRef = useRef();
     const hourInputRef = useRef();
     const minuteInputRef = useRef();
@@ -21693,9 +21685,7 @@ const InputGroup = styled.div `
   }
 `;
 
-function DatePicker({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DatePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const boxRef = useRef();
     const dateInputRef = useRef();
     const timeInputRef = useRef();
@@ -22016,9 +22006,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const startDateInputRef = useRef();
     const startTimeInputRef = useRef();
     const endDateInputRef = useRef();
@@ -22207,9 +22195,7 @@ const Field = styled.span `
 }};
 `;
 
-function MultiCheckbox({ value = [], 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options }) {
+function MultiCheckbox({ value = [], disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options }) {
     // This tracks the component internal value which allows us to react to value changes after each checkbox toggling
     const [internalValue, setInternalValue] = useState(value);
     // and compare it with an eventual external value change (via the `value` prop)
@@ -22272,12 +22258,40 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
+function useFieldControl(value, onChange, props) {
+    const { disabled, isUndefinedWhenDisabled } = props;
+    // This tracks the component internal value which allows us to react to value changes after the checkbox toggling
+    const internalValueRef = useRef(value);
+    // and compare it with an eventual external value change (via the `value` prop)
+    const previousValue = usePrevious(value);
+    const { forceUpdate } = useForceUpdate();
+    const controlledValue = isUndefinedWhenDisabled && disabled ? undefined : internalValueRef.current;
+    const controlledOnChange = useCallback((nextValue) => {
+        internalValueRef.current = nextValue;
+        if (onChange) {
+            onChange(nextValue);
+        }
+    }, [onChange]);
+    // We update the `internalValue` each time the `value` prop is updated
+    useEffect(() => {
+        if (lodashExports.isEqual(value, previousValue)) {
+            return;
+        }
+        internalValueRef.current = value;
+        forceUpdate();
+    }, [forceUpdate, previousValue, value]);
+    return { controlledOnChange, controlledValue };
+}
+
+function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
+    return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
+}
+
 function getRsuiteDataFromOptions(options, optionValueKey) {
-    const getDataValueFromOptionValue = (value) => String(optionValueKey ? value[optionValueKey] : value);
     return options.map(({ value, ...rest }) => ({
         ...rest,
         optionValue: value,
-        value: getDataValueFromOptionValue(value)
+        value: getRsuiteValueFromOptionValue(value, optionValueKey)
     }));
 }
 
@@ -22291,36 +22305,33 @@ function toggleInCollection(item, collection) {
     return isInCollection ? reject(equals(item), collection) : [...collection, item];
 }
 
-function MultiSelect({ baseContainer, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-searchable = false, value, ...originalProps }) {
+function MultiSelect({ baseContainer, disabled = false, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const selectedOptionValuesRef = useRef(value || []);
     const [isOpen, setIsOpen] = useState(false);
-    const controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
+    const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
+        disabled,
+        isUndefinedWhenDisabled
+    });
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledValue, originalProps.disabled, originalProps.name]);
+    const key = useKey([disabled, originalProps.name, value]);
     const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
     const handleClean = useCallback(() => {
         selectedOptionValuesRef.current = [];
-        if (onChange) {
-            onChange(undefined);
-        }
-    }, [onChange]);
+        controlledOnChange(undefined);
+    }, [controlledOnChange]);
     const handleSelect = useCallback((_, selectedItem) => {
         const nextValues = toggleInCollection(selectedItem.optionValue, selectedOptionValuesRef.current);
         selectedOptionValuesRef.current = nextValues;
-        if (onChange) {
-            const normalizedNextValue = !nextValues.length ? undefined : nextValues;
-            onChange(normalizedNextValue);
-        }
-    }, [onChange]);
+        const normalizedNextValue = !nextValues.length ? undefined : nextValues;
+        controlledOnChange(normalizedNextValue);
+    }, [controlledOnChange]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -22335,12 +22346,12 @@ searchable = false, value, ...originalProps }) {
             setIsOpen(!isOpen);
         }
     }, [isOpen]);
-    useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: data, id: originalProps.name, onClean: handleClean, onClick: toggle, 
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: data, disabled: disabled, id: originalProps.name, onClean: handleClean, onClick: toggle, 
                     // Since we customized `ItemDataType` type by adding `optionValue`, we have an optional vs required conflict
                     onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
@@ -22465,30 +22476,18 @@ const Box$4 = styled.div `
   }
 `;
 
-function MultiRadio({ 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
-    // This tracks the component internal value which allows us to react to value changes after a radio toggling
-    const [internalValue, setInternalValue] = useState(value);
-    // and compare it with an eventual external value change (via the `value` prop)
-    const previousValue = usePrevious(value);
-    // to decide which on is the source of "truth" in `controlledValue` (the last one to be changed is the true value)
-    const controlledValue = useMemo(() => {
-        // If the `value` has changed, `value` takes precedence,
-        // otherwise we can use our current internal value
-        const nextControlledValue = lodashExports.isEqual(value, previousValue) ? internalValue : value;
-        return !isUndefinedWhenDisabled || !disabled ? nextControlledValue : undefined;
-    }, [disabled, internalValue, isUndefinedWhenDisabled, previousValue, value]);
+function MultiRadio({ disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
+    const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
+        disabled,
+        isUndefinedWhenDisabled
+    });
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledValue, disabled, name]);
+    const key = useKey([disabled, name, value]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
-        setInternalValue(nextCheckedOptionValue);
-        if (onChange) {
-            onChange(nextCheckedOptionValue);
-        }
-    }, [onChange]);
+        controlledOnChange(nextCheckedOptionValue);
+    }, [controlledOnChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     return (jsxs(Fieldset, { disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(CheckboxesBox, { "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals(option.value, controlledValue), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }), hasError && jsx(FieldError, { children: controlledError })] }, key));
 }
@@ -22530,9 +22529,7 @@ const CheckboxesBox = styled.div `
     `}
 `;
 
-function MultiZoneEditor({ addButtonLabel, defaultValue = [], 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit }) {
+function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false, error, initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit }) {
     const prevDefaultValueRef = useRef(defaultValue);
     const [zones, setZones] = useState(defaultValue);
     const controlledError = useMemo(() => normalizeString(error), [error]);
@@ -22642,9 +22639,7 @@ function isNumeric(val) {
 }
 
 // TODO This field should return undefined when cleared (i.e.: Select all & Backspace/Delete)
-function DDCoordinatesInput({ coordinates, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, onChange }) {
+function DDCoordinatesInput({ coordinates, disabled = false, onChange }) {
     const latitudeInputRef = useRef();
     const longitudeInputRef = useRef();
     const [latitudeError, setLatitudeError] = useState('');
@@ -32638,9 +32633,7 @@ const coordinatesAreDistinct = (nextCoordinates, coordinates) => {
 // Open issue: https://github.com/uNmAnNeR/imaskjs/issues/761
 const UntypedIMaskInput = IMaskInput;
 // TODO This field should return undefined when cleared (i.e.: Select all & Backspace/Delete)
-function DMDCoordinatesInput({ coordinates, coordinatesFormat, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, onChange }) {
+function DMDCoordinatesInput({ coordinates, coordinatesFormat, disabled = false, onChange }) {
     const [error, setError] = useState('');
     const [value, setValue] = useState('');
     useEffect(() => {
@@ -32712,9 +32705,7 @@ const Box$2 = styled.div `
   text-align: left;
 `;
 
-function DMSCoordinatesInput({ coordinates, coordinatesFormat, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-disabled = false, onChange }) {
+function DMSCoordinatesInput({ coordinates, coordinatesFormat, disabled = false, onChange }) {
     /** Convert the coordinates to the [latitude, longitude] string format */
     const defaultValue = useMemo(() => {
         if (!coordinates?.length || !coordinatesFormat) {
@@ -32741,9 +32732,7 @@ const Box$1 = styled.div `
 
 const noop = () => { };
 
-function CoordinatesInput({ coordinatesFormat, defaultValue, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
+function CoordinatesInput({ coordinatesFormat, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const getCoordinatesInput = useCallback(() => {
@@ -32772,32 +32761,30 @@ const StyledFieldset = styled(Fieldset) `
   }
 `;
 
-function Select({ baseContainer, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-searchable = false, value, ...originalProps }) {
+function Select({ baseContainer, disabled = false, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
-    const controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
+    const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
+        disabled,
+        isUndefinedWhenDisabled
+    });
+    const controlledRsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(controlledValue, optionValueKey), [controlledValue, optionValueKey]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledValue, originalProps.disabled, originalProps.name]);
+    const key = useKey([disabled, originalProps.name, value]);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
     const handleClean = useCallback(() => {
-        if (onChange) {
-            onChange(undefined);
-        }
-    }, [onChange]);
+        controlledOnChange(undefined);
+    }, [controlledOnChange]);
     const handleSelect = useCallback((_, selectedItem) => {
         close();
-        if (onChange) {
-            onChange(selectedItem.optionValue);
-        }
-    }, [close, onChange]);
+        controlledOnChange(selectedItem.optionValue);
+    }, [close, controlledOnChange]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -32814,14 +32801,14 @@ searchable = false, value, ...originalProps }) {
             setIsOpen(!isOpen);
         }
     }, [isOpen]);
-    useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: data, id: originalProps.name, onClean: handleClean, 
+    return (jsxs(Field$2, { children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: data, disabled: disabled, id: originalProps.name, onClean: handleClean, 
                     // Since we customized `ItemDataType` type by adding `optionValue`, we have an optional vs required conflict
-                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {