@rolster/react-components 19.0.0 → 19.0.3

package/dist/es/index.js

@@ -1,8 +1,8 @@
-import require$$0, { useMemo, useState, useEffect, useCallback, useRef, createContext } from 'react';
+import require$$0, { useMemo, useState, useEffect, useCallback, useRef, useEffectEvent, createContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
-import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, dateOutRange, verifyDateRange, PickerListenerEvent } from '@rolster/components';
-import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
+import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
+import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, Time, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import ReactDOM from 'react-dom';
 import { useReactControl } from '@rolster/react-forms';
 
@@ -599,7 +599,7 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
             ? parseFloat((+valueInput).toFixed(decimals))
             : valueInput;
         changeIsInternal.current = true;
-        onValue && onValue(value);
+        onValue?.(value);
         setValueInput(valueInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
@@ -638,7 +638,7 @@ function RlsInputDecimal(props) {
     const onValueInput = useCallback((value) => {
         const valueDecimal = BigDecimal.create(value);
         formControl ? formControl.setValue(valueDecimal) : setValueInput(value);
-        onValue && onValue(valueDecimal);
+        onValue?.(valueDecimal);
     }, [formControl, onValue]);
     const decimalProps = { ...props, formControl: undefined };
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
@@ -649,7 +649,7 @@ function RlsInputMoney(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
@@ -659,7 +659,7 @@ function RlsInputNumber(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
@@ -668,7 +668,7 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     const [focused, setFocused] = useState(false);
     const _onChange = useCallback((event) => {
         formControl?.setValue(event.target.value);
-        onValue && onValue(event.target.value);
+        onValue?.(event.target.value);
     }, [formControl, onValue]);
     const _onKeyDown = useCallback((event) => {
         onKeyDown && onKeyDown(event);
@@ -699,7 +699,7 @@ function RlsInputPercentage(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
 }
@@ -720,7 +720,7 @@ function RlsInputText(props) {
     const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? '');
     const onValueInput = useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
@@ -1205,7 +1205,7 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setDayValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setDayValue, onValue]);
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -1330,7 +1330,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setMonthValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setMonthValue, onValue]);
     useEffect(() => {
         setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
@@ -1461,7 +1461,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     }, [formControl]);
     const onSelect = useCallback((value) => {
         setYearValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setYearValue, onValue]);
     useEffect(() => {
         const options = createPickerOptions(); // YearPickerProps
@@ -1557,7 +1557,7 @@ function RlsTabs({ tabs, onValue, rlsTheme }) {
     const [value, setValue] = useState();
     const onSelect = useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     useEffect(() => {
         const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
@@ -2058,10 +2058,6 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-const DATE_FORMAT = '{dd}/{mx}/{yy}';
-const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
-
 function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameModal = useMemo(() => {
         return renderClassStatus('rls-modal', { visible }, className);
@@ -2072,6 +2068,266 @@ function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
+function formatTime(value) {
+    return String(value).padStart(2, '0');
+}
+const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const RADIUS = 48;
+const DIAL_RADIUS = 60;
+const TICK_RADIUS = 7;
+function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+    const styleTick = useMemo(() => {
+        const radian = (value / 6) * Math.PI;
+        const x = Math.sin(radian) * RADIUS;
+        const y = Math.cos(radian) * RADIUS;
+        return {
+            left: `${DIAL_RADIUS + x - TICK_RADIUS - 1}rem`,
+            top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
+        };
+    }, []);
+    const label = useMemo(() => {
+        if (selectionIsHours) {
+            return formatTime(value);
+        }
+        if (value === 12) {
+            return formatTime(0);
+        }
+        return formatTime(value * 5);
+    }, [selectionIsHours]);
+    const onClick = useCallback((event) => {
+        event.preventDefault();
+        onValue(value);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+}
+function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
+    const timeInitial = useMemo(() => {
+        return formControl?.value ?? time ?? Time.now();
+    }, [formControl?.value, time]);
+    const plateElement = useRef(null);
+    const lineElement = useRef(null);
+    const centerElement = useRef(null);
+    const indicatorElement = useRef(null);
+    const pointElement = useRef(null);
+    const [labels, setLabels] = useState({
+        timeActionCancel: reactI18n('dateActionCancel'),
+        timeActionSelect: reactI18n('dateActionSelect')
+    });
+    const [zoneIsPM, setZoneIsPM] = useState(timeInitial.hour >= 12);
+    const [hour, setHour] = useState(zoneIsPM ? timeInitial.hour - 12 : timeInitial.hour);
+    const [minute, setMinute] = useState(timeInitial.minute);
+    const [selectionIsHours, setSelectionIsHours] = useState(true);
+    const changeIsInternal = useRef(true);
+    const selectionIsActive = useRef(false);
+    const radianUnit = useMemo(() => {
+        return Math.PI / (selectionIsHours ? 6 : 30);
+    }, [selectionIsHours]);
+    const hourFormat = useMemo(() => {
+        return formatTime(hour === 0 ? 12 : hour);
+    }, [hour]);
+    const minuteFormat = useMemo(() => {
+        return formatTime(minute);
+    }, [minute]);
+    const classNameHour = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameMinute = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: !selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameAM = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: !zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const classNamePM = useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const refreshClockHour = useEffectEvent(() => {
+        refreshClock(hour > 12 ? hour - 12 : hour);
+    });
+    const refreshClockMinute = useEffectEvent(() => {
+        refreshClock(minute);
+    });
+    useEffect(() => {
+        return i18nSubscribe(() => {
+            setLabels({
+                timeActionCancel: reactI18n('dateActionCancel'),
+                timeActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    useEffect(() => {
+        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+    }, [selectionIsHours]);
+    useEffect(() => {
+        if (!changeIsInternal.current && formControl?.value) {
+            const zoneIsPM = formControl.value.hour >= 12;
+            setZoneIsPM(zoneIsPM);
+            setHour(zoneIsPM ? formControl.value.hour - 12 : formControl.value.hour);
+            setMinute(formControl.value.minute);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
+    const refreshComponent = useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const value = Math.round(angle / radianUnit);
+        refreshClock(value);
+        selectionIsHours ? setHour(value === 0 ? 12 : value) : setMinute(value);
+    }, [selectionIsHours, radianUnit]);
+    const refreshClock = useCallback((value) => {
+        const angle = value * radianUnit;
+        const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
+        const y2 = -Math.cos(angle) * (RADIUS - TICK_RADIUS);
+        const cx = Math.sin(angle) * RADIUS;
+        const cy = -Math.cos(angle) * RADIUS;
+        lineElement.current.setAttribute('x2', `${x2 - 1}rem`);
+        lineElement.current.setAttribute('y2', `${y2 - 1}rem`);
+        indicatorElement.current.setAttribute('cx', `${cx - 1}rem`);
+        indicatorElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.setAttribute('cx', `${cx - 1}rem`);
+        pointElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.style.visibility =
+            selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
+    }, [selectionIsHours, radianUnit]);
+    const onClickHour = useCallback(() => {
+        setSelectionIsHours(true);
+    }, []);
+    const onClickMinute = useCallback(() => {
+        setSelectionIsHours(false);
+    }, []);
+    const onClickAM = useCallback(() => {
+        setZoneIsPM(false);
+    }, []);
+    const onClickPM = useCallback(() => {
+        setZoneIsPM(true);
+    }, []);
+    const onActiveSelection = useCallback(() => {
+        selectionIsActive.current = true;
+    }, []);
+    const onMouseSelection = useCallback((event) => {
+        if (selectionIsActive.current) {
+            event.preventDefault();
+            refreshComponent(event.clientX, event.clientY);
+        }
+    }, [refreshComponent]);
+    const onTouchSelection = useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (selectionIsActive.current && touch) {
+            refreshComponent(touch.clientX, touch.clientY);
+        }
+    }, [refreshComponent]);
+    const onInactiveSelection = useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
+    const onClickValue = useCallback((value) => {
+        if (selectionIsHours) {
+            setHour(value);
+            refreshClock(value);
+        }
+        else {
+            const minute = value === 12 ? 0 : value * 5;
+            setMinute(minute);
+            refreshClock(minute);
+        }
+    }, [selectionIsHours]);
+    const onCancel = useCallback(() => {
+        onListener?.({ event: PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onCurrentTime = useCallback(() => {
+        const currentTime = Time.now();
+        changeIsInternal.current = true;
+        formControl?.setValue(currentTime);
+        setHour(currentTime.hour);
+        setMinute(currentTime.minute);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: currentTime
+        });
+    }, [formControl, onListener]);
+    const onSelect = useCallback(() => {
+        const hourValue = zoneIsPM
+            ? hour !== 12
+                ? hour + 12
+                : 12
+            : hour === 12
+                ? 0
+                : hour;
+        const timeValue = new Time(hourValue, minute);
+        changeIsInternal.current = true;
+        formControl?.setValue(timeValue);
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value: timeValue
+        });
+    }, [formControl, hour, minute, zoneIsPM, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+                                        transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
+                                    }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
+                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                            }) })] }) }), 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 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);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const timeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
+        return {
+            icon: timeValue ? 'trash-2' : 'timer',
+            valueInput: timeValue?.normalizeMeridiemFormat || ''
+        };
+    }, [timeValue]);
+    const onClickInput = useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = useCallback(() => {
+        if (timeValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [timeValue, formControl, valueInitial, onChange]);
+    const onListener = useCallback(({ event, value }) => {
+        event !== PickerListenerEvent.Cancel && onChange(value);
+        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.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 }) })] }));
+}
+
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
 function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const today = useRef(new Date()); // Initial current date in component
     const _date = useMemo(() => {
@@ -2124,81 +2380,84 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
     }, []);
     const onCancel = useCallback(() => {
-        onListener && onListener({ event: PickerListenerEvent.Cancel });
+        onListener?.({ event: PickerListenerEvent.Cancel });
     }, [onListener]);
     const onToday = useCallback(() => {
         yearControl.setValue(today.current.getFullYear());
         dayControl.setValue(today.current.getDate());
         monthControl.setValue(today.current.getMonth());
         formControl?.setValue(today.current);
-        onListener &&
-            onListener({
-                event: PickerListenerEvent.Now,
-                value: today.current
-            });
-    }, [today.current, formControl, onListener]);
+        onListener?.({
+            event: PickerListenerEvent.Now,
+            value: today.current
+        });
+    }, [formControl, onListener]);
     const onSelect = useCallback(() => {
         formControl?.setValue(value);
-        onListener &&
-            onListener({
-                event: PickerListenerEvent.Select,
-                value
-            });
+        onListener?.({
+            event: PickerListenerEvent.Select,
+            value
+        });
     }, [formControl, value, onListener]);
     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: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, 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 RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
+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 ?? _value);
+    const [value, setValue] = useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = useState(false);
-    const _disabled = useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = useMemo(() => {
+    }, [disabled, readOnly]);
+    const dateValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'calendar',
-            valueInput: value ? dateFormatTemplate(value, format || DATE_FORMAT) : ''
+            icon: dateValue ? 'trash-2' : 'calendar',
+            label: dateValue
+                ? dateFormatTemplate(dateValue, format || DATE_FORMAT)
+                : ''
         };
-    }, [value]);
+    }, [dateValue, format]);
     useEffect(() => {
-        const _date = verifyDateRange({
+        const dateSecure = verifyDateRange({
             date: formControl?.value ?? date ?? today.current,
             minDate,
             maxDate
         });
-        setValue(_date);
-        formControl?.setValue(_date);
+        setValue(dateSecure);
+        formControl?.setValue(dateSecure);
     }, []);
     const onClickInput = useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
     const onChange = useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (value) {
-            formControl?.setValue(_value);
+        if (dateValue) {
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [dateValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
         event !== PickerListenerEvent.Cancel && onChange(value);
         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: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !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("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 }) })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -2207,8 +2466,8 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const _date = useMemo(() => normalizeMinTime(_picker ?? new Date()), [_picker]);
+function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = useMemo(() => normalizeMinTime(datePicker ?? new Date()), [datePicker]);
     const _range = useMemo(() => formControl?.value ?? DateRange.now(), [formControl?.value]);
     const yearControl = useReactControl(_date.getFullYear());
     const monthControl = useReactControl(_date.getMonth());
@@ -2273,48 +2532,51 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
     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 RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
-    const currentDate = useMemo(() => _date ?? new Date(), [_date]);
-    const [value, setValue] = useState(formControl?.value || _value);
+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);
     const [modalIsVisible, setModalIsVisible] = useState(false);
-    const _disabled = useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = useMemo(() => {
+    }, [disabled, readOnly]);
+    const dateRangeValue = useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'calendar',
-            valueInput: value ? rangeFormatTemplate(value) : ''
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
         };
-    }, [value]);
+    }, [dateRangeValue]);
     const onClickInput = useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
     const onChange = useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     const onClickAction = useCallback(() => {
-        if (value) {
-            formControl?.setValue(_value);
+        if (dateRangeValue) {
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
     const onListener = useCallback(({ event, value }) => {
         event !== PickerListenerEvent.Cancel && onChange(value);
         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: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !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("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !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 }) })] }));
 }
 
 function useFieldSelect(props) {
@@ -3012,5 +3274,5 @@ function usePortalController() {
     return { close, open, visible };
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonOption, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, usePortalController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonOption, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerClock, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, usePortalController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map