@rolster/react-components 18.25.10 → 18.26.1

package/dist/es/index.js

@@ -2,7 +2,7 @@ import require$$0, { useMemo, useCallback, useState, useRef, useEffect, createCo
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, dateOutRange, verifyDateRange, PickerListenerEvent } from '@rolster/components';
-import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, dateFormatTemplate, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
+import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import ReactDOM from 'react-dom';
 import { useReactControl } from '@rolster/react-forms';
 
@@ -1437,7 +1437,7 @@ function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-checkbox', { checked, disabled });
     }, [checked, disabled]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark" }) }));
 }
 function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
     const onClick = useCallback(() => {
@@ -1527,8 +1527,8 @@ function RlsInputDecimal(props) {
         formControl ? formControl.setValue(valueDecimal) : setValueInput(value);
         onValue && onValue(valueDecimal);
     }, [formControl, onValue]);
-    const doubleProps = { ...props, formControl: undefined };
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...doubleProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
+    const decimalProps = { ...props, formControl: undefined };
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
 }
 
 function RlsInputMoney(props) {
@@ -1620,10 +1620,10 @@ function RlsMessageIcon({ icon, children, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
 }
 
-function RlsPoster({ children, contrast, outline, rlsTheme }) {
+function RlsPoster({ children, contrast, rlsTheme }) {
     const className = useMemo(() => {
-        return renderClassStatus('rls-poster', { contrast, outline });
-    }, [contrast, outline]);
+        return renderClassStatus('rls-poster', { contrast });
+    }, [contrast]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
@@ -1649,17 +1649,17 @@ function RlsSkeletonText({ active, children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("label", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
-function RlsSwitch({ checked, disabled, identifier, onClick, rlsTheme }) {
+function RlsSwitch({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
     const className = useMemo(() => {
-        return renderClassStatus('rls-switch', { checked, disabled });
-    }, [checked, disabled]);
-    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsxs("div", { className: "rls-switch__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }), jsxRuntimeExports.jsx("div", { className: "rls-switch__component__bar" })] }) }));
+        return renderClassStatus('rls-switch', { checked, capsule, disabled });
+    }, [checked, capsule, disabled]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component", children: jsxRuntimeExports.jsx("div", { className: "rls-switch__component__element" }) }) }));
 }
 function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
     const onClick = useCallback(() => {
         formControl.setValue(!formControl.value);
     }, [formControl.value]);
-    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value || false, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
+    return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
 function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
@@ -1941,16 +1941,26 @@ function RlsFieldText(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+function useFormToggleController({ disabled, formControl }) {
     const [checked, setChecked] = useState(!!formControl?.value);
     useEffect(() => {
         setChecked(!!formControl?.value);
     }, [formControl?.value]);
     const onToggle = useCallback(() => {
+        if (!disabled) {
+            formControl
+                ? formControl.enabled && formControl.setValue(!formControl.value)
+                : setChecked((checked) => !checked);
+        }
+    }, [formControl, disabled]);
+    return { checked, onToggle };
+}
+
+function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+    const { checked, onToggle } = useFormToggleController({
+        disabled,
         formControl
-            ? formControl?.setValue(!formControl.value)
-            : setChecked((checked) => !checked);
-    }, [formControl]);
+    });
     const className = useMemo(() => {
         return renderClassStatus('rls-label-checkbox', {
             disabled,
@@ -1961,15 +1971,27 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
-function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
+function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
     const [checked, setChecked] = useState(formControl?.value === value);
     useEffect(() => {
         setChecked(formControl?.value === value);
     }, [formControl?.value]);
     const onSelect = useCallback(() => {
-        formControl && formControl?.setValue(value);
-        onValue && onValue(value);
-    }, [formControl, value, onValue]);
+        if (!disabled) {
+            formControl && formControl.setValue(value);
+            onValue && onValue(value);
+        }
+    }, [formControl, value, onValue, disabled]);
+    return { checked, onSelect };
+}
+
+function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
+    const { checked, onSelect } = useFormSingleSelectionController({
+        disabled,
+        formControl,
+        onValue,
+        value
+    });
     const className = useMemo(() => {
         return renderClassStatus('rls-label-radiobutton', {
             disabled,
@@ -1980,16 +2002,11 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
-function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
-    const [checked, setChecked] = useState(!!formControl?.value);
-    useEffect(() => {
-        setChecked(!!formControl?.value);
-    }, [formControl?.value]);
-    const onToggle = useCallback(() => {
+function RlsLabelSwitch({ capsule, children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
+    const { checked, onToggle } = useFormToggleController({
+        disabled,
         formControl
-            ? formControl?.setValue(!formControl.value)
-            : setChecked((checked) => !checked);
-    }, [formControl]);
+    });
     const className = useMemo(() => {
         return renderClassStatus('rls-label-switch', {
             disabled,
@@ -1997,7 +2014,7 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
             reverse
         });
     }, [disabled, extended, reverse]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, capsule: capsule, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
 }
 
 function RlsNavbar({ children, identifier, rlsTheme }) {
@@ -2053,7 +2070,7 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
 }
 
 function RlsPickerDayHeaders() {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("span", { className: "rls-picker-day__label", children: title }, index))) }));
 }
 function RlsPickerDayElement({ day, onSelect, disabled }) {
     const className = useMemo(() => {
@@ -2064,14 +2081,7 @@ function RlsPickerDayElement({ day, onSelect, disabled }) {
             selected: day.selected,
             today: day.today
         });
-    }, [
-        day.disabled,
-        day.focused,
-        day.forbidden,
-        day.selected,
-        day.today,
-        disabled
-    ]);
+    }, [day, disabled]);
     const onClick = useCallback(() => {
         day.value && !day.disabled && !disabled && onSelect(day.value);
     }, [day.value, day.disabled, disabled, onSelect]);
@@ -2122,10 +2132,6 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
 }
 
-const DATE_FORMAT = '{dd}/{mx}/{yy}';
-const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
-
 function RlsPickerDayRangeHeaders() {
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
 }
@@ -2182,10 +2188,7 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
             maxDate
         }));
     }, [date, range, minDate, maxDate]);
-    const title = useMemo(() => {
-        return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, DATE_FORMAT) }));
-    }, [sourceDate.current]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [title, headers, component] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [headers, component] }));
 }
 
 function RlsPickerMonthElement({ month, onSelect, disabled }) {
@@ -2283,6 +2286,12 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
             }
         }
     }, [monthControl.value, yearControl.value]);
+    const onMonth = useCallback(() => {
+        onClick && onClick('month');
+    }, [onClick]);
+    const onYear = useCallback(() => {
+        onClick && onClick('year');
+    }, [onClick]);
     const onPreviousYear = useCallback(() => {
         valueIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value - 1);
@@ -2309,7 +2318,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
     const onNext = useCallback(() => {
         type === 'month' ? onNextMonth() : onNextYear();
     }, [type, onNextMonth, onNextYear]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsx("span", { onClick: onClick, children: label }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx("button", { onClick: onPrevious, disabled: limitPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title__label", children: [jsxRuntimeExports.jsxs("span", { onClick: onMonth, children: [label, ","] }), jsxRuntimeExports.jsx("span", { onClick: onYear, children: yearControl.value })] }), jsxRuntimeExports.jsx("button", { onClick: onNext, disabled: limitNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }));
 }
 
 function RlsPickerYearElement({ onSelect, year, disabled }) {
@@ -2323,7 +2332,7 @@ function RlsPickerYearElement({ onSelect, year, disabled }) {
     const onClick = useCallback(() => {
         year.value && !year.disabled && !disabled && onSelect(year.value);
     }, [year.value, year.disabled, disabled, onSelect]);
-    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__span rls-body1-medium", children: year.value || '????' }) }));
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-year__span", children: year.value || '????' }) }));
 }
 function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, onValue, rlsTheme }) {
     const date = useMemo(() => _date || new Date(), [_date]);
@@ -2367,7 +2376,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     const onClickNext = useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }) }), jsxRuntimeExports.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--prev", onClick: onClickPrev, disabled: !template.canPrevious || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) }), jsxRuntimeExports.jsxs("span", { children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("button", { className: "rls-picker-year__action rls-picker-year__action--next", onClick: onClickNext, disabled: !template.canNext || disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
 }
 
 function calculateInitialValue(value, minValue, maxValue) {
@@ -2439,11 +2448,11 @@ function RlsBottomSheet({ children, className, onAutoClose, visible, rlsTheme })
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
-function RlsCard({ children, outline, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-card', { outline });
-    }, [outline]);
-    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
+function RlsCard({ children, className, outline, rlsTheme }) {
+    const classNameCard = useMemo(() => {
+        return renderClassStatus('rls-card', { outline }, className);
+    }, [outline, className]);
+    return (jsxRuntimeExports.jsx("div", { className: classNameCard, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
 const reactI18n = i18n({
@@ -2552,28 +2561,28 @@ function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
     }, [className]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableRecord({ children, className, error, identifier, info, overflow, success, warning, rlsTheme }) {
+function RlsDatatableRecord({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
     const classNameRecord = useMemo(() => {
-        return renderClassStatus('rls-datatable__record', { error, info, overflow, success, warning }, className);
-    }, [className, error, info, overflow, success, warning]);
+        return renderClassStatus('rls-datatable__record', { error, info, contained, success, warning }, className);
+    }, [className, error, info, contained, success, warning]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTotals({ children, className, error, identifier, info, overflow, success, warning, rlsTheme }) {
+function RlsDatatableTotals({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
     const classNameTotals = useMemo(() => {
-        return renderClassStatus('rls-datatable__totals', { error, info, overflow, success, warning }, className);
-    }, [className, error, info, overflow, success, warning]);
+        return renderClassStatus('rls-datatable__totals', { error, info, contained, success, warning }, className);
+    }, [className, error, info, contained, success, warning]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableCell({ children, className, control, identifier, overflow, rlsTheme }) {
+function RlsDatatableCell({ children, className, contained, control, identifier, rlsTheme }) {
     const classNameCell = useMemo(() => {
-        return renderClassStatus('rls-datatable__cell', { control, overflow }, className);
-    }, [className, control, overflow]);
+        return renderClassStatus('rls-datatable__cell', { control, contained }, className);
+    }, [className, control, contained]);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableData({ children, className, control, identifier, overflow }) {
+function RlsDatatableData({ children, className, contained, control, identifier }) {
     const classNameData = useMemo(() => {
-        return renderClassStatus('rls-datatable__data', { control, overflow }, className);
-    }, [className, overflow, control]);
+        return renderClassStatus('rls-datatable__data', { control, contained }, className);
+    }, [className, contained, control]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
 function RlsDatatableFloating({ children, className, identifier, invested, rlsTheme }) {
@@ -2889,6 +2898,10 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
 function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameModal = useMemo(() => {
         return renderClassStatus('rls-modal', { visible }, className);
@@ -2947,11 +2960,8 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     const onVisibilityDay = useCallback(() => {
         setVisibility('DAY');
     }, []);
-    const onVisibilityMonth = useCallback(() => {
-        setVisibility('MONTH');
-    }, []);
-    const onVisibilityYear = useCallback(() => {
-        setVisibility('YEAR');
+    const onVisibilityTitle = useCallback((type) => {
+        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
     }, []);
     const onCancel = useCallback(() => {
         onListener && onListener({ event: PickerListenerEvent.Cancel });
@@ -2975,7 +2985,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
                 value
             });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: itIsDisabledToday, children: labels.dateActionToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
 function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
@@ -3090,11 +3100,8 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
     const onVisibilityDay = useCallback(() => {
         setVisibility('DAY');
     }, []);
-    const onVisibilityMonth = useCallback(() => {
-        setVisibility('MONTH');
-    }, []);
-    const onVisibilityYear = useCallback(() => {
-        setVisibility('YEAR');
+    const onVisibilityTitle = useCallback((type) => {
+        type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
     }, []);
     const onCancel = useCallback(() => {
         onListener && onListener({ event: PickerListenerEvent.Cancel });
@@ -3103,7 +3110,7 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
         formControl?.setValue(value);
         onListener && onListener({ event: PickerListenerEvent.Select, value });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
 function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
@@ -3855,5 +3862,5 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map