@rolster/react-components 18.21.45 → 18.21.46

package/dist/cjs/index.js

@@ -1968,7 +1968,10 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
                 }) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), 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 RlsPickerDayItem({ day, onSelect, disabled }) {
+function RlsPickerDayHeaders() {
+    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))) }));
+}
+function RlsPickerDayElement({ day, onSelect, disabled }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-picker-day__element', {
             disabled: day.disabled || disabled,
@@ -1990,23 +1993,27 @@ function RlsPickerDayItem({ 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 RlsPickerDayHeaders() {
-    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))) }));
-}
 function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
     const date = 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 setDayValue = require$$0.useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = require$$0.useCallback((value) => {
+        setDayValue(value);
+        onValue && onValue(value);
+    }, [setDayValue, onValue]);
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
             setHeaders(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
         });
     }, []);
     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(RlsPickerDayItem, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
-    }, [weeks]);
+        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);
@@ -2028,13 +2035,6 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
             maxDate
         };
     }, [date, formControl?.value, value, month, year, minDate, maxDate]);
-    const setDayValue = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = require$$0.useCallback((value) => {
-        setDayValue(value);
-        onValue && onValue(value);
-    }, [setDayValue, onValue]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
 }
 
@@ -2042,7 +2042,7 @@ const formatRange = '{dd}/{mx}/{aa}';
 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))) }));
 }
-function RlsPickerDayRangeItem({ day, onSelect, disabled }) {
+function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-picker-day-range__element', {
             disabled: day.disabled || disabled,
@@ -2069,14 +2069,23 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
     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 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;
+        setRange(range);
+        formControl?.setValue(range);
+    }, [date, sourceDate.current, formControl]);
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
             setHeaders(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
         });
     }, []);
     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(RlsPickerDayRangeItem, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
-    }, [weeks]);
+        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,
@@ -2089,19 +2098,10 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
     const title = require$$0.useMemo(() => {
         return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dates.dateFormatTemplate(sourceDate.current, formatRange) }));
     }, [sourceDate.current]);
-    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;
-        setRange(range);
-        formControl?.setValue(range);
-    }, [date, sourceDate.current, formControl]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [title, headers, component] }));
 }
 
-function RlsPickerMonthItem({ month, onSelect, disabled }) {
+function RlsPickerMonthElement({ month, onSelect, disabled }) {
     const [label, setLabel] = require$$0.useState(dates.MONTH_NAMES(month.value));
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
@@ -2128,9 +2128,16 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
     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 setMonthValue = require$$0.useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = require$$0.useCallback((value) => {
+        setMonthValue(value);
+        onValue && onValue(value);
+    }, [setMonthValue, onValue]);
     require$$0.useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthItem, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [months]);
+        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,
@@ -2156,13 +2163,6 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             ? formControl?.setValue(month)
             : setValue(formControl?.value ?? date.getMonth());
     }, [formControl?.value]);
-    const setMonthValue = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = require$$0.useCallback((value) => {
-        setMonthValue(value);
-        onValue && onValue(value);
-    }, [setMonthValue, onValue]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: component }));
 }
 
@@ -2223,7 +2223,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsx("span", { onClick: onClick, children: label }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 
-function RlsPickerYearItem({ onSelect, year, disabled }) {
+function RlsPickerYearElement({ onSelect, year, disabled }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-picker-year__element', {
             disabled: year.disabled || disabled,
@@ -2250,34 +2250,34 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
         };
     }, [date, year, minDate, maxDate]);
     const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
+    const setYearValue = require$$0.useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+        setYear(value);
+    }, [formControl]);
+    const onSelect = require$$0.useCallback((value) => {
+        setYearValue(value);
+        onValue && onValue(value);
+    }, [setYearValue, onValue]);
     require$$0.useEffect(() => {
         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(RlsPickerYearItem, { year: year, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [template.years]);
+        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.itIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value ?? date.getFullYear());
     }, [formControl?.value]);
-    const setYearValue = require$$0.useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-        setYear(value);
-    }, [formControl]);
     const onClickPrev = require$$0.useCallback(() => {
         setYear((year) => year - 8);
     }, []);
     const onClickNext = require$$0.useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    const onSelect = require$$0.useCallback((value) => {
-        setYearValue(value);
-        onValue && onValue(value);
-    }, [setYearValue, onValue]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }) }), jsxRuntimeExports.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
 }
 
@@ -2450,23 +2450,23 @@ function calculateMinHeightList(count, height) {
 }
 function useListController(props) {
     const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
+    const refContent = require$$0.useRef(null);
+    const refList = require$$0.useRef(null);
+    const refInput = require$$0.useRef(null);
     const listIsOpen = require$$0.useRef(false);
-    const contentRef = require$$0.useRef(null);
-    const listRef = require$$0.useRef(null);
-    const inputRef = require$$0.useRef(null);
     const [collection, setCollection] = require$$0.useState(new components.ListCollection(suggestions));
     const [state, refreshState] = require$$0.useState({
         focused: false,
         higher: false,
-        value: '',
-        modalIsVisible: false
+        modalIsVisible: false,
+        value: ''
     });
+    const changeValueInternal = require$$0.useRef(false);
     const position = require$$0.useRef(0);
     const valueProtected = require$$0.useRef();
-    const changeValueInternal = require$$0.useRef(false);
     require$$0.useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !contentRef?.current?.contains(target) &&
+            !refContent?.current?.contains(target) &&
                 refreshState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
@@ -2516,7 +2516,7 @@ function useListController(props) {
         const _state = state.modalIsVisible
             ? {
                 ...state,
-                higher: components.locationListCanTop(contentRef.current, listRef.current, minHeightList)
+                higher: components.locationListCanTop(refContent.current, refList.current, minHeightList)
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
@@ -2534,29 +2534,29 @@ function useListController(props) {
     const navigationInput = require$$0.useCallback((event) => {
         if (state.modalIsVisible) {
             const _position = components.navigationListFromInput({
-                content: contentRef.current,
+                content: refContent.current,
                 event: event,
-                list: listRef.current
+                list: refList.current
             });
             position.current = _position ?? 0;
         }
     }, [state.modalIsVisible]);
     const navigationElement = require$$0.useCallback((event) => {
         position.current = components.navigationListFromElement({
-            content: contentRef.current,
+            content: refContent.current,
             event: event,
-            input: inputRef.current,
-            list: listRef.current,
+            input: refInput.current,
+            list: refList.current,
             position: position.current
         });
     }, [state.modalIsVisible]);
     return {
         ...state,
-        contentRef,
-        inputRef,
-        listRef,
         navigationElement,
         navigationInput,
+        refContent,
+        refInput,
+        refList,
         setFormValue,
         setState
     };
@@ -2595,6 +2595,9 @@ function useFieldAutocomplete(props) {
     require$$0.useEffect(() => {
         refreshCoincidences(props.suggestions, pattern);
     }, [pattern]);
+    require$$0.useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
     const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -2615,7 +2618,7 @@ function useFieldAutocomplete(props) {
     const onClickControl = require$$0.useCallback(() => {
         controller.setState({ modalIsVisible: true });
         setTimeout(() => {
-            controller.inputRef?.current?.focus();
+            controller.refInput?.current?.focus();
         }, DURATION_ANIMATION$1);
     }, [controller.setState]);
     const onClickAction = require$$0.useCallback(() => {
@@ -2645,7 +2648,7 @@ function useFieldAutocomplete(props) {
         }
         if (props.selectionContinuos) {
             setPattern('');
-            controller.inputRef?.current?.focus();
+            controller.refInput?.current?.focus();
         }
         else {
             controller.setState({ modalIsVisible: false });
@@ -2731,7 +2734,7 @@ function RlsFieldAutocompleteTemplate(props) {
         event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), 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: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, 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 })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), 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: classNameList, 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 })] })] }));
 }
 function RlsFieldAutocomplete(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -2995,6 +2998,9 @@ function useFieldSelect(props) {
     require$$0.useEffect(() => {
         count.current = props.suggestions.length;
     }, [props.suggestions]);
+    require$$0.useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
     const onFocusInput = require$$0.useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -3029,7 +3035,7 @@ function useFieldSelect(props) {
         else {
             const modalIsVisible = !controller.modalIsVisible;
             controller.setState({ modalIsVisible });
-            modalIsVisible && controller.inputRef?.current?.focus();
+            modalIsVisible && controller.refInput?.current?.focus();
         }
     }, [
         controller.modalIsVisible,
@@ -3043,7 +3049,7 @@ function useFieldSelect(props) {
         controller.setState({ modalIsVisible: false });
     }, [controller.setState]);
     const onChange = require$$0.useCallback((element) => {
-        controller.inputRef?.current?.focus();
+        !props.disabled && controller.refInput?.current?.focus();
         if (props.onSelect) {
             controller.setState({ modalIsVisible: false });
             element.value && props.onSelect(element.value);
@@ -3057,7 +3063,8 @@ function useFieldSelect(props) {
         controller.setState,
         controller.setFormValue,
         props.onSelect,
-        props.onValue
+        props.onValue,
+        props.disabled
     ]);
     const onClickElement = require$$0.useCallback((element) => {
         return () => {
@@ -3104,9 +3111,9 @@ function RlsFieldSelectTemplate(props) {
     }, [formControl?.disabled, props.disabled]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: disabled,
+            focused: select.focused && !disabled,
             error: formControl?.wrong,
-            focused: select.focused && !disabled
+            disabled: disabled
         }, 'rls-field-list rls-field-select');
     }, [formControl?.wrong, select.focused, disabled]);
     const classNameList = require$$0.useMemo(() => {
@@ -3115,7 +3122,7 @@ function RlsFieldSelectTemplate(props) {
             visible: select.modalIsVisible
         });
     }, [select.modalIsVisible, select.higher]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, 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 }), 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: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, 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("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: 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 }), 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: classNameList, 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 })] })] }));
 }
 function RlsFieldSelect(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);