@rolster/react-components 18.10.11 → 18.11.1

package/dist/cjs/assets/{index-_J97liwf.css → index-aQbQIMgP.css}

@@ -1172,7 +1172,7 @@
   opacity: 0.5;
 }
 .rls-month-picker__span {
-  font-size: 5.8rem;
+  font-size: 5.85rem;
   margin: auto;
   cursor: default;
   pointer-events: none;
@@ -1494,6 +1494,7 @@
   opacity: 0.5;
 }
 .rls-year-picker__year__span {
+  font-size: var(--sizing-x8);
   margin: auto;
   cursor: default;
   pointer-events: none;

package/dist/cjs/index.js

@@ -553,13 +553,13 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
 function RlsMoneyField({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
             focused: formControl?.focused,
-            error: formControl?.touched && !formControl?.valid,
+            error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-money-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsx("div", { className: "rls-box-field__body", children: jsxRuntime.jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
 }
 
-const MONTH_MAX_VALUE = helpersDate.Month.January;
-const MONTH_MIN_VALUE = helpersDate.Month.December;
+const MONTH_MAX_VALUE = helpersDate.Month.December;
+const MONTH_MIN_VALUE = helpersDate.Month.January;
 class MonthPickerFactory {
     constructor(props) {
         const { date, value, maxDate, minDate } = props;
@@ -600,10 +600,10 @@ class MonthPickerFactory {
         return this.maxDate?.getFullYear() || 10000;
     }
     get minMonth() {
-        return this.minDate?.getMonth() || MONTH_MIN_VALUE;
+        return this.minDate ? this.minDate.getMonth() : MONTH_MIN_VALUE;
     }
     get maxMonth() {
-        return this.maxDate?.getMonth() || MONTH_MAX_VALUE;
+        return this.maxDate ? this.maxDate.getMonth() : MONTH_MAX_VALUE;
     }
     overflowMonth(month) {
         return this.minOverflowMonth(month) || this.maxOverflowMonth(month);
@@ -615,15 +615,21 @@ class MonthPickerFactory {
         return this.date.getFullYear() === this.maxYear && month > this.maxMonth;
     }
 }
-function isMinLimitMonth(month, date, maxDate) {
-    const minYear = maxDate?.getFullYear() || 0;
-    const minMonth = maxDate?.getMonth() || 0;
-    return date.getFullYear() === minYear && month <= minMonth;
+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) {
-    const maxYear = maxDate?.getFullYear() || 10000;
-    const maxMonth = maxDate?.getMonth() || 11;
-    return date.getFullYear() === maxYear && month >= maxMonth;
+    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);
@@ -659,18 +665,10 @@ function RlsMonthPicker({ formControl, date, disabled: disabledPicker, maxDate,
             }, children: jsxRuntime.jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
 }
 
-function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate, onClick }) {
+function RlsMonthTitlePicker({ date, disabled, monthControl, maxDate, minDate, onClick, type, yearControl }) {
     const { state: month } = monthControl;
     const { state: year } = yearControl;
-    const [limitMinMonth, setLimitMinMonth] = react.useState(false);
-    const [limitMaxMonth, setLimitMaxMonth] = react.useState(false);
     const monthName = helpersDate.MONTH_NAMES()[month || 0];
-    react.useEffect(() => {
-        if (typeof month === 'number' && date) {
-            setLimitMinMonth(isMinLimitMonth(month, date, minDate));
-            setLimitMaxMonth(isMaxLimitMonth(month, date, maxDate));
-        }
-    }, [date]);
     function onPreviousMonth() {
         if (typeof month === 'number' && typeof year === 'number') {
             if (month > MONTH_MIN_VALUE) {
@@ -682,6 +680,14 @@ function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate
             }
         }
     }
+    function onPreviousYear() {
+        if (typeof year === 'number') {
+            yearControl.setState(year - 1);
+        }
+    }
+    function onPrevious() {
+        type === 'month' ? onPreviousMonth() : onPreviousYear();
+    }
     function onNextMonth() {
         if (typeof month === 'number' && typeof year === 'number') {
             if (month < MONTH_MAX_VALUE) {
@@ -693,13 +699,21 @@ function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate
             }
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-month-title-picker", children: [jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPreviousMonth, disabled: limitMinMonth }), jsxRuntime.jsx("span", { onClick: onClick, children: monthName }), jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNextMonth, disabled: limitMaxMonth })] }));
+    function onNextYear() {
+        if (typeof year === 'number') {
+            yearControl.setState(year + 1);
+        }
+    }
+    function onNext() {
+        type === 'month' ? onNextMonth() : onNextYear();
+    }
+    return (jsxRuntime.jsxs("div", { className: "rls-month-title-picker", children: [jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: isMinLimitMonth(month, date, minDate) || disabled }), jsxRuntime.jsx("span", { onClick: onClick, children: monthName }), jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: isMaxLimitMonth(month, date, maxDate) || disabled })] }));
 }
 
 function RlsNumberField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
             focused: formControl?.focused,
-            error: formControl?.touched && !formControl?.valid,
+            error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-number-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsx("div", { className: "rls-box-field__body", children: jsxRuntime.jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
 }
@@ -924,7 +938,7 @@ function RlsPasswordField({ children, disabled, formControl, placeholder, rlsThe
     }
     return (jsxRuntime.jsxs("div", { className: renderClassStatus(' rls-box-field', {
             focused: formControl?.focused,
-            error: formControl?.touched && !formControl?.valid,
+            error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-password-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsxRuntime.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
 }
@@ -964,7 +978,7 @@ function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme })
 function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
             focused: formControl?.focused,
-            error: formControl?.touched && !formControl?.valid,
+            error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
         }, 'rls-text-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsx("div", { className: "rls-box-field__body", children: jsxRuntime.jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
 }
@@ -1056,7 +1070,7 @@ function createYearPicker(props) {
     return YearPickerFactory.execute(props);
 }
 
-function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
+function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
     const initialDate = date || new Date();
     const initialYear = formControl?.state || initialDate.getFullYear();
     const [value, setValue] = react.useState(initialYear);
@@ -1074,7 +1088,7 @@ function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxD
             minDate,
             maxDate
         }));
-    }, [value, year, date, minDate, maxDate]);
+    }, [value, year, minDate, maxDate]);
     function onClickPrev() {
         setYear(year - 8);
     }
@@ -1554,7 +1568,7 @@ const controlIsValid = (props) => {
 function useReactControl(props = {}) {
     const [state, setCurrentState] = react.useState(props.state);
     const [value, setValue] = react.useState(props.state);
-    const [touched, setTouched] = react.useState(false);
+    const [touched, setTouched] = react.useState(props.touched || false);
     const [dirty, setDirty] = react.useState(false);
     const [focused, setFocused] = react.useState(false);
     const [disabled, setDisabled] = react.useState(false);
@@ -1602,31 +1616,32 @@ function useReactControl(props = {}) {
         return subscribers.subscribe(subscriber);
     }
     return {
+        blur,
+        dirty,
+        disable,
+        disabled,
         elementRef,
+        enable,
+        enabled: !disabled,
         error,
         errors,
+        focus,
         focused,
-        unfocused: !focused,
-        dirty,
-        pristine: !dirty,
-        disabled,
-        enabled: !disabled,
-        valid,
         invalid: !valid,
-        touched,
-        untouched: !touched,
+        pristine: !dirty,
         reset,
-        focus,
-        blur,
-        disable,
-        enable,
-        touch,
-        untouch,
         setState,
         setValidators,
         state,
         subscribe,
-        value
+        touch,
+        touched,
+        unfocused: !focused,
+        untouch,
+        untouched: !touched,
+        valid,
+        value,
+        wrong: touched && !valid
     };
 }
 
@@ -1679,7 +1694,6 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
                 ? verifyDateRange(helpersDate.refactorYear(prevValue, yearControl.state), minDate, maxDate)
                 : prevValue;
         });
-        setVisibility(VISIBILITY$1.DAY);
     }, [yearControl.state]);
     react.useEffect(() => {
         setValue((prevValue) => {
@@ -1687,7 +1701,6 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
                 ? verifyDateRange(helpersDate.refactorMonth(prevValue, monthControl.state), minDate, maxDate)
                 : prevValue;
         });
-        setVisibility(VISIBILITY$1.DAY);
     }, [monthControl.state]);
     react.useEffect(() => {
         setValue((prevValue) => {
@@ -1727,11 +1740,11 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
                     year,
                     day,
                     month
-                }), children: [jsxRuntime.jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxRuntime.jsxs("div", { className: "rls-date-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--today", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onToday, children: reactI18n('dateActionToday') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+                }), children: [jsxRuntime.jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxRuntime.jsxs("div", { className: "rls-date-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--today", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onToday, children: reactI18n('dateActionToday') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
 function RlsModal({ children, visible, rlsTheme }) {
@@ -1814,7 +1827,6 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
                 ? helpersDate.refactorYear(prevValue, yearControl.state)
                 : prevValue;
         });
-        setVisibility(VISIBILITY.DAY);
     }, [yearControl.state]);
     react.useEffect(() => {
         setDate((prevValue) => {
@@ -1822,7 +1834,6 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
                 ? helpersDate.refactorMonth(prevValue, monthControl.state)
                 : prevValue;
         });
-        setVisibility(VISIBILITY.DAY);
     }, [monthControl.state]);
     react.useEffect(() => {
         if (dayControl.state) {
@@ -1850,11 +1861,11 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: value.description }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: value.description }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
                     year,
                     day,
                     month
-                }), children: [jsxRuntime.jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
+                }), children: [jsxRuntime.jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
                     automatic
                 }), children: jsxRuntime.jsxs("div", { className: "rls-date-range-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }