@rolster/react-components 18.13.2 → 18.13.4

package/dist/es/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/es/index.js

@@ -174,7 +174,7 @@ function RlsLabel({ children, rlsTheme }) {
 }
 
 function RlsMessageIcon({ icon, children, rlsTheme }) {
-    return (jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsx(RlsIcon, { value: icon }), jsx("span", { className: "caption-regular truncate", children: children })] }));
+    return (jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsx(RlsIcon, { value: icon }), jsx("span", { className: "truncate", children: children })] }));
 }
 
 function RlsPoster({ children, rlsTheme }) {
@@ -1773,7 +1773,6 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
     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,
@@ -1783,11 +1782,6 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
         setValue(dateCheck);
         formControl?.setState(dateCheck);
     }, []);
-    useEffect(() => {
-        description.current = value
-            ? dateFormatTemplate(value, DATE_RANGE_FORMAT)
-            : '';
-    }, [value]);
     function onClickInput() {
         setModalIsVisible(true);
     }
@@ -1811,7 +1805,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             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.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 }) => {
+    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: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', 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);
                         }
@@ -1881,17 +1875,12 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
 }
 
 function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
-    const rangeInitial = formControl?.state || DateRange.now();
-    const dateInitial = datePicker || new Date();
-    const [value, setValue] = useState(rangeInitial);
-    const [date] = useState(dateInitial);
-    const [show, setShow] = useState(false);
-    const description = useRef('');
-    useEffect(() => {
-        description.current = value ? rangeFormatTemplate(value) : '';
-    }, [value]);
+    const currentRange = formControl?.state || DateRange.now();
+    const currentDate = datePicker || new Date();
+    const [value, setValue] = useState(currentRange);
+    const [modalIsVisible, setModalIsVisible] = useState(false);
     function onClickInput() {
-        setShow(true);
+        setModalIsVisible(true);
     }
     function onClickAction() {
         if (value) {
@@ -1899,14 +1888,14 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setValue(undefined);
         }
         else {
-            setShow(true);
+            setModalIsVisible(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.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 }) => {
+    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: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsDateRangePicker, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
-                        setShow(false);
+                        setModalIsVisible(false);
                     } }) })] }));
 }