@rolster/react-components 19.6.9 → 19.6.11

package/dist/es/index.mjs

@@ -1139,69 +1139,12 @@ function generateThemeCSS(colors, theme) {
         ...shadowProps
     ];
 }
-const srgbToLinear = (channel) => {
-    const x = channel / 255;
-    return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
-};
-const linearToSrgb = (channel) => {
-    const v = channel <= 0.0031308
-        ? 12.92 * channel
-        : 1.055 * channel ** (1 / 2.4) - 0.055;
-    return clamp(Math.round(v * 255), 0, 255);
-};
-function rgbToOklch({ r, g, b }) {
-    const lr = srgbToLinear(r);
-    const lg = srgbToLinear(g);
-    const lb = srgbToLinear(b);
-    const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-    const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-    const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-    const okL = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
-    const okA = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
-    const okB = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
-    return { l: okL, c: Math.hypot(okA, okB), h: Math.atan2(okB, okA) };
-}
-function oklabToLinearRgb(l, a, b) {
-    const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-    const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-    const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
-    return [
-        4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
-        -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
-        -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
-    ];
-}
-const inGamut = ([r, g, b]) => {
-    const e = 1e-4;
-    return (r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e);
-};
-function oklchToRgb({ l, c, h }) {
-    const a = Math.cos(h);
-    const b = Math.sin(h);
-    const linearAt = (chroma) => oklabToLinearRgb(l, a * chroma, b * chroma);
-    if (!inGamut(linearAt(c))) {
-        let lo = 0;
-        let hi = c;
-        for (let i = 0; i < 20; i++) {
-            const mid = (lo + hi) / 2;
-            if (inGamut(linearAt(mid))) {
-                lo = mid;
-            }
-            else {
-                hi = mid;
-            }
-        }
-        c = lo;
-    }
-    const [lr, lg, lb] = linearAt(c);
-    return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
-}
-const chromaFactor = (lightness) => 0.4 + 0.6 * (1 - Math.abs(lightness - 0.5) * 2);
-function detectShadeLevel(lightness) {
+function detectShadeLevel(hsl) {
     let bestLevel = '500';
     let minDiff = Infinity;
-    SHADE_LABELS.forEach((level) => {
-        const diff = Math.abs(lightness - STANDARD_LUMINANCE[level]);
+    Object.keys(STANDARD_LUMINANCE).forEach((level) => {
+        const targetL = STANDARD_LUMINANCE[level];
+        const diff = Math.abs(hsl.l - targetL);
         if (diff < minDiff) {
             minDiff = diff;
             bestLevel = level;
@@ -1210,29 +1153,50 @@ function detectShadeLevel(lightness) {
     return bestLevel;
 }
 function generateThemePalette(baseColor, theme = 'primary') {
-    const rgb = hexToRgb(baseColor);
-    if (!rgb) {
+    const hsl = hexToHsl(baseColor);
+    if (!hsl) {
         throw new Error(msgInvalidColor(baseColor));
     }
-    const base = rgbToOklch(rgb);
-    const matchedLevel = detectShadeLevel(base.l * 100);
+    const matchedLevel = detectShadeLevel(hsl);
+    const targetL = STANDARD_LUMINANCE[matchedLevel];
+    const inputL = hsl.l;
     const colors = {};
+    const matchedIndex = SHADE_LABELS.indexOf(matchedLevel);
     SHADE_LABELS.forEach((label) => {
         if (label === matchedLevel) {
-            colors[label] = rgbToHex(rgb); // preserve the base color exactly
+            colors[label] = baseColor.toUpperCase();
             return;
         }
-        const lightness = STANDARD_LUMINANCE[label] / 100;
-        colors[label] = rgbToHex(oklchToRgb({
-            l: lightness,
-            c: base.c * chromaFactor(lightness),
-            h: base.h
-        }));
+        const shadeTargetL = STANDARD_LUMINANCE[label];
+        const labelIndex = SHADE_LABELS.indexOf(label);
+        let lightL;
+        if (labelIndex < matchedIndex) {
+            const ratio = inputL / targetL;
+            lightL = shadeTargetL * ratio;
+        }
+        else {
+            const remainingInput = 100 - inputL;
+            const remainingTarget = 100 - targetL;
+            const progress = (shadeTargetL - targetL) / remainingTarget;
+            lightL = inputL + progress * remainingInput;
+        }
+        lightL = Math.min(100, Math.max(0, lightL));
+        const satFactor = lightL > 60
+            ? Math.max(0.2, (100 - lightL) / 40)
+            : lightL < 30
+                ? Math.max(0.2, lightL / 30)
+                : 1;
+        colors[label] = hslToHex({
+            h: hsl.h,
+            s: Math.round(Math.min(100, hsl.s * satFactor)),
+            l: Math.round(lightL)
+        });
     });
-    const properties = generateThemeCSS(colors, theme);
+    const shades = colors;
+    const properties = generateThemeCSS(shades, theme);
     return {
         theme,
-        colors,
+        colors: shades,
         css: properties.map((p) => `${p.name}: ${p.value};`).join('\n'),
         properties
     };
@@ -2495,10 +2459,10 @@ function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizabl
 function RlsDatatableHeader({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTitle({ children, className, contained, control, identifier, rlsTheme }) {
+function RlsDatatableTitle({ children, className, control, identifier, rlsTheme, truncated }) {
     const classNameTitle = useMemo(() => {
-        return renderClassStatus('rls-datatable__title', { contained, control }, className);
-    }, [className, contained, control]);
+        return renderClassStatus('rls-datatable__title', { truncated, control }, className);
+    }, [className, truncated, control]);
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
 }
 function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
@@ -2507,28 +2471,28 @@ function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
     }, [className]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameSubheader, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableRecord({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
+function RlsDatatableRecord({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
     const classNameRecord = useMemo(() => {
-        return renderClassStatus('rls-datatable__record', { error, info, contained, success, warning }, className);
-    }, [className, contained, error, info, success, warning]);
+        return renderClassStatus('rls-datatable__record', { error, info, truncated, success, warning }, className);
+    }, [className, truncated, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTotals({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
+function RlsDatatableTotals({ children, className, error, identifier, info, rlsTheme, success, truncated, warning }) {
     const classNameTotals = useMemo(() => {
-        return renderClassStatus('rls-datatable__totals', { error, info, contained, success, warning }, className);
-    }, [className, contained, error, info, success, warning]);
+        return renderClassStatus('rls-datatable__totals', { error, info, truncated, success, warning }, className);
+    }, [className, truncated, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableCell({ children, className, contained, control, identifier, rlsTheme }) {
+function RlsDatatableCell({ children, className, control, identifier, rlsTheme, truncated }) {
     const classNameCell = useMemo(() => {
-        return renderClassStatus('rls-datatable__cell', { control, contained }, className);
-    }, [className, contained, control]);
+        return renderClassStatus('rls-datatable__cell', { control, truncated }, className);
+    }, [className, truncated, control]);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableData({ children, className, contained, control, identifier }) {
+function RlsDatatableData({ children, className, control, identifier, truncated }) {
     const classNameData = useMemo(() => {
-        return renderClassStatus('rls-datatable__data', { control, contained }, className);
-    }, [className, contained, control]);
+        return renderClassStatus('rls-datatable__data', { control, truncated }, className);
+    }, [className, truncated, control]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameData, children: children }));
 }
 function RlsDatatableFloating({ children, className, identifier, invested, rlsTheme }) {
@@ -3157,6 +3121,14 @@ function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
                             }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
 }
 
+function RlsModalClock({ controller, disabled, formControl, onClose, rlsTheme, time, visible }) {
+    const onListener = useCallback(({ event, value }) => {
+        onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
+        controller?.close();
+    }, [onClose, controller]);
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-clock", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) }));
+}
+
 function RlsFieldClock({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -3197,14 +3169,14 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
             setModalIsVisible(true);
         }
     }, [timeValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        if (event !== PickerListenerEvent.Cancel) {
-            onChange(value);
+    const onCloseModal = useCallback((time) => {
+        if (time) {
+            onChange(time);
         }
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalClock, { visible: modalIsVisible, time: time, disabled: disabled, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 
 function RlsPickerColor({ color, formControl, onListener, rlsTheme }) {
@@ -3550,6 +3522,14 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: value, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
+function RlsModalDate({ automatic, controller, date, disabled, formControl, maxDate, minDate, onClose, rlsTheme, visible }) {
+    const onListener = useCallback(({ event, value }) => {
+        onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
+        controller?.close();
+    }, [onClose, controller]);
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
+}
+
 function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = useRef(new Date()); // Initial current date in component
     const [value, setValue] = useState(formControl?.value ?? valueInitial);
@@ -3602,14 +3582,14 @@ function RlsFieldDate({ children, date, disabled: disabledProps, formControl, fo
             setModalIsVisible(true);
         }
     }, [dateValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        if (event !== PickerListenerEvent.Cancel) {
-            onChange(value);
+    const onCloseModal = useCallback((date) => {
+        if (date) {
+            onChange(date);
         }
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDate, { visible: modalIsVisible, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -3685,6 +3665,14 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
     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(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, 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: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
+function RlsModalDateRange({ automatic, controller, date, disabled, formControl, maxDate, minDate, onClose, rlsTheme, visible }) {
+    const onListener = useCallback(({ event, value }) => {
+        onClose?.(event !== PickerListenerEvent.Cancel ? value : undefined);
+        controller?.close();
+    }, [onClose, controller]);
+    return (jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-date-range", controller: controller, visible: visible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { automatic: automatic, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) }));
+}
+
 function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const currentDate = useMemo(() => date ?? new Date(), [date]);
     const [value, setValue] = useState(formControl?.value || valueInitial);
@@ -3726,14 +3714,14 @@ function RlsFieldDateRange({ children, date, disabled: disabledProps, formContro
             setModalIsVisible(true);
         }
     }, [dateRangeValue, formControl, valueInitial, onChange]);
-    const onListener = useCallback(({ event, value }) => {
-        if (event !== PickerListenerEvent.Cancel) {
-            onChange(value);
+    const onCloseModal = useCallback((dateRange) => {
+        if (dateRange) {
+            onChange(dateRange);
         }
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDateRange, { visible: modalIsVisible, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 
 const MAX_LIST_HEIGHT_REM = 90;
@@ -3786,26 +3774,25 @@ function useFieldList(props) {
     useEffect(() => {
         const formValue = formControl?.value;
         if (formValue !== undefined && formValue !== null && formValue.length) {
-            const selectedElements = suggestions.filter((state) => formValue.some((value) => state.compareTo(value)));
-            setSelected(selectedElements);
+            setSelected(suggestions.filter((state) => formValue.some((value) => state.compareTo(value))));
         }
         else {
             setSelected([]);
         }
     }, [formControl?.value, suggestions]);
-    const setListState = useCallback((updates) => {
+    const setListState = useCallback((controllerState) => {
         setState((state) => {
-            const _updates = updates.listIsVisible !== undefined
+            const newState = controllerState.listIsVisible !== undefined
                 ? {
-                    ...updates,
-                    ...(updates.listIsVisible
+                    ...controllerState,
+                    ...(controllerState.listIsVisible
                         ? {
                             higher: shouldDisplayHigher(refContent.current, refList.current)
                         }
                         : {})
                 }
-                : updates;
-            return { ...state, ..._updates };
+                : controllerState;
+            return { ...state, ...newState };
         });
     }, []);
     const toggleElement = useCallback((element) => {
@@ -4771,5 +4758,5 @@ function usePortalController() {
     return { close, open, visible };
 }
 
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setDesignSystem, setErrorsI18n, setThemeColor, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setDesignSystem, setErrorsI18n, setThemeColor, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
 //# sourceMappingURL=index.mjs.map