@cwellt_software/cwellt-reactjs-lib 1.4.12 → 1.4.13

package/dist/index.cjs.js

@@ -6512,7 +6512,10 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
     const handleClear = (e) => {
         e.stopPropagation();
         onChange(undefined);
-        setInputValue("");
+        // Keep showing the current value prop: a controlled parent that accepts the
+        // clear empties it via the value-sync effect, while a parent that rejects or
+        // transforms the clear (e.g. resets to a default) stays visually in sync.
+        setInputValue(value ?? "");
     };
     const handleInputClick = () => {
         if (!disabled) {
@@ -6540,15 +6543,18 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
             const [hours, minutes] = newValue.split(":");
             const h = parseInt(hours, 10);
             const m = parseInt(minutes, 10);
-            if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
-                const formattedTime = `${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`;
-                // Check min/max time restrictions
-                const isValid = (!minTime || formattedTime >= minTime) &&
-                    (!maxTime || formattedTime <= maxTime);
-                if (isValid) {
-                    onChange(formattedTime);
-                    setInputValue(formattedTime);
-                }
+            const formattedTime = `${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`;
+            // Check well-formedness and min/max time restrictions
+            const isValid = h >= 0 && h <= 23 && m >= 0 && m <= 59 &&
+                (!minTime || formattedTime >= minTime) &&
+                (!maxTime || formattedTime <= maxTime);
+            if (isValid) {
+                onChange(formattedTime);
+                setInputValue(formattedTime);
+            }
+            else {
+                // Completed entry is invalid/out of range: snap back to the previous value
+                setInputValue(value ?? "");
             }
         }
         else if (newValue === "") {
@@ -7264,7 +7270,8 @@ function formatPlainDate(pd, fmt) {
 
 function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, locale: locale$1 = locale.enGB, todayLabel = "Today", yearRangeStart, yearRangeEnd, feedback, }) {
     const [isOpen, setIsOpen] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState();
+    // Initialize with the formatted value so the input is controlled from the first render
+    const [inputValue, setInputValue] = React.useState(() => value ? formatPlainDate(value, displayFormat) : "");
     const containerRef = React.useRef(null);
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
@@ -7382,6 +7389,298 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
                                         } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
+// DateTimePickerState - immutable domain model for the Temporal date-time picker.
+//
+// Invariants:
+// - `time` is NEVER null: this is a date-TIME picker, so the time always has a
+//   value and defaults to 00:00. Only the date can be unselected, and without
+//   a date the whole `value` is undefined.
+// - Minute precision everywhere: times AND constraints are truncated to HH:mm
+//   on the way in, so emitted values always carry :00 seconds and boundary
+//   checks never fail on sub-minute residue.
+// - NO reachable state holds an out-of-range selection when minDateTime /
+//   maxDateTime are set. User operations that would leave the state invalid
+//   return THE SAME instance (===), which the hook uses to skip the emission
+//   and let the UI snap back; entry paths that cannot reject (fromValue,
+//   withConstraints, withTimeCleared) clamp into the range instead.
+//
+// Because of these invariants the emission is state-scoped: after any accepted
+// operation the value to emit is simply the new state's `value`. Rejected
+// operations are detected by identity (`next === prev`).
+/** Truncate to minute precision (HH:mm) - the picker's working precision */
+function truncateToMinute(time) {
+    return new Temporal.PlainTime(time.hour, time.minute);
+}
+function midnight() {
+    return new Temporal.PlainTime(0, 0);
+}
+function truncateDateTimeToMinute(dateTime) {
+    return dateTime
+        ? dateTime.toPlainDate().toPlainDateTime(truncateToMinute(dateTime.toPlainTime()))
+        : undefined;
+}
+/** Normalize constraints to the picker's minute precision */
+function normalizeConstraints(constraints) {
+    return {
+        minDateTime: truncateDateTimeToMinute(constraints.minDateTime),
+        maxDateTime: truncateDateTimeToMinute(constraints.maxDateTime),
+        minTime: constraints.minTime ? truncateToMinute(constraints.minTime) : undefined,
+        maxTime: constraints.maxTime ? truncateToMinute(constraints.maxTime) : undefined,
+    };
+}
+class DateTimePickerState {
+    date;
+    time;
+    constraints;
+    constructor(date, time, constraints) {
+        this.date = date;
+        this.time = time;
+        this.constraints = normalizeConstraints(constraints);
+        Object.freeze(this);
+    }
+    static empty(constraints = {}) {
+        return new DateTimePickerState(undefined, midnight(), constraints);
+    }
+    /**
+     * Build a state from an external value (the value-prop sync path).
+     * The time is truncated to minute precision and the whole value is
+     * clamped into [minDateTime, maxDateTime]: no state can ever hold an
+     * out-of-range selection, regardless of where the value came from.
+     */
+    static fromValue(value, constraints = {}) {
+        if (!value)
+            return new DateTimePickerState(undefined, midnight(), constraints);
+        const base = new DateTimePickerState(value.toPlainDate(), truncateToMinute(value.toPlainTime()), constraints);
+        return base.clampedIntoRange();
+    }
+    /** Combined date+time; undefined when no date is selected. */
+    get value() {
+        return this.date ? this.date.toPlainDateTime(this.time) : undefined;
+    }
+    /**
+     * Effective minimum time of day for the currently selected date:
+     * when the selected date is the minDateTime boundary date, the boundary's
+     * time (minute-truncated) replaces the static minTime.
+     */
+    get effectiveMinTime() {
+        return this.effectiveMinTimeFor(this.date);
+    }
+    /** Effective maximum time of day for the currently selected date (see effectiveMinTime). */
+    get effectiveMaxTime() {
+        return this.effectiveMaxTimeFor(this.date);
+    }
+    /**
+     * Select (or clear) the date.
+     * - Clearing the date resets the whole selection (time back to 00:00).
+     * - When the current time is out of range for the new date, it falls back
+     *   to the effective minimum time for that date (or 00:00).
+     * - When even the fallback is out of range the date is rejected and the
+     *   same instance is returned.
+     */
+    withDate(date) {
+        if (!date) {
+            return new DateTimePickerState(undefined, midnight(), this.constraints);
+        }
+        if (this.isInRange(date.toPlainDateTime(this.time))) {
+            return new DateTimePickerState(date, this.time, this.constraints);
+        }
+        const fallbackTime = this.effectiveMinTimeFor(date) ?? midnight();
+        if (this.isInRange(date.toPlainDateTime(fallbackTime))) {
+            return new DateTimePickerState(date, fallbackTime, this.constraints);
+        }
+        return this;
+    }
+    /**
+     * Select the time (minute-truncated). An out-of-range time for the
+     * selected date is rejected: the same instance is returned so the UI can
+     * snap back to the previous time. Without a date any time is accepted
+     * (there is no combination to validate yet).
+     */
+    withTime(time) {
+        const truncated = truncateToMinute(time);
+        if (this.date && !this.isInRange(this.date.toPlainDateTime(truncated))) {
+            return this;
+        }
+        return new DateTimePickerState(this.date, truncated, this.constraints);
+    }
+    /**
+     * Apply "now" (Now button), truncated to minute precision. Rejected
+     * (same instance returned) when the truncated now is out of range.
+     */
+    withNow(now) {
+        const date = now.toPlainDate();
+        const time = truncateToMinute(now.toPlainTime());
+        if (!this.isInRange(date.toPlainDateTime(time))) {
+            return this;
+        }
+        return new DateTimePickerState(date, time, this.constraints);
+    }
+    /**
+     * Reset the time to its default: the effective minimum for the current
+     * date when 00:00 would be out of range (boundary dates), else 00:00.
+     * The result is always in range - this is the clear-time path.
+     */
+    withTimeCleared() {
+        if (!this.date) {
+            return new DateTimePickerState(undefined, midnight(), this.constraints);
+        }
+        return new DateTimePickerState(this.date, midnight(), this.constraints).clampedIntoRange();
+    }
+    /** Reset the selection (no date, time back to 00:00), keeping the constraints. */
+    clear() {
+        return new DateTimePickerState(undefined, midnight(), this.constraints);
+    }
+    /**
+     * Replace the constraints. The current selection is clamped into the new
+     * [minDateTime, maxDateTime] range so it can never be left out of range.
+     */
+    withConstraints(constraints) {
+        return new DateTimePickerState(this.date, this.time, constraints).clampedIntoRange();
+    }
+    /**
+     * Clamp the selection into [minDateTime, maxDateTime]: a combined value
+     * below the minimum becomes the minimum (date and time), one above the
+     * maximum becomes the maximum. In-range states return themselves.
+     */
+    clampedIntoRange() {
+        const combined = this.value;
+        if (!combined)
+            return this;
+        const { minDateTime, maxDateTime } = this.constraints;
+        if (minDateTime && Temporal.PlainDateTime.compare(combined, minDateTime) < 0) {
+            return new DateTimePickerState(minDateTime.toPlainDate(), truncateToMinute(minDateTime.toPlainTime()), this.constraints);
+        }
+        if (maxDateTime && Temporal.PlainDateTime.compare(combined, maxDateTime) > 0) {
+            return new DateTimePickerState(maxDateTime.toPlainDate(), truncateToMinute(maxDateTime.toPlainTime()), this.constraints);
+        }
+        return this;
+    }
+    effectiveMinTimeFor(date) {
+        const { minDateTime, minTime } = this.constraints;
+        if (date && minDateTime && date.equals(minDateTime.toPlainDate())) {
+            return truncateToMinute(minDateTime.toPlainTime());
+        }
+        return minTime;
+    }
+    effectiveMaxTimeFor(date) {
+        const { maxDateTime, maxTime } = this.constraints;
+        if (date && maxDateTime && date.equals(maxDateTime.toPlainDate())) {
+            return truncateToMinute(maxDateTime.toPlainTime());
+        }
+        return maxTime;
+    }
+    isInRange(combined) {
+        const { minDateTime, maxDateTime } = this.constraints;
+        if (minDateTime && Temporal.PlainDateTime.compare(combined, minDateTime) < 0)
+            return false;
+        if (maxDateTime && Temporal.PlainDateTime.compare(combined, maxDateTime) > 0)
+            return false;
+        return true;
+    }
+}
+
+// useCwDateTimePickerTemporal - thin glue between DateTimePickerState and the
+// CwDateTimePickerTemporal component. All picker logic lives in the domain
+// class; this hook only holds the instance in React state, syncs it with the
+// external value prop, and converts PlainTime <-> "HH:mm" at the CwTimePicker
+// string boundary.
+//
+// Emission model: an accepted operation returns a NEW instance and the hook
+// emits its `value`; a rejected operation returns the SAME instance and
+// nothing is emitted (CwTimePicker snaps its text back to the value prop as
+// soon as the typed entry is complete and invalid).
+//
+// The time string is empty until a date is selected (visual only): without a
+// date the whole value is undefined, so showing the default 00:00 would
+// suggest a selection that doesn't exist.
+function plainTimeToHHmm(time) {
+    return `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`;
+}
+/** "HH:mm" -> PlainTime; unparseable input yields undefined (ignored by the caller) */
+function hhmmToPlainTime(time) {
+    try {
+        return Temporal.PlainTime.from(time);
+    }
+    catch {
+        return undefined;
+    }
+}
+function optionalTimeToHHmm(time) {
+    return time ? plainTimeToHHmm(time) : undefined;
+}
+function plainDateTimesEqual(a, b) {
+    if (!a || !b)
+        return a === b;
+    return a.equals(b);
+}
+function useCwDateTimePickerTemporal({ value, onChange, minDateTime, maxDateTime, minTime, maxTime, }) {
+    const constraints = React.useMemo(() => ({
+        minDateTime,
+        maxDateTime,
+        minTime: minTime ? hhmmToPlainTime(minTime) : undefined,
+        maxTime: maxTime ? hhmmToPlainTime(maxTime) : undefined,
+        // ISO-string deps keep the object stable across re-created Temporal instances
+    }), [minDateTime?.toString(), maxDateTime?.toString(), minTime, maxTime]);
+    const [state, setState] = React.useState(() => DateTimePickerState.fromValue(value, constraints));
+    // Track the previous value prop to detect external changes.
+    const prevValueRef = React.useRef(value);
+    React.useEffect(() => {
+        if (!plainDateTimesEqual(value, prevValueRef.current)) {
+            prevValueRef.current = value;
+            setState(prev => DateTimePickerState.fromValue(value, prev.constraints));
+        }
+    }, [value]);
+    React.useEffect(() => {
+        setState(prev => prev.withConstraints(constraints));
+    }, [constraints]);
+    const apply = React.useCallback((next) => {
+        if (next === state)
+            return; // operation rejected by the domain - no emission
+        setState(next);
+        onChange(next.value);
+    }, [state, onChange]);
+    const selectDate = React.useCallback((date) => {
+        apply(state.withDate(date));
+    }, [state, apply]);
+    const selectTime = React.useCallback((time) => {
+        if (!time) {
+            // Cleared time input: reset to the in-range default for the current date
+            apply(state.withTimeCleared());
+            return;
+        }
+        const parsed = hhmmToPlainTime(time);
+        if (parsed) {
+            apply(state.withTime(parsed));
+        }
+    }, [state, apply]);
+    const selectNow = React.useCallback(() => {
+        apply(state.withNow(Temporal.Now.plainDateTimeISO()));
+    }, [state, apply]);
+    return {
+        date: state.date,
+        time: state.date ? plainTimeToHHmm(state.time) : "",
+        minDate: minDateTime?.toPlainDate(),
+        maxDate: maxDateTime?.toPlainDate(),
+        effectiveMinTime: optionalTimeToHHmm(state.effectiveMinTime),
+        effectiveMaxTime: optionalTimeToHHmm(state.effectiveMaxTime),
+        selectDate,
+        selectTime,
+        selectNow,
+    };
+}
+
+function CwDateTimePickerTemporal({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, nowLabel = "Now", locale: locale$1 = locale.enGB, }) {
+    const picker = useCwDateTimePickerTemporal({
+        value,
+        onChange,
+        minDateTime,
+        maxDateTime,
+        minTime,
+        maxTime,
+    });
+    return jsxRuntime.jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsxRuntime.jsx(CwDatePickerTemporal, { value: picker.date, onChange: picker.selectDate, minDate: picker.minDate, maxDate: picker.maxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale$1 }), jsxRuntime.jsx(CwTimePicker, { value: picker.time, onChange: picker.selectTime, interval: timeInterval, minTime: picker.effectiveMinTime, maxTime: picker.effectiveMaxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: picker.selectNow, disabled: disabled, text: nowLabel }))] })] }) });
+}
+
 // dateRangePresetsTemporal.ts
 // Temporal-typed counterpart of dateRangePresets.ts (used by CwDateRangePickerTemporal).
 // Each preset is evaluated at click time; a reference date can be injected for testing.
@@ -10792,6 +11091,7 @@ exports.CwDateRangePicker = CwDateRangePicker;
 exports.CwDateRangePickerTemporal = CwDateRangePickerTemporal;
 exports.CwDateTimePicker = CwDateTimePicker;
 exports.CwDateTimePickerCompact = CwDateTimePickerCompact;
+exports.CwDateTimePickerTemporal = CwDateTimePickerTemporal;
 exports.CwDialog = CwDialog;
 exports.CwDigit = CwDigit;
 exports.CwDisplayMessage = CwDisplayMessage;