@rolster/react-components 18.15.40 → 18.16.0

package/dist/cjs/assets/{index-DTDYY-4K.css → index-DymY06ih.css}

@@ -1001,7 +1001,6 @@
   transform-origin: 0% 0%;
   transition: transform 240ms 0ms var(--rls-standard-curve),
     opacity 240ms 0ms var(--rls-standard-curve);
-  will-change: opacity, transform;
   box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
 }
 .rls-button-toggle__list ul li {
@@ -1678,11 +1677,10 @@
   visibility: var(--pvt-component-visibility);
   padding: var(--rls-sizing-x8) 0rem;
   box-sizing: border-box;
-  z-index: var(--rls-z-index-2);
+  z-index: var(--rls-z-index-4);
   border-radius: var(--rls-sizing-x4);
   background: var(--rls-app-background-500);
   box-shadow: var(--rls-app-shadow-4);
-  will-change: transform;
   transform: var(--pvt-component-transform);
   transition: opacity 125ms 0ms var(--rls-deceleration-curve),
     transform 125ms 0ms var(--rls-deceleration-curve),
@@ -1753,8 +1751,7 @@
   right: 0px;
   bottom: var(--pvt-backdrop-bottom);
   opacity: var(--pvt-backdrop-opacity);
-  z-index: 1;
-  will-change: opacity;
+  z-index: var(--rls-z-index-2);
   background: var(--rls-theme-backdrop-900);
   backdrop-filter: blur(2px);
   transition: opacity 120ms 0ms var(--rls-deceleration-curve),
@@ -1849,6 +1846,7 @@
   --pvt-component-transform: translateY(80rem) scale(0.6);
   --pvt-component-height: 0rem;
   --pvt-component-opacity: 0;
+  --pvt-component-overflow: hidden;
   --pvt-component-visibility: hidden;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
@@ -1863,6 +1861,9 @@
   align-items: center;
   justify-content: center;
 }
+.rls-modal--overflow {
+  --pvt-component-overflow: initial;
+}
 .rls-modal--visible {
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;
@@ -1880,10 +1881,9 @@
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
   z-index: var(--rls-z-index-2);
-  overflow: hidden;
+  overflow: var(--pvt-component-overflow);
   border-radius: var(--rls-sizing-x4);
   background: var(--rls-app-background-500);
-  will-change: transform;
   transform: var(--pvt-component-transform);
   transition: opacity 125ms 0ms var(--rls-deceleration-curve),
     transform 125ms 0ms var(--rls-deceleration-curve),
@@ -1898,7 +1898,6 @@
   bottom: var(--pvt-backdrop-bottom);
   opacity: var(--pvt-backdrop-opacity);
   z-index: 1;
-  will-change: opacity;
   background: var(--rls-theme-backdrop-900);
   backdrop-filter: blur(2px);
   transition: opacity 120ms 0ms var(--rls-deceleration-curve),

package/dist/cjs/index.js

@@ -1734,17 +1734,17 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
     const [weeks, setWeeks] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getDate());
     require$$0.useEffect(() => {
-        const props = createPickerProps();
-        const day = components.checkDayPicker(props);
-        day ? setDayValue(day) : setWeeks(components.createDayPicker(props));
+        const options = createPickerOptions();
+        const day = components.verifyDayPicker(options);
+        day ? setDayValue(day) : setWeeks(components.createDayPicker(options));
     }, [date, month, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const day = components.checkDayPicker(createPickerProps());
+        const day = components.verifyDayPicker(createPickerOptions());
         day
             ? formControl?.setValue(day)
             : setValue(formControl?.value || currentDate.getDate());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             day: formControl?.value || value,
@@ -1813,17 +1813,17 @@ function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate,
     const [months, setMonths] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getMonth());
     require$$0.useEffect(() => {
-        const props = createPickerProps(); // MonthPickerProps
-        const month = components.checkMonthPicker(props);
-        month ? setMonthValue(month) : setMonths(components.createMonthPicker(props));
+        const options = createPickerOptions(); // MonthPickerProps
+        const month = components.verifyMonthPicker(options);
+        month ? setMonthValue(month) : setMonths(components.createMonthPicker(options));
     }, [date, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const month = components.checkMonthPicker(createPickerProps());
+        const month = components.verifyMonthPicker(createPickerOptions());
         commons.itIsDefined(month)
             ? formControl?.setValue(month)
             : setValue(formControl?.value || currentDate.getMonth());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             month: commons.itIsDefined(formControl?.value) ? formControl?.value : value,
@@ -1903,21 +1903,21 @@ function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, m
     const currentDate = date || new Date();
     const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getFullYear());
     const [year, setYear] = require$$0.useState(formControl?.value || currentDate.getFullYear());
-    const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerProps()));
+    const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
     require$$0.useEffect(() => {
-        const props = createPickerProps(); // YearPickerProps
-        const year = components.checkYearPicker(props);
+        const options = createPickerOptions(); // YearPickerProps
+        const year = components.verifyYearPicker(options);
         year
             ? setYearValue(year)
-            : setTemplate(components.createYearPicker(createPickerProps()));
+            : setTemplate(components.createYearPicker(createPickerOptions()));
     }, [date, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const year = components.checkYearPicker(createPickerProps());
+        const year = components.verifyYearPicker(createPickerOptions());
         commons.itIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value || currentDate.getFullYear());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             year,
@@ -2306,8 +2306,8 @@ 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 }) })) }));
 }
 
-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);
+function RlsModal({ children, overflow, visible, rlsTheme }) {
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-modal', { overflow, visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
 const FORMAT_TITLE = '{dw}, {mx} {dd} de {aa}';
@@ -2320,13 +2320,13 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     const [value, setValue] = require$$0.useState(dateInitial);
     const [visibility, setVisibility] = require$$0.useState('DAY');
     require$$0.useEffect(() => {
-        const dateCheck = components.checkDateRange({
+        const dateRange = components.verifyDateRange({
             date: formControl?.value || date || today,
             minDate,
             maxDate
         });
-        setValue(dateCheck);
-        formControl?.setValue(dateCheck);
+        setValue(dateRange);
+        formControl?.setValue(dateRange);
     }, []);
     require$$0.useEffect(() => {
         commons.itIsDefined(yearControl.value) &&
@@ -2350,18 +2350,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         setVisibility('YEAR');
     }
     function onCancel() {
-        onListener && onListener({ type: components.PickerListenerType.Cancel });
+        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
     }
     function onToday() {
         yearControl.setValue(today.getFullYear());
         dayControl.setValue(today.getDate());
         monthControl.setValue(today.getMonth());
         formControl?.setValue(today);
-        onListener && onListener({ type: components.PickerListenerType.Now, value: today });
+        onListener && onListener({ event: components.PickerListenerEvent.Now, value: today });
     }
     function onSelect() {
         formControl?.setValue(value);
-        onListener && onListener({ type: components.PickerListenerType.Select, value });
+        onListener && onListener({ event: components.PickerListenerEvent.Select, value });
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dates.dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
@@ -2376,13 +2376,13 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
     require$$0.useEffect(() => {
-        const dateCheck = components.checkDateRange({
+        const dateRange = components.verifyDateRange({
             date: formControl?.value || date || today,
             minDate,
             maxDate
         });
-        setValue(dateCheck);
-        formControl?.setValue(dateCheck);
+        setValue(dateRange);
+        formControl?.setValue(dateRange);
     }, []);
     function onChange(value) {
         setValue(value);
@@ -2404,8 +2404,8 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const valueInput = value
         ? dates.dateFormatTemplate(value, format || FORMAT_DATE)
         : '';
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "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__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__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(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
-                        type !== components.PickerListenerType.Cancel && onChange(value);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "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__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__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(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+                        event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));
@@ -2448,11 +2448,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         setVisibility('YEAR');
     }
     function onCancel() {
-        onListener && onListener({ type: components.PickerListenerType.Cancel });
+        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
     }
     function onSelect() {
         formControl?.setValue(value);
-        onListener && onListener({ type: components.PickerListenerType.Select, value });
+        onListener && onListener({ event: components.PickerListenerEvent.Select, value });
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
                     day: visibility === 'DAY',
@@ -2484,8 +2484,8 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
         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 !== components.PickerListenerType.Cancel && onChange(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: ({ event, value }) => {
+                        event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));