@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -9,12 +9,18 @@ import { parseTimeAsTimeValue } from "@dynatrace-sdk/units";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { isFullTimeframe } from "../../../core/time/helpers.js";
 import { useDateTimeRangePickerStore } from "../../../core/time/timeframeStore/useTimeframeStore.js";
+import { focusDateTimeInput } from "../../date-time-picker/utils/focusDateTimeInput.js";
 import {
   captureUndoSnapshot,
+  isContentModifyingKey,
   normalizeISOInput,
   parseDateOnlyToISO,
   parseTimeOnlyToISO
 } from "../helpers.js";
+import {
+  getExpressionCursorOffset,
+  restoreExpressionCursorOffset
+} from "../selection-helpers.js";
 const restoreSpinButtons = (ref, spinButtonTexts) => {
   spinButtonTexts.forEach((text, type) => {
     const handler = ref.current?.spinButtonHandlers.get(type) ?? null;
@@ -34,6 +40,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;
   }
 };
@@ -63,18 +73,14 @@ const useDateTimeRangePicker = (props) => {
     [formatMessage, placeholder?.from, placeholder?.to]
   );
   const onCopyCapture = useCallback(
-    async (event) => {
+    (event) => {
       event.preventDefault();
       event.stopPropagation();
       if (!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]
   );
@@ -92,6 +98,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 ? getExpressionCursorOffset(focusedExpression) : void 0;
       const fromValueType = dateTimeFromRef.current?.element?.getAttribute("data-valuetype") ?? "expression";
       const toValueType = dateTimeToRef.current?.element?.getAttribute("data-valuetype") ?? "expression";
       const fromSnapshot = captureUndoSnapshot(
@@ -106,36 +115,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 = TZDateMini.tz(getTimezone()).getTime();
-        const parsedFrom = parseDateOnlyToISO(nextFrom) ?? parseTimeOnlyToISO(nextFrom) ?? normalizeISOInput(nextFrom);
-        const parsedTo = parseDateOnlyToISO(nextTo, "endOfDay") ?? parseTimeOnlyToISO(nextTo) ?? normalizeISOInput(nextTo);
-        const validFrom = parseTimeAsTimeValue(parsedFrom, relativeDate);
-        const validTo = 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(() => {
+            focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);
+          });
           return;
         }
+        if (parts.length === 2) {
+          const relativeDate = TZDateMini.tz(getTimezone()).getTime();
+          const parsedFrom = parseDateOnlyToISO(nextFrom) ?? parseTimeOnlyToISO(nextFrom) ?? normalizeISOInput(nextFrom);
+          const parsedTo = parseDateOnlyToISO(nextTo, "endOfDay") ?? parseTimeOnlyToISO(nextTo) ?? normalizeISOInput(nextTo);
+          const validFrom = parseTimeAsTimeValue(parsedFrom, relativeDate);
+          const validTo = 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 = 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();
@@ -150,6 +183,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) {
+          restoreExpressionCursorOffset(
+            snapshot.focusTarget,
+            snapshot.expressionCursorOffset
+          );
+        }
+      } else if (pasteUndoSnapshotRef.current && isContentModifyingKey(event)) {
+        pasteUndoSnapshotRef.current = null;
       }
     },
     [dateTimeFromRef, dateTimeToRef, setValue]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeRangePicker.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  type RefObject,\n  ClipboardEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { isFullTimeframe } from '../../../core/time/helpers.js';\nimport { useDateTimeRangePickerStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  captureUndoSnapshot,\n  normalizeISOInput,\n  parseDateOnlyToISO,\n  parseTimeOnlyToISO,\n} from '../helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  UndoSnapshot,\n} from '../types.js';\n\n/**\n * Restores spinbutton DOM text from a snapshot by driving each handler directly.\n */\nconst restoreSpinButtons = (\n  ref: RefObject<DateTimeInputRef | null>,\n  spinButtonTexts: Map<Intl.DateTimeFormatPart['type'], string>,\n): void => {\n  spinButtonTexts.forEach((text, type) => {\n    const handler = ref.current?.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};\n\n/**\n * Restores a single from/to snapshot side (spin buttons or expression input).\n */\nconst restoreSnapshot = (\n  snapshot: UndoSnapshot,\n  ref: RefObject<DateTimeInputRef | null>,\n): void => {\n  if (snapshot.valueType === 'iso8601') {\n    restoreSpinButtons(ref, snapshot.spinButtonTexts);\n  } else if (ref.current?.expressionInputRef) {\n    ref.current.expressionInputRef.textContent = snapshot.expressionText;\n  }\n};\n\ninterface UseDateTimeRangePickerProps\n  extends Pick<DateTimeRangePickerProps, 'placeholder' | 'readOnly'> {\n  dateTimeFromRef: RefObject<DateTimeInputRef | null>;\n  dateTimeToRef: RefObject<DateTimeInputRef | null>;\n}\n\n/**\n * A hook that provides the default functionality for the DateTimeRange picker\n * @internal\n */\nexport const useDateTimeRangePicker = (props: UseDateTimeRangePickerProps) => {\n  const { placeholder, readOnly, dateTimeFromRef, dateTimeToRef } = props;\n  const { formatMessage } = useIntl();\n  const value = useDateTimeRangePickerStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const setValue = useDateTimeRangePickerStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const pasteUndoSnapshotRef = useRef<{\n    from: UndoSnapshot;\n    to: UndoSnapshot;\n    focusTarget: Element | null;\n  } | null>(null);\n\n  const localizedPlaceholder = useMemo(\n    () => ({\n      from:\n        placeholder?.from ??\n        formatMessage({\n          defaultMessage: 'Start time',\n          id: 'gnKOHMjpyzk6hNcF',\n          description: 'Start of timeframe',\n        }),\n      to:\n        placeholder?.to ??\n        formatMessage({\n          defaultMessage: 'End time',\n          id: 'sGxf5yRVhyC8Fpo/',\n          description: 'End of timeframe',\n        }),\n    }),\n    [formatMessage, placeholder?.from, placeholder?.to],\n  );\n\n  // for non null values, put the from/to value as `<TimeValue>/<TimeValue>` into the clipboard\n  const onCopyCapture: ClipboardEventHandler = useCallback(\n    async (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (!isFullTimeframe(value)) {\n        return;\n      }\n\n      try {\n        await navigator.clipboard.writeText(\n          `${value.from.value}/${value.to.value}`,\n        );\n      } catch {\n        // For now, we silently ignore clipboard write errors.\n      }\n    },\n    [value],\n  );\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPasteCapture: ClipboardEventHandler = useCallback(\n    (e) => {\n      if (readOnly) {\n        return;\n      }\n      const data = e.clipboardData?.getData('text/plain');\n      if (!data) {\n        e.preventDefault();\n        return;\n      }\n\n      if (!dateTimeFromRef.current || !dateTimeToRef.current) {\n        return;\n      }\n\n      // Capture undo snapshots for any paste operation (range or single-input).\n      const focusTarget = document.activeElement;\n      const fromValueType =\n        (dateTimeFromRef.current?.element?.getAttribute('data-valuetype') as\n          | 'expression'\n          | 'iso8601') ?? 'expression';\n      const toValueType =\n        (dateTimeToRef.current?.element?.getAttribute('data-valuetype') as\n          | 'expression'\n          | 'iso8601') ?? 'expression';\n      const fromSnapshot = captureUndoSnapshot(\n        dateTimeFromRef.current.spinButtonHandlers,\n        dateTimeFromRef.current.expressionInputRef,\n        value?.from ?? null,\n        fromValueType,\n      );\n      const toSnapshot = captureUndoSnapshot(\n        dateTimeToRef.current.spinButtonHandlers,\n        dateTimeToRef.current.expressionInputRef,\n        value?.to ?? null,\n        toValueType,\n      );\n\n      // if the clipboard content is of format `<TimeValue>/<TimeValue>`, apply them.\n      const [nextFrom, nextTo] = data.trim().split('/');\n\n      if (nextFrom && nextTo) {\n        const relativeDate = TZDateMini.tz(getTimezone()).getTime();\n        const parsedFrom =\n          parseDateOnlyToISO(nextFrom) ??\n          parseTimeOnlyToISO(nextFrom) ??\n          normalizeISOInput(nextFrom);\n        const parsedTo =\n          parseDateOnlyToISO(nextTo, 'endOfDay') ??\n          parseTimeOnlyToISO(nextTo) ??\n          normalizeISOInput(nextTo);\n\n        // Only apply if both sides are valid parseable values.\n        const validFrom = parseTimeAsTimeValue(parsedFrom, relativeDate);\n        const validTo = parseTimeAsTimeValue(parsedTo, relativeDate);\n\n        if (validFrom && validTo) {\n          pasteUndoSnapshotRef.current = {\n            from: fromSnapshot,\n            to: toSnapshot,\n            focusTarget,\n          };\n          setValue({ from: validFrom, to: validTo });\n          e.preventDefault();\n          e.stopPropagation();\n          return;\n        }\n      }\n\n      pasteUndoSnapshotRef.current = {\n        from: fromSnapshot,\n        to: toSnapshot,\n        focusTarget,\n      };\n    },\n    [readOnly, setValue, value, dateTimeFromRef, dateTimeToRef],\n  );\n\n  /**\n   * Ctrl+Z / Cmd+Z handler for the range picker container.\n   * Intercepts when a paste undo snapshot is pending and restores the affected input(s).\n   */\n  const onUndoPasteKeyDown: ReactKeyboardEventHandler = useCallback(\n    (event) => {\n      if (\n        (event.ctrlKey || event.metaKey) &&\n        event.key === 'z' &&\n        pasteUndoSnapshotRef.current\n      ) {\n        const snapshot = pasteUndoSnapshotRef.current;\n        pasteUndoSnapshotRef.current = null;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        restoreSnapshot(snapshot.from, dateTimeFromRef);\n        restoreSnapshot(snapshot.to, dateTimeToRef);\n\n        // Update the store with the original values so the hidden inputs\n        // and any controlled consumers reflect the undo.\n        const fromValue = snapshot.from.value ?? undefined;\n        const toValue = snapshot.to.value ?? undefined;\n        setValue(\n          fromValue || toValue ? { from: fromValue, to: toValue } : null,\n        );\n\n        // Restore focus to the element that was focused before the paste\n        if (\n          snapshot.focusTarget instanceof HTMLElement &&\n          snapshot.focusTarget !== document.activeElement\n        ) {\n          snapshot.focusTarget.focus();\n        }\n      }\n    },\n    [dateTimeFromRef, dateTimeToRef, setValue],\n  );\n\n  return {\n    placeholder: localizedPlaceholder,\n    onCopyCapture,\n    onPasteCapture,\n    onUndoPasteKeyDown,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  type RefObject,\n  ClipboardEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { isFullTimeframe } from '../../../core/time/helpers.js';\nimport { useDateTimeRangePickerStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { focusDateTimeInput } from '../../date-time-picker/utils/focusDateTimeInput.js';\nimport {\n  captureUndoSnapshot,\n  isContentModifyingKey,\n  normalizeISOInput,\n  parseDateOnlyToISO,\n  parseTimeOnlyToISO,\n} from '../helpers.js';\nimport {\n  getExpressionCursorOffset,\n  restoreExpressionCursorOffset,\n} from '../selection-helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  UndoSnapshot,\n} from '../types.js';\n\n/**\n * Restores spinbutton DOM text from a snapshot by driving each handler directly.\n */\nconst restoreSpinButtons = (\n  ref: RefObject<DateTimeInputRef | null>,\n  spinButtonTexts: Map<Intl.DateTimeFormatPart['type'], string>,\n): void => {\n  spinButtonTexts.forEach((text, type) => {\n    const handler = ref.current?.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};\n\n/**\n * Restores a single from/to snapshot side (spin buttons or expression input).\n */\nconst restoreSnapshot = (\n  snapshot: UndoSnapshot,\n  ref: RefObject<DateTimeInputRef | null>,\n): void => {\n  if (snapshot.valueType === 'iso8601') {\n    restoreSpinButtons(ref, snapshot.spinButtonTexts);\n  } else if (ref.current?.expressionInputRef) {\n    const invalidExpresssion = !snapshot.value?.absoluteDate;\n    if (invalidExpresssion) {\n      restoreSpinButtons(ref, snapshot.spinButtonTexts);\n    }\n    ref.current.expressionInputRef.textContent = snapshot.expressionText;\n  }\n};\n\ninterface UseDateTimeRangePickerProps\n  extends Pick<DateTimeRangePickerProps, 'placeholder' | 'readOnly'> {\n  dateTimeFromRef: RefObject<DateTimeInputRef | null>;\n  dateTimeToRef: RefObject<DateTimeInputRef | null>;\n}\n\n/**\n * A hook that provides the default functionality for the DateTimeRange picker\n * @internal\n */\nexport const useDateTimeRangePicker = (props: UseDateTimeRangePickerProps) => {\n  const { placeholder, readOnly, dateTimeFromRef, dateTimeToRef } = props;\n  const { formatMessage } = useIntl();\n  const value = useDateTimeRangePickerStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const setValue = useDateTimeRangePickerStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const pasteUndoSnapshotRef = useRef<{\n    from: UndoSnapshot;\n    to: UndoSnapshot;\n    focusTarget: Element | null;\n    expressionCursorOffset?: number;\n  } | null>(null);\n\n  const localizedPlaceholder = useMemo(\n    () => ({\n      from:\n        placeholder?.from ??\n        formatMessage({\n          defaultMessage: 'Start time',\n          id: 'gnKOHMjpyzk6hNcF',\n          description: 'Start of timeframe',\n        }),\n      to:\n        placeholder?.to ??\n        formatMessage({\n          defaultMessage: 'End time',\n          id: 'sGxf5yRVhyC8Fpo/',\n          description: 'End of timeframe',\n        }),\n    }),\n    [formatMessage, placeholder?.from, placeholder?.to],\n  );\n\n  // for non null values, put the from/to value as `<TimeValue>/<TimeValue>` into the clipboard\n  const onCopyCapture: ClipboardEventHandler = useCallback(\n    (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (!isFullTimeframe(value)) {\n        return;\n      }\n\n      navigator.clipboard\n        .writeText(`${value.from.value}/${value.to.value}`)\n        .catch(() => {\n          // For now, we silently ignore clipboard write errors.\n        });\n    },\n    [value],\n  );\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPasteCapture: ClipboardEventHandler = useCallback(\n    (e) => {\n      if (readOnly) {\n        return;\n      }\n      const data = e.clipboardData?.getData('text/plain');\n      if (!data) {\n        e.preventDefault();\n        return;\n      }\n\n      if (!dateTimeFromRef.current || !dateTimeToRef.current) {\n        return;\n      }\n\n      // Capture cursor offset to be able to restore it in case of an undo.\n      const focusTarget = document.activeElement;\n      const isExpressionInputFocused =\n        focusTarget === dateTimeFromRef.current?.expressionInputRef ||\n        focusTarget === dateTimeToRef.current?.expressionInputRef;\n      const focusedExpression = isExpressionInputFocused ? focusTarget : null;\n      const expressionCursorOffset = focusedExpression\n        ? getExpressionCursorOffset(focusedExpression)\n        : undefined;\n\n      // Capture undo snapshots for any paste operation (range or single-input).\n      const fromValueType =\n        (dateTimeFromRef.current?.element?.getAttribute('data-valuetype') as\n          | 'expression'\n          | 'iso8601') ?? 'expression';\n      const toValueType =\n        (dateTimeToRef.current?.element?.getAttribute('data-valuetype') as\n          | 'expression'\n          | 'iso8601') ?? 'expression';\n      const fromSnapshot = captureUndoSnapshot(\n        dateTimeFromRef.current.spinButtonHandlers,\n        dateTimeFromRef.current.expressionInputRef,\n        value?.from ?? null,\n        fromValueType,\n      );\n      const toSnapshot = captureUndoSnapshot(\n        dateTimeToRef.current.spinButtonHandlers,\n        dateTimeToRef.current.expressionInputRef,\n        value?.to ?? null,\n        toValueType,\n      );\n\n      // Detect range format. When the clipboard contains '\u2192', one or both sides\n      // are in locale format or have placeholder tokens (e.g. '25/MM/2024 14:30\u2192\u2026').\n      // When the clipboard contains only '/', both sides should be ISO-formatted.\n      const trimmed = data.trim();\n      const hasArrowSep = trimmed.includes('\u2192');\n      const parts = hasArrowSep ? trimmed.split('\u2192') : trimmed.split('/');\n      const [nextFrom, nextTo] = parts;\n\n      if (nextFrom && nextTo) {\n        if (hasArrowSep) {\n          // Mixed range: at least one side is locale format or has placeholder tokens.\n          // Delegate each part to the individual input's paste handler which already\n          // knows how to apply partial/locale values and respect placeholder positions.\n          pasteUndoSnapshotRef.current = {\n            from: fromSnapshot,\n            to: toSnapshot,\n            focusTarget,\n            expressionCursorOffset,\n          };\n          dateTimeFromRef.current?.pasteText(nextFrom, true);\n          dateTimeToRef.current?.pasteText(nextTo, true);\n          e.preventDefault();\n          e.stopPropagation();\n          // After applying both values, move focus to the first empty spinbutton\n          // starting from `from`, falling back to `to`. Uses the same helper\n          // that all other focus-routing paths in the range picker use.\n          requestAnimationFrame(() => {\n            focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n          });\n          return;\n        }\n\n        // All-ISO range: both sides must parse as valid time values.\n        // Guard parts.length === 2 so that a single locale-format value whose\n        // date delimiter is '/' (e.g. '25/MM/2024') is not mistaken for a range.\n        if (parts.length === 2) {\n          const relativeDate = TZDateMini.tz(getTimezone()).getTime();\n          const parsedFrom =\n            parseDateOnlyToISO(nextFrom) ??\n            parseTimeOnlyToISO(nextFrom) ??\n            normalizeISOInput(nextFrom);\n          const parsedTo =\n            parseDateOnlyToISO(nextTo, 'endOfDay') ??\n            parseTimeOnlyToISO(nextTo) ??\n            normalizeISOInput(nextTo);\n\n          const validFrom = parseTimeAsTimeValue(parsedFrom, relativeDate);\n          const validTo = parseTimeAsTimeValue(parsedTo, relativeDate);\n\n          if (validFrom && validTo) {\n            pasteUndoSnapshotRef.current = {\n              from: fromSnapshot,\n              to: toSnapshot,\n              focusTarget,\n            };\n            dateTimeFromRef.current?.pasteText(nextFrom, true);\n            dateTimeToRef.current?.pasteText(nextTo, true);\n            e.preventDefault();\n            e.stopPropagation();\n            return;\n          }\n        }\n      }\n\n      pasteUndoSnapshotRef.current = {\n        from: fromSnapshot,\n        to: toSnapshot,\n        focusTarget,\n        expressionCursorOffset,\n      };\n    },\n    [readOnly, value, dateTimeFromRef, dateTimeToRef],\n  );\n\n  /**\n   * Ctrl+Z / Cmd+Z handler for the range picker container.\n   * Intercepts when a paste undo snapshot is pending and restores the affected input(s).\n   * Clears the snapshot after undoing or when any content modifying key is pressed to prevent stale undos.\n   */\n  const onUndoPasteKeyDown: ReactKeyboardEventHandler = useCallback(\n    (event) => {\n      const isCtrlZ = (event.ctrlKey || event.metaKey) && event.key === 'z';\n\n      if (isCtrlZ && pasteUndoSnapshotRef.current) {\n        const snapshot = pasteUndoSnapshotRef.current;\n        pasteUndoSnapshotRef.current = null;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        restoreSnapshot(snapshot.from, dateTimeFromRef);\n        restoreSnapshot(snapshot.to, dateTimeToRef);\n\n        // Update the store with the original values so the hidden inputs\n        // and any controlled consumers reflect the undo.\n        const fromValue = snapshot.from.value ?? undefined;\n        const toValue = snapshot.to.value ?? undefined;\n        setValue(\n          fromValue || toValue ? { from: fromValue, to: toValue } : null,\n        );\n\n        // Restore focus to the element that was focused before the paste\n        if (\n          snapshot.focusTarget instanceof HTMLElement &&\n          snapshot.focusTarget !== document.activeElement\n        ) {\n          snapshot.focusTarget.focus();\n        }\n\n        // Restore cursor place in expression input\n        if (\n          snapshot.expressionCursorOffset !== undefined &&\n          snapshot.focusTarget instanceof HTMLSpanElement\n        ) {\n          restoreExpressionCursorOffset(\n            snapshot.focusTarget,\n            snapshot.expressionCursorOffset,\n          );\n        }\n      } else if (pasteUndoSnapshotRef.current && isContentModifyingKey(event)) {\n        pasteUndoSnapshotRef.current = null;\n      }\n    },\n    [dateTimeFromRef, dateTimeToRef, setValue],\n  );\n\n  return {\n    placeholder: localizedPlaceholder,\n    onCopyCapture,\n    onPasteCapture,\n    onUndoPasteKeyDown,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,25 +2,31 @@ import { TZDateMini } from "@date-fns/tz";
 import { format, parse } from "date-fns";
 import { parseTimeAsTimeValue } from "@dynatrace-sdk/units";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
-import { checkIfValueTypeAlignment } from "./selection-helpers.js";
+import { checkIfValueTypeAlignment } from "./helpers.js";
 import { isExpressionString } from "../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 (isExpressionString(dateTimeInput)) {
-        parsedDateTimes[index] = 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 (isExpressionString(dateTimeInput)) {
+      parsedDateTimes[index] = 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 = parse(
         dateTimeInput,
         currentPattern,
@@ -35,12 +41,14 @@ function convertCopyString(selectionString, patterns) {
         precisionPattern = "yyyy-MM-dd";
       }
       parsedDateTimes[index] = 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);
 }
@@ -60,23 +68,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 && 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/esm/forms/date-time-range-picker/selection-copy-helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/selection-copy-helpers.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { format, parse } from 'date-fns';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { checkIfValueTypeAlignment } from './selection-helpers.js';\nimport { isExpressionString } from '../forms-core/time/timeParser.js';\n\nfunction sanitizeCopyString(selectionString: string): string {\n  return selectionString\n    .split('\u2192')\n    .map((part) => part.replaceAll('\\n', '').trim())\n    .join(' ')\n    .trim();\n}\n\nexport function convertCopyString(\n  selectionString: string,\n  patterns: Array<string> | null,\n): string {\n  const matchableDateTime: string[] = selectionString\n    .split('\u2192')\n    .map((dateTime) => dateTime.replace(/\\n/g, '').trim());\n\n  const parsedDateTimes: string[] = [];\n  try {\n    for (const [index, dateTimeInput] of matchableDateTime.entries()) {\n      // If a expression is detected, we simply return the original selection string\n      // without the \u2192 separator\n      if (isExpressionString(dateTimeInput)) {\n        // With parsing the time as time value we make sure that the copied expression\n        // is valid grail format.\n        parsedDateTimes[index] =\n          parseTimeAsTimeValue(dateTimeInput)?.value ?? dateTimeInput;\n\n        continue;\n      }\n\n      // Check if the dateTimeInput is parsable by the DtDate\n      const currentPattern = patterns?.[index];\n\n      if (\n        currentPattern === undefined ||\n        (currentPattern.includes('dd') &&\n          currentPattern.includes('MM') &&\n          currentPattern.includes('yyyy')) === false\n      ) {\n        // We will need at least day, month and year to create a valid ISO date.\n        parsedDateTimes[index] = dateTimeInput;\n        continue;\n      }\n\n      // Try to parse the date with the correct pattern and timezone\n      const dateTimeFormat = parse(\n        dateTimeInput,\n        currentPattern,\n        new TZDateMini(0, getTimezone()),\n      );\n\n      // Define our precise ISO format, because the removePrecision function moves to a `Z` timezone, while we want to keep the user defined one.\n      let precisionPattern = \"yyyy-MM-dd'T'HH:mm:ss.SSSXXX\";\n      if (currentPattern.includes('ss')) {\n        precisionPattern = \"yyyy-MM-dd'T'HH:mm:ssXXX\";\n      } else if (currentPattern.includes('mm')) {\n        precisionPattern = \"yyyy-MM-dd'T'HH:mmXXX\";\n      } else if (\n        currentPattern.includes('dd') &&\n        currentPattern.includes('MM') &&\n        currentPattern.includes('yyyy')\n      ) {\n        precisionPattern = 'yyyy-MM-dd';\n      }\n      parsedDateTimes[index] = format(dateTimeFormat, precisionPattern);\n    }\n  } catch {\n    // If any error occurs during parsing, we fallback to the original selection string without the \u2192 separator\n    return sanitizeCopyString(selectionString);\n  }\n\n  // If both date times were successfully parsed, we join them with a / to create a valid timeframe string.\n  if (parsedDateTimes.length > 0) {\n    return parsedDateTimes.filter(Boolean).join('/');\n  }\n\n  return sanitizeCopyString(selectionString);\n}\n\n/**\n * Helper function that builds a pattern array from the selected text nodes.\n * Extracts patterns from data-pattern attributes and skips data-expression nodes.\n *\n * Returns the pattern and the raw selected text.\n *\n * Both getRangeAt(0)+intersectsNode and selection.containsNode are unreliable for detecting which nodes are visually\n * selected when the selection spans multiple contenteditable elements. Instead, we use the treeWalker to go over all\n * nodes in the inputgroup, accumulating text and patterns while filtering out nodes that don't align with the\n * value type (e.g. skipping spin button nodes when in expression mode).\n * `contenteditable` needs to stay on the elements to avoid losing the focused element.\n * @internal\n */\nexport function getPatternAndSelectedText(selection: Selection): {\n  pattern: string[] | null;\n  text: string;\n} {\n  if (selection.rangeCount === 0) {\n    return { pattern: null, text: '' };\n  }\n\n  // Use getRangeAt(0) instead of anchorNode/focusNode + selection.direction.\n  // A Range always has startContainer \u2264 endContainer in document order, so we\n  // never need to guess the direction.\n  //\n  // Why not selection.direction:\n  // Safari reports direction === 'none' for selections created via addRange()\n  // when no contenteditable element is active (e.g. after we temporarily strip\n  // [contenteditable] to allow Safari's addRange to cross element boundaries).\n  // With direction 'none', the old code treated focusNode as the start and\n  // anchorNode as the end, so the tree walker would break immediately without\n  // capturing any text \u2014 producing an empty string on every Cmd+C.\n  const range = selection.getRangeAt(0);\n  const rawStartNode = range.startContainer;\n  const rawEndNode = range.endContainer;\n\n  const root =\n    rawStartNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n\n  if (root === null || root === undefined) {\n    return { pattern: null, text: '' };\n  }\n\n  const patternParts: Array<string> = [];\n  let text = '';\n  let capturing = false;\n  const treeWalker = document.createTreeWalker(\n    root,\n    NodeFilter.SHOW_TEXT,\n    null,\n  );\n\n  let currentNode: Node | null = treeWalker.nextNode();\n\n  // If the endpoint is an element node rather than a text node (e.g. when\n  // selectNodeContents(span) was used), step into its first child so the\n  // tree-walker identity comparison can match.\n  const startNode =\n    rawStartNode.nodeType === Node.TEXT_NODE\n      ? rawStartNode\n      : rawStartNode.firstChild ?? null;\n  const endNode =\n    rawEndNode.nodeType === Node.TEXT_NODE\n      ? rawEndNode\n      : rawEndNode.firstChild ?? null;\n\n  while (currentNode) {\n    if (currentNode === startNode) {\n      capturing = true;\n    }\n\n    if (capturing && checkIfValueTypeAlignment(currentNode)) {\n      text += currentNode.textContent ?? '';\n      const parentElement = currentNode.parentElement;\n      if (parentElement?.hasAttribute('data-pattern')) {\n        patternParts.push(parentElement.getAttribute('data-pattern') ?? '');\n      } else if (parentElement?.dataset.valuetype !== 'expression') {\n        patternParts.push(currentNode.textContent ?? '');\n      }\n    }\n\n    if (currentNode === endNode) {\n      break;\n    }\n\n    currentNode = treeWalker.nextNode();\n  }\n\n  const pattern =\n    patternParts.length > 0 ? patternParts.join('').split('\u2192') : null;\n  return { pattern, text };\n}\n\n/**\n * Builds the clipboard text for the current selection by converting the selected\n * spin-button / expression values into a valid timeframe string.\n * Returns null if there is no selection or it does not belong to an inputgroup.\n * @internal\n */\nexport function buildTimeframeClipboardText(): string | null {\n  const selection = window.getSelection();\n\n  if (selection === null || selection.rangeCount === 0) {\n    return null;\n  }\n\n  const range = selection.getRangeAt(0);\n  const root =\n    range.startContainer.parentElement?.closest<HTMLDivElement>(\n      '.strato-inputgroup',\n    );\n\n  if (root === null || root === undefined) {\n    return null;\n  }\n\n  // Build text and pattern in one DOM walk. selection.toString() in Chrome only returns the text of the first\n  // contenteditable element, so we use the range start/end walk in getPatternAndSelectedText.\n  const { text: selectionString, pattern } =\n    getPatternAndSelectedText(selection);\n  return convertCopyString(selectionString, pattern);\n}\n\n/**\n * Helper function that tries to parse parts of the current selection as valid time frames\n * and if successful, copies the correctly parsed ISO timestamp or timeframe to the clipboard.\n * Must be called from a native `copy` ClipboardEvent handler so that `clipboardEvent.clipboardData`\n * is available for synchronous writing.\n * @internal\n */\nexport function onTimeframeCopyCapture(\n  clipboardEvent: Pick<ClipboardEvent, 'preventDefault' | 'clipboardData'>,\n): void {\n  const clipBoardText = buildTimeframeClipboardText();\n\n  if (clipBoardText === null) {\n    return;\n  }\n\n  // Write synchronously via clipboardEvent.clipboardData and prevent the browser's native copy\n  // (which would also only capture the anchor element's text due to contenteditable).\n  clipboardEvent.preventDefault();\n  clipboardEvent.clipboardData?.setData('text/plain', clipBoardText);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { format, parse } from 'date-fns';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { checkIfValueTypeAlignment } from './helpers.js';\nimport { isExpressionString } from '../forms-core/time/timeParser.js';\n\n/**\n * Reads the placeholder text from a spin-button element. The component sets it\n * as a CSS custom property on inline style (`--data-placeholder: \"yyyy\"`) for\n * the `:empty::before` pseudo-element; we strip the surrounding quotes here.\n */\nfunction getPlaceholder(el: HTMLElement): string {\n  const raw = el.style.getPropertyValue('--data-placeholder').trim();\n  return raw.startsWith('\"') && raw.endsWith('\"') ? raw.slice(1, -1) : raw;\n}\n\nfunction sanitizeCopyString(selectionString: string): string {\n  return selectionString\n    .split('\u2192')\n    .map((part) => part.replaceAll('\\n', '').trim())\n    .join(' ')\n    .trim();\n}\n\nexport function convertCopyString(\n  selectionString: string,\n  patterns: Array<string> | null,\n): string {\n  const matchableDateTime: string[] = selectionString\n    .split('\u2192')\n    .map((dateTime) => dateTime.replace(/\\n/g, '').trim());\n\n  const parsedDateTimes: string[] = [];\n  // Track whether any segment could not be converted to ISO (locale format or placeholder tokens).\n  // When true, segments are joined with '\u2192' to avoid ambiguity with '/' in locale date delimiters.\n  let hasNonISO = false;\n\n  for (const [index, dateTimeInput] of matchableDateTime.entries()) {\n    // If an expression is detected, use the canonical expression value.\n    // Expressions never contain '/' so the standard '/' separator still works.\n    if (isExpressionString(dateTimeInput)) {\n      parsedDateTimes[index] =\n        parseTimeAsTimeValue(dateTimeInput)?.value ?? dateTimeInput;\n      continue;\n    }\n\n    // Check if the dateTimeInput is parsable by the DtDate\n    const currentPattern = patterns?.[index];\n\n    if (\n      currentPattern === undefined ||\n      (currentPattern.includes('dd') &&\n        currentPattern.includes('MM') &&\n        currentPattern.includes('yyyy')) === false\n    ) {\n      // We will need at least day, month and year to create a valid ISO date.\n      // Keep the raw locale text and flag it as non-ISO.\n      parsedDateTimes[index] = dateTimeInput;\n      hasNonISO = true;\n      continue;\n    }\n\n    try {\n      // Try to parse the date with the correct pattern and timezone\n      const dateTimeFormat = parse(\n        dateTimeInput,\n        currentPattern,\n        new TZDateMini(0, getTimezone()),\n      );\n\n      // Define our precise ISO format, because the removePrecision function moves to a `Z` timezone, while we want to keep the user defined one.\n      let precisionPattern = \"yyyy-MM-dd'T'HH:mm:ss.SSSXXX\";\n      if (currentPattern.includes('ss')) {\n        precisionPattern = \"yyyy-MM-dd'T'HH:mm:ssXXX\";\n      } else if (currentPattern.includes('mm')) {\n        precisionPattern = \"yyyy-MM-dd'T'HH:mmXXX\";\n      } else if (\n        currentPattern.includes('dd') &&\n        currentPattern.includes('MM') &&\n        currentPattern.includes('yyyy')\n      ) {\n        precisionPattern = 'yyyy-MM-dd';\n      }\n      parsedDateTimes[index] = format(dateTimeFormat, precisionPattern);\n    } catch {\n      // Parsing failed (e.g. placeholder tokens like 'MM' in '25/MM/2024').\n      // Keep the raw locale text and flag it as non-ISO.\n      parsedDateTimes[index] = dateTimeInput;\n      hasNonISO = true;\n    }\n  }\n\n  if (parsedDateTimes.length > 0) {\n    // When any segment is non-ISO (locale format or placeholder tokens), use '\u2192' as the\n    // separator so that locale date delimiters (e.g. '/') don't create ambiguity.\n    // When all segments are ISO, use '/' to preserve the standard timeframe clipboard format.\n    const separator = matchableDateTime.length > 1 && hasNonISO ? '\u2192' : '/';\n    return parsedDateTimes.filter(Boolean).join(separator);\n  }\n\n  return sanitizeCopyString(selectionString);\n}\n\n/**\n * Helper function that builds a pattern array from the selected text nodes.\n * Extracts patterns from data-pattern attributes and skips data-expression nodes.\n *\n * Returns the pattern and the raw selected text.\n *\n * Both getRangeAt(0)+intersectsNode and selection.containsNode are unreliable for detecting which nodes are visually\n * selected when the selection spans multiple contenteditable elements. Instead, we use the treeWalker to go over all\n * nodes in the inputgroup, accumulating text and patterns while filtering out nodes that don't align with the\n * value type (e.g. skipping spin button nodes when in expression mode).\n * `contenteditable` needs to stay on the elements to avoid losing the focused element.\n * @internal\n */\nexport function getPatternAndSelectedText(selection: Selection): {\n  pattern: string[] | null;\n  text: string;\n} {\n  if (selection.rangeCount === 0) {\n    return { pattern: null, text: '' };\n  }\n\n  // Use getRangeAt(0) instead of anchorNode/focusNode + selection.direction.\n  // A Range always has startContainer \u2264 endContainer in document order, so we\n  // never need to guess the direction.\n  //\n  // Why not selection.direction:\n  // Safari reports direction === 'none' for selections created via addRange()\n  // when no contenteditable element is active (e.g. after we temporarily strip\n  // [contenteditable] to allow Safari's addRange to cross element boundaries).\n  // With direction 'none', the old code treated focusNode as the start and\n  // anchorNode as the end, so the tree walker would break immediately without\n  // capturing any text \u2014 producing an empty string on every Cmd+C.\n  const range = selection.getRangeAt(0);\n  const rawStartNode = range.startContainer;\n  const rawEndNode = range.endContainer;\n\n  const root =\n    rawStartNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n\n  if (root === null || root === undefined) {\n    return { pattern: null, text: '' };\n  }\n\n  const patternParts: Array<string> = [];\n  let text = '';\n  let capturing = false;\n  const treeWalker = document.createTreeWalker(\n    root,\n    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,\n    {\n      acceptNode: (node) => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          return NodeFilter.FILTER_ACCEPT;\n        }\n        // Empty spin buttons have no text-node child but still display a\n        // placeholder via CSS. Visit them so we can include the placeholder\n        // in copied selections.\n        if (\n          node instanceof Element &&\n          node.getAttribute('role') === 'spinbutton' &&\n          node.childNodes.length === 0\n        ) {\n          return NodeFilter.FILTER_ACCEPT;\n        }\n        return NodeFilter.FILTER_SKIP;\n      },\n    },\n  );\n\n  let currentNode: Node | null = treeWalker.nextNode();\n\n  // If the endpoint is an element node rather than a text node (e.g. when\n  // selectNodeContents(span) was used), step into its first child so the\n  // tree-walker identity comparison can match.\n  const startNode =\n    rawStartNode.nodeType === Node.TEXT_NODE\n      ? rawStartNode\n      : rawStartNode?.firstChild ?? rawStartNode ?? null;\n  const endNode =\n    rawEndNode.nodeType === Node.TEXT_NODE\n      ? rawEndNode\n      : rawEndNode?.firstChild ?? rawEndNode ?? null;\n\n  while (currentNode) {\n    if (currentNode === startNode) {\n      capturing = true;\n    }\n\n    if (capturing && checkIfValueTypeAlignment(currentNode)) {\n      if (currentNode.nodeType === Node.TEXT_NODE) {\n        text += currentNode.textContent ?? '';\n        const parentElement = currentNode.parentElement;\n        if (parentElement?.hasAttribute('data-pattern')) {\n          patternParts.push(parentElement.getAttribute('data-pattern') ?? '');\n        } else if (parentElement?.dataset.valuetype !== 'expression') {\n          patternParts.push(currentNode.textContent ?? '');\n        }\n      } else {\n        // Empty spin-button element: contribute its placeholder.\n        const el = currentNode as HTMLElement;\n        const placeholder = getPlaceholder(el);\n        text += placeholder;\n        if (el.dataset.pattern !== undefined) {\n          patternParts.push(el.dataset.pattern);\n        } else if (el.dataset.valuetype !== 'expression') {\n          patternParts.push(placeholder);\n        }\n      }\n    }\n\n    if (currentNode === endNode) {\n      break;\n    }\n\n    currentNode = treeWalker.nextNode();\n  }\n\n  const pattern =\n    patternParts.length > 0 ? patternParts.join('').split('\u2192') : null;\n  return { pattern, text };\n}\n\n/**\n * Builds the clipboard text for the current selection by converting the selected\n * spin-button / expression values into a valid timeframe string.\n * Returns null if there is no selection or it does not belong to an inputgroup.\n * @internal\n */\nexport function buildTimeframeClipboardText(): string | null {\n  const selection = window.getSelection();\n\n  if (selection === null || selection.rangeCount === 0) {\n    return null;\n  }\n\n  const range = selection.getRangeAt(0);\n  const root =\n    range.startContainer.parentElement?.closest<HTMLDivElement>(\n      '.strato-inputgroup',\n    );\n\n  if (root === null || root === undefined) {\n    return null;\n  }\n\n  // Build text and pattern in one DOM walk. selection.toString() in Chrome only returns the text of the first\n  // contenteditable element, so we use the range start/end walk in getPatternAndSelectedText.\n  const { text: selectionString, pattern } =\n    getPatternAndSelectedText(selection);\n  return convertCopyString(selectionString, pattern);\n}\n\n/**\n * Helper function that tries to parse parts of the current selection as valid time frames\n * and if successful, copies the correctly parsed ISO timestamp or timeframe to the clipboard.\n * Must be called from a native `copy` ClipboardEvent handler so that `clipboardEvent.clipboardData`\n * is available for synchronous writing.\n * @internal\n */\nexport function onTimeframeCopyCapture(\n  clipboardEvent: Pick<ClipboardEvent, 'preventDefault' | 'clipboardData'>,\n): void {\n  const clipBoardText = buildTimeframeClipboardText();\n\n  if (clipBoardText === null) {\n    return;\n  }\n\n  // Write synchronously via clipboardEvent.clipboardData and prevent the browser's native copy\n  // (which would also only capture the anchor element's text due to contenteditable).\n  clipboardEvent.preventDefault();\n  clipboardEvent.clipboardData?.setData('text/plain', clipBoardText);\n}\n"],
+  "mappings": "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",
   "names": []
 }