@rolster/react-components 19.4.4 → 19.4.6

package/dist/cjs/index.cjs

@@ -570,20 +570,17 @@ function RlsSkeleton({ rlsTheme }) {
 
 function RlsImage({ src, rlsTheme }) {
     const [srcIsComplet, setSrcIsComplet] = require$$0.useState(false);
-    const refSrc = require$$0.useRef(src);
+    const refImage = require$$0.useRef(null);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-image', { complet: srcIsComplet });
     }, [srcIsComplet]);
     require$$0.useEffect(() => {
-        if (refSrc.current !== src) {
-            setSrcIsComplet(false);
-            refSrc.current = src;
-        }
+        setSrcIsComplet(!!(src && refImage.current?.complete));
     }, [src]);
     const onLoad = require$$0.useCallback(() => {
         setSrcIsComplet(true);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { src: src, onLoad: onLoad })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { ref: refImage, src: src, onLoad: onLoad })] }));
 }
 
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
@@ -828,11 +825,15 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
         setVisible(() => false);
         automatic && onAction(action.value);
     }, [onAction, automatic]);
-    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: classNameList, children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "truncate", onClick: () => {
-                            onSelectAction(action);
-                        }, children: action.label }, index))) }) })] }));
+    const onClickAction = require$$0.useCallback(() => {
+        action && onAction(action.value);
+    }, [action, onAction]);
+    const onClickOption = require$$0.useCallback((event) => {
+        const index = Number(event.currentTarget.dataset.index);
+        const option = options[index];
+        option && onSelectAction(option);
+    }, [options, onSelectAction]);
+    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: onClickAction, 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: classNameList, children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "rls-truncate", "data-index": index, onClick: onClickOption, children: action.label }, index))) }) })] }));
 }
 
 function RlsContent({ children, identifier, rlsTheme }) {
@@ -1043,6 +1044,15 @@ const reactI18n = i18n.i18n({
     }
 });
 
+function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
+    const onClick = require$$0.useMemo(() => {
+        return onClickElement(element);
+    }, [element, onClickElement]);
+    const onKeyDown = require$$0.useMemo(() => {
+        return onKeydownElement(element);
+    }, [element, onKeydownElement]);
+    return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
+}
 function RlsFieldListSuggestions({ elements, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
     const [labels, setLabels] = require$$0.useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
@@ -1067,7 +1077,7 @@ function RlsFieldListSuggestions({ elements, disabled, higher, render, renderEmp
         searchControl?.onChange(event.target.value);
     }, [searchControl?.onChange]);
     const searching = searchControl?.searching ?? false;
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] })) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] })) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
 }
 
 function RlsFieldMoney(props) {
@@ -1295,8 +1305,7 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     const dateDay = require$$0.useMemo(() => date ?? new Date(), [date]);
     const [weeks, setWeeks] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value ?? dateDay.getDate());
-    const [headers, setHeaders] = require$$0.useState(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const [_, setI18nVersion] = require$$0.useState(0);
     const setDayValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
     }, [formControl]);
@@ -1306,12 +1315,9 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
     }, [setDayValue, onValue]);
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
-            setHeaders(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
+            setI18nVersion((value) => value + 1);
         });
     }, []);
-    require$$0.useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
-    }, [weeks, onSelect, disabled]);
     require$$0.useEffect(() => {
         const options = createPickerOptions();
         const day = components.verifyDayPicker(options);
@@ -1333,7 +1339,7 @@ function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, on
             maxDate
         };
     }, [dateDay, formControl?.value, value, month, year, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
 }
 
 function RlsPickerDayRangeHeaders() {
@@ -1364,8 +1370,7 @@ function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsT
     const sourceDate = require$$0.useRef(rangeDay.minDate);
     const [weeks, setWeeks] = require$$0.useState([]);
     const [range, setRange] = require$$0.useState(rangeDay);
-    const [headers, setHeaders] = require$$0.useState(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const [_, setI18nVersion] = require$$0.useState(0);
     const onSelect = require$$0.useCallback((value) => {
         const date = dates.assignDayInDate(dateDayRange, value);
         const range = dates.dateIsBefore(date, sourceDate.current)
@@ -1377,12 +1382,9 @@ function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsT
     }, [dateDayRange, formControl]);
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
-            setHeaders(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
+            setI18nVersion((value) => value + 1);
         });
     }, []);
-    require$$0.useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
-    }, [weeks, onSelect, disabled]);
     require$$0.useEffect(() => {
         setWeeks(components.createDayRangePicker({
             date: dateDayRange,
@@ -1392,7 +1394,7 @@ function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsT
             maxDate
         }));
     }, [dateDayRange, range, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [headers, component] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}), jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) })] }));
 }
 
 function RlsPickerMonthElement({ month, onSelect, disabled }) {
@@ -1421,7 +1423,6 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
     const dateMonth = require$$0.useMemo(() => date ?? new Date(), [date]);
     const [months, setMonths] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value ?? dateMonth.getMonth());
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
     const setMonthValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
     }, [formControl]);
@@ -1429,9 +1430,6 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
         setMonthValue(value);
         onValue?.(value);
     }, [setMonthValue, onValue]);
-    require$$0.useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [months, onSelect, disabled]);
     require$$0.useEffect(() => {
         const options = {
             date: dateMonth,
@@ -1457,7 +1455,7 @@ function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue
             ? formControl?.setValue(month)
             : setValue(formControl?.value ?? dateMonth.getMonth());
     }, [formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: component }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
 }
 
 function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
@@ -1542,7 +1540,6 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
     const dateYear = require$$0.useMemo(() => date ?? new Date(), [date]);
     const [value, setValue] = require$$0.useState(formControl?.value ?? dateYear.getFullYear());
     const [year, setYear] = require$$0.useState(formControl?.value ?? dateYear.getFullYear());
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
     const createPickerOptions = require$$0.useCallback(() => {
         return {
             date: dateYear,
@@ -1565,9 +1562,6 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
         const year = components.verifyYearPicker(options);
         year ? setYearValue(year) : setTemplate(components.createYearPicker(options));
     }, [dateYear, year, value, minDate, maxDate]);
-    require$$0.useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [template.years, onSelect, disabled]);
     require$$0.useEffect(() => {
         const year = components.verifyYearPicker(createPickerOptions());
         commons.valueIsDefined(year)
@@ -1580,7 +1574,7 @@ function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue,
     const onClickNext = require$$0.useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--prev", onClick: onClickPrev, disabled: !template.canPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--next", onClick: onClickNext, disabled: !template.canNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--prev", onClick: onClickPrev, disabled: !template.canPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--next", onClick: onClickNext, disabled: !template.canNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) })] }));
 }
 
 function calculateInitialValue(value, minValue, maxValue) {
@@ -2108,6 +2102,9 @@ function RlsFieldAutocompleteTemplate(props) {
             setListInputPlaceholder(reactI18n('listInputPlaceholder'));
         });
     }, []);
+    require$$0.useEffect(() => {
+        props.onInput?.(autocomplete.value);
+    }, [autocomplete.value, props.onInput]);
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2442,13 +2439,15 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     const yearControl = reactForms.useReactControl(_date.getFullYear());
     const dayControl = reactForms.useReactControl(_date.getDate());
     const monthControl = reactForms.useReactControl(_date.getMonth());
-    const [value, setValue] = require$$0.useState(_date);
     const [visibility, setVisibility] = require$$0.useState('DAY');
     const [labels, setLabels] = require$$0.useState({
         dateActionCancel: reactI18n('dateActionCancel'),
         dateActionSelect: reactI18n('dateActionSelect'),
         dateActionToday: reactI18n('dateActionToday')
     });
+    const value = require$$0.useMemo(() => {
+        return new Date(yearControl.value, monthControl.value, dayControl.value);
+    }, [yearControl.value, monthControl.value, dayControl.value]);
     const classNameComponent = require$$0.useMemo(() => {
         return renderClassStatus('rls-picker-date__component', {
             day: visibility === 'DAY',
@@ -2457,8 +2456,8 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         });
     }, [visibility]);
     const title = require$$0.useMemo(() => {
-        return dates.dateFormatTemplate(_date, DATE_FORMAT_TITLE);
-    }, [_date]);
+        return dates.dateFormatTemplate(value, DATE_FORMAT_TITLE);
+    }, [value]);
     const itIsDisabledToday = require$$0.useMemo(() => components.dateOutRange({
         date: today.current,
         maxDate,
@@ -2466,7 +2465,9 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     }), [maxDate, minDate]);
     require$$0.useEffect(() => {
         const date = components.verifyDateRange({ date: _date, minDate, maxDate });
-        setValue(date);
+        yearControl.setValue(date.getFullYear());
+        monthControl.setValue(date.getMonth());
+        dayControl.setValue(date.getDate());
         formControl?.setValue(date);
         return i18n.i18nSubscribe(() => {
             setLabels({
@@ -2476,9 +2477,6 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
             });
         });
     }, []);
-    require$$0.useEffect(() => {
-        setValue(new Date(yearControl.value, monthControl.value, dayControl.value));
-    }, [yearControl.value, monthControl.value, dayControl.value]);
     const onVisibilityDay = require$$0.useCallback(() => {
         setVisibility('DAY');
     }, []);
@@ -2502,10 +2500,10 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         formControl?.setValue(value);
         onListener?.({
             event: components.PickerListenerEvent.Select,
-            value
+            value: value
         });
     }, [formControl, value, onListener]);
-    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 }) })] }) }))] }));
+    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: value, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: value, 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: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
@@ -2578,13 +2576,24 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
     const yearControl = reactForms.useReactControl(_date.getFullYear());
     const monthControl = reactForms.useReactControl(_date.getMonth());
     const rangeControl = reactForms.useReactControl(_range);
-    const [value, setValue] = require$$0.useState(_range);
-    const [date, setDate] = require$$0.useState(_date);
     const [visibility, setVisibility] = require$$0.useState('DAY');
     const [labels, setLabels] = require$$0.useState({
         dateActionCancel: reactI18n('dateActionCancel'),
         dateActionSelect: reactI18n('dateActionSelect')
     });
+    const value = require$$0.useMemo(() => {
+        return rangeControl.value ?? _range;
+    }, [rangeControl.value, _range]);
+    const date = require$$0.useMemo(() => {
+        let value = _date;
+        if (commons.valueIsDefined(yearControl.value)) {
+            value = dates.assignYearInDate(value, yearControl.value);
+        }
+        if (commons.valueIsDefined(monthControl.value)) {
+            value = dates.assignMonthInDate(value, monthControl.value);
+        }
+        return value;
+    }, [_date, yearControl.value, monthControl.value]);
     const classNameComponent = require$$0.useMemo(() => {
         return renderClassStatus('rls-picker-date-range__component', {
             day: visibility === 'DAY',
@@ -2605,21 +2614,6 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         });
     }, []);
     require$$0.useEffect(() => {
-        setDate((date) => {
-            return commons.valueIsDefined(yearControl.value)
-                ? dates.assignYearInDate(date, yearControl.value)
-                : date;
-        });
-    }, [yearControl.value]);
-    require$$0.useEffect(() => {
-        setDate((date) => {
-            return commons.valueIsDefined(monthControl.value)
-                ? dates.assignMonthInDate(date, monthControl.value)
-                : date;
-        });
-    }, [monthControl.value]);
-    require$$0.useEffect(() => {
-        rangeControl.value && setValue(rangeControl.value);
         setVisibility('DAY');
     }, [rangeControl.value]);
     const onVisibilityDay = require$$0.useCallback(() => {