@cwellt_software/cwellt-reactjs-lib 1.4.12 → 1.4.14

package/dist/index.cjs.js

@@ -219,6 +219,11 @@ const showTooltip = (content, triggerElement, position = "right", dissapearsWhen
         constraintRect: constraintElement?.getBoundingClientRect()
     };
     stateUpdateCallbacks.forEach((cb) => cb());
+    // Self-heal: if the manager root died (e.g. a prior uncaught error), rebuild
+    // it now. The fresh manager initializes from the currentState set above, so
+    // this tooltip still shows on this hover — no page reload required. No-op
+    // (cheap guard return) when the manager is alive.
+    ensureTooltipManager();
 };
 const hideTooltip = (delay = 100) => {
     if (hideTimeout !== undefined) {
@@ -259,15 +264,59 @@ const calculatePositionForSide$1 = (position, triggerRect, tooltipRect) => {
     }
 };
 const MANAGER_CONTAINER_CLASS = "cw-tooltip-manager";
+// Live reference to the manager's React root. Non-null while the manager is
+// mounted (or being built), null once it unmounts — including when React tears
+// the root down after an uncaught error. This is the liveness signal used to
+// self-heal: a dead root leaves a stale container div in the DOM, so checking
+// the div alone (as before) would never rebuild. The manager's effect nulls it
+// on unmount (see CwTooltipManager).
+let managerRoot = null;
 const ensureTooltipManager = () => {
-    if (document.querySelector(`.${MANAGER_CONTAINER_CLASS}`))
+    // Truthy => alive or already being built this tick (guards against the many
+    // CwTooltipNew that mount in the same commit each spinning up their own root).
+    if (managerRoot)
         return;
+    // Remove any dead container left behind by a previous crash before rebuilding.
+    document.querySelectorAll(`.${MANAGER_CONTAINER_CLASS}`).forEach((el) => el.remove());
     const container = document.createElement("div");
     container.className = MANAGER_CONTAINER_CLASS;
     document.body.appendChild(container);
-    const root = client.createRoot(container);
-    root.render(jsxRuntime.jsx(CwTooltipManager, {}));
+    managerRoot = client.createRoot(container);
+    managerRoot.render(jsxRuntime.jsx(CwTooltipManager, {}));
 };
+/**
+ * Isolates a crashing tooltip's content from the shared singleton root.
+ * Without this, an error thrown while rendering any single tooltip's content
+ * would unmount the whole CwTooltipManager root, killing every tooltip across
+ * the app until a full page reload.
+ *
+ * NOTE: React error boundaries can ONLY be implemented as class components —
+ * there is no hook / functional-component equivalent (see the React docs). This
+ * is the accepted exception to the project's functional-component convention;
+ * it is intentional infrastructure, not a refactor target — do not flag it.
+ */
+class TooltipErrorBoundary extends React.Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        // Contain the crash: log it, then hide the tooltip so the manager stays
+        // mounted and the next hover works normally.
+        console.error("CwTooltip content crashed; hiding tooltip.", error);
+        this.props.onError();
+    }
+    componentDidUpdate(prevProps) {
+        // Recover for the hover-to-adjacent-element case, where content swaps
+        // without the boundary unmounting: clear the error so new content renders.
+        if (this.state.hasError && prevProps.children !== this.props.children) {
+            this.setState({ hasError: false });
+        }
+    }
+    render() {
+        return this.state.hasError ? null : this.props.children;
+    }
+}
 // Main component
 /**
  * Global tooltip renderer. Manages a single portal instance in the DOM,
@@ -297,6 +346,11 @@ const CwTooltipManager = () => {
         stateUpdateCallbacks.add(update);
         return () => {
             stateUpdateCallbacks.delete(update);
+            // Signal that the root is gone so ensureTooltipManager rebuilds it on
+            // the next show — covers React tearing down the root after an uncaught
+            // error in the manager's own machinery (which the content boundary,
+            // living inside this tree, cannot catch).
+            managerRoot = null;
         };
     }, []);
     // Function to calculate position
@@ -426,7 +480,7 @@ const CwTooltipManager = () => {
             top: `${tooltipPosition.top}px`,
             left: `${tooltipPosition.left}px`,
             opacity: (isPositioned && !isMeasuring) ? 1 : 0,
-        }, onMouseEnter: () => state.dissapearsWhenHover && hideTooltip(), children: state.content }), document.body);
+        }, onMouseEnter: () => state.dissapearsWhenHover && hideTooltip(), children: jsxRuntime.jsx(TooltipErrorBoundary, { onError: () => hideTooltip(0), children: state.content }) }), document.body);
 };
 
 /**
@@ -6512,7 +6566,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 +6597,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 +7324,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 +7443,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.
@@ -8148,7 +8501,7 @@ crewAssignmentSchedulerContextMenu, }) => {
 };
 
 const TimeLine$1 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
-    return (jsxRuntime.jsx(CwGenericTooltip, { content: toolTipTitle, position: "top", children: jsxRuntime.jsx("div", { id: id, style: {
+    return (jsxRuntime.jsx(CwTooltipNew, { content: toolTipTitle, position: "top", children: jsxRuntime.jsx("div", { id: id, style: {
                 borderLeft: `${pixels}px solid ${color}`,
                 marginLeft: marginLeft,
                 width: "0px",
@@ -10792,6 +11145,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;