@rolster/react-components 18.12.9 → 18.13.0

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, createContext } from 'react';
-import { currencyFormat, PartialSealed } from '@rolster/helpers-advanced';
-import { daysFromMonth, weight, assignDay, DAY_LABELS, formatDate, between, DateRange, normalizeMinTime, before, Month, MONTH_NAMES, after, assignYear, assignMonth } from '@rolster/helpers-date';
+import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/helpers-advanced';
+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 } from '@rolster/helpers-string';
 import { i18n } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
@@ -54,7 +54,7 @@ function RlsIcon({ value, skeleton }) {
 }
 
 function RlsButton({ type, children, disabled, prefixIcon, suffixIcon, rlsTheme, onClick }) {
-    return (jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsx(RlsIcon, { value: prefixIcon }), children && (jsx("div", { className: "rls-button__label", children: children })), suffixIcon && jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsx(RlsIcon, { value: prefixIcon }), children && jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, tooltip, onClick }) {
@@ -185,6 +185,10 @@ function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
     return (jsx("div", { className: renderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
 }
 
+function RlsProgressCircular({ rlsTheme }) {
+    return (jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "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" }) }));
 }
@@ -214,6 +218,10 @@ function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsT
     return (jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsx("img", { src: img }), initials && jsx("span", { children: initials })] })), jsxs("div", { className: "rls-ballot__component", children: [jsx("label", { className: "rls-ballot__title", children: jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsx("label", { className: "rls-ballot__subtitle", children: jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
+function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
+    return (jsxs("div", { className: renderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsx(RlsProgressCircular, {})] }));
+}
+
 function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
     const componentRef = useRef(null);
     const [firstAction] = options;
@@ -265,241 +273,541 @@ function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme
         }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-checkbox-label__component", onClick: onToggle, children: jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-checkbox-label__text", children: children })] }));
 }
 
-class DayPickerFactory {
-    constructor(props) {
-        const { date, value, maxDate, minDate } = props;
-        this.value = value;
-        this.date = new Date(date.getTime());
-        this.maxDate = maxDate;
-        this.minDate = minDate;
-        this.date.setDate(1);
-    }
-    static execute(props) {
-        const factory = new DayPickerFactory(props);
-        const firstWeek = factory.createFirstWeek();
-        const rightWeeks = factory.createRightWeeks();
-        return [firstWeek, ...rightWeeks];
-    }
-    createFirstWeek() {
-        const dayStart = this.date.getDay();
-        const days = [];
-        let day = 1;
-        for (let start = 0; start < dayStart; start++) {
-            days.push(this.createDayState());
-        }
-        for (let end = dayStart; end < 7; end++) {
-            days.push(this.createDayState(day));
-            day++;
-        }
-        return { days };
-    }
-    createRightWeeks() {
-        const dayStart = this.date.getDay();
-        const rightWeeks = [];
-        const dayCount = daysFromMonth(this.date.getFullYear(), this.date.getMonth());
-        let days = [];
-        let countDaysWeek = 1;
-        let day = 8 - dayStart;
-        do {
-            days.push(this.createDayState(day));
-            day++;
-            countDaysWeek++;
-            if (countDaysWeek > 7) {
-                rightWeeks.push({ days });
-                days = [];
-                countDaysWeek = 1;
-            }
-        } while (day <= dayCount);
-        const daysPending = this.createDaysPending(days.length);
-        rightWeeks.push({ days: [...days, ...daysPending] });
-        return rightWeeks;
-    }
-    createDaysPending(daysWeek) {
-        const daysPending = [];
-        const length = 7 - daysWeek;
-        for (let index = 0; index < length; index++) {
-            daysPending.push(this.createDayState());
-        }
-        return daysPending;
-    }
-    createDayState(value) {
-        return {
-            disabled: this.overflowDay(value || 0),
-            forbidden: !value,
-            selected: value === this.value,
-            value
-        };
-    }
-    overflowDay(day) {
-        return this.minOverflowDay(day) || this.maxOverflowDay(day);
-    }
-    minOverflowDay(day) {
-        return this.minDate
-            ? weight(assignDay(this.date, day)) < weight(this.minDate)
-            : false;
-    }
-    maxOverflowDay(day) {
-        return this.maxDate
-            ? weight(assignDay(this.date, day)) > weight(this.maxDate)
-            : false;
-    }
+function dateIsOutRangeMin(props) {
+    const { date, minDate } = props;
+    return !!minDate && dateIsBefore(normalizeMinTime(minDate), date);
+}
+function dateIsOutRangeMax(props) {
+    const { date, maxDate } = props;
+    return !!maxDate && dateIsAfter(normalizeMaxTime(maxDate), date);
+}
+function dateOutRange(props) {
+    return dateIsOutRangeMin(props) || dateIsOutRangeMax(props);
+}
+function checkDateRange(props) {
+    const { date, maxDate, minDate } = props;
+    return minDate && dateIsOutRangeMax(props)
+        ? minDate
+        : maxDate && dateIsOutRangeMax(props)
+            ? maxDate
+            : date;
+}
+
+const DAYS_WEEK = 7;
+const COUNT_YEAR_RANGE = 4;
+
+function createDayState(props, today, value) {
+    const { date, day, month, year } = props;
+    const dateValue = value && new Date(year, month, value);
+    return {
+        disabled: dayIsOutside(props, value || 0),
+        focused: !!value && day === value,
+        forbidden: !value,
+        selected: !!dateValue && dateIsEqualsWeight(date, dateValue),
+        today: !!dateValue && dateIsEqualsWeight(today, dateValue),
+        value
+    };
+}
+function createFirstWeek$1(props, date, today) {
+    const days = [];
+    let day = 1;
+    for (let start = 0; start < date.getDay(); start++) {
+        days.push(createDayState(props, today));
+    }
+    for (let end = date.getDay(); end < 7; end++) {
+        days.push(createDayState(props, today, day));
+        day++;
+    }
+    return { days };
+}
+function createDaysPending$1(props, today, days) {
+    const daysPending = [];
+    const length = 7 - days;
+    for (let index = 0; index < length; index++) {
+        daysPending.push(createDayState(props, today));
+    }
+    return daysPending;
+}
+function createNextWeeks$1(props, date, today) {
+    const daysMonth = getDaysOfMonth(date.getFullYear(), date.getMonth());
+    const weeks = [];
+    let days = [];
+    let countDays = 1;
+    let day = DAYS_WEEK - date.getDay() + 1;
+    do {
+        days.push(createDayState(props, today, day));
+        day++;
+        countDays++;
+        if (countDays > DAYS_WEEK) {
+            weeks.push({ days });
+            days = [];
+            countDays = 1;
+        }
+    } while (day <= daysMonth);
+    if (days.length && days.length < DAYS_WEEK) {
+        weeks.push({
+            days: [...days, ...createDaysPending$1(props, today, days.length)]
+        });
+    }
+    return weeks;
+}
+function dayIsOutsideMin(props, day) {
+    const { month, year, minDate } = props;
+    return minDate
+        ? getDateWeight(new Date(year, month, day)) < getDateWeight(minDate)
+        : false;
+}
+function dayIsOutsideMax(props, day) {
+    const { month, year, maxDate } = props;
+    return maxDate
+        ? getDateWeight(new Date(year, month, day)) > getDateWeight(maxDate)
+        : false;
+}
+function dayIsOutside(props, day) {
+    return dayIsOutsideMin(props, day) || dayIsOutsideMax(props, day);
+}
+function checkDayPicker(props) {
+    const { day, maxDate, minDate } = props;
+    return minDate && dayIsOutsideMin(props, day)
+        ? minDate.getDate()
+        : maxDate && dayIsOutsideMax(props, day)
+            ? maxDate.getDate()
+            : undefined;
+}
+function createDayPicker(props) {
+    const date = new Date(props.year, props.month, 1);
+    const today = new Date();
+    const firstWeek = createFirstWeek$1(props, date, today);
+    const nextWeeks = createNextWeeks$1(props, date, today);
+    return [firstWeek, ...nextWeeks];
+}
+
+function dateIsSelected(base, date, day) {
+    return (date.getFullYear() === base.getFullYear() &&
+        date.getMonth() === base.getMonth() &&
+        day === date.getDate());
+}
+function sourceIsSelected({ sourceDate }, base, day) {
+    return dateIsSelected(base, sourceDate, day);
+}
+function rangeIsSelected({ range }, base, day) {
+    return (dateIsSelected(base, range.minDate, day) ||
+        dateIsSelected(base, range.maxDate, day));
+}
+function dayIsRange({ range }, base, day) {
+    return dateIsBetween(range.minDate, range.maxDate, assignDayInDate(base, day));
+}
+function createDayRangeState(props, base, day) {
+    return {
+        disabled: dayRangeIsOutside(props, day || 0),
+        end: day ? rangeIsSelected(props, base, day) : false,
+        forbidden: !day,
+        ranged: day ? dayIsRange(props, base, day) : false,
+        source: day ? sourceIsSelected(props, base, day) : false,
+        value: day
+    };
+}
+function createFirstWeek(props, base) {
+    const days = [];
+    let day = 1;
+    for (let start = 0; start < base.getDay(); start++) {
+        days.push(createDayRangeState(props, base));
+    }
+    for (let end = base.getDay(); end < 7; end++) {
+        days.push(createDayRangeState(props, base, day));
+        day++;
+    }
+    return { days };
+}
+function createDaysPending(props, base, days) {
+    const daysPending = [];
+    const length = 7 - days;
+    for (let index = 0; index < length; index++) {
+        daysPending.push(createDayRangeState(props, base));
+    }
+    return daysPending;
+}
+function createNextWeeks(props, base) {
+    const weeks = [];
+    const { date } = props;
+    const dayCount = getDaysOfMonth(date.getFullYear(), date.getMonth());
+    let days = [];
+    let countDays = 1;
+    let day = DAYS_WEEK - base.getDay() + 1;
+    do {
+        days.push(createDayRangeState(props, date, day));
+        day++;
+        countDays++;
+        if (countDays > 7) {
+            weeks.push({ days });
+            days = [];
+            countDays = 1;
+        }
+    } while (day <= dayCount);
+    if (days.length && days.length < DAYS_WEEK) {
+        weeks.push({
+            days: [...days, ...createDaysPending(props, base, days.length)]
+        });
+    }
+    return weeks;
+}
+function dayRangeIsOutsideMin(props, day) {
+    const { date, minDate } = props;
+    return minDate
+        ? getDateWeight(assignDayInDate(date, day)) < getDateWeight(minDate)
+        : false;
+}
+function dayRangeIsOutsideMax(props, day) {
+    const { date, maxDate } = props;
+    return maxDate
+        ? getDateWeight(assignDayInDate(date, day)) > getDateWeight(maxDate)
+        : false;
+}
+function dayRangeIsOutside(props, day) {
+    return dayRangeIsOutsideMin(props, day) || dayRangeIsOutsideMax(props, day);
+}
+function createDayRangePicker(props) {
+    const date = new Date(props.date.getFullYear(), props.date.getMonth(), 1);
+    const firstWeek = createFirstWeek(props, date);
+    const nextWeeks = createNextWeeks(props, date);
+    return [firstWeek, ...nextWeeks];
+}
+
+function createMonthState(props, value) {
+    const { date, month, year } = props;
+    return {
+        disabled: monthIsOutside(props, value),
+        focused: value === month,
+        label: MONTH_NAMES()[value],
+        selected: date.getFullYear() === year && value === date.getMonth(),
+        value
+    };
+}
+function monthIsOutsideMin(props, month) {
+    const { year, minDate } = props;
+    return minDate
+        ? minDate.getFullYear() === year && month < minDate.getMonth()
+        : false;
+}
+function monthIsOutsideMax(props, month) {
+    const { year, maxDate } = props;
+    return maxDate
+        ? maxDate.getFullYear() === year && month > maxDate.getMonth()
+        : false;
+}
+function monthIsOutside(props, month) {
+    return monthIsOutsideMin(props, month) || monthIsOutsideMax(props, month);
+}
+function checkMonthPicker(props) {
+    const { maxDate, minDate, month } = props;
+    return minDate && monthIsOutsideMin(props, month)
+        ? minDate.getMonth()
+        : maxDate && monthIsOutsideMax(props, month)
+            ? maxDate.getMonth()
+            : undefined;
+}
+function createMonthPicker(props) {
+    return [
+        createMonthState(props, Month.January),
+        createMonthState(props, Month.February),
+        createMonthState(props, Month.March),
+        createMonthState(props, Month.April),
+        createMonthState(props, Month.May),
+        createMonthState(props, Month.June),
+        createMonthState(props, Month.July),
+        createMonthState(props, Month.August),
+        createMonthState(props, Month.September),
+        createMonthState(props, Month.October),
+        createMonthState(props, Month.November),
+        createMonthState(props, Month.December)
+    ];
+}
+function monthIsLimitMin(props) {
+    const { month, date, minDate } = props;
+    if (itIsDefined(month) && date) {
+        const minYear = minDate ? minDate.getFullYear() : 0;
+        const minMonth = minDate ? minDate.getMonth() : 0;
+        return date.getFullYear() === minYear && month <= minMonth;
+    }
+    return false;
+}
+function monthIsLimitMax(props) {
+    const { month, date, maxDate } = props;
+    if (itIsDefined(month) && date) {
+        const maxYear = maxDate ? maxDate.getFullYear() : 10000;
+        const maxMonth = maxDate ? maxDate.getMonth() : 11;
+        return date.getFullYear() === maxYear && month >= maxMonth;
+    }
+    return false;
+}
+function monthLimitTemplate(props) {
+    return {
+        limitNext: monthIsLimitMax(props),
+        limitPrevious: monthIsLimitMin(props)
+    };
+}
+
+var PickerListenerType;
+(function (PickerListenerType) {
+    PickerListenerType["Select"] = "PickerSelect";
+    PickerListenerType["Now"] = "PickerNow";
+    PickerListenerType["Cancel"] = "PickerCancel";
+})(PickerListenerType || (PickerListenerType = {}));
+
+function createYear(props, value) {
+    const { date, year } = props;
+    return {
+        disabled: !value,
+        focused: value === year,
+        selected: value === date.getFullYear(),
+        value
+    };
+}
+function yearIsOutlineMin(props) {
+    const { year, minDate } = props;
+    return minDate ? year < minDate.getFullYear() : false;
+}
+function yearIsOutlineMax(props) {
+    const { year, maxDate } = props;
+    return maxDate ? year > maxDate.getFullYear() : false;
+}
+function checkYearPicker(props) {
+    const { maxDate, minDate } = props;
+    return minDate && yearIsOutlineMin(props)
+        ? minDate.getFullYear()
+        : maxDate && yearIsOutlineMax(props)
+            ? maxDate.getFullYear()
+            : undefined;
+}
+function createYearPicker(props) {
+    const { year, maxDate, minDate } = props;
+    const prevYears = [];
+    const nextYears = [];
+    let minRange = year;
+    let maxRange = year;
+    const minYear = minDate?.getFullYear() || 0;
+    const maxYear = maxDate?.getFullYear() || 10000;
+    for (let index = 0; index < COUNT_YEAR_RANGE; index++) {
+        const prevValue = year - COUNT_YEAR_RANGE + index;
+        const nextValue = year + index + 1;
+        const prevYear = prevValue >= minYear ? prevValue : undefined;
+        const nextYear = nextValue <= maxYear ? nextValue : undefined;
+        const prevState = createYear(props, prevYear);
+        const nextState = createYear(props, nextYear);
+        prevYears.push(prevState);
+        nextYears.push(nextState);
+        if (!!prevState.value && minRange > prevState.value) {
+            minRange = prevState.value;
+        }
+        if (!!nextState.value && maxRange < nextState.value) {
+            maxRange = nextState.value;
+        }
+    }
+    const yearCenter = createYear(props, year);
+    return {
+        canPrevious: minYear < minRange,
+        canNext: maxYear > maxRange,
+        maxRange,
+        minRange,
+        years: [...prevYears, yearCenter, ...nextYears]
+    };
+}
+
+function createEmptyStore() {
+    return {
+        coincidences: undefined,
+        pattern: '',
+        previous: null
+    };
+}
+function searchForPattern(props) {
+    const { pattern, store } = props;
+    if (!store?.pattern) {
+        return null;
+    }
+    let newStore = store;
+    let search = false;
+    while (!search && newStore) {
+        search = hasPattern(pattern || '', newStore.pattern, true);
+        if (!search) {
+            newStore = newStore.previous;
+        }
+    }
+    return newStore || createEmptyStore();
+}
+function createStoreAutocomplete(props) {
+    const { pattern, suggestions, reboot } = props;
+    if (!pattern) {
+        return { collection: suggestions, store: createEmptyStore() };
+    }
+    const store = reboot ? createEmptyStore() : searchForPattern(props);
+    const elements = store?.coincidences || suggestions;
+    const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
+    return {
+        collection: coincidences,
+        store: {
+            coincidences,
+            pattern,
+            previous: store
+        }
+    };
+}
+
+const classElement = '.rls-list-field__element';
+const POSITION_INITIAL = 0;
+function locationListIsBottom(contentElement, listElement) {
+    if (contentElement && listElement) {
+        const { top, height } = contentElement.getBoundingClientRect();
+        const { clientHeight } = listElement;
+        return top + height + clientHeight < window.innerHeight;
+    }
+    return true;
+}
+function navigationInputDown(props) {
+    const { contentElement, listElement } = props;
+    if (!locationListIsBottom(contentElement, listElement)) {
+        return undefined;
+    }
+    const elements = listElement?.querySelectorAll(classElement);
+    if (elements?.length) {
+        elements.item(0).focus();
+        setTimeout(() => {
+            listElement?.scroll({ top: 0, behavior: 'smooth' });
+        }, 100);
+    }
+    return POSITION_INITIAL;
+}
+function navigationInputUp(props) {
+    const { contentElement, listElement } = props;
+    if (locationListIsBottom(contentElement, listElement)) {
+        return undefined;
+    }
+    const elements = listElement?.querySelectorAll(classElement);
+    if (!elements?.length) {
+        return POSITION_INITIAL;
+    }
+    const position = elements.length - 1;
+    const element = elements.item(position);
+    element?.focus();
+    setTimeout(() => {
+        listElement?.scroll({
+            top: element?.offsetTop + element?.offsetLeft,
+            behavior: 'smooth'
+        });
+    }, 100);
+    return position;
+}
+function navigationElementDown(props) {
+    const { contentElement, inputElement, listElement, position } = props;
+    const elements = listElement?.querySelectorAll(classElement);
+    const newPosition = position + 1;
+    if (newPosition < (elements?.length || 0)) {
+        elements?.item(newPosition)?.focus();
+        return newPosition;
+    }
+    if (!locationListIsBottom(contentElement, listElement)) {
+        inputElement?.focus();
+    }
+    return position;
+}
+function navigationElementUp(props) {
+    const { contentElement, inputElement, listElement, position } = props;
+    if (position > 0) {
+        const elements = listElement?.querySelectorAll(classElement);
+        const newPosition = position - 1;
+        elements?.item(newPosition)?.focus();
+        return newPosition;
+    }
+    if (locationListIsBottom(contentElement, listElement)) {
+        inputElement?.focus();
+    }
+    return POSITION_INITIAL;
+}
+function listNavigationInput(props) {
+    switch (props.event.code) {
+        case 'ArrowDown':
+            return navigationInputDown(props);
+        case 'ArrowUp':
+            return navigationInputUp(props);
+        default:
+            return undefined;
+    }
+}
+function listNavigationElement(props) {
+    const { event } = props;
+    switch (event.code) {
+        case 'ArrowDown':
+            return navigationElementDown(props);
+        case 'ArrowUp':
+            return navigationElementUp(props);
+        default:
+            return POSITION_INITIAL;
+    }
 }
-function createDayPicker(props) {
-    return DayPickerFactory.execute(props);
+
+class ListCollection {
+    constructor(value) {
+        this.value = value;
+    }
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
+    }
 }
 
-function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme, onValue }) {
-    const initialDate = date || new Date();
-    const initialDay = formControl?.state || initialDate.getDate();
+function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
+    const currentDate = date || new Date(); // Initial date
     const [weeks, setWeeks] = useState([]);
-    const [value, setValue] = useState(initialDay);
+    const [value, setValue] = useState(formControl?.state || currentDate.getDate());
     useEffect(() => {
-        setWeeks(createDayPicker({
-            date: initialDate,
-            value: formControl?.state || value,
+        const props = createPickerProps();
+        const day = checkDayPicker(props);
+        day ? setDayValue(day) : setWeeks(createDayPicker(props));
+    }, [date, month, year, value, minDate, maxDate]);
+    useEffect(() => {
+        const day = checkDayPicker(createPickerProps());
+        day
+            ? formControl?.setState(day)
+            : setValue(formControl?.state || currentDate.getDate());
+    }, [formControl?.state]);
+    function createPickerProps() {
+        return {
+            date: currentDate,
+            day: formControl?.state || value,
+            month: itIsDefined(month) ? month : currentDate.getMonth(),
+            year: year || currentDate.getFullYear(),
             minDate,
             maxDate
-        }));
-    }, [value, date, minDate, maxDate]);
-    useEffect(() => {
-        if (date && date.getDate() !== value) {
-            onChange(date.getDate());
-        }
-    }, [date]);
+        };
+    }
+    function setDayValue(value) {
+        formControl ? formControl.setState(value) : setValue(value);
+    }
     function onChange(value) {
-        setValue(value);
-        formControl?.setState(value);
+        setDayValue(value);
         if (onValue) {
             onValue(value);
         }
     }
-    return (jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, forbidden, selected }, index) => (jsx("div", { className: renderClassStatus('rls-day-picker__day', {
+    return (jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, focused, forbidden, selected, today }, index) => (jsx("div", { className: renderClassStatus('rls-day-picker__day', {
                             disabled: disabled || disabledPicker,
+                            focused,
                             forbidden,
-                            selected
-                        }), onClick: () => {
-                            if (value && !disabled) {
-                                onChange(value);
-                            }
-                        }, children: jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
+                            selected,
+                            today
+                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
-class DateRangePickerFactory {
-    constructor(props) {
-        const { date, range, sourceDate, maxDate, minDate } = props;
-        this.date = new Date(date.getTime());
-        this.range = range;
-        this.sourceDate = sourceDate;
-        this.maxDate = maxDate;
-        this.minDate = minDate;
-        this.date.setDate(1);
-    }
-    static execute(props) {
-        const factory = new DateRangePickerFactory(props);
-        const firstWeek = factory.createFirstWeek();
-        const rightWeeks = factory.createRightWeeks();
-        return [firstWeek, ...rightWeeks];
-    }
-    createFirstWeek() {
-        const dayStart = this.date.getDay();
-        const days = [];
-        let day = 1;
-        for (let start = 0; start < dayStart; start++) {
-            days.push(this.createDayRangeState());
-        }
-        for (let end = dayStart; end < 7; end++) {
-            days.push(this.createDayRangeState(day));
-            day++;
-        }
-        return { days };
-    }
-    createRightWeeks() {
-        const rightWeeks = [];
-        const dayStart = this.date.getDay();
-        const dayCount = daysFromMonth(this.date.getFullYear(), this.date.getMonth());
-        let days = [];
-        let countDaysWeek = 1;
-        let day = 8 - dayStart;
-        do {
-            days.push(this.createDayRangeState(day));
-            day++;
-            countDaysWeek++;
-            if (countDaysWeek > 7) {
-                rightWeeks.push({ days });
-                days = [];
-                countDaysWeek = 1;
-            }
-        } while (day <= dayCount);
-        const daysPending = this.createDaysPending(days.length);
-        rightWeeks.push({ days: [...days, ...daysPending] });
-        return rightWeeks;
-    }
-    createDaysPending(daysWeek) {
-        const daysPending = [];
-        const length = 7 - daysWeek;
-        for (let index = 0; index < length; index++) {
-            daysPending.push(this.createDayRangeState());
-        }
-        return daysPending;
-    }
-    isSelectedSource(day) {
-        return this.isSelectedForDate(this.sourceDate, day);
-    }
-    isSelectedEnd(day) {
-        return (this.isSelectedForDate(this.range.minDate, day) ||
-            this.isSelectedForDate(this.range.maxDate, day));
-    }
-    isSelectedForDate(date, day) {
-        return (date.getFullYear() === this.date.getFullYear() &&
-            date.getMonth() === this.date.getMonth() &&
-            day === date.getDate());
-    }
-    isRangedFromDate(day) {
-        return between(this.range.minDate, this.range.maxDate, assignDay(this.date, day));
-    }
-    overflowDay(day) {
-        return this.minOverflowDay(day) || this.maxOverflowDay(day);
-    }
-    minOverflowDay(day) {
-        return this.minDate
-            ? weight(assignDay(this.date, day)) < weight(this.minDate)
-            : false;
-    }
-    maxOverflowDay(day) {
-        return this.maxDate
-            ? weight(assignDay(this.date, day)) > weight(this.maxDate)
-            : false;
-    }
-    createDayRangeState(day) {
-        return {
-            value: day,
-            disabled: this.overflowDay(day || 0),
-            forbidden: !day,
-            ranged: day ? this.isRangedFromDate(day) : false,
-            end: day ? this.isSelectedEnd(day) : false,
-            source: day ? this.isSelectedSource(day) : false
-        };
-    }
-}
-function formatRange(range) {
-    const minFormat = formatDate(range.minDate, DATE_RANGE_FORMAT);
-    const maxFormat = formatDate(range.maxDate, DATE_RANGE_FORMAT);
-    return `${minFormat} - ${maxFormat}`;
-}
-function createRangePicker(props) {
-    return DateRangePickerFactory.execute(props);
-}
 
 function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
-    const initialRange = formControl?.state || DateRange.now();
-    const initialDate = normalizeMinTime(date || initialRange.minDate);
-    const sourceDate = useRef(initialRange.minDate);
+    const currentRange = formControl?.state || DateRange.now();
+    const currentDate = normalizeMinTime(date || currentRange.minDate);
+    const sourceDate = useRef(currentRange.minDate);
     const [weeks, setWeeks] = useState([]);
-    const [range, setRange] = useState(initialRange);
+    const [range, setRange] = useState(currentRange);
     useEffect(() => {
-        setWeeks(createRangePicker({
-            date: initialDate,
+        setWeeks(createDayRangePicker({
+            date: currentDate,
             range,
             sourceDate: sourceDate.current,
             minDate,
@@ -507,25 +815,21 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const newDate = assignDay(initialDate, value);
-        const newRange = before(newDate, sourceDate.current)
-            ? new DateRange(sourceDate.current, newDate)
-            : new DateRange(newDate, sourceDate.current);
-        sourceDate.current = newDate;
-        setRange(newRange);
-        formControl?.setState(newRange);
-    }
-    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__title", children: formatDate(sourceDate.current, DATE_RANGE_FORMAT) }), jsx("div", { className: "rls-day-range-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
+        const date = assignDayInDate(currentDate, value);
+        const range = dateIsBefore(date, sourceDate.current)
+            ? new DateRange(sourceDate.current, date)
+            : new DateRange(date, sourceDate.current);
+        sourceDate.current = date;
+        setRange(range);
+        formControl?.setState(range);
+    }
+    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__title", children: dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsx("div", { className: "rls-day-range-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
                             disabled: disabled || disabledPicker,
                             end,
                             forbidden,
                             ranged,
                             source
-                        }), onClick: () => {
-                            if (value && !disabled) {
-                                onChange(value);
-                            }
-                        }, children: jsx("span", { className: "rls-day-range-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
+                        }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-day-range-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
 function RlsMoneyField({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
@@ -536,156 +840,93 @@ function RlsMoneyField({ children, decimals, disabled, formControl, placeholder,
         }, 'rls-money-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
 }
 
-const MONTH_MAX_VALUE = Month.December;
-const MONTH_MIN_VALUE = Month.January;
-class MonthPickerFactory {
-    constructor(props) {
-        const { date, value, maxDate, minDate } = props;
-        this.value = value;
-        this.date = new Date(date.getTime());
-        this.maxDate = maxDate;
-        this.minDate = minDate;
-    }
-    static execute(props) {
-        const factory = new MonthPickerFactory(props);
-        return [
-            factory.createMonth(Month.January),
-            factory.createMonth(Month.February),
-            factory.createMonth(Month.March),
-            factory.createMonth(Month.April),
-            factory.createMonth(Month.May),
-            factory.createMonth(Month.June),
-            factory.createMonth(Month.July),
-            factory.createMonth(Month.August),
-            factory.createMonth(Month.September),
-            factory.createMonth(Month.October),
-            factory.createMonth(Month.November),
-            factory.createMonth(Month.December)
-        ];
-    }
-    createMonth(value) {
-        return {
-            value,
-            label: MONTH_NAMES()[value],
-            disabled: this.overflowMonth(value),
-            selected: value === this.value
-        };
-    }
-    get minYear() {
-        return this.minDate?.getFullYear() || 0;
-    }
-    get maxYear() {
-        return this.maxDate?.getFullYear() || 10000;
-    }
-    get minMonth() {
-        return this.minDate ? this.minDate.getMonth() : MONTH_MIN_VALUE;
-    }
-    get maxMonth() {
-        return this.maxDate ? this.maxDate.getMonth() : MONTH_MAX_VALUE;
-    }
-    overflowMonth(month) {
-        return this.minOverflowMonth(month) || this.maxOverflowMonth(month);
-    }
-    minOverflowMonth(month) {
-        return this.date.getFullYear() === this.minYear && month < this.minMonth;
-    }
-    maxOverflowMonth(month) {
-        return this.date.getFullYear() === this.maxYear && month > this.maxMonth;
-    }
-}
-function isMinLimitMonth(month, date, minDate) {
-    if (typeof month === 'number' && date) {
-        const minMonth = minDate ? minDate.getMonth() : MONTH_MIN_VALUE;
-        const minYear = minDate ? minDate.getFullYear() : 0;
-        return date.getFullYear() === minYear && month <= minMonth;
-    }
-    return false;
-}
-function isMaxLimitMonth(month, date, maxDate) {
-    if (typeof month === 'number' && date) {
-        const maxMonth = maxDate ? maxDate.getMonth() : MONTH_MAX_VALUE;
-        const maxYear = maxDate ? maxDate.getFullYear() : 10000;
-        return date.getFullYear() === maxYear && month >= maxMonth;
-    }
-    return false;
-}
-function createMonthPicker(props) {
-    return MonthPickerFactory.execute(props);
-}
-
-function RlsMonthPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
-    const initialDate = date || new Date();
-    const initialMonth = formControl?.state || initialDate.getMonth();
+function RlsMonthPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
+    const currentDate = date || new Date();
     const [months, setMonths] = useState([]);
-    const [value, setValue] = useState(initialMonth);
+    const [value, setValue] = useState(formControl?.state || currentDate.getMonth());
     useEffect(() => {
-        setMonths(createMonthPicker({
-            date: initialDate,
-            value: formControl?.state || value,
+        const props = createPickerProps(); // MonthPickerProps
+        const month = checkMonthPicker(props);
+        month ? setMonthValue(month) : setMonths(createMonthPicker(props));
+    }, [date, year, value, minDate, maxDate]);
+    useEffect(() => {
+        const month = checkMonthPicker(createPickerProps());
+        itIsDefined(month)
+            ? formControl?.setState(month)
+            : setValue(formControl?.state || currentDate.getMonth());
+    }, [formControl?.state]);
+    function createPickerProps() {
+        return {
+            date: currentDate,
+            month: itIsDefined(formControl?.state) ? formControl?.state : value,
+            year: year || currentDate.getFullYear(),
             minDate,
             maxDate
-        }));
-    }, [value, date, minDate, maxDate]);
+        };
+    }
+    function setMonthValue(value) {
+        formControl ? formControl.setState(value) : setValue(value);
+    }
     function onChange(value) {
-        formControl?.setState(value);
-        setValue(value);
+        setMonthValue(value);
         if (onValue) {
             onValue(value);
         }
     }
-    return (jsx("div", { className: "rls-month-picker", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, selected }, index) => (jsx("div", { className: renderClassStatus('rls-month-picker__component', {
-                disabled: disabled || disabledPicker || false,
+    return (jsx("div", { className: "rls-month-picker", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, focused, selected }, index) => (jsx("div", { className: renderClassStatus('rls-month-picker__component', {
+                disabled: disabled || disabledPicker,
+                focused,
                 selected
-            }), onClick: () => {
-                if (!disabled) {
-                    onChange(value);
-                }
-            }, children: jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
+            }), onClick: !(disabled || disabledPicker) ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
 }
 
-function RlsMonthTitlePicker({ date, disabled, monthControl, maxDate, minDate, onClick, type, yearControl }) {
-    const { state: month } = monthControl;
-    const { state: year } = yearControl;
-    const monthName = MONTH_NAMES()[month || 0];
+function RlsMonthTitlePicker({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+    const { limitNext, limitPrevious } = monthLimitTemplate({
+        date,
+        maxDate,
+        minDate,
+        month: monthControl.state
+    });
+    const monthName = MONTH_NAMES()[monthControl.state || 0];
     function onPreviousMonth() {
-        if (typeof month === 'number' && typeof year === 'number') {
-            if (month > MONTH_MIN_VALUE) {
-                monthControl.setState(month - 1);
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state > Month.January) {
+                monthControl.setState(monthControl.state - 1);
             }
             else {
-                monthControl.setState(MONTH_MAX_VALUE);
-                yearControl.setState(year - 1);
+                monthControl.setState(Month.December);
+                yearControl.setState(yearControl.state - 1);
             }
         }
     }
     function onPreviousYear() {
-        if (typeof year === 'number') {
-            yearControl.setState(year - 1);
+        if (itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state - 1);
         }
     }
     function onPrevious() {
         type === 'month' ? onPreviousMonth() : onPreviousYear();
     }
     function onNextMonth() {
-        if (typeof month === 'number' && typeof year === 'number') {
-            if (month < MONTH_MAX_VALUE) {
-                monthControl.setState(month + 1);
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state < Month.December) {
+                monthControl.setState(monthControl.state + 1);
             }
             else {
-                monthControl.setState(MONTH_MIN_VALUE);
-                yearControl.setState(year + 1);
+                monthControl.setState(Month.January);
+                yearControl.setState(yearControl.state + 1);
             }
         }
     }
     function onNextYear() {
-        if (typeof year === 'number') {
-            yearControl.setState(year + 1);
+        if (itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state + 1);
         }
     }
     function onNext() {
         type === 'month' ? onNextMonth() : onNextYear();
     }
-    return (jsxs("div", { className: "rls-month-title-picker", children: [jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: isMinLimitMonth(month, date, minDate) || disabled }), jsx("span", { onClick: onClick, children: monthName }), jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: isMaxLimitMonth(month, date, maxDate) || disabled })] }));
+    return (jsxs("div", { className: "rls-month-title-picker", children: [jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsx("span", { onClick: onClick, children: monthName }), jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 
 function RlsNumberField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
@@ -965,108 +1206,36 @@ function RlsToolbar({ actions, children, subtitle }) {
     return (jsxs("div", { className: "rls-toolbar", children: [jsxs("div", { className: "rls-toolbar__description", children: [children && jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsx("div", { children: action }, index))) }))] }));
 }
 
-const COUNT_YEAR_RANGE = 4;
-class YearPickerFactory {
-    constructor(props) {
-        const { value, maxDate, minDate } = props;
-        this.value = value;
-        this.maxDate = maxDate;
-        this.minDate = minDate;
-    }
-    static execute(props) {
-        const factory = new YearPickerFactory(props);
-        let year = props.year;
-        if (factory.minOverflowYear(year)) {
-            year = factory.minYear;
-        }
-        else if (factory.maxOverflowYear(year)) {
-            year = factory.maxYear;
-        }
-        const years = factory.createYears(year);
-        return {
-            hasNext: factory.hasNext,
-            hasPrevious: factory.hasPrevious,
-            maxRange: factory.maxYearRange,
-            minRange: factory.minYearRange,
-            years
-        };
-    }
-    createYears(year) {
-        const prevYears = [];
-        const nextYears = [];
-        this.minYearRange = year;
-        this.maxYearRange = year;
-        for (let index = 0; index < COUNT_YEAR_RANGE; index++) {
-            const yearPrev = year - COUNT_YEAR_RANGE + index;
-            const yearNext = year + index + 1;
-            const valuePrev = yearPrev >= this.minYear ? yearPrev : undefined;
-            const valueNext = yearNext <= this.maxYear ? yearNext : undefined;
-            const prevState = this.createYear(valuePrev);
-            const nextState = this.createYear(valueNext);
-            prevYears.push(prevState);
-            nextYears.push(nextState);
-            this.recalculateRange(prevState, nextState);
-        }
-        const yearCenter = this.createYear(year);
-        return [...prevYears, yearCenter, ...nextYears];
-    }
-    minOverflowYear(year) {
-        return year < this.minYear;
-    }
-    maxOverflowYear(year) {
-        return year > this.maxYear;
-    }
-    get minYear() {
-        return this.minDate?.getFullYear() || 0;
-    }
-    get maxYear() {
-        return this.maxDate?.getFullYear() || 10000;
-    }
-    get hasPrevious() {
-        return this.minYear < this.minYearRange;
-    }
-    get hasNext() {
-        return this.maxYear > this.maxYearRange;
-    }
-    createYear(value) {
-        return {
-            value,
-            disabled: !value,
-            selected: value === this.value
-        };
-    }
-    recalculateRange(prev, next) {
-        if (!!prev.value && this.minYearRange > prev.value) {
-            this.minYearRange = prev.value;
-        }
-        if (!!next.value && this.maxYearRange < next.value) {
-            this.maxYearRange = next.value;
-        }
-    }
-}
-function createYearPicker(props) {
-    return YearPickerFactory.execute(props);
-}
-
-function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
-    const initialDate = date || new Date();
-    const initialYear = formControl?.state || initialDate.getFullYear();
-    const [value, setValue] = useState(initialYear);
-    const [year, setYear] = useState(initialYear);
-    const [template, setTemplate] = useState(createYearPicker({
-        value: formControl?.state || value,
-        year: initialYear,
-        minDate,
-        maxDate
-    }));
+function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
+    const currentDate = date || new Date();
+    const [value, setValue] = useState(formControl?.state || currentDate.getFullYear());
+    const [year, setYear] = useState(formControl?.state || currentDate.getFullYear());
+    const [template, setTemplate] = useState(createYearPicker(createPickerProps()));
+    useEffect(() => {
+        const props = createPickerProps(); // YearPickerProps
+        const year = checkYearPicker(props);
+        year
+            ? setYearValue(year)
+            : setTemplate(createYearPicker(createPickerProps()));
+    }, [date, year, value, minDate, maxDate]);
     useEffect(() => {
-        setTemplate(createYearPicker({
-            value: formControl?.state || value,
+        const year = checkYearPicker(createPickerProps());
+        itIsDefined(year)
+            ? formControl?.setState(year)
+            : setValue(formControl?.state || currentDate.getFullYear());
+    }, [formControl?.state]);
+    function createPickerProps() {
+        return {
+            date: currentDate,
             year,
             minDate,
             maxDate
-        }));
-    }, [value, year, minDate, maxDate]);
+        };
+    }
+    function setYearValue(value) {
+        formControl ? formControl.setState(value) : setValue(value);
+        setYear(value);
+    }
     function onClickPrev() {
         setYear(year - 8);
     }
@@ -1074,21 +1243,16 @@ function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, m
         setYear(year + 8);
     }
     function onChange(value) {
-        formControl?.setState(value);
-        setYear(value);
-        setValue(value);
+        setYearValue(value);
         if (onValue) {
             onValue(value);
         }
     }
-    return (jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-year-picker__header", children: [jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: jsx("button", { disabled: !template.hasPrevious || disabledPicker, onClick: onClickPrev, children: jsx(RlsIcon, { value: "arrow-ios-left" }) }) }), jsxs("label", { className: "title-bold", children: [template.minRange, " - ", template.maxRange] }), jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: jsx("button", { disabled: !template.hasNext || disabledPicker, onClick: onClickNext, children: jsx(RlsIcon, { value: "arrow-ios-right" }) }) })] }), jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, selected }, index) => (jsx("div", { className: renderClassStatus('rls-year-picker__year', {
+    return (jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-year-picker__header", children: [jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (jsx("div", { className: renderClassStatus('rls-year-picker__year', {
                         disabled: disabled || disabledPicker,
+                        focused,
                         selected
-                    }), onClick: () => {
-                        if (value && !disabled) {
-                            onChange(value);
-                        }
-                    }, children: jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
+                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: jsx("span", { className: "rls-year-picker__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
 }
 
 const reactI18n = i18n({
@@ -1130,23 +1294,7 @@ function useDatatable() {
     return { bodyRef, scrolleable };
 }
 
-class ListCollection {
-    constructor(value) {
-        this.value = value;
-    }
-    find(element) {
-        return this.value.find((current) => current.compareTo(element));
-    }
-}
-
-const classElement = '.rls-list-field__element';
-const MAX_POSITION_VISIBLE = 4;
-const LIST_SIZE_REM = 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, higher: withHigher = false }) {
+function useListControl({ suggestions, formControl }) {
     const boxContentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
@@ -1156,11 +1304,10 @@ function useListControl({ suggestions, formControl, higher: withHigher = 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);
+    const position = useRef(0);
     useEffect(() => {
-        function onCloseSuggestions(event) {
-            if (!boxContentRef?.current?.contains(event.target)) {
+        function onCloseSuggestions({ target }) {
+            if (!boxContentRef?.current?.contains(target)) {
                 setVisible(false);
             }
         }
@@ -1173,95 +1320,32 @@ function useListControl({ suggestions, formControl, higher: withHigher = false }
         if (visible && !opened) {
             setOpened(true);
         }
-        if (!visible && opened && formControl && !formControl.touched) {
+        if (!visible && opened && !!formControl?.touched) {
             formControl.touch();
         }
-        setLocationList();
+        setHigher(!locationListIsBottom(boxContentRef.current, listRef.current));
     }, [visible]);
     useEffect(() => {
         setCollection(new ListCollection(suggestions));
     }, [suggestions]);
-    function setLocationList() {
-        if (boxContentRef?.current) {
-            const { top, height } = boxContentRef.current.getBoundingClientRect();
-            const overflow = BASE_SIZE_PX / 2;
-            const positionEnd = top + height + MAZ_LIST_SIZE_PX + overflow;
-            setHigher(positionEnd > window.innerHeight);
-        }
-    }
     function navigationInput(event) {
-        switch (event.code) {
-            case 'ArrowUp':
-                if (visible && higher) {
-                    navigationInputUp();
-                }
-                break;
-            case 'ArrowDown':
-                if (visible && (withHigher || !higher)) {
-                    navigationInputDown();
-                }
-                break;
+        if (visible) {
+            const newPosition = listNavigationInput({
+                contentElement: boxContentRef.current,
+                event: event,
+                listElement: listRef.current
+            });
+            position.current = itIsDefined(newPosition) ? newPosition : 0;
         }
     }
     function navigationElement(event) {
-        switch (event.code) {
-            case 'ArrowUp':
-                navigationElementUp();
-                break;
-            case 'ArrowDown':
-                navigationElementDown();
-                break;
-        }
-    }
-    function navigationInputUp() {
-        const elements = listRef?.current?.querySelectorAll(classElement);
-        if (elements?.length) {
-            const newPosition = elements.length - 1;
-            setListElements(elements);
-            setPositionElement(newPosition);
-            elements.item(newPosition).focus();
-            if (positionElement > MAX_POSITION_VISIBLE) {
-                const elementPosition = elements.length - MAX_POSITION_VISIBLE;
-                setTimeout(() => {
-                    listRef?.current?.scroll({
-                        top: ELEMENT_SIZE_PX * elementPosition,
-                        behavior: 'smooth'
-                    });
-                }, 100);
-            }
-        }
-    }
-    function navigationInputDown() {
-        const elements = listRef?.current?.querySelectorAll(classElement);
-        if (elements?.length) {
-            setListElements(elements);
-            setPositionElement(0);
-            elements.item(0).focus();
-            setTimeout(() => {
-                listRef?.current?.scroll({ top: 0, behavior: 'smooth' });
-            }, 100);
-        }
-    }
-    function navigationElementUp() {
-        if (positionElement > 0) {
-            const newPosition = positionElement - 1;
-            setPositionElement(newPosition);
-            listElements?.item(newPosition).focus();
-        }
-        else if (withHigher || !higher) {
-            inputRef?.current?.focus();
-        }
-    }
-    function navigationElementDown() {
-        const newPosition = positionElement + 1;
-        const length = listElements?.length || 0;
-        if (newPosition < length) {
-            setPositionElement(newPosition);
-            listElements?.item(newPosition).focus();
-        }
-        else if (higher && !withHigher) {
-            inputRef?.current?.focus();
-        }
+        position.current = listNavigationElement({
+            contentElement: boxContentRef.current,
+            event: event,
+            inputElement: inputRef.current,
+            listElement: listRef.current,
+            position: position.current
+        });
     }
     return {
         boxContentRef,
@@ -1290,39 +1374,31 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
         coincidences: [],
         previous: null
     });
-    const listControl = useListControl({
-        suggestions,
-        formControl,
-        higher: true
-    });
+    const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
-    const [changeInternal, setChangeInternal] = useState(false);
+    const changeInternal = useRef(false);
     useEffect(() => filterSuggestions(pattern, true), [suggestions]);
     useEffect(() => filterSuggestions(pattern), [pattern]);
     useEffect(() => {
-        changeInternal ? setChangeInternal(false) : resetState(formControl?.state);
+        if (changeInternal.current) {
+            changeInternal.current = false;
+        }
+        else {
+            resetState(formControl?.state);
+        }
     }, [formControl?.state]);
     useEffect(() => resetCollection(collection, formControl?.state), [collection]);
     function setFormState(value) {
-        setChangeInternal(true);
-        formControl?.setState(value);
+        if (formControl) {
+            changeInternal.current = true;
+            formControl.setState(value);
+        }
     }
     function resetCollection(collection, state) {
-        if (state) {
-            const element = collection.find(state);
-            if (element) {
-                setValue(element.description);
-            }
-            else {
-                setValue('');
-            }
-        }
-        else {
-            setValue('');
-        }
+        setValue(state ? collection.find(state)?.description || '' : '');
     }
     function resetState(state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
+        resetCollection(collection, state);
     }
     function onClickControl() {
         if (!disabled) {
@@ -1339,8 +1415,6 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Escape':
-                setVisible(false);
-                break;
             case 'Tab':
                 setVisible(false);
                 break;
@@ -1352,9 +1426,7 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
     function onClickAction() {
         setVisible(false);
         setValue('');
-        if (formControl) {
-            setFormState(undefined);
-        }
+        setFormState(undefined);
         if (onValue) {
             onValue(undefined);
         }
@@ -1369,14 +1441,7 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
     }
     function onKeydownElement(element) {
         return (event) => {
-            switch (event.code) {
-                case 'Enter':
-                    onChange(element);
-                    break;
-                default:
-                    navigationElement(event);
-                    break;
-            }
+            event.code === 'Enter' ? onChange(element) : navigationElement(event);
         };
     }
     function onChange({ description, value }) {
@@ -1385,9 +1450,7 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
             onSelect(value);
         }
         else {
-            if (formControl) {
-                setFormState(value);
-            }
+            setFormState(value);
             setValue(description);
         }
         if (onValue) {
@@ -1395,47 +1458,14 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
         }
     }
     function filterSuggestions(pattern, reboot = false) {
-        if (pattern) {
-            const store = reboot ? createStoreEmpty() : searchForPattern(pattern);
-            const elements = store?.coincidences || suggestions;
-            const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
-            setCoincidences(coincidences.slice(0, MAX_ELEMENTS));
-            setStore({
-                coincidences,
-                pattern,
-                previous: store
-            });
-        }
-        else {
-            setCoincidences(suggestions.slice(0, MAX_ELEMENTS));
-            rebootStore();
-        }
-    }
-    function searchForPattern(value) {
-        if (!store.pattern) {
-            return null;
-        }
-        let newStore = store;
-        let search = false;
-        while (!search && newStore) {
-            search = hasPattern(value, newStore.pattern, true);
-            if (!search) {
-                newStore = newStore.previous;
-            }
-        }
-        return newStore || rebootStore();
-    }
-    function rebootStore() {
-        const store = createStoreEmpty();
-        setStore(store);
-        return store;
-    }
-    function createStoreEmpty() {
-        return {
-            coincidences: undefined,
-            pattern: '',
-            previous: null
-        };
+        const result = createStoreAutocomplete({
+            pattern,
+            suggestions,
+            reboot,
+            store
+        });
+        setCoincidences(result.collection.slice(0, MAX_ELEMENTS));
+        setStore(result.store);
     }
     return {
         coincidences,
@@ -1473,7 +1503,7 @@ function RlsAutocompleteFieldTemplate({ suggestions, children, disabled, formCon
                                                 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: 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 })] })] }));
+                                            }, 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: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "rls-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 })) }));
@@ -1564,6 +1594,12 @@ function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }
         }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
+function rangeFormatTemplate({ maxDate, minDate }) {
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
 const controlIsValid = (props) => {
     const { state, validators } = props;
     return validators.reduce((errors, validator) => {
@@ -1660,74 +1696,47 @@ function useReactControl(controlProps, controlValidators) {
     return useControl(controlProps, controlValidators);
 }
 
-var PickerListenerType;
-(function (PickerListenerType) {
-    PickerListenerType["Select"] = "PickerSelect";
-    PickerListenerType["Now"] = "PickerNow";
-    PickerListenerType["Cancel"] = "PickerCancel";
-})(PickerListenerType || (PickerListenerType = {}));
-
-function verifyDateRange(date, min, max) {
-    return min && before(min, date) ? min : max && after(max, date) ? max : date;
-}
-
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
-const VISIBILITY_STATE$1 = {
-    month: false,
-    day: false,
-    year: false
-};
-const VISIBILITY$1 = {
-    DAY: {
-        ...VISIBILITY_STATE$1,
-        day: true
-    },
-    MONTH: {
-        ...VISIBILITY_STATE$1,
-        month: true
-    },
-    YEAR: {
-        ...VISIBILITY_STATE$1,
-        year: true
-    }
-};
-function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, rlsTheme, onListener }) {
-    const dateInitial = formControl?.state || date || new Date();
+function RlsDatePicker({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const today = new Date(); // Initial current date in component
+    const dateInitial = formControl?.state || date || today;
     const yearControl = useReactControl(dateInitial.getFullYear());
     const dayControl = useReactControl(dateInitial.getDate());
     const monthControl = useReactControl(dateInitial.getMonth());
     const [value, setValue] = useState(dateInitial);
-    const [{ day, month, year }, setVisibility] = useState(VISIBILITY$1.DAY);
-    const title = formatDate(value, FORMAT_DESCRIPTION);
+    const [visibility, setVisibility] = useState('DAY');
     useEffect(() => {
-        setValue((prevValue) => {
-            return typeof yearControl.state === 'number'
-                ? verifyDateRange(assignYear(prevValue, yearControl.state), minDate, maxDate)
-                : prevValue;
+        const dateCheck = checkDateRange({
+            date: formControl?.state || date || today,
+            minDate,
+            maxDate
         });
+        setValue(dateCheck);
+        formControl?.setState(dateCheck);
+    }, []);
+    useEffect(() => {
+        setValue((prevValue) => itIsDefined(yearControl.state)
+            ? assignYearInDate(prevValue, yearControl.state)
+            : prevValue);
     }, [yearControl.state]);
     useEffect(() => {
-        setValue((prevValue) => {
-            return typeof monthControl.state === 'number'
-                ? verifyDateRange(assignMonth(prevValue, monthControl.state), minDate, maxDate)
-                : prevValue;
-        });
+        setValue((prevValue) => itIsDefined(monthControl.state)
+            ? assignMonthInDate(prevValue, monthControl.state)
+            : prevValue);
     }, [monthControl.state]);
     useEffect(() => {
-        setValue((prevValue) => {
-            return typeof dayControl.state === 'number'
-                ? verifyDateRange(assignDay(prevValue, dayControl.state), minDate, maxDate)
-                : prevValue;
-        });
+        setValue((prevValue) => itIsDefined(dayControl.state)
+            ? assignDayInDate(prevValue, dayControl.state)
+            : prevValue);
     }, [dayControl.state]);
     function onVisibilityDay() {
-        setVisibility(VISIBILITY$1.DAY);
+        setVisibility('DAY');
     }
     function onVisibilityMonth() {
-        setVisibility(VISIBILITY$1.MONTH);
+        setVisibility('MONTH');
     }
     function onVisibilityYear() {
-        setVisibility(VISIBILITY$1.YEAR);
+        setVisibility('YEAR');
     }
     function onCancel() {
         if (onListener) {
@@ -1735,14 +1744,12 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
         }
     }
     function onToday() {
-        const value = new Date(); // Today date
-        formControl?.setState(value);
-        setValue(value);
-        yearControl.setState(value.getFullYear());
-        dayControl.setState(value.getDate());
-        monthControl.setState(value.getMonth());
+        yearControl.setState(today.getFullYear());
+        dayControl.setState(today.getDate());
+        monthControl.setState(today.getMonth());
+        formControl?.setState(today);
         if (onListener) {
-            onListener({ type: PickerListenerType.Now, value });
+            onListener({ type: PickerListenerType.Now, value: today });
         }
     }
     function onSelect() {
@@ -1751,27 +1758,38 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-picker__header", children: [jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: title }) }), jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
-                    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, onValue: onVisibilityDay }), jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), 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') }) })] }) })] }));
+    return (jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-picker__header", children: [jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_DESCRIPTION) }) }), jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
+                    day: visibility === 'DAY',
+                    month: visibility === 'MONTH',
+                    year: visibility === 'YEAR'
+                }), children: [jsx(RlsDayPicker, { formControl: dayControl, date: dateInitial, month: monthControl.state, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: dateInitial, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsYearPicker, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), 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, disabled: dateOutRange({ date: today, maxDate, minDate }), 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 }) {
     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);
 }
 
-function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme, onValue }) {
-    const dateInitial = formControl?.state || date || new Date();
-    const [value, setValue] = useState(dateInitial);
-    const [show, setShow] = useState(false);
-    const [description, setDescription] = useState('');
+function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
+    const today = new Date(); // Initial current date in component
+    const [value, setValue] = useState();
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const description = useRef('');
+    useEffect(() => {
+        const dateCheck = checkDateRange({
+            date: formControl?.state || date || today,
+            minDate,
+            maxDate
+        });
+        setValue(dateCheck);
+        formControl?.setState(dateCheck);
+    }, []);
     useEffect(() => {
-        setDescription(value ? formatDate(value, '{dd}/{mx}/{aa}') : '');
+        description.current = value
+            ? dateFormatTemplate(value, DATE_RANGE_FORMAT)
+            : '';
     }, [value]);
     function onClickInput() {
-        setShow(true);
+        setModalIsVisible(true);
     }
     function onChange(value, ignoreControl = false) {
         if (!ignoreControl) {
@@ -1790,40 +1808,21 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             }
         }
         else {
-            setShow(true);
+            setModalIsVisible(true);
         }
     }
-    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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", { className: "rls-date-field__control", type: "text", value: description.current, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
-                        setShow(false);
-                        if (formControl && !formControl.touched) {
-                            formControl.touch();
+                        setModalIsVisible(false);
+                        if (!formControl?.touched) {
+                            formControl?.touch();
                         }
                     } }) })] }));
 }
 
-const VISIBILITY_STATE = {
-    month: false,
-    day: false,
-    year: false
-};
-const VISIBILITY = {
-    DAY: {
-        ...VISIBILITY_STATE,
-        day: true
-    },
-    MONTH: {
-        ...VISIBILITY_STATE,
-        month: true
-    },
-    YEAR: {
-        ...VISIBILITY_STATE,
-        year: true
-    }
-};
-function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsTheme, onListener }) {
+function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const dateInitial = normalizeMinTime(datePicker || new Date());
     const rangeInitial = formControl?.state || DateRange.now();
     const yearControl = useReactControl(dateInitial.getFullYear());
@@ -1831,18 +1830,18 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
     const dayControl = useReactControl(rangeInitial);
     const [value, setValue] = useState(rangeInitial);
     const [date, setDate] = useState(dateInitial);
-    const [{ day, month, year }, setVisibility] = useState(VISIBILITY.DAY);
+    const [visibility, setVisibility] = useState('DAY');
     useEffect(() => {
         setDate((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? assignYear(prevValue, yearControl.state)
+                ? assignYearInDate(prevValue, yearControl.state)
                 : prevValue;
         });
     }, [yearControl.state]);
     useEffect(() => {
         setDate((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? assignMonth(prevValue, monthControl.state)
+                ? assignMonthInDate(prevValue, monthControl.state)
                 : prevValue;
         });
     }, [monthControl.state]);
@@ -1850,16 +1849,16 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
         if (dayControl.state) {
             setValue(dayControl.state);
         }
-        setVisibility(VISIBILITY.DAY);
+        setVisibility('DAY');
     }, [dayControl.state]);
     function onVisibilityDay() {
-        setVisibility(VISIBILITY.DAY);
+        setVisibility('DAY');
     }
     function onVisibilityMonth() {
-        setVisibility(VISIBILITY.MONTH);
+        setVisibility('MONTH');
     }
     function onVisibilityYear() {
-        setVisibility(VISIBILITY.YEAR);
+        setVisibility('YEAR');
     }
     function onCancel() {
         if (onListener) {
@@ -1872,11 +1871,11 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-range-picker__header", children: [jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: formatRange(value) }) }), jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
-                    year,
-                    day,
-                    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, onValue: onVisibilityDay }), jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
+    return (jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-range-picker__header", children: [jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+                    day: visibility === 'DAY',
+                    month: visibility === 'MONTH',
+                    year: visibility === 'YEAR'
+                }), children: [jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsYearPicker, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), 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: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
@@ -1887,9 +1886,9 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
     const [value, setValue] = useState(rangeInitial);
     const [date] = useState(dateInitial);
     const [show, setShow] = useState(false);
-    const [description, setDescription] = useState('');
+    const description = useRef('');
     useEffect(() => {
-        setDescription(value ? formatRange(value) : '');
+        description.current = value ? rangeFormatTemplate(value) : '';
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -1903,7 +1902,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setShow(true);
         }
     }
-    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-box-field", 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", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-box-field", 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", { className: "rls-date-field__control", type: "text", value: description.current, readOnly: true, placeholder: placeholder, onClick: onClickInput }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
@@ -1918,31 +1917,27 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
 function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
-    const [changeInternal, setChangeInternal] = useState(false);
+    const changeInternal = useRef(false);
     useEffect(() => {
-        changeInternal ? setChangeInternal(false) : resetState(formControl?.state);
+        if (changeInternal.current) {
+            changeInternal.current = false;
+        }
+        else {
+            resetState(formControl?.state);
+        }
     }, [formControl?.state]);
     useEffect(() => resetCollection(collection, formControl?.state), [collection]);
     function setFormState(value) {
-        setChangeInternal(true);
-        formControl?.setState(value);
+        if (formControl) {
+            changeInternal.current = true;
+            formControl.setState(value);
+        }
     }
     function resetCollection(collection, state) {
-        if (state) {
-            const element = collection.find(state);
-            if (element) {
-                setValue(element.description);
-            }
-            else {
-                setValue('');
-            }
-        }
-        else {
-            setValue('');
-        }
+        setValue(state ? collection.find(state)?.description || '' : '');
     }
     function resetState(state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
+        resetCollection(collection, state);
     }
     function onFocusInput() {
         setFocused(true);
@@ -1950,20 +1945,16 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     function onBlurInput() {
         setFocused(false);
     }
-    function onClickControl() {
+    function onClickInput() {
         setVisible(true);
     }
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Space':
-                setVisible(true);
-                break;
             case 'Enter':
                 setVisible(true);
                 break;
             case 'Escape':
-                setVisible(false);
-                break;
             case 'Tab':
                 setVisible(false);
                 break;
@@ -1989,14 +1980,7 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     }
     function onKeydownElement(element) {
         return (event) => {
-            switch (event.code) {
-                case 'Enter':
-                    onChange(element);
-                    break;
-                default:
-                    navigationElement(event);
-                    break;
-            }
+            event.code === 'Enter' ? onChange(element) : navigationElement(event);
         };
     }
     function onChange({ description, value }) {
@@ -2006,9 +1990,7 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
             onSelect(value);
         }
         else {
-            if (formControl) {
-                setFormState(value);
-            }
+            setFormState(value);
             setValue(description);
         }
         if (onValue) {
@@ -2020,7 +2002,7 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
         onBlurInput,
         onClickAction,
         onClickBackdrop,
-        onClickInput: onClickControl,
+        onClickInput,
         onClickElement,
         onFocusInput,
         onKeydownElement,
@@ -2042,7 +2024,7 @@ function RlsSelectFieldTemplate({ suggestions, children, disabled, formControl,
                     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 })] })] }));
+                }), 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: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "rls-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 })) }));
@@ -2109,5 +2091,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, 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, useDatatable, useListControl, useSnackbarService };
+export { ConfirmationResult, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map