@rolster/react-components 18.10.10 → 18.11.0

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;
@@ -699,7 +699,7 @@ function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate
 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 +924,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 +964,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 }) }))] }));
 }
@@ -1525,14 +1525,16 @@ function RlsDatatableHeader({ children }) {
     return jsxRuntime.jsx("tr", { className: "rls-datatable__header", children: children });
 }
 function RlsDatatableTitle({ children, className, control }) {
-    return (jsxRuntime.jsx("th", { className: `${className} ` + renderClassStatus('rls-datatable__title', { control }), children: children }));
+    return (jsxRuntime.jsx("th", { className: (renderClassStatus('rls-datatable__title', { control }) +
+            ` ${className || ''}`).trim(), children: children }));
 }
-function RlsDatatableData({ children, className }) {
-    return jsxRuntime.jsx("tr", { className: `rls-datatable__data ${className}`, children: children });
+function RlsDatatableData({ children, className, error }) {
+    return (jsxRuntime.jsx("tr", { className: (renderClassStatus('rls-datatable__data', { error }) +
+            ` ${className || ''}`).trim(), children: children }));
 }
 function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsxRuntime.jsx("th", { className: `${className} ` +
-            renderClassStatus('rls-datatable__cell', { control, overflow }), children: children }));
+    return (jsxRuntime.jsx("th", { className: (renderClassStatus('rls-datatable__cell', { control, overflow }) +
+            ` ${className || ''}`).trim(), children: children }));
 }
 function RlsDatatable({ children, footer, header, rlsTheme }) {
     return (jsxRuntime.jsxs("div", { className: "rls-datatable", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { className: "rls-datatable__tbody", children: children })] }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
@@ -1552,7 +1554,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);
@@ -1600,31 +1602,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
     };
 }