@rolster/react-components 18.14.1 → 18.15.1

package/dist/es/index.js

@@ -1,13 +1,55 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, createContext } from 'react';
-import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/helpers-advanced';
-import { hasPattern } from '@rolster/helpers-string';
-import { dateIsBefore, normalizeMinTime, dateIsAfter, normalizeMaxTime, getDaysOfMonth, getDateWeight, dateIsEqualsWeight, dateIsBetween, assignDayInDate, Month, MONTH_NAMES, DAY_LABELS, DateRange, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/helpers-date';
+import { hasPattern as hasPattern$1 } from '@rolster/helpers-string';
+import { i18n, i18nSubscribe } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
-import { i18n } from '@rolster/i18n';
-import { createFormControlProps } from '@rolster/helpers-forms';
 import 'uuid';
-import { BehaviorSubject } from 'rxjs';
+
+function currencyFormat(currency) {
+    const { value, decimals, symbol } = currency;
+    const [integer, decimal] = Math.abs(value).toString().split('.');
+    let result = '';
+    let count = 0;
+    for (let i = 1; i <= integer.length; i++) {
+        const index = integer.length - i;
+        if (count === 3) {
+            count = 0;
+            result = `.${result}`;
+        }
+        count++;
+        result = `${integer.charAt(index)}${result}`;
+    }
+    if (decimals && decimal) {
+        result = `${result},${decimal.slice(0, 2)}`;
+    }
+    if (value < 0) {
+        result = `-${result}`;
+    }
+    return symbol ? `${symbol} ${result}` : result;
+}
+
+class PartialSealed {
+    constructor(key, value) {
+        this.key = key;
+        this.value = value;
+    }
+    otherwise(otherwise) {
+        this.sealedOtherwise = otherwise;
+        return this;
+    }
+    when(resolver, whenOtherwise) {
+        const handler = resolver[this.key];
+        const otherwise = whenOtherwise || this.sealedOtherwise;
+        if (otherwise) {
+            otherwise();
+        }
+        return handler ? handler(this.value) : undefined;
+    }
+}
+
+function itIsDefined(object) {
+    return typeof object !== 'undefined' && object !== null;
+}
 
 const baseCls = 'rls-tabular-text';
 const pointers = ['.', ','];
@@ -86,9 +128,6 @@ function RlsInput({ children, disabled, formControl, placeholder, type, value, o
         setFocused(true);
     }
     function onBlur() {
-        if (formControl && !formControl.touched) {
-            formControl.touch();
-        }
         formControl?.blur();
         setFocused(false);
     }
@@ -137,9 +176,6 @@ function RlsInputPassword({ disabled, formControl, placeholder, type, onValue })
         setFocused(true);
     }
     function onBlur() {
-        if (formControl && !formControl.touched) {
-            formControl.touch();
-        }
         formControl?.blur();
         setFocused(false);
     }
@@ -149,6 +185,10 @@ function RlsInputPassword({ disabled, formControl, placeholder, type, onValue })
         }), children: jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type || 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
+function RlsInputSearch({ formControl, placeholder, onSearch }) {
+    return (jsxs("div", { className: "rls-input-search", children: [jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+}
+
 function RlsInputText({ disabled, formControl, placeholder, value, onValue }) {
     const [valueInput, setValueInput] = useState(value || '');
     function onText(value) {
@@ -186,16 +226,12 @@ function RlsRadioButton({ checked, disabled, rlsTheme, onClick }) {
     return (jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
-function RlsSearchInput({ formControl, placeholder, onSearch }) {
-    return (jsxs("div", { className: "rls-search-input", children: [jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
-}
-
 function RlsSkeleton({ rlsTheme }) {
     return jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
 }
 
 function RlsSkeletonText({ active, children, rlsTheme }) {
-    return (jsx("div", { className: renderClassStatus('rls-skeleton-text', { active }), "rls-theme": rlsTheme, children: jsx("span", { className: "rls-skeleton-text__value", children: children }) }));
+    return (jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsx(RlsSkeleton, {})) : (jsx("span", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
 function RlsSwitch({ checked, disabled, rlsTheme, onClick }) {
@@ -288,9 +324,9 @@ function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme,
 }
 
 function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
-    const [checked, setChecked] = useState(formControl?.value || false);
+    const [checked, setChecked] = useState(!!formControl?.state);
     useEffect(() => {
-        setChecked(formControl?.state || false);
+        setChecked(!!formControl?.state);
     }, [formControl?.state]);
     function onToggle() {
         if (formControl) {
@@ -307,7 +343,7 @@ function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme
 }
 
 function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsTheme, value }) {
-    const [checked, setChecked] = useState(formControl?.state || false);
+    const [checked, setChecked] = useState(formControl?.state === value);
     useEffect(() => {
         setChecked(formControl?.state === value);
     }, [formControl?.state]);
@@ -323,9 +359,9 @@ function RlsLabelRadioButton({ children, disabled, extended, formControl, rlsThe
 }
 
 function RlsLabelSwitch({ children, disabled, extended, formControl, rlsTheme }) {
-    const [checked, setChecked] = useState(formControl?.value || false);
+    const [checked, setChecked] = useState(!!formControl?.state);
     useEffect(() => {
-        setChecked(formControl?.state || false);
+        setChecked(!!formControl?.state);
     }, [formControl?.state]);
     function onToggle() {
         if (formControl) {
@@ -452,7 +488,7 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
     }
     function refreshCollection(elements, filter) {
         const collection = filter
-            ? elements.filter((element) => hasPattern(JSON.stringify(element), filter))
+            ? elements.filter((element) => hasPattern$1(JSON.stringify(element), filter))
             : elements;
         setCollection(collection);
         return collection;
@@ -551,6 +587,367 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
                 }) }), jsx("div", { className: "rls-pagination__description", children: description }), jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 
+const dateI18n = i18n({
+    es: {
+        // Months
+        january: 'Enero',
+        february: 'Febrero',
+        march: 'Marzo',
+        april: 'Abril',
+        may: 'Mayo',
+        june: 'Junio',
+        july: 'Julio',
+        august: 'Agosto',
+        september: 'Septiembre',
+        october: 'Octubre',
+        november: 'Noviembre',
+        december: 'Diciembre',
+        // Days
+        monday: 'Lunes',
+        tuesday: 'Martes',
+        wednesday: 'Miércoles',
+        thursday: 'Jueves',
+        friday: 'Viernes',
+        saturday: 'Sábado',
+        sunday: 'Domingo',
+        // Timestamps
+        year: 'año',
+        month: 'mes',
+        week: 'semana',
+        day: 'día',
+        hour: 'hora',
+        minute: 'minuto',
+        second: 'segundo'
+    },
+    en: {
+        // Months
+        january: 'January',
+        february: 'February',
+        march: 'March',
+        april: 'April',
+        may: 'May',
+        june: 'June',
+        july: 'July',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December',
+        // Days
+        monday: 'Monday',
+        tuesday: 'Tuesday',
+        wednesday: 'Wednesday',
+        thursday: 'Thursday',
+        friday: 'Friday',
+        saturday: 'Saturday',
+        sunday: 'Sunday',
+        // Timestamps
+        year: 'year',
+        month: 'month',
+        week: 'week',
+        day: 'day',
+        hour: 'hour',
+        minute: 'minute',
+        second: 'second'
+    }
+});
+
+var Miliseconds;
+(function (Miliseconds) {
+    Miliseconds[Miliseconds["Year"] = 31536000000] = "Year";
+    Miliseconds[Miliseconds["Month"] = 2592000000] = "Month";
+    Miliseconds[Miliseconds["Week"] = 604800000] = "Week";
+    Miliseconds[Miliseconds["Day"] = 86400000] = "Day";
+    Miliseconds[Miliseconds["Hour"] = 3600000] = "Hour";
+    Miliseconds[Miliseconds["Minute"] = 60000] = "Minute";
+    Miliseconds[Miliseconds["Second"] = 1000] = "Second";
+})(Miliseconds || (Miliseconds = {}));
+var Day;
+(function (Day) {
+    Day[Day["Sunday"] = 0] = "Sunday";
+    Day[Day["Monday"] = 1] = "Monday";
+    Day[Day["Tuesday"] = 2] = "Tuesday";
+    Day[Day["Wednesday"] = 3] = "Wednesday";
+    Day[Day["Thursday"] = 4] = "Thursday";
+    Day[Day["Friday"] = 5] = "Friday";
+    Day[Day["Saturday"] = 6] = "Saturday";
+})(Day || (Day = {}));
+var Month;
+(function (Month) {
+    Month[Month["January"] = 0] = "January";
+    Month[Month["February"] = 1] = "February";
+    Month[Month["March"] = 2] = "March";
+    Month[Month["April"] = 3] = "April";
+    Month[Month["May"] = 4] = "May";
+    Month[Month["June"] = 5] = "June";
+    Month[Month["July"] = 6] = "July";
+    Month[Month["August"] = 7] = "August";
+    Month[Month["September"] = 8] = "September";
+    Month[Month["October"] = 9] = "October";
+    Month[Month["November"] = 10] = "November";
+    Month[Month["December"] = 11] = "December";
+})(Month || (Month = {}));
+var MonthDay;
+(function (MonthDay) {
+    MonthDay[MonthDay["January"] = 31] = "January";
+    MonthDay[MonthDay["February"] = 28] = "February";
+    MonthDay[MonthDay["March"] = 31] = "March";
+    MonthDay[MonthDay["April"] = 30] = "April";
+    MonthDay[MonthDay["May"] = 31] = "May";
+    MonthDay[MonthDay["June"] = 30] = "June";
+    MonthDay[MonthDay["July"] = 31] = "July";
+    MonthDay[MonthDay["August"] = 31] = "August";
+    MonthDay[MonthDay["September"] = 30] = "September";
+    MonthDay[MonthDay["October"] = 31] = "October";
+    MonthDay[MonthDay["November"] = 30] = "November";
+    MonthDay[MonthDay["December"] = 31] = "December";
+})(MonthDay || (MonthDay = {}));
+
+let MONTH_NAMES_I18N = [];
+let MONTH_LABELS_I18N = [];
+let DAY_NAMES_I18N = [];
+let DAY_LABELS_I18N = [];
+function loadI18n(language = 'es') {
+    MONTH_NAMES_I18N = [
+        dateI18n('january', { language }),
+        dateI18n('february', { language }),
+        dateI18n('march', { language }),
+        dateI18n('april', { language }),
+        dateI18n('may', { language }),
+        dateI18n('june', { language }),
+        dateI18n('july', { language }),
+        dateI18n('august', { language }),
+        dateI18n('september', { language }),
+        dateI18n('october', { language }),
+        dateI18n('november', { language }),
+        dateI18n('december', { language })
+    ];
+    MONTH_LABELS_I18N = MONTH_NAMES_I18N.map((name) => name.substring(0, 3));
+    DAY_NAMES_I18N = [
+        dateI18n('sunday', { language }),
+        dateI18n('monday', { language }),
+        dateI18n('tuesday', { language }),
+        dateI18n('wednesday', { language }),
+        dateI18n('thursday', { language }),
+        dateI18n('friday', { language }),
+        dateI18n('saturday', { language })
+    ];
+    DAY_LABELS_I18N = DAY_NAMES_I18N.map((name) => name.substring(0, 3));
+}
+function isNumber(value) {
+    return value !== undefined && value !== null;
+}
+loadI18n();
+i18nSubscribe((language) => loadI18n(language));
+const MONTH_DAYS = [
+    MonthDay.January,
+    MonthDay.February,
+    MonthDay.March,
+    MonthDay.April,
+    MonthDay.May,
+    MonthDay.June,
+    MonthDay.July,
+    MonthDay.August,
+    MonthDay.September,
+    MonthDay.October,
+    MonthDay.November,
+    MonthDay.December
+];
+function MONTH_NAMES(index) {
+    return isNumber(index) ? MONTH_NAMES_I18N[index] || '' : MONTH_NAMES_I18N;
+}
+function MONTH_LABELS(index) {
+    return isNumber(index) ? MONTH_LABELS_I18N[index] || '' : MONTH_LABELS_I18N;
+}
+function DAY_NAMES(index) {
+    return isNumber(index) ? DAY_NAMES_I18N[index] || '' : DAY_NAMES_I18N;
+}
+function DAY_LABELS(index) {
+    return isNumber(index) ? DAY_LABELS_I18N[index] || '' : DAY_LABELS_I18N;
+}
+
+function completFormat(value, size) {
+    return value.toString().padStart(size, '0');
+}
+function hourFormat(date) {
+    const hour = date.getHours();
+    return hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
+}
+function verifyDayInYear(date, year) {
+    const days = getDaysOfMonth(year, date.getMonth());
+    if (days < date.getDate()) {
+        date.setDate(days);
+    }
+    date.setFullYear(year); // Establecer el año
+}
+function verifyDayInMonth(date, month) {
+    const days = getDaysOfMonth(date.getFullYear(), month);
+    if (days < date.getDate()) {
+        date.setDate(days);
+    }
+    date.setMonth(month); // Establecer el mes
+}
+const formatters = {
+    dd: (date) => {
+        return completFormat(date.getDate(), 2);
+    },
+    dw: (date) => {
+        return DAY_NAMES()[date.getDay()];
+    },
+    dx: (date) => {
+        return DAY_NAMES()[date.getDay()];
+    },
+    mm: (date) => {
+        return completFormat(date.getMonth() + 1, 2);
+    },
+    mn: (date) => {
+        return MONTH_NAMES(date.getMonth());
+    },
+    mx: (date) => {
+        return MONTH_LABELS(date.getMonth());
+    },
+    aa: (date) => {
+        return completFormat(date.getFullYear(), 4);
+    },
+    hh: (date) => {
+        return completFormat(date.getHours(), 2);
+    },
+    ii: (date) => {
+        return completFormat(date.getMinutes(), 2);
+    },
+    ss: (date) => {
+        return completFormat(date.getSeconds(), 2);
+    },
+    hz: (date) => {
+        return completFormat(hourFormat(date), 2);
+    },
+    zz: (date) => {
+        return date.getHours() > 11 ? 'PM' : 'AM';
+    }
+};
+const createElapsedTime = (value, single, charPlural = 's', plural) => {
+    plural = plural || `${single}${charPlural}`;
+    const label = `${single}(${charPlural})`;
+    return {
+        value,
+        label,
+        single,
+        plural
+    };
+};
+[
+    createElapsedTime(Miliseconds.Year, 'año'),
+    createElapsedTime(Miliseconds.Month, 'mes', 'es'),
+    createElapsedTime(Miliseconds.Week, 'semana'),
+    createElapsedTime(Miliseconds.Day, 'día', 's', 'dias'),
+    createElapsedTime(Miliseconds.Hour, 'hora'),
+    createElapsedTime(Miliseconds.Minute, 'minuto'),
+    createElapsedTime(Miliseconds.Second, 'segundo')
+];
+function getDateWeight(date) {
+    return date.getFullYear() * 365 + (date.getMonth() + 1) * 30 + date.getDate();
+}
+function dateIsEquals(date, compare = new Date()) {
+    return date.getTime() === compare.getTime();
+}
+function dateIsEqualsWeight(date, compare = new Date()) {
+    return getDateWeight(date) === getDateWeight(compare);
+}
+function dateIsBefore(date, compare = new Date()) {
+    return date.getTime() > compare.getTime();
+}
+function dateIsAfter(date, compare = new Date()) {
+    return date.getTime() < compare.getTime();
+}
+function dateIsBetween(minDate, maxDate, compare = new Date()) {
+    return dateIsAfter(minDate, compare) && dateIsBefore(maxDate, compare);
+}
+function getTimeDifference(date, compare = new Date()) {
+    return date.getTime() - compare.getTime();
+}
+function normalizeMinTime(date) {
+    const normalize = new Date(date.getTime());
+    normalize.setHours(0);
+    normalize.setMinutes(0);
+    normalize.setSeconds(0);
+    normalize.setMilliseconds(0);
+    return normalize;
+}
+function normalizeMaxTime(date) {
+    const normalize = new Date(date.getTime());
+    normalize.setHours(23);
+    normalize.setMinutes(59);
+    normalize.setSeconds(59);
+    normalize.setMilliseconds(0);
+    return normalize;
+}
+function getDaysOfMonth(year, month) {
+    return month === 1 && isLeapYear(year) ? 29 : MONTH_DAYS[month];
+}
+function isLeapYear(value) {
+    const year = value instanceof Date ? value.getFullYear() : value;
+    return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+}
+const regInterpolation = /{([^{}]*)}/g;
+function dateFormatTemplate(date, template) {
+    return template.replace(regInterpolation, (value, key) => formatters[key] ? formatters[key](date) : value);
+}
+function assignYearInDate(date, year) {
+    const newDate = new Date(date.getTime());
+    verifyDayInYear(newDate, year);
+    newDate.setFullYear(year);
+    return newDate;
+}
+function assignMonthInDate(date, month) {
+    const newDate = new Date(date.getTime());
+    verifyDayInMonth(newDate, month);
+    newDate.setMonth(month);
+    return newDate;
+}
+function assignDayInDate(date, day) {
+    const newDate = new Date(date.getTime());
+    newDate.setDate(day);
+    return newDate;
+}
+
+class DateRange {
+    constructor(minDate, maxDate) {
+        this.minDate = normalizeMinTime(minDate);
+        this.maxDate =
+            maxDate && dateIsBefore(maxDate, minDate)
+                ? normalizeMinTime(maxDate)
+                : normalizeMinTime(minDate);
+    }
+    get minISOFormat() {
+        return this.minDate.toISOString();
+    }
+    get maxISOFormat() {
+        return this.maxDate.toISOString();
+    }
+    between(date) {
+        return dateIsBetween(this.minDate, this.maxDate, date);
+    }
+    equals({ maxDate, minDate }) {
+        return dateIsEquals(this.minDate, minDate) && dateIsEquals(this.maxDate, maxDate);
+    }
+    recalculate(date) {
+        if (dateIsBefore(this.minDate, date)) {
+            return new DateRange(date, this.maxDate);
+        }
+        if (dateIsAfter(this.maxDate, date)) {
+            return new DateRange(this.minDate, date);
+        }
+        const minDifference = getTimeDifference(date, this.minDate);
+        const maxDifference = getTimeDifference(this.maxDate, date);
+        return minDifference > maxDifference
+            ? new DateRange(this.minDate, date)
+            : new DateRange(date, this.maxDate);
+    }
+    static now() {
+        return new DateRange(new Date());
+    }
+}
+
 function dateIsOutRangeMin(props) {
     const { date, minDate } = props;
     return !!minDate && dateIsBefore(normalizeMinTime(minDate), date);
@@ -891,6 +1288,30 @@ function createYearPicker(props) {
     };
 }
 
+const normalize = (word) => {
+    return word
+        .slice()
+        .replace(/á/g, 'a')
+        .replace(/Á/g, 'A')
+        .replace(/é/g, 'e')
+        .replace(/É/g, 'E')
+        .replace(/í/g, 'i')
+        .replace(/Í/g, 'I')
+        .replace(/ó/g, 'o')
+        .replace(/Ó/g, 'O')
+        .replace(/ú/g, 'u')
+        .replace(/Ú/g, 'U');
+};
+const hasPattern = (word, pattern, force = false) => {
+    let filter = pattern.toLowerCase();
+    let test = word.toLowerCase();
+    if (force) {
+        test = normalize(test);
+        filter = normalize(filter);
+    }
+    return !!test.match(`^.*${filter}.*$`);
+};
+
 function createEmptyStore() {
     return {
         coincidences: undefined,
@@ -1286,15 +1707,7 @@ class ConfirmationResult extends PartialSealed {
     }
 }
 function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    return (jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-confirmation__component", children: [jsxs("div", { className: "rls-confirmation__header", children: [title && (jsx("div", { className: "rls-confirmation__header__title", children: title })), subtitle && (jsx("div", { className: "rls-confirmation__header__subtitle", children: subtitle }))] }), jsx("div", { className: "rls-confirmation__body", children: content && (jsx("div", { className: "rls-confirmation__body__content", children: content })) }), (approved || reject) && (jsx("div", { className: "rls-confirmation__footer", children: jsxs("div", { className: "rls-confirmation__footer__actions", children: [approved && (jsx(RlsButton, { type: "raised", onClick: () => {
-                                        if (approved.onClick) {
-                                            approved.onClick();
-                                        }
-                                    }, children: approved.label })), reject && (jsx(RlsButton, { type: "outline", onClick: () => {
-                                        if (reject.onClick) {
-                                            reject.onClick();
-                                        }
-                                    }, children: reject.label }))] }) }))] }), jsx("div", { className: "rls-confirmation__backdrop" })] }));
+    return (jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-confirmation__component", children: [jsxs("div", { className: "rls-confirmation__header", children: [title && jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsx("div", { className: "rls-confirmation__body", children: content && (jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsx("div", { className: "rls-confirmation__footer", children: jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsx(RlsButton, { type: "raised", onClick: approved.onClick, children: approved.label })), reject && (jsx(RlsButton, { type: "outline", onClick: reject.onClick, children: reject.label }))] }) }))] }), jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmationService() {
     const [config, setConfig] = useState({});
@@ -1363,15 +1776,18 @@ function useDatatable() {
     const bodyRef = useRef(null);
     useEffect(() => {
         let observer;
-        if (bodyRef?.current) {
+        const body = bodyRef?.current;
+        if (body) {
             observer = new ResizeObserver(() => {
-                const scrollHeight = bodyRef?.current?.scrollHeight || 0;
-                const clientHeight = bodyRef?.current?.clientHeight || 0;
+                const scrollHeight = body.scrollHeight || 0;
+                const clientHeight = body.clientHeight || 0;
                 setScrolleable(scrollHeight > clientHeight);
             });
             observer.observe(bodyRef?.current);
         }
-        return () => observer?.disconnect();
+        return () => {
+            observer?.disconnect();
+        };
     }, []);
     return { bodyRef, scrolleable };
 }
@@ -1380,17 +1796,18 @@ function useListControl({ suggestions, formControl }) {
     const boxContentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
-    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 [listState, setListState] = useState({
+        collection: new ListCollection([]),
+        focused: false,
+        higher: false,
+        value: '',
+        visible: false
+    });
     const position = useRef(0);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
             if (!boxContentRef?.current?.contains(target)) {
-                setVisible(false);
+                setListState((state) => ({ ...state, visible: false }));
             }
         }
         document.addEventListener('click', onCloseSuggestions);
@@ -1399,25 +1816,37 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     useEffect(() => {
-        if (visible && !opened) {
-            setOpened(true);
-        }
-        if (!visible && opened && !!formControl?.touched) {
-            formControl.touch();
-        }
-        setHigher(!locationListIsBottom(boxContentRef.current, listRef.current));
-    }, [visible]);
+        const boxContent = boxContentRef.current;
+        const list = listRef.current;
+        formControl?.touch();
+        setListState((state) => ({
+            ...state,
+            higher: !locationListIsBottom(boxContent, list)
+        }));
+    }, [listState.visible]);
     useEffect(() => {
-        setCollection(new ListCollection(suggestions));
+        setListState((state) => ({
+            ...state,
+            collection: new ListCollection(suggestions)
+        }));
     }, [suggestions]);
+    function setFocused(focused) {
+        setListState((state) => ({ ...state, focused }));
+    }
+    function setValue(value) {
+        setListState((state) => ({ ...state, value }));
+    }
+    function setVisible(visible) {
+        setListState((state) => ({ ...state, visible }));
+    }
     function navigationInput(event) {
-        if (visible) {
+        if (listState.visible) {
             const newPosition = listNavigationInput({
                 contentElement: boxContentRef.current,
                 event: event,
                 listElement: listRef.current
             });
-            position.current = itIsDefined(newPosition) ? newPosition : 0;
+            position.current = newPosition || 0;
         }
     }
     function navigationElement(event) {
@@ -1430,19 +1859,15 @@ function useListControl({ suggestions, formControl }) {
         });
     }
     return {
+        ...listState,
         boxContentRef,
-        collection,
-        focused,
-        higher,
         inputRef,
         listRef,
         navigationElement,
         navigationInput,
         setFocused,
         setValue,
-        setVisible,
-        value,
-        visible
+        setVisible
     };
 }
 
@@ -1623,8 +2048,24 @@ function RlsModal({ children, visible, rlsTheme }) {
     return ReactDOM.createPortal(jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-modal__component", children: children }), jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
-const controlIsValid = (props) => {
-    const { state, validators } = props;
+function itIsFormControlOptions(props) {
+    return (typeof props === 'object' && ('state' in props || 'validators' in props));
+}
+function createFormControlOptions(...argsProps) {
+    const [props, validators] = argsProps;
+    if (!props) {
+        return { state: props, validators };
+    }
+    if (!validators && itIsFormControlOptions(props)) {
+        return props;
+    }
+    return {
+        state: props,
+        validators
+    };
+}
+
+const controlIsValid = ({ state, validators }) => {
     return validators.reduce((errors, validator) => {
         const error = validator(state);
         if (error) {
@@ -1634,89 +2075,77 @@ const controlIsValid = (props) => {
     }, []);
 };
 
-function useControl(controlProps, controlValidators) {
-    const props = createFormControlProps(controlProps, controlValidators);
-    const [state, setCurrentState] = useState(props.state);
-    const [value, setValue] = useState(props.state);
-    const [touched, setTouched] = useState(props.touched || false);
-    const [dirty, setDirty] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const [disabled, setDisabled] = useState(false);
-    const [initialValue] = useState(props.state);
-    const [validators, setValidators] = useState(props.validators);
-    const [subscribers] = useState(new BehaviorSubject(props.state));
+function useControl(controlOptions, controlValidators) {
+    const { state, touched, validators } = createFormControlOptions(controlOptions, controlValidators);
+    const [controlState, setControlState] = useState({
+        dirty: false,
+        disabled: false,
+        focused: false,
+        state: state,
+        touched: !!touched,
+        validators: validators
+    });
+    const initialState = useRef(state);
     const elementRef = useRef(null);
-    const errors = (() => validators ? controlIsValid({ state, validators }) : [])();
-    const error = (() => errors[0])();
-    const valid = (() => errors.length === 0)();
-    useEffect(() => {
-        if (state !== null && state !== undefined) {
-            setValue(state);
-        }
-        subscribers.next(state);
-    }, [state]);
+    const errors = validators ? controlIsValid({ state, validators }) : [];
+    const valid = errors.length === 0;
     function focus() {
-        setFocused(true);
+        setControlState((state) => ({ ...state, focused: true }));
     }
     function blur() {
-        setFocused(false);
+        setControlState((state) => ({ ...state, focused: false, touched: true }));
     }
     function disable() {
-        setDisabled(true);
+        setControlState((state) => ({ ...state, disabled: true }));
     }
     function enable() {
-        setDisabled(false);
+        setControlState((state) => ({ ...state, disabled: false }));
     }
     function touch() {
-        setTouched(true);
-    }
-    function untouch() {
-        setTouched(false);
+        setControlState((state) => ({ ...state, touched: true }));
     }
     function setState(state) {
-        setDirty(true);
-        setCurrentState(state);
+        setControlState((currentState) => ({
+            ...currentState,
+            dirty: true,
+            state
+        }));
     }
-    function reset() {
-        setTouched(false);
-        setDirty(false);
-        setCurrentState(initialValue);
+    function setValidators(validators) {
+        setControlState((state) => ({ ...state, validators }));
     }
-    function subscribe(subscriber) {
-        const subscription = subscribers.subscribe(subscriber);
-        return () => subscription.unsubscribe();
+    function reset() {
+        setControlState((currentState) => ({
+            ...currentState,
+            dirty: false,
+            state: initialState.current,
+            touched: false
+        }));
     }
     return {
+        ...controlState,
         blur,
-        dirty,
         disable,
-        disabled,
         elementRef,
         enable,
-        enabled: !disabled,
-        error,
+        enabled: !controlState.disabled,
+        error: errors[0],
         errors,
         focus,
-        focused,
         invalid: !valid,
-        pristine: !dirty,
+        pristine: !controlState.dirty,
         reset,
         setState,
         setValidators,
-        state,
-        subscribe,
         touch,
-        touched,
-        unfocused: !focused,
-        untouch,
-        untouched: !touched,
+        unfocused: !controlState.focused,
+        untouched: !controlState.touched,
         valid,
-        value,
-        wrong: touched && !valid
+        wrong: controlState.touched && !valid
     };
 }
-function useReactControl(controlProps, controlValidators) {
-    return useControl(controlProps, controlValidators);
+function useReactControl(options, validators) {
+    return useControl(options, validators);
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
@@ -1781,7 +2210,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-picker-date__header", children: [jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
+    return (jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-picker-date__header", children: [jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
                     month: visibility === 'MONTH',
                     year: visibility === 'YEAR'
@@ -1815,10 +2244,8 @@ function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate,
     }
     function onClean() {
         if (value) {
+            formControl?.touch();
             onChange(undefined);
-            if (formControl && !formControl.touched) {
-                formControl.touch();
-            }
         }
         else {
             setModalIsVisible(true);
@@ -1828,10 +2255,8 @@ function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate,
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
+                        formControl?.touch();
                         setModalIsVisible(false);
-                        if (!formControl?.touched) {
-                            formControl?.touch();
-                        }
                     } }) })] }));
 }
 
@@ -2114,5 +2539,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSearchInput, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
+export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map