@rolster/react-components 18.15.40 → 18.16.0

package/dist/es/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/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 { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, verifyDateRange, dateOutRange, PickerListenerEvent } from '@rolster/components';
 import ReactDOM from 'react-dom';
 import { i18n } from '@rolster/i18n';
 import { useReactControl } from '@rolster/react-forms';
@@ -1732,17 +1732,17 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
     const [weeks, setWeeks] = useState([]);
     const [value, setValue] = useState(formControl?.value || currentDate.getDate());
     useEffect(() => {
-        const props = createPickerProps();
-        const day = checkDayPicker(props);
-        day ? setDayValue(day) : setWeeks(createDayPicker(props));
+        const options = createPickerOptions();
+        const day = verifyDayPicker(options);
+        day ? setDayValue(day) : setWeeks(createDayPicker(options));
     }, [date, month, year, value, minDate, maxDate]);
     useEffect(() => {
-        const day = checkDayPicker(createPickerProps());
+        const day = verifyDayPicker(createPickerOptions());
         day
             ? formControl?.setValue(day)
             : setValue(formControl?.value || currentDate.getDate());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             day: formControl?.value || value,
@@ -1811,17 +1811,17 @@ function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate,
     const [months, setMonths] = useState([]);
     const [value, setValue] = useState(formControl?.value || currentDate.getMonth());
     useEffect(() => {
-        const props = createPickerProps(); // MonthPickerProps
-        const month = checkMonthPicker(props);
-        month ? setMonthValue(month) : setMonths(createMonthPicker(props));
+        const options = createPickerOptions(); // MonthPickerProps
+        const month = verifyMonthPicker(options);
+        month ? setMonthValue(month) : setMonths(createMonthPicker(options));
     }, [date, year, value, minDate, maxDate]);
     useEffect(() => {
-        const month = checkMonthPicker(createPickerProps());
+        const month = verifyMonthPicker(createPickerOptions());
         itIsDefined(month)
             ? formControl?.setValue(month)
             : setValue(formControl?.value || currentDate.getMonth());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             month: itIsDefined(formControl?.value) ? formControl?.value : value,
@@ -1901,21 +1901,21 @@ function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, m
     const currentDate = date || new Date();
     const [value, setValue] = useState(formControl?.value || currentDate.getFullYear());
     const [year, setYear] = useState(formControl?.value || currentDate.getFullYear());
-    const [template, setTemplate] = useState(createYearPicker(createPickerProps()));
+    const [template, setTemplate] = useState(createYearPicker(createPickerOptions()));
     useEffect(() => {
-        const props = createPickerProps(); // YearPickerProps
-        const year = checkYearPicker(props);
+        const options = createPickerOptions(); // YearPickerProps
+        const year = verifyYearPicker(options);
         year
             ? setYearValue(year)
-            : setTemplate(createYearPicker(createPickerProps()));
+            : setTemplate(createYearPicker(createPickerOptions()));
     }, [date, year, value, minDate, maxDate]);
     useEffect(() => {
-        const year = checkYearPicker(createPickerProps());
+        const year = verifyYearPicker(createPickerOptions());
         itIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value || currentDate.getFullYear());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             year,
@@ -2304,8 +2304,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}';
@@ -2318,13 +2318,13 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     const [value, setValue] = useState(dateInitial);
     const [visibility, setVisibility] = useState('DAY');
     useEffect(() => {
-        const dateCheck = checkDateRange({
+        const dateRange = verifyDateRange({
             date: formControl?.value || date || today,
             minDate,
             maxDate
         });
-        setValue(dateCheck);
-        formControl?.setValue(dateCheck);
+        setValue(dateRange);
+        formControl?.setValue(dateRange);
     }, []);
     useEffect(() => {
         itIsDefined(yearControl.value) &&
@@ -2348,18 +2348,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         setVisibility('YEAR');
     }
     function onCancel() {
-        onListener && onListener({ type: PickerListenerType.Cancel });
+        onListener && onListener({ event: PickerListenerEvent.Cancel });
     }
     function onToday() {
         yearControl.setValue(today.getFullYear());
         dayControl.setValue(today.getDate());
         monthControl.setValue(today.getMonth());
         formControl?.setValue(today);
-        onListener && onListener({ type: PickerListenerType.Now, value: today });
+        onListener && onListener({ event: PickerListenerEvent.Now, value: today });
     }
     function onSelect() {
         formControl?.setValue(value);
-        onListener && onListener({ type: PickerListenerType.Select, value });
+        onListener && onListener({ event: 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: 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',
@@ -2374,13 +2374,13 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const [value, setValue] = useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = useState(false);
     useEffect(() => {
-        const dateCheck = checkDateRange({
+        const dateRange = verifyDateRange({
             date: formControl?.value || date || today,
             minDate,
             maxDate
         });
-        setValue(dateCheck);
-        formControl?.setValue(dateCheck);
+        setValue(dateRange);
+        formControl?.setValue(dateRange);
     }, []);
     function onChange(value) {
         setValue(value);
@@ -2402,8 +2402,8 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const valueInput = value
         ? 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 !== 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 !== PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));
@@ -2446,11 +2446,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         setVisibility('YEAR');
     }
     function onCancel() {
-        onListener && onListener({ type: PickerListenerType.Cancel });
+        onListener && onListener({ event: PickerListenerEvent.Cancel });
     }
     function onSelect() {
         formControl?.setValue(value);
-        onListener && onListener({ type: PickerListenerType.Select, value });
+        onListener && onListener({ event: 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',
@@ -2482,8 +2482,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 !== 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 !== PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));