@rolster/react-components 18.15.23 → 18.15.31

package/dist/cjs/index.js

@@ -2039,40 +2039,43 @@ function RlsDatatableData({ children, className, control, overflow }) {
 function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+        }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
+function createObserver(options) {
+    const { setScrolleable, table } = options;
+    const observer = new ResizeObserver(() => {
+        const scrollHeight = table.scrollHeight || 0;
+        const clientHeight = table.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    });
+    observer.observe(table);
+    return observer;
+}
 function useDatatable() {
     const [scrolleable, setScrolleable] = require$$0.useState(false);
-    const bodyRef = require$$0.useRef(null);
+    const tableRef = require$$0.useRef(null);
     require$$0.useEffect(() => {
-        let observer;
-        const body = bodyRef?.current;
-        if (body) {
-            observer = new ResizeObserver(() => {
-                const scrollHeight = body.scrollHeight || 0;
-                const clientHeight = body.clientHeight || 0;
-                setScrolleable(scrollHeight > clientHeight);
-            });
-            observer.observe(bodyRef?.current);
-        }
+        const observer = tableRef?.current &&
+            createObserver({ setScrolleable, table: tableRef?.current });
         return () => {
             observer?.disconnect();
         };
     }, []);
-    return { bodyRef, scrolleable };
+    return { scrolleable, tableRef };
 }
 
-function useListControl({ suggestions, formControl }) {
+function useListController(props) {
+    const { suggestions, formControl, value } = props;
+    const listIsOpen = require$$0.useRef(false);
     const contentRef = require$$0.useRef(null);
     const listRef = require$$0.useRef(null);
     const inputRef = require$$0.useRef(null);
-    const listIsOpen = require$$0.useRef(false);
     const [state, setState] = require$$0.useState({
         focused: false,
         higher: false,
         value: '',
-        listIsVisible: false
+        modalIsVisible: false
     });
     const collection = require$$0.useRef(new components.ListCollection([]));
     const position = require$$0.useRef(0);
@@ -2080,7 +2083,7 @@ function useListControl({ suggestions, formControl }) {
     require$$0.useEffect(() => {
         function onCloseSuggestions({ target }) {
             !contentRef?.current?.contains(target) &&
-                setState((state) => ({ ...state, listIsVisible: false }));
+                setState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2088,17 +2091,17 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     require$$0.useEffect(() => {
-        if (!listIsOpen.current && state.listIsVisible) {
+        if (!listIsOpen.current && state.modalIsVisible) {
             listIsOpen.current = true;
         }
-        if (listIsOpen.current && !state.listIsVisible) {
+        if (listIsOpen.current && !state.modalIsVisible) {
             formControl?.touch();
         }
         setState((state) => ({
             ...state,
             higher: components.locationListCanTop(contentRef.current, listRef.current)
         }));
-    }, [state.listIsVisible]);
+    }, [state.modalIsVisible]);
     require$$0.useEffect(() => {
         collection.current = new components.ListCollection(suggestions);
         refresh(collection.current, formControl?.value);
@@ -2116,7 +2119,7 @@ function useListControl({ suggestions, formControl }) {
         }
         if (!refreshProtected(collection)) {
             protectedValue.current = state;
-            setFormValue(undefined);
+            setFormValue(value);
             refreshState({ value: '' });
         }
     }
@@ -2138,7 +2141,7 @@ function useListControl({ suggestions, formControl }) {
         formControl?.setValue(value);
     }
     function navigationInput(event) {
-        if (state.listIsVisible) {
+        if (state.modalIsVisible) {
             const newPosition = components.navigationListFromInput({
                 content: contentRef.current,
                 event: event,
@@ -2170,54 +2173,54 @@ function useListControl({ suggestions, formControl }) {
 
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
-function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, suggestions }) {
-    const [pattern, setPattern] = require$$0.useState('');
+function useFieldAutocomplete(props) {
+    const controller = useListController(props);
     const [coincidences, setCoincidences] = require$$0.useState([]);
+    const [pattern, setPattern] = require$$0.useState('');
     const currentStore = require$$0.useRef({
         coincidences: [],
         pattern: '',
         previous: null
     });
-    const listControl = useListControl({ suggestions, formControl });
-    const { inputRef, navigationElement, navigationInput, setFormValue, setState } = listControl;
+    const disabled = props.formControl?.disabled || props.disabled;
     require$$0.useEffect(() => {
         refreshCoincidences(pattern, true);
-    }, [suggestions]);
+    }, [props.suggestions]);
     require$$0.useEffect(() => {
         refreshCoincidences(pattern);
     }, [pattern]);
     function onClickControl() {
         if (!disabled) {
-            setState({ listIsVisible: true });
+            controller.setState({ modalIsVisible: true });
             setTimeout(() => {
-                inputRef?.current?.focus();
+                controller.inputRef?.current?.focus();
             }, DURATION_ANIMATION$1);
         }
     }
     function onFocusInput() {
-        setState({ focused: true });
+        controller.setState({ focused: true });
     }
     function onBlurInput() {
-        setState({ focused: false });
+        controller.setState({ focused: false });
     }
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Escape':
             case 'Tab':
-                setState({ listIsVisible: false });
+                controller.setState({ modalIsVisible: false });
                 break;
             default:
-                navigationInput(event);
+                controller.navigationInput(event);
                 break;
         }
     }
     function onClickAction() {
-        setState({ listIsVisible: false, value: '' });
-        setFormValue(undefined);
-        onValue && onValue(undefined);
+        controller.setState({ modalIsVisible: false, value: '' });
+        controller.setFormValue(props.value);
+        props.onValue && props.onValue(props.value);
     }
     function onClickBackdrop() {
-        setState({ listIsVisible: false });
+        controller.setState({ modalIsVisible: false });
     }
     function onClickElement(element) {
         return () => {
@@ -2226,24 +2229,26 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     }
     function onKeydownElement(element) {
         return (event) => {
-            event.code === 'Enter' ? onChange(element) : navigationElement(event);
+            event.code === 'Enter'
+                ? onChange(element)
+                : controller.navigationElement(event);
         };
     }
     function onChange({ description, value }) {
-        if (onSelect) {
-            setState({ listIsVisible: false });
-            onSelect(value);
+        if (props.onSelect) {
+            controller.setState({ modalIsVisible: false });
+            value && props.onSelect(value);
         }
         else {
-            setState({ listIsVisible: false, value: description });
-            setFormValue(value);
+            controller.setState({ modalIsVisible: false, value: description });
+            controller.setFormValue(value);
         }
-        onValue && onValue(value);
+        props.onValue && props.onValue(value);
     }
     function refreshCoincidences(pattern, reboot = false) {
         const { collection, store } = components.createAutocompleteStore({
             pattern,
-            suggestions,
+            suggestions: props.suggestions,
             reboot,
             store: currentStore.current
         });
@@ -2252,7 +2257,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     }
     return {
         coincidences,
-        listControl,
+        controller,
         onBlurInput,
         onClickAction,
         onClickBackdrop,
@@ -2267,22 +2272,25 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
 }
 
 function RlsFieldAutocompleteTemplate(props) {
-    const fieldAutocomplete = useFieldAutocomplete(props);
-    const { render, children, disabled, formControl, hiddenIcon, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
-    return (jsxRuntimeExports.jsxs("div", { ref: fieldAutocomplete.listControl.contentRef, className: renderClassStatus('rls-field-box', {
-            disabled,
-            focused: fieldAutocomplete.listControl.focused,
-            error: formControl?.wrong,
-            selected: !!fieldAutocomplete.listControl.value
-        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldAutocomplete.listControl.value, onClick: fieldAutocomplete.onClickControl }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    visible: fieldAutocomplete.listControl.listIsVisible,
-                    hide: !fieldAutocomplete.listControl.listIsVisible,
-                    higher: fieldAutocomplete.listControl.higher
-                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldAutocomplete.listControl.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: fieldAutocomplete.listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: fieldAutocomplete.pattern, onChange: ({ target: { value } }) => {
-                                                fieldAutocomplete.setPattern(value);
-                                            }, disabled: disabled || searching, onFocus: fieldAutocomplete.onFocusInput, onBlur: fieldAutocomplete.onBlurInput, onKeyDown: fieldAutocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
-                                                onSearch(fieldAutocomplete.pattern);
-                                            }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), fieldAutocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldAutocomplete.onClickElement(element), onKeyDown: fieldAutocomplete.onKeydownElement(element), children: render(element) }, index))), !fieldAutocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldAutocomplete.onClickBackdrop })] })] }));
+    const autocomplete = useFieldAutocomplete(props);
+    const { controller } = autocomplete;
+    const { render, children, formControl, hiddenIcon, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const disabled = formControl?.disabled || props.disabled;
+    const className = renderClassStatus('rls-field-box', {
+        focused: controller.focused,
+        disabled,
+        error: formControl?.wrong,
+        selected: !!controller.value
+    }, 'rls-field-list rls-field-autocomplete');
+    return (jsxRuntimeExports.jsxs("div", { ref: controller.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                    visible: controller.modalIsVisible,
+                    higher: controller.higher,
+                    hide: !controller.modalIsVisible
+                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: controller.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: ({ target: { value } }) => {
+                                                autocomplete.setPattern(value);
+                                            }, disabled: disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
+                                                onSearch(autocomplete.pattern);
+                                            }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
     return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
@@ -2361,9 +2369,9 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
 }
 
 const FORMAT_DATE = '{dd}/{mx}/{aa}';
-function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme }) {
+function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
     const today = new Date(); // Initial current date in component
-    const [value, setValue] = require$$0.useState();
+    const [value, setValue] = require$$0.useState(defaultValue);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
     require$$0.useEffect(() => {
         const dateCheck = components.checkDateRange({
@@ -2383,7 +2391,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     }
     function onClickAction() {
         if (value) {
-            formControl?.setValue(undefined);
+            formControl?.setValue(defaultValue);
             formControl?.touch();
             onChange(undefined);
         }
@@ -2476,39 +2484,39 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
                     } }) })] }));
 }
 
-function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
-    const listControl = useListControl({ suggestions, formControl });
-    const { inputRef, listIsVisible, navigationElement, navigationInput, setFormValue, setState } = listControl;
+function useFieldSelect(props) {
+    const controller = useListController(props);
     function onFocusInput() {
-        setState({ focused: true });
+        controller.setState({ focused: true });
     }
     function onBlurInput() {
-        setState({ focused: false });
+        controller.setState({ focused: false });
     }
     function onClickInput() {
-        setState({ listIsVisible: true });
+        controller.setState({ modalIsVisible: true });
     }
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Space':
             case 'Enter':
-                setState({ listIsVisible: true });
+                controller.setState({ modalIsVisible: true });
                 break;
             case 'Escape':
             case 'Tab':
-                setState({ listIsVisible: false });
+                controller.setState({ modalIsVisible: false });
                 break;
             default:
-                navigationInput(event);
+                controller.navigationInput(event);
                 break;
         }
     }
     function onClickAction() {
-        setState({ listIsVisible: !listIsVisible });
-        !listIsVisible && inputRef?.current?.focus();
+        const modalIsVisible = !controller.modalIsVisible;
+        controller.setState({ modalIsVisible });
+        modalIsVisible && controller.inputRef?.current?.focus();
     }
     function onClickBackdrop() {
-        setState({ listIsVisible: false });
+        controller.setState({ modalIsVisible: false });
     }
     function onClickElement(element) {
         return () => {
@@ -2517,23 +2525,25 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     }
     function onKeydownElement(element) {
         return (event) => {
-            event.code === 'Enter' ? onChange(element) : navigationElement(event);
+            event.code === 'Enter'
+                ? onChange(element)
+                : controller.navigationElement(event);
         };
     }
     function onChange({ description, value }) {
-        inputRef?.current?.focus();
-        if (onSelect) {
-            setState({ listIsVisible: false });
-            onSelect(value);
+        controller.inputRef?.current?.focus();
+        if (props.onSelect) {
+            controller.setState({ modalIsVisible: false });
+            value && props.onSelect(value);
         }
         else {
-            setFormValue(value);
-            setState({ listIsVisible: false, value: description });
+            controller.setFormValue(value);
+            controller.setState({ modalIsVisible: false, value: description });
         }
-        onValue && onValue(value);
+        props.onValue && props.onValue(value);
     }
     return {
-        listControl,
+        controller,
         onBlurInput,
         onClickAction,
         onClickBackdrop,
@@ -2546,19 +2556,22 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
 }
 
 function RlsFieldSelectTemplate(props) {
-    const fieldSelect = useFieldSelect(props);
-    const { render, suggestions, children, disabled, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
-    return (jsxRuntimeExports.jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', {
-            focused: fieldSelect.listControl.focused,
-            error: formControl?.wrong,
-            disabled
-        }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
-                                visible: fieldSelect.listControl.listIsVisible
-                            }), disabled: disabled, onClick: fieldSelect.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    visible: fieldSelect.listControl.listIsVisible,
-                    hide: !fieldSelect.listControl.listIsVisible,
-                    higher: fieldSelect.listControl.higher
-                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldSelect.listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldSelect.onClickElement(element), onKeyDown: fieldSelect.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldSelect.onClickBackdrop })] })] }));
+    const select = useFieldSelect(props);
+    const { controller } = select;
+    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme } = props;
+    const disabled = formControl?.disabled || props.disabled;
+    const className = renderClassStatus('rls-field-box', {
+        focused: controller.focused,
+        disabled,
+        error: formControl?.wrong
+    }, 'rls-field-list rls-field-select');
+    return (jsxRuntimeExports.jsxs("div", { ref: controller.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
+                                visible: controller.modalIsVisible
+                            }), disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                    visible: controller.modalIsVisible,
+                    higher: controller.higher,
+                    hide: !controller.modalIsVisible
+                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
     return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
@@ -2704,6 +2717,6 @@ exports.rangeFormatTemplate = rangeFormatTemplate;
 exports.renderClassStatus = renderClassStatus;
 exports.useConfirmationService = useConfirmationService;
 exports.useDatatable = useDatatable;
-exports.useListControl = useListControl;
+exports.useListController = useListController;
 exports.useSnackbarService = useSnackbarService;
 //# sourceMappingURL=index.js.map