@dynatrace/strato-components 3.5.0 → 3.6.0

package/forms/date-time-range-picker/DateTimeRangePickerRoot.js

@@ -41,6 +41,7 @@ var styles = __toESM(require("./DateTimeRangePicker.sty.js"));
 var import_expression_trigger_helpers = require("./expression-trigger-helpers.js");
 var import_useDateTimeRangePicker = require("./hooks/useDateTimeRangePicker.js");
 var import_selection_copy_helpers = require("./selection-copy-helpers.js");
+var import_selection_helpers = require("./selection-helpers.js");
 var import_useSelectionInteractionHandlers = require("./useSelectionInteractionHandlers.js");
 var import_Button = require("../../buttons/button/Button.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
@@ -59,7 +60,7 @@ var import_FormFieldMessageContext = require("../forms-core/contexts/FormFieldMe
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
-function isInputInSelectionOrFocused(ref) {
+function isInputInSelectionOrFocused(ref, preRestoreEndpoints) {
   const element = ref.current?.element;
   if (!element) {
     return false;
@@ -68,11 +69,12 @@ function isInputInSelectionOrFocused(ref) {
     return true;
   }
   const selection = window.getSelection();
-  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
-    return false;
+  if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {
+    if (selection.getRangeAt(0).intersectsNode(element)) {
+      return true;
+    }
   }
-  const range = selection.getRangeAt(0);
-  return range.intersectsNode(element);
+  return !!preRestoreEndpoints && (element.contains(preRestoreEndpoints.anchorNode) || element.contains(preRestoreEndpoints.focusNode));
 }
 function focusExpressionInputAtEnd(ref) {
   const expressionElement = ref.current?.expressionInputRef;
@@ -245,10 +247,20 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
         handleSelectionKeyDown(event);
         return;
       }
+      const preRestoreEndpoints = (0, import_selection_helpers.peekPreRestoreEndpoints)(
+        event.currentTarget
+      );
       const fromInputIsIso = dateTimeFromRef.current?.element?.getAttribute("data-valuetype") === "iso8601";
       const toInputIsIso = dateTimeToRef.current?.element?.getAttribute("data-valuetype") === "iso8601";
-      const switchFromToExpression = isInputInSelectionOrFocused(dateTimeFromRef) && fromInputIsIso;
-      const switchToToExpression = isInputInSelectionOrFocused(dateTimeToRef) && toInputIsIso;
+      const bothInSelection = isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) && isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints);
+      if (bothInSelection && (0, import_expression_trigger_helpers.isExpressionTriggerKey)(event)) {
+        setValue(null);
+        if (dateTimeToRef.current?.expressionInputRef) {
+          dateTimeToRef.current.expressionInputRef.textContent = "";
+        }
+      }
+      const switchFromToExpression = isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) && fromInputIsIso;
+      const switchToToExpression = isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) && toInputIsIso;
       if ((0, import_expression_trigger_helpers.isExpressionTriggerKey)(event) && (switchFromToExpression || switchToToExpression)) {
         const char = event.key;
         const primaryRef = switchFromToExpression ? dateTimeFromRef : dateTimeToRef;
@@ -260,7 +272,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
         event.stopPropagation();
         return;
       }
-      if (isInputInSelectionOrFocused(dateTimeFromRef) && isInputInSelectionOrFocused(dateTimeToRef) && !fromInputIsIso && !toInputIsIso && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      if (isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) && isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) && !fromInputIsIso && !toInputIsIso && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
         const char = event.key;
         const fromExpressionElement = dateTimeFromRef.current?.expressionInputRef;
         const toExpressionElement = dateTimeToRef.current?.expressionInputRef;
@@ -433,6 +445,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
                     controlId: id,
                     onTrailingEdge: handleFromTrailingEdge,
                     onTrailingOverflow: handleFromTrailingOverflow,
+                    partialTimeAnchorDate: value?.to?.absoluteDate || void 0,
                     onPasteComplete: () => {
                       dateTimeToRef.current?.focus?.();
                     }
@@ -459,6 +472,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
                     required,
                     onLeadingEdge: handleToLeadingEdge,
                     dateOnlyPasteAnchor: "endOfDay",
+                    partialTimeAnchorDate: value?.from?.absoluteDate || void 0,
                     onPasteComplete: () => {
                       requestAnimationFrame(() => {
                         dateTimeToRef.current?.focusLast();

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

@@ -28,12 +28,25 @@ export declare function parseDateOnlyToISO(input: string, anchor?: 'startOfDay'
  * @internal
  */
 export declare const captureUndoSnapshot: (spinButtonHandlers: Map<keyof Intl.DateTimeFormatPartTypesRegistry, SpinButtonHandler | null | undefined>, expressionRef: HTMLSpanElement | null | undefined, value: TimeValue | null, valueType: "expression" | "iso8601") => UndoSnapshot;
+/**
+ * Returns true if the keyboard event represents a key that could modify input
+ * content (printable characters, arrows that change spinbutton values,
+ * deletion keys).
+ * @internal
+ */
+export declare function isContentModifyingKey(event: {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}): boolean;
 type DateFieldType = 'day' | 'month' | 'year';
 export type PartialDate = Partial<Record<DateFieldType, number>>;
 /**
  * Extracts a partial date from an input string using the user's regional date format.
  * Returns a `PartialDate` with `day`, `month`, and/or `year` fields mapped according
- * to the locale's field order. Handles incomplete inputs like `"12/"` or `"12.2024"`.
+ * to the locale's field order. Handles incomplete inputs like `"12/"` or `"12.2024"`,
+ * and treats placeholder tokens (e.g. the `MM` in `"25/MM/2024"`) as intentionally
+ * empty fields so the corresponding spin buttons are left untouched.
  * Returns `null` if no date pattern is found.
  * @internal
  */
@@ -45,7 +58,9 @@ export type PartialTime = Partial<Record<TimeFieldType, number>> & {
 /**
  * Extracts a partial time from an input string using the user's regional time format.
  * Returns a `PartialTime` with `hour`, `minute`, `second`, `millisecond`, and/or
- * `dayPeriod` fields. Requires two-digit hours, minutes, and seconds.
+ * `dayPeriod` fields. Requires two-digit hours, minutes, and seconds for digit
+ * inputs, and accepts placeholder tokens (e.g. the `mm` in `"14:mm"`) for fields
+ * the user intentionally left empty.
  * For 12-hour locales, optionally matches the locale-specific AM/PM label.
  * Returns `null` if no time pattern is found.
  * @internal
@@ -65,10 +80,13 @@ export type PartialDateTimeResult = {
  * Converts partial date and/or time objects into an ISO-compatible string.
  *
  * - Complete date + complete time → full ISO datetime (no `partsToUpdate`).
- * - Complete date only → `"YYYY-MM-DD"` (no `partsToUpdate`).
- * - Complete time only → `"HH:MM[:SS[.mmm]]"` (no `partsToUpdate`).
+ * - Complete date only (time absent) → `"YYYY-MM-DD"` (no `partsToUpdate`).
+ * - Complete time only (date absent) → `"HH:MM[:SS[.mmm]]"` (no `partsToUpdate`).
  * - Partial fields → ISO string with defaults filled in, plus a `partsToUpdate`
  *   set that lists only the spin button parts that should actually be applied.
+ *   Inputs with placeholder tokens for the missing side (e.g. `"25/12/2024 HH:mm"`)
+ *   take this path so the corresponding spin buttons are left untouched rather
+ *   than auto-filled with `00:00` or "now".
  * - No fields at all → `null`.
  *
  * A date is "complete" when it has `day`, `month`, and `year`.

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

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var helpers_exports = {};
 __export(helpers_exports, {
   captureUndoSnapshot: () => captureUndoSnapshot,
+  isContentModifyingKey: () => isContentModifyingKey,
   normalizeISOInput: () => normalizeISOInput,
   parseDateOnlyToISO: () => parseDateOnlyToISO,
   parseTimeOnlyToISO: () => parseTimeOnlyToISO,
@@ -140,11 +141,23 @@ const captureUndoSnapshot = (spinButtonHandlers, expressionRef, value, valueType
     expressionText: expressionRef?.textContent ?? ""
   };
 };
+function isContentModifyingKey(event) {
+  if (event.ctrlKey || event.metaKey) {
+    return false;
+  }
+  if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Backspace" || event.key === "Delete") {
+    return true;
+  }
+  if (event.key.length === 1) {
+    return true;
+  }
+  return false;
+}
 function isDateFieldPart(part) {
   return part.type === "day" || part.type === "month" || part.type === "year";
 }
 function getRegionalDateFormat() {
-  const parts = new Intl.DateTimeFormat((0, import_user_preferences.getRegionalFormat)(), {
+  const parts = new Intl.DateTimeFormat((0, import_helpers.getSafeRegionalFormat)(), {
     year: "numeric",
     month: "2-digit",
     day: "2-digit"
@@ -153,11 +166,22 @@ function getRegionalDateFormat() {
   const fieldOrder = parts.filter(isDateFieldPart).map((p) => p.type);
   return { delimiter, fieldOrder };
 }
+const PLACEHOLDER_TOKEN_PATTERN = "[A-Za-z]{1,4}";
+function orPlaceholder(numericPattern) {
+  return `${numericPattern}|${PLACEHOLDER_TOKEN_PATTERN}`;
+}
+function isPlaceholderToken(value) {
+  return /^[A-Za-z]+$/.test(value);
+}
 function tryParsePartialDate(input) {
   const { delimiter, fieldOrder } = getRegionalDateFormat();
   const escapedDelimiter = delimiter.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const regex = new RegExp(
-    `(?<=^|[\\s,])(\\d{1,4})${escapedDelimiter}(\\d{1,4})${escapedDelimiter}?(\\d{1,4})?(?=[\\s,]|$)`
+    `(?<=^|[\\s,])(${orPlaceholder(
+      "\\d{1,4}"
+    )})${escapedDelimiter}(${orPlaceholder(
+      "\\d{1,4}"
+    )})${escapedDelimiter}?(${orPlaceholder("\\d{1,4}")})?(?=[\\s,]|$)`
   );
   const match = regex.exec(input);
   if (!match) {
@@ -166,11 +190,12 @@ function tryParsePartialDate(input) {
   const rawValues = [match[1], match[2], match[3]].filter(
     (value) => value !== void 0
   );
+  const looksLikeYear = (value) => value.length === 4;
   const hasDisplacedYear = rawValues.some(
-    (value, index) => value.length === 4 && fieldOrder[index] !== "year"
+    (value, index) => looksLikeYear(value) && fieldOrder[index] !== "year"
   );
   const isYearFirstLocale = fieldOrder[0] === "year";
-  const hasNoExplicitYear = !rawValues.some((value) => value.length === 4);
+  const hasNoExplicitYear = !rawValues.some(looksLikeYear);
   const fields = hasDisplacedYear || isYearFirstLocale && hasNoExplicitYear ? fieldOrder.slice(fieldOrder.length - rawValues.length) : fieldOrder.slice(0, rawValues.length);
   const maxDigits = {
     year: 4,
@@ -181,6 +206,9 @@ function tryParsePartialDate(input) {
   for (let i = 0; i < fields.length; i++) {
     const raw = rawValues[i];
     const field = fields[i];
+    if (isPlaceholderToken(raw)) {
+      continue;
+    }
     if (raw.length > maxDigits[field]) {
       return null;
     }
@@ -196,7 +224,7 @@ function tryParsePartialDate(input) {
   return result;
 }
 function getRegionalTimeFormat() {
-  const parts = new Intl.DateTimeFormat((0, import_user_preferences.getRegionalFormat)(), {
+  const parts = new Intl.DateTimeFormat((0, import_helpers.getSafeRegionalFormat)(), {
     hour: "numeric",
     minute: "2-digit"
   }).formatToParts(/* @__PURE__ */ new Date());
@@ -204,23 +232,32 @@ function getRegionalTimeFormat() {
   const dayPeriodValues = (0, import_helpers.getDayPeriodValues)();
   return { is12Hour: hasDayPeriod, dayPeriodValues };
 }
+function parseTimeField(raw) {
+  if (raw === void 0 || isPlaceholderToken(raw)) {
+    return void 0;
+  }
+  return parseInt(raw);
+}
 function tryParsePartialTime(input) {
   const { is12Hour, dayPeriodValues } = getRegionalTimeFormat();
   const escapedPeriods = dayPeriodValues.map(
     (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
   );
-  const dayPeriodPattern = is12Hour ? `(?:\\s*(${escapedPeriods.join("|")}))?` : "";
+  const dayPeriodPattern = is12Hour ? `(?:\\s*(${escapedPeriods.join("|")}|[A-Za-z]+))?` : "";
+  const hourPattern = orPlaceholder("[01]?\\d|2[0-3]");
+  const minuteOrSecondPattern = orPlaceholder("[0-5]\\d");
+  const millisecondPattern = orPlaceholder("\\d{1,3}");
   const regex = new RegExp(
-    `(?<=^|[\\s,])((?:[01]?\\d|2[0-3])):([0-5]\\d)(?::([0-5]\\d)(?:[.](\\d{1,3}))?)?${dayPeriodPattern}(?=[\\s,]|$)`,
+    `(?<=^|[\\s,])(${hourPattern}):(${minuteOrSecondPattern})(?::(${minuteOrSecondPattern})(?:[.](${millisecondPattern}))?)?${dayPeriodPattern}(?=[\\s,]|$)`,
     "i"
   );
   const match = regex.exec(input);
   if (match) {
     const result = {};
-    result.hour = parseInt(match[1]);
-    result.minute = parseInt(match[2]);
-    result.second = match[3] !== void 0 ? parseInt(match[3]) : void 0;
-    result.millisecond = match[4] !== void 0 ? parseInt(match[4]) : void 0;
+    result.hour = parseTimeField(match[1]);
+    result.minute = parseTimeField(match[2]);
+    result.second = parseTimeField(match[3]);
+    result.millisecond = parseTimeField(match[4]);
     if (is12Hour && match[5] !== void 0) {
       const matched = match[5].toLowerCase();
       result.dayPeriod = dayPeriodValues.find(
@@ -334,9 +371,11 @@ function partialDateTimeToISO(date, time) {
         millisecond
       );
     }
-    return buildDateOnlyISO(year, month, day);
+    if (time === null) {
+      return buildDateOnlyISO(year, month, day);
+    }
   }
-  if (!date && hour24 !== void 0 && minute !== void 0) {
+  if (date === null && hour24 !== void 0 && minute !== void 0) {
     return buildTimeOnlyISO(hour24, minute, second, millisecond);
   }
   const now = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)());

package/forms/date-time-range-picker/hooks/useDateTimeInput.d.ts

@@ -14,7 +14,9 @@ export declare const useDateTimeInput: (props: DateTimeInputProps, expressionInp
     expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement>;
     expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement>;
     onPaste: ClipboardEventHandler<HTMLSpanElement>;
+    pasteText: (text: string, skipUndoCapture?: boolean) => boolean;
     onPasteUndoKeyDown: ReactKeyboardEventHandler<HTMLSpanElement>;
+    clearPasteUndo: () => void;
     focus: () => void;
     switchToExpressionMode: (text: string) => void;
     setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;

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