@rolster/react-components 18.19.0 → 18.20.2

package/dist/es/index.js

@@ -1,7 +1,7 @@
-import require$$0, { useState, useRef, useEffect, useCallback, createContext } from 'react';
+import require$$0, { useState, useEffect, useRef, useCallback, createContext } from 'react';
 import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
+import { ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, createAutocompleteStore, verifyDateRange, dateOutRange, PickerListenerEvent } from '@rolster/components';
 import { dateFormatTemplate, DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
-import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, verifyDateRange, dateOutRange, PickerListenerEvent } from '@rolster/components';
 import ReactDOM from 'react-dom';
 import { i18n } from '@rolster/i18n';
 import { useReactControl } from '@rolster/react-forms';
@@ -1344,20 +1344,156 @@ var jsxRuntimeExports = jsxRuntime.exports;
 
 const className = 'rls-tabular-text';
 const pointers = ['.', ','];
-function charClass(char) {
+function getCharClass(char) {
     return pointers.includes(char)
         ? `${className}__pointer`
         : `${className}__char`;
 }
 function RlsTabularText({ value }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-tabular-text", children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: charClass(char), children: char }, index))) }));
+    const [codes, setCodes] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    useEffect(() => {
+        setCodes(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: getCharClass(char), children: char }, index))) }));
+    }, [value]);
+    return jsxRuntimeExports.jsx("div", { className: "rls-tabular-text", children: codes });
 }
 
 function RlsAmount({ value, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { children: symbol }), jsxRuntimeExports.jsx(RlsTabularText, { value: currencyFormat({ value, decimals }) })] }));
 }
 
-function renderClassStatus(base, status = {}, aditionals) {
+function createObserver(options) {
+    const { setScrolleable, table } = options;
+    const observer = new ResizeObserver(() => {
+        const scrollHeight = table.scrollHeight || 0;
+        const clientHeight = table.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    });
+    observer.observe(table);
+    return observer;
+}
+function useDatatable() {
+    const [scrolleable, setScrolleable] = useState(false);
+    const tableRef = useRef(null);
+    useEffect(() => {
+        const observer = tableRef?.current &&
+            createObserver({ setScrolleable, table: tableRef?.current });
+        return () => {
+            observer?.disconnect();
+        };
+    }, []);
+    return { scrolleable, tableRef };
+}
+
+function useListController(props) {
+    const { suggestions, automatic, formControl, reference } = props;
+    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
+    });
+    const position = useRef(0);
+    const valueProtected = useRef();
+    const changeValueInternal = useRef(false);
+    useEffect(() => {
+        function onCloseSuggestions({ target }) {
+            !contentRef?.current?.contains(target) &&
+                refreshState((state) => ({ ...state, modalIsVisible: false }));
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    useEffect(() => {
+        if (!listIsOpen.current && state.modalIsVisible) {
+            listIsOpen.current = true;
+        }
+        if (listIsOpen.current && !state.modalIsVisible) {
+            formControl?.touch();
+        }
+        refreshState((state) => ({
+            ...state,
+            higher: locationListCanTop(contentRef.current, listRef.current)
+        }));
+    }, [state.modalIsVisible]);
+    useEffect(() => {
+        setCollection(new ListCollection(suggestions, reference));
+    }, [suggestions]);
+    useEffect(() => {
+        if (!changeValueInternal.current) {
+            if (formControl?.value) {
+                const element = collection.find(formControl.value);
+                if (!element) {
+                    valueProtected.current = formControl.value;
+                    automatic
+                        ? setFormValue(collection.value[0], true)
+                        : setFormValue(undefined);
+                }
+                else {
+                    refreshState((state) => ({ ...state, value: element.description }));
+                }
+            }
+            else if (valueProtected.current) {
+                const element = collection.find(valueProtected.current);
+                element && setFormValue(element);
+            }
+            else {
+                automatic && setFormValue(collection.value[0], true);
+            }
+        }
+        changeValueInternal.current = false;
+    }, [collection, formControl?.value]);
+    const setState = useCallback((state) => {
+        refreshState((_state) => ({ ..._state, ...state }));
+    }, []);
+    const setFormValue = useCallback((element, initialValue = false) => {
+        refreshState((_state) => ({
+            ..._state,
+            value: element?.description || ''
+        }));
+        changeValueInternal.current = true;
+        initialValue
+            ? formControl?.setInitialValue(element?.value)
+            : formControl?.setValue(element?.value);
+    }, [formControl]);
+    const navigationInput = useCallback((event) => {
+        if (state.modalIsVisible) {
+            const _position = navigationListFromInput({
+                content: contentRef.current,
+                event: event,
+                list: listRef.current
+            });
+            position.current = _position ?? 0;
+        }
+    }, [state.modalIsVisible]);
+    const navigationElement = useCallback((event) => {
+        position.current = navigationListFromElement({
+            content: contentRef.current,
+            event: event,
+            input: inputRef.current,
+            list: listRef.current,
+            position: position.current
+        });
+    }, [state.modalIsVisible]);
+    return {
+        ...state,
+        contentRef,
+        inputRef,
+        listRef,
+        navigationElement,
+        navigationInput,
+        setFormValue,
+        setState
+    };
+}
+
+function renderClassStatus(base, status = {}, additionals) {
     const resultClass = [base];
     Object.entries(status).forEach(([name, value]) => {
         if (value) {
@@ -1366,20 +1502,12 @@ function renderClassStatus(base, status = {}, aditionals) {
                 : resultClass.push(`${base}--${name}`);
         }
     });
-    if (aditionals) {
-        resultClass.push(aditionals);
+    if (additionals) {
+        resultClass.push(additionals);
     }
     return resultClass.join(' ');
 }
 
-function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
-}
-
-function RlsBadge({ children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
-}
-
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -1388,18 +1516,34 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
+function useRenderClassStatus(base, status = {}, additionals) {
+    const [className, setClassName] = useState('');
+    useEffect(() => {
+        setClassName(renderClassStatus(base, status, additionals));
+    }, [base, Object.values(status), additionals]);
+    return className;
+}
+
+function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsBadge({ children, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+}
+
 function RlsBreadcrumb({ labels }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsxRuntimeExports.jsx("a", { className: renderClassStatus('rls-breadcrumb__label__a', {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsxRuntimeExports.jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsxRuntimeExports.jsx("a", { className: useRenderClassStatus('rls-breadcrumb__label__a', {
                     actionable: !!onClick
                 }), children: label }) }, index))) }));
 }
 
 function RlsIcon({ value, skeleton }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-icon', { skeleton }), children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
+    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-icon', { skeleton }), children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 
 function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIcon, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
@@ -1407,7 +1551,7 @@ function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
 }
 
 function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
 }
 function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: () => {
@@ -1417,22 +1561,20 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
 
 function RlsInput({ children, disabled, formControl, identifier, onValue, placeholder, type, value }) {
     const [focused, setFocused] = useState(false);
-    function setValue(value) {
-        formControl?.setValue(value);
+    const onChange = useCallback((event) => {
+        const value = type === 'number' ? +event.target.value : event.target.value;
         onValue && onValue(value);
-    }
-    function onChange(event) {
-        setValue(type === 'number' ? +event.target.value : event.target.value);
-    }
-    function onFocus() {
+        formControl?.setValue(value);
+    }, [formControl, onValue]);
+    const onFocus = useCallback(() => {
         formControl?.focus();
-        setFocused(true);
-    }
-    function onBlur() {
+        setFocused(() => true);
+    }, [formControl]);
+    const onBlur = useCallback(() => {
         formControl?.blur();
-        setFocused(false);
-    }
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-input', {
+        setFocused(() => false);
+    }, [formControl]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-input', {
             focused: formControl?.focused ?? focused,
             disabled: formControl?.disabled || disabled
         }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.value || value || '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
@@ -1440,36 +1582,36 @@ function RlsInput({ children, disabled, formControl, identifier, onValue, placeh
 
 function RlsInputMoney({ decimals, disabled, formControl, identifier, onValue, placeholder, symbol, value }) {
     const [valueInput, setValueInput] = useState(value || 0);
-    function onValueInput(value) {
+    const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
         onValue && onValue(value);
-    }
+    }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 
 function RlsInputNumber({ disabled, formControl, identifier, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = useState(value ?? 0);
-    function onValueInput(value) {
+    const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
         onValue && onValue(value);
-    }
+    }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
 function RlsInputPassword({ disabled, formControl, identifier, onValue, placeholder, type }) {
     const [focused, setFocused] = useState(false);
-    function onChange(event) {
+    const onChange = useCallback((event) => {
         formControl?.setValue(event.target.value);
         onValue && onValue(event.target.value);
-    }
-    function onFocus() {
+    }, [formControl, onValue]);
+    const onFocus = useCallback(() => {
         formControl?.focus();
-        setFocused(true);
-    }
-    function onBlur() {
+        setFocused(() => true);
+    }, [formControl]);
+    const onBlur = useCallback(() => {
         formControl?.blur();
-        setFocused(false);
-    }
+        setFocused(() => false);
+    }, [formControl]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-input-password', {
             focused: formControl?.focused ?? focused,
             disabled: formControl?.disabled || disabled
@@ -1478,18 +1620,18 @@ function RlsInputPassword({ disabled, formControl, identifier, onValue, placehol
 
 function RlsInputSearch({ formControl, identifier, onSearch, placeholder }) {
     const [value, setValue] = useState('');
-    function onValueInput(value) {
-        !formControl && setValue(value);
-    }
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+    const onValue = useCallback((value) => {
+        !formControl && setValue(() => value);
+    }, [formControl]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-input-search", children: [jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, placeholder: placeholder, onValue: onValue, children: formControl?.value ?? value }), onSearch && jsxRuntimeExports.jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
 }
 
 function RlsInputText({ disabled, formControl, identifier, onValue, placeholder, value }) {
     const [valueInput, setValueInput] = useState(value ?? '');
-    function onValueInput(value) {
+    const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
         onValue && onValue(value);
-    }
+    }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onValueInput, children: formControl?.value ?? value ?? valueInput }) }));
 }
 
@@ -1502,11 +1644,11 @@ function RlsMessageIcon({ icon, children, rlsTheme }) {
 }
 
 function RlsPoster({ children, contrast, outline, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-poster', { contrast, outline }), "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-poster', { contrast, outline }), "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
+    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
 }
 
 function RlsProgressCircular({ rlsTheme }) {
@@ -1514,7 +1656,7 @@ function RlsProgressCircular({ rlsTheme }) {
 }
 
 function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
 function RlsSkeleton({ rlsTheme }) {
@@ -1526,7 +1668,7 @@ function RlsSkeletonText({ active, children, rlsTheme }) {
 }
 
 function RlsSwitch({ checked, disabled, identifier, onClick, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
 }
 function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value || false, disabled: disabled, onClick: () => {
@@ -1535,11 +1677,11 @@ function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
 }
 
 function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
 }
 
 function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
+    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (jsxRuntimeExports.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntimeExports.jsx(RlsProgressCircular, {})] }));
 }
 
 function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
@@ -1556,17 +1698,17 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
             document.removeEventListener('click', onCloseMenu);
         };
     }, []);
-    function onClickMenu() {
-        setVisible((prevValue) => !prevValue);
-    }
-    function onSelectAction(action) {
-        setAction(action);
-        setVisible(false);
+    const onClickMenu = useCallback(() => {
+        setVisible((visible) => !visible);
+    }, []);
+    const onSelectAction = useCallback((action) => {
+        setAction(() => action);
+        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: renderClassStatus('rls-button-toggle__list', {
+                            }, 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: useRenderClassStatus('rls-button-toggle__list', {
                     visible,
                     hide: !visible
                 }), children: jsxRuntimeExports.jsx("ul", { children: options.map((action, index) => (jsxRuntimeExports.jsx("li", { className: "truncate", onClick: () => {
@@ -1580,7 +1722,7 @@ function RlsMessageFormError({ className, formControl }) {
 
 function RlsFieldMoney({ children, decimals, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, symbol, rlsTheme, value }) {
     const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
@@ -1589,7 +1731,7 @@ function RlsFieldMoney({ children, decimals, disabled, formControl, identifier,
 
 function RlsFieldNumber({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
     const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
@@ -1598,11 +1740,11 @@ function RlsFieldNumber({ children, disabled, formControl, identifier, msgErrorD
 
 function RlsFieldPassword({ children, disabled, formControl, identifier, msgErrorDisabled, placeholder, rlsTheme }) {
     const [password, setPassword] = useState(true);
-    function onToggleInput() {
-        setPassword(!password);
-    }
+    const onToggleInput = useCallback(() => {
+        setPassword((password) => !password);
+    }, []);
     const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus(' rls-field-box', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus(' rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
@@ -1611,7 +1753,7 @@ function RlsFieldPassword({ children, disabled, formControl, identifier, msgErro
 
 function RlsFieldText({ children, disabled, formControl, identifier, msgErrorDisabled, onValue, placeholder, rlsTheme, value }) {
     const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-field-box', {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-field-box', {
             focused: formControl?.focused && !_disabled,
             error: formControl?.wrong,
             disabled: _disabled
@@ -1623,15 +1765,12 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
     useEffect(() => {
         setChecked(!!formControl?.value);
     }, [formControl?.value]);
-    function onToggle() {
-        if (formControl) {
-            formControl?.setValue(!formControl.value);
-        }
-        else {
-            setChecked(!checked);
-        }
-    }
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-label-checkbox', {
+    const onToggle = useCallback(() => {
+        formControl
+            ? formControl?.setValue(!formControl.value)
+            : setChecked((checked) => !checked);
+    }, [formControl]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-label-checkbox', {
             disabled,
             extended
         }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
@@ -1642,10 +1781,10 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
     useEffect(() => {
         setChecked(formControl?.value === value);
     }, [formControl?.value]);
-    function onSelect() {
+    const onSelect = useCallback(() => {
         formControl && formControl?.setValue(value);
-    }
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-label-radiobutton', {
+    }, [formControl, value]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-label-radiobutton', {
             disabled,
             extended
         }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-radiobutton__text", children: children })] }));
@@ -1656,15 +1795,15 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
     useEffect(() => {
         setChecked(!!formControl?.value);
     }, [formControl?.value]);
-    function onToggle() {
-        if (formControl) {
-            formControl?.setValue(!formControl.value);
-        }
-        else {
-            setChecked(!checked);
-        }
-    }
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: renderClassStatus('rls-label-switch', { disabled, extended }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
+    const onToggle = useCallback(() => {
+        formControl
+            ? formControl?.setValue(!formControl.value)
+            : setChecked((checked) => !checked);
+    }, [formControl]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-label-switch', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
 }
 
 function RlsPagination({ suggestions, count, filter, onPagination }) {
@@ -1716,7 +1855,7 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
         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.jsx("div", { className: "rls-pagination__pages", children: template.pages.map((page, index) => {
-                    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-pagination__page', {
+                    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-pagination__page', {
                             active: page.active
                         }), onClick: () => {
                             goToPagination(page);
@@ -1950,7 +2089,7 @@ function RlsToolbar({ actions, children, subtitle }) {
 }
 
 function RlsCard({ children, outline, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
+    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
 const reactI18n = i18n({
@@ -1983,7 +2122,7 @@ class ConfirmationResult extends PartialSealed {
     }
 }
 function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmationService() {
     const [config, setConfig] = useState({});
@@ -2029,170 +2168,26 @@ function RlsDatatableHeader({ children, identifier }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", children: children }));
 }
 function RlsDatatableTitle({ children, className, control, identifier }) {
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: useRenderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
 function RlsDatatableRecord({ children, className, error, identifier, info, successs, warning }) {
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: renderClassStatus('rls-datatable__record', { error, info, successs, warning }, className).trim(), children: children }));
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: useRenderClassStatus('rls-datatable__record', { error, info, successs, warning }, className).trim(), children: children }));
 }
 function RlsDatatableTotals({ children, className, error, identifier, info, successs, warning }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-datatable__totals', { error, info, successs, warning }, className).trim(), children: children }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-datatable__totals', { error, info, successs, warning }, className).trim(), children: children }));
 }
 function RlsDatatableCell({ children, className, control, identifier, overflow }) {
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: useRenderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
 function RlsDatatableData({ children, className, control, identifier, overflow }) {
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: renderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
 }
 function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-datatable', {
+    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
         }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
-function createObserver(options) {
-    const { setScrolleable, table } = options;
-    const observer = new ResizeObserver(() => {
-        const scrollHeight = table.scrollHeight || 0;
-        const clientHeight = table.clientHeight || 0;
-        setScrolleable(scrollHeight > clientHeight);
-    });
-    observer.observe(table);
-    return observer;
-}
-function useDatatable() {
-    const [scrolleable, setScrolleable] = useState(false);
-    const tableRef = useRef(null);
-    useEffect(() => {
-        const observer = tableRef?.current &&
-            createObserver({ setScrolleable, table: tableRef?.current });
-        return () => {
-            observer?.disconnect();
-        };
-    }, []);
-    return { scrolleable, tableRef };
-}
-
-function useListController(props) {
-    const { suggestions, automatic, formControl, reference } = props;
-    const listIsOpen = useRef(false);
-    const contentRef = useRef(null);
-    const listRef = useRef(null);
-    const inputRef = useRef(null);
-    const [state, refreshState] = useState({
-        focused: false,
-        higher: false,
-        value: '',
-        modalIsVisible: false
-    });
-    const collection = useRef(new ListCollection([]));
-    const position = useRef(0);
-    const valueProtected = useRef();
-    const changeValueInternal = useRef(false);
-    useEffect(() => {
-        function onCloseSuggestions({ target }) {
-            !contentRef?.current?.contains(target) &&
-                refreshState((state) => ({ ...state, modalIsVisible: false }));
-        }
-        document.addEventListener('click', onCloseSuggestions);
-        return () => {
-            document.removeEventListener('click', onCloseSuggestions);
-        };
-    }, []);
-    useEffect(() => {
-        if (!listIsOpen.current && state.modalIsVisible) {
-            listIsOpen.current = true;
-        }
-        if (listIsOpen.current && !state.modalIsVisible) {
-            formControl?.touch();
-        }
-        refreshState((state) => ({
-            ...state,
-            higher: locationListCanTop(contentRef.current, listRef.current)
-        }));
-    }, [state.modalIsVisible]);
-    useEffect(() => {
-        collection.current = new ListCollection(suggestions, reference);
-        if (formControl?.value) {
-            const element = collection.current.find(formControl.value);
-            if (!element) {
-                valueProtected.current = formControl.value;
-                automatic
-                    ? setFormValue(collection.current.value[0], true)
-                    : setFormValue(undefined);
-            }
-        }
-        else if (valueProtected.current) {
-            const element = collection.current.find(valueProtected.current);
-            element && setFormValue(element);
-        }
-        else {
-            automatic && setFormValue(collection.current.value[0], true);
-        }
-    }, [suggestions]);
-    useEffect(() => {
-        if (!changeValueInternal.current) {
-            if (formControl?.value) {
-                const element = collection.current.find(formControl.value);
-                if (!element) {
-                    valueProtected.current = formControl.value;
-                    automatic
-                        ? setFormValue(collection.current.value[0], true)
-                        : setFormValue(undefined);
-                }
-                else {
-                    setFormValue(element);
-                }
-            }
-            else {
-                automatic && setFormValue(collection.current.value[0], true);
-            }
-        }
-        changeValueInternal.current = false;
-    }, [formControl?.value]);
-    const setState = useCallback((state) => {
-        refreshState((_state) => ({ ..._state, ...state }));
-    }, []);
-    const setFormValue = useCallback((element, initialValue = false) => {
-        refreshState((_state) => ({
-            ..._state,
-            value: element?.description ?? ''
-        }));
-        changeValueInternal.current = true;
-        initialValue
-            ? formControl?.setInitialValue(element?.value)
-            : formControl?.setValue(element?.value);
-    }, [formControl]);
-    const navigationInput = useCallback((event) => {
-        if (state.modalIsVisible) {
-            const _position = navigationListFromInput({
-                content: contentRef.current,
-                event: event,
-                list: listRef.current
-            });
-            position.current = _position ?? 0;
-        }
-    }, [state.modalIsVisible]);
-    const navigationElement = useCallback((event) => {
-        position.current = navigationListFromElement({
-            content: contentRef.current,
-            event: event,
-            input: inputRef.current,
-            list: listRef.current,
-            position: position.current
-        });
-    }, [state.modalIsVisible]);
-    return {
-        ...state,
-        contentRef,
-        inputRef,
-        listRef,
-        navigationElement,
-        navigationInput,
-        setFormValue,
-        setState
-    };
-}
-
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
@@ -2300,13 +2295,13 @@ function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
     const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     const _disabled = formControl?.disabled || props.disabled;
-    const className = renderClassStatus('rls-field-box', {
+    const className = useRenderClassStatus('rls-field-box', {
         focused: autocomplete.focused && !_disabled,
         error: formControl?.wrong,
         disabled: _disabled,
         selected: !!autocomplete.value
     }, 'rls-field-list rls-field-autocomplete');
-    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: renderClassStatus('rls-field-list__suggestions', {
+    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: useRenderClassStatus('rls-field-list__suggestions', {
                     visible: autocomplete.modalIsVisible,
                     higher: autocomplete.higher,
                     hide: !autocomplete.modalIsVisible
@@ -2321,7 +2316,7 @@ function RlsFieldAutocomplete(props) {
 }
 
 function RlsModal({ children, overflow, visible, rlsTheme }) {
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-modal', { overflow, visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-modal', { overflow, visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
 const FORMAT_TITLE = '{dw}, {mx} {dd} de {aa}';
@@ -2377,7 +2372,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         formControl?.setValue(value);
         onListener && onListener({ event: PickerListenerEvent.Select, value });
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
@@ -2419,7 +2414,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         ? dateFormatTemplate(value, format || FORMAT_DATE)
         : '';
     const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled: _disabled }), 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-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-field-box', { disabled: _disabled }), 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-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
                         event !== PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2469,11 +2464,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         formControl?.setValue(value);
         onListener && onListener({ event: PickerListenerEvent.Select, value });
     }
-    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("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
+    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("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-picker-date-range__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
-                }), children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: dayControl, 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: renderClassStatus('rls-picker-date-range__footer', {
+                }), children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: dayControl, 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: useRenderClassStatus('rls-picker-date-range__footer', {
                     automatic
                 }), 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: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
@@ -2500,7 +2495,9 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
         onValue && onValue(value);
     }
     const _disabled = formControl?.disabled || disabled;
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled: _disabled }), 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-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-field-box', {
+                    disabled: _disabled
+                }), 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-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
                         event !== PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
@@ -2591,12 +2588,12 @@ function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
     const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
     const _disabled = formControl?.disabled || props.disabled;
-    const className = renderClassStatus('rls-field-box', {
+    const className = useRenderClassStatus('rls-field-box', {
         focused: select.focused && !_disabled,
         error: formControl?.wrong,
         disabled: _disabled
     }, 'rls-field-list rls-field-select');
-    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, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('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: renderClassStatus('rls-field-list__suggestions', {
+    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, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), 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: useRenderClassStatus('rls-field-list__suggestions', {
                     visible: select.modalIsVisible,
                     higher: select.higher,
                     hide: !select.modalIsVisible
@@ -2607,7 +2604,7 @@ function RlsFieldSelect(props) {
 }
 
 function RlsFormNavigation({ children, visible, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
+    return (jsxRuntimeExports.jsx("div", { className: useRenderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -2626,7 +2623,7 @@ function calculateDuration({ length }) {
     return duration + DURATION_RESET;
 }
 function RlsSnackbar({ content, icon, title, visible, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-snackbar', { visible }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-snackbar', { visible }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
 function useSnackbarService() {
     const [config, setConfig] = useState({});
@@ -2675,5 +2672,5 @@ function RlsApplication({ children }) {
                 }), children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
-export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListController, useSnackbarService };
+export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListController, useRenderClassStatus, useSnackbarService };
 //# sourceMappingURL=index.js.map