@rolster/react-components 18.21.44 → 18.21.46

package/dist/es/assets/{index-CEj_H1DS.css → index-CaA_sxmM.css}

@@ -3,6 +3,7 @@
     --rlc-tabular-text-font-size,
     var(--rls-body-font-size)
   );
+  --pvt-char-font-weight: var(--rlc-tabular-text-font-weight, inherit);
   --pvt-char-height: var(--pvt-char-font-size);
   --pvt-char-width: var(--rlc-tabular-text-char-width, 5.5rem);
   --pvt-pointer-width: var(--rlc-tabular-text-pointer-width, 2rem);
@@ -11,6 +12,7 @@
   height: var(--pvt-char-height);
   line-height: var(--pvt-char-height);
   font-size: var(--pvt-char-font-size);
+  font-weight: var(--pvt-char-font-weight);
   justify-content: var(--rlc-tabular-text-align, flex-start);
 }
 .rls-tabular-text__char {
@@ -26,14 +28,17 @@
 
 .rls-amount {
   --pvt-font-size: var(--rlc-amount-font-size, inherit);
+  --pvt-font-weight: var(--rlc-amount-font-weight, inherit);
   --pvt-decimal-width: var(--rlc-amount-decimal-width, 0.5);
   --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
   --rlc-tabular-text-font-size: var(--pvt-font-size);
+  --rlc-tabular-text-font-weight: var(--pvt-font-weight);
   display: flex;
   width: var(--rlc-amount-width, auto);
   justify-content: var(--rlc-amount-text-align, flex-start);
   column-gap: var(--rls-sizing-x2);
   font-size: var(--pvt-font-size);
+  font-weight: var(--pvt-font-weight);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);

package/dist/es/index.js

@@ -1966,7 +1966,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: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
+}
+function RlsPickerDayElement({ day, onSelect, disabled }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-picker-day__element', {
             disabled: day.disabled || disabled,
@@ -1988,23 +1991,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: 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 = useMemo(() => _date ?? new Date(), [_date]);
     const [weeks, setWeeks] = useState([]);
     const [value, setValue] = useState(formControl?.value || date.getDate());
     const [headers, setHeaders] = useState(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
     const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const setDayValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setDayValue(value);
+        onValue && onValue(value);
+    }, [setDayValue, onValue]);
     useEffect(() => {
         return i18nSubscribe(() => {
             setHeaders(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
         });
     }, []);
     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]);
     useEffect(() => {
         const options = createPickerOptions();
         const day = verifyDayPicker(options);
@@ -2026,13 +2033,6 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
             maxDate
         };
     }, [date, formControl?.value, value, month, year, minDate, maxDate]);
-    const setDayValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setDayValue(value);
-        onValue && onValue(value);
-    }, [setDayValue, onValue]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
 }
 
@@ -2040,7 +2040,7 @@ const formatRange = '{dd}/{mx}/{aa}';
 function RlsPickerDayRangeHeaders() {
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
 }
-function RlsPickerDayRangeItem({ day, onSelect, disabled }) {
+function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-picker-day-range__element', {
             disabled: day.disabled || disabled,
@@ -2067,14 +2067,23 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
     const [range, setRange] = useState(_range);
     const [headers, setHeaders] = useState(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
     const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const onSelect = useCallback((value) => {
+        const _date = assignDayInDate(date, value);
+        const range = dateIsBefore(_date, sourceDate.current)
+            ? new DateRange(sourceDate.current, _date)
+            : new DateRange(_date, sourceDate.current);
+        sourceDate.current = _date;
+        setRange(range);
+        formControl?.setValue(range);
+    }, [date, sourceDate.current, formControl]);
     useEffect(() => {
         return i18nSubscribe(() => {
             setHeaders(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
         });
     }, []);
     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]);
     useEffect(() => {
         setWeeks(createDayRangePicker({
             date,
@@ -2087,19 +2096,10 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
     const title = useMemo(() => {
         return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, formatRange) }));
     }, [sourceDate.current]);
-    const onSelect = useCallback((value) => {
-        const _date = assignDayInDate(date, value);
-        const range = dateIsBefore(_date, sourceDate.current)
-            ? new DateRange(sourceDate.current, _date)
-            : new 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] = useState(MONTH_NAMES(month.value));
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -2126,9 +2126,16 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
     const [months, setMonths] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? date.getMonth());
     const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const setMonthValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setMonthValue(value);
+        onValue && onValue(value);
+    }, [setMonthValue, onValue]);
     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]);
     useEffect(() => {
         const options = {
             date,
@@ -2154,13 +2161,6 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             ? formControl?.setValue(month)
             : setValue(formControl?.value ?? date.getMonth());
     }, [formControl?.value]);
-    const setMonthValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setMonthValue(value);
-        onValue && onValue(value);
-    }, [setMonthValue, onValue]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: component }));
 }
 
@@ -2221,7 +2221,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 = useMemo(() => {
         return renderClassStatus('rls-picker-year__element', {
             disabled: year.disabled || disabled,
@@ -2248,34 +2248,34 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
         };
     }, [date, year, minDate, maxDate]);
     const [template, setTemplate] = useState(createYearPicker(createPickerOptions()));
+    const setYearValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+        setYear(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setYearValue(value);
+        onValue && onValue(value);
+    }, [setYearValue, onValue]);
     useEffect(() => {
         const options = createPickerOptions(); // YearPickerProps
         const year = verifyYearPicker(options);
         year ? setYearValue(year) : setTemplate(createYearPicker(options));
     }, [date, year, value, minDate, maxDate]);
     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]);
     useEffect(() => {
         const year = verifyYearPicker(createPickerOptions());
         itIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value ?? date.getFullYear());
     }, [formControl?.value]);
-    const setYearValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-        setYear(value);
-    }, [formControl]);
     const onClickPrev = useCallback(() => {
         setYear((year) => year - 8);
     }, []);
     const onClickNext = useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    const onSelect = 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 })] }));
 }
 
@@ -2448,23 +2448,23 @@ function calculateMinHeightList(count, height) {
 }
 function useListController(props) {
     const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
+    const refContent = useRef(null);
+    const refList = useRef(null);
+    const refInput = useRef(null);
     const listIsOpen = useRef(false);
-    const contentRef = useRef(null);
-    const listRef = useRef(null);
-    const inputRef = useRef(null);
     const [collection, setCollection] = useState(new ListCollection(suggestions));
     const [state, refreshState] = useState({
         focused: false,
         higher: false,
-        value: '',
-        modalIsVisible: false
+        modalIsVisible: false,
+        value: ''
     });
+    const changeValueInternal = useRef(false);
     const position = useRef(0);
     const valueProtected = useRef();
-    const changeValueInternal = useRef(false);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !contentRef?.current?.contains(target) &&
+            !refContent?.current?.contains(target) &&
                 refreshState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
@@ -2514,7 +2514,7 @@ function useListController(props) {
         const _state = state.modalIsVisible
             ? {
                 ...state,
-                higher: locationListCanTop(contentRef.current, listRef.current, minHeightList)
+                higher: locationListCanTop(refContent.current, refList.current, minHeightList)
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
@@ -2532,29 +2532,29 @@ function useListController(props) {
     const navigationInput = useCallback((event) => {
         if (state.modalIsVisible) {
             const _position = navigationListFromInput({
-                content: contentRef.current,
+                content: refContent.current,
                 event: event,
-                list: listRef.current
+                list: refList.current
             });
             position.current = _position ?? 0;
         }
     }, [state.modalIsVisible]);
     const navigationElement = useCallback((event) => {
         position.current = 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
     };
@@ -2593,6 +2593,9 @@ function useFieldAutocomplete(props) {
     useEffect(() => {
         refreshCoincidences(props.suggestions, pattern);
     }, [pattern]);
+    useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
     const onFocusInput = useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -2613,7 +2616,7 @@ function useFieldAutocomplete(props) {
     const onClickControl = useCallback(() => {
         controller.setState({ modalIsVisible: true });
         setTimeout(() => {
-            controller.inputRef?.current?.focus();
+            controller.refInput?.current?.focus();
         }, DURATION_ANIMATION$1);
     }, [controller.setState]);
     const onClickAction = useCallback(() => {
@@ -2643,7 +2646,7 @@ function useFieldAutocomplete(props) {
         }
         if (props.selectionContinuos) {
             setPattern('');
-            controller.inputRef?.current?.focus();
+            controller.refInput?.current?.focus();
         }
         else {
             controller.setState({ modalIsVisible: false });
@@ -2729,7 +2732,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 = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -2993,6 +2996,9 @@ function useFieldSelect(props) {
     useEffect(() => {
         count.current = props.suggestions.length;
     }, [props.suggestions]);
+    useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
     const onFocusInput = useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -3027,7 +3033,7 @@ function useFieldSelect(props) {
         else {
             const modalIsVisible = !controller.modalIsVisible;
             controller.setState({ modalIsVisible });
-            modalIsVisible && controller.inputRef?.current?.focus();
+            modalIsVisible && controller.refInput?.current?.focus();
         }
     }, [
         controller.modalIsVisible,
@@ -3041,7 +3047,7 @@ function useFieldSelect(props) {
         controller.setState({ modalIsVisible: false });
     }, [controller.setState]);
     const onChange = 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);
@@ -3055,7 +3061,8 @@ function useFieldSelect(props) {
         controller.setState,
         controller.setFormValue,
         props.onSelect,
-        props.onValue
+        props.onValue,
+        props.disabled
     ]);
     const onClickElement = useCallback((element) => {
         return () => {
@@ -3102,9 +3109,9 @@ function RlsFieldSelectTemplate(props) {
     }, [formControl?.disabled, props.disabled]);
     const className = 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 = useMemo(() => {
@@ -3113,7 +3120,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 = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);