@rolster/react-components 19.7.13 → 19.8.15

package/dist/es/index.mjs

@@ -1,9 +1,9 @@
 import require$$0, { memo, useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext, useContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
+import ReactDOM, { createPortal } from 'react-dom';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, navigationListFromInput, navigationListFromElement, createAutocompleteStore, PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
 import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, Time, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
-import ReactDOM from 'react-dom';
 import { useReactControl, useFormControl } from '@rolster/react-forms';
 
 var jsxRuntime = {exports: {}};
@@ -1255,11 +1255,6 @@ function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
 }
 const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 
-function RlsSwapHoverComponent({ children, content, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-swap-hover", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__primary", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__secondary", children: content })] }));
-}
-const RlsHoverSwap = memo(RlsSwapHoverComponent);
-
 function RlsSwitchComponent({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
     const className = renderClassStatus('rls-switch', {
         checked,
@@ -1636,6 +1631,89 @@ const reactI18n = i18n({
     }
 });
 
+function getScrollableAncestors(element) {
+    const ancestors = [];
+    let parent = element.parentElement;
+    while (parent && parent !== document.body) {
+        const { overflow, overflowX, overflowY } = getComputedStyle(parent);
+        if (/auto|scroll|hidden/.test(`${overflow}${overflowX}${overflowY}`)) {
+            ancestors.push(parent);
+        }
+        parent = parent.parentElement;
+    }
+    return ancestors;
+}
+function anchorIsVisible(rect, scrollables) {
+    if (!rect.width || !rect.height) {
+        return false;
+    }
+    let top = 0;
+    let left = 0;
+    let bottom = window.innerHeight;
+    let right = window.innerWidth;
+    for (const scrollable of scrollables) {
+        const scrollableRect = scrollable.getBoundingClientRect();
+        top = Math.max(top, scrollableRect.top);
+        left = Math.max(left, scrollableRect.left);
+        bottom = Math.min(bottom, scrollableRect.bottom);
+        right = Math.min(right, scrollableRect.right);
+    }
+    return (rect.bottom > top &&
+        rect.top < bottom &&
+        rect.right > left &&
+        rect.left < right);
+}
+function useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor) {
+    const [mounted, setMounted] = useState(false);
+    const [style, setStyle] = useState();
+    const [theme, setTheme] = useState();
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const onAnchorHidden = useEffectEvent(() => {
+        onHiddenAnchor?.();
+    });
+    useEffect(() => {
+        const anchor = refAnchor?.current;
+        if (!mounted || !visible || !anchor) {
+            return;
+        }
+        setTheme((anchor.closest('[rls-theme]')?.getAttribute('rls-theme') ??
+            undefined));
+        const scrollables = getScrollableAncestors(anchor);
+        let frame = 0;
+        function reposition() {
+            if (!anchor) {
+                return;
+            }
+            const rect = anchor.getBoundingClientRect();
+            if (!anchorIsVisible(rect, scrollables)) {
+                onAnchorHidden();
+                return;
+            }
+            setStyle({
+                '--pvt-portal-top': `${rect.bottom}px`,
+                '--pvt-portal-bottom': `${window.innerHeight - rect.top}px`,
+                '--pvt-portal-left': `${rect.left}px`,
+                '--pvt-portal-width': `${rect.width}px`
+            });
+        }
+        function requestReposition() {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(reposition);
+        }
+        reposition();
+        window.addEventListener('scroll', requestReposition, true);
+        window.addEventListener('resize', requestReposition);
+        return () => {
+            cancelAnimationFrame(frame);
+            window.removeEventListener('scroll', requestReposition, true);
+            window.removeEventListener('resize', requestReposition);
+        };
+    }, [mounted, visible, refAnchor]);
+    return { active: mounted && !!refAnchor, style, theme };
+}
+
 function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
     const onClick = useMemo(() => {
         return onClickElement(element);
@@ -1645,7 +1723,8 @@ function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
     }, [element, onKeydownElement]);
     return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
 }
-function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
+function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onHiddenAnchor, onKeydownElement, refAnchor, refList, refSuggestions, rlsTheme }) {
+    const portal = useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor);
     const [labels, setLabels] = useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -1661,6 +1740,7 @@ function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher,
     const className = renderClassStatus('rls-field-list__suggestions', {
         disabled,
         higher,
+        portal: portal.active,
         visible
     });
     const onChangePattern = useCallback((event) => {
@@ -1673,7 +1753,8 @@ function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher,
         }
     }, [action?.onClick, action?.keepOpen, onClickBackdrop]);
     const searching = searchControl?.searching ?? false;
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
+    const suggestions = (jsxRuntimeExports.jsxs("div", { ref: refSuggestions, className: className, style: portal.active ? portal.style : undefined, "rls-theme": rlsTheme ?? portal.theme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
+    return portal.active ? createPortal(suggestions, document.body) : suggestions;
 }
 const RlsFieldListSuggestions = memo(RlsFieldListSuggestionsComponent);
 
@@ -2375,161 +2456,6 @@ function RlsCardComponent({ children, className, outline, rlsTheme }) {
 }
 const RlsCard = memo(RlsCardComponent);
 
-class ConfirmationResult extends SealedPartial {
-    static approved() {
-        return new ConfirmationResult('approved');
-    }
-    static reject() {
-        return new ConfirmationResult('reject');
-    }
-}
-function RlsConfirmationComponent({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
-    const classConfirmation = renderClassStatus('rls-confirmation', { visible }, className);
-    return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "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__content", 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: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
-}
-const RlsConfirmation = memo(RlsConfirmationComponent);
-const RlsConfirmationBase = RlsConfirmation;
-function useConfirmation() {
-    const [config, setConfig] = useState({});
-    const [visible, setVisible] = useState(false);
-    const configRef = useRef(config);
-    configRef.current = config;
-    const visibleRef = useRef(visible);
-    visibleRef.current = visible;
-    const RlsConfirmation = useMemo(() => {
-        return function RlsConfirmation(props) {
-            return ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmationBase, { ...props, ...configRef.current, visible: visibleRef.current }), document.body);
-        };
-    }, []);
-    const confirmation = useCallback((options) => {
-        return new Promise((resolve) => {
-            setConfig({
-                ...options,
-                approved: {
-                    label: options.approved?.label ?? reactI18n('confirmationActionApproved'),
-                    onClick: () => {
-                        setVisible(false);
-                        resolve(ConfirmationResult.approved());
-                    },
-                    type: options.approved?.type ?? 'raised',
-                    disabled: options.approved?.disabled,
-                    identifier: options.approved?.identifier,
-                    rlsTheme: options.approved?.rlsTheme
-                },
-                reject: options.reject
-                    ? {
-                        label: options.reject.label,
-                        onClick: () => {
-                            setVisible(false);
-                            resolve(ConfirmationResult.reject());
-                        },
-                        type: options.reject.type ?? 'flat',
-                        disabled: options.reject.disabled,
-                        identifier: options.reject.identifier,
-                        rlsTheme: options.reject.rlsTheme
-                    }
-                    : undefined
-            });
-            setVisible(true);
-        });
-    }, []);
-    return {
-        confirmation,
-        RlsConfirmation
-    };
-}
-
-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(table) {
-    const [scrolleable, setScrolleable] = useState(false);
-    const refTable = useRef(table ? table : null);
-    useEffect(() => {
-        const observer = refTable.current &&
-            createObserver({ setScrolleable, table: refTable.current });
-        return () => {
-            observer?.disconnect();
-        };
-    }, []);
-    return { refTable, scrolleable };
-}
-
-function RlsDatatableComponent({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
-    const datatable = useDatatable(table);
-    const className = renderClassStatus('rls-datatable', {
-        resizable,
-        scrolleable: resizable && datatable?.scrolleable
-    });
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsx("div", { className: "rls-datatable__table", children: jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.refTable, className: "rls-datatable__body", children: children })] }) }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
-}
-const RlsDatatable = memo(RlsDatatableComponent);
-function RlsDatatableHeaderComponent({ children, identifier, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableHeader = memo(RlsDatatableHeaderComponent);
-function RlsDatatableTitleComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
-    const classNameTitle = renderClassStatus('rls-datatable__title', { actions, control, truncated }, className);
-    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableTitle = memo(RlsDatatableTitleComponent);
-function RlsDatatableSubheaderComponent({ children, className, identifier, rlsTheme }) {
-    const classNameSubheader = renderClassStatus('rls-datatable__subheader', {}, className);
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableSubheader = memo(RlsDatatableSubheaderComponent);
-function RlsDatatableRecordComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
-    const classNameRecord = renderClassStatus('rls-datatable__record', { error, info, truncated, success, warning }, className);
-    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableRecord = memo(RlsDatatableRecordComponent);
-function RlsDatatableTotalsComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
-    const classNameTotals = renderClassStatus('rls-datatable__totals', { error, info, truncated, success, warning }, className);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableTotals = memo(RlsDatatableTotalsComponent);
-function RlsDatatableCellComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
-    const classNameCell = renderClassStatus('rls-datatable__cell', { actions, control, truncated }, className);
-    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableCell = memo(RlsDatatableCellComponent);
-function RlsDatatableDataComponent({ actions, children, className, control, identifier, truncated }) {
-    const classNameData = renderClassStatus('rls-datatable__data', { actions, control, truncated }, className);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
-}
-const RlsDatatableData = memo(RlsDatatableDataComponent);
-function RlsDatatableFloatingComponent({ children, className, identifier, invested, rlsTheme }) {
-    const classNameFloating = renderClassStatus('rls-datatable__floating', { invested }, className);
-    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
-}
-const RlsDatatableFloating = memo(RlsDatatableFloatingComponent);
-
-function RlsDropdownComponent({ children, controller, rlsTheme }) {
-    const className = renderClassStatus('rls-dropdown', {
-        visible: controller.visible
-    });
-    useEffect(() => {
-        function onCloseDropdown({ target }) {
-            if (!controller.component.current.contains(target)) {
-                controller.close();
-            }
-        }
-        document.addEventListener('click', onCloseDropdown);
-        return () => {
-            document.removeEventListener('click', onCloseDropdown);
-        };
-    }, []);
-    return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
-}
-const RlsDropdown = memo(RlsDropdownComponent);
-
 const MAX_LIST_HEIGHT_REM$1 = 90;
 const FALLBACK_REM_SIZE$1 = 16;
 function getRemSize$1() {
@@ -2571,6 +2497,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
     const refContent = useRef(null);
     const refList = useRef(null);
     const refInput = useRef(null);
+    const refSuggestions = useRef(null);
     const listIsOpen = useRef(false);
     const stableSuggestions = useStableSuggestions(suggestions);
     const collection = useMemo(() => new ListCollection(stableSuggestions, reference), [stableSuggestions, reference]);
@@ -2585,7 +2512,8 @@ function useListController({ suggestions, automatic, formControl, reference }) {
     const valueProtected = useRef(undefined);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
-            if (!refContent?.current?.contains(target)) {
+            if (!refContent?.current?.contains(target) &&
+                !refSuggestions?.current?.contains(target)) {
                 refreshState((state) => ({ ...state, listIsVisible: false }));
             }
         }
@@ -2602,7 +2530,29 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             formControl?.touch();
         }
     }, [state.listIsVisible]);
-    useEffect(() => {
+    const setState = useCallback((state) => {
+        const newState = state.listIsVisible
+            ? {
+                ...state,
+                higher: shouldDisplayHigher$1(refContent.current, refList.current)
+            }
+            : state;
+        refreshState((currentState) => ({ ...currentState, ...newState }));
+    }, []);
+    const setFormValue = useCallback((element, valueIsDefault = false) => {
+        refreshState((state) => ({
+            ...state,
+            value: element?.description || ''
+        }));
+        changeValueInternal.current = true;
+        if (valueIsDefault) {
+            formControl?.setDefaultValue(element?.value);
+        }
+        else {
+            formControl?.setValue(element?.value);
+        }
+    }, [formControl]);
+    const reconcileFormValue = useEffectEvent(() => {
         if (!changeValueInternal.current) {
             if (formControl?.value) {
                 const element = collection.find(formControl.value);
@@ -2638,29 +2588,10 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             }
         }
         changeValueInternal.current = false;
+    });
+    useEffect(() => {
+        reconcileFormValue();
     }, [collection, formControl?.value]);
-    const setState = useCallback((state) => {
-        const newState = state.listIsVisible
-            ? {
-                ...state,
-                higher: shouldDisplayHigher$1(refContent.current, refList.current)
-            }
-            : state;
-        refreshState((currentState) => ({ ...currentState, ...newState }));
-    }, []);
-    const setFormValue = useCallback((element, valueIsDefault = false) => {
-        refreshState((state) => ({
-            ...state,
-            value: element?.description || ''
-        }));
-        changeValueInternal.current = true;
-        if (valueIsDefault) {
-            formControl?.setDefaultValue(element?.value);
-        }
-        else {
-            formControl?.setValue(element?.value);
-        }
-    }, [formControl]);
     const navigationInput = useCallback((event) => {
         if (state.listIsVisible) {
             const newPosition = navigationListFromInput({
@@ -2689,6 +2620,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
         refContent,
         refInput,
         refList,
+        refSuggestions,
         setFormValue,
         setState
     }), [state, navigationElement, navigationInput, setFormValue, setState]);
@@ -2850,9 +2782,9 @@ function useFieldAutocomplete(props) {
     ]);
 }
 
-function RlsFieldAutocompleteTemplateComponent(props) {
+function RlsChooserAutocompleteTemplateComponent(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { render, action, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const { render, action, children, formControl, onSearch, rlsTheme, searching } = props;
     const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -2865,13 +2797,11 @@ function RlsFieldAutocompleteTemplateComponent(props) {
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
-    const className = renderClassStatus('rls-field-box', {
+    const className = renderClassStatus('rls-chooser', {
         focused: autocomplete.focused && !disabled,
-        error: formControl?.wrong,
-        disabled,
-        readonly: props.readOnly,
-        selected: !!autocomplete.value
-    }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
+        visible: autocomplete.listIsVisible,
+        disabled
+    }, `rls-chooser-autocomplete ${props.className ?? ''}`);
     const onClickPattern = useCallback(() => {
         onSearch?.(autocomplete.pattern);
     }, [onSearch, autocomplete.pattern]);
@@ -2881,6 +2811,18 @@ function RlsFieldAutocompleteTemplateComponent(props) {
         }
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
+    const onKeydownTrigger = useCallback((event) => {
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                event.preventDefault();
+                autocomplete.onClickControl();
+                break;
+            case 'Escape':
+                autocomplete.onClickBackdrop();
+                break;
+        }
+    }, [autocomplete.onClickControl, autocomplete.onClickBackdrop]);
     const searchControl = useMemo(() => ({
         pattern: autocomplete.pattern,
         placeholder: listInputPlaceholder,
@@ -2903,24 +2845,582 @@ function RlsFieldAutocompleteTemplateComponent(props) {
         onClickPattern,
         onSearch
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
-}
-const RlsFieldAutocompleteTemplate = memo(RlsFieldAutocompleteTemplateComponent);
-function RlsFieldAutocompleteComponent(props) {
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": autocomplete.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : autocomplete.onClickControl, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
+                    ? children({
+                        description: autocomplete.value,
+                        listIsVisible: autocomplete.listIsVisible,
+                        pattern: autocomplete.pattern,
+                        value: formControl?.value ?? props.value
+                    })
+                    : children }), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refAnchor: autocomplete.refContent, refList: autocomplete.refList, refSuggestions: autocomplete.refSuggestions, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop, onHiddenAnchor: autocomplete.onClickBackdrop })] }));
+}
+const RlsChooserAutocompleteTemplate = memo(RlsChooserAutocompleteTemplateComponent);
+function RlsChooserAutocompleteComponent(props) {
     const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
-    return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
+    return jsxRuntimeExports.jsx(RlsChooserAutocompleteTemplate, { ...props, render: render });
 }
-const RlsFieldAutocomplete = memo(RlsFieldAutocompleteComponent);
+const RlsChooserAutocomplete = memo(RlsChooserAutocompleteComponent);
 
-function RlsModalComponent({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
-    const classNameModal = renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
-    const onClickBackdrop = useCallback(() => {
-        if (autoclose) {
-            controller?.close();
-        }
-        onBackdrop?.();
-    }, [autoclose, controller, onBackdrop]);
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
+const MAX_LIST_HEIGHT_REM = 90;
+const FALLBACK_REM_SIZE = 16;
+function getRemSize() {
+    if (typeof window === 'undefined') {
+        return FALLBACK_REM_SIZE;
+    }
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE;
+}
+function shouldDisplayHigher(content, list) {
+    if (!content) {
+        return false;
+    }
+    const { top, bottom } = content.getBoundingClientRect();
+    const spaceAbove = top;
+    const spaceBelow = window.innerHeight - bottom;
+    const maxHeight = MAX_LIST_HEIGHT_REM * getRemSize();
+    const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
+    if (spaceBelow >= desiredHeight) {
+        return false;
+    }
+    if (spaceAbove >= desiredHeight) {
+        return true;
+    }
+    return spaceAbove > spaceBelow;
+}
+function useFieldList(props) {
+    const { suggestions, disabled } = props;
+    const refContent = useRef(null);
+    const refList = useRef(null);
+    const refSuggestions = useRef(null);
+    const formControl = props.formControl;
+    const [state, setState] = useState({
+        higher: false,
+        listIsVisible: false
+    });
+    const [selected, setSelected] = useState([]);
+    useEffect(() => {
+        function onCloseSuggestions({ target }) {
+            if (!refContent?.current?.contains(target) &&
+                !refSuggestions?.current?.contains(target)) {
+                setState((state) => ({ ...state, listIsVisible: false }));
+            }
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    useEffect(() => {
+        const formValue = formControl?.value;
+        if (formValue !== undefined && formValue !== null && formValue.length) {
+            setSelected(suggestions.filter((state) => formValue.some((value) => state.compareTo(value))));
+        }
+        else {
+            setSelected([]);
+        }
+    }, [formControl?.value, suggestions]);
+    const setListState = useCallback((controllerState) => {
+        setState((state) => {
+            const newState = controllerState.listIsVisible !== undefined
+                ? {
+                    ...controllerState,
+                    ...(controllerState.listIsVisible
+                        ? {
+                            higher: shouldDisplayHigher(refContent.current, refList.current)
+                        }
+                        : {})
+                }
+                : controllerState;
+            return { ...state, ...newState };
+        });
+    }, []);
+    const toggleElement = useCallback((element) => {
+        const alreadySelected = selected.some((state) => state.compareTo(element.value));
+        const newSelected = alreadySelected
+            ? selected.filter((state) => !state.compareTo(element.value))
+            : [...selected, element];
+        const newValues = newSelected.map((state) => state.value);
+        setSelected(newSelected);
+        formControl?.setValue(newValues);
+        props.onValue?.(newValues);
+    }, [selected, formControl, props.onValue]);
+    const isSelected = useCallback((element) => {
+        return selected.some((state) => state.compareTo(element.value));
+    }, [selected]);
+    const onClickInput = useCallback(() => {
+        if (!props.readOnly) {
+            setListState({ listIsVisible: true });
+        }
+    }, [setListState, props.readOnly]);
+    const onClickBackdrop = useCallback(() => {
+        setListState({ listIsVisible: false });
+    }, [setListState]);
+    const onClickAction = useCallback(() => {
+        if (!disabled && !props.readOnly) {
+            setListState({ listIsVisible: !state.listIsVisible });
+        }
+    }, [disabled, props.readOnly, setListState, state.listIsVisible]);
+    const onClickElement = useCallback((element) => {
+        return () => {
+            toggleElement(element);
+        };
+    }, [toggleElement]);
+    const onRemoveElement = useCallback((element) => {
+        return (event) => {
+            event.stopPropagation();
+            const newSelected = selected.filter((state) => !state.compareTo(element.value));
+            const newValues = newSelected.map((state) => state.value);
+            setSelected(newSelected);
+            formControl?.setValue(newValues);
+            props.onValue?.(newValues);
+        };
+    }, [selected, formControl, props.onValue]);
+    const onKeydownElement = useCallback((element) => {
+        return (event) => {
+            if (event.code === 'Enter') {
+                toggleElement(element);
+            }
+        };
+    }, [toggleElement]);
+    return useMemo(() => ({
+        ...state,
+        selected,
+        refContent,
+        refList,
+        refSuggestions,
+        isSelected,
+        onClickAction,
+        onClickBackdrop,
+        onClickElement,
+        onClickInput,
+        onKeydownElement,
+        onRemoveElement
+    }), [
+        state,
+        selected,
+        isSelected,
+        onClickAction,
+        onClickBackdrop,
+        onClickElement,
+        onClickInput,
+        onKeydownElement,
+        onRemoveElement
+    ]);
+}
+
+function RlsChooserListTemplateComponent(props) {
+    const fieldList = useFieldList(props);
+    const { render, suggestions, action, children, formControl, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = renderClassStatus('rls-chooser', {
+        visible: fieldList.listIsVisible,
+        disabled
+    }, `rls-chooser-list ${props.className ?? ''}`);
+    const onKeydownTrigger = useCallback((event) => {
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                event.preventDefault();
+                fieldList.onClickAction();
+                break;
+            case 'Escape':
+                fieldList.onClickBackdrop();
+                break;
+        }
+    }, [fieldList.onClickAction, fieldList.onClickBackdrop]);
+    const renderWithCheckbox = useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": fieldList.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : fieldList.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
+                    ? children({
+                        listIsVisible: fieldList.listIsVisible,
+                        selected: fieldList.selected
+                    })
+                    : children }), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
+}
+const RlsChooserListTemplate = memo(RlsChooserListTemplateComponent);
+function RlsChooserListComponent(props) {
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsChooserListTemplate, { ...props, render: render });
+}
+const RlsChooserList = memo(RlsChooserListComponent);
+
+function useFieldSelect(props) {
+    const controller = useListController(props);
+    useEffect(() => {
+        if (props.disabled) {
+            controller.setState({ focused: false });
+        }
+    }, [props.disabled]);
+    const onFocusInput = useCallback(() => {
+        controller.setState({ focused: true });
+    }, [controller.setState]);
+    const onBlurInput = useCallback(() => {
+        controller.setState({ focused: false });
+    }, [controller.setState]);
+    const onClickInput = useCallback(() => {
+        if (!props.readOnly) {
+            controller.setState({ listIsVisible: true });
+        }
+    }, [controller.setState, props.readOnly]);
+    const onKeydownInput = useCallback((event) => {
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                controller.setState({ listIsVisible: true });
+                break;
+            case 'Escape':
+            case 'Tab':
+                controller.setState({ listIsVisible: false });
+                break;
+            default:
+                controller.navigationInput(event);
+                break;
+        }
+    }, [controller.setState, controller.navigationInput]);
+    const onClickAction = useCallback(() => {
+        const removable = !props.unremovable && !!controller.value;
+        if (removable) {
+            controller.setState({ listIsVisible: false });
+            controller.setFormValue(undefined);
+            props.onValue?.(props.value);
+        }
+        else {
+            const listIsVisible = !controller.listIsVisible;
+            controller.setState({ listIsVisible });
+            if (listIsVisible) {
+                controller.refInput?.current?.focus();
+            }
+        }
+    }, [
+        controller.listIsVisible,
+        controller.value,
+        controller.setState,
+        controller.setFormValue,
+        props.unremovable,
+        props.onValue
+    ]);
+    const onClickBackdrop = useCallback(() => {
+        controller.setState({ listIsVisible: false });
+    }, [controller.setState]);
+    const onChange = useCallback((element) => {
+        if (!props.disabled) {
+            controller.refInput?.current?.focus();
+        }
+        if (props.onSelect) {
+            controller.setState({ listIsVisible: false });
+            if (element.value) {
+                props.onSelect(element.value);
+            }
+        }
+        else {
+            controller.setFormValue(element);
+            controller.setState({ listIsVisible: false });
+        }
+        props.onValue?.(element.value);
+    }, [
+        controller.setState,
+        controller.setFormValue,
+        props.onSelect,
+        props.onValue,
+        props.disabled
+    ]);
+    const onClickElement = useCallback((element) => {
+        return () => {
+            onChange(element);
+        };
+    }, [onChange]);
+    const onKeydownElement = useCallback((element) => {
+        return (event) => {
+            if (event.code === 'Enter') {
+                onChange(element);
+            }
+            else {
+                controller.navigationElement(event);
+            }
+        };
+    }, [onChange, controller.navigationElement]);
+    return useMemo(() => ({
+        ...controller,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    }), [
+        controller,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    ]);
+}
+
+function RlsChooserSelectTemplateComponent(props) {
+    const select = useFieldSelect({ ...props, unremovable: true });
+    const { render, suggestions, action, children, formControl, rlsTheme } = props;
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = renderClassStatus('rls-chooser', {
+        focused: select.focused && !disabled,
+        visible: select.listIsVisible,
+        disabled
+    }, `rls-chooser-select ${props.className ?? ''}`);
+    const onKeydownTrigger = useCallback((event) => {
+        if (event.code === 'Space') {
+            event.preventDefault();
+        }
+        select.onKeydownInput(event);
+    }, [select.onKeydownInput]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": select.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : select.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, onFocus: select.onFocusInput, onBlur: select.onBlurInput, children: typeof children === 'function'
+                    ? children({
+                        description: select.value,
+                        listIsVisible: select.listIsVisible,
+                        value: formControl?.value ?? props.value
+                    })
+                    : children }), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refAnchor: select.refContent, refList: select.refList, refSuggestions: select.refSuggestions, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop, onHiddenAnchor: select.onClickBackdrop })] }));
+}
+const RlsChooserSelectTemplate = memo(RlsChooserSelectTemplateComponent);
+function RlsChooserSelectComponent(props) {
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsChooserSelectTemplate, { ...props, render: render });
+}
+const RlsChooserSelect = memo(RlsChooserSelectComponent);
+
+class ConfirmationResult extends SealedPartial {
+    static approved() {
+        return new ConfirmationResult('approved');
+    }
+    static reject() {
+        return new ConfirmationResult('reject');
+    }
+}
+function RlsConfirmationComponent({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
+    const classConfirmation = renderClassStatus('rls-confirmation', { visible }, className);
+    return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "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__content", 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: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+}
+const RlsConfirmation = memo(RlsConfirmationComponent);
+const RlsConfirmationBase = RlsConfirmation;
+function useConfirmation() {
+    const [config, setConfig] = useState({});
+    const [visible, setVisible] = useState(false);
+    const configRef = useRef(config);
+    configRef.current = config;
+    const visibleRef = useRef(visible);
+    visibleRef.current = visible;
+    const RlsConfirmation = useMemo(() => {
+        return function RlsConfirmation(props) {
+            return ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmationBase, { ...props, ...configRef.current, visible: visibleRef.current }), document.body);
+        };
+    }, []);
+    const confirmation = useCallback((options) => {
+        return new Promise((resolve) => {
+            setConfig({
+                ...options,
+                approved: {
+                    label: options.approved?.label ?? reactI18n('confirmationActionApproved'),
+                    onClick: () => {
+                        setVisible(false);
+                        resolve(ConfirmationResult.approved());
+                    },
+                    type: options.approved?.type ?? 'raised',
+                    disabled: options.approved?.disabled,
+                    identifier: options.approved?.identifier,
+                    rlsTheme: options.approved?.rlsTheme
+                },
+                reject: options.reject
+                    ? {
+                        label: options.reject.label,
+                        onClick: () => {
+                            setVisible(false);
+                            resolve(ConfirmationResult.reject());
+                        },
+                        type: options.reject.type ?? 'flat',
+                        disabled: options.reject.disabled,
+                        identifier: options.reject.identifier,
+                        rlsTheme: options.reject.rlsTheme
+                    }
+                    : undefined
+            });
+            setVisible(true);
+        });
+    }, []);
+    return {
+        confirmation,
+        RlsConfirmation
+    };
+}
+
+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(table) {
+    const [scrolleable, setScrolleable] = useState(false);
+    const refTable = useRef(table ? table : null);
+    useEffect(() => {
+        const observer = refTable.current &&
+            createObserver({ setScrolleable, table: refTable.current });
+        return () => {
+            observer?.disconnect();
+        };
+    }, []);
+    return { refTable, scrolleable };
+}
+
+function RlsDatatableComponent({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
+    const datatable = useDatatable(table);
+    const className = renderClassStatus('rls-datatable', {
+        resizable,
+        scrolleable: resizable && datatable?.scrolleable
+    });
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsx("div", { className: "rls-datatable__table", children: jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.refTable, className: "rls-datatable__body", children: children })] }) }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
+}
+const RlsDatatable = memo(RlsDatatableComponent);
+function RlsDatatableHeaderComponent({ children, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableHeader = memo(RlsDatatableHeaderComponent);
+function RlsDatatableTitleComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
+    const classNameTitle = renderClassStatus('rls-datatable__title', { actions, control, truncated }, className);
+    return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableTitle = memo(RlsDatatableTitleComponent);
+function RlsDatatableSubheaderComponent({ children, className, identifier, rlsTheme }) {
+    const classNameSubheader = renderClassStatus('rls-datatable__subheader', {}, className);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableSubheader = memo(RlsDatatableSubheaderComponent);
+function RlsDatatableRecordComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
+    const classNameRecord = renderClassStatus('rls-datatable__record', { error, info, truncated, success, warning }, className);
+    return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableRecord = memo(RlsDatatableRecordComponent);
+function RlsDatatableTotalsComponent({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
+    const classNameTotals = renderClassStatus('rls-datatable__totals', { error, info, truncated, success, warning }, className);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableTotals = memo(RlsDatatableTotalsComponent);
+function RlsDatatableCellComponent({ actions, children, className, control, identifier, rlsTheme, truncated }) {
+    const classNameCell = renderClassStatus('rls-datatable__cell', { actions, control, truncated }, className);
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableCell = memo(RlsDatatableCellComponent);
+function RlsDatatableDataComponent({ actions, children, className, control, identifier, truncated }) {
+    const classNameData = renderClassStatus('rls-datatable__data', { actions, control, truncated }, className);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
+}
+const RlsDatatableData = memo(RlsDatatableDataComponent);
+function RlsDatatableFloatingComponent({ children, className, identifier, invested, rlsTheme }) {
+    const classNameFloating = renderClassStatus('rls-datatable__floating', { invested }, className);
+    return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
+}
+const RlsDatatableFloating = memo(RlsDatatableFloatingComponent);
+
+function RlsDropdownComponent({ children, controller, rlsTheme }) {
+    const className = renderClassStatus('rls-dropdown', {
+        visible: controller.visible
+    });
+    useEffect(() => {
+        function onCloseDropdown({ target }) {
+            if (!controller.component.current.contains(target)) {
+                controller.close();
+            }
+        }
+        document.addEventListener('click', onCloseDropdown);
+        return () => {
+            document.removeEventListener('click', onCloseDropdown);
+        };
+    }, []);
+    return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
+}
+const RlsDropdown = memo(RlsDropdownComponent);
+
+function RlsFieldAutocompleteTemplateComponent(props) {
+    const autocomplete = useFieldAutocomplete(props);
+    const { render, action, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setListInputPlaceholder(reactI18n('listInputPlaceholder'));
+        });
+    }, []);
+    useEffect(() => {
+        props.onInput?.(autocomplete.pattern);
+    }, [autocomplete.pattern, props.onInput]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = renderClassStatus('rls-field-box', {
+        focused: autocomplete.focused && !disabled,
+        error: formControl?.wrong,
+        disabled,
+        readonly: props.readOnly,
+        selected: !!autocomplete.value
+    }, `rls-field-list rls-field-autocomplete ${props.className ?? ''}`);
+    const onClickPattern = useCallback(() => {
+        onSearch?.(autocomplete.pattern);
+    }, [onSearch, autocomplete.pattern]);
+    const onKeyDownPattern = useCallback((event) => {
+        if (event.key === 'Enter') {
+            onSearch?.(autocomplete.pattern);
+        }
+        autocomplete.onKeydownInput(event);
+    }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
+    const searchControl = useMemo(() => ({
+        pattern: autocomplete.pattern,
+        placeholder: listInputPlaceholder,
+        searching,
+        refInput: autocomplete.refInput,
+        onChange: autocomplete.setPattern,
+        onFocus: autocomplete.onFocusInput,
+        onBlur: autocomplete.onBlurInput,
+        onKeyDown: onKeyDownPattern,
+        onSearch: onSearch ? onClickPattern : undefined
+    }), [
+        autocomplete.pattern,
+        autocomplete.refInput,
+        autocomplete.setPattern,
+        autocomplete.onFocusInput,
+        autocomplete.onBlurInput,
+        listInputPlaceholder,
+        searching,
+        onKeyDownPattern,
+        onClickPattern,
+        onSearch
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refAnchor: autocomplete.refContent, refList: autocomplete.refList, refSuggestions: autocomplete.refSuggestions, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop, onHiddenAnchor: autocomplete.onClickBackdrop })] }));
+}
+const RlsFieldAutocompleteTemplate = memo(RlsFieldAutocompleteTemplateComponent);
+function RlsFieldAutocompleteComponent(props) {
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
+}
+const RlsFieldAutocomplete = memo(RlsFieldAutocompleteComponent);
+
+function RlsModalComponent({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
+    const classNameModal = renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
+    const onClickBackdrop = useCallback(() => {
+        if (autoclose) {
+            controller?.close();
+        }
+        onBackdrop?.();
+    }, [autoclose, controller, onBackdrop]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 const RlsModal = memo(RlsModalComponent);
 
@@ -3695,192 +4195,48 @@ function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, f
     const disabled = useMemo(() => {
         return formControl?.disabled || disabledProps;
     }, [formControl?.disabled, disabledProps]);
-    const className = renderClassStatus('rls-field-box', {
-        disabled,
-        readonly: readOnly
-    });
-    const dateRangeValue = useMemo(() => {
-        return formControl ? formControl.value : value;
-    }, [formControl?.value, value]);
-    const status = useMemo(() => {
-        return {
-            icon: dateRangeValue ? 'trash-2' : 'calendar',
-            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
-        };
-    }, [dateRangeValue]);
-    const onClickInput = useCallback(() => {
-        if (!readOnly) {
-            setModalIsVisible(true);
-        }
-    }, [readOnly]);
-    const onChange = useCallback((value) => {
-        setValue(value);
-        onValue?.(value);
-    }, [onValue]);
-    const onClickAction = useCallback(() => {
-        if (dateRangeValue) {
-            formControl?.setValue(valueInitial);
-            formControl?.touch();
-            onChange(valueInitial);
-        }
-        else {
-            setModalIsVisible(true);
-        }
-    }, [dateRangeValue, formControl, valueInitial, onChange]);
-    const onCloseModal = useCallback((dateRange) => {
-        if (dateRange) {
-            onChange(dateRange);
-        }
-        formControl?.touch();
-        setModalIsVisible(false);
-    }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDateRange, { visible: modalIsVisible, formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
-}
-const RlsFieldDateRange = memo(RlsFieldDateRangeComponent);
-
-const MAX_LIST_HEIGHT_REM = 90;
-const FALLBACK_REM_SIZE = 16;
-function getRemSize() {
-    if (typeof window === 'undefined') {
-        return FALLBACK_REM_SIZE;
-    }
-    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE;
-}
-function shouldDisplayHigher(content, list) {
-    if (!content) {
-        return false;
-    }
-    const { top, bottom } = content.getBoundingClientRect();
-    const spaceAbove = top;
-    const spaceBelow = window.innerHeight - bottom;
-    const maxHeight = MAX_LIST_HEIGHT_REM * getRemSize();
-    const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
-    if (spaceBelow >= desiredHeight) {
-        return false;
-    }
-    if (spaceAbove >= desiredHeight) {
-        return true;
-    }
-    return spaceAbove > spaceBelow;
-}
-function useFieldList(props) {
-    const { suggestions, disabled } = props;
-    const refContent = useRef(null);
-    const refList = useRef(null);
-    const formControl = props.formControl;
-    const [state, setState] = useState({
-        higher: false,
-        listIsVisible: false
-    });
-    const [selected, setSelected] = useState([]);
-    useEffect(() => {
-        function onCloseSuggestions({ target }) {
-            if (!refContent?.current?.contains(target)) {
-                setState((state) => ({ ...state, listIsVisible: false }));
-            }
-        }
-        document.addEventListener('click', onCloseSuggestions);
-        return () => {
-            document.removeEventListener('click', onCloseSuggestions);
+    const className = renderClassStatus('rls-field-box', {
+        disabled,
+        readonly: readOnly
+    });
+    const dateRangeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
         };
-    }, []);
-    useEffect(() => {
-        const formValue = formControl?.value;
-        if (formValue !== undefined && formValue !== null && formValue.length) {
-            setSelected(suggestions.filter((state) => formValue.some((value) => state.compareTo(value))));
-        }
-        else {
-            setSelected([]);
-        }
-    }, [formControl?.value, suggestions]);
-    const setListState = useCallback((controllerState) => {
-        setState((state) => {
-            const newState = controllerState.listIsVisible !== undefined
-                ? {
-                    ...controllerState,
-                    ...(controllerState.listIsVisible
-                        ? {
-                            higher: shouldDisplayHigher(refContent.current, refList.current)
-                        }
-                        : {})
-                }
-                : controllerState;
-            return { ...state, ...newState };
-        });
-    }, []);
-    const toggleElement = useCallback((element) => {
-        const alreadySelected = selected.some((state) => state.compareTo(element.value));
-        const newSelected = alreadySelected
-            ? selected.filter((state) => !state.compareTo(element.value))
-            : [...selected, element];
-        const newValues = newSelected.map((state) => state.value);
-        setSelected(newSelected);
-        formControl?.setValue(newValues);
-        props.onValue?.(newValues);
-    }, [selected, formControl, props.onValue]);
-    const isSelected = useCallback((element) => {
-        return selected.some((state) => state.compareTo(element.value));
-    }, [selected]);
+    }, [dateRangeValue]);
     const onClickInput = useCallback(() => {
-        if (!props.readOnly) {
-            setListState({ listIsVisible: true });
+        if (!readOnly) {
+            setModalIsVisible(true);
         }
-    }, [setListState, props.readOnly]);
-    const onClickBackdrop = useCallback(() => {
-        setListState({ listIsVisible: false });
-    }, [setListState]);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (!disabled && !props.readOnly) {
-            setListState({ listIsVisible: !state.listIsVisible });
+        if (dateRangeValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
         }
-    }, [disabled, props.readOnly, setListState, state.listIsVisible]);
-    const onClickElement = useCallback((element) => {
-        return () => {
-            toggleElement(element);
-        };
-    }, [toggleElement]);
-    const onRemoveElement = useCallback((element) => {
-        return (event) => {
-            event.stopPropagation();
-            const newSelected = selected.filter((state) => !state.compareTo(element.value));
-            const newValues = newSelected.map((state) => state.value);
-            setSelected(newSelected);
-            formControl?.setValue(newValues);
-            props.onValue?.(newValues);
-        };
-    }, [selected, formControl, props.onValue]);
-    const onKeydownElement = useCallback((element) => {
-        return (event) => {
-            if (event.code === 'Enter') {
-                toggleElement(element);
-            }
-        };
-    }, [toggleElement]);
-    return useMemo(() => ({
-        ...state,
-        selected,
-        refContent,
-        refList,
-        isSelected,
-        onClickAction,
-        onClickBackdrop,
-        onClickElement,
-        onClickInput,
-        onKeydownElement,
-        onRemoveElement
-    }), [
-        state,
-        selected,
-        isSelected,
-        onClickAction,
-        onClickBackdrop,
-        onClickElement,
-        onClickInput,
-        onKeydownElement,
-        onRemoveElement
-    ]);
+        else {
+            setModalIsVisible(true);
+        }
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
+    const onCloseModal = useCallback((dateRange) => {
+        if (dateRange) {
+            onChange(dateRange);
+        }
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDateRange, { visible: modalIsVisible, formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
+const RlsFieldDateRange = memo(RlsFieldDateRangeComponent);
 
 function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, placeholder, rlsTheme, ...props }) {
     const disabled = useMemo(() => {
@@ -3893,7 +4249,7 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
         readonly: props.readOnly
     }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
     const renderWithCheckbox = useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refList: fieldList.refList, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
 }
 function RlsFieldListTemplateComponent(props) {
     const fieldList = useFieldList(props);
@@ -3907,124 +4263,6 @@ function RlsFieldListComponent(props) {
 }
 const RlsFieldList = memo(RlsFieldListComponent);
 
-function useFieldSelect(props) {
-    const controller = useListController(props);
-    useEffect(() => {
-        if (props.disabled) {
-            controller.setState({ focused: false });
-        }
-    }, [props.disabled]);
-    const onFocusInput = useCallback(() => {
-        controller.setState({ focused: true });
-    }, [controller.setState]);
-    const onBlurInput = useCallback(() => {
-        controller.setState({ focused: false });
-    }, [controller.setState]);
-    const onClickInput = useCallback(() => {
-        if (!props.readOnly) {
-            controller.setState({ listIsVisible: true });
-        }
-    }, [controller.setState, props.readOnly]);
-    const onKeydownInput = useCallback((event) => {
-        switch (event.code) {
-            case 'Space':
-            case 'Enter':
-                controller.setState({ listIsVisible: true });
-                break;
-            case 'Escape':
-            case 'Tab':
-                controller.setState({ listIsVisible: false });
-                break;
-            default:
-                controller.navigationInput(event);
-                break;
-        }
-    }, [controller.setState, controller.navigationInput]);
-    const onClickAction = useCallback(() => {
-        const removable = !props.unremovable && !!controller.value;
-        if (removable) {
-            controller.setState({ listIsVisible: false });
-            controller.setFormValue(undefined);
-            props.onValue?.(props.value);
-        }
-        else {
-            const listIsVisible = !controller.listIsVisible;
-            controller.setState({ listIsVisible });
-            if (listIsVisible) {
-                controller.refInput?.current?.focus();
-            }
-        }
-    }, [
-        controller.listIsVisible,
-        controller.value,
-        controller.setState,
-        controller.setFormValue,
-        props.unremovable,
-        props.onValue
-    ]);
-    const onClickBackdrop = useCallback(() => {
-        controller.setState({ listIsVisible: false });
-    }, [controller.setState]);
-    const onChange = useCallback((element) => {
-        if (!props.disabled) {
-            controller.refInput?.current?.focus();
-        }
-        if (props.onSelect) {
-            controller.setState({ listIsVisible: false });
-            if (element.value) {
-                props.onSelect(element.value);
-            }
-        }
-        else {
-            controller.setFormValue(element);
-            controller.setState({ listIsVisible: false });
-        }
-        props.onValue?.(element.value);
-    }, [
-        controller.setState,
-        controller.setFormValue,
-        props.onSelect,
-        props.onValue,
-        props.disabled
-    ]);
-    const onClickElement = useCallback((element) => {
-        return () => {
-            onChange(element);
-        };
-    }, [onChange]);
-    const onKeydownElement = useCallback((element) => {
-        return (event) => {
-            if (event.code === 'Enter') {
-                onChange(element);
-            }
-            else {
-                controller.navigationElement(event);
-            }
-        };
-    }, [onChange, controller.navigationElement]);
-    return useMemo(() => ({
-        ...controller,
-        onBlurInput,
-        onClickAction,
-        onClickBackdrop,
-        onClickInput,
-        onClickElement,
-        onFocusInput,
-        onKeydownElement,
-        onKeydownInput
-    }), [
-        controller,
-        onBlurInput,
-        onClickAction,
-        onClickBackdrop,
-        onClickInput,
-        onClickElement,
-        onFocusInput,
-        onKeydownElement,
-        onKeydownInput
-    ]);
-}
-
 function RlsFieldSelectTemplateComponent(props) {
     const select = useFieldSelect(props);
     const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
@@ -4037,7 +4275,7 @@ function RlsFieldSelectTemplateComponent(props) {
         disabled: disabled,
         readonly: props.readOnly
     }, `rls-field-list rls-field-select ${props.className ?? ''}`);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refAnchor: select.refContent, refList: select.refList, refSuggestions: select.refSuggestions, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop, onHiddenAnchor: select.onClickBackdrop })] }));
 }
 const RlsFieldSelectTemplate = memo(RlsFieldSelectTemplateComponent);
 function RlsFieldSelectComponent(props) {
@@ -4052,54 +4290,56 @@ function RlsFormNavigationComponent({ children, className, controller, visible,
 }
 const RlsFormNavigation = memo(RlsFormNavigationComponent);
 
-function useRelocationOnComponent({ container, element, onDrag }) {
+function useRelocationOnComponent({ container: containerRef, element: elementRef, onDrag }) {
     const position = useRef({ x: 0, y: 0 });
     const dragOffset = useRef({ x: 0, y: 0 });
     const dragging = useRef(false);
-    const getClientX = useCallback((positionX) => {
+    function getClientX(positionX) {
         let clientX = position.current.x + positionX - dragOffset.current.x;
         if (clientX < 0) {
             clientX = 0;
         }
         else {
-            const width = clientX + element.current.offsetWidth;
-            if (width > container.current.offsetWidth) {
-                clientX = container.current.offsetWidth - element.current.offsetWidth;
+            const width = clientX + elementRef.current.offsetWidth;
+            if (width > containerRef.current.offsetWidth) {
+                clientX =
+                    containerRef.current.offsetWidth - elementRef.current.offsetWidth;
             }
         }
         return clientX;
-    }, []);
-    const getClientY = useCallback((positionY) => {
+    }
+    function getClientY(positionY) {
         let clientY = position.current.y + positionY - dragOffset.current.y;
         if (clientY < 0) {
             clientY = 0;
         }
         else {
-            const height = clientY + element.current.offsetHeight;
-            if (height > container.current.offsetHeight) {
-                clientY = container.current.offsetHeight - element.current.offsetHeight;
+            const height = clientY + elementRef.current.offsetHeight;
+            if (height > containerRef.current.offsetHeight) {
+                clientY =
+                    containerRef.current.offsetHeight - elementRef.current.offsetHeight;
             }
         }
         return clientY;
-    }, []);
-    const start = useCallback((positionX, positionY) => {
+    }
+    const start = useEffectEvent((positionX, positionY) => {
         dragOffset.current = {
             x: positionX,
             y: positionY
         };
         position.current = {
-            x: element.current.offsetLeft,
-            y: element.current.offsetTop
+            x: elementRef.current.offsetLeft,
+            y: elementRef.current.offsetTop
         };
         dragging.current = true;
-    }, []);
-    const relocation = useCallback((positionX, positionY) => {
+    });
+    const relocation = useEffectEvent((positionX, positionY) => {
         const clientX = getClientX(positionX);
         const clientY = getClientY(positionY);
-        element.current.style.top = `${clientY}px`;
-        element.current.style.left = `${clientX}px`;
+        elementRef.current.style.top = `${clientY}px`;
+        elementRef.current.style.left = `${clientX}px`;
         onDrag?.();
-    }, []);
+    });
     useEffect(() => {
         const mousedown = (event) => {
             start(event.clientX, event.clientY);
@@ -4127,30 +4367,28 @@ function useRelocationOnComponent({ container, element, onDrag }) {
         const touchend = () => {
             dragging.current = false;
         };
-        element.current.addEventListener('mousedown', mousedown);
-        element.current.addEventListener('mousemove', mousemove);
-        element.current.addEventListener('mouseup', mouseup);
-        element.current.addEventListener('touchstart', touchstart);
-        element.current.addEventListener('touchmove', touchmove);
-        element.current.addEventListener('touchend', touchend);
+        elementRef.current.addEventListener('mousedown', mousedown);
+        elementRef.current.addEventListener('mousemove', mousemove);
+        elementRef.current.addEventListener('mouseup', mouseup);
+        elementRef.current.addEventListener('touchstart', touchstart);
+        elementRef.current.addEventListener('touchmove', touchmove);
+        elementRef.current.addEventListener('touchend', touchend);
         return () => {
-            element.current?.removeEventListener('mousedown', mousedown);
-            element.current?.removeEventListener('mousemove', mousemove);
-            element.current?.removeEventListener('mouseup', mouseup);
-            element.current?.removeEventListener('touchstart', touchstart);
-            element.current?.removeEventListener('touchmove', touchmove);
-            element.current?.removeEventListener('touchend', touchend);
+            elementRef.current?.removeEventListener('mousedown', mousedown);
+            elementRef.current?.removeEventListener('mousemove', mousemove);
+            elementRef.current?.removeEventListener('mouseup', mouseup);
+            elementRef.current?.removeEventListener('touchstart', touchstart);
+            elementRef.current?.removeEventListener('touchmove', touchmove);
+            elementRef.current?.removeEventListener('touchend', touchend);
         };
     }, []);
 }
 
 function useResize({ refElement, onResize }) {
     const dimension = useRef({ height: 0, width: 0 });
-    const onResizeRef = useRef(onResize);
-    onResizeRef.current = onResize;
-    const observer = useCallback((entries) => {
+    const observer = useEffectEvent((entries) => {
         const { height, width } = entries[0].contentRect;
-        onResizeRef.current?.({
+        onResize?.({
             current: dimension.current,
             dimension: {
                 height,
@@ -4158,13 +4396,13 @@ function useResize({ refElement, onResize }) {
             }
         });
         dimension.current = { height, width };
-    }, []);
+    });
     useEffect(() => {
         dimension.current = {
             height: refElement.current.offsetHeight,
             width: refElement.current.offsetWidth
         };
-        const resizeObserver = new ResizeObserver(observer);
+        const resizeObserver = new ResizeObserver((entries) => observer(entries));
         resizeObserver.observe(refElement.current);
         return () => {
             resizeObserver.disconnect();
@@ -4829,5 +5067,5 @@ function toggleAppTheme() {
     return theme;
 }
 
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map