@rolster/react-components 18.13.2 → 18.13.4

package/dist/cjs/assets/{index-X5U1vmfz.css → index-LjAadYQE.css}

@@ -575,6 +575,8 @@
   column-gap: var(--rls-sizing-x2);
 }
 .rls-message-icon span {
+  font-size: var(--rls-caption-font-size);
+  letter-spacing: var(--rls-caption-letter-spacing);
   color: var(--rls-app-color-300);
 }
 
@@ -2023,9 +2025,9 @@
   outline: none;
   background: transparent;
   color: var(--rls-app-color-500);
-  font-size: var(--rls-input-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-input-letter-spacing);
+  font-size: var(--rlc-input-font-size);
+  letter-spacing: var(--rlc-input-letter-spacing);
 }
 .rls-date-field__control::placeholder {
   color: var(--rls-app-color-100);
@@ -2140,9 +2142,9 @@
   outline: none;
   color: var(--rlc-input-font-color);
   background: transparent;
-  font-size: var(--rls-input-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-input-letter-spacing);
+  font-size: var(--rlc-input-font-size);
+  letter-spacing: var(--rlc-input-letter-spacing);
 }
 .rls-date-range-field__control::placeholder {
   color: var(--rls-app-color-100);

package/dist/cjs/index.js

@@ -176,7 +176,7 @@ function RlsLabel({ children, rlsTheme }) {
 }
 
 function RlsMessageIcon({ icon, children, rlsTheme }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntime.jsx(RlsIcon, { value: icon }), jsxRuntime.jsx("span", { className: "caption-regular truncate", children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntime.jsx(RlsIcon, { value: icon }), jsxRuntime.jsx("span", { className: "truncate", children: children })] }));
 }
 
 function RlsPoster({ children, rlsTheme }) {
@@ -1775,7 +1775,6 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
     const today = new Date(); // Initial current date in component
     const [value, setValue] = react.useState();
     const [modalIsVisible, setModalIsVisible] = react.useState(false);
-    const description = react.useRef('');
     react.useEffect(() => {
         const dateCheck = checkDateRange({
             date: formControl?.state || date || today,
@@ -1785,11 +1784,6 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
         setValue(dateCheck);
         formControl?.setState(dateCheck);
     }, []);
-    react.useEffect(() => {
-        description.current = value
-            ? helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT)
-            : '';
-    }, [value]);
     function onClickInput() {
         setModalIsVisible(true);
     }
@@ -1813,7 +1807,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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("input", { className: "rls-date-field__control", type: "text", value: description.current, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), 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 }) }))] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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("input", { className: "rls-date-field__control", type: "text", value: value ? helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), 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 }) }))] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
@@ -1883,17 +1877,12 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
 }
 
 function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
-    const rangeInitial = formControl?.state || helpersDate.DateRange.now();
-    const dateInitial = datePicker || new Date();
-    const [value, setValue] = react.useState(rangeInitial);
-    const [date] = react.useState(dateInitial);
-    const [show, setShow] = react.useState(false);
-    const description = react.useRef('');
-    react.useEffect(() => {
-        description.current = value ? rangeFormatTemplate(value) : '';
-    }, [value]);
+    const currentRange = formControl?.state || helpersDate.DateRange.now();
+    const currentDate = datePicker || new Date();
+    const [value, setValue] = react.useState(currentRange);
+    const [modalIsVisible, setModalIsVisible] = react.useState(false);
     function onClickInput() {
-        setShow(true);
+        setModalIsVisible(true);
     }
     function onClickAction() {
         if (value) {
@@ -1901,14 +1890,14 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setValue(undefined);
         }
         else {
-            setShow(true);
+            setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-box-field", 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("input", { className: "rls-date-field__control", type: "text", value: description.current, readOnly: true, placeholder: placeholder, onClick: onClickInput }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsxRuntime.jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), 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("input", { className: "rls-date-field__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDateRangePicker, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
-                        setShow(false);
+                        setModalIsVisible(false);
                     } }) })] }));
 }