@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -34,6 +34,7 @@ var import_useDateTimePicker = require("../../date-time-picker/hooks/useDateTime
 var import_timeParser = require("../../forms-core/time/timeParser.js");
 var import_useSelection = require("../../spin-buttons/hooks/useSelection.js");
 var import_helpers2 = require("../helpers.js");
+var import_selection_helpers = require("../selection-helpers.js");
 function isNumberSpinButton(handler) {
   return handler?.type === "number";
 }
@@ -97,7 +98,8 @@ const useDateTimeInput = (props, expressionInputRef) => {
     onLeadingEdge,
     onTrailingEdge,
     dateOnlyPasteAnchor = "startOfDay",
-    onPasteComplete
+    onPasteComplete,
+    partialTimeAnchorDate
   } = props;
   const precision = (0, import_useTimeframeStore.useDateTimePickerStore)(
     (state) => state.precision !== "day" ? state.precision : "milliseconds"
@@ -182,6 +184,25 @@ const useDateTimeInput = (props, expressionInputRef) => {
     [setValue]
   );
   const prevAbsoluteDateRef = (0, import_react.useRef)(null);
+  const formatExpressionValue = (0, import_react.useCallback)(
+    (value2) => {
+      if (!expressionInputRef.current) {
+        return;
+      }
+      const formattedValue = value2 ? (0, import_timeParser.formatTimeValue)(value2) : "";
+      const currentValue = (0, import_timeParser.formatTimeValue)(
+        expressionInputRef.current?.textContent ?? ""
+      );
+      if (currentValue !== formattedValue) {
+        expressionInputRef.current.textContent = formattedValue;
+      }
+    },
+    // no use in adding the expressionInputRef to the dep. array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const spinButtonHandlersRef = (0, import_react.useRef)(spinButtonHandlers);
+  spinButtonHandlersRef.current = spinButtonHandlers;
   (0, import_react.useEffect)(() => {
     const prevValue = prevValueRef.current;
     prevValueRef.current = value;
@@ -216,8 +237,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
       applyDateTime(value.absoluteDate);
     }
   }, [value]);
-  const spinButtonHandlersRef = (0, import_react.useRef)(spinButtonHandlers);
-  spinButtonHandlersRef.current = spinButtonHandlers;
   const focusFirstUnfilledSpinButton = (0, import_react.useCallback)(
     (filledParts) => {
       const handlers = spinButtonHandlersRef.current;
@@ -250,23 +269,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
     });
   }, [valueType, focusFirstUnfilledSpinButton]);
   const { selectAll: expressionInputSelectAll } = (0, import_useSelection.useSelection)(expressionInputRef);
-  const formatExpressionValue = (0, import_react.useCallback)(
-    (value2) => {
-      if (!expressionInputRef.current) {
-        return;
-      }
-      const formattedValue = value2 ? (0, import_timeParser.formatTimeValue)(value2) : "";
-      const currentValue = (0, import_timeParser.formatTimeValue)(
-        expressionInputRef.current?.textContent ?? ""
-      );
-      if (currentValue !== formattedValue) {
-        expressionInputRef.current.textContent = formattedValue;
-      }
-    },
-    // no use in adding the expressionInputRef to the dep. array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
   const expressionInputHandler = (0, import_react.useCallback)(() => {
     if (!expressionInputRef.current) {
       return;
@@ -301,12 +303,12 @@ const useDateTimeInput = (props, expressionInputRef) => {
       if (colonMatch) {
         const hour = Number.parseInt(colonMatch[1]);
         if (hour <= 23) {
-          const now = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)());
+          const base = partialTimeAnchorDate ? new import_tz.TZDateMini(partialTimeAnchorDate, (0, import_user_preferences.getTimezone)()) : import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)());
           const iso = import_tz.TZDateMini.tz(
             (0, import_user_preferences.getTimezone)(),
-            now.getFullYear(),
-            now.getMonth(),
-            now.getDate(),
+            base.getFullYear(),
+            base.getMonth(),
+            base.getDate(),
             hour,
             0,
             0,
@@ -382,20 +384,14 @@ const useDateTimeInput = (props, expressionInputRef) => {
       }
     }
   }, [value]);
-  const onPaste = (0, import_react.useCallback)(
-    (event) => {
+  const pasteText = (0, import_react.useCallback)(
+    (text, skipUndoCapture = false) => {
       if (readOnly) {
-        return;
+        return false;
       }
-      const data = event.clipboardData?.getData("text/plain");
-      if (!data) {
-        event.preventDefault();
-        return;
-      }
-      let trimmedData = (0, import_helpers2.normalizeISOInput)(data.trim());
+      let trimmedData = (0, import_helpers2.normalizeISOInput)(text.trim());
       if (!trimmedData) {
-        event.preventDefault();
-        return;
+        return true;
       }
       const partialDate = (0, import_helpers2.tryParsePartialDate)(trimmedData);
       const partialTime = (0, import_helpers2.tryParsePartialTime)(trimmedData);
@@ -403,16 +399,19 @@ const useDateTimeInput = (props, expressionInputRef) => {
       if (partialResult && !partialResult.partsToUpdate) {
         trimmedData = partialResult.iso;
       }
-      const snapshot = (0, import_helpers2.captureUndoSnapshot)(
-        spinButtonHandlers,
-        expressionInputRef.current,
-        value,
-        valueType
-      );
-      pasteUndoRef.current = {
-        snapshot,
-        focusTarget: document.activeElement
-      };
+      if (!skipUndoCapture) {
+        const snapshot = (0, import_helpers2.captureUndoSnapshot)(
+          spinButtonHandlers,
+          expressionInputRef.current,
+          value,
+          valueType
+        );
+        pasteUndoRef.current = {
+          snapshot,
+          focusTarget: document.activeElement,
+          expressionCursorOffset: expressionInputRef.current ? (0, import_selection_helpers.getExpressionCursorOffset)(expressionInputRef.current) : void 0
+        };
+      }
       const dateOnly = (0, import_helpers2.parseDateOnlyToISO)(trimmedData, dateOnlyPasteAnchor);
       const timeOnly = (0, import_helpers2.parseTimeOnlyToISO)(trimmedData);
       const date = dateOnly ?? timeOnly;
@@ -428,8 +427,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
         } else {
           onPasteComplete?.();
         }
-        event.preventDefault();
-        return;
+        return true;
       }
       const nextValue = (0, import_units.parseTimeAsTimeValue)(
         trimmedData,
@@ -446,16 +444,20 @@ const useDateTimeInput = (props, expressionInputRef) => {
           applyDateTime(nextValue.absoluteDate);
         }
         onPasteComplete?.();
-        event.preventDefault();
-        return;
+        return true;
       }
       if (valueType === "iso8601" && /^\d+$/.test(trimmedData)) {
-        return;
+        return false;
       }
       if (partialResult?.partsToUpdate) {
         const { iso, partsToUpdate } = partialResult;
         setValueType("iso8601");
         applyDateTime(iso, partsToUpdate);
+        for (const [key, handler] of spinButtonHandlersRef.current) {
+          if (handler && !partsToUpdate.has(key)) {
+            handler.clearValue(true);
+          }
+        }
         if (hasAnyEmptySpinButton(spinButtonHandlersRef)) {
           requestAnimationFrame(() => {
             focusFirstUnfilledSpinButton(partsToUpdate);
@@ -463,8 +465,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
         } else {
           onPasteComplete?.();
         }
-        event.preventDefault();
-        return;
+        return true;
       }
       if (valueType === "expression") {
         if (expressionInputRef.current) {
@@ -481,7 +482,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
           );
         }
       }
-      event.preventDefault();
+      return true;
     },
     [
       readOnly,
@@ -499,12 +500,34 @@ const useDateTimeInput = (props, expressionInputRef) => {
       focusFirstUnfilledSpinButton
     ]
   );
+  const onPaste = (0, import_react.useCallback)(
+    (event) => {
+      const data = event.clipboardData?.getData("text/plain");
+      if (!data) {
+        event.preventDefault();
+        return;
+      }
+      if (pasteText(data)) {
+        event.preventDefault();
+      }
+    },
+    [pasteText]
+  );
   const onPasteUndoKeyDown = (0, import_react.useCallback)(
     (event) => {
-      if (!(event.ctrlKey || event.metaKey) || event.key !== "z" || !pasteUndoRef.current) {
+      const isCtrlZ = (event.ctrlKey || event.metaKey) && event.key === "z";
+      if (!isCtrlZ) {
+        if (pasteUndoRef.current && (0, import_helpers2.isContentModifyingKey)(event)) {
+          pasteUndoRef.current = null;
+        }
+        return;
+      }
+      if (!pasteUndoRef.current) {
+        event.preventDefault();
+        event.stopPropagation();
         return;
       }
-      const { snapshot, focusTarget } = pasteUndoRef.current;
+      const { snapshot, focusTarget, expressionCursorOffset } = pasteUndoRef.current;
       pasteUndoRef.current = null;
       event.preventDefault();
       event.stopPropagation();
@@ -535,6 +558,12 @@ const useDateTimeInput = (props, expressionInputRef) => {
         if (focusTarget instanceof HTMLElement && focusTarget !== document.activeElement) {
           focusTarget.focus();
         }
+        if (snapshot.valueType === "expression" && expressionCursorOffset !== void 0 && expressionInputRef.current) {
+          (0, import_selection_helpers.restoreExpressionCursorOffset)(
+            expressionInputRef.current,
+            expressionCursorOffset
+          );
+        }
       });
     },
     [
@@ -553,19 +582,19 @@ const useDateTimeInput = (props, expressionInputRef) => {
         return;
       }
       if (onLeadingEdge && event.key === "Backspace" && (expressionInputRef.current?.textContent ?? "") === "") {
-        onLeadingEdge?.();
         event.preventDefault();
+        requestAnimationFrame(() => onLeadingEdge?.());
         return;
       }
       if (onTrailingEdge && event.key === "Delete" && (expressionInputRef.current?.textContent ?? "") === "") {
-        onTrailingEdge?.();
         event.preventDefault();
+        requestAnimationFrame(() => onTrailingEdge?.());
         return;
       }
       if (event.key === "ArrowLeft" && onLeadingEdge) {
         const selection = window.getSelection();
         if (selection?.anchorOffset === 0 && selection?.focusOffset === 0) {
-          onLeadingEdge?.();
+          onLeadingEdge();
           event.preventDefault();
           return;
         }
@@ -690,7 +719,11 @@ const useDateTimeInput = (props, expressionInputRef) => {
     expressionOnBlurHandler,
     expressionOnKeyDownHandler,
     onPaste,
+    pasteText,
     onPasteUndoKeyDown,
+    clearPasteUndo: () => {
+      pasteUndoRef.current = null;
+    },
     focus,
     switchToExpressionMode,
     setInputValue

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

@@ -27,25 +27,31 @@ var import_tz = require("@date-fns/tz");
 var import_date_fns = require("date-fns");
 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_helpers = require("./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 (capturing && (0, import_helpers.checkIfValueTypeAlignment)(currentNode)) {
+      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

@@ -1,8 +1,7 @@
 import type { RefObject } from 'react';
 import type { DateTimeInputRef } from './types.js';
 import type { SpinButtonHandler } from '../spin-buttons/spin-button-group/types.js';
-/** @internal */
-export declare function checkIfValueTypeAlignment(textNode: Node): boolean;
+export declare function safeSetBaseAndExtent(selection: Selection | null | undefined, { anchorNode, anchorOffset, focusNode, focusOffset }: SelectionEndpoints, warnMessage: string): void;
 /**
  * Endpoints captured by `deferContentEditableRestore` before re-attaching CE.
  * Safari clips the live selection to the active CE host after CE re-attachment,
@@ -24,6 +23,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 +145,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 +174,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