@rolster/react-components 18.9.0 → 18.10.0

package/dist/es/index.js

@@ -3,6 +3,7 @@ import { useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, PartialSealed } from '@rolster/helpers-advanced';
 import { daysFromMonth, weight, refactorDay, DAY_LABELS, normalizeMinTime, isBefore, formatDate, isAfter, timeDifference, isBetween, Month, MONTH_NAMES, refactorYear, refactorMonth } from '@rolster/helpers-date';
 import { hasPattern } from '@rolster/helpers-string';
+import { i18n } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
 import 'uuid';
 import { BehaviorSubject } from 'rxjs';
@@ -378,13 +379,13 @@ function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, mi
                         }, children: jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-const FORMAT_DESCRIPTION$1 = '{dd}/{mm}/{aa}';
-class ListFieldCollection {
+const DATE_FORMAT = '{dd}/{mm}/{aa}';
+class ListCollection {
     constructor(value) {
         this.value = value;
     }
-    findElement(value) {
-        return this.value.find((element) => element.compareTo(value));
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
     }
 }
 class DateRange {
@@ -396,8 +397,8 @@ class DateRange {
         else {
             this.maxDate = normalizeMinTime(minDate);
         }
-        const minFormat = formatDate(this.minDate, FORMAT_DESCRIPTION$1);
-        const maxFormat = formatDate(this.maxDate, FORMAT_DESCRIPTION$1);
+        const minFormat = formatDate(this.minDate, DATE_FORMAT);
+        const maxFormat = formatDate(this.maxDate, DATE_FORMAT);
         this.description = `${minFormat} - ${maxFormat}`;
     }
     recalculate(date) {
@@ -1082,6 +1083,27 @@ function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxD
                     }, children: jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
 }
 
+const reactI18n = i18n({
+    es: {
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Buscar...'
+    },
+    en: {
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Search...'
+    }
+});
+
 const classElement = '.rls-list-field__element';
 const MAX_POSITION_VISIBLE = 4;
 const LIST_SIZE_REM = 16;
@@ -1089,16 +1111,16 @@ const ELEMENT_SIZE_REM = 4;
 const BASE_SIZE_PX = 16;
 const ELEMENT_SIZE_PX = BASE_SIZE_PX * ELEMENT_SIZE_REM;
 const MAZ_LIST_SIZE_PX = BASE_SIZE_PX * LIST_SIZE_REM;
-function useListControl({ suggestions, formControl, ignoreHigher = false }) {
+function useListControl({ suggestions, formControl, withHigher = false }) {
     const boxContentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
-    const [collection, setCollection] = useState(new ListFieldCollection([]));
-    const [active, setActive] = useState(false);
-    const [visible, setVisible] = useState(false);
-    const [opened, setOpened] = useState(false);
+    const [collection, setCollection] = useState(new ListCollection([]));
     const [value, setValue] = useState('');
+    const [opened, setOpened] = useState(false);
+    const [visible, setVisible] = useState(false);
     const [higher, setHigher] = useState(false);
+    const [focused, setFocused] = useState(false);
     const [positionElement, setPositionElement] = useState(0);
     const [listElements, setListElements] = useState(undefined);
     useEffect(() => {
@@ -1122,7 +1144,7 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
         setLocationList();
     }, [visible]);
     useEffect(() => {
-        setCollection(new ListFieldCollection(suggestions));
+        setCollection(new ListCollection(suggestions));
     }, [suggestions]);
     function setLocationList() {
         if (boxContentRef?.current) {
@@ -1140,7 +1162,7 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
                 }
                 break;
             case 'ArrowDown':
-                if (visible && (ignoreHigher || !higher)) {
+                if (visible && (withHigher || !higher)) {
                     navigationInputDown();
                 }
                 break;
@@ -1194,7 +1216,7 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
             setPositionElement(newPosition);
             listElements?.item(newPosition).focus();
         }
-        else if (ignoreHigher || !higher) {
+        else if (withHigher || !higher) {
             inputRef?.current?.focus();
         }
     }
@@ -1205,30 +1227,30 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
             setPositionElement(newPosition);
             listElements?.item(newPosition).focus();
         }
-        else if (higher && !ignoreHigher) {
+        else if (higher && !withHigher) {
             inputRef?.current?.focus();
         }
     }
     return {
-        active,
         boxContentRef,
         collection,
+        focused,
         higher,
         inputRef,
         listRef,
+        value,
+        visible,
         navigationElement,
         navigationInput,
-        setActive,
+        setFocused,
         setValue,
-        setVisible,
-        value,
-        visible
+        setVisible
     };
 }
 
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
-function RlsAutocompleteField({ suggestions, children, disabled, formControl, hiddenIcon, onSearch, onSelect, onValue, placeholder, searching, rlsTheme }) {
+function useAutocompleteField({ suggestions, disabled, formControl, onSelect, onValue }) {
     const [pattern, setPattern] = useState('');
     const [coincidences, setCoincidences] = useState([]);
     const [store, setStore] = useState({
@@ -1236,7 +1258,12 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         coincidences: [],
         previous: null
     });
-    const { active, boxContentRef, higher, inputRef, listRef, collection, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl({ suggestions, formControl, ignoreHigher: true });
+    const listControl = useListControl({
+        suggestions,
+        formControl,
+        withHigher: true
+    });
+    const { collection, inputRef, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
     const [changeInternal, setChangeInternal] = useState(false);
     useEffect(() => {
         filterSuggestions(pattern, true);
@@ -1254,7 +1281,7 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         redefineDescription();
     }, [collection]);
     function redefineDescription() {
-        const element = formControl?.state && collection.findElement(formControl?.state);
+        const element = formControl?.state && collection.find(formControl?.state);
         setValue(element?.description || '');
     }
     function onClickControl() {
@@ -1264,10 +1291,10 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         }
     }
     function onFocusInput() {
-        setActive(true);
+        setFocused(true);
     }
     function onBlurInput() {
-        setActive(false);
+        setFocused(false);
     }
     function onKeydownInput(event) {
         switch (event.code) {
@@ -1296,12 +1323,12 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
     function onClickBackdrop() {
         setVisible(false);
     }
-    function onClickItem(element) {
+    function onClickElement(element) {
         return () => {
             onChange(element);
         };
     }
-    function onKeydownItem(element) {
+    function onKeydownElement(element) {
         return (event) => {
             switch (event.code) {
                 case 'Enter':
@@ -1332,8 +1359,8 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
     function filterSuggestions(pattern, reboot = false) {
         if (pattern) {
             const store = reboot ? createStoreEmpty() : searchForPattern(pattern);
-            const filters = store?.coincidences || suggestions;
-            const coincidences = filters.filter((element) => element.hasCoincidence(pattern));
+            const elements = store?.coincidences || suggestions;
+            const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
             setCoincidences(coincidences.slice(0, MAX_ELEMENTS));
             setStore({
                 coincidences,
@@ -1361,9 +1388,9 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         return newStore || rebootStore();
     }
     function rebootStore() {
-        const newStore = createStoreEmpty();
-        setStore(newStore);
-        return newStore;
+        const store = createStoreEmpty();
+        setStore(store);
+        return store;
     }
     function createStoreEmpty() {
         return {
@@ -1372,19 +1399,46 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
             previous: null
         };
     }
-    return (jsxs("div", { ref: boxContentRef, className: renderClassStatus('rls-box-field', {
+    return {
+        coincidences,
+        listControl,
+        pattern,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput,
+        setPattern
+    };
+}
+
+function RlsAutocompleteFieldTemplate({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }) {
+    const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } = useAutocompleteField({
+        suggestions,
+        disabled,
+        formControl,
+        onSelect,
+        onValue
+    });
+    return (jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', {
             disabled,
-            active,
-            selected: !!value
-        }, 'rls-autocomplete-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: value ? (jsx("span", { className: "rls-list-field__control__description", children: value })) : (jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && value && (jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
-                    visible,
-                    hide: !visible,
-                    higher
-                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [jsxs("div", { className: "rls-list-field__ul__search", children: [jsx("input", { ref: inputRef, className: "rls-list-field__ul__control", type: "text", value: pattern, onChange: ({ target: { value } }) => {
+            focused: listControl.focused,
+            selected: !!listControl.value
+        }, 'rls-autocomplete-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: listControl.value ? (jsx("span", { className: "rls-list-field__control__description", children: listControl.value })) : (jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [jsxs("div", { className: "rls-list-field__ul__search", children: [jsx("input", { ref: listControl.inputRef, className: "rls-list-field__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
                                                 setPattern(value);
                                             }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (jsx("button", { disabled: disabled || searching, onClick: () => {
                                                 onSearch(pattern);
-                                            }, children: jsx(RlsIcon, { value: "search" }) }))] }), searching && jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !coincidences.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsx("p", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                                            }, children: jsx(RlsIcon, { value: "search" }) }))] }), searching && jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+function RlsAutocompleteField(props) {
+    return (jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 
 function RlsCard({ children, outline, rlsTheme }) {
@@ -1423,7 +1477,7 @@ function useConfirmationService() {
                 subtitle,
                 title,
                 approved: {
-                    label: approved || 'Aceptar',
+                    label: approved || reactI18n('confirmationActionApproved'),
                     onClick: () => {
                         setVisible(false);
                         resolve(ConfirmationResult.approved());
@@ -1656,7 +1710,7 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
                     year,
                     day,
                     month
-                }), children: [jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxs("div", { className: "rls-date-picker__actions", children: [jsx("div", { className: "rls-date-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: "Cancelar" }) }), jsx("div", { className: "rls-date-picker__actions--today", children: jsx(RlsButton, { type: "ghost", onClick: onToday, children: "Hoy" }) }), jsx("div", { className: "rls-date-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: "Establecer" }) })] }) })] }));
+                }), children: [jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxs("div", { className: "rls-date-picker__actions", children: [jsx("div", { className: "rls-date-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-picker__actions--today", children: jsx(RlsButton, { type: "ghost", onClick: onToday, children: reactI18n('dateActionToday') }) }), jsx("div", { className: "rls-date-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
 function RlsModal({ children, visible, rlsTheme }) {
@@ -1773,7 +1827,7 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
                     month
                 }), children: [jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
                     automatic
-                }), children: jsxs("div", { className: "rls-date-range-picker__actions", children: [jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: "Cancelar" }) }), jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: "Establecer" }) })] }) })] }));
+                }), children: jsxs("div", { className: "rls-date-range-picker__actions", children: [jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
 function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
@@ -1810,8 +1864,9 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
     return (jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
-function RlsSelectField({ suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }) {
-    const { active, boxContentRef, higher, inputRef, listRef, collection, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl({ suggestions, formControl });
+function useSelectField({ suggestions, formControl, onSelect, onValue }) {
+    const listControl = useListControl({ suggestions, formControl });
+    const { collection, inputRef, visible, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
     const [changeInternal, setChangeInternal] = useState(false);
     useEffect(() => {
         if (!changeInternal) {
@@ -1823,16 +1878,16 @@ function RlsSelectField({ suggestions, children, disabled, formControl, onSelect
         redefineDescription();
     }, [collection]);
     function redefineDescription() {
-        const element = formControl?.state && collection.findElement(formControl?.state);
+        const element = formControl?.state && collection.find(formControl?.state);
         setValue(element?.description || '');
     }
     function onFocusInput() {
-        setActive(true);
+        setFocused(true);
     }
     function onBlurInput() {
-        setActive(false);
+        setFocused(false);
     }
-    function onClickInput() {
+    function onClickControl() {
         setVisible(true);
     }
     function onKeydownInput(event) {
@@ -1864,12 +1919,12 @@ function RlsSelectField({ suggestions, children, disabled, formControl, onSelect
     function onClickBackdrop() {
         setVisible(false);
     }
-    function onClickItem(element) {
+    function onClickElement(element) {
         return () => {
             onChange(element);
         };
     }
-    function onKeydownItem(element) {
+    function onKeydownElement(element) {
         return (event) => {
             switch (event.code) {
                 case 'Enter':
@@ -1898,11 +1953,37 @@ function RlsSelectField({ suggestions, children, disabled, formControl, onSelect
             onValue(value);
         }
     }
-    return (jsxs("div", { ref: boxContentRef, className: renderClassStatus('rls-box-field', { active, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { ref: inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsx("button", { className: renderClassStatus('rls-list-field__action', { visible }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
-                    visible,
-                    hide: !visible,
-                    higher
-                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !suggestions.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsx("p", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+    return {
+        listControl,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput: onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    };
+}
+
+function RlsSelectFieldTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
+    const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useSelectField({
+        suggestions,
+        disabled,
+        formControl,
+        onSelect,
+        onValue
+    });
+    return (jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', { focused: listControl.focused, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { ref: listControl.inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsx("button", { className: renderClassStatus('rls-list-field__action', {
+                                visible: listControl.visible
+                            }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+function RlsSelectField(props) {
+    return (jsx(RlsSelectFieldTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -1966,5 +2047,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, DateRange, ListFieldCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAvatar, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableTitle, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useListControl, useSnackbarService };
+export { ConfirmationResult, DateRange, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableTitle, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map