@rolster/react-components 18.15.8 → 18.15.11

package/dist/es/assets/{index-6EQEC0IJ.css → index-l02yDX9t.css}

@@ -1700,7 +1700,7 @@
 }
 .rls-confirmation__subtitle {
   text-align: center;
-  color: var(--rls-theme-color-300);
+  color: var(--rls-theme-color-400);
   font-weight: var(--rls-font-weight-bold);
   font-size: var(--pvt-subtitle-font-size);
   line-height: var(--pvt-subtitle-line-height);

package/dist/es/index.js

@@ -1418,14 +1418,12 @@ function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
 
 function RlsInput({ children, disabled, formControl, placeholder, type, value, onValue }) {
     const [focused, setFocused] = useState(false);
-    function onChange(event) {
-        setValue(type === 'number' ? +event.target.value : event.target.value);
-    }
     function setValue(value) {
         formControl?.setValue(value);
-        if (onValue) {
-            onValue(value);
-        }
+        onValue && onValue(value);
+    }
+    function onChange(event) {
+        setValue(type === 'number' ? +event.target.value : event.target.value);
     }
     function onFocus() {
         formControl?.focus();
@@ -1436,44 +1434,34 @@ function RlsInput({ children, disabled, formControl, placeholder, type, value, o
         setFocused(false);
     }
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-input', {
-            focused: formControl?.focused || focused,
-            disabled: formControl?.disabled || disabled
-        }), 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 })] }));
+            focused: formControl?.focused ?? focused,
+            disabled: formControl?.disabled ?? disabled
+        }), 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 }) {
     const [valueInput, setValueInput] = useState(value || 0);
     function onChange(value) {
-        if (!formControl) {
-            setValueInput(value);
-        }
-        if (onValue) {
-            onValue(value);
-        }
+        !formControl && setValueInput(value);
+        onValue && onValue(value);
     }
-    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 }) }) }));
+    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 }) {
-    const [valueInput, setValueInput] = useState(value || 0);
+    const [valueInput, setValueInput] = useState(value ?? 0);
     function onChange(value) {
-        if (!formControl) {
-            setValueInput(value);
-        }
-        if (onValue) {
-            onValue(value);
-        }
+        !formControl && setValueInput(value);
+        onValue && onValue(value);
     }
-    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 }) }));
+    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 }) {
     const [focused, setFocused] = useState(false);
     function onChange(event) {
         formControl?.setValue(event.target.value);
-        if (onValue) {
-            onValue(event.target.value);
-        }
+        onValue && onValue(event.target.value);
     }
     function onFocus() {
         formControl?.focus();
@@ -1484,9 +1472,9 @@ function RlsInputPassword({ disabled, formControl, placeholder, type, onValue })
         setFocused(false);
     }
     return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-input-password', {
-            focused: formControl?.focused || focused,
+            focused: formControl?.focused ?? focused,
             disabled
-        }), children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type || 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
+        }), 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 }) {
@@ -1496,14 +1484,10 @@ function RlsInputSearch({ formControl, placeholder, onSearch }) {
 function RlsInputText({ disabled, formControl, placeholder, value, onValue }) {
     const [valueInput, setValueInput] = useState(value || '');
     function onChange(value) {
-        if (!formControl) {
-            setValueInput(value);
-        }
-        if (onValue) {
-            onValue(value);
-        }
+        !formControl && setValueInput(value);
+        onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value || value || valueInput }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onChange, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
 function RlsLabel({ children, rlsTheme }) {
@@ -1562,9 +1546,7 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     const [visible, setVisible] = useState(false);
     useEffect(() => {
         function onCloseMenu({ target }) {
-            if (!componentRef?.current?.contains(target)) {
-                setVisible(false);
-            }
+            !componentRef?.current?.contains(target) && setVisible(false);
         }
         document.addEventListener('click', onCloseMenu);
         return () => {
@@ -1577,14 +1559,16 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
     function onSelectAction(action) {
         setAction(action);
         setVisible(false);
-        if (automatic) {
-            onAction(action.value);
-        }
+        automatic && onAction(action.value);
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntimeExports.jsx(RlsButton, { disabled: disabled, type: type, onClick: () => onAction(action.value), children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntimeExports.jsx(RlsButton, { disabled: disabled, type: type, onClick: () => {
+                                onAction(action.value);
+                            }, children: action.label }) })), jsxRuntimeExports.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntimeExports.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
                     visible,
                     hide: !visible
-                }), children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "truncate", onClick: () => onSelectAction(action), children: action.label }, index))) }) })] }));
+                }), children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "truncate", onClick: () => {
+                            onSelectAction(action);
+                        }, children: action.label }, index))) }) })] }));
 }
 
 function RlsMessageFormError({ className, formControl }) {
@@ -1652,9 +1636,7 @@ function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsThe
         setChecked(formControl?.value === value);
     }, [formControl?.value]);
     function onSelect() {
-        if (formControl) {
-            formControl?.setValue(value);
-        }
+        formControl && formControl?.setValue(value);
     }
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-label-radiobutton', {
             disabled,
@@ -1765,9 +1747,7 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
     }
     function onChange(value) {
         setDayValue(value);
-        if (onValue) {
-            onValue(value);
-        }
+        onValue && onValue(value);
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-picker-day__element', {
                             disabled: disabled || disabledPicker,
@@ -1809,7 +1789,11 @@ function RlsPickerDayRange({ date, disabled: disabledPicker, formControl, maxDat
                             forbidden,
                             ranged,
                             source
-                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: value || '??' }) }, index))) }, index))) })] }));
+                        }), onClick: value && !disabledPicker
+                            ? () => {
+                                onChange(value);
+                            }
+                            : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
 function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
@@ -1849,7 +1833,11 @@ function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate,
                 disabled: disabled || disabledPicker,
                 focused,
                 selected
-            }), onClick: !(disabled || disabledPicker) ? () => onChange(value) : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }, index))) }));
+            }), onClick: !(disabled || disabledPicker)
+                ? () => {
+                    onChange(value);
+                }
+                : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }, index))) }));
 }
 
 function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
@@ -1872,9 +1860,8 @@ function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled,
         }
     }
     function onPreviousYear() {
-        if (itIsDefined(yearControl.value)) {
+        itIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value - 1);
-        }
     }
     function onPrevious() {
         type === 'month' ? onPreviousMonth() : onPreviousYear();
@@ -1891,9 +1878,8 @@ function RlsPickerMonthTitle({ monthControl, type, yearControl, date, disabled,
         }
     }
     function onNextYear() {
-        if (itIsDefined(yearControl.value)) {
+        itIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value + 1);
-        }
     }
     function onNext() {
         type === 'month' ? onNextMonth() : onNextYear();
@@ -1939,15 +1925,17 @@ function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, m
     }
     function onChange(value) {
         setYearValue(value);
-        if (onValue) {
-            onValue(value);
-        }
+        onValue && onValue(value);
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxRuntimeExports.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-picker-year__year', {
                         disabled: disabled || disabledPicker,
                         focused,
                         selected
-                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
+                    }), onClick: value && !disabledPicker
+                        ? () => {
+                            onChange(value);
+                        }
+                        : undefined, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
 }
 
 function RlsToolbar({ actions, children, subtitle }) {
@@ -2078,18 +2066,19 @@ function useListControl({ suggestions, formControl }) {
     const listRef = useRef(null);
     const inputRef = useRef(null);
     const [state, setState] = useState({
-        collection: new ListCollection([]),
         focused: false,
         higher: false,
         value: '',
         visible: false
     });
+    const collection = useRef(new ListCollection([]));
     const position = useRef(0);
+    const changeInternal = useRef(false);
+    const protectedValue = useRef();
     useEffect(() => {
         function onCloseSuggestions({ target }) {
-            if (!contentRef?.current?.contains(target)) {
+            !contentRef?.current?.contains(target) &&
                 setState((state) => ({ ...state, visible: false }));
-            }
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2097,26 +2086,60 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     useEffect(() => {
-        const content = contentRef.current;
-        const list = listRef.current;
         formControl?.touch();
         setState((state) => ({
             ...state,
-            higher: locationListCanTop(content, list)
+            higher: locationListCanTop(contentRef.current, listRef.current)
         }));
     }, [state.visible]);
     useEffect(() => {
-        setState((state) => ({
-            ...state,
-            collection: new ListCollection(suggestions)
-        }));
+        if (!changeInternal.current) {
+            changeInternal.current = false;
+            return;
+        }
+        refresh(collection.current, formControl?.value);
+    }, [formControl?.value]);
+    useEffect(() => {
+        collection.current = new ListCollection(suggestions);
+        refresh(collection.current, formControl?.value);
     }, [suggestions]);
+    function refresh(collection, state) {
+        if (!state) {
+            return refreshProtected(collection) ? undefined : setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        if (!refreshProtected(collection)) {
+            protectedValue.current = state;
+            setValue('');
+            setFormState(undefined);
+        }
+    }
+    function refreshProtected(collection) {
+        if (protectedValue.current) {
+            const element = collection.find(protectedValue.current);
+            if (element) {
+                formControl?.setValue(protectedValue.current);
+                protectedValue.current = undefined;
+                return true;
+            }
+        }
+        return false;
+    }
     function setFocused(focused) {
         setState((state) => ({ ...state, focused }));
     }
     function setValue(value) {
         setState((state) => ({ ...state, value }));
     }
+    function setFormState(value) {
+        if (formControl) {
+            changeInternal.current = true;
+            formControl.setValue(value);
+        }
+    }
     function setVisible(visible) {
         setState((state) => ({ ...state, visible }));
     }
@@ -2147,6 +2170,7 @@ function useListControl({ suggestions, formControl }) {
         navigationElement,
         navigationInput,
         setFocused,
+        setFormState,
         setValue,
         setVisible
     };
@@ -2163,51 +2187,13 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
         previous: null
     });
     const listControl = useListControl({ suggestions, formControl });
-    const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
-    const initializedState = useRef(false);
-    const initializedCollection = useRef(false);
-    const changeInternal = useRef(false);
+    const { inputRef, navigationElement, navigationInput, setFocused, setFormState, setValue, setVisible } = listControl;
     useEffect(() => {
         refreshCoincidences(pattern, true);
     }, [suggestions]);
     useEffect(() => {
         refreshCoincidences(pattern);
     }, [pattern]);
-    useEffect(() => {
-        if (!initializedState.current || !initializedCollection.current) {
-            initializedState.current = true;
-            return;
-        }
-        if (changeInternal.current) {
-            changeInternal.current = false;
-            return;
-        }
-        refresh(collection, formControl?.value);
-    }, [formControl?.value]);
-    useEffect(() => {
-        if (!initializedCollection.current || !initializedState.current) {
-            initializedCollection.current = true;
-            return;
-        }
-        refresh(collection, formControl?.value);
-    }, [collection]);
-    function refresh(collection, state) {
-        if (!state) {
-            return setValue('');
-        }
-        const element = collection.find(state);
-        if (element) {
-            return setValue(element.description);
-        }
-        setValue('');
-        setFormState(undefined);
-    }
-    function setFormState(value) {
-        if (formControl) {
-            changeInternal.current = true;
-            formControl.setValue(value);
-        }
-    }
     function onClickControl() {
         if (!disabled) {
             setVisible(true);
@@ -2237,9 +2223,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
         setVisible(false);
         setValue('');
         setFormState(undefined);
-        if (onValue) {
-            onValue(undefined);
-        }
+        onValue && onValue(undefined);
     }
     function onClickBackdrop() {
         setVisible(false);
@@ -2263,9 +2247,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
             setFormState(value);
             setValue(description);
         }
-        if (onValue) {
-            onValue(value);
-        }
+        onValue && onValue(value);
     }
     function refreshCoincidences(pattern, reboot = false) {
         const { collection, store } = createAutocompleteStore({
@@ -2350,19 +2332,16 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         formControl?.setValue(dateCheck);
     }, []);
     useEffect(() => {
-        if (itIsDefined(yearControl.value)) {
+        itIsDefined(yearControl.value) &&
             setValue(assignYearInDate(value, yearControl.value));
-        }
     }, [yearControl.value]);
     useEffect(() => {
-        if (itIsDefined(monthControl.value)) {
+        itIsDefined(monthControl.value) &&
             setValue(assignMonthInDate(value, monthControl.value));
-        }
     }, [monthControl.value]);
     useEffect(() => {
-        if (itIsDefined(dayControl.value)) {
+        itIsDefined(dayControl.value) &&
             setValue(assignDayInDate(value, dayControl.value));
-        }
     }, [dayControl.value]);
     function onVisibilityDay() {
         setVisibility('DAY');
@@ -2374,24 +2353,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         setVisibility('YEAR');
     }
     function onCancel() {
-        if (onListener) {
-            onListener({ type: PickerListenerType.Cancel });
-        }
+        onListener && onListener({ type: PickerListenerType.Cancel });
     }
     function onToday() {
         yearControl.setValue(today.getFullYear());
         dayControl.setValue(today.getDate());
         monthControl.setValue(today.getMonth());
         formControl?.setValue(today);
-        if (onListener) {
-            onListener({ type: PickerListenerType.Now, value: today });
-        }
+        onListener && onListener({ type: PickerListenerType.Now, value: today });
     }
     function onSelect() {
         formControl?.setValue(value);
-        if (onListener) {
-            onListener({ type: PickerListenerType.Select, value });
-        }
+        onListener && onListener({ type: PickerListenerType.Select, value });
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
@@ -2416,9 +2389,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     }, []);
     function onChange(value) {
         setValue(value);
-        if (onValue) {
-            onValue(value);
-        }
+        onValue && onValue(value);
     }
     function onClickInput() {
         setModalIsVisible(true);
@@ -2437,9 +2408,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
         ? 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 }) => {
-                        if (type !== PickerListenerType.Cancel) {
-                            onChange(value);
-                        }
+                        type !== PickerListenerType.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));
@@ -2469,9 +2438,7 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         });
     }, [monthControl.value]);
     useEffect(() => {
-        if (dayControl.value) {
-            setValue(dayControl.value);
-        }
+        dayControl.value && setValue(dayControl.value);
         setVisibility('DAY');
     }, [dayControl.value]);
     function onVisibilityDay() {
@@ -2484,15 +2451,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         setVisibility('YEAR');
     }
     function onCancel() {
-        if (onListener) {
-            onListener({ type: PickerListenerType.Cancel });
-        }
+        onListener && onListener({ type: PickerListenerType.Cancel });
     }
     function onSelect() {
         formControl?.setValue(value);
-        if (onListener) {
-            onListener({ type: PickerListenerType.Select, value });
-        }
+        onListener && onListener({ type: PickerListenerType.Select, value });
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
                     day: visibility === 'DAY',
@@ -2521,54 +2484,14 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
         }
     }
     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 }) => {
-                        if (value) {
-                            setValue(value);
-                        }
+                        value && setValue(value);
                         setModalIsVisible(false);
                     } }) })] }));
 }
 
 function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
-    const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
-    const initializedState = useRef(false);
-    const initializedCollection = useRef(false);
-    const changeInternal = useRef(false);
-    useEffect(() => {
-        if (!initializedState.current || !initializedCollection.current) {
-            initializedState.current = true;
-            return;
-        }
-        if (changeInternal.current) {
-            changeInternal.current = false;
-            return;
-        }
-        refresh(collection, formControl?.value);
-    }, [formControl?.value]);
-    useEffect(() => {
-        if (!initializedCollection.current || !initializedState.current) {
-            initializedCollection.current = true;
-            return;
-        }
-        refresh(collection, formControl?.value);
-    }, [collection]);
-    function refresh(collection, state) {
-        if (!state) {
-            return setValue('');
-        }
-        const element = collection.find(state);
-        if (element) {
-            return setValue(element.description);
-        }
-        setValue('');
-        setFormState(undefined);
-    }
-    function setFormState(value) {
-        if (formControl) {
-            changeInternal.current = true;
-            formControl.setValue(value);
-        }
-    }
+    const { inputRef, visible, navigationElement, navigationInput, setFocused, setFormState, setValue, setVisible } = listControl;
     function onFocusInput() {
         setFocused(true);
     }
@@ -2595,9 +2518,7 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     }
     function onClickAction() {
         setVisible(!visible);
-        if (!visible) {
-            inputRef?.current?.focus();
-        }
+        !visible && inputRef?.current?.focus();
     }
     function onClickBackdrop() {
         setVisible(false);
@@ -2622,9 +2543,7 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
             setFormState(value);
             setValue(description);
         }
-        if (onValue) {
-            onValue(value);
-        }
+        onValue && onValue(value);
     }
     return {
         listControl,