@rolster/react-components 18.15.35 → 18.15.37

package/dist/es/assets/{index-DLgGgufO.css → index-DTDYY-4K.css}

@@ -600,9 +600,17 @@
   padding: var(--rlc-poster-padding);
   text-align: var(--rlc-poster-text-align);
   border-radius: var(--rls-sizing-x2);
+  color: var(--rls-app-color-300);
+  background: var(--rls-app-background-100);
+}
+.rls-poster[rls-theme] {
   color: var(--rls-theme-color-100);
   background: var(--rls-theme-color-500);
 }
+.rls-poster--contrast[rls-theme] {
+  color: var(--rls-theme-color-700);
+  background: var(--rls-theme-color-100);
+}
 
 .rls-progress-bar {
   --pvt-component-display: block;
@@ -2190,7 +2198,6 @@
   background: var(--rls-app-background-500);
   box-shadow: var(--rls-light-shadow-bottom-4);
   border: var(--rls-theme-border-1-300);
-  will-change: transform;
   transform: translate(-50%, 100%);
   transition: transform 160ms 0ms var(--rls-standard-curve);
 }

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import require$$0, { useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
+import { dateFormatTemplate, DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import { PaginationController, checkDayPicker, createDayPicker, createDayRangePicker, checkMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, checkYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, checkDateRange, dateOutRange, PickerListenerType } from '@rolster/components';
-import { DAY_LABELS, DateRange, normalizeMinTime, dateFormatTemplate, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import ReactDOM from 'react-dom';
 import { i18n } from '@rolster/i18n';
 import { useReactControl } from '@rolster/react-forms';
@@ -1498,8 +1498,16 @@ 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, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-poster", "rls-theme": rlsTheme, children: children }));
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
+
+function rangeFormatTemplate({ maxDate, minDate }) {
+    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
+
+function RlsPoster({ children, contrast, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-poster', { contrast }), "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
@@ -2294,14 +2302,6 @@ function RlsFieldAutocomplete(props) {
     return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
 }
 
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
-
-function rangeFormatTemplate({ maxDate, minDate }) {
-    const minFormat = dateFormatTemplate(minDate, DATE_RANGE_FORMAT);
-    const maxFormat = dateFormatTemplate(maxDate, DATE_RANGE_FORMAT);
-    return `${minFormat} - ${maxFormat}`;
-}
-
 function RlsModal({ children, visible, rlsTheme }) {
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
@@ -2369,7 +2369,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
 const FORMAT_DATE = '{dd}/{mx}/{aa}';
 function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
     const today = new Date(); // Initial current date in component
-    const [value, setValue] = useState(defaultValue);
+    const [value, setValue] = useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     useEffect(() => {
         const dateCheck = checkDateRange({
@@ -2391,7 +2391,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
         if (value) {
             formControl?.setValue(defaultValue);
             formControl?.touch();
-            onChange(undefined);
+            onChange(defaultValue);
         }
         else {
             setModalIsVisible(true);
@@ -2459,10 +2459,9 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
                 }), 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: reactI18n('dateActionCancel') }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, msgErrorDisabled, placeholder, rlsTheme, value: defaultValue }) {
-    const currentRange = formControl?.value || DateRange.now();
+function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: defaultValue }) {
     const currentDate = datePicker || new Date();
-    const [value, setValue] = useState(currentRange);
+    const [value, setValue] = useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     function onClickInput() {
         setModalIsVisible(true);
@@ -2470,14 +2469,20 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
     function onClickAction() {
         if (value) {
             formControl?.setValue(defaultValue);
-            setValue(undefined);
+            formControl?.touch();
+            onChange(defaultValue);
         }
         else {
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
-                        value && setValue(value);
+    function onChange(value) {
+        setValue(value);
+        onValue && onValue(value);
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ type, value }) => {
+                        type !== PickerListenerType.Cancel && onChange(value);
+                        formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));
 }