@dynatrace/strato-components 3.5.0 → 3.6.0

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

@@ -27,7 +27,9 @@ var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_helpers = require("../../../core/time/helpers.js");
 var import_useTimeframeStore = require("../../../core/time/timeframeStore/useTimeframeStore.js");
+var import_focusDateTimeInput = require("../../date-time-picker/utils/focusDateTimeInput.js");
 var import_helpers2 = require("../helpers.js");
+var import_selection_helpers = require("../selection-helpers.js");
 const restoreSpinButtons = (ref, spinButtonTexts) => {
   spinButtonTexts.forEach((text, type) => {
     const handler = ref.current?.spinButtonHandlers.get(type) ?? null;
@@ -47,6 +49,10 @@ const restoreSnapshot = (snapshot, ref) => {
   if (snapshot.valueType === "iso8601") {
     restoreSpinButtons(ref, snapshot.spinButtonTexts);
   } else if (ref.current?.expressionInputRef) {
+    const invalidExpresssion = !snapshot.value?.absoluteDate;
+    if (invalidExpresssion) {
+      restoreSpinButtons(ref, snapshot.spinButtonTexts);
+    }
     ref.current.expressionInputRef.textContent = snapshot.expressionText;
   }
 };
@@ -76,18 +82,14 @@ const useDateTimeRangePicker = (props) => {
     [formatMessage, placeholder?.from, placeholder?.to]
   );
   const onCopyCapture = (0, import_react.useCallback)(
-    async (event) => {
+    (event) => {
       event.preventDefault();
       event.stopPropagation();
       if (!(0, import_helpers.isFullTimeframe)(value)) {
         return;
       }
-      try {
-        await navigator.clipboard.writeText(
-          `${value.from.value}/${value.to.value}`
-        );
-      } catch {
-      }
+      navigator.clipboard.writeText(`${value.from.value}/${value.to.value}`).catch(() => {
+      });
     },
     [value]
   );
@@ -105,6 +107,9 @@ const useDateTimeRangePicker = (props) => {
         return;
       }
       const focusTarget = document.activeElement;
+      const isExpressionInputFocused = focusTarget === dateTimeFromRef.current?.expressionInputRef || focusTarget === dateTimeToRef.current?.expressionInputRef;
+      const focusedExpression = isExpressionInputFocused ? focusTarget : null;
+      const expressionCursorOffset = focusedExpression ? (0, import_selection_helpers.getExpressionCursorOffset)(focusedExpression) : void 0;
       const fromValueType = dateTimeFromRef.current?.element?.getAttribute("data-valuetype") ?? "expression";
       const toValueType = dateTimeToRef.current?.element?.getAttribute("data-valuetype") ?? "expression";
       const fromSnapshot = (0, import_helpers2.captureUndoSnapshot)(
@@ -119,36 +124,60 @@ const useDateTimeRangePicker = (props) => {
         value?.to ?? null,
         toValueType
       );
-      const [nextFrom, nextTo] = data.trim().split("/");
+      const trimmed = data.trim();
+      const hasArrowSep = trimmed.includes("\u2192");
+      const parts = hasArrowSep ? trimmed.split("\u2192") : trimmed.split("/");
+      const [nextFrom, nextTo] = parts;
       if (nextFrom && nextTo) {
-        const relativeDate = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
-        const parsedFrom = (0, import_helpers2.parseDateOnlyToISO)(nextFrom) ?? (0, import_helpers2.parseTimeOnlyToISO)(nextFrom) ?? (0, import_helpers2.normalizeISOInput)(nextFrom);
-        const parsedTo = (0, import_helpers2.parseDateOnlyToISO)(nextTo, "endOfDay") ?? (0, import_helpers2.parseTimeOnlyToISO)(nextTo) ?? (0, import_helpers2.normalizeISOInput)(nextTo);
-        const validFrom = (0, import_units.parseTimeAsTimeValue)(parsedFrom, relativeDate);
-        const validTo = (0, import_units.parseTimeAsTimeValue)(parsedTo, relativeDate);
-        if (validFrom && validTo) {
+        if (hasArrowSep) {
           pasteUndoSnapshotRef.current = {
             from: fromSnapshot,
             to: toSnapshot,
-            focusTarget
+            focusTarget,
+            expressionCursorOffset
           };
-          setValue({ from: validFrom, to: validTo });
+          dateTimeFromRef.current?.pasteText(nextFrom, true);
+          dateTimeToRef.current?.pasteText(nextTo, true);
           e.preventDefault();
           e.stopPropagation();
+          requestAnimationFrame(() => {
+            (0, import_focusDateTimeInput.focusDateTimeInput)(null, dateTimeFromRef, dateTimeToRef);
+          });
           return;
         }
+        if (parts.length === 2) {
+          const relativeDate = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
+          const parsedFrom = (0, import_helpers2.parseDateOnlyToISO)(nextFrom) ?? (0, import_helpers2.parseTimeOnlyToISO)(nextFrom) ?? (0, import_helpers2.normalizeISOInput)(nextFrom);
+          const parsedTo = (0, import_helpers2.parseDateOnlyToISO)(nextTo, "endOfDay") ?? (0, import_helpers2.parseTimeOnlyToISO)(nextTo) ?? (0, import_helpers2.normalizeISOInput)(nextTo);
+          const validFrom = (0, import_units.parseTimeAsTimeValue)(parsedFrom, relativeDate);
+          const validTo = (0, import_units.parseTimeAsTimeValue)(parsedTo, relativeDate);
+          if (validFrom && validTo) {
+            pasteUndoSnapshotRef.current = {
+              from: fromSnapshot,
+              to: toSnapshot,
+              focusTarget
+            };
+            dateTimeFromRef.current?.pasteText(nextFrom, true);
+            dateTimeToRef.current?.pasteText(nextTo, true);
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+        }
       }
       pasteUndoSnapshotRef.current = {
         from: fromSnapshot,
         to: toSnapshot,
-        focusTarget
+        focusTarget,
+        expressionCursorOffset
       };
     },
-    [readOnly, setValue, value, dateTimeFromRef, dateTimeToRef]
+    [readOnly, value, dateTimeFromRef, dateTimeToRef]
   );
   const onUndoPasteKeyDown = (0, import_react.useCallback)(
     (event) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "z" && pasteUndoSnapshotRef.current) {
+      const isCtrlZ = (event.ctrlKey || event.metaKey) && event.key === "z";
+      if (isCtrlZ && pasteUndoSnapshotRef.current) {
         const snapshot = pasteUndoSnapshotRef.current;
         pasteUndoSnapshotRef.current = null;
         event.preventDefault();
@@ -163,6 +192,14 @@ const useDateTimeRangePicker = (props) => {
         if (snapshot.focusTarget instanceof HTMLElement && snapshot.focusTarget !== document.activeElement) {
           snapshot.focusTarget.focus();
         }
+        if (snapshot.expressionCursorOffset !== void 0 && snapshot.focusTarget instanceof HTMLSpanElement) {
+          (0, import_selection_helpers.restoreExpressionCursorOffset)(
+            snapshot.focusTarget,
+            snapshot.expressionCursorOffset
+          );
+        }
+      } else if (pasteUndoSnapshotRef.current && (0, import_helpers2.isContentModifyingKey)(event)) {
+        pasteUndoSnapshotRef.current = null;
       }
     },
     [dateTimeFromRef, dateTimeToRef, setValue]

package/forms/date-time-range-picker/selection-copy-helpers.js

@@ -29,23 +29,29 @@ var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_selection_helpers = require("./selection-helpers.js");
 var import_timeParser = require("../forms-core/time/timeParser.js");
+function getPlaceholder(el) {
+  const raw = el.style.getPropertyValue("--data-placeholder").trim();
+  return raw.startsWith('"') && raw.endsWith('"') ? raw.slice(1, -1) : raw;
+}
 function sanitizeCopyString(selectionString) {
   return selectionString.split("\u2192").map((part) => part.replaceAll("\n", "").trim()).join(" ").trim();
 }
 function convertCopyString(selectionString, patterns) {
   const matchableDateTime = selectionString.split("\u2192").map((dateTime) => dateTime.replace(/\n/g, "").trim());
   const parsedDateTimes = [];
-  try {
-    for (const [index, dateTimeInput] of matchableDateTime.entries()) {
-      if ((0, import_timeParser.isExpressionString)(dateTimeInput)) {
-        parsedDateTimes[index] = (0, import_units.parseTimeAsTimeValue)(dateTimeInput)?.value ?? dateTimeInput;
-        continue;
-      }
-      const currentPattern = patterns?.[index];
-      if (currentPattern === void 0 || (currentPattern.includes("dd") && currentPattern.includes("MM") && currentPattern.includes("yyyy")) === false) {
-        parsedDateTimes[index] = dateTimeInput;
-        continue;
-      }
+  let hasNonISO = false;
+  for (const [index, dateTimeInput] of matchableDateTime.entries()) {
+    if ((0, import_timeParser.isExpressionString)(dateTimeInput)) {
+      parsedDateTimes[index] = (0, import_units.parseTimeAsTimeValue)(dateTimeInput)?.value ?? dateTimeInput;
+      continue;
+    }
+    const currentPattern = patterns?.[index];
+    if (currentPattern === void 0 || (currentPattern.includes("dd") && currentPattern.includes("MM") && currentPattern.includes("yyyy")) === false) {
+      parsedDateTimes[index] = dateTimeInput;
+      hasNonISO = true;
+      continue;
+    }
+    try {
       const dateTimeFormat = (0, import_date_fns.parse)(
         dateTimeInput,
         currentPattern,
@@ -60,12 +66,14 @@ function convertCopyString(selectionString, patterns) {
         precisionPattern = "yyyy-MM-dd";
       }
       parsedDateTimes[index] = (0, import_date_fns.format)(dateTimeFormat, precisionPattern);
+    } catch {
+      parsedDateTimes[index] = dateTimeInput;
+      hasNonISO = true;
     }
-  } catch {
-    return sanitizeCopyString(selectionString);
   }
   if (parsedDateTimes.length > 0) {
-    return parsedDateTimes.filter(Boolean).join("/");
+    const separator = matchableDateTime.length > 1 && hasNonISO ? "\u2192" : "/";
+    return parsedDateTimes.filter(Boolean).join(separator);
   }
   return sanitizeCopyString(selectionString);
 }
@@ -85,23 +93,44 @@ function getPatternAndSelectedText(selection) {
   let capturing = false;
   const treeWalker = document.createTreeWalker(
     root,
-    NodeFilter.SHOW_TEXT,
-    null
+    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+        if (node instanceof Element && node.getAttribute("role") === "spinbutton" && node.childNodes.length === 0) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+        return NodeFilter.FILTER_SKIP;
+      }
+    }
   );
   let currentNode = treeWalker.nextNode();
-  const startNode = rawStartNode.nodeType === Node.TEXT_NODE ? rawStartNode : rawStartNode.firstChild ?? null;
-  const endNode = rawEndNode.nodeType === Node.TEXT_NODE ? rawEndNode : rawEndNode.firstChild ?? null;
+  const startNode = rawStartNode.nodeType === Node.TEXT_NODE ? rawStartNode : rawStartNode?.firstChild ?? rawStartNode ?? null;
+  const endNode = rawEndNode.nodeType === Node.TEXT_NODE ? rawEndNode : rawEndNode?.firstChild ?? rawEndNode ?? null;
   while (currentNode) {
     if (currentNode === startNode) {
       capturing = true;
     }
     if (capturing && (0, import_selection_helpers.checkIfValueTypeAlignment)(currentNode)) {
-      text += currentNode.textContent ?? "";
-      const parentElement = currentNode.parentElement;
-      if (parentElement?.hasAttribute("data-pattern")) {
-        patternParts.push(parentElement.getAttribute("data-pattern") ?? "");
-      } else if (parentElement?.dataset.valuetype !== "expression") {
-        patternParts.push(currentNode.textContent ?? "");
+      if (currentNode.nodeType === Node.TEXT_NODE) {
+        text += currentNode.textContent ?? "";
+        const parentElement = currentNode.parentElement;
+        if (parentElement?.hasAttribute("data-pattern")) {
+          patternParts.push(parentElement.getAttribute("data-pattern") ?? "");
+        } else if (parentElement?.dataset.valuetype !== "expression") {
+          patternParts.push(currentNode.textContent ?? "");
+        }
+      } else {
+        const el = currentNode;
+        const placeholder = getPlaceholder(el);
+        text += placeholder;
+        if (el.dataset.pattern !== void 0) {
+          patternParts.push(el.dataset.pattern);
+        } else if (el.dataset.valuetype !== "expression") {
+          patternParts.push(placeholder);
+        }
       }
     }
     if (currentNode === endNode) {

package/forms/date-time-range-picker/selection-helpers.d.ts

@@ -24,6 +24,13 @@ export type SelectionEndpoints = {
  * @internal
  */
 export declare function consumePreRestoreEndpoints(root: HTMLElement): SelectionEndpoints | undefined;
+/**
+ * Reads but does not consume the pre-restore endpoints for `root`.
+ * Use when you need to inspect the stash without preventing a later consumer
+ * (e.g. planBulkClear via consumePreRestoreEndpoints) from reading it.
+ * @internal
+ */
+export declare function peekPreRestoreEndpoints(root: HTMLElement): SelectionEndpoints | undefined;
 /**
  * Strips [contenteditable] to allow cross-element selection, then restores it on the next `eventType`.
  * `initialAnchorSpinButton` is the spinbutton resolved from bounding-box geometry before CE is stripped —
@@ -139,6 +146,18 @@ export declare function getCrossExpressionElements(selection: Selection, inputRe
  * @internal
  */
 export declare function focusExpression(expressionElement: HTMLSpanElement, range?: Range): void;
+/**
+ * Returns the character offset of the cursor within `expressionElement`, or
+ * `undefined` when no selection is active inside the element.
+ * @internal
+ */
+export declare function getExpressionCursorOffset(expressionElement: Element): number | undefined;
+/**
+ * Places the cursor at `offset` characters into `expressionElement`.
+ * Clamps to the element's text length when `offset` exceeds it.
+ * @internal
+ */
+export declare function restoreExpressionCursorOffset(expressionElement: HTMLSpanElement, offset: number): void;
 /**
  * Deletes the selected range within a single expression input, collapses the
  * cursor to the deletion point, and fires an input event so the expression
@@ -156,10 +175,6 @@ export declare function planBulkClear(selection: Selection, inputRefs: RefObject
     snapshot: SpinButtonSnapshotEntry[];
     affectedExpressionRefs: RefObject<DateTimeInputRef>[];
     expressionFallbacks: Map<RefObject<DateTimeInputRef>, string>;
-    clearedExpressions: Array<{
-        inputRef: RefObject<DateTimeInputRef>;
-        previousText: string;
-    }>;
 };
 /**
  * Deletes the selected portion across two expression inputs using two separate

package/forms/date-time-range-picker/selection-helpers.js

@@ -39,11 +39,14 @@ __export(selection_helpers_exports, {
   findFirstExpressionFocusTarget: () => findFirstExpressionFocusTarget,
   focusExpression: () => focusExpression,
   getCrossExpressionElements: () => getCrossExpressionElements,
+  getExpressionCursorOffset: () => getExpressionCursorOffset,
   getFirstSnapshotHandler: () => getFirstSnapshotHandler,
   getLastSnapshotHandler: () => getLastSnapshotHandler,
   getPartialExpressionElement: () => getPartialExpressionElement,
+  peekPreRestoreEndpoints: () => peekPreRestoreEndpoints,
   planBulkClear: () => planBulkClear,
   removeContentEditable: () => removeContentEditable,
+  restoreExpressionCursorOffset: () => restoreExpressionCursorOffset,
   restoreFocusAfterBulkClear: () => restoreFocusAfterBulkClear,
   restoreSpinButtonSnapshot: () => restoreSpinButtonSnapshot
 });
@@ -179,8 +182,25 @@ function findPreviousCharacterPosition(root, node, offset) {
   }
   return { node: prev, offset: prev.nodeValue.length - 1 };
 }
+function isEmptyPlaceholderSpinButton(node) {
+  return node instanceof Element && node.getAttribute("role") === "spinbutton" && node.childNodes.length === 0;
+}
+function createSelectionPositionWalker(root) {
+  return document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+        return isEmptyPlaceholderSpinButton(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      }
+    }
+  );
+}
 function findFirstCharacterPosition(root) {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  const walker = createSelectionPositionWalker(root);
   let current = walker.firstChild();
   while (current !== null) {
     if (checkIfValueTypeAlignment(current)) {
@@ -191,11 +211,12 @@ function findFirstCharacterPosition(root) {
   return null;
 }
 function findLastCharacterPosition(root) {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  const walker = createSelectionPositionWalker(root);
   let current = walker.lastChild();
   while (current !== null) {
     if (checkIfValueTypeAlignment(current)) {
-      return { node: current, offset: current.nodeValue?.length ?? 0 };
+      const offset = current.nodeType === Node.TEXT_NODE ? current.nodeValue?.length ?? 0 : 0;
+      return { node: current, offset };
     }
     current = walker.previousNode();
   }
@@ -205,13 +226,27 @@ function compareSelectionPoints(firstNode, firstOffset, secondNode, secondOffset
   if (firstNode === secondNode) {
     return firstOffset - secondOffset;
   }
+  if (firstNode.getRootNode() !== secondNode.getRootNode()) {
+    return 0;
+  }
   const firstRange = document.createRange();
   firstRange.setStart(firstNode, firstOffset);
   firstRange.collapse(true);
   const secondRange = document.createRange();
   secondRange.setStart(secondNode, secondOffset);
   secondRange.collapse(true);
-  return firstRange.compareBoundaryPoints(Range.START_TO_START, secondRange);
+  try {
+    return firstRange.compareBoundaryPoints(Range.START_TO_START, secondRange);
+  } catch {
+    const pos = firstNode.compareDocumentPosition(secondNode);
+    if (pos & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (pos & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  }
 }
 function selectionOverlapsSpinButton(selectionStartNode, selectionStartOffset, selectionEndNode, selectionEndOffset, spinButton) {
   const spinButtonStart = findFirstCharacterPosition(spinButton);
@@ -280,39 +315,46 @@ function consumePreRestoreEndpoints(root) {
   lastPreRestoreEndpoints.delete(root);
   return stash;
 }
+function shouldBypassRestore(e) {
+  if (["Meta", "Control", "Alt", "Shift"].includes(e.key)) {
+    return true;
+  }
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+    return true;
+  }
+  return e.shiftKey && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(
+    e.key
+  );
+}
+function tryCollapseArrow(e, root) {
+  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey || e.key !== "ArrowLeft" && e.key !== "ArrowRight") {
+    return false;
+  }
+  const collapsed = collapseMultiElementSelection(
+    root,
+    e.key === "ArrowLeft" ? "left" : "right"
+  );
+  if (collapsed) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  return collapsed;
+}
+function peekPreRestoreEndpoints(root) {
+  return lastPreRestoreEndpoints.get(root);
+}
 function deferContentEditableRestore(root) {
   pendingRestoreSignals.get(root)?.abort();
   const restoreSignal = new AbortController();
   pendingRestoreSignals.set(root, restoreSignal);
   function handler(e) {
     if (e instanceof KeyboardEvent) {
-      if (["Meta", "Control", "Alt", "Shift"].includes(e.key)) {
+      if (shouldBypassRestore(e)) {
         return;
       }
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+      if (tryCollapseArrow(e, root)) {
         return;
       }
-      if (e.shiftKey && [
-        "ArrowLeft",
-        "ArrowRight",
-        "ArrowUp",
-        "ArrowDown",
-        "Home",
-        "End"
-      ].includes(e.key)) {
-        return;
-      }
-      if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-        const collapsed = collapseMultiElementSelection(
-          root,
-          e.key === "ArrowLeft" ? "left" : "right"
-        );
-        if (collapsed) {
-          e.preventDefault();
-          e.stopPropagation();
-          return;
-        }
-      }
     }
     const selection = globalThis.getSelection();
     const anchorNode = selection?.anchorNode ?? null;
@@ -320,7 +362,7 @@ function deferContentEditableRestore(root) {
     const focusNode = selection?.focusNode ?? null;
     const focusOffset = selection?.focusOffset ?? 0;
     const hasMultiElementSelection = selection !== null && anchorNode !== null && focusNode !== null && anchorNode !== focusNode && selection.toString().length > 0;
-    if (hasMultiElementSelection && anchorNode && focusNode) {
+    if (hasMultiElementSelection && anchorNode && focusNode && e instanceof KeyboardEvent) {
       lastPreRestoreEndpoints.set(root, {
         anchorNode,
         anchorOffset,
@@ -333,12 +375,26 @@ function deferContentEditableRestore(root) {
     restoreSignal.abort();
     if (hasMultiElementSelection && anchorNode && focusNode) {
       try {
-        selection?.setBaseAndExtent(
-          anchorNode,
-          anchorOffset,
-          focusNode,
-          focusOffset
-        );
+        const anchorIsEmpty = isEmptyPlaceholderSpinButton(anchorNode);
+        const focusIsEmpty = isEmptyPlaceholderSpinButton(focusNode);
+        if (anchorIsEmpty && !focusIsEmpty && focusNode.nodeType === Node.TEXT_NODE) {
+          selection?.setBaseAndExtent(focusNode, 0, focusNode, focusOffset);
+        } else if (focusIsEmpty && !anchorIsEmpty && anchorNode.nodeType === Node.TEXT_NODE) {
+          const anchorTextLength = anchorNode.nodeValue?.length ?? anchorOffset;
+          selection?.setBaseAndExtent(
+            anchorNode,
+            anchorOffset,
+            anchorNode,
+            anchorTextLength
+          );
+        } else if (!anchorIsEmpty && !focusIsEmpty) {
+          selection?.setBaseAndExtent(
+            anchorNode,
+            anchorOffset,
+            focusNode,
+            focusOffset
+          );
+        }
       } catch (error) {
         warnSelectionFailed(
           "setBaseAndExtent failed when restoring selection after CE re-attach",
@@ -575,17 +631,36 @@ function findSpinButtonSnappedPosition(root, anchorNode, anchorOffset, focusNode
     if (!nextSB) {
       return null;
     }
-    return isGrowing ? findLastCharacterPosition(nextSB) : findFirstCharacterPosition(nextSB);
+    if (isGrowing) {
+      return findLastCharacterPosition(nextSB) ?? { node: nextSB, offset: 0 };
+    }
+    return findFirstCharacterPosition(nextSB) ?? { node: nextSB, offset: 0 };
   }
   const prevSB = allSBs[idx - 1] ?? null;
   if (!prevSB) {
     return null;
   }
-  return isGrowing ? findFirstCharacterPosition(prevSB) : findLastCharacterPosition(prevSB);
+  if (isGrowing) {
+    return findFirstCharacterPosition(prevSB) ?? { node: prevSB, offset: 0 };
+  }
+  return findLastCharacterPosition(prevSB) ?? { node: prevSB, offset: 0 };
 }
 function extendSelection(key) {
   const selection = globalThis.getSelection();
-  if (selection === null || selection.anchorNode === null || selection.focusNode === null || selection.rangeCount < 1) {
+  if (selection === null) {
+    return;
+  }
+  const activeElement = globalThis.document?.activeElement;
+  const hasMissingEndpoints = selection.anchorNode === null || selection.focusNode === null;
+  if (hasMissingEndpoints && isEmptyPlaceholderSpinButton(activeElement)) {
+    selection.setBaseAndExtent(
+      activeElement,
+      0,
+      activeElement,
+      0
+    );
+  }
+  if (selection.anchorNode === null || selection.focusNode === null || selection.rangeCount < 1) {
     return;
   }
   const anchorNode = selection.anchorNode;
@@ -656,7 +731,8 @@ function extendSelection(key) {
   if (crossesBoundary) {
     let resolvedAnchorNode = anchorNode;
     let resolvedAnchorOffset = anchorOffset;
-    if (anchorNode.nodeType !== Node.TEXT_NODE && anchorSB) {
+    const anchorSpinButtonHasContent = anchorSB !== null && anchorSB.childNodes.length > 0;
+    if (anchorNode.nodeType !== Node.TEXT_NODE && anchorSpinButtonHasContent) {
       const anchorBeforeFocus = compareSelectionPoints(
         anchorNode,
         anchorOffset,
@@ -1062,6 +1138,32 @@ function getOffsetWithinExpression(expressionElement, container, offset) {
   range.setEnd(container, offset);
   return range.toString().length;
 }
+function getExpressionCursorOffset(expressionElement) {
+  const sel = window.getSelection();
+  if (!sel?.rangeCount) {
+    return void 0;
+  }
+  const range = sel.getRangeAt(0);
+  if (!expressionElement.contains(range.endContainer)) {
+    return void 0;
+  }
+  return getOffsetWithinExpression(
+    expressionElement,
+    range.endContainer,
+    range.endOffset
+  );
+}
+function restoreExpressionCursorOffset(expressionElement, offset) {
+  const textNode = expressionElement.firstChild;
+  const sel = window.getSelection();
+  if (textNode instanceof Text && sel) {
+    const range = document.createRange();
+    range.setStart(textNode, Math.min(offset, textNode.length));
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}
 function deletePartialExpression(selection, expressionElement) {
   const range = selection.getRangeAt(0);
   const text = expressionElement.textContent ?? "";
@@ -1091,18 +1193,15 @@ function deletePartialExpression(selection, expressionElement) {
   expressionElement.dispatchEvent(new InputEvent("input", { bubbles: true }));
 }
 function planBulkClear(selection, inputRefs, endpointsOverride) {
-  const anchorNode = endpointsOverride?.anchorNode ?? selection.anchorNode;
-  const anchorOffset = endpointsOverride?.anchorOffset ?? selection.anchorOffset;
-  const focusNode = endpointsOverride?.focusNode ?? selection.focusNode;
-  const focusOffset = endpointsOverride?.focusOffset ?? selection.focusOffset;
+  const validOverride = endpointsOverride?.anchorNode.isConnected && endpointsOverride?.focusNode.isConnected ? endpointsOverride : void 0;
+  const anchorNode = validOverride?.anchorNode ?? selection.anchorNode;
+  const anchorOffset = validOverride?.anchorOffset ?? selection.anchorOffset;
+  const focusNode = validOverride?.focusNode ?? selection.focusNode;
+  const focusOffset = validOverride?.focusOffset ?? selection.focusOffset;
   const affectedExpressionRefs = inputRefs.filter((ref) => {
     const expressionInputRef = ref.current?.expressionInputRef;
     return expressionInputRef && (expressionInputRef.contains(anchorNode) || expressionInputRef.contains(focusNode));
   });
-  const clearedExpressions = affectedExpressionRefs.map((ref) => ({
-    inputRef: ref,
-    previousText: ref.current?.inputRef?.value ?? ref.current?.expressionInputRef?.textContent ?? ""
-  }));
   const anchorInExpression = affectedExpressionRefs.some(
     (ref) => ref.current?.expressionInputRef?.contains(anchorNode)
   );
@@ -1119,8 +1218,7 @@ function planBulkClear(selection, inputRefs, endpointsOverride) {
   return {
     snapshot,
     affectedExpressionRefs,
-    expressionFallbacks: findExpressionFallbacks(snapshot),
-    clearedExpressions
+    expressionFallbacks: findExpressionFallbacks(snapshot)
   };
 }
 function deleteCrossExpressionPartial(selection, [firstExpressionElement, lastExpressionElement]) {

package/forms/date-time-range-picker/types.d.ts

@@ -120,6 +120,11 @@ export type DateTimeInputProps = FormControlProps<TimeValue | null, (value: Time
      * @defaultValue 'startOfDay'
      */
     dateOnlyPasteAnchor?: 'startOfDay' | 'endOfDay';
+    /**
+     * ISO datetime used as the date when the user types a partial time (e.g. "18:").
+     * Defaults to today when not provided.
+     */
+    partialTimeAnchorDate?: string | null;
     /**
      * Called after a complete value was successfully pasted.
      */
@@ -143,6 +148,18 @@ export type DateTimeInputRef = Omit<FormControlRef<HTMLSpanElement>, 'inputRef'>
      * expression input with the supplied text.
      */
     readonly setExpressionValue: (text: string) => void;
+    /**
+     * Clears the pending paste undo snapshot so that a subsequent Ctrl+Z cannot
+     * revert a paste that has already been superseded by another edit.
+     */
+    readonly clearPasteUndo: () => void;
+    /**
+     * Programmatically applies pasted text to this input using the same logic
+     * as a user paste event.
+     * Pass `skipUndoCapture: true` when the caller already owns the undo
+     * snapshot (e.g. from the range-level paste handler).
+     */
+    readonly pasteText: (text: string, skipUndoCapture?: boolean) => void;
 };
 /**
  * Props of the DateRangeSelector value.