@rolster/react-components 19.0.2 → 19.0.3

package/dist/es/assets/{index-DEldF_Je.css → index--qtFLq_w.css}

@@ -2808,6 +2808,7 @@
   --rlc-modal-max-width: 150rem;
   --rlc-picker-clock-radius: var(--rls-sizing-x4);
   --rlc-picker-clock-background: var(--rls-app-color-050);
+  --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
 } /*# sourceMappingURL=FieldClock.css.map */
 
 .rls-picker-date {

package/dist/es/index.js

@@ -599,7 +599,7 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
             ? parseFloat((+valueInput).toFixed(decimals))
             : valueInput;
         changeIsInternal.current = true;
-        onValue && onValue(value);
+        onValue?.(value);
         setValueInput(valueInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
@@ -638,7 +638,7 @@ function RlsInputDecimal(props) {
     const onValueInput = useCallback((value) => {
         const valueDecimal = BigDecimal.create(value);
         formControl ? formControl.setValue(valueDecimal) : setValueInput(value);
-        onValue && onValue(valueDecimal);
+        onValue?.(valueDecimal);
     }, [formControl, onValue]);
     const decimalProps = { ...props, formControl: undefined };
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
@@ -649,7 +649,7 @@ function RlsInputMoney(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
@@ -659,7 +659,7 @@ function RlsInputNumber(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
@@ -668,7 +668,7 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     const [focused, setFocused] = useState(false);
     const _onChange = useCallback((event) => {
         formControl?.setValue(event.target.value);
-        onValue && onValue(event.target.value);
+        onValue?.(event.target.value);
     }, [formControl, onValue]);
     const _onKeyDown = useCallback((event) => {
         onKeyDown && onKeyDown(event);
@@ -699,7 +699,7 @@ function RlsInputPercentage(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
 }
@@ -720,7 +720,7 @@ function RlsInputText(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
@@ -1205,7 +1205,7 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setDayValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setDayValue, onValue]);
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -1330,7 +1330,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setMonthValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setMonthValue, onValue]);
     useEffect(() => {
         setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
@@ -1461,7 +1461,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setYearValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setYearValue, onValue]);
     useEffect(() => {
         const options = createPickerOptions(); // YearPickerProps
@@ -1557,7 +1557,7 @@ function RlsTabs({ tabs, onValue, rlsTheme }) {
     const [value, setValue] = useState();
     const onSelect = useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     useEffect(() => {
         const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
@@ -2117,6 +2117,7 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
     const [hour, setHour] = useState(zoneIsPM ? timeInitial.hour - 12 : timeInitial.hour);
     const [minute, setMinute] = useState(timeInitial.minute);
     const [selectionIsHours, setSelectionIsHours] = useState(true);
+    const changeIsInternal = useRef(true);
     const selectionIsActive = useRef(false);
     const radianUnit = useMemo(() => {
         return Math.PI / (selectionIsHours ? 6 : 30);
@@ -2164,6 +2165,15 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
     useEffect(() => {
         selectionIsHours ? refreshClockHour() : refreshClockMinute();
     }, [selectionIsHours]);
+    useEffect(() => {
+        if (!changeIsInternal.current && formControl?.value) {
+            const zoneIsPM = formControl.value.hour >= 12;
+            setZoneIsPM(zoneIsPM);
+            setHour(zoneIsPM ? formControl.value.hour - 12 : formControl.value.hour);
+            setMinute(formControl.value.minute);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
     const refreshComponent = useCallback((clientX, clientY) => {
         const rectangle = plateElement.current.getBoundingClientRect();
         const centerX = rectangle.left + rectangle.width / 2;
@@ -2236,6 +2246,7 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
     }, [onListener]);
     const onCurrentTime = useCallback(() => {
         const currentTime = Time.now();
+        changeIsInternal.current = true;
         formControl?.setValue(currentTime);
         setHour(currentTime.hour);
         setMinute(currentTime.minute);
@@ -2253,6 +2264,7 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
                 ? 0
                 : hour;
         const timeValue = new Time(hourValue, minute);
+        changeIsInternal.current = true;
         formControl?.setValue(timeValue);
         onListener?.({
             event: PickerListenerEvent.Select,
@@ -2266,24 +2278,27 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
                             }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
 }
 
-function RlsFieldClock({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+function RlsFieldClock({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
-    const _disabled = useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = useMemo(() => {
+    }, [disabled, readOnly]);
+    const timeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'timer',
-            valueInput: value?.normalizeMeridiemFormat || ''
+            icon: timeValue ? 'trash-2' : 'timer',
+            valueInput: timeValue?.normalizeMeridiemFormat || ''
         };
-    }, [value]);
+    }, [timeValue]);
     const onClickInput = useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
@@ -2292,7 +2307,7 @@ function RlsFieldClock({ children, disabled, formControl, identifier, msgErrorDi
         onValue?.(value);
     }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (value) {
+        if (timeValue) {
             formControl?.setValue(valueInitial);
             formControl?.touch();
             onChange(valueInitial);
@@ -2300,13 +2315,13 @@ function RlsFieldClock({ children, disabled, formControl, identifier, msgErrorDi
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, valueInitial, onChange]);
+    }, [timeValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
         event !== PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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 }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: _disabled, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
 }
 
 const DATE_FORMAT = '{dd}/{mx}/{yy}';
@@ -2387,43 +2402,48 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
-function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = useRef(new Date()); // Initial current date in component
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
-    const _disabled = useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = useMemo(() => {
+    }, [disabled, readOnly]);
+    const dateValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'calendar',
-            valueInput: value ? dateFormatTemplate(value, format || DATE_FORMAT) : ''
+            icon: dateValue ? 'trash-2' : 'calendar',
+            label: dateValue
+                ? dateFormatTemplate(dateValue, format || DATE_FORMAT)
+                : ''
         };
-    }, [value]);
+    }, [dateValue, format]);
     useEffect(() => {
-        const _date = verifyDateRange({
+        const dateSecure = verifyDateRange({
             date: formControl?.value ?? date ?? today.current,
             minDate,
             maxDate
         });
-        setValue(_date);
-        formControl?.setValue(_date);
+        setValue(dateSecure);
+        formControl?.setValue(dateSecure);
     }, []);
     const onClickInput = useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
     const onChange = useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (value) {
+        if (dateValue) {
             formControl?.setValue(valueInitial);
             formControl?.touch();
             onChange(valueInitial);
@@ -2431,13 +2451,13 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, valueInitial, onChange]);
+    }, [dateValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
         event !== PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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 }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -2512,48 +2532,51 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
     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(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, 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: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
-    const currentDate = useMemo(() => _date ?? new Date(), [_date]);
-    const [value, setValue] = useState(formControl?.value || _value);
+function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const currentDate = useMemo(() => date ?? new Date(), [date]);
+    const [value, setValue] = useState(formControl?.value || valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
-    const _disabled = useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = useMemo(() => {
+    }, [disabled, readOnly]);
+    const dateRangeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'calendar',
-            valueInput: value ? rangeFormatTemplate(value) : ''
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
         };
-    }, [value]);
+    }, [dateRangeValue]);
     const onClickInput = useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
     const onChange = useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (value) {
-            formControl?.setValue(_value);
+        if (dateRangeValue) {
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
         event !== PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {