@dynatrace/strato-components 3.3.3 → 3.4.1

package/esm/forms/date-time-range-picker/hooks/useDateTimeInput.js

@@ -27,7 +27,10 @@ import {
   captureUndoSnapshot,
   normalizeISOInput,
   parseDateOnlyToISO,
-  parseTimeOnlyToISO
+  parseTimeOnlyToISO,
+  partialDateTimeToISO,
+  tryParsePartialDate,
+  tryParsePartialTime
 } from "../helpers.js";
 function isNumberSpinButton(handler) {
   return handler?.type === "number";
@@ -57,6 +60,22 @@ const insertTextAtCursor = (text) => {
     selection.addRange(range);
   }
 };
+const hasAnyEmptySpinButton = (handlersRef) => Array.from(handlersRef.current?.entries() ?? []).some(
+  ([type, handler]) => handler && type !== "literal" && handler.element.current?.textContent === ""
+);
+const pasteIntoExpressionInput = (element, text) => {
+  if (element.current) {
+    const selection = window.getSelection();
+    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+    if (range && element.current.contains(range.startContainer) && element.current.contains(range.endContainer)) {
+      insertTextAtCursor(text);
+    } else {
+      element.current.textContent = text;
+      moveCursorToEnd(element.current);
+    }
+    element.current.dispatchEvent(new InputEvent("input", { bubbles: true }));
+  }
+};
 const moveCursorToEnd = (element) => {
   if (element) {
     const range = document.createRange();
@@ -89,6 +108,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
   const isControlled = props.value !== void 0;
   const [valueType, setValueType] = useState(value?.type ?? "expression");
   const firstRun = useRef(true);
+  const prevValueRef = useRef(void 0);
   const [expressionEmpty, setExpressionEmpty] = useState(
     !expressionInputRef.current?.textContent
   );
@@ -102,10 +122,12 @@ const useDateTimeInput = (props, expressionInputRef) => {
   const lastValidAbsoluteDateRef = useRef(
     value?.type === "iso8601" && value.absoluteDate ? value.absoluteDate : null
   );
+  const isSwitchingToExpressionRef = useRef(false);
   if (valueType === "iso8601" && value?.type === "iso8601" && value.absoluteDate) {
     lastValidAbsoluteDateRef.current = value.absoluteDate;
   }
   const spinButtonValue = valueType === "iso8601" ? lastValidAbsoluteDateRef.current : null;
+  const pendingFocusPartsRef = useRef(null);
   const {
     spinButtons,
     handlers: spinButtonHandlers,
@@ -124,12 +146,15 @@ const useDateTimeInput = (props, expressionInputRef) => {
       if (newValue === void 0) {
         return;
       }
-      if (valueType !== "iso8601") {
-        setValueType("iso8601");
+      if (isSwitchingToExpressionRef.current) {
+        return;
       }
       if (expressionInputRef.current) {
         expressionInputRef.current.textContent = "";
       }
+      if (valueType !== "iso8601") {
+        setValueType("iso8601");
+      }
       if (newIsoDateTime === "" || newValue?.absoluteDate === "") {
         onChange?.(newValue);
         return;
@@ -154,13 +179,18 @@ const useDateTimeInput = (props, expressionInputRef) => {
     },
     [setValue]
   );
+  const prevAbsoluteDateRef = useRef(null);
   useEffect(() => {
+    const prevValue = prevValueRef.current;
+    prevValueRef.current = value;
     if (value?.type === "iso8601" && !spinButtonsEmpty) {
       setInputValue(value.value);
     }
     if (!isControlled || typeof value === "string") {
       return;
     }
+    const prevAbsoluteDate = prevAbsoluteDateRef.current;
+    prevAbsoluteDateRef.current = value?.absoluteDate ?? null;
     if (!value) {
       setValueType("expression");
       formatExpressionValue(null);
@@ -176,10 +206,47 @@ const useDateTimeInput = (props, expressionInputRef) => {
     setValueType(value.type);
     setInputValue(value.value);
     if (value.type === "expression") {
-      formatExpressionValue(value);
+      if (!isEqualTimeValue(prevValue ?? null, value)) {
+        formatExpressionValue(value);
+      }
       setExpressionEmpty(value.value === "");
+    } else if (value.type === "iso8601" && hasAnyEmptySpinButton(spinButtonHandlersRef) && prevAbsoluteDate !== value.absoluteDate) {
+      applyDateTime(value.absoluteDate);
     }
   }, [value]);
+  const spinButtonHandlersRef = useRef(spinButtonHandlers);
+  spinButtonHandlersRef.current = spinButtonHandlers;
+  const focusFirstUnfilledSpinButton = useCallback(
+    (filledParts) => {
+      const handlers = spinButtonHandlersRef.current;
+      for (const [type2, handler] of handlers) {
+        if (handler && type2 !== "literal" && !filledParts.has(
+          type2
+        ) && handler.element.current?.textContent === "") {
+          handler.element.current?.focus();
+          return;
+        }
+      }
+      let lastHandler = null;
+      for (const [, handler] of handlers) {
+        if (handler) {
+          lastHandler = handler;
+        }
+      }
+      lastHandler?.element?.current?.focus();
+    },
+    []
+  );
+  useEffect(() => {
+    const filledParts = pendingFocusPartsRef.current;
+    if (!filledParts || valueType !== "iso8601") {
+      return;
+    }
+    pendingFocusPartsRef.current = null;
+    requestAnimationFrame(() => {
+      focusFirstUnfilledSpinButton(filledParts);
+    });
+  }, [valueType, focusFirstUnfilledSpinButton]);
   const { selectAll: expressionInputSelectAll } = useSelection(expressionInputRef);
   const formatExpressionValue = useCallback(
     (value2) => {
@@ -227,6 +294,46 @@ const useDateTimeInput = (props, expressionInputRef) => {
       });
       return;
     }
+    if (type !== "date") {
+      const colonMatch = /^(\d{1,2}):$/.exec(input);
+      if (colonMatch) {
+        const hour = Number.parseInt(colonMatch[1]);
+        if (hour <= 23) {
+          const now = TZDateMini.tz(getTimezone());
+          const iso = TZDateMini.tz(
+            getTimezone(),
+            now.getFullYear(),
+            now.getMonth(),
+            now.getDate(),
+            hour,
+            0,
+            0,
+            0
+          ).toISOString();
+          const partsToUpdate = /* @__PURE__ */ new Set(["day", "month", "year", "hour"]);
+          setValueType("iso8601");
+          expressionInputRef.current.textContent = "";
+          applyDateTime(iso, partsToUpdate);
+          requestAnimationFrame(() => {
+            focusFirstUnfilledSpinButton(partsToUpdate);
+          });
+          return;
+        }
+      }
+    }
+    const typedPartialDate = tryParsePartialDate(input);
+    if (typedPartialDate) {
+      const dateResult = partialDateTimeToISO(typedPartialDate, null);
+      if (dateResult) {
+        setValueType("iso8601");
+        expressionInputRef.current.textContent = "";
+        applyDateTime(dateResult.iso, dateResult.partsToUpdate);
+        requestAnimationFrame(
+          () => focusFirstUnfilledSpinButton(dateResult.partsToUpdate ?? /* @__PURE__ */ new Set())
+        );
+        return;
+      }
+    }
     const newValue = getTimeValue(input, precision) ?? null;
     if (newValue?.absoluteDate === "") {
       onChange?.(newValue);
@@ -240,8 +347,10 @@ const useDateTimeInput = (props, expressionInputRef) => {
     regexDateTimeStart,
     maxValue,
     precision,
+    type,
     setValue,
     applyDateTime,
+    focusFirstUnfilledSpinButton,
     types,
     spinButtonHandlers,
     onChange
@@ -251,7 +360,9 @@ const useDateTimeInput = (props, expressionInputRef) => {
       const selection = window.getSelection();
       const selectionSpansMultipleNodes = selection !== null && selection.anchorNode !== selection.focusNode && selection.toString().length > 0;
       const isRestoringSelection = event.target.closest(".strato-inputgroup")?.hasAttribute("data-restoring-selection") ?? false;
-      if (selectionSpansMultipleNodes || isRestoringSelection) {
+      const expressionInputEl = event.target;
+      const hasPartialSelectionWithin = selection !== null && !selection.isCollapsed && expressionInputEl.contains(selection.anchorNode) && expressionInputEl.contains(selection.focusNode);
+      if (selectionSpansMultipleNodes || isRestoringSelection || hasPartialSelectionWithin) {
         return;
       }
       expressionInputSelectAll();
@@ -279,15 +390,22 @@ const useDateTimeInput = (props, expressionInputRef) => {
         event.preventDefault();
         return;
       }
-      const trimmedData = normalizeISOInput(data.trim());
+      let trimmedData = normalizeISOInput(data.trim());
       if (!trimmedData) {
         event.preventDefault();
         return;
       }
+      const partialDate = tryParsePartialDate(trimmedData);
+      const partialTime = tryParsePartialTime(trimmedData);
+      const partialResult = partialDate || partialTime ? partialDateTimeToISO(partialDate, partialTime) : null;
+      if (partialResult && !partialResult.partsToUpdate) {
+        trimmedData = partialResult.iso;
+      }
       const snapshot = captureUndoSnapshot(
         spinButtonHandlers,
         expressionInputRef.current,
-        value
+        value,
+        valueType
       );
       pasteUndoRef.current = {
         snapshot,
@@ -298,11 +416,16 @@ const useDateTimeInput = (props, expressionInputRef) => {
       const date = dateOnly ?? timeOnly;
       if (date) {
         setValueType("iso8601");
-        applyDateTime(
-          date,
-          spinButtonsEmpty ? void 0 : dateOnly ? DATE_PART_TYPES : TIME_PART_TYPES
-        );
-        onPasteComplete?.();
+        let partsFilter;
+        if (!spinButtonsEmpty) {
+          partsFilter = dateOnly ? DATE_PART_TYPES : TIME_PART_TYPES;
+        }
+        applyDateTime(date, partsFilter);
+        if (partsFilter && hasAnyEmptySpinButton(spinButtonHandlersRef)) {
+          focusFirstUnfilledSpinButton(partsFilter);
+        } else {
+          onPasteComplete?.();
+        }
         event.preventDefault();
         return;
       }
@@ -327,24 +450,34 @@ const useDateTimeInput = (props, expressionInputRef) => {
       if (valueType === "iso8601" && /^\d+$/.test(trimmedData)) {
         return;
       }
+      if (partialResult?.partsToUpdate) {
+        const { iso, partsToUpdate } = partialResult;
+        setValueType("iso8601");
+        applyDateTime(iso, partsToUpdate);
+        if (hasAnyEmptySpinButton(spinButtonHandlersRef)) {
+          requestAnimationFrame(() => {
+            focusFirstUnfilledSpinButton(partsToUpdate);
+          });
+        } else {
+          onPasteComplete?.();
+        }
+        event.preventDefault();
+        return;
+      }
       if (valueType === "expression") {
         if (expressionInputRef.current) {
-          insertTextAtCursor(trimmedData);
+          pasteIntoExpressionInput(expressionInputRef, trimmedData);
+        }
+      } else {
+        setValueType("expression");
+        if (expressionInputRef.current) {
+          expressionInputRef.current.textContent = trimmedData;
+          expressionInputRef.current.focus();
+          moveCursorToEnd(expressionInputRef.current);
           expressionInputRef.current.dispatchEvent(
             new InputEvent("input", { bubbles: true })
           );
         }
-        event.preventDefault();
-        return;
-      }
-      setValueType("expression");
-      if (expressionInputRef.current) {
-        expressionInputRef.current.textContent = trimmedData;
-        expressionInputRef.current.focus();
-        moveCursorToEnd(expressionInputRef.current);
-        expressionInputRef.current.dispatchEvent(
-          new InputEvent("input", { bubbles: true })
-        );
       }
       event.preventDefault();
     },
@@ -360,7 +493,8 @@ const useDateTimeInput = (props, expressionInputRef) => {
       onPasteComplete,
       formatExpressionValue,
       applyDateTime,
-      spinButtonsEmpty
+      spinButtonsEmpty,
+      focusFirstUnfilledSpinButton
     ]
   );
   const onPasteUndoKeyDown = useCallback(
@@ -421,6 +555,11 @@ const useDateTimeInput = (props, expressionInputRef) => {
         event.preventDefault();
         return;
       }
+      if (onTrailingEdge && event.key === "Delete" && (expressionInputRef.current?.textContent ?? "") === "") {
+        onTrailingEdge?.();
+        event.preventDefault();
+        return;
+      }
       if (event.key === "ArrowLeft" && onLeadingEdge) {
         const selection = window.getSelection();
         if (selection?.anchorOffset === 0 && selection?.focusOffset === 0) {
@@ -472,44 +611,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
     },
     [onLeadingEdge, expressionInputRef, disabled, readOnly, onTrailingEdge]
   );
-  const switchToExpression = useCallback(
-    (initialChar, focus2) => {
-      if (valueType === "expression") {
-        return;
-      }
-      applyDateTime(null);
-      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));
-      resetToExpressionMode(!initialChar);
-      if (initialChar) {
-        setInputValue(initialChar);
-      }
-      requestAnimationFrame(() => {
-        const element = expressionInputRef.current;
-        if (!element) {
-          return;
-        }
-        element.textContent = initialChar ?? "";
-        if (focus2) {
-          element.focus();
-          if (initialChar) {
-            const range = document.createRange();
-            const selection = window.getSelection();
-            range.selectNodeContents(element);
-            range.collapse(false);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-          }
-        }
-      });
-    },
-    [
-      valueType,
-      applyDateTime,
-      spinButtonHandlers,
-      resetToExpressionMode,
-      expressionInputRef
-    ]
-  );
   const focus = useCallback(() => {
     switch (valueType) {
       case "expression":
@@ -520,6 +621,31 @@ const useDateTimeInput = (props, expressionInputRef) => {
         break;
     }
   }, [valueType, firstSpinButtonHandler]);
+  const switchToExpressionMode = useCallback(
+    (text) => {
+      const newValue = text !== "" ? getTimeValue(text) ?? null : null;
+      setInputValue(text);
+      if (valueType === "expression") {
+        setValue(newValue);
+        setExpressionEmpty(text === "");
+        if (expressionInputRef.current) {
+          expressionInputRef.current.textContent = text;
+        }
+        return;
+      }
+      setValueType("expression");
+      isSwitchingToExpressionRef.current = true;
+      requestAnimationFrame(() => {
+        setValue(newValue);
+        setExpressionEmpty(text === "");
+        if (expressionInputRef.current) {
+          expressionInputRef.current.textContent = text;
+        }
+        isSwitchingToExpressionRef.current = false;
+      });
+    },
+    [expressionInputRef, setValue, valueType]
+  );
   useEffect(() => {
     if (isControlled || value?.type !== "expression") {
       return;
@@ -564,7 +690,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
     onPaste,
     onPasteUndoKeyDown,
     focus,
-    switchToExpression,
+    switchToExpressionMode,
     setInputValue
   };
 };

package/esm/forms/date-time-range-picker/hooks/useDateTimeInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeInput.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  ClipboardEventHandler,\n  FocusEventHandler,\n  FocusEvent as ReactFocusEvent,\n  FormEventHandler as ReactFormEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n} from 'react';\n\nimport {\n  _parseTimeExpression,\n  parseTimeAsTimeValue,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { spinExpressionValue } from './useExpressionSpin.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { isEqualTimeValue } from '../../../core/time/helpers.js';\nimport { useDateTimePickerStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  formatTimeValue,\n  getTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport {\n  captureUndoSnapshot,\n  normalizeISOInput,\n  parseDateOnlyToISO,\n  parseTimeOnlyToISO,\n} from '../helpers.js';\nimport type { DateTimeInputProps, UndoSnapshot } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler?.type === 'number';\n}\n\nconst DATE_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'day',\n  'month',\n  'year',\n]);\nconst TIME_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'hour',\n  'minute',\n  'second',\n  'fractionalSecond',\n  'dayPeriod',\n]);\n\n/**\n * Inserts plain text at the current cursor position, replacing any active selection.\n */\nconst insertTextAtCursor = (text: string) => {\n  const selection = window.getSelection();\n  if (selection?.rangeCount) {\n    const range = selection.getRangeAt(0);\n    range.deleteContents();\n    const textNode = document.createTextNode(text);\n    range.insertNode(textNode);\n    range.setStartAfter(textNode);\n    range.collapse(true);\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n};\n\n/**\n * Moves the cursor (selection) to the end of the given element's content.\n */\nconst moveCursorToEnd = (element: HTMLSpanElement | null | undefined) => {\n  if (element) {\n    const range = document.createRange();\n    const selection = window.getSelection();\n    range.selectNodeContents(element);\n    range.collapse(false);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n  }\n};\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    disabled,\n    readOnly,\n    type,\n    onChange,\n    onLeadingEdge,\n    onTrailingEdge,\n    dateOnlyPasteAnchor = 'startOfDay',\n    onPasteComplete,\n  }: DateTimeInputProps = props;\n  const precision = useDateTimePickerStore((state) =>\n    state.precision !== 'day' ? state.precision : 'milliseconds',\n  );\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n  const pasteUndoRef = useRef<{\n    snapshot: UndoSnapshot;\n    focusTarget: Element | null;\n  } | null>(null);\n\n  useEffect(() => {\n    return () => {\n      pasteUndoRef.current = null;\n    };\n  }, []);\n\n  // Tracks the last valid absoluteDate to pass a stable, parseable ISO string\n  // to useDateTimePicker while props.value temporarily has absoluteDate:'' during\n  // partial spinbutton editing. Keeps useDateTimePicker.value prop unchanged so\n  // its internal useEffect doesn't re-run and clear the spinbuttons.\n  const lastValidAbsoluteDateRef = useRef<string | null>(\n    value?.type === 'iso8601' && value.absoluteDate ? value.absoluteDate : null,\n  );\n\n  // Use valueType (local state) not value.type (controlled prop) as the gate \u2014\n  // the controlled prop can temporarily become type:'expression' when the store\n  // echoes back a partial invalid value for validation while we're still in\n  // spinbutton mode.\n  if (\n    valueType === 'iso8601' &&\n    value?.type === 'iso8601' &&\n    value.absoluteDate\n  ) {\n    lastValidAbsoluteDateRef.current = value.absoluteDate;\n  }\n  const spinButtonValue =\n    valueType === 'iso8601' ? lastValidAbsoluteDateRef.current : null;\n\n  const {\n    spinButtons,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value: spinButtonValue,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined, precision);\n\n      if (newValue === undefined) {\n        return;\n      }\n\n      // Clear expression input\n      if (valueType !== 'iso8601') {\n        setValueType('iso8601');\n      }\n      if (expressionInputRef.current) {\n        expressionInputRef.current.textContent = '';\n      }\n\n      // Forward invalid values (empty string or unparseable partial locale string)\n      // to onChange so the store validates and shows errors, but skip setValue so\n      // props.value stays stable and spinbuttons are not cleared.\n      if (newIsoDateTime === '' || newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n        return;\n      }\n\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // Shared state reset when switching (back) to expression mode.\n  const resetToExpressionMode = useCallback(\n    (expressionEmpty = true) => {\n      setValueType('expression');\n      setValue(null);\n      setInputValue('');\n      setExpressionEmpty(expressionEmpty);\n      lastValidAbsoluteDateRef.current = null;\n    },\n    [setValue],\n  );\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      setInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      formatExpressionValue(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      lastValidAbsoluteDateRef.current = null;\n      return;\n    }\n\n    // Skip values with empty absoluteDate \u2014 partial/invalid intermediate states\n    // forwarded to the store for validation only. The spinbuttons manage their\n    // own display; reacting here would switch to 'expression' mode and call\n    // formatExpressionValue, clearing the display.\n    if (value.absoluteDate === '') {\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    setValueType(value.type);\n    setInputValue(value.value);\n    if (value.type === 'expression') {\n      formatExpressionValue(value);\n      setExpressionEmpty(value.value === '');\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // called on onBlur to sanitize the current expression\n  const formatExpressionValue = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactFormEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n        lastValidAbsoluteDateRef.current = null;\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = getTimeValue(input, precision) ?? null;\n\n      if (newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      precision,\n      setValue,\n      applyDateTime,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event: ReactFocusEvent<HTMLSpanElement>) => {\n        // If the current selection spans multiple nodes (e.g. a drag-select or\n        // Cmd+A across multiple spin buttons / expression inputs), don't collapse\n        // it to just this expression input.\n        const selection = window.getSelection();\n        const selectionSpansMultipleNodes =\n          selection !== null &&\n          selection.anchorNode !== selection.focusNode &&\n          selection.toString().length > 0;\n\n        // Also skip if we are in the middle of a programmatic focus + setBaseAndExtent\n        // (guarded by data-restoring-selection on the .strato-inputgroup root).\n        const isRestoringSelection =\n          (event.target as HTMLElement)\n            .closest('.strato-inputgroup')\n            ?.hasAttribute('data-restoring-selection') ?? false;\n\n        if (selectionSpansMultipleNodes || isRestoringSelection) {\n          return;\n        }\n\n        expressionInputSelectAll();\n      },\n      [expressionInputSelectAll],\n    );\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      if (readOnly) {\n        return;\n      }\n\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        event.preventDefault();\n        return;\n      }\n\n      const trimmedData = normalizeISOInput(data.trim());\n      if (!trimmedData) {\n        event.preventDefault();\n        return;\n      }\n\n      const snapshot = captureUndoSnapshot(\n        spinButtonHandlers,\n        expressionInputRef.current,\n        value,\n      );\n\n      pasteUndoRef.current = {\n        snapshot,\n        focusTarget: document.activeElement,\n      };\n\n      // 1. Date-only paste (e.g. \"2025-01-01\")\n      // 2. Time-only paste (e.g. \"02:00Z\", \"14:30:00\")\n      const dateOnly = parseDateOnlyToISO(trimmedData, dateOnlyPasteAnchor);\n      const timeOnly = parseTimeOnlyToISO(trimmedData);\n      const date = dateOnly ?? timeOnly;\n\n      if (date) {\n        setValueType('iso8601');\n        // When spinbuttons are empty (expression mode), apply all parts so the\n        // full date is filled in.  When parts are already populated, only\n        // overwrite the date or time group that matches the pasted value.\n        applyDateTime(\n          date,\n          spinButtonsEmpty\n            ? undefined\n            : dateOnly\n            ? DATE_PART_TYPES\n            : TIME_PART_TYPES,\n        );\n        onPasteComplete?.();\n        event.preventDefault();\n        return;\n      }\n\n      // 3. Full ISO datetime or expression (e.g. \"2025-01-01T02:00Z\", \"now()-1h\")\n      const nextValue = parseTimeAsTimeValue(\n        trimmedData,\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          formatExpressionValue(nextValue);\n          moveCursorToEnd(expressionInputRef.current);\n          setValue(nextValue);\n        } else {\n          applyDateTime(nextValue.absoluteDate);\n        }\n        onPasteComplete?.();\n        event.preventDefault();\n        return;\n      }\n\n      // 4. Allow numbers to be pasted into the spin buttons\n      if (valueType === 'iso8601' && /^\\d+$/.test(trimmedData)) {\n        return;\n      }\n\n      // 5. Fallback: switch to expression mode and paste the raw string.\n      if (valueType === 'expression') {\n        if (expressionInputRef.current) {\n          insertTextAtCursor(trimmedData);\n          expressionInputRef.current.dispatchEvent(\n            new InputEvent('input', { bubbles: true }),\n          );\n        }\n        event.preventDefault();\n        return;\n      }\n\n      setValueType('expression');\n\n      if (expressionInputRef.current) {\n        expressionInputRef.current.textContent = trimmedData;\n        expressionInputRef.current.focus();\n        moveCursorToEnd(expressionInputRef.current);\n        expressionInputRef.current.dispatchEvent(\n          new InputEvent('input', { bubbles: true }),\n        );\n      }\n\n      event.preventDefault();\n    },\n    [\n      readOnly,\n      spinButtonHandlers,\n      expressionInputRef,\n      value,\n      dateOnlyPasteAnchor,\n      precision,\n      valueType,\n      setValue,\n      onPasteComplete,\n      formatExpressionValue,\n      applyDateTime,\n      spinButtonsEmpty,\n    ],\n  );\n\n  // Ctrl+Z / Cmd+Z handler to undo a paste operation.\n  const onPasteUndoKeyDown: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (\n          !(event.ctrlKey || event.metaKey) ||\n          event.key !== 'z' ||\n          !pasteUndoRef.current\n        ) {\n          return;\n        }\n\n        const { snapshot, focusTarget } = pasteUndoRef.current;\n        pasteUndoRef.current = null;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Restore value type first so the correct UI mode is rendered.\n        setValueType(snapshot.valueType);\n\n        if (snapshot.valueType === 'iso8601') {\n          // Restore spin button values from the snapshot.\n          snapshot.spinButtonTexts.forEach((text, type) => {\n            const handler = spinButtonHandlers.get(type) ?? null;\n            if (!handler) {\n              return;\n            }\n            if (text === '') {\n              handler.clearValue(true);\n            } else if (handler.type === 'number') {\n              handler.applyText(text, true);\n            } else {\n              handler.searchValue(text[0] ?? '', true);\n            }\n          });\n        } else {\n          // Restore expression text content.\n          if (expressionInputRef.current) {\n            expressionInputRef.current.textContent = snapshot.expressionText;\n          }\n          setExpressionEmpty(snapshot.expressionText === '');\n        }\n\n        setValue(snapshot.value);\n        setInputValue(snapshot.value?.value ?? '');\n\n        // Restore focus after the mode-switch re-render.\n        requestAnimationFrame(() => {\n          if (\n            focusTarget instanceof HTMLElement &&\n            focusTarget !== document.activeElement\n          ) {\n            focusTarget.focus();\n          }\n        });\n      },\n      [\n        spinButtonHandlers,\n        expressionInputRef,\n        setValue,\n        setValueType,\n        setExpressionEmpty,\n        setInputValue,\n      ],\n    );\n\n  // Handle keyboard events on the expression input: prevent Enter and spin on ArrowUp/ArrowDown\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (event.key === 'Enter') {\n          event.preventDefault();\n          return;\n        }\n\n        if (\n          onLeadingEdge &&\n          event.key === 'Backspace' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          onLeadingEdge?.();\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === 'ArrowLeft' && onLeadingEdge) {\n          const selection = window.getSelection();\n          // If cursor is at the start (offset 0), navigate to the previous input\n          if (selection?.anchorOffset === 0 && selection?.focusOffset === 0) {\n            onLeadingEdge?.();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (event.key === 'ArrowRight') {\n          const selection = window.getSelection();\n          const textContent = expressionInputRef.current?.textContent ?? '';\n          // If cursor is at the end, navigate to the next input\n          if (selection?.anchorOffset === textContent.length) {\n            onTrailingEdge?.();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (\n          (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n          !disabled &&\n          !readOnly\n        ) {\n          const element = expressionInputRef.current;\n          if (!element) {\n            return;\n          }\n\n          const currentText = element.textContent ?? '';\n          if (!currentText.trim()) {\n            return;\n          }\n\n          const direction: 1 | -1 = event.key === 'ArrowUp' ? 1 : -1;\n          const newText = spinExpressionValue(currentText, direction);\n\n          if (newText === null) {\n            return;\n          }\n\n          event.preventDefault();\n\n          // Preserve cursor position\n          const selection = window.getSelection();\n          const cursorOffset = selection?.focusOffset ?? 0;\n\n          // Update the text content and fire the input handler\n          element.textContent = newText;\n\n          // Restore cursor position (clamped to new text length)\n          requestAnimationFrame(() => {\n            const textNode = element.firstChild;\n            if (textNode && selection) {\n              const newOffset = Math.min(cursorOffset, newText.length);\n              const range = document.createRange();\n              range.setStart(textNode, newOffset);\n              range.collapse(true);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          });\n\n          // Trigger the input handler to propagate the value change\n          element.dispatchEvent(new Event('input', { bubbles: true }));\n        }\n      },\n      [onLeadingEdge, expressionInputRef, disabled, readOnly, onTrailingEdge],\n    );\n\n  // Programmatically switch from iso8601 (spin buttons) to expression mode.\n  // Optionally seeds the expression input with an initial character.\n  const switchToExpression = useCallback(\n    (initialChar?: string, focus?: boolean) => {\n      if (valueType === 'expression') {\n        return;\n      }\n\n      // Clear spin buttons\n      applyDateTime(null);\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      resetToExpressionMode(!initialChar);\n\n      if (initialChar) {\n        setInputValue(initialChar);\n      }\n\n      // Wait for the expression input to become visible, then seed it.\n      requestAnimationFrame(() => {\n        const element = expressionInputRef.current;\n        if (!element) {\n          return;\n        }\n\n        element.textContent = initialChar ?? '';\n\n        if (focus) {\n          // Focus and place the cursor at the end\n          element.focus();\n          if (initialChar) {\n            const range = document.createRange();\n            const selection = window.getSelection();\n            range.selectNodeContents(element);\n            range.collapse(false);\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }\n        }\n      });\n    },\n    [\n      valueType,\n      applyDateTime,\n      spinButtonHandlers,\n      resetToExpressionMode,\n      expressionInputRef,\n    ],\n  );\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    formatExpressionValue(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      resetToExpressionMode();\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onPaste,\n    onPasteUndoKeyDown,\n    focus,\n    switchToExpression,\n    setInputValue,\n  };\n};\n"],
-  "mappings": "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",
-  "names": ["expressionEmpty", "value", "type", "focus"]
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  ClipboardEventHandler,\n  FocusEventHandler,\n  FocusEvent as ReactFocusEvent,\n  FormEventHandler as ReactFormEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n} from 'react';\n\nimport {\n  _parseTimeExpression,\n  parseTimeAsTimeValue,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { spinExpressionValue } from './useExpressionSpin.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { isEqualTimeValue } from '../../../core/time/helpers.js';\nimport { useDateTimePickerStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  formatTimeValue,\n  getTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport {\n  captureUndoSnapshot,\n  normalizeISOInput,\n  parseDateOnlyToISO,\n  parseTimeOnlyToISO,\n  partialDateTimeToISO,\n  tryParsePartialDate,\n  tryParsePartialTime,\n} from '../helpers.js';\nimport type { DateTimeInputProps, UndoSnapshot } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler?.type === 'number';\n}\n\nconst DATE_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'day',\n  'month',\n  'year',\n]);\nconst TIME_PART_TYPES: Set<Intl.DateTimeFormatPart['type']> = new Set([\n  'hour',\n  'minute',\n  'second',\n  'fractionalSecond',\n  'dayPeriod',\n]);\n\n/**\n * Inserts plain text at the current cursor position, replacing any active selection.\n */\nconst insertTextAtCursor = (text: string) => {\n  const selection = window.getSelection();\n  if (selection?.rangeCount) {\n    const range = selection.getRangeAt(0);\n    range.deleteContents();\n    const textNode = document.createTextNode(text);\n    range.insertNode(textNode);\n    range.setStartAfter(textNode);\n    range.collapse(true);\n    selection.removeAllRanges();\n    selection.addRange(range);\n  }\n};\n\n/**\n * Returns true when at least one non-literal spin button is empty.\n */\nconst hasAnyEmptySpinButton = (\n  handlersRef: RefObject<\n    Map<\n      keyof Intl.DateTimeFormatPartTypesRegistry,\n      SpinButtonHandler | null | undefined\n    >\n  >,\n): boolean =>\n  Array.from(handlersRef.current?.entries() ?? []).some(\n    ([type, handler]) =>\n      handler &&\n      type !== 'literal' &&\n      handler.element.current?.textContent === '',\n  );\n\n/**\n * Pastes text into the expression contenteditable span, either at the cursor\n * position (when the selection is inside the span) or by replacing its content.\n */\nconst pasteIntoExpressionInput = (\n  element: RefObject<HTMLSpanElement | null>,\n  text: string,\n): void => {\n  if (element.current) {\n    const selection = window.getSelection();\n    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;\n\n    if (\n      range &&\n      element.current.contains(range.startContainer) &&\n      element.current.contains(range.endContainer)\n    ) {\n      insertTextAtCursor(text);\n    } else {\n      element.current.textContent = text;\n      moveCursorToEnd(element.current);\n    }\n\n    element.current.dispatchEvent(new InputEvent('input', { bubbles: true }));\n  }\n};\n\n/**\n * Moves the cursor (selection) to the end of the given element's content.\n */\nconst moveCursorToEnd = (element: HTMLSpanElement | null | undefined) => {\n  if (element) {\n    const range = document.createRange();\n    const selection = window.getSelection();\n    range.selectNodeContents(element);\n    range.collapse(false);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n  }\n};\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    disabled,\n    readOnly,\n    type,\n    onChange,\n    onLeadingEdge,\n    onTrailingEdge,\n    dateOnlyPasteAnchor = 'startOfDay',\n    onPasteComplete,\n  }: DateTimeInputProps = props;\n  const precision = useDateTimePickerStore((state) =>\n    state.precision !== 'day' ? state.precision : 'milliseconds',\n  );\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  // Tracks the previous value content so that a parent re-render that passes a\n  // new object reference with the same content does not trigger formatExpressionValue\n  // and reset DOM edits that haven't propagated through React state yet.\n  const prevValueRef = useRef<TimeValue | null | undefined>(undefined);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n  const pasteUndoRef = useRef<{\n    snapshot: UndoSnapshot;\n    focusTarget: Element | null;\n  } | null>(null);\n\n  useEffect(() => {\n    return () => {\n      pasteUndoRef.current = null;\n    };\n  }, []);\n\n  // Tracks the last valid absoluteDate to pass a stable, parseable ISO string\n  // to useDateTimePicker while props.value temporarily has absoluteDate:'' during\n  // partial spinbutton editing. Keeps useDateTimePicker.value prop unchanged so\n  // its internal useEffect doesn't re-run and clear the spinbuttons.\n  const lastValidAbsoluteDateRef = useRef<string | null>(\n    value?.type === 'iso8601' && value.absoluteDate ? value.absoluteDate : null,\n  );\n  // True only during the requestAnimationFrame window opened by switchToExpressionMode.\n  // Used to suppress stale spinbutton onChange callbacks that fire while the mode\n  // transition is in flight, without blocking legitimate restore/undo calls.\n  const isSwitchingToExpressionRef = useRef(false);\n\n  // Use valueType (local state) not value.type (controlled prop) as the gate \u2014\n  // the controlled prop can temporarily become type:'expression' when the store\n  // echoes back a partial invalid value for validation while we're still in\n  // spinbutton mode.\n  if (\n    valueType === 'iso8601' &&\n    value?.type === 'iso8601' &&\n    value.absoluteDate\n  ) {\n    lastValidAbsoluteDateRef.current = value.absoluteDate;\n  }\n  const spinButtonValue =\n    valueType === 'iso8601' ? lastValidAbsoluteDateRef.current : null;\n\n  // Stores the date parts filled in by a partial paste so the focus can target\n  // the first spin button that was not filled.\n  const pendingFocusPartsRef = useRef<Set<\n    keyof Intl.DateTimeFormatPartTypesRegistry\n  > | null>(null);\n\n  const {\n    spinButtons,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value: spinButtonValue,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined, precision);\n\n      if (newValue === undefined) {\n        return;\n      }\n\n      // Suppress stale spinbutton callbacks that fire while switchToExpressionMode\n      // is transitioning. Any other caller (e.g. undo restore) is allowed through.\n      if (isSwitchingToExpressionRef.current) {\n        return;\n      }\n\n      if (expressionInputRef.current) {\n        expressionInputRef.current.textContent = '';\n      }\n\n      // If undo (or another caller) pushes a value while we're in expression mode,\n      // switch back to spinbutton mode now.\n      if (valueType !== 'iso8601') {\n        setValueType('iso8601');\n      }\n\n      // Forward invalid values (empty string or unparseable partial locale string)\n      // to onChange so the store validates and shows errors, but skip setValue so\n      // props.value stays stable and spinbuttons are not cleared.\n      if (newIsoDateTime === '' || newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n        return;\n      }\n\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // Shared state reset when switching (back) to expression mode.\n  const resetToExpressionMode = useCallback(\n    (expressionEmpty = true) => {\n      setValueType('expression');\n      setValue(null);\n      setInputValue('');\n      setExpressionEmpty(expressionEmpty);\n      lastValidAbsoluteDateRef.current = null;\n    },\n    [setValue],\n  );\n\n  // Tracks the last absoluteDate seen by the controlled-value effect.\n  // Used to distinguish a genuine value re-application (absoluteDate changed,\n  // e.g. from '' back to a valid ISO string) from an outdated reference change\n  // (the store re-parsed a sibling field and created a new object with the\n  // same absoluteDate).\n  const prevAbsoluteDateRef = useRef<string | null>(null);\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    const prevValue = prevValueRef.current;\n    prevValueRef.current = value;\n\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      setInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    const prevAbsoluteDate = prevAbsoluteDateRef.current;\n    prevAbsoluteDateRef.current = value?.absoluteDate ?? null;\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      formatExpressionValue(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      lastValidAbsoluteDateRef.current = null;\n      return;\n    }\n\n    // Skip values with empty absoluteDate \u2014 partial/invalid intermediate states\n    // forwarded to the store for validation only. The spinbuttons manage their\n    // own display; reacting here would switch to 'expression' mode and call\n    // formatExpressionValue, clearing the display.\n    if (value.absoluteDate === '') {\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    setValueType(value.type);\n    setInputValue(value.value);\n    if (value.type === 'expression') {\n      // Only reformat the DOM when the expression content has actually changed.\n      // A parent re-render that produces a new object reference with the same\n      // value (e.g. due to a sibling input's state update) must not overwrite\n      // DOM edits (e.g. partial cross-expression deletion) that haven't yet\n      // propagated back through React state.\n      if (!isEqualTimeValue(prevValue ?? null, value)) {\n        formatExpressionValue(value);\n      }\n      setExpressionEmpty(value.value === '');\n    } else if (\n      value.type === 'iso8601' &&\n      hasAnyEmptySpinButton(spinButtonHandlersRef) &&\n      prevAbsoluteDate !== value.absoluteDate\n    ) {\n      applyDateTime(value.absoluteDate);\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // Keep a ref to the latest spinButtonHandlers so that focus helpers\n  // inside requestAnimationFrame always use the current map.\n  const spinButtonHandlersRef = useRef(spinButtonHandlers);\n  spinButtonHandlersRef.current = spinButtonHandlers;\n\n  // Focuses the first spin button that is still empty, or the last spin button when\n  // everything is filled in.\n  const focusFirstUnfilledSpinButton = useCallback(\n    (filledParts: Set<keyof Intl.DateTimeFormatPartTypesRegistry>) => {\n      const handlers = spinButtonHandlersRef.current;\n      for (const [type, handler] of handlers) {\n        if (\n          handler &&\n          type !== 'literal' &&\n          !filledParts.has(\n            type as keyof Intl.DateTimeFormatPartTypesRegistry,\n          ) &&\n          handler.element.current?.textContent === ''\n        ) {\n          handler.element.current?.focus();\n          return;\n        }\n      }\n      // Fallback: focus the last spin button when everything is filled.\n      let lastHandler: SpinButtonHandler | null = null;\n      for (const [, handler] of handlers) {\n        if (handler) {\n          lastHandler = handler;\n        }\n      }\n      lastHandler?.element?.current?.focus();\n    },\n    [],\n  );\n\n  // Focus the first unfilled spin button after a partial paste triggers a mode switch.\n  useEffect(() => {\n    const filledParts = pendingFocusPartsRef.current;\n    if (!filledParts || valueType !== 'iso8601') {\n      return;\n    }\n    pendingFocusPartsRef.current = null;\n\n    requestAnimationFrame(() => {\n      focusFirstUnfilledSpinButton(filledParts);\n    });\n  }, [valueType, focusFirstUnfilledSpinButton]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // called on onBlur to sanitize the current expression\n  const formatExpressionValue = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactFormEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n        lastValidAbsoluteDateRef.current = null;\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // If the user types a number followed by \":\", switch to the datetime picker\n      // with today's date pre-filled and the typed hour applied, then focus the\n      // minute spin button so the user can continue typing the time.\n      if (type !== 'date') {\n        const colonMatch = /^(\\d{1,2}):$/.exec(input);\n        if (colonMatch) {\n          const hour = Number.parseInt(colonMatch[1]);\n          if (hour <= 23) {\n            const now = TZDateMini.tz(getTimezone());\n            const iso = TZDateMini.tz(\n              getTimezone(),\n              now.getFullYear(),\n              now.getMonth(),\n              now.getDate(),\n              hour,\n              0,\n              0,\n              0,\n            ).toISOString();\n\n            const partsToUpdate = new Set<\n              keyof Intl.DateTimeFormatPartTypesRegistry\n            >(['day', 'month', 'year', 'hour']);\n\n            setValueType('iso8601');\n            expressionInputRef.current.textContent = '';\n            applyDateTime(iso, partsToUpdate);\n\n            requestAnimationFrame(() => {\n              focusFirstUnfilledSpinButton(partsToUpdate);\n            });\n            return;\n          }\n        }\n      }\n\n      // If the copied text contains the formatted date in the user's locale (e.g.,\n      // \"12/24/2024\" or \"25.12.2024\"), switch to iso8601 mode and apply the parsed date\n      // fields to the spin buttons.\n      const typedPartialDate = tryParsePartialDate(input);\n      if (typedPartialDate) {\n        const dateResult = partialDateTimeToISO(typedPartialDate, null);\n        if (dateResult) {\n          setValueType('iso8601');\n          expressionInputRef.current.textContent = '';\n          applyDateTime(dateResult.iso, dateResult.partsToUpdate);\n\n          requestAnimationFrame(() =>\n            focusFirstUnfilledSpinButton(dateResult.partsToUpdate ?? new Set()),\n          );\n          return;\n        }\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = getTimeValue(input, precision) ?? null;\n\n      if (newValue?.absoluteDate === '') {\n        onChange?.(newValue);\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      precision,\n      type,\n      setValue,\n      applyDateTime,\n      focusFirstUnfilledSpinButton,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event: ReactFocusEvent<HTMLSpanElement>) => {\n        // If the current selection spans multiple nodes (e.g. a drag-select or\n        // Cmd+A across multiple spin buttons / expression inputs), don't collapse\n        // it to just this expression input.\n        const selection = window.getSelection();\n        const selectionSpansMultipleNodes =\n          selection !== null &&\n          selection.anchorNode !== selection.focusNode &&\n          selection.toString().length > 0;\n\n        // Also skip if we are in the middle of a programmatic focus + setBaseAndExtent\n        // (guarded by data-restoring-selection on the .strato-inputgroup root).\n        const isRestoringSelection =\n          (event.target as HTMLElement)\n            .closest('.strato-inputgroup')\n            ?.hasAttribute('data-restoring-selection') ?? false;\n\n        // Skip if the user already has a non-collapsed selection inside this\n        // expression input (e.g. drag-select or Shift+arrow within one field).\n        // Calling selectAll() here would override that intended partial selection.\n        const expressionInputEl = event.target as HTMLElement;\n        const hasPartialSelectionWithin =\n          selection !== null &&\n          !selection.isCollapsed &&\n          expressionInputEl.contains(selection.anchorNode) &&\n          expressionInputEl.contains(selection.focusNode);\n\n        if (\n          selectionSpansMultipleNodes ||\n          isRestoringSelection ||\n          hasPartialSelectionWithin\n        ) {\n          return;\n        }\n\n        expressionInputSelectAll();\n      },\n      [expressionInputSelectAll],\n    );\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      if (readOnly) {\n        return;\n      }\n\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        event.preventDefault();\n        return;\n      }\n\n      let trimmedData = normalizeISOInput(data.trim());\n      if (!trimmedData) {\n        event.preventDefault();\n        return;\n      }\n\n      // Pre-parse locale-specific partial date/time for normalization and step 5.\n      const partialDate = tryParsePartialDate(trimmedData);\n      const partialTime = tryParsePartialTime(trimmedData);\n      const partialResult =\n        partialDate || partialTime\n          ? partialDateTimeToISO(partialDate, partialTime)\n          : null;\n\n      // When the result is complete (no partsToUpdate), normalize to ISO so\n      // the existing ISO checks (steps 1\u20133) can handle it.\n      if (partialResult && !partialResult.partsToUpdate) {\n        trimmedData = partialResult.iso;\n      }\n\n      // Capture undo snapshot before any state mutations.\n      const snapshot = captureUndoSnapshot(\n        spinButtonHandlers,\n        expressionInputRef.current,\n        value,\n        valueType,\n      );\n\n      pasteUndoRef.current = {\n        snapshot,\n        focusTarget: document.activeElement,\n      };\n\n      // 1. Date-only paste (e.g. \"2025-01-01\")\n      // 2. Time-only paste (e.g. \"02:00Z\", \"14:30:00\")\n      const dateOnly = parseDateOnlyToISO(trimmedData, dateOnlyPasteAnchor);\n      const timeOnly = parseTimeOnlyToISO(trimmedData);\n      const date = dateOnly ?? timeOnly;\n\n      if (date) {\n        setValueType('iso8601');\n        // When spinbuttons are empty (expression mode), apply all parts so the\n        // full date is filled in.  When parts are already populated, only\n        // overwrite the date or time group that matches the pasted value.\n        let partsFilter: Set<Intl.DateTimeFormatPart['type']> | undefined;\n        if (!spinButtonsEmpty) {\n          partsFilter = dateOnly ? DATE_PART_TYPES : TIME_PART_TYPES;\n        }\n        applyDateTime(date, partsFilter);\n\n        // When only a subset of parts was applied, focus the first empty spin\n        // button instead of advancing. When all parts were applied skip the check.\n        if (partsFilter && hasAnyEmptySpinButton(spinButtonHandlersRef)) {\n          focusFirstUnfilledSpinButton(partsFilter);\n        } else {\n          onPasteComplete?.();\n        }\n\n        event.preventDefault();\n        return;\n      }\n\n      // 3. Full ISO datetime or expression (e.g. \"2025-01-01T02:00Z\", \"now()-1h\")\n      const nextValue = parseTimeAsTimeValue(\n        trimmedData,\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          formatExpressionValue(nextValue);\n          moveCursorToEnd(expressionInputRef.current);\n          setValue(nextValue);\n        } else {\n          applyDateTime(nextValue.absoluteDate);\n        }\n        onPasteComplete?.();\n        event.preventDefault();\n        return;\n      }\n\n      // 4. Allow numbers to be pasted into the spin buttons\n      if (valueType === 'iso8601' && /^\\d+$/.test(trimmedData)) {\n        return;\n      }\n\n      // 5. Partial date/time paste (e.g. \"25.12\", \"14:30\", \"25.12.2024 14:30\")\n      // partialResult was pre-computed above the ISO checks.\n      if (partialResult?.partsToUpdate) {\n        const { iso, partsToUpdate } = partialResult;\n        setValueType('iso8601');\n        applyDateTime(iso, partsToUpdate);\n\n        if (hasAnyEmptySpinButton(spinButtonHandlersRef)) {\n          requestAnimationFrame(() => {\n            focusFirstUnfilledSpinButton(partsToUpdate);\n          });\n        } else {\n          onPasteComplete?.();\n        }\n\n        event.preventDefault();\n        return;\n      }\n\n      // 6. Fallback: switch to expression mode and paste the raw string.\n      if (valueType === 'expression') {\n        if (expressionInputRef.current) {\n          pasteIntoExpressionInput(expressionInputRef, trimmedData);\n        }\n      } else {\n        setValueType('expression');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = trimmedData;\n          expressionInputRef.current.focus();\n          moveCursorToEnd(expressionInputRef.current);\n          expressionInputRef.current.dispatchEvent(\n            new InputEvent('input', { bubbles: true }),\n          );\n        }\n      }\n\n      event.preventDefault();\n    },\n    [\n      readOnly,\n      spinButtonHandlers,\n      expressionInputRef,\n      value,\n      dateOnlyPasteAnchor,\n      precision,\n      valueType,\n      setValue,\n      onPasteComplete,\n      formatExpressionValue,\n      applyDateTime,\n      spinButtonsEmpty,\n      focusFirstUnfilledSpinButton,\n    ],\n  );\n\n  // Ctrl+Z / Cmd+Z handler to undo a paste operation.\n  const onPasteUndoKeyDown: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (\n          !(event.ctrlKey || event.metaKey) ||\n          event.key !== 'z' ||\n          !pasteUndoRef.current\n        ) {\n          return;\n        }\n\n        const { snapshot, focusTarget } = pasteUndoRef.current;\n        pasteUndoRef.current = null;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Restore value type first so the correct UI mode is rendered.\n        setValueType(snapshot.valueType);\n\n        if (snapshot.valueType === 'iso8601') {\n          // Restore spin button values from the snapshot.\n          snapshot.spinButtonTexts.forEach((text, type) => {\n            const handler = spinButtonHandlers.get(type) ?? null;\n            if (!handler) {\n              return;\n            }\n            if (text === '') {\n              handler.clearValue(true);\n            } else if (handler.type === 'number') {\n              handler.applyText(text, true);\n            } else {\n              handler.searchValue(text[0] ?? '', true);\n            }\n          });\n        } else {\n          // Restore expression text content.\n          if (expressionInputRef.current) {\n            expressionInputRef.current.textContent = snapshot.expressionText;\n          }\n          setExpressionEmpty(snapshot.expressionText === '');\n        }\n\n        setValue(snapshot.value);\n        setInputValue(snapshot.value?.value ?? '');\n\n        // Restore focus after the mode-switch re-render.\n        requestAnimationFrame(() => {\n          if (\n            focusTarget instanceof HTMLElement &&\n            focusTarget !== document.activeElement\n          ) {\n            focusTarget.focus();\n          }\n        });\n      },\n      [\n        spinButtonHandlers,\n        expressionInputRef,\n        setValue,\n        setValueType,\n        setExpressionEmpty,\n        setInputValue,\n      ],\n    );\n\n  // Handle keyboard events on the expression input: prevent Enter and spin on ArrowUp/ArrowDown\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (event.key === 'Enter') {\n          event.preventDefault();\n          return;\n        }\n\n        if (\n          onLeadingEdge &&\n          event.key === 'Backspace' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          onLeadingEdge?.();\n          event.preventDefault();\n          return;\n        }\n\n        if (\n          onTrailingEdge &&\n          event.key === 'Delete' &&\n          (expressionInputRef.current?.textContent ?? '') === ''\n        ) {\n          onTrailingEdge?.();\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === 'ArrowLeft' && onLeadingEdge) {\n          const selection = window.getSelection();\n          // If cursor is at the start (offset 0), navigate to the previous input\n          if (selection?.anchorOffset === 0 && selection?.focusOffset === 0) {\n            onLeadingEdge?.();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (event.key === 'ArrowRight') {\n          const selection = window.getSelection();\n          const textContent = expressionInputRef.current?.textContent ?? '';\n          // If cursor is at the end, navigate to the next input\n          if (selection?.anchorOffset === textContent.length) {\n            onTrailingEdge?.();\n            event.preventDefault();\n            return;\n          }\n        }\n\n        if (\n          (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n          !disabled &&\n          !readOnly\n        ) {\n          const element = expressionInputRef.current;\n          if (!element) {\n            return;\n          }\n\n          const currentText = element.textContent ?? '';\n          if (!currentText.trim()) {\n            return;\n          }\n\n          const direction: 1 | -1 = event.key === 'ArrowUp' ? 1 : -1;\n          const newText = spinExpressionValue(currentText, direction);\n\n          if (newText === null) {\n            return;\n          }\n\n          event.preventDefault();\n\n          // Preserve cursor position\n          const selection = window.getSelection();\n          const cursorOffset = selection?.focusOffset ?? 0;\n\n          // Update the text content and fire the input handler\n          element.textContent = newText;\n\n          // Restore cursor position (clamped to new text length)\n          requestAnimationFrame(() => {\n            const textNode = element.firstChild;\n            if (textNode && selection) {\n              const newOffset = Math.min(cursorOffset, newText.length);\n              const range = document.createRange();\n              range.setStart(textNode, newOffset);\n              range.collapse(true);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          });\n\n          // Trigger the input handler to propagate the value change\n          element.dispatchEvent(new Event('input', { bubbles: true }));\n        }\n      },\n      [onLeadingEdge, expressionInputRef, disabled, readOnly, onTrailingEdge],\n    );\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  /**\n   * Clears all spin buttons, switches to expression mode, and seeds the\n   * expression input with the provided text. Used when a bulk-delete leaves\n   * exactly one spin button filled \u2014 that remaining value is carried over as\n   * the expression seed rather than leaving a partial date.\n   */\n  const switchToExpressionMode = useCallback(\n    (text: string) => {\n      const newValue = text !== '' ? getTimeValue(text) ?? null : null;\n\n      setInputValue(text);\n\n      if (valueType === 'expression') {\n        // Already in expression mode \u2014 apply synchronously so the next\n        // keypress is not dropped by a deferred rAF write.\n        setValue(newValue);\n        setExpressionEmpty(text === '');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = text;\n        }\n        return;\n      }\n\n      setValueType('expression');\n      // Suppress stale spinbutton callbacks during the transition;\n      // cleared after the rAF so undo calls are not blocked.\n      isSwitchingToExpressionRef.current = true;\n      requestAnimationFrame(() => {\n        setValue(newValue);\n        setExpressionEmpty(text === '');\n        if (expressionInputRef.current) {\n          expressionInputRef.current.textContent = text;\n        }\n        isSwitchingToExpressionRef.current = false;\n      });\n    },\n    [expressionInputRef, setValue, valueType],\n  );\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    formatExpressionValue(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      resetToExpressionMode();\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onPaste,\n    onPasteUndoKeyDown,\n    focus,\n    switchToExpressionMode,\n    setInputValue,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEvC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,mBACP,SACgC;AAChC,SAAO,SAAS,SAAS;AAC3B;AAEA,MAAM,kBAAwD,oBAAI,IAAI;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AACF,CAAC;AACD,MAAM,kBAAwD,oBAAI,IAAI;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAKD,MAAM,qBAAqB,CAAC,SAAiB;AAC3C,QAAM,YAAY,OAAO,aAAa;AACtC,MAAI,WAAW,YAAY;AACzB,UAAM,QAAQ,UAAU,WAAW,CAAC;AACpC,UAAM,eAAe;AACrB,UAAM,WAAW,SAAS,eAAe,IAAI;AAC7C,UAAM,WAAW,QAAQ;AACzB,UAAM,cAAc,QAAQ;AAC5B,UAAM,SAAS,IAAI;AACnB,cAAU,gBAAgB;AAC1B,cAAU,SAAS,KAAK;AAAA,EAC1B;AACF;AAKA,MAAM,wBAAwB,CAC5B,gBAOA,MAAM,KAAK,YAAY,SAAS,QAAQ,KAAK,CAAC,CAAC,EAAE;AAAA,EAC/C,CAAC,CAAC,MAAM,OAAO,MACb,WACA,SAAS,aACT,QAAQ,QAAQ,SAAS,gBAAgB;AAC7C;AAMF,MAAM,2BAA2B,CAC/B,SACA,SACS;AACT,MAAI,QAAQ,SAAS;AACnB,UAAM,YAAY,OAAO,aAAa;AACtC,UAAM,QAAQ,WAAW,aAAa,UAAU,WAAW,CAAC,IAAI;AAEhE,QACE,SACA,QAAQ,QAAQ,SAAS,MAAM,cAAc,KAC7C,QAAQ,QAAQ,SAAS,MAAM,YAAY,GAC3C;AACA,yBAAmB,IAAI;AAAA,IACzB,OAAO;AACL,cAAQ,QAAQ,cAAc;AAC9B,sBAAgB,QAAQ,OAAO;AAAA,IACjC;AAEA,YAAQ,QAAQ,cAAc,IAAI,WAAW,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,EAC1E;AACF;AAKA,MAAM,kBAAkB,CAAC,YAAgD;AACvE,MAAI,SAAS;AACX,UAAM,QAAQ,SAAS,YAAY;AACnC,UAAM,YAAY,OAAO,aAAa;AACtC,UAAM,mBAAmB,OAAO;AAChC,UAAM,SAAS,KAAK;AACpB,eAAW,gBAAgB;AAC3B,eAAW,SAAS,KAAK;AAAA,EAC3B;AACF;AAKO,MAAM,mBAAmB,CAC9B,OACA,uBACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,EACF,IAAwB;AACxB,QAAM,YAAY;AAAA,IAAuB,CAAC,UACxC,MAAM,cAAc,QAAQ,MAAM,YAAY;AAAA,EAChD;AAEA,QAAM,YAAY,qBAAqB,KAAK;AAC5C,QAAM,EAAE,oBAAoB,UAAU,MAAM,IAAI,kBAAkB;AAAA,IAChE;AAAA,EACF,CAAC;AAGD,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAuC,KAAK;AACtE,QAAM,eAAe,MAAM,UAAU;AACrC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO,QAAQ,YAAY;AACtE,QAAM,WAAW,OAAO,IAAI;AAI5B,QAAM,eAAe,OAAqC,MAAS;AACnE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C,CAAC,mBAAmB,SAAS;AAAA,EAC/B;AACA,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,eAAe,OAGX,IAAI;AAEd,YAAU,MAAM;AACd,WAAO,MAAM;AACX,mBAAa,UAAU;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAML,QAAM,2BAA2B;AAAA,IAC/B,OAAO,SAAS,aAAa,MAAM,eAAe,MAAM,eAAe;AAAA,EACzE;AAIA,QAAM,6BAA6B,OAAO,KAAK;AAM/C,MACE,cAAc,aACd,OAAO,SAAS,aAChB,MAAM,cACN;AACA,6BAAyB,UAAU,MAAM;AAAA,EAC3C;AACA,QAAM,kBACJ,cAAc,YAAY,yBAAyB,UAAU;AAI/D,QAAM,uBAAuB,OAEnB,IAAI;AAEd,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,CAAC,mBAAmB;AAC5B,YAAM,WAAW,aAAa,kBAAkB,QAAW,SAAS;AAEpE,UAAI,aAAa,QAAW;AAC1B;AAAA,MACF;AAIA,UAAI,2BAA2B,SAAS;AACtC;AAAA,MACF;AAEA,UAAI,mBAAmB,SAAS;AAC9B,2BAAmB,QAAQ,cAAc;AAAA,MAC3C;AAIA,UAAI,cAAc,WAAW;AAC3B,qBAAa,SAAS;AAAA,MACxB;AAKA,UAAI,mBAAmB,MAAM,UAAU,iBAAiB,IAAI;AAC1D,mBAAW,QAAQ;AACnB;AAAA,MACF;AAGA;AAAA,QAAS,CAAC,cACR,iBAAiB,WAAW,QAAQ,IAAI,YAAY;AAAA,MACtD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,MAAO,cAAc,eAAe,kBAAkB;AAAA,IACtD,CAAC,WAAW,iBAAiB,gBAAgB;AAAA,EAC/C;AAGA,QAAM,wBAAwB;AAAA,IAC5B,CAACA,mBAAkB,SAAS;AAC1B,mBAAa,YAAY;AACzB,eAAS,IAAI;AACb,oBAAc,EAAE;AAChB,yBAAmBA,gBAAe;AAClC,+BAAyB,UAAU;AAAA,IACrC;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAOA,QAAM,sBAAsB,OAAsB,IAAI;AAGtD,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,iBAAa,UAAU;AAEvB,QAAI,OAAO,SAAS,aAAa,CAAC,kBAAkB;AAClD,oBAAc,MAAM,KAAK;AAAA,IAC3B;AAGA,QAAI,CAAC,gBAAgB,OAAO,UAAU,UAAU;AAC9C;AAAA,IACF;AAEA,UAAM,mBAAmB,oBAAoB;AAC7C,wBAAoB,UAAU,OAAO,gBAAgB;AAGrD,QAAI,CAAC,OAAO;AACV,mBAAa,YAAY;AACzB,4BAAsB,IAAI;AAC1B,YAAM,QAAQ,mBAAmB,SAAS;AAC1C,yBAAmB,UAAU,EAAE;AAC/B,yBAAmB,QAAQ,CAAC,OAAO,IAAI,WAAW,IAAI,CAAC;AACvD,+BAAyB,UAAU;AACnC;AAAA,IACF;AAMA,QAAI,MAAM,iBAAiB,IAAI;AAC7B;AAAA,IACF;AAIA,iBAAa,MAAM,IAAI;AACvB,kBAAc,MAAM,KAAK;AACzB,QAAI,MAAM,SAAS,cAAc;AAM/B,UAAI,CAAC,iBAAiB,aAAa,MAAM,KAAK,GAAG;AAC/C,8BAAsB,KAAK;AAAA,MAC7B;AACA,yBAAmB,MAAM,UAAU,EAAE;AAAA,IACvC,WACE,MAAM,SAAS,aACf,sBAAsB,qBAAqB,KAC3C,qBAAqB,MAAM,cAC3B;AACA,oBAAc,MAAM,YAAY;AAAA,IAClC;AAAA,EAGF,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,wBAAwB,OAAO,kBAAkB;AACvD,wBAAsB,UAAU;AAIhC,QAAM,+BAA+B;AAAA,IACnC,CAAC,gBAAiE;AAChE,YAAM,WAAW,sBAAsB;AACvC,iBAAW,CAACC,OAAM,OAAO,KAAK,UAAU;AACtC,YACE,WACAA,UAAS,aACT,CAAC,YAAY;AAAA,UACXA;AAAA,QACF,KACA,QAAQ,QAAQ,SAAS,gBAAgB,IACzC;AACA,kBAAQ,QAAQ,SAAS,MAAM;AAC/B;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAwC;AAC5C,iBAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,YAAI,SAAS;AACX,wBAAc;AAAA,QAChB;AAAA,MACF;AACA,mBAAa,SAAS,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC;AAAA,EACH;AAGA,YAAU,MAAM;AACd,UAAM,cAAc,qBAAqB;AACzC,QAAI,CAAC,eAAe,cAAc,WAAW;AAC3C;AAAA,IACF;AACA,yBAAqB,UAAU;AAE/B,0BAAsB,MAAM;AAC1B,mCAA6B,WAAW;AAAA,IAC1C,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,4BAA4B,CAAC;AAE5C,QAAM,EAAE,WAAW,yBAAyB,IAC1C,aAAa,kBAAkB;AAGjC,QAAM,wBAAwB;AAAA,IAC5B,CAACC,WAA4B;AAC3B,UAAI,CAAC,mBAAmB,SAAS;AAC/B;AAAA,MACF;AACA,YAAM,iBAAiBA,SAAQ,gBAAgBA,MAAK,IAAI;AACxD,YAAM,eAAe;AAAA,QACnB,mBAAmB,SAAS,eAAe;AAAA,MAC7C;AAIA,UAAI,iBAAiB,gBAAgB;AACnC,2BAAmB,QAAQ,cAAc;AAAA,MAC3C;AAAA,IACF;AAAA;AAAA;AAAA,IAGA,CAAC;AAAA,EACH;AAGA,QAAM,yBACJ,YAAY,MAAM;AAChB,QAAI,CAAC,mBAAmB,SAAS;AAC/B;AAAA,IACF;AAEA,UAAM,QAAQ,mBAAmB,QAAQ,eAAe;AAGxD,QAAI,mBAAmB,QAAQ,cAAc,QAAQ;AACnD,yBAAmB,QAAQ,YAAY;AAAA,IACzC;AAGA,QAAI,UAAU,IAAI;AAChB,mBAAa,YAAY;AACzB,eAAS,IAAI;AACb,yBAAmB,IAAI;AACvB;AAAA,IACF;AAEA,uBAAmB,KAAK;AAGxB,UAAM,CAAC,EAAE,SAAS,IAAI,mBAAmB,KAAK,KAAK,KAAK,CAAC;AACzD,QAAI,OAAO,SAAS,SAAS,KAAK,UAAU;AAC1C,mBAAa,SAAS;AAGtB,oBAAc,IAAI;AAClB,+BAAyB,UAAU;AAGnC,YAAM,iBAAiB,MACpB,OAAO,CAACD,UAASA,UAAS,SAAS,EACnC,IAAI,CAACA,UAAS,mBAAmB,IAAIA,KAAI,CAAC,EAC1C,OAAO,OAAO;AACjB,YAAM,CAAC,aAAa,OAAO,IAAI;AAG/B,yBAAmB,WAAW,KAC5B,YAAY,UAAU,WAAW,IAAI;AAGvC,yBAAmB,QAAQ,cAAc;AAGzC,4BAAsB,MAAM;AAE1B,iBAAS,QAAQ,SAAS,MAAM;AAAA,MAClC,CAAC;AACD;AAAA,IACF;AAKA,QAAI,SAAS,QAAQ;AACnB,YAAM,aAAa,eAAe,KAAK,KAAK;AAC5C,UAAI,YAAY;AACd,cAAM,OAAO,OAAO,SAAS,WAAW,CAAC,CAAC;AAC1C,YAAI,QAAQ,IAAI;AACd,gBAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AACvC,gBAAM,MAAM,WAAW;AAAA,YACrB,YAAY;AAAA,YACZ,IAAI,YAAY;AAAA,YAChB,IAAI,SAAS;AAAA,YACb,IAAI,QAAQ;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF,EAAE,YAAY;AAEd,gBAAM,gBAAgB,oBAAI,IAExB,CAAC,OAAO,SAAS,QAAQ,MAAM,CAAC;AAElC,uBAAa,SAAS;AACtB,6BAAmB,QAAQ,cAAc;AACzC,wBAAc,KAAK,aAAa;AAEhC,gCAAsB,MAAM;AAC1B,yCAA6B,aAAa;AAAA,UAC5C,CAAC;AACD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAKA,UAAM,mBAAmB,oBAAoB,KAAK;AAClD,QAAI,kBAAkB;AACpB,YAAM,aAAa,qBAAqB,kBAAkB,IAAI;AAC9D,UAAI,YAAY;AACd,qBAAa,SAAS;AACtB,2BAAmB,QAAQ,cAAc;AACzC,sBAAc,WAAW,KAAK,WAAW,aAAa;AAEtD;AAAA,UAAsB,MACpB,6BAA6B,WAAW,iBAAiB,oBAAI,IAAI,CAAC;AAAA,QACpE;AACA;AAAA,MACF;AAAA,IACF;AAGA,UAAM,WAAW,aAAa,OAAO,SAAS,KAAK;AAEnD,QAAI,UAAU,iBAAiB,IAAI;AACjC,iBAAW,QAAQ;AAAA,IACrB;AAEA;AAAA,MAAS,CAAC,cACR,iBAAiB,WAAW,QAAQ,IAAI,YAAY;AAAA,IACtD;AAEA,kBAAc,KAAK;AAAA,EACrB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGH,QAAM,2BACJ;AAAA,IACE,CAAC,UAA4C;AAI3C,YAAM,YAAY,OAAO,aAAa;AACtC,YAAM,8BACJ,cAAc,QACd,UAAU,eAAe,UAAU,aACnC,UAAU,SAAS,EAAE,SAAS;AAIhC,YAAM,uBACH,MAAM,OACJ,QAAQ,oBAAoB,GAC3B,aAAa,0BAA0B,KAAK;AAKlD,YAAM,oBAAoB,MAAM;AAChC,YAAM,4BACJ,cAAc,QACd,CAAC,UAAU,eACX,kBAAkB,SAAS,UAAU,UAAU,KAC/C,kBAAkB,SAAS,UAAU,SAAS;AAEhD,UACE,+BACA,wBACA,2BACA;AACA;AAAA,MACF;AAEA,+BAAyB;AAAA,IAC3B;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAGF,QAAM,0BACJ,YAAY,MAAM;AAChB,QAAI,mBAAmB,WAAW,OAAO,SAAS,cAAc;AAC9D,YAAM,yBACJ,mBAAmB,QAAQ,eAAe;AAC5C,YAAM,oBAAoB;AAAA,QACxB,uBAAuB,KAAK;AAAA,MAC9B;AAEA,UAAI,mBAAmB;AACrB,2BAAmB,QAAQ,cAAc,gBAAgB,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,EAIF,GAAG,CAAC,KAAK,CAAC;AAGZ,QAAM,UAAkD;AAAA,IACtD,CAAC,UAAU;AACT,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,YAAM,OAAO,MAAM,eAAe,QAAQ,YAAY;AACtD,UAAI,CAAC,MAAM;AACT,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,UAAI,cAAc,kBAAkB,KAAK,KAAK,CAAC;AAC/C,UAAI,CAAC,aAAa;AAChB,cAAM,eAAe;AACrB;AAAA,MACF;AAGA,YAAM,cAAc,oBAAoB,WAAW;AACnD,YAAM,cAAc,oBAAoB,WAAW;AACnD,YAAM,gBACJ,eAAe,cACX,qBAAqB,aAAa,WAAW,IAC7C;AAIN,UAAI,iBAAiB,CAAC,cAAc,eAAe;AACjD,sBAAc,cAAc;AAAA,MAC9B;AAGA,YAAM,WAAW;AAAA,QACf;AAAA,QACA,mBAAmB;AAAA,QACnB;AAAA,QACA;AAAA,MACF;AAEA,mBAAa,UAAU;AAAA,QACrB;AAAA,QACA,aAAa,SAAS;AAAA,MACxB;AAIA,YAAM,WAAW,mBAAmB,aAAa,mBAAmB;AACpE,YAAM,WAAW,mBAAmB,WAAW;AAC/C,YAAM,OAAO,YAAY;AAEzB,UAAI,MAAM;AACR,qBAAa,SAAS;AAItB,YAAI;AACJ,YAAI,CAAC,kBAAkB;AACrB,wBAAc,WAAW,kBAAkB;AAAA,QAC7C;AACA,sBAAc,MAAM,WAAW;AAI/B,YAAI,eAAe,sBAAsB,qBAAqB,GAAG;AAC/D,uCAA6B,WAAW;AAAA,QAC1C,OAAO;AACL,4BAAkB;AAAA,QACpB;AAEA,cAAM,eAAe;AACrB;AAAA,MACF;AAGA,YAAM,YAAY;AAAA,QAChB;AAAA,QACA,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAAA,QACrC;AAAA,MACF;AAEA,UAAI,WAAW;AACb,qBAAa,UAAU,IAAI;AAC3B,YAAI,UAAU,SAAS,cAAc;AACnC,gCAAsB,SAAS;AAC/B,0BAAgB,mBAAmB,OAAO;AAC1C,mBAAS,SAAS;AAAA,QACpB,OAAO;AACL,wBAAc,UAAU,YAAY;AAAA,QACtC;AACA,0BAAkB;AAClB,cAAM,eAAe;AACrB;AAAA,MACF;AAGA,UAAI,cAAc,aAAa,QAAQ,KAAK,WAAW,GAAG;AACxD;AAAA,MACF;AAIA,UAAI,eAAe,eAAe;AAChC,cAAM,EAAE,KAAK,cAAc,IAAI;AAC/B,qBAAa,SAAS;AACtB,sBAAc,KAAK,aAAa;AAEhC,YAAI,sBAAsB,qBAAqB,GAAG;AAChD,gCAAsB,MAAM;AAC1B,yCAA6B,aAAa;AAAA,UAC5C,CAAC;AAAA,QACH,OAAO;AACL,4BAAkB;AAAA,QACpB;AAEA,cAAM,eAAe;AACrB;AAAA,MACF;AAGA,UAAI,cAAc,cAAc;AAC9B,YAAI,mBAAmB,SAAS;AAC9B,mCAAyB,oBAAoB,WAAW;AAAA,QAC1D;AAAA,MACF,OAAO;AACL,qBAAa,YAAY;AACzB,YAAI,mBAAmB,SAAS;AAC9B,6BAAmB,QAAQ,cAAc;AACzC,6BAAmB,QAAQ,MAAM;AACjC,0BAAgB,mBAAmB,OAAO;AAC1C,6BAAmB,QAAQ;AAAA,YACzB,IAAI,WAAW,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,UAC3C;AAAA,QACF;AAAA,MACF;AAEA,YAAM,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,qBACJ;AAAA,IACE,CAAC,UAAU;AACT,UACE,EAAE,MAAM,WAAW,MAAM,YACzB,MAAM,QAAQ,OACd,CAAC,aAAa,SACd;AACA;AAAA,MACF;AAEA,YAAM,EAAE,UAAU,YAAY,IAAI,aAAa;AAC/C,mBAAa,UAAU;AAEvB,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGtB,mBAAa,SAAS,SAAS;AAE/B,UAAI,SAAS,cAAc,WAAW;AAEpC,iBAAS,gBAAgB,QAAQ,CAAC,MAAMA,UAAS;AAC/C,gBAAM,UAAU,mBAAmB,IAAIA,KAAI,KAAK;AAChD,cAAI,CAAC,SAAS;AACZ;AAAA,UACF;AACA,cAAI,SAAS,IAAI;AACf,oBAAQ,WAAW,IAAI;AAAA,UACzB,WAAW,QAAQ,SAAS,UAAU;AACpC,oBAAQ,UAAU,MAAM,IAAI;AAAA,UAC9B,OAAO;AACL,oBAAQ,YAAY,KAAK,CAAC,KAAK,IAAI,IAAI;AAAA,UACzC;AAAA,QACF,CAAC;AAAA,MACH,OAAO;AAEL,YAAI,mBAAmB,SAAS;AAC9B,6BAAmB,QAAQ,cAAc,SAAS;AAAA,QACpD;AACA,2BAAmB,SAAS,mBAAmB,EAAE;AAAA,MACnD;AAEA,eAAS,SAAS,KAAK;AACvB,oBAAc,SAAS,OAAO,SAAS,EAAE;AAGzC,4BAAsB,MAAM;AAC1B,YACE,uBAAuB,eACvB,gBAAgB,SAAS,eACzB;AACA,sBAAY,MAAM;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGF,QAAM,6BACJ;AAAA,IACE,CAAC,UAAU;AACT,UAAI,MAAM,QAAQ,SAAS;AACzB,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,UACE,iBACA,MAAM,QAAQ,gBACb,mBAAmB,SAAS,eAAe,QAAQ,IACpD;AACA,wBAAgB;AAChB,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,UACE,kBACA,MAAM,QAAQ,aACb,mBAAmB,SAAS,eAAe,QAAQ,IACpD;AACA,yBAAiB;AACjB,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,UAAI,MAAM,QAAQ,eAAe,eAAe;AAC9C,cAAM,YAAY,OAAO,aAAa;AAEtC,YAAI,WAAW,iBAAiB,KAAK,WAAW,gBAAgB,GAAG;AACjE,0BAAgB;AAChB,gBAAM,eAAe;AACrB;AAAA,QACF;AAAA,MACF;AAEA,UAAI,MAAM,QAAQ,cAAc;AAC9B,cAAM,YAAY,OAAO,aAAa;AACtC,cAAM,cAAc,mBAAmB,SAAS,eAAe;AAE/D,YAAI,WAAW,iBAAiB,YAAY,QAAQ;AAClD,2BAAiB;AACjB,gBAAM,eAAe;AACrB;AAAA,QACF;AAAA,MACF;AAEA,WACG,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,CAAC,YACD,CAAC,UACD;AACA,cAAM,UAAU,mBAAmB;AACnC,YAAI,CAAC,SAAS;AACZ;AAAA,QACF;AAEA,cAAM,cAAc,QAAQ,eAAe;AAC3C,YAAI,CAAC,YAAY,KAAK,GAAG;AACvB;AAAA,QACF;AAEA,cAAM,YAAoB,MAAM,QAAQ,YAAY,IAAI;AACxD,cAAM,UAAU,oBAAoB,aAAa,SAAS;AAE1D,YAAI,YAAY,MAAM;AACpB;AAAA,QACF;AAEA,cAAM,eAAe;AAGrB,cAAM,YAAY,OAAO,aAAa;AACtC,cAAM,eAAe,WAAW,eAAe;AAG/C,gBAAQ,cAAc;AAGtB,8BAAsB,MAAM;AAC1B,gBAAM,WAAW,QAAQ;AACzB,cAAI,YAAY,WAAW;AACzB,kBAAM,YAAY,KAAK,IAAI,cAAc,QAAQ,MAAM;AACvD,kBAAM,QAAQ,SAAS,YAAY;AACnC,kBAAM,SAAS,UAAU,SAAS;AAClC,kBAAM,SAAS,IAAI;AACnB,sBAAU,gBAAgB;AAC1B,sBAAU,SAAS,KAAK;AAAA,UAC1B;AAAA,QACF,CAAC;AAGD,gBAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,MAC7D;AAAA,IACF;AAAA,IACA,CAAC,eAAe,oBAAoB,UAAU,UAAU,cAAc;AAAA,EACxE;AAGF,QAAM,QAAQ,YAAY,MAAM;AAC9B,YAAQ,WAAW;AAAA,MACjB,KAAK;AACH,2BAAmB,SAAS,MAAM;AAClC;AAAA,MACF,KAAK;AACH,gCAAwB,SAAS,SAAS,MAAM;AAChD;AAAA,IACJ;AAAA,EAGF,GAAG,CAAC,WAAW,sBAAsB,CAAC;AAQtC,QAAM,yBAAyB;AAAA,IAC7B,CAAC,SAAiB;AAChB,YAAM,WAAW,SAAS,KAAK,aAAa,IAAI,KAAK,OAAO;AAE5D,oBAAc,IAAI;AAElB,UAAI,cAAc,cAAc;AAG9B,iBAAS,QAAQ;AACjB,2BAAmB,SAAS,EAAE;AAC9B,YAAI,mBAAmB,SAAS;AAC9B,6BAAmB,QAAQ,cAAc;AAAA,QAC3C;AACA;AAAA,MACF;AAEA,mBAAa,YAAY;AAGzB,iCAA2B,UAAU;AACrC,4BAAsB,MAAM;AAC1B,iBAAS,QAAQ;AACjB,2BAAmB,SAAS,EAAE;AAC9B,YAAI,mBAAmB,SAAS;AAC9B,6BAAmB,QAAQ,cAAc;AAAA,QAC3C;AACA,mCAA2B,UAAU;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,UAAU,SAAS;AAAA,EAC1C;AAGA,YAAU,MAAM;AACd,QAAI,gBAAgB,OAAO,SAAS,cAAc;AAChD;AAAA,IACF;AACA,0BAAsB,KAAK;AAAA,EAE7B,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AAEd,QAAI,SAAS,SAAS;AACpB,eAAS,UAAU;AACnB;AAAA,IACF;AAGA,QAAI,cAAc,aAAa,kBAAkB;AAC/C,4BAAsB;AAGtB,iBAAW,MAAM;AACf,4BAAoB,SAAS,MAAM;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EAGF,GAAG,CAAC,gBAAgB,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,cAAc,cAAc;AAC9B;AAAA,IACF;AAEA,QAAI,OAAO;AACT,oBAAc,EAAE;AAChB;AAAA,IACF;AAEA,QAAI,mBAAmB,SAAS,aAAa;AAC3C,oBAAc,mBAAmB,SAAS,WAAW;AAAA,IACvD;AAAA,EAGF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["expressionEmpty", "type", "value"]
 }

package/esm/forms/date-time-range-picker/hooks/useDateTimeRangePicker.js

@@ -92,15 +92,19 @@ const useDateTimeRangePicker = (props) => {
         return;
       }
       const focusTarget = document.activeElement;
+      const fromValueType = dateTimeFromRef.current?.element?.getAttribute("data-valuetype") ?? "expression";
+      const toValueType = dateTimeToRef.current?.element?.getAttribute("data-valuetype") ?? "expression";
       const fromSnapshot = captureUndoSnapshot(
         dateTimeFromRef.current.spinButtonHandlers,
         dateTimeFromRef.current.expressionInputRef,
-        value?.from ?? null
+        value?.from ?? null,
+        fromValueType
       );
       const toSnapshot = captureUndoSnapshot(
         dateTimeToRef.current.spinButtonHandlers,
         dateTimeToRef.current.expressionInputRef,
-        value?.to ?? null
+        value?.to ?? null,
+        toValueType
       );
       const [nextFrom, nextTo] = data.trim().split("/");
       if (nextFrom && nextTo) {
@@ -115,7 +119,7 @@ const useDateTimeRangePicker = (props) => {
             to: toSnapshot,
             focusTarget
           };
-          setValue({ from: parsedFrom, to: parsedTo });
+          setValue({ from: validFrom, to: validTo });
           e.preventDefault();
           e.stopPropagation();
           return;