@rolster/react-components 18.15.13 → 18.15.20

package/dist/es/index.js

@@ -1416,7 +1416,7 @@ function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
         }, rlsTheme: rlsTheme }));
 }
 
-function RlsInput({ children, disabled, formControl, placeholder, type, value, onValue }) {
+function RlsInput({ children, disabled, formControl, onValue, placeholder, type, value }) {
     const [focused, setFocused] = useState(false);
     function setValue(value) {
         formControl?.setValue(value);
@@ -1439,7 +1439,7 @@ function RlsInput({ children, disabled, formControl, placeholder, type, value, o
         }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled ?? disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value ?? value ?? '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
-function RlsInputMoney({ decimals, disabled, formControl, placeholder, symbol, value, onValue }) {
+function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder, symbol, value }) {
     const [valueInput, setValueInput] = useState(value || 0);
     function onChange(value) {
         !formControl && setValueInput(value);
@@ -1448,7 +1448,7 @@ function RlsInputMoney({ decimals, disabled, formControl, placeholder, symbol, v
     return (jsxRuntimeExports.jsx("div", { className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 
-function RlsInputNumber({ disabled, formControl, placeholder, value, onValue }) {
+function RlsInputNumber({ disabled, formControl, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = useState(value ?? 0);
     function onChange(value) {
         !formControl && setValueInput(value);
@@ -1457,7 +1457,7 @@ function RlsInputNumber({ disabled, formControl, placeholder, value, onValue })
     return (jsxRuntimeExports.jsx("div", { className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
-function RlsInputPassword({ disabled, formControl, placeholder, type, onValue }) {
+function RlsInputPassword({ disabled, formControl, onValue, placeholder, type }) {
     const [focused, setFocused] = useState(false);
     function onChange(event) {
         formControl?.setValue(event.target.value);
@@ -1477,12 +1477,12 @@ function RlsInputPassword({ disabled, formControl, placeholder, type, onValue })
         }), children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
-function RlsInputSearch({ formControl, placeholder, onSearch }) {
+function RlsInputSearch({ formControl, onSearch, placeholder }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
 }
 
-function RlsInputText({ disabled, formControl, placeholder, value, onValue }) {
-    const [valueInput, setValueInput] = useState(value || '');
+function RlsInputText({ disabled, formControl, onValue, placeholder, value }) {
+    const [valueInput, setValueInput] = useState(value ?? '');
     function onChange(value) {
         !formControl && setValueInput(value);
         onValue && onValue(value);
@@ -1575,23 +1575,23 @@ function RlsMessageFormError({ className, formControl }) {
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })) }));
 }
 
-function RlsFieldMoney({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
+function RlsFieldMoney({ children, decimals, disabled, formControl, msgErrorDisabled, onValue, placeholder, symbol, rlsTheme, value }) {
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
+function RlsFieldNumber({ children, disabled, formControl, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsTheme }) {
+function RlsFieldPassword({ children, disabled, formControl, msgErrorDisabled, placeholder, rlsTheme }) {
     const [password, setPassword] = useState(true);
     function onToggleInput() {
         setPassword(!password);
@@ -1600,15 +1600,15 @@ function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsThe
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
+function RlsFieldText({ children, disabled, formControl, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
+        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
@@ -2065,11 +2065,12 @@ function useListControl({ suggestions, formControl }) {
     const contentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
+    const listIsOpen = useRef(false);
     const [state, setState] = useState({
         focused: false,
         higher: false,
         value: '',
-        visible: false
+        listIsVisible: false
     });
     const collection = useRef(new ListCollection([]));
     const position = useRef(0);
@@ -2077,7 +2078,7 @@ function useListControl({ suggestions, formControl }) {
     useEffect(() => {
         function onCloseSuggestions({ target }) {
             !contentRef?.current?.contains(target) &&
-                setState((state) => ({ ...state, visible: false }));
+                setState((state) => ({ ...state, listIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2085,29 +2086,36 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     useEffect(() => {
-        state.visible && formControl?.touch();
+        if (!listIsOpen.current && state.listIsVisible) {
+            listIsOpen.current = true;
+        }
+        if (listIsOpen.current && !state.listIsVisible) {
+            formControl?.touch();
+        }
         setState((state) => ({
             ...state,
             higher: locationListCanTop(contentRef.current, listRef.current)
         }));
-    }, [state.visible]);
+    }, [state.listIsVisible]);
     useEffect(() => {
         collection.current = new ListCollection(suggestions);
         refresh(collection.current, formControl?.value);
     }, [suggestions, formControl?.value]);
     function refresh(collection, state) {
         if (!state) {
-            return refreshProtected(collection) ? undefined : setValue('');
+            return refreshProtected(collection)
+                ? undefined
+                : refreshState({ value: '' });
         }
         const element = collection.find(state);
         if (element) {
             protectedValue.current = undefined;
-            return setValue(element.description);
+            return refreshState({ value: element.description });
         }
         if (!refreshProtected(collection)) {
             protectedValue.current = state;
-            setValue('');
             setFormValue(undefined);
+            refreshState({ value: '' });
         }
     }
     function refreshProtected(collection) {
@@ -2121,20 +2129,14 @@ function useListControl({ suggestions, formControl }) {
         }
         return false;
     }
-    function setFocused(focused) {
-        setState((state) => ({ ...state, focused }));
-    }
-    function setValue(value) {
-        setState((state) => ({ ...state, value }));
+    function refreshState(state) {
+        setState((currentState) => ({ ...currentState, state }));
     }
     function setFormValue(value) {
         formControl?.setValue(value);
     }
-    function setVisible(visible) {
-        setState((state) => ({ ...state, visible }));
-    }
     function navigationInput(event) {
-        if (state.visible) {
+        if (state.listIsVisible) {
             const newPosition = navigationListFromInput({
                 content: contentRef.current,
                 event: event,
@@ -2159,10 +2161,8 @@ function useListControl({ suggestions, formControl }) {
         listRef,
         navigationElement,
         navigationInput,
-        setFocused,
         setFormValue,
-        setValue,
-        setVisible
+        setState: refreshState
     };
 }
 
@@ -2172,12 +2172,12 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     const [pattern, setPattern] = useState('');
     const [coincidences, setCoincidences] = useState([]);
     const currentStore = useRef({
-        pattern: '',
         coincidences: [],
+        pattern: '',
         previous: null
     });
     const listControl = useListControl({ suggestions, formControl });
-    const { inputRef, navigationElement, navigationInput, setFocused, setFormValue, setValue, setVisible } = listControl;
+    const { inputRef, navigationElement, navigationInput, setFormValue, setState } = listControl;
     useEffect(() => {
         refreshCoincidences(pattern, true);
     }, [suggestions]);
@@ -2186,23 +2186,23 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     }, [pattern]);
     function onClickControl() {
         if (!disabled) {
-            setVisible(true);
+            setState({ listIsVisible: true });
             setTimeout(() => {
                 inputRef?.current?.focus();
             }, DURATION_ANIMATION$1);
         }
     }
     function onFocusInput() {
-        setFocused(true);
+        setState({ focused: true });
     }
     function onBlurInput() {
-        setFocused(false);
+        setState({ focused: false });
     }
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Escape':
             case 'Tab':
-                setVisible(false);
+                setState({ listIsVisible: false });
                 break;
             default:
                 navigationInput(event);
@@ -2210,13 +2210,12 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
         }
     }
     function onClickAction() {
-        setVisible(false);
-        setValue('');
+        setState({ listIsVisible: false, value: '' });
         setFormValue(undefined);
         onValue && onValue(undefined);
     }
     function onClickBackdrop() {
-        setVisible(false);
+        setState({ listIsVisible: false });
     }
     function onClickElement(element) {
         return () => {
@@ -2229,13 +2228,13 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
         };
     }
     function onChange({ description, value }) {
-        setVisible(false);
         if (onSelect) {
+            setState({ listIsVisible: false });
             onSelect(value);
         }
         else {
+            setState({ listIsVisible: false, value: description });
             setFormValue(value);
-            setValue(description);
         }
         onValue && onValue(value);
     }
@@ -2265,21 +2264,17 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     };
 }
 
-function RlsFieldAutocompleteTemplate({ render, suggestions, children, disabled, formControl, hiddenIcon, onSearch, onSelect, onValue, placeholder, rlsTheme, searching }) {
-    const fieldAutocomplete = useFieldAutocomplete({
-        suggestions,
-        disabled,
-        formControl,
-        onSelect,
-        onValue
-    });
+function RlsFieldAutocompleteTemplate(props) {
+    const fieldAutocomplete = useFieldAutocomplete(props);
+    const { render, children, disabled, formControl, hiddenIcon, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     return (jsxRuntimeExports.jsxs("div", { ref: fieldAutocomplete.listControl.contentRef, className: renderClassStatus('rls-field-box', {
             disabled,
             focused: fieldAutocomplete.listControl.focused,
+            error: formControl?.wrong,
             selected: !!fieldAutocomplete.listControl.value
-        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldAutocomplete.listControl.value, onClick: fieldAutocomplete.onClickControl }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    visible: fieldAutocomplete.listControl.visible,
-                    hide: !fieldAutocomplete.listControl.visible,
+        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldAutocomplete.listControl.value, onClick: fieldAutocomplete.onClickControl }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                    visible: fieldAutocomplete.listControl.listIsVisible,
+                    hide: !fieldAutocomplete.listControl.listIsVisible,
                     higher: fieldAutocomplete.listControl.higher
                 }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldAutocomplete.listControl.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: fieldAutocomplete.listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: fieldAutocomplete.pattern, onChange: ({ target: { value } }) => {
                                                 fieldAutocomplete.setPattern(value);
@@ -2364,7 +2359,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
 }
 
 const FORMAT_DATE = '{dd}/{mx}/{aa}';
-function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, onValue, placeholder, rlsTheme }) {
+function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme }) {
     const today = new Date(); // Initial current date in component
     const [value, setValue] = useState();
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -2397,7 +2392,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const valueInput = value
         ? dateFormatTemplate(value, format || FORMAT_DATE)
         : '';
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         type !== PickerListenerType.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2456,7 +2451,7 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
                 }), children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
+function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, msgErrorDisabled, placeholder, rlsTheme }) {
     const currentRange = formControl?.value || DateRange.now();
     const currentDate = datePicker || new Date();
     const [value, setValue] = useState(currentRange);
@@ -2473,7 +2468,7 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         value && setValue(value);
                         setModalIsVisible(false);
                     } }) })] }));
@@ -2481,25 +2476,25 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
 
 function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
-    const { inputRef, visible, navigationElement, navigationInput, setFocused, setFormValue, setValue, setVisible } = listControl;
+    const { inputRef, listIsVisible, navigationElement, navigationInput, setFormValue, setState } = listControl;
     function onFocusInput() {
-        setFocused(true);
+        setState({ focused: true });
     }
     function onBlurInput() {
-        setFocused(false);
+        setState({ focused: false });
     }
     function onClickInput() {
-        setVisible(true);
+        setState({ listIsVisible: true });
     }
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Space':
             case 'Enter':
-                setVisible(true);
+                setState({ listIsVisible: true });
                 break;
             case 'Escape':
             case 'Tab':
-                setVisible(false);
+                setState({ listIsVisible: false });
                 break;
             default:
                 navigationInput(event);
@@ -2507,11 +2502,11 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
         }
     }
     function onClickAction() {
-        setVisible(!visible);
-        !visible && inputRef?.current?.focus();
+        setState({ listIsVisible: !listIsVisible });
+        !listIsVisible && inputRef?.current?.focus();
     }
     function onClickBackdrop() {
-        setVisible(false);
+        setState({ listIsVisible: false });
     }
     function onClickElement(element) {
         return () => {
@@ -2525,13 +2520,13 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     }
     function onChange({ description, value }) {
         inputRef?.current?.focus();
-        setVisible(false);
         if (onSelect) {
+            setState({ listIsVisible: false });
             onSelect(value);
         }
         else {
             setFormValue(value);
-            setValue(description);
+            setState({ listIsVisible: false, value: description });
         }
         onValue && onValue(value);
     }
@@ -2548,19 +2543,18 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     };
 }
 
-function RlsFieldSelectTemplate({ render, suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }) {
-    const fieldSelect = useFieldSelect({
-        suggestions,
-        disabled,
-        formControl,
-        onSelect,
-        onValue
-    });
-    return (jsxRuntimeExports.jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', { focused: fieldSelect.listControl.focused, disabled }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
-                                visible: fieldSelect.listControl.visible
-                            }), disabled: disabled, onClick: fieldSelect.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    visible: fieldSelect.listControl.visible,
-                    hide: !fieldSelect.listControl.visible,
+function RlsFieldSelectTemplate(props) {
+    const fieldSelect = useFieldSelect(props);
+    const { render, suggestions, children, disabled, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
+    return (jsxRuntimeExports.jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', {
+            focused: fieldSelect.listControl.focused,
+            error: formControl?.wrong,
+            disabled
+        }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
+                                visible: fieldSelect.listControl.listIsVisible
+                            }), disabled: disabled, onClick: fieldSelect.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                    visible: fieldSelect.listControl.listIsVisible,
+                    hide: !fieldSelect.listControl.listIsVisible,
                     higher: fieldSelect.listControl.higher
                 }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldSelect.listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldSelect.onClickElement(element), onKeyDown: fieldSelect.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldSelect.onClickBackdrop })] })] }));
 }