@cwellt_software/cwellt-reactjs-lib 1.4.11 → 1.4.13

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, createElement, useId, memo, Fragment as Fragment$1, Component } from 'react';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import Draggable from 'react-draggable';
@@ -5017,6 +5017,265 @@ function CwSearchInput(optionsProps) {
     return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, id: id, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { className: dropdownStyles.option, onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
 }
 
+/**
+ * Generic API-backed search input. Fetches matching options from a caller-supplied `onSearch`
+ * callback as the user types (debounced), renders them in a portal-based dropdown with keyboard
+ * navigation, and commits the selected id via `onChange`.
+ *
+ * All domain logic — API URLs, auth/config, display formatting, provider/secondary lookups — lives
+ * in the caller's callbacks, so this component stays application-agnostic. It is the base for thin
+ * wrappers such as `FindAirport` / `FindCrewmember`.
+ *
+ * Improvements over the legacy `CwFindAirport` / `CwFindCrewmember`: an `AbortController` cancels
+ * superseded in-flight requests (fixes out-of-order results), and `minChars` / `debounceMs` are
+ * configurable.
+ *
+ * @example
+ * <CwSearchAsync
+ *   onSearch={(text, signal) => repo.search(text, signal)}
+ *   onChange={(id) => setSelectedId(id)}
+ *   labelProps={{ text: 'Airport' }}
+ *   icon={{ iconId: 'control-tower' }}
+ * />
+ */
+const CwSearchAsync = ({ onSearch, onChange, value, onResolveInitial, onResolveSelection, icon, placeholder = "Search…", minChars = 2, debounceMs = 300, disabled = false, required = false, initialDisplayText, searchTrigger, labelProps, alignProps, width, className = "", }) => {
+    // State
+    const [inputValue, setInputValue] = useState("");
+    const [options, setOptions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isInitialLoading, setIsInitialLoading] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [tooltipText, setTooltipText] = useState("");
+    // Refs
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const debounceRef = useRef();
+    const abortRef = useRef(null);
+    const lastQueryRef = useRef("");
+    const didMountRef = useRef(false);
+    const lastResolvedValueRef = useRef(undefined);
+    const initialResolveAbortRef = useRef(null);
+    // Stable ids wiring the combobox input to its listbox popup for assistive tech.
+    const listboxId = useId();
+    const optionId = (index) => `${listboxId}-opt-${index}`;
+    // Cancel a pending initial-value resolve when the user takes over (typing / clearing / reset),
+    // so a slow resolve can't overwrite newer input and the loading flag never sticks.
+    const cancelInitialResolve = useCallback(() => {
+        initialResolveAbortRef.current?.abort();
+        initialResolveAbortRef.current = null;
+        setIsInitialLoading(false);
+    }, []);
+    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
+        anchorRef: wrapperRef,
+        isOpen: showDropdown && options.length > 0,
+        onClose: () => { setShowDropdown(false); setHighlightedIndex(-1); },
+    });
+    // Core search runner — aborts superseded requests and drops stale responses.
+    const runSearch = useCallback(async (text) => {
+        abortRef.current?.abort();
+        if (text.length < minChars) {
+            setOptions([]);
+            setShowDropdown(false);
+            setHighlightedIndex(-1);
+            return;
+        }
+        const controller = new AbortController();
+        abortRef.current = controller;
+        lastQueryRef.current = text;
+        setIsLoading(true);
+        try {
+            const results = await onSearch(text, controller.signal);
+            if (controller.signal.aborted)
+                return; // superseded → drop
+            setOptions(results);
+            setShowDropdown(results.length > 0); // empty → close silently (dark cockpit)
+            setHighlightedIndex(-1);
+        }
+        catch (error) {
+            if (controller.signal.aborted)
+                return; // aborts reject with AbortError → ignore
+            console.error("CwSearchAsync onSearch failed:", error);
+            setOptions([]);
+            setShowDropdown(false);
+        }
+        finally {
+            if (abortRef.current === controller) {
+                setIsLoading(false);
+                abortRef.current = null;
+            }
+        }
+    }, [minChars, onSearch]);
+    // Keep a stable handle to the latest runSearch for the searchTrigger effect.
+    const runSearchRef = useRef(runSearch);
+    useEffect(() => { runSearchRef.current = runSearch; });
+    const debouncedSearch = useCallback((text) => {
+        if (debounceRef.current)
+            window.clearTimeout(debounceRef.current);
+        // Abort eagerly on every keystroke so a fast typist never has two live fetches.
+        abortRef.current?.abort();
+        debounceRef.current = window.setTimeout(() => runSearch(text), debounceMs);
+    }, [runSearch, debounceMs]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (newValue !== inputValue) {
+            cancelInitialResolve();
+            debouncedSearch(newValue);
+        }
+    };
+    const handleOptionSelect = async (optionId) => {
+        const picked = options.find(o => o.id === optionId);
+        if (!picked)
+            return;
+        setShowDropdown(false);
+        let committed = picked;
+        if (onResolveSelection) {
+            abortRef.current?.abort();
+            const controller = new AbortController();
+            abortRef.current = controller;
+            try {
+                const resolved = await onResolveSelection(picked, controller.signal);
+                if (controller.signal.aborted)
+                    return;
+                committed = resolved;
+                setOptions([resolved]);
+            }
+            catch (error) {
+                if (controller.signal.aborted)
+                    return;
+                console.error("CwSearchAsync onResolveSelection failed:", error);
+                return; // abort the commit, mirroring the legacy provider-airport behaviour
+            }
+            finally {
+                if (abortRef.current === controller)
+                    abortRef.current = null;
+            }
+        }
+        setInputValue(committed.inputLabel ?? committed.label);
+        setTooltipText(committed.label);
+        onChange(committed.id);
+    };
+    const handleKeyDown = (e) => {
+        if (!showDropdown || options.length === 0)
+            return;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                setHighlightedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+                    handleOptionSelect(options[highlightedIndex].id);
+                }
+                break;
+            case "Escape":
+                setShowDropdown(false);
+                setHighlightedIndex(-1);
+                break;
+        }
+    };
+    const handleInputFocus = () => {
+        if (options.length > 0)
+            setShowDropdown(true);
+    };
+    const handleClear = () => {
+        if (debounceRef.current)
+            window.clearTimeout(debounceRef.current);
+        abortRef.current?.abort();
+        cancelInitialResolve();
+        setInputValue("");
+        setTooltipText("");
+        setOptions([]);
+        setShowDropdown(false);
+        lastQueryRef.current = "";
+        onChange(null);
+        inputRef.current?.focus();
+    };
+    // Resolve a preselected value to display text.
+    useEffect(() => {
+        if (value == null)
+            return;
+        if (initialDisplayText) {
+            setInputValue(initialDisplayText);
+            setTooltipText(initialDisplayText);
+            lastResolvedValueRef.current = value;
+            return;
+        }
+        if (!onResolveInitial)
+            return;
+        if (lastResolvedValueRef.current === value)
+            return; // already resolved this value
+        const controller = new AbortController();
+        initialResolveAbortRef.current = controller;
+        setIsInitialLoading(true);
+        onResolveInitial(value, controller.signal)
+            .then(opt => {
+            if (controller.signal.aborted)
+                return;
+            lastResolvedValueRef.current = value; // mark resolved only on success
+            setOptions([opt]);
+            setInputValue(opt.inputLabel ?? opt.label);
+            setTooltipText(opt.label);
+        })
+            .catch(error => {
+            if (!controller.signal.aborted)
+                console.error("CwSearchAsync onResolveInitial failed:", error);
+        })
+            .finally(() => {
+            // Clear the spinner only if this resolve is still the current one (not superseded/cancelled).
+            if (initialResolveAbortRef.current === controller) {
+                setIsInitialLoading(false);
+                initialResolveAbortRef.current = null;
+            }
+        });
+        return () => controller.abort();
+    }, [value, initialDisplayText, onResolveInitial]);
+    // Reset when the controlled value is cleared by the parent.
+    useEffect(() => {
+        if (value == null) {
+            if (debounceRef.current)
+                window.clearTimeout(debounceRef.current);
+            abortRef.current?.abort();
+            cancelInitialResolve();
+            setInputValue("");
+            setTooltipText("");
+            setOptions([]);
+            setShowDropdown(false);
+            setHighlightedIndex(-1);
+            lastQueryRef.current = "";
+            lastResolvedValueRef.current = undefined;
+        }
+    }, [value, cancelInitialResolve]);
+    // Re-run the last query when searchTrigger changes (skip first mount).
+    useEffect(() => {
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+            return;
+        }
+        if (searchTrigger === undefined)
+            return;
+        if (lastQueryRef.current)
+            runSearchRef.current(lastQueryRef.current);
+    }, [searchTrigger]);
+    // Cleanup on unmount.
+    useEffect(() => () => {
+        if (debounceRef.current)
+            window.clearTimeout(debounceRef.current);
+        abortRef.current?.abort();
+    }, []);
+    const direction = alignProps?.flexDirection || "row";
+    return (jsxs("div", { className: `cw-search-input ${className}`, style: {
+            ...(width ? { width } : {}),
+            ...(labelProps?.labelWidth ? { "--label-width": labelProps.labelWidth } : {}),
+        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeholder, disabled: disabled, required: required, autoComplete: "off", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": showDropdown, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? optionId(highlightedIndex) : undefined, title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selection", variant: "icon", icon: "close", color: "neutral" })) : (icon ? jsx(CwIcon, { ...icon }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, id: listboxId, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { id: optionId(index), className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.id), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.subLabel ? (jsxs("span", { className: "cw-search-async-option-lines", children: [jsx("span", { children: option.label }), jsx("span", { className: "cw-search-async-option-sub", children: option.subLabel })] })) : (option.label) }, option.id))) }) }))] }));
+};
+
 var styles$5 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
 
 const ARROW_SIZE = 8;
@@ -6233,7 +6492,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) {
@@ -6261,15 +6523,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 === "") {
@@ -6983,9 +7248,10 @@ function formatPlainDate(pd, fmt) {
         .replace("dd", String(pd.day).padStart(2, "0"));
 }
 
-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, todayLabel = "Today", feedback, }) {
+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 = enGB, todayLabel = "Today", yearRangeStart, yearRangeEnd, feedback, }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [inputValue, setInputValue] = useState();
+    // Initialize with the formatted value so the input is controlled from the first render
+    const [inputValue, setInputValue] = useState(() => value ? formatPlainDate(value, displayFormat) : "");
     const containerRef = useRef(null);
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
@@ -7072,6 +7338,19 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
             setIsOpen(false);
         }
     }, [minDate, maxDate, onChange]);
+    // Derive start/end months for the year dropdown range, guarding against inverted yearRange props
+    const dropdownStartMonth = useMemo(() => {
+        const inferredStart = minDate ? minDate.year : Temporal.Now.plainDateISO().year - 10;
+        const inferredEnd = yearRangeEnd ?? (maxDate ? maxDate.year : Temporal.Now.plainDateISO().year + 5);
+        const year = Math.min(yearRangeStart ?? inferredStart, inferredEnd);
+        return new Date(year, 0, 1);
+    }, [yearRangeStart, yearRangeEnd, minDate, maxDate]);
+    const dropdownEndMonth = useMemo(() => {
+        const inferredEnd = maxDate ? maxDate.year : Temporal.Now.plainDateISO().year + 5;
+        const inferredStart = yearRangeStart ?? (minDate ? minDate.year : Temporal.Now.plainDateISO().year - 10);
+        const year = Math.max(yearRangeEnd ?? inferredEnd, inferredStart);
+        return new Date(year, 11, 31);
+    }, [yearRangeStart, yearRangeEnd, minDate, maxDate]);
     // Memoize disabled days (convert PlainDate[] to Date[] for DayPicker)
     const disabledDays = useMemo(() => [
         ...(disabledDates?.map(plainDateToJsDate) || []),
@@ -7083,13 +7362,755 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
     const defaultMonthJsDate = defaultMonth
         ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
         : selectedJsDate;
-    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
+    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
                                             today: new Date(),
                                         }, modifiersClassNames: {
                                             today: "rdp-day-today",
                                         } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (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 = 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] = useState(() => DateTimePickerState.fromValue(value, constraints));
+    // Track the previous value prop to detect external changes.
+    const prevValueRef = useRef(value);
+    useEffect(() => {
+        if (!plainDateTimesEqual(value, prevValueRef.current)) {
+            prevValueRef.current = value;
+            setState(prev => DateTimePickerState.fromValue(value, prev.constraints));
+        }
+    }, [value]);
+    useEffect(() => {
+        setState(prev => prev.withConstraints(constraints));
+    }, [constraints]);
+    const apply = useCallback((next) => {
+        if (next === state)
+            return; // operation rejected by the domain - no emission
+        setState(next);
+        onChange(next.value);
+    }, [state, onChange]);
+    const selectDate = useCallback((date) => {
+        apply(state.withDate(date));
+    }, [state, apply]);
+    const selectTime = 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 = 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 = enGB, }) {
+    const picker = useCwDateTimePickerTemporal({
+        value,
+        onChange,
+        minDateTime,
+        maxDateTime,
+        minTime,
+        maxTime,
+    });
+    return jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [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 }), 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 && (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.
+const ref = (today) => today ?? Temporal.Now.plainDateISO();
+/** Monday as first day of the week (ISO dayOfWeek: 1 = Mon … 7 = Sun). */
+const startOfWeek = (d) => d.subtract({ days: d.dayOfWeek - 1 });
+const startOfMonth = (d) => d.with({ day: 1 });
+const endOfMonth = (d) => d.with({ day: d.daysInMonth });
+/** First day of the quarter that contains `d`. */
+const startOfQuarter = (d) => Temporal.PlainDate.from({ year: d.year, month: Math.floor((d.month - 1) / 3) * 3 + 1, day: 1 });
+const PRESET_LIBRARY_TEMPORAL = {
+    // === PAST DAYS ===
+    today: {
+        key: "today",
+        label: "Today",
+        getValue: (t) => { const d = ref(t); return { from: d, to: d }; },
+    },
+    yesterday: {
+        key: "yesterday",
+        label: "Yesterday",
+        getValue: (t) => { const d = ref(t).subtract({ days: 1 }); return { from: d, to: d }; },
+    },
+    past2Days: {
+        key: "past2Days",
+        label: "Past 2 Days",
+        getValue: (t) => { const d = ref(t); return { from: d.subtract({ days: 2 }), to: d }; },
+    },
+    past3Days: {
+        key: "past3Days",
+        label: "Past 3 Days",
+        getValue: (t) => { const d = ref(t); return { from: d.subtract({ days: 3 }), to: d }; },
+    },
+    past7Days: {
+        key: "past7Days",
+        label: "Past 7 days",
+        getValue: (t) => { const d = ref(t); return { from: d.subtract({ days: 7 }), to: d }; },
+    },
+    past14Days: {
+        key: "past14Days",
+        label: "Past 14 days",
+        getValue: (t) => { const d = ref(t); return { from: d.subtract({ days: 14 }), to: d }; },
+    },
+    past30Days: {
+        key: "past30Days",
+        label: "Past 30 days",
+        getValue: (t) => { const d = ref(t); return { from: d.subtract({ days: 30 }), to: d }; },
+    },
+    past90Days: {
+        key: "past90Days",
+        label: "Past 90 days",
+        getValue: (t) => { const d = ref(t); return { from: d.subtract({ days: 90 }), to: d }; },
+    },
+    // === NEXT DAYS ===
+    next7Days: {
+        key: "next7Days",
+        label: "Next 7 days",
+        getValue: (t) => { const d = ref(t); return { from: d, to: d.add({ days: 7 }) }; },
+    },
+    next14Days: {
+        key: "next14Days",
+        label: "Next 14 days",
+        getValue: (t) => { const d = ref(t); return { from: d, to: d.add({ days: 14 }) }; },
+    },
+    next30Days: {
+        key: "next30Days",
+        label: "Next 30 days",
+        getValue: (t) => { const d = ref(t); return { from: d, to: d.add({ days: 30 }) }; },
+    },
+    // === WEEKS (Monday-first) ===
+    thisWeek: {
+        key: "thisWeek",
+        label: "This week",
+        getValue: (t) => { const s = startOfWeek(ref(t)); return { from: s, to: s.add({ days: 6 }) }; },
+    },
+    lastWeek: {
+        key: "lastWeek",
+        label: "Last week",
+        getValue: (t) => { const end = startOfWeek(ref(t)).subtract({ days: 1 }); return { from: end.subtract({ days: 6 }), to: end }; },
+    },
+    nextWeek: {
+        key: "nextWeek",
+        label: "Next week",
+        getValue: (t) => { const s = startOfWeek(ref(t)).add({ days: 7 }); return { from: s, to: s.add({ days: 6 }) }; },
+    },
+    // === MONTHS ===
+    thisMonth: {
+        key: "thisMonth",
+        label: "This month",
+        getValue: (t) => { const d = ref(t); return { from: startOfMonth(d), to: endOfMonth(d) }; },
+    },
+    lastMonth: {
+        key: "lastMonth",
+        label: "Last month",
+        getValue: (t) => { const d = startOfMonth(ref(t)).subtract({ months: 1 }); return { from: d, to: endOfMonth(d) }; },
+    },
+    nextMonth: {
+        key: "nextMonth",
+        label: "Next month",
+        getValue: (t) => { const d = startOfMonth(ref(t)).add({ months: 1 }); return { from: d, to: endOfMonth(d) }; },
+    },
+    // === QUARTERS ===
+    thisQuarter: {
+        key: "thisQuarter",
+        label: "This quarter",
+        getValue: (t) => { const from = startOfQuarter(ref(t)); return { from, to: from.add({ months: 3 }).subtract({ days: 1 }) }; },
+    },
+    lastQuarter: {
+        key: "lastQuarter",
+        label: "Last quarter",
+        getValue: (t) => { const from = startOfQuarter(ref(t)).subtract({ months: 3 }); return { from, to: from.add({ months: 3 }).subtract({ days: 1 }) }; },
+    },
+    nextQuarter: {
+        key: "nextQuarter",
+        label: "Next quarter",
+        getValue: (t) => { const from = startOfQuarter(ref(t)).add({ months: 3 }); return { from, to: from.add({ months: 3 }).subtract({ days: 1 }) }; },
+    },
+    // === YEAR ===
+    thisYear: {
+        key: "thisYear",
+        label: "This year",
+        getValue: (t) => {
+            const y = ref(t).year;
+            return { from: Temporal.PlainDate.from({ year: y, month: 1, day: 1 }), to: Temporal.PlainDate.from({ year: y, month: 12, day: 31 }) };
+        },
+    },
+    lastYear: {
+        key: "lastYear",
+        label: "Last year",
+        getValue: (t) => {
+            const y = ref(t).year - 1;
+            return { from: Temporal.PlainDate.from({ year: y, month: 1, day: 1 }), to: Temporal.PlainDate.from({ year: y, month: 12, day: 31 }) };
+        },
+    },
+};
+/**
+ * Helper to get presets by their keys.
+ * @example getPresetsByKeysTemporal(['thisWeek', 'past7Days', 'past30Days'])
+ */
+const getPresetsByKeysTemporal = (keys) => keys.map((key) => PRESET_LIBRARY_TEMPORAL[key]).filter((preset) => preset !== undefined);
+
+function CwDateRangePickerTemporal({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, maxRangeDays, defaultMonth, labelProps, alignProps, placeholderFrom = "From date", placeholderTo = "To date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 2, locale = enGB, yearRangeStart, yearRangeEnd, showPresets = false, presetKeys, customPresets, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputFromValue, setInputFromValue] = useState("");
+    const [inputToValue, setInputToValue] = useState("");
+    const [rangeErrorMessage, setRangeErrorMessage] = useState(null);
+    const [focusedInput, setFocusedInput] = useState();
+    const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const inputFromRef = useRef(null);
+    const inputToRef = useRef(null);
+    const prevValueRef = useRef(undefined);
+    const prevDisplayFormatRef = useRef(displayFormat);
+    const rangeError = useCallback(() => (maxRangeDays ? `Range cannot exceed ${maxRangeDays} days` : "Invalid date range"), [maxRangeDays]);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setFocusedInput(undefined);
+    }, []);
+    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: handleClose,
+        position: popupPosition,
+    });
+    // Calculate presets to render
+    const presetsToRender = useMemo(() => {
+        let presets = [];
+        if (presetKeys && presetKeys.length > 0) {
+            presets = getPresetsByKeysTemporal(presetKeys);
+        }
+        if (customPresets && customPresets.length > 0) {
+            presets = [...presets, ...customPresets];
+        }
+        return presets;
+    }, [presetKeys, customPresets]);
+    // Validate date range
+    const validateRange = useCallback((from, to) => {
+        if (!from || !to)
+            return true; // Partial ranges are OK during selection
+        if (Temporal.PlainDate.compare(from, to) > 0)
+            return false;
+        if (maxRangeDays) {
+            const daysDiff = from.until(to, { largestUnit: "day" }).days;
+            if (daysDiff > maxRangeDays)
+                return false;
+        }
+        return true;
+    }, [maxRangeDays]);
+    // Sync input values with prop value
+    useEffect(() => {
+        const currentFrom = value?.from?.toString();
+        const currentTo = value?.to?.toString();
+        const prevFrom = prevValueRef.current?.from;
+        const prevTo = prevValueRef.current?.to;
+        if (currentFrom !== prevFrom ||
+            currentTo !== prevTo ||
+            prevDisplayFormatRef.current !== displayFormat) {
+            prevValueRef.current = { from: currentFrom, to: currentTo };
+            prevDisplayFormatRef.current = displayFormat;
+            setInputFromValue(value?.from ? formatPlainDate(value.from, displayFormat) : "");
+            setInputToValue(value?.to ? formatPlainDate(value.to, displayFormat) : "");
+        }
+    }, [value, displayFormat]);
+    const handleRangeSelect = useCallback((range, selectedDay) => {
+        const selected = jsDateToPlainDate(selectedDay);
+        let newRange;
+        if (focusedInput === 'from') {
+            newRange = { from: selected, to: value?.to };
+            if (newRange.to && Temporal.PlainDate.compare(selected, newRange.to) > 0) {
+                newRange.to = undefined;
+                setFocusedInput('to');
+                setRangeErrorMessage(null);
+            }
+            else if (newRange.to) {
+                if (!validateRange(newRange.from, newRange.to)) {
+                    setRangeErrorMessage(rangeError());
+                    return;
+                }
+                setRangeErrorMessage(null);
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else {
+                setFocusedInput('to');
+                setRangeErrorMessage(null);
+            }
+        }
+        else if (focusedInput === 'to') {
+            newRange = { from: value?.from, to: selected };
+            if (newRange.from && Temporal.PlainDate.compare(selected, newRange.from) < 0) {
+                newRange.from = undefined;
+                setFocusedInput('from');
+                setRangeErrorMessage(null);
+            }
+            else if (newRange.from) {
+                if (!validateRange(newRange.from, newRange.to)) {
+                    setRangeErrorMessage(rangeError());
+                    return;
+                }
+                setRangeErrorMessage(null);
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else {
+                setFocusedInput('from');
+                setRangeErrorMessage(null);
+            }
+        }
+        else {
+            if (!range) {
+                onChange(undefined);
+                return;
+            }
+            newRange = {
+                from: range.from ? jsDateToPlainDate(range.from) : undefined,
+                to: range.to ? jsDateToPlainDate(range.to) : undefined,
+            };
+            if (range.from && range.to) {
+                if (!validateRange(newRange.from, newRange.to)) {
+                    setRangeErrorMessage(rangeError());
+                    return;
+                }
+                setRangeErrorMessage(null);
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else if (range.from) {
+                setFocusedInput('to');
+                setRangeErrorMessage(null);
+            }
+            else {
+                setFocusedInput('from');
+                setRangeErrorMessage(null);
+            }
+        }
+        onChange(newRange);
+    }, [onChange, validateRange, value, focusedInput, rangeError]);
+    const handleClearFrom = useCallback((e) => {
+        e.stopPropagation();
+        onChange({ from: undefined, to: value?.to });
+        setInputFromValue("");
+    }, [onChange, value]);
+    const handleClearTo = useCallback((e) => {
+        e.stopPropagation();
+        onChange({ from: value?.from, to: undefined });
+        setInputToValue("");
+    }, [onChange, value]);
+    const handleInputFromClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+            setFocusedInput('from');
+        }
+    }, [disabled]);
+    const handleInputToClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+            setFocusedInput('to');
+        }
+    }, [disabled]);
+    const handleInputFromChange = useCallback((e) => {
+        const newValue = e.currentTarget.value;
+        setInputFromValue(newValue);
+        const parsed = parseDate(newValue, displayFormat);
+        if (parsed) {
+            if (validate(parsed, minDate, maxDate) && validateRange(parsed, value?.to)) {
+                onChange({ from: parsed, to: value?.to });
+            }
+        }
+        else if (newValue === "") {
+            onChange({ from: undefined, to: value?.to });
+        }
+    }, [displayFormat, minDate, maxDate, validateRange, onChange, value]);
+    const handleInputToChange = useCallback((e) => {
+        const newValue = e.currentTarget.value;
+        setInputToValue(newValue);
+        const parsed = parseDate(newValue, displayFormat);
+        if (parsed) {
+            if (validate(parsed, minDate, maxDate) && validateRange(value?.from, parsed)) {
+                onChange({ from: value?.from, to: parsed });
+            }
+        }
+        else if (newValue === "") {
+            onChange({ from: value?.from, to: undefined });
+        }
+    }, [displayFormat, minDate, maxDate, validateRange, onChange, value]);
+    const handleInputBlur = useCallback((type) => {
+        const inputValue = type === 'from' ? inputFromValue : inputToValue;
+        const currentValue = type === 'from' ? value?.from : value?.to;
+        const trimmed = inputValue?.trim();
+        if (trimmed) {
+            const parsed = parseDate(trimmed, displayFormat);
+            if (parsed && validate(parsed, minDate, maxDate)) {
+                const newRange = type === 'from'
+                    ? { from: parsed, to: value?.to }
+                    : { from: value?.from, to: parsed };
+                if (validateRange(newRange.from, newRange.to)) {
+                    onChange(newRange);
+                    if (type === 'from') {
+                        setInputFromValue(formatPlainDate(parsed, displayFormat));
+                    }
+                    else {
+                        setInputToValue(formatPlainDate(parsed, displayFormat));
+                    }
+                    return;
+                }
+            }
+        }
+        // Reset to current value if invalid
+        if (type === 'from') {
+            setInputFromValue(currentValue ? formatPlainDate(currentValue, displayFormat) : "");
+        }
+        else {
+            setInputToValue(currentValue ? formatPlainDate(currentValue, displayFormat) : "");
+        }
+    }, [inputFromValue, inputToValue, value, displayFormat, minDate, maxDate, validateRange, onChange]);
+    const handleInputKeyDown = useCallback((e, type) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (type === 'from') {
+                inputFromRef.current?.blur();
+                inputToRef.current?.focus();
+            }
+            else {
+                inputToRef.current?.blur();
+                setIsOpen(false);
+            }
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            if (type === 'from') {
+                inputFromRef.current?.blur();
+            }
+            else {
+                inputToRef.current?.blur();
+            }
+        }
+    }, []);
+    // Handle preset click
+    const handlePresetClick = useCallback((preset, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const nextRange = preset.getValue();
+        if (!validate(nextRange.from, minDate, maxDate) ||
+            !validate(nextRange.to, minDate, maxDate) ||
+            !validateRange(nextRange.from, nextRange.to)) {
+            setRangeErrorMessage(rangeError());
+            return;
+        }
+        setRangeErrorMessage(null);
+        onChange(nextRange);
+        setIsOpen(false);
+    }, [maxDate, minDate, onChange, rangeError, validateRange]);
+    // Derive start/end months for the year dropdown range, guarding against inverted yearRange props
+    const dropdownStartMonth = useMemo(() => {
+        const inferredStart = minDate ? minDate.year : Temporal.Now.plainDateISO().year - 10;
+        const inferredEnd = yearRangeEnd ?? (maxDate ? maxDate.year : Temporal.Now.plainDateISO().year + 5);
+        const year = Math.min(yearRangeStart ?? inferredStart, inferredEnd);
+        return new Date(year, 0, 1);
+    }, [yearRangeStart, yearRangeEnd, minDate, maxDate]);
+    const dropdownEndMonth = useMemo(() => {
+        const inferredEnd = maxDate ? maxDate.year : Temporal.Now.plainDateISO().year + 5;
+        const inferredStart = yearRangeStart ?? (minDate ? minDate.year : Temporal.Now.plainDateISO().year - 10);
+        const year = Math.max(yearRangeEnd ?? inferredEnd, inferredStart);
+        return new Date(year, 11, 31);
+    }, [yearRangeStart, yearRangeEnd, minDate, maxDate]);
+    // Memoize disabled days (convert Temporal → Date for DayPicker)
+    const disabledDays = useMemo(() => {
+        const baseDisabled = [
+            ...(disabledDates?.map(plainDateToJsDate) || []),
+            ...(minDate ? [{ before: plainDateToJsDate(minDate) }] : []),
+            ...(maxDate ? [{ after: plainDateToJsDate(maxDate) }] : []),
+            ...(disabledMatcher ? [disabledMatcher] : []),
+        ];
+        // If maxRangeDays is set and we have a "from" date, disable dates beyond the range
+        if (maxRangeDays) {
+            if (value?.from) {
+                const maxAllowedDate = value.from.add({ days: maxRangeDays });
+                if (focusedInput !== 'from') {
+                    baseDisabled.push({ after: plainDateToJsDate(maxAllowedDate) });
+                }
+                if (focusedInput === 'to' && !value?.to) {
+                    const minAllowedDate = value.from.subtract({ days: maxRangeDays });
+                    baseDisabled.push({ before: plainDateToJsDate(minAllowedDate) });
+                }
+            }
+            if (value?.to && !value?.from && focusedInput === 'from') {
+                const minAllowedDate = value.to.subtract({ days: maxRangeDays });
+                baseDisabled.push({ before: plainDateToJsDate(minAllowedDate) });
+            }
+        }
+        return baseDisabled;
+    }, [disabledDates, minDate, maxDate, disabledMatcher, maxRangeDays, value, focusedInput]);
+    const selectedRange = useMemo(() => {
+        if (value?.from || value?.to) {
+            return {
+                from: value?.from ? plainDateToJsDate(value.from) : undefined,
+                to: value?.to ? plainDateToJsDate(value.to) : undefined,
+            };
+        }
+        return undefined;
+    }, [value]);
+    const defaultMonthJsDate = defaultMonth
+        ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
+        : (value?.from ? plainDateToJsDate(value.from) : undefined);
+    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonthJsDate, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } })] }), jsx("div", { role: "alert", "aria-live": "polite", className: rangeStyles.rangeError, children: rangeErrorMessage })] }))] })] }) }));
+}
+
 const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent, }) => {
     const onClickContextMenu = useCallback((key, resource) => {
         if (onClickResourceContextMenu) {
@@ -10025,4 +11046,4 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
         }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };