@rolster/react-components 19.4.0 → 19.4.5

package/dist/cjs/index.cjs

@@ -527,8 +527,8 @@ function useFormSingleSelectionController({ disabled, formControl, onValue, valu
     }, [formControl?.value]);
     const onSelect = require$$0.useCallback(() => {
         if (!disabled) {
-            formControl && formControl.setValue(value);
-            onValue && onValue(value);
+            formControl?.setValue(value);
+            onValue?.(value);
         }
     }, [formControl, value, onValue, disabled]);
     return { checked, onSelect };
@@ -546,7 +546,7 @@ function RlsButtonOption({ icon, children, disabled, formControl, identifier, on
     }, [checked]);
     const onAction = require$$0.useCallback(() => {
         onSelect();
-        onClick && onClick();
+        onClick?.();
     }, [onSelect, onClick]);
     return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onAction, disabled: disabled, children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), children] }));
 }
@@ -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 }) {
@@ -676,11 +673,11 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
         onValue?.(event.target.value);
     }, [formControl, onValue]);
     const _onKeyDown = require$$0.useCallback((event) => {
-        onKeyDown && onKeyDown(event);
-        event.key === 'Enter' && onEnter && onEnter();
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
     }, [onKeyDown, onEnter]);
     const _onKeyUp = require$$0.useCallback((event) => {
-        onKeyUp && onKeyUp(event);
+        onKeyUp?.(event);
     }, [onKeyUp]);
     const _onFocus = require$$0.useCallback(() => {
         formControl?.focus();
@@ -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 }) {
@@ -979,6 +980,106 @@ function RlsFieldDecimal(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
+function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
+    const inputRef = require$$0.useRef(null);
+    const disabled = require$$0.useMemo(() => formControl?.disabled || disabledProp, [formControl?.disabled, disabledProp]);
+    const className = require$$0.useMemo(() => renderClassStatus('rls-field-box', {
+        disabled,
+        error: formControl?.wrong,
+        focused: formControl?.focused && !disabled,
+        readonly: readOnly
+    }, 'rls-field-file'), [formControl?.focused, formControl?.wrong, readOnly, disabled]);
+    const currentFile = require$$0.useMemo(() => formControl?.value ?? value, [formControl?.value, value]);
+    const displayValue = require$$0.useMemo(() => {
+        return currentFile?.name ?? '';
+    }, [currentFile]);
+    const onClickAction = require$$0.useCallback((event) => {
+        if (currentFile) {
+            formControl?.setValue(undefined);
+            onValue?.(undefined);
+        }
+        else {
+            inputRef.current?.click();
+        }
+        event.stopPropagation();
+    }, [currentFile, formControl, onValue]);
+    const onChangeInput = require$$0.useCallback((event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            formControl?.setValue(file);
+            onValue?.(file);
+        }
+        event.target.value = '';
+    }, [formControl, onValue]);
+    const onClickControl = require$$0.useCallback(() => {
+        !readOnly && !disabled && inputRef.current?.click();
+    }, [readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach-2', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
+const reactI18n = i18n.i18n({
+    es: {
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        chooserImageActionCancel: 'Cancelar',
+        editorImageActionRestore: 'Restaurar',
+        editorImageActionSelect: 'Seleccionar',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
+    },
+    en: {
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        chooserImageActionCancel: 'Cancel',
+        editorImageActionRestore: 'Restore',
+        editorImageActionSelect: 'Select',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Enter keyword to filter...'
+    }
+});
+
+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'),
+        listEmptyTitle: reactI18n('listEmptyTitle')
+    });
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                listEmptyDescription: reactI18n('listEmptyDescription'),
+                listEmptyTitle: reactI18n('listEmptyTitle')
+            });
+        });
+    }, []);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-list__suggestions', {
+            disabled,
+            higher,
+            visible
+        });
+    }, [disabled, higher, visible]);
+    const onChangePattern = require$$0.useCallback((event) => {
+        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(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) {
     const { children, formControl, identifier, rlsTheme } = props;
     const disabled = require$$0.useMemo(() => {
@@ -1133,18 +1234,25 @@ function RlsNavbar({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("nav", { id: identifier, className: "rls-app__page__nav", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__content", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__backdrop" })] }));
 }
 
+function PageButton({ page, onSelect }) {
+    const className = require$$0.useMemo(() => renderClassStatus('rls-pagination__page', { active: page.active }), [page.active]);
+    const onClick = require$$0.useCallback(() => {
+        onSelect(page);
+    }, [page, onSelect]);
+    return (jsxRuntimeExports.jsx("button", { type: "button", className: className, onClick: onClick, children: page.label }));
+}
 function RlsPagination({ suggestions, count, filter, onPagination }) {
     const [template, setTemplate] = require$$0.useState();
     const controller = require$$0.useRef(undefined);
     const refreshTemplate = require$$0.useCallback((template, suggestions) => {
         const { firstPage, lastPage } = template;
-        onPagination && onPagination({ firstPage, lastPage, suggestions });
+        onPagination?.({ firstPage, lastPage, suggestions });
         setTemplate(template);
     }, [onPagination]);
     const refreshPagination = require$$0.useCallback((pagination) => {
         pagination &&
             refreshTemplate(pagination.template, pagination.page.collection);
-    }, []);
+    }, [refreshTemplate]);
     require$$0.useEffect(() => {
         const pagination = new components.PaginationController({
             suggestions,
@@ -1153,32 +1261,26 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
         });
         controller.current = pagination;
         refreshTemplate(pagination.template, pagination.page.collection);
-    }, [suggestions, count]);
+    }, [suggestions, count, refreshTemplate]);
     require$$0.useEffect(() => {
         refreshPagination(controller.current?.filtrable(filter));
-    }, [filter]);
+    }, [filter, refreshPagination]);
     const goToPagination = require$$0.useCallback((page) => {
         refreshPagination(controller.current?.goToPage(page));
-    }, []);
+    }, [refreshPagination]);
     const goFirstPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current?.goFirstPage());
-    }, []);
+    }, [refreshPagination]);
     const goPreviousPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current?.goPreviousPage());
-    }, []);
+    }, [refreshPagination]);
     const goNextPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current?.goNextPage());
-    }, []);
+    }, [refreshPagination]);
     const goLastPagination = require$$0.useCallback(() => {
         refreshPagination(controller.current?.goLastPage());
-    }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page, index) => {
-                            return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-pagination__page', {
-                                    active: page.active
-                                }), onClick: () => {
-                                    goToPagination(page);
-                                }, children: page.label }, index));
-                        }) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+    }, [refreshPagination]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page) => (jsxRuntimeExports.jsx(PageButton, { page: page, onSelect: goToPagination }, page.value))) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 
 function RlsPickerDayHeaders() {
@@ -1199,12 +1301,11 @@ function RlsPickerDayElement({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
-    const date = require$$0.useMemo(() => _date ?? new Date(), [_date]);
+function RlsPickerDay({ date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+    const dateDay = require$$0.useMemo(() => date ?? new Date(), [date]);
     const [weeks, setWeeks] = require$$0.useState([]);
-    const [value, setValue] = require$$0.useState(formControl?.value || date.getDate());
-    const [headers, setHeaders] = require$$0.useState(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const [value, setValue] = require$$0.useState(formControl?.value ?? dateDay.getDate());
+    const [_, setI18nVersion] = require$$0.useState(0);
     const setDayValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
     }, [formControl]);
@@ -1214,38 +1315,35 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
     }, [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);
         day ? setDayValue(day) : setWeeks(components.createDayPicker(options));
-    }, [date, month, year, value, minDate, maxDate]);
+    }, [dateDay, month, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
         const day = components.verifyDayPicker(createPickerOptions());
         day
             ? formControl?.setValue(day)
-            : setValue(formControl?.value || date.getDate());
+            : setValue(formControl?.value || dateDay.getDate());
     }, [formControl?.value]);
     const createPickerOptions = require$$0.useCallback(() => {
         return {
-            date,
+            date: dateDay,
             day: formControl?.value ?? value,
-            month: month ?? date.getMonth(),
-            year: year ?? date.getFullYear(),
+            month: month ?? dateDay.getMonth(),
+            year: year ?? dateDay.getFullYear(),
             minDate,
             maxDate
         };
-    }, [date, formControl?.value, value, month, year, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
+    }, [dateDay, formControl?.value, value, month, year, minDate, maxDate]);
+    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() {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: dates.DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: dates.DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("span", { className: "rls-picker-day__label", children: title }, index))) }));
 }
 function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     const className = require$$0.useMemo(() => {
@@ -1262,45 +1360,41 @@ function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day-range__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDate, rlsTheme }) {
-    const _range = require$$0.useMemo(() => {
+function RlsPickerDayRange({ date, disabled, formControl, maxDate, minDate, rlsTheme }) {
+    const rangeDay = require$$0.useMemo(() => {
         return formControl?.value ?? dates.DateRange.now();
     }, [formControl?.value]);
-    const date = require$$0.useMemo(() => {
-        return dates.normalizeMinTime(_date ?? _range.minDate);
-    }, [_date]);
-    const sourceDate = require$$0.useRef(_range.minDate);
+    const dateDayRange = require$$0.useMemo(() => {
+        return dates.normalizeMinTime(date ?? rangeDay.minDate);
+    }, [date, rangeDay]);
+    const sourceDate = require$$0.useRef(rangeDay.minDate);
     const [weeks, setWeeks] = require$$0.useState([]);
-    const [range, setRange] = require$$0.useState(_range);
-    const [headers, setHeaders] = require$$0.useState(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const [range, setRange] = require$$0.useState(rangeDay);
+    const [_, setI18nVersion] = require$$0.useState(0);
     const onSelect = require$$0.useCallback((value) => {
-        const _date = dates.assignDayInDate(date, value);
-        const range = dates.dateIsBefore(_date, sourceDate.current)
-            ? new dates.DateRange(sourceDate.current, _date)
-            : new dates.DateRange(_date, sourceDate.current);
-        sourceDate.current = _date;
+        const date = dates.assignDayInDate(dateDayRange, value);
+        const range = dates.dateIsBefore(date, sourceDate.current)
+            ? new dates.DateRange(sourceDate.current, date)
+            : new dates.DateRange(date, sourceDate.current);
+        sourceDate.current = date;
         setRange(range);
         formControl?.setValue(range);
-    }, [date, sourceDate.current, formControl]);
+    }, [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,
+            date: dateDayRange,
             range,
             sourceDate: sourceDate.current,
             minDate,
             maxDate
         }));
-    }, [date, range, minDate, maxDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [headers, component] }));
+    }, [dateDayRange, range, minDate, maxDate]);
+    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 }) {
@@ -1325,11 +1419,10 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
     }, [month.value, month.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-month__span", children: label }) }));
 }
-function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
-    const date = require$$0.useMemo(() => _date || new Date(), [_date]);
+function RlsPickerMonth({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+    const dateMonth = require$$0.useMemo(() => date ?? new Date(), [date]);
     const [months, setMonths] = require$$0.useState([]);
-    const [value, setValue] = require$$0.useState(formControl?.value ?? date.getMonth());
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const [value, setValue] = require$$0.useState(formControl?.value ?? dateMonth.getMonth());
     const setMonthValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
     }, [formControl]);
@@ -1337,14 +1430,11 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
         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,
+            date: dateMonth,
             month: formControl?.value ?? value,
-            year: year ?? date.getFullYear(),
+            year: year ?? dateMonth.getFullYear(),
             minDate,
             maxDate
         };
@@ -1352,20 +1442,20 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
         commons.valueIsDefined(month)
             ? setMonthValue(month)
             : setMonths(components.createMonthPicker(options));
-    }, [date, year, value, minDate, maxDate]);
+    }, [dateMonth, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
         const month = components.verifyMonthPicker({
-            date,
+            date: dateMonth,
             month: formControl?.value ?? value,
-            year: year ?? date.getFullYear(),
+            year: year ?? dateMonth.getFullYear(),
             minDate,
             maxDate
         });
         commons.valueIsDefined(month)
             ? formControl?.setValue(month)
-            : setValue(formControl?.value ?? date.getMonth());
+            : 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 }) {
@@ -1399,10 +1489,10 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onMonth = require$$0.useCallback(() => {
-        onClick && onClick('month');
+        onClick?.('month');
     }, [onClick]);
     const onYear = require$$0.useCallback(() => {
-        onClick && onClick('year');
+        onClick?.('year');
     }, [onClick]);
     const onPreviousYear = require$$0.useCallback(() => {
         commons.valueIsDefined(yearControl.value) &&
@@ -1446,19 +1536,18 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
     }, [year.value, year.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__span", children: year.value || '????' }) }));
 }
-function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
-    const date = require$$0.useMemo(() => _date || new Date(), [_date]);
-    const [value, setValue] = require$$0.useState(formControl?.value ?? date.getFullYear());
-    const [year, setYear] = require$$0.useState(formControl?.value ?? date.getFullYear());
-    const [component, setComponent] = require$$0.useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+function RlsPickerYear({ date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
+    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 createPickerOptions = require$$0.useCallback(() => {
         return {
-            date,
+            date: dateYear,
             year,
             minDate,
             maxDate
         };
-    }, [date, year, minDate, maxDate]);
+    }, [dateYear, year, minDate, maxDate]);
     const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
     const setYearValue = require$$0.useCallback((value) => {
         formControl ? formControl.setValue(value) : setValue(value);
@@ -1472,15 +1561,12 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
         const options = createPickerOptions(); // YearPickerProps
         const year = components.verifyYearPicker(options);
         year ? setYearValue(year) : setTemplate(components.createYearPicker(options));
-    }, [date, 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]);
+    }, [dateYear, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
         const year = components.verifyYearPicker(createPickerOptions());
         commons.valueIsDefined(year)
             ? formControl?.setValue(year)
-            : setValue(formControl?.value ?? date.getFullYear());
+            : setValue(formControl?.value ?? dateYear.getFullYear());
     }, [formControl?.value]);
     const onClickPrev = require$$0.useCallback(() => {
         setYear((year) => year - 8);
@@ -1488,7 +1574,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     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) {
@@ -1499,51 +1585,51 @@ function calculateInitialRate(value, minValue, maxValue) {
     const rateValue = value - minValue;
     return Math.ceil((rateValue / rateMax) * 100);
 }
-function RlsSlider(props) {
-    const minValue = require$$0.useMemo(() => {
-        return props.minValue ?? 0;
-    }, [props.minValue]);
-    const maxValue = require$$0.useMemo(() => {
-        return props.maxValue ?? 100;
-    }, [props.maxValue]);
-    const [value, setValue] = require$$0.useState(calculateInitialValue(props.formControl?.value ?? props.value ?? 0, minValue, maxValue));
-    const [rate, setRate] = require$$0.useState(calculateInitialRate(value, minValue, maxValue));
+function RlsSlider({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, value }) {
+    const minValueSlider = require$$0.useMemo(() => {
+        return minValue ?? 0;
+    }, [minValue]);
+    const maxValueSlider = require$$0.useMemo(() => {
+        return maxValue ?? 100;
+    }, [maxValue]);
+    const [valueSlider, setValue] = require$$0.useState(calculateInitialValue(formControl?.value ?? value ?? 0, minValueSlider, maxValueSlider));
+    const [rate, setRate] = require$$0.useState(calculateInitialRate(valueSlider, minValueSlider, maxValueSlider));
     const refComponent = require$$0.useRef(null);
     const refTrack = require$$0.useRef(null);
     const refTrackOn = require$$0.useRef(null);
     const refThumb = require$$0.useRef(null);
-    const className = require$$0.useMemo(() => {
+    const classNameSlider = require$$0.useMemo(() => {
         return renderClassStatus('rls-slider', {
-            complet: value === maxValue,
-            disabled: props.disabled,
-            empty: value === minValue
-        });
-    }, [value, minValue, maxValue, props.disabled]);
+            complet: valueSlider === maxValueSlider,
+            disabled: disabled,
+            empty: valueSlider === minValueSlider
+        }, className);
+    }, [valueSlider, minValueSlider, maxValueSlider, disabled]);
     require$$0.useEffect(() => {
-        const valueInitial = props.formControl?.value ?? props.value ?? 0;
+        const valueInitial = formControl?.value ?? value ?? 0;
         refThumb.current.style.left = `${rate}%`;
         refTrackOn.current.style.width = `${rate}%`;
-        if (valueInitial !== value) {
-            props.formControl?.setValue(value);
-            props.onValue && props.onValue(value);
+        if (valueInitial !== valueSlider) {
+            formControl?.setValue(valueSlider);
+            onValue?.(valueSlider);
         }
     }, []);
     const calculateValueWithRate = require$$0.useCallback((rate) => {
-        const value = Math.ceil(((maxValue - minValue) * rate) / 100);
+        const value = Math.ceil(((maxValueSlider - minValueSlider) * rate) / 100);
         refThumb.current.style.left = `${rate}%`;
         refTrackOn.current.style.width = `${rate}%`;
-        const sliderValue = value + minValue;
+        const sliderValue = value + minValueSlider;
         setRate(rate);
         setValue(sliderValue);
-        props.formControl?.setValue(sliderValue);
-        props.onValue && props.onValue(sliderValue);
-    }, [minValue, maxValue, props.formControl, props.onValue]);
+        formControl?.setValue(sliderValue);
+        onValue?.(sliderValue);
+    }, [minValueSlider, maxValueSlider, formControl, onValue]);
     const onClickTrack = require$$0.useCallback((event) => {
         const { left, width } = refTrack.current.getBoundingClientRect();
         const rate = Math.ceil(((event.clientX - left) / width) * 100);
         calculateValueWithRate(rate);
-    }, [minValue, maxValue]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, children: [props.children && (jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: props.children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [props.prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: props.prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
+    }, [minValueSlider, maxValueSlider]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: children }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
 }
 
 function RlsTab({ onSelect, tab, value }) {
@@ -1595,33 +1681,6 @@ function RlsCard({ children, className, outline, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: classNameCard, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
-const reactI18n = i18n.i18n({
-    es: {
-        confirmationActionApproved: 'Aceptar',
-        dateActionCancel: 'Cancelar',
-        dateActionSelect: 'Establecer',
-        dateActionToday: 'Hoy',
-        chooserImageActionCancel: 'Cancelar',
-        editorImageActionRestore: 'Restaurar',
-        editorImageActionSelect: 'Seleccionar',
-        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
-        listEmptyTitle: 'Selección no disponible',
-        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
-    },
-    en: {
-        confirmationActionApproved: 'Approved',
-        dateActionCancel: 'Cancel',
-        dateActionSelect: 'Select',
-        dateActionToday: 'Today',
-        chooserImageActionCancel: 'Cancel',
-        editorImageActionRestore: 'Restore',
-        editorImageActionSelect: 'Select',
-        listEmptyDescription: 'Sorry, there are currently no items in the list',
-        listEmptyTitle: 'Selection not available',
-        listInputPlaceholder: 'Enter keyword to filter...'
-    }
-});
-
 class ConfirmationResult extends commons.SealedPartial {
     static approved() {
         return new ConfirmationResult('approved');
@@ -1789,7 +1848,7 @@ function useListController(props) {
     const [state, refreshState] = require$$0.useState({
         focused: false,
         higher: false,
-        modalIsVisible: false,
+        listIsVisible: false,
         value: ''
     });
     const changeValueInternal = require$$0.useRef(false);
@@ -1798,7 +1857,7 @@ function useListController(props) {
     require$$0.useEffect(() => {
         function onCloseSuggestions({ target }) {
             !refContent?.current?.contains(target) &&
-                refreshState((state) => ({ ...state, modalIsVisible: false }));
+                refreshState((state) => ({ ...state, listIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -1806,13 +1865,13 @@ function useListController(props) {
         };
     }, []);
     require$$0.useEffect(() => {
-        if (!listIsOpen.current && state.modalIsVisible) {
+        if (!listIsOpen.current && state.listIsVisible) {
             listIsOpen.current = true;
         }
-        if (listIsOpen.current && !state.modalIsVisible) {
+        if (listIsOpen.current && !state.listIsVisible) {
             formControl?.touch();
         }
-    }, [state.modalIsVisible]);
+    }, [state.listIsVisible]);
     require$$0.useEffect(() => {
         setCollection(new components.ListCollection(suggestions, reference));
     }, [suggestions]);
@@ -1844,7 +1903,7 @@ function useListController(props) {
     }, [collection, formControl?.value]);
     const setState = require$$0.useCallback((state) => {
         const minHeightList = calculateMinHeightList(count, lineHeight ?? 48);
-        const _state = state.modalIsVisible
+        const _state = state.listIsVisible
             ? {
                 ...state,
                 higher: components.locationListCanTop(refContent.current, refList.current, minHeightList)
@@ -1863,7 +1922,7 @@ function useListController(props) {
             : formControl?.setValue(element?.value);
     }, [formControl]);
     const navigationInput = require$$0.useCallback((event) => {
-        if (state.modalIsVisible) {
+        if (state.listIsVisible) {
             const _position = components.navigationListFromInput({
                 content: refContent.current,
                 event: event,
@@ -1871,7 +1930,7 @@ function useListController(props) {
             });
             position.current = _position ?? 0;
         }
-    }, [state.modalIsVisible]);
+    }, [state.listIsVisible]);
     const navigationElement = require$$0.useCallback((event) => {
         position.current = components.navigationListFromElement({
             content: refContent.current,
@@ -1880,7 +1939,7 @@ function useListController(props) {
             list: refList.current,
             position: position.current
         });
-    }, [state.modalIsVisible]);
+    }, [state.listIsVisible]);
     return {
         ...state,
         navigationElement,
@@ -1908,6 +1967,9 @@ function useFieldAutocomplete(props) {
         pattern: '',
         previous: null
     });
+    const focusTimeoutId = require$$0.useRef(undefined);
+    const rebootIsRequired = require$$0.useRef(true);
+    const prevSuggestions = require$$0.useRef(props.suggestions);
     const refreshCoincidences = require$$0.useCallback((suggestions, pattern, reboot = false) => {
         const { collection, store } = components.createAutocompleteStore({
             pattern,
@@ -1921,14 +1983,14 @@ function useFieldAutocomplete(props) {
         count.current = coincidences.length;
     }, []);
     require$$0.useEffect(() => {
-        refreshCoincidences(props.suggestions, pattern, true);
-    }, [props.suggestions]);
-    require$$0.useEffect(() => {
-        refreshCoincidences(props.suggestions, pattern);
-    }, [pattern]);
+        const reboot = rebootIsRequired.current || prevSuggestions.current !== props.suggestions;
+        rebootIsRequired.current = false;
+        prevSuggestions.current = props.suggestions;
+        refreshCoincidences(props.suggestions, pattern, reboot);
+    }, [props.suggestions, pattern]);
     require$$0.useEffect(() => {
         props.disabled && controller.setState({ focused: false });
-    }, [props.disabled]);
+    }, [props.disabled, controller.setState]);
     const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -1939,7 +2001,7 @@ function useFieldAutocomplete(props) {
         switch (event.code) {
             case 'Escape':
             case 'Tab':
-                controller.setState({ modalIsVisible: false });
+                controller.setState({ listIsVisible: false });
                 break;
             default:
                 controller.navigationInput(event);
@@ -1948,17 +2010,23 @@ function useFieldAutocomplete(props) {
     }, [controller.setState, controller.navigationInput]);
     const onClickControl = require$$0.useCallback(() => {
         if (!props.readOnly) {
-            controller.setState({ modalIsVisible: true });
-            setTimeout(() => {
+            controller.setState({ listIsVisible: true });
+            clearTimeout(focusTimeoutId.current);
+            focusTimeoutId.current = setTimeout(() => {
                 controller.refInput?.current?.focus();
             }, DURATION_ANIMATION$1);
         }
     }, [controller.setState, props.readOnly]);
+    require$$0.useEffect(() => {
+        return () => {
+            clearTimeout(focusTimeoutId.current);
+        };
+    }, []);
     const onClickAction = require$$0.useCallback(() => {
         if (controller.value) {
-            controller.setState({ modalIsVisible: false });
+            controller.setState({ listIsVisible: false });
             controller.setFormValue(undefined);
-            props.onValue && props.onValue(props.value);
+            props.onValue?.(props.value);
         }
         else {
             onClickControl();
@@ -1967,10 +2035,12 @@ function useFieldAutocomplete(props) {
         controller.value,
         controller.setState,
         controller.setFormValue,
-        props.onValue
+        props.onValue,
+        props.value,
+        onClickControl
     ]);
     const onClickBackdrop = require$$0.useCallback(() => {
-        controller.setState({ modalIsVisible: false });
+        controller.setState({ listIsVisible: false });
     }, [controller.setState]);
     const onChange = require$$0.useCallback((element) => {
         if (props.onSelect) {
@@ -1984,9 +2054,9 @@ function useFieldAutocomplete(props) {
             controller.refInput?.current?.focus();
         }
         else {
-            controller.setState({ modalIsVisible: false });
+            controller.setState({ listIsVisible: false });
         }
-        props.onValue && props.onValue(element.value);
+        props.onValue?.(element.value);
     }, [
         controller.setState,
         controller.setFormValue,
@@ -2026,18 +2096,10 @@ function useFieldAutocomplete(props) {
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
     const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
-    const [labels, setLabels] = require$$0.useState({
-        listEmptyDescription: reactI18n('listEmptyDescription'),
-        listEmptyTitle: reactI18n('listEmptyTitle'),
-        listInputPlaceholder: reactI18n('listInputPlaceholder')
-    });
+    const [listInputPlaceholder, setListInputPlaceholder] = require$$0.useState(reactI18n('listInputPlaceholder'));
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
-            setLabels({
-                listEmptyDescription: reactI18n('listEmptyDescription'),
-                listEmptyTitle: reactI18n('listEmptyTitle'),
-                listInputPlaceholder: reactI18n('listInputPlaceholder')
-            });
+            setListInputPlaceholder(reactI18n('listInputPlaceholder'));
         });
     }, []);
     const disabled = require$$0.useMemo(() => {
@@ -2059,24 +2121,36 @@ function RlsFieldAutocompleteTemplate(props) {
         props.readOnly,
         disabled
     ]);
-    const classNameSuggestions = require$$0.useMemo(() => {
-        return renderClassStatus('rls-field-list__suggestions', {
-            disabled,
-            higher: autocomplete.higher,
-            visible: autocomplete.modalIsVisible
-        });
-    }, [autocomplete.higher, autocomplete.modalIsVisible, disabled]);
-    const onChangePattern = require$$0.useCallback((event) => {
-        autocomplete.setPattern(event.target.value);
-    }, [autocomplete.setPattern]);
     const onClickPattern = require$$0.useCallback(() => {
-        onSearch && onSearch(autocomplete.pattern);
+        onSearch?.(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
     const onKeyDownPattern = require$$0.useCallback((event) => {
-        event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
+        event.key === 'Enter' && onSearch?.(autocomplete.pattern);
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, 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-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
+    const searchControl = require$$0.useMemo(() => ({
+        pattern: autocomplete.pattern,
+        placeholder: listInputPlaceholder,
+        searching,
+        refInput: autocomplete.refInput,
+        onChange: autocomplete.setPattern,
+        onFocus: autocomplete.onFocusInput,
+        onBlur: autocomplete.onBlurInput,
+        onKeyDown: onKeyDownPattern,
+        onSearch: onSearch ? onClickPattern : undefined
+    }), [
+        autocomplete.pattern,
+        autocomplete.refInput,
+        autocomplete.setPattern,
+        autocomplete.onFocusInput,
+        autocomplete.onBlurInput,
+        listInputPlaceholder,
+        searching,
+        onKeyDownPattern,
+        onClickPattern,
+        onSearch
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, 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-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
 }
 function RlsFieldAutocomplete(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -2347,7 +2421,7 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         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: 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 }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "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-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-clock__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}';
@@ -2362,13 +2436,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',
@@ -2377,16 +2453,18 @@ 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,
         minDate
-    }), [today.current, maxDate, minDate]);
+    }), [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({
@@ -2396,9 +2474,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');
     }, []);
@@ -2422,10 +2497,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 }) {
@@ -2448,7 +2523,7 @@ function RlsFieldDate({ children, date, disabled: disabledProps, formControl, fo
         return {
             icon: dateValue ? 'trash-2' : 'calendar',
             label: dateValue
-                ? dates.dateFormatTemplate(dateValue, format || DATE_FORMAT)
+                ? dates.dateFormatTemplate(dateValue, format ?? DATE_FORMAT)
                 : ''
         };
     }, [dateValue, format]);
@@ -2498,13 +2573,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',
@@ -2525,21 +2611,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(() => {
@@ -2549,11 +2620,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
     }, []);
     const onCancel = require$$0.useCallback(() => {
-        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
     }, [onListener]);
     const onSelect = require$$0.useCallback(() => {
         formControl?.setValue(value);
-        onListener && onListener({ event: components.PickerListenerEvent.Select, value });
+        onListener?.({ event: components.PickerListenerEvent.Select, value });
     }, [formControl, value, onListener]);
     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 }) })] }) })] }));
 }
@@ -2624,17 +2695,17 @@ function useFieldSelect(props) {
         controller.setState({ focused: false });
     }, [controller.setState]);
     const onClickInput = require$$0.useCallback(() => {
-        !props.readOnly && controller.setState({ modalIsVisible: true });
+        !props.readOnly && controller.setState({ listIsVisible: true });
     }, [controller.setState, props.readOnly]);
     const onKeydownInput = require$$0.useCallback((event) => {
         switch (event.code) {
             case 'Space':
             case 'Enter':
-                controller.setState({ modalIsVisible: true });
+                controller.setState({ listIsVisible: true });
                 break;
             case 'Escape':
             case 'Tab':
-                controller.setState({ modalIsVisible: false });
+                controller.setState({ listIsVisible: false });
                 break;
             default:
                 controller.navigationInput(event);
@@ -2644,17 +2715,17 @@ function useFieldSelect(props) {
     const onClickAction = require$$0.useCallback(() => {
         const removable = !props.unremovable && !!controller.value;
         if (removable) {
-            controller.setState({ modalIsVisible: false });
+            controller.setState({ listIsVisible: false });
             controller.setFormValue(undefined);
-            props.onValue && props.onValue(props.value);
+            props.onValue?.(props.value);
         }
         else {
-            const modalIsVisible = !controller.modalIsVisible;
-            controller.setState({ modalIsVisible });
-            modalIsVisible && controller.refInput?.current?.focus();
+            const listIsVisible = !controller.listIsVisible;
+            controller.setState({ listIsVisible });
+            listIsVisible && controller.refInput?.current?.focus();
         }
     }, [
-        controller.modalIsVisible,
+        controller.listIsVisible,
         controller.value,
         controller.setState,
         controller.setFormValue,
@@ -2662,19 +2733,19 @@ function useFieldSelect(props) {
         props.onValue
     ]);
     const onClickBackdrop = require$$0.useCallback(() => {
-        controller.setState({ modalIsVisible: false });
+        controller.setState({ listIsVisible: false });
     }, [controller.setState]);
     const onChange = require$$0.useCallback((element) => {
         !props.disabled && controller.refInput?.current?.focus();
         if (props.onSelect) {
-            controller.setState({ modalIsVisible: false });
+            controller.setState({ listIsVisible: false });
             element.value && props.onSelect(element.value);
         }
         else {
             controller.setFormValue(element);
-            controller.setState({ modalIsVisible: false });
+            controller.setState({ listIsVisible: false });
         }
-        props.onValue && props.onValue(element.value);
+        props.onValue?.(element.value);
     }, [
         controller.setState,
         controller.setFormValue,
@@ -2710,18 +2781,6 @@ function useFieldSelect(props) {
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
     const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
-    const [labels, setLabels] = require$$0.useState({
-        listEmptyDescription: reactI18n('listEmptyDescription'),
-        listEmptyTitle: reactI18n('listEmptyTitle')
-    });
-    require$$0.useEffect(() => {
-        return i18n.i18nSubscribe(() => {
-            setLabels({
-                listEmptyDescription: reactI18n('listEmptyDescription'),
-                listEmptyTitle: reactI18n('listEmptyTitle')
-            });
-        });
-    }, []);
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2739,14 +2798,7 @@ function RlsFieldSelectTemplate(props) {
         props.readOnly,
         disabled
     ]);
-    const classNameSuggestions = require$$0.useMemo(() => {
-        return renderClassStatus('rls-field-list__suggestions', {
-            disabled,
-            higher: select.higher,
-            visible: select.modalIsVisible
-        });
-    }, [select.modalIsVisible, select.higher, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, 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", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, 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", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
 }
 function RlsFieldSelect(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -2806,7 +2858,7 @@ function useRelocationOnComponent({ container, element, onDrag }) {
         const clientY = getClientY(positionY);
         element.current.style.top = `${clientY}px`;
         element.current.style.left = `${clientX}px`;
-        onDrag && onDrag();
+        onDrag?.();
     }, []);
     require$$0.useEffect(() => {
         const mousedown = (event) => {
@@ -3081,7 +3133,7 @@ function RlsImageEditor(props) {
                         base64: reader.result,
                         blob
                     };
-                    props.onValue && props.onValue(value);
+                    props.onValue?.(value);
                     props.formControl?.setValue(value);
                 };
             }
@@ -3176,7 +3228,7 @@ function RlsImageChooser(props) {
     const [src, setSrc] = require$$0.useState();
     const onValue = require$$0.useCallback((image) => {
         setSrc(image.base64);
-        props.onValue && props.onValue(image);
+        props.onValue?.(image);
     }, [props.onValue]);
     const controller = useImageEditorController({ ...props, onValue });
     require$$0.useEffect(() => {
@@ -3190,7 +3242,7 @@ function RlsModalSheet({ children, className, onAutoClose, visible, rlsTheme })
         return renderClassStatus('rls-modal-sheet', { visible }, className);
     }, [className, visible]);
     const onClickBackdrop = require$$0.useCallback(() => {
-        onAutoClose && onAutoClose();
+        onAutoClose?.();
     }, [onAutoClose]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
@@ -3410,6 +3462,8 @@ exports.RlsFieldClock = RlsFieldClock;
 exports.RlsFieldDate = RlsFieldDate;
 exports.RlsFieldDateRange = RlsFieldDateRange;
 exports.RlsFieldDecimal = RlsFieldDecimal;
+exports.RlsFieldFile = RlsFieldFile;
+exports.RlsFieldListSuggestions = RlsFieldListSuggestions;
 exports.RlsFieldMoney = RlsFieldMoney;
 exports.RlsFieldNumber = RlsFieldNumber;
 exports.RlsFieldPassword = RlsFieldPassword;