@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -13,6 +13,7 @@ import {
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useDateTimeInputValidation } from "./useDateTimeIInputValidation.js";
 import { useDateTimeParser } from "./useDateTimeParser.js";
+import { spinExpressionValue } from "./useExpressionSpin.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useControllableState } from "../../../core/hooks/useControllableState.js";
 import { useDateTimePicker } from "../../date-time-picker/hooks/useDateTimePicker.js";
@@ -212,20 +213,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
       }
     }
   }, [value]);
-  const onCopyCapture = useCallback(
-    async (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (value === null) {
-        return;
-      }
-      try {
-        await navigator.clipboard.writeText(value.value);
-      } catch {
-      }
-    },
-    [value]
-  );
   const onPaste = useCallback(
     (event) => {
       if (readOnly) {
@@ -253,11 +240,46 @@ const useDateTimeInput = (props, expressionInputRef) => {
     },
     [applyDateTime, precision, readOnly, setValue, updateExpression]
   );
-  const expressionOnKeyDownHandler = useCallback((event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-    }
-  }, []);
+  const expressionOnKeyDownHandler = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        return;
+      }
+      if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !disabled && !readOnly) {
+        const element = expressionInputRef.current;
+        if (!element) {
+          return;
+        }
+        const currentText = element.textContent ?? "";
+        if (!currentText.trim()) {
+          return;
+        }
+        const direction = event.key === "ArrowUp" ? 1 : -1;
+        const newText = spinExpressionValue(currentText, direction);
+        if (newText === null) {
+          return;
+        }
+        event.preventDefault();
+        const selection = window.getSelection();
+        const cursorOffset = selection?.focusOffset ?? 0;
+        element.textContent = newText;
+        requestAnimationFrame(() => {
+          const textNode = element.firstChild;
+          if (textNode && selection) {
+            const newOffset = Math.min(cursorOffset, newText.length);
+            const range = document.createRange();
+            range.setStart(textNode, newOffset);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        });
+        element.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    },
+    [expressionInputRef, disabled, readOnly]
+  );
   const focus = useCallback(() => {
     switch (valueType) {
       case "expression":
@@ -316,7 +338,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
     expressionOnFocusHandler,
     expressionOnBlurHandler,
     expressionOnKeyDownHandler,
-    onCopyCapture,
     onPaste,
     focus,
     validateTimeValue

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useDateTimeInput.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n  FormEventHandler as ReactFormEventHandler,\n  FocusEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n} from 'react';\n\nimport {\n  parseTimeAsTimeValue,\n  _parseTimeExpression,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeInputValidation } from './useDateTimeIInputValidation.js';\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  getTimeValue,\n  formatTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport { isEqualTimeValue } from '../helpers.js';\nimport type { DateTimeInputProps } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler !== undefined && handler.type === 'number';\n}\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    precision,\n    disabled,\n    readOnly,\n    required,\n    onError,\n    min,\n    max,\n    type,\n    onChange,\n  }: DateTimeInputProps = props;\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n    precision,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n\n  const {\n    spinButtons,\n    parts,\n    toDateTime,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value:\n      // only apply the absolute date if the input mode was already the datetimepicker\n      value?.type === 'iso8601' && valueType === 'iso8601'\n        ? value.absoluteDate\n        : null,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined);\n\n      if (newIsoDateTime === '') {\n        // Trigger the onChange passed to the DateTimePicker to let the user know\n        // that the currently entered value is invalid (incomplete spin buttons input).\n        onChange?.('');\n        return;\n      }\n\n      if (newValue === undefined) {\n        return;\n      }\n\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      validateTimeValue(newValue);\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      setInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      updateExpression(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      validateTimeValue(value, input ?? '');\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    const newValueType = value.type ?? 'expression';\n    setValueType(value.type);\n    setInputValue(value.value);\n    if (newValueType === 'expression') {\n      updateExpression(value);\n      setExpressionEmpty(value.value === '');\n      const input = expressionInputRef.current?.textContent;\n      validateTimeValue(value, input ?? '');\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // hook to evaluate the error state based on the given expression, value, and spinbutton state\n  const { validateTimeValue } = useDateTimeInputValidation(\n    {\n      min,\n      max,\n      required,\n      onError, // fired on update\n    },\n    parts,\n    toDateTime,\n  );\n\n  useEffect(() => {\n    // Ignore expression updates, only handle spinbutton update in here\n    if (valueType === 'expression') {\n      return;\n    }\n    validateTimeValue(value);\n  }, [validateTimeValue, value, valueType]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // called on onBlur to sanitize the current expression\n  const updateExpression = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactFormEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        validateTimeValue(parseTimeAsTimeValue(input), input);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = parseTimeAsTimeValue(input);\n\n      // reevaluate if the new input is valid or not\n      validateTimeValue(newValue, input);\n\n      if (newValue === null && input !== '') {\n        onChange?.('');\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      validateTimeValue,\n      setValue,\n      applyDateTime,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      expressionInputSelectAll();\n    }, [expressionInputSelectAll]);\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // if the value is a valid TimeValue, copy the ISO or expression to the clipboard\n  const onCopyCapture: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    async (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (value === null) {\n        return;\n      }\n      try {\n        await navigator.clipboard.writeText(value.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 onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      if (readOnly) {\n        return;\n      }\n\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        return;\n      }\n\n      // if the clipboard content is a valid expression or ISO, apply it as value\n      const nextValue = parseTimeAsTimeValue(\n        data.trim(),\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          updateExpression(nextValue);\n        } else {\n          // If the new value is switching the input mode, delay updating the spinbuttons by one render cycle\n          requestAnimationFrame(() => applyDateTime(nextValue.absoluteDate));\n        }\n        setValue(nextValue);\n        event.preventDefault();\n      }\n    },\n    [applyDateTime, precision, readOnly, setValue, updateExpression],\n  );\n\n  // prevent unwanted input keys like ENTER\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback((event) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n      }\n    }, []);\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    updateExpression(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      validateTimeValue(value);\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      setValueType('expression');\n      setExpressionEmpty(true);\n\n      if (value !== null) {\n        setValue(null);\n      }\n\n      setInputValue('');\n\n      // reevaluate error state\n      validateTimeValue(null);\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value: typeof value === 'string' ? null : value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onCopyCapture,\n    onPaste,\n    focus,\n    validateTimeValue,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n  FormEventHandler as ReactFormEventHandler,\n  FocusEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler as ReactKeyboardEventHandler,\n} from 'react';\n\nimport {\n  parseTimeAsTimeValue,\n  _parseTimeExpression,\n} from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeInputValidation } from './useDateTimeIInputValidation.js';\nimport { useDateTimeParser } from './useDateTimeParser.js';\nimport { spinExpressionValue } from './useExpressionSpin.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useDateTimePicker } from '../../date-time-picker/hooks/useDateTimePicker.js';\nimport {\n  getTimeValue,\n  formatTimeValue,\n} from '../../forms-core/time/timeParser.js';\nimport { useSelection } from '../../spin-buttons/hooks/useSelection.js';\nimport type { NumberSpinButtonRef } from '../../spin-buttons/number-spin-button/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport { isEqualTimeValue } from '../helpers.js';\nimport type { DateTimeInputProps } from '../types.js';\n\nfunction isNumberSpinButton(\n  handler: SpinButtonHandler | undefined,\n): handler is NumberSpinButtonRef {\n  return handler !== undefined && handler.type === 'number';\n}\n\n/*\n * A hook that provides the default functionality for the DateTimeInput picker\n */\nexport const useDateTimeInput = (\n  props: DateTimeInputProps,\n  expressionInputRef: RefObject<HTMLSpanElement | null>,\n) => {\n  const {\n    precision,\n    disabled,\n    readOnly,\n    required,\n    onError,\n    min,\n    max,\n    type,\n    onChange,\n  }: DateTimeInputProps = props;\n\n  const ariaProps = useAriaLabelingProps(props);\n  const { regexDateTimeStart, maxValue, types } = useDateTimeParser({\n    type,\n    precision,\n  });\n  // ? INVESTIGATE: without the generic, building the visreg story viewer and unit-test typechecking fails,\n  // ? but the components:build target still succeeds without any issues -> why?\n  const [value, setValue] = useControllableState<TimeValue | null>(props);\n  const isControlled = props.value !== undefined;\n  const [valueType, setValueType] = useState(value?.type ?? 'expression');\n  const firstRun = useRef(true);\n  const [expressionEmpty, setExpressionEmpty] = useState(\n    !expressionInputRef.current?.textContent,\n  );\n  const [inputValue, setInputValue] = useState('');\n\n  const {\n    spinButtons,\n    parts,\n    toDateTime,\n    handlers: spinButtonHandlers,\n    empty: spinButtonsEmpty,\n    applyDateTime,\n    firstSpinButtonHandler,\n  } = useDateTimePicker({\n    type,\n    precision,\n    disabled,\n    readOnly,\n    valueType,\n    value:\n      // only apply the absolute date if the input mode was already the datetimepicker\n      value?.type === 'iso8601' && valueType === 'iso8601'\n        ? value.absoluteDate\n        : null,\n    onChange: (newIsoDateTime) => {\n      const newValue = getTimeValue(newIsoDateTime ?? undefined);\n\n      if (newIsoDateTime === '') {\n        // Trigger the onChange passed to the DateTimePicker to let the user know\n        // that the currently entered value is invalid (incomplete spin buttons input).\n        onChange?.('');\n        return;\n      }\n\n      if (newValue === undefined) {\n        return;\n      }\n\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      validateTimeValue(newValue);\n    },\n    ...ariaProps,\n  });\n\n  const empty = useMemo(\n    () => (valueType === 'expression' ? expressionEmpty : spinButtonsEmpty),\n    [valueType, expressionEmpty, spinButtonsEmpty],\n  );\n\n  // switch input mode based on controlled value change\n  useEffect(() => {\n    if (value?.type === 'iso8601' && !spinButtonsEmpty) {\n      setInputValue(value.value);\n    }\n\n    // ignore if in uncontrolled mode\n    if (!isControlled || typeof value === 'string') {\n      return;\n    }\n\n    // reset input if value is null\n    if (!value) {\n      setValueType('expression');\n      updateExpression(null);\n      const input = expressionInputRef.current?.textContent;\n      setExpressionEmpty(input === '');\n      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));\n      validateTimeValue(value, input ?? '');\n      return;\n    }\n\n    // apply value to expression\n    // the spinbutton update is handled within the useSpinButton hook internally\n    const newValueType = value.type ?? 'expression';\n    setValueType(value.type);\n    setInputValue(value.value);\n    if (newValueType === 'expression') {\n      updateExpression(value);\n      setExpressionEmpty(value.value === '');\n      const input = expressionInputRef.current?.textContent;\n      validateTimeValue(value, input ?? '');\n    }\n    // only react to outside value changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // hook to evaluate the error state based on the given expression, value, and spinbutton state\n  const { validateTimeValue } = useDateTimeInputValidation(\n    {\n      min,\n      max,\n      required,\n      onError, // fired on update\n    },\n    parts,\n    toDateTime,\n  );\n\n  useEffect(() => {\n    // Ignore expression updates, only handle spinbutton update in here\n    if (valueType === 'expression') {\n      return;\n    }\n    validateTimeValue(value);\n  }, [validateTimeValue, value, valueType]);\n\n  const { selectAll: expressionInputSelectAll } =\n    useSelection(expressionInputRef);\n\n  // called on onBlur to sanitize the current expression\n  const updateExpression = useCallback(\n    (value: TimeValue | null) => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n      const formattedValue = value ? formatTimeValue(value) : '';\n      const currentValue = formatTimeValue(\n        expressionInputRef.current?.textContent ?? '',\n      );\n\n      // only update if the current value differs from the new value\n      // don't update the textnode while typing but allow e.g. pasting a new expression\n      if (currentValue !== formattedValue) {\n        expressionInputRef.current.textContent = formattedValue;\n      }\n    },\n    // no use in adding the expressionInputRef to the dep. array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // handles input events on the expression contenteditable span\n  const expressionInputHandler: ReactFormEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (!expressionInputRef.current) {\n        return;\n      }\n\n      const input = expressionInputRef.current.textContent ?? '';\n\n      // Remove <br> added by browser in contenteditable to ensure placeholder works\n      if (expressionInputRef.current.innerHTML === '<br>') {\n        expressionInputRef.current.innerHTML = '';\n      }\n\n      // fallback to expression if text content is removed\n      if (input === '') {\n        setValueType('expression');\n        setValue(null);\n        setExpressionEmpty(true);\n        validateTimeValue(parseTimeAsTimeValue(input), input);\n        return;\n      }\n\n      setExpressionEmpty(false);\n\n      // if the input starts like a valid datetime for the current locale, switch to the datetime picker\n      const [, carryOver] = regexDateTimeStart.exec(input) ?? [];\n      if (Number.parseInt(carryOver) <= maxValue) {\n        setValueType('iso8601');\n\n        // clear all spinbuttons\n        applyDateTime(null);\n\n        // get a cleaned and sorted list of spinbutton handlers\n        const sortedHandlers = types\n          .filter((type) => type !== 'literal')\n          .map((type) => spinButtonHandlers.get(type))\n          .filter(Boolean) as SpinButtonHandler[];\n        const [carryOverSB, focusSB] = sortedHandlers;\n\n        // carry over entered value to the next number spinbutton\n        isNumberSpinButton(carryOverSB) &&\n          carryOverSB.applyText(carryOver, true);\n\n        // clear expression input content\n        expressionInputRef.current.textContent = '';\n\n        // set focus after switch to expression mode happened\n        requestAnimationFrame(() => {\n          // set focus to second spinbutton\n          focusSB?.element.current?.focus();\n        });\n        return;\n      }\n\n      // if input is a valid expression, update the internal value state\n      const newValue = parseTimeAsTimeValue(input);\n\n      // reevaluate if the new input is valid or not\n      validateTimeValue(newValue, input);\n\n      if (newValue === null && input !== '') {\n        onChange?.('');\n      }\n      // only update the value if the newTimeValue differs from the prev. one\n      setValue((prevValue) =>\n        isEqualTimeValue(prevValue, newValue) ? prevValue : newValue,\n      );\n\n      setInputValue(input);\n    }, [\n      expressionInputRef,\n      regexDateTimeStart,\n      maxValue,\n      validateTimeValue,\n      setValue,\n      applyDateTime,\n      types,\n      spinButtonHandlers,\n      onChange,\n    ]);\n\n  // select expression text content on focus\n  const expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      expressionInputSelectAll();\n    }, [expressionInputSelectAll]);\n\n  // sanitize textnode if content is an expression\n  const expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement> =\n    useCallback(() => {\n      if (expressionInputRef.current && value?.type === 'expression') {\n        const currentExpressionInput =\n          expressionInputRef.current.textContent ?? '';\n        const isValidExpression = _parseTimeExpression(\n          currentExpressionInput.trim(),\n        );\n\n        if (isValidExpression) {\n          expressionInputRef.current.textContent = formatTimeValue(value);\n        }\n      }\n\n      // eslint annoyingly wants to add the ref to the dependency list\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n  // clipboard paste handler. apply clipboard content if formatted correctly\n  const onPaste: ClipboardEventHandler<HTMLSpanElement> = useCallback(\n    (event) => {\n      if (readOnly) {\n        return;\n      }\n\n      const data = event.clipboardData?.getData('text/plain');\n      if (!data) {\n        return;\n      }\n\n      // if the clipboard content is a valid expression or ISO, apply it as value\n      const nextValue = parseTimeAsTimeValue(\n        data.trim(),\n        TZDateMini.tz(getTimezone()).getTime(),\n        precision,\n      );\n      if (nextValue) {\n        setValueType(nextValue.type);\n        if (nextValue.type === 'expression') {\n          updateExpression(nextValue);\n        } else {\n          // If the new value is switching the input mode, delay updating the spinbuttons by one render cycle\n          requestAnimationFrame(() => applyDateTime(nextValue.absoluteDate));\n        }\n        setValue(nextValue);\n        event.preventDefault();\n      }\n    },\n    [applyDateTime, precision, readOnly, setValue, updateExpression],\n  );\n\n  // Handle keyboard events on the expression input: prevent Enter and spin on ArrowUp/ArrowDown\n  const expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement> =\n    useCallback(\n      (event) => {\n        if (event.key === 'Enter') {\n          event.preventDefault();\n          return;\n        }\n\n        if (\n          (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n          !disabled &&\n          !readOnly\n        ) {\n          const element = expressionInputRef.current;\n          if (!element) {\n            return;\n          }\n\n          const currentText = element.textContent ?? '';\n          if (!currentText.trim()) {\n            return;\n          }\n\n          const direction: 1 | -1 = event.key === 'ArrowUp' ? 1 : -1;\n          const newText = spinExpressionValue(currentText, direction);\n\n          if (newText === null) {\n            return;\n          }\n\n          event.preventDefault();\n\n          // Preserve cursor position\n          const selection = window.getSelection();\n          const cursorOffset = selection?.focusOffset ?? 0;\n\n          // Update the text content and fire the input handler\n          element.textContent = newText;\n\n          // Restore cursor position (clamped to new text length)\n          requestAnimationFrame(() => {\n            const textNode = element.firstChild;\n            if (textNode && selection) {\n              const newOffset = Math.min(cursorOffset, newText.length);\n              const range = document.createRange();\n              range.setStart(textNode, newOffset);\n              range.collapse(true);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          });\n\n          // Trigger the input handler to propagate the value change\n          element.dispatchEvent(new Event('input', { bubbles: true }));\n        }\n      },\n      [expressionInputRef, disabled, readOnly],\n    );\n\n  // focus the first spinbutton or the expression input based on the current input mode\n  const focus = useCallback(() => {\n    switch (valueType) {\n      case 'expression':\n        expressionInputRef.current?.focus();\n        break;\n      case 'iso8601':\n        firstSpinButtonHandler?.element?.current?.focus();\n        break;\n    }\n    // no need to pass the refs as dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueType, firstSpinButtonHandler]);\n\n  // first initialization of the uncontrolled expression value on component mount\n  useEffect(() => {\n    if (isControlled || value?.type !== 'expression') {\n      return;\n    }\n    updateExpression(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // if the spinbuttons are empty ...\n  useEffect(() => {\n    // Don't run the empty spinbutton check on component mount.\n    if (firstRun.current) {\n      firstRun.current = false;\n      validateTimeValue(value);\n      return;\n    }\n\n    // ... switch to expression input\n    if (valueType === 'iso8601' && spinButtonsEmpty) {\n      setValueType('expression');\n      setExpressionEmpty(true);\n\n      if (value !== null) {\n        setValue(null);\n      }\n\n      setInputValue('');\n\n      // reevaluate error state\n      validateTimeValue(null);\n\n      // wait until the expression input is visible to set the focus\n      setTimeout(() => {\n        expressionInputRef?.current?.focus();\n      });\n    }\n    // only react on empty state changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [spinButtonsEmpty]);\n\n  useEffect(() => {\n    if (valueType !== 'expression') {\n      return;\n    }\n\n    if (empty) {\n      setInputValue('');\n      return;\n    }\n\n    if (expressionInputRef.current?.textContent) {\n      setInputValue(expressionInputRef.current?.textContent); // fixes validating initial expression value in the DateTimeRangePicker\n    }\n    // valueType can be excluded because empty already depends on it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [empty]);\n\n  return {\n    empty,\n    spinButtons,\n    spinButtonHandlers,\n    value: typeof value === 'string' ? null : value,\n    valueType,\n    inputValue,\n    expressionInputHandler,\n    expressionOnFocusHandler,\n    expressionOnBlurHandler,\n    expressionOnKeyDownHandler,\n    onPaste,\n    focus,\n    validateTimeValue,\n  };\n};\n"],
+  "mappings": "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",
   "names": ["value", "type"]
 }

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

@@ -0,0 +1,51 @@
+import { _parseTimeExpression } from "@dynatrace-sdk/units";
+function checkFormat(content) {
+  return /^(now\(\)|now|Now)?([+-]?\d+)?([a-zA-Z][a-zA-Z0-9@]*)?$/.exec(
+    content
+  );
+}
+function isValidSuffix(numberPart, suffix) {
+  const hasSign = numberPart?.startsWith("+") || numberPart?.startsWith("-");
+  const candidate = `now()${hasSign ? "" : "+"}${numberPart ?? "0"}${suffix}`;
+  return Boolean(_parseTimeExpression(candidate));
+}
+function formatNumber(value, hasPrefix) {
+  if (value > 0 || value >= 0 && hasPrefix) {
+    return `+${value}`;
+  }
+  return String(value);
+}
+function spinExpressionValue(currentText, direction) {
+  const trimmed = currentText.trim();
+  if (!trimmed) {
+    return null;
+  }
+  if (trimmed === "+" || trimmed === "-") {
+    return formatNumber(direction, false);
+  }
+  const match = checkFormat(trimmed);
+  if (!match) {
+    return null;
+  }
+  const [, rawPrefix = "", numberPart, suffix = ""] = match;
+  if (!rawPrefix && !numberPart) {
+    return null;
+  }
+  if (suffix && !isValidSuffix(numberPart, suffix)) {
+    return null;
+  }
+  const prefix = rawPrefix === "Now" ? "now" : rawPrefix;
+  const currentNumber = numberPart ? Number.parseInt(numberPart, 10) : 0;
+  if (Number.isNaN(currentNumber)) {
+    return null;
+  }
+  const newNumber = currentNumber + direction;
+  if (prefix && newNumber === 0 && !suffix) {
+    return prefix;
+  }
+  return `${prefix}${formatNumber(newNumber, prefix !== "")}${suffix}`;
+}
+export {
+  spinExpressionValue
+};
+//# sourceMappingURL=useExpressionSpin.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/forms/date-time-range-picker/hooks/useExpressionSpin.ts"],
+  "sourcesContent": ["import { _parseTimeExpression } from '@dynatrace-sdk/units';\n\n/**\n * Matches relative timeframe expressions like `now-2d`, `now()+1h`, `-3w@w3`, `+1d@d`, `now`.\n * Groups: (1) now-prefix, (2) signed number, (3) unit + optional rounding\n * https://regex101.com/r/Ocriyz/1\n */\nfunction checkFormat(content: string): RegExpExecArray | null {\n  return /^(now\\(\\)|now|Now)?([+-]?\\d+)?([a-zA-Z][a-zA-Z0-9@]*)?$/.exec(\n    content,\n  );\n}\n\n/** Returns true if the suffix (unit + optional rounding) is recognised by the SDK parser. */\nfunction isValidSuffix(\n  numberPart: string | undefined,\n  suffix: string,\n): boolean {\n  const hasSign = numberPart?.startsWith('+') || numberPart?.startsWith('-');\n  const candidate = `now()${hasSign ? '' : '+'}${numberPart ?? '0'}${suffix}`;\n  return Boolean(_parseTimeExpression(candidate));\n}\n\n/** Formats a signed integer as a string, adding an explicit '+' for non-negative values when a prefix is present. */\nfunction formatNumber(value: number, hasPrefix: boolean): string {\n  if (value > 0 || (value >= 0 && hasPrefix)) {\n    return `+${value}`;\n  }\n  return String(value);\n}\n\n/**\n * Increments or decrements the number in a relative timeframe expression.\n *\n * @param currentText - The current expression (e.g. `now+1d`, `-2h`, `now`)\n * @param direction - +1 to increment, -1 to decrement\n * @returns The updated expression, or null if not spinnable\n *\n * @example\n * spinExpressionValue('now+1d', 1)   // 'now+2d'\n * spinExpressionValue('now+1d', -1)  // 'now'\n * spinExpressionValue('-2h', -1)     // '-3h'\n * spinExpressionValue('now', 1)      // 'now+1'\n * spinExpressionValue('+', 1)        // '+1'\n */\nexport function spinExpressionValue(\n  currentText: string,\n  direction: 1 | -1,\n): string | null {\n  const trimmed = currentText.trim();\n  if (!trimmed) {\n    return null;\n  }\n\n  // Bare '+' or '-' with no number yet \u2014 treat as 0\n  if (trimmed === '+' || trimmed === '-') {\n    return formatNumber(direction, false);\n  }\n\n  const match = checkFormat(trimmed);\n\n  if (!match) {\n    return null;\n  }\n\n  const [, rawPrefix = '', numberPart, suffix = ''] = match;\n\n  if (!rawPrefix && !numberPart) {\n    return null;\n  }\n\n  if (suffix && !isValidSuffix(numberPart, suffix)) {\n    return null;\n  }\n\n  const prefix = rawPrefix === 'Now' ? 'now' : rawPrefix;\n  const currentNumber = numberPart ? Number.parseInt(numberPart, 10) : 0;\n\n  if (Number.isNaN(currentNumber)) {\n    return null;\n  }\n\n  const newNumber = currentNumber + direction;\n\n  // A now-prefixed expression without a unit collapses to 'now' at 0 (e.g. 'now+1' \u2192 'now')\n  // With a unit the 0 is preserved so the unit is not lost (e.g. 'now+1h' \u2192 'now+0h')\n  if (prefix && newNumber === 0 && !suffix) {\n    return prefix;\n  }\n\n  return `${prefix}${formatNumber(newNumber, prefix !== '')}${suffix}`;\n}\n"],
+  "mappings": "AAAA,SAAS,4BAA4B;AAOrC,SAAS,YAAY,SAAyC;AAC5D,SAAO,0DAA0D;AAAA,IAC/D;AAAA,EACF;AACF;AAGA,SAAS,cACP,YACA,QACS;AACT,QAAM,UAAU,YAAY,WAAW,GAAG,KAAK,YAAY,WAAW,GAAG;AACzE,QAAM,YAAY,QAAQ,UAAU,KAAK,GAAG,GAAG,cAAc,GAAG,GAAG,MAAM;AACzE,SAAO,QAAQ,qBAAqB,SAAS,CAAC;AAChD;AAGA,SAAS,aAAa,OAAe,WAA4B;AAC/D,MAAI,QAAQ,KAAM,SAAS,KAAK,WAAY;AAC1C,WAAO,IAAI,KAAK;AAAA,EAClB;AACA,SAAO,OAAO,KAAK;AACrB;AAgBO,SAAS,oBACd,aACA,WACe;AACf,QAAM,UAAU,YAAY,KAAK;AACjC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAGA,MAAI,YAAY,OAAO,YAAY,KAAK;AACtC,WAAO,aAAa,WAAW,KAAK;AAAA,EACtC;AAEA,QAAM,QAAQ,YAAY,OAAO;AAEjC,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,EAAE,YAAY,IAAI,YAAY,SAAS,EAAE,IAAI;AAEpD,MAAI,CAAC,aAAa,CAAC,YAAY;AAC7B,WAAO;AAAA,EACT;AAEA,MAAI,UAAU,CAAC,cAAc,YAAY,MAAM,GAAG;AAChD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,cAAc,QAAQ,QAAQ;AAC7C,QAAM,gBAAgB,aAAa,OAAO,SAAS,YAAY,EAAE,IAAI;AAErE,MAAI,OAAO,MAAM,aAAa,GAAG;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,gBAAgB;AAIlC,MAAI,UAAU,cAAc,KAAK,CAAC,QAAQ;AACxC,WAAO;AAAA,EACT;AAEA,SAAO,GAAG,MAAM,GAAG,aAAa,WAAW,WAAW,EAAE,CAAC,GAAG,MAAM;AACpE;",
+  "names": []
+}

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

@@ -0,0 +1,124 @@
+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 { isExpressionString } from "../forms-core/time/timeParser.js";
+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;
+      }
+      const dateTimeFormat = parse(
+        dateTimeInput,
+        currentPattern,
+        new TZDateMini(0, getTimezone())
+      );
+      let precisionPattern = "yyyy-MM-dd'T'HH:mm:ss.SSSXXX";
+      if (currentPattern.includes("ss")) {
+        precisionPattern = "yyyy-MM-dd'T'HH:mm:ssXXX";
+      } else if (currentPattern.includes("mm")) {
+        precisionPattern = "yyyy-MM-dd'T'HH:mmXXX";
+      } else if (currentPattern.includes("dd") && currentPattern.includes("MM") && currentPattern.includes("yyyy")) {
+        precisionPattern = "yyyy-MM-dd";
+      }
+      parsedDateTimes[index] = format(dateTimeFormat, precisionPattern);
+    }
+  } catch {
+    return sanitizeCopyString(selectionString);
+  }
+  if (parsedDateTimes.length > 0) {
+    return parsedDateTimes.filter(Boolean).join("/");
+  }
+  return sanitizeCopyString(selectionString);
+}
+function buildPattern(selection) {
+  const anchorNode = selection.anchorNode;
+  const focusNode = selection.focusNode;
+  const root = anchorNode?.parentElement?.closest(".strato-inputgroup");
+  if (root === null || root === void 0) {
+    return null;
+  }
+  const pattern = [];
+  let capturePattern = false;
+  const treeWalker = document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT,
+    null
+  );
+  let currentNode = treeWalker.nextNode();
+  const startNode = selection.direction === "forward" ? anchorNode : focusNode;
+  const endNode = selection.direction === "forward" ? focusNode : anchorNode;
+  while (currentNode) {
+    if (selection.containsNode(currentNode, true) === false) {
+      currentNode = treeWalker.nextNode();
+      continue;
+    }
+    if (currentNode === startNode) {
+      capturePattern = true;
+    }
+    if (capturePattern) {
+      const parentElement = currentNode.parentElement;
+      if (parentElement?.hasAttribute("data-pattern")) {
+        pattern.push(parentElement.getAttribute("data-pattern") ?? "");
+      } else if (parentElement?.dataset.valuetype !== "expression") {
+        pattern.push(currentNode.textContent ?? "");
+      }
+    }
+    if (currentNode === endNode) {
+      break;
+    }
+    currentNode = treeWalker.nextNode();
+  }
+  if (pattern.length > 0) {
+    return pattern.join("").split("\u2192");
+  }
+  return null;
+}
+function onTimeframeCopyCapture(event) {
+  const selection = window.getSelection();
+  if (selection === null) {
+    return;
+  }
+  if (selection.anchorNode && selection.focusNode) {
+    try {
+      if (selection.direction === "forward") {
+        selection?.setBaseAndExtent(
+          selection.anchorNode,
+          0,
+          selection.focusNode,
+          selection.focusNode?.textContent?.length ?? 0
+        );
+      } else {
+        selection?.setBaseAndExtent(
+          selection.focusNode,
+          0,
+          selection.anchorNode,
+          selection.anchorNode?.textContent?.length ?? 0
+        );
+      }
+    } catch {
+    }
+  }
+  const selectionString = selection?.toString() ?? "";
+  const pattern = buildPattern(selection);
+  const clipBoardText = convertCopyString(selectionString, pattern);
+  navigator.clipboard.writeText(clipBoardText);
+}
+export {
+  buildPattern,
+  convertCopyString,
+  onTimeframeCopyCapture
+};
+//# sourceMappingURL=selection-copy-helpers.js.map

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

@@ -0,0 +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';\nimport type { ClipboardEvent as ReactClipboardEvent } from 'react';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\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 * @internal\n */\nexport function buildPattern(selection: Selection): string[] | null {\n  const anchorNode = selection.anchorNode;\n  const focusNode = selection.focusNode;\n  const root =\n    anchorNode?.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n\n  if (root === null || root === undefined) {\n    return null;\n  }\n\n  const pattern: Array<string> = [];\n  // Flag to define when to start capturing the pattern parts.\n  let capturePattern = 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  // Determine the start and end nodes based on the selection direction.\n  const startNode = selection.direction === 'forward' ? anchorNode : focusNode;\n  const endNode = selection.direction === 'forward' ? focusNode : anchorNode;\n\n  // Walk through the text nodes and capture the pattern parts until we reach the end node.\n  while (currentNode) {\n    // Skip over nodes that are actually between the start and end node,\n    // but are not part of the selection.\n    if (selection.containsNode(currentNode, true) === false) {\n      currentNode = treeWalker.nextNode();\n      continue;\n    }\n\n    if (currentNode === startNode) {\n      capturePattern = true;\n    }\n\n    if (capturePattern) {\n      const parentElement = currentNode.parentElement;\n      if (parentElement?.hasAttribute('data-pattern')) {\n        pattern.push(parentElement.getAttribute('data-pattern') ?? '');\n      } else if (parentElement?.dataset.valuetype !== 'expression') {\n        pattern.push(currentNode.textContent ?? '');\n      }\n    }\n\n    if (currentNode === endNode) {\n      break;\n    }\n\n    currentNode = treeWalker.nextNode();\n  }\n  if (pattern.length > 0) {\n    return pattern.join('').split('\u2192');\n  }\n\n  return null;\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 pared ISO timestamp or timeframe to the clipboard.\n * @internal\n */\nexport function onTimeframeCopyCapture(event: ReactClipboardEvent): void {\n  const selection = window.getSelection();\n\n  if (selection === null) {\n    return;\n  }\n\n  // expand selection to include the entire spin button, if it was not applied.\n  if (selection.anchorNode && selection.focusNode) {\n    try {\n      if (selection.direction === 'forward') {\n        selection?.setBaseAndExtent(\n          selection.anchorNode,\n          0,\n          selection.focusNode,\n          selection.focusNode?.textContent?.length ?? 0,\n        );\n      } else {\n        selection?.setBaseAndExtent(\n          selection.focusNode,\n          0,\n          selection.anchorNode,\n          selection.anchorNode?.textContent?.length ?? 0,\n        );\n      }\n    } catch {\n      // In some edge cases, the setBaseAndExtent can throw an error if the nodes are not selectable.\n    }\n  }\n\n  const selectionString = selection?.toString() ?? '';\n  const pattern = buildPattern(selection);\n  const clipBoardText = convertCopyString(selectionString, pattern);\n\n  navigator.clipboard.writeText(clipBoardText);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,204 @@
+import * as styles from "./DateTimeInput.sty.js";
+function checkIfValueTypeAlignment(textNode) {
+  const closestDateTimeInput = textNode.parentElement?.closest(
+    `.${styles.dateTimeInput}`
+  );
+  const currentValueType = closestDateTimeInput?.getAttribute("data-valuetype");
+  const closestValueTypeElement = textNode.parentElement?.closest("[data-valuetype]");
+  if (closestDateTimeInput === closestValueTypeElement) {
+    return true;
+  }
+  const nodeValueType = closestValueTypeElement?.getAttribute("data-valuetype");
+  return nodeValueType === currentValueType;
+}
+function previousTextNode(root, node) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  let current = walker.lastChild();
+  let found = false;
+  while (current) {
+    if (found) {
+      if (checkIfValueTypeAlignment(current)) {
+        return current;
+      }
+    }
+    if (current === node) {
+      found = true;
+    }
+    current = walker.previousNode();
+  }
+  return null;
+}
+function nextTextNode(root, node) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  let current = walker.nextNode();
+  let found = false;
+  while (current) {
+    if (found) {
+      if (checkIfValueTypeAlignment(current)) {
+        return current;
+      }
+    }
+    if (current === node) {
+      found = true;
+    }
+    current = walker.nextNode();
+  }
+  return null;
+}
+function findNextCharacterPosition(root, node, offset) {
+  if (node.nodeType === Node.TEXT_NODE && node.nodeValue && offset < node.nodeValue.length) {
+    return { node, offset: offset + 1 };
+  }
+  if (node.nodeType !== Node.TEXT_NODE) {
+    const childAtOffset = node.childNodes[offset];
+    if (childAtOffset) {
+      const walker = document.createTreeWalker(
+        childAtOffset,
+        NodeFilter.SHOW_TEXT,
+        null
+      );
+      const firstText = walker.firstChild() ?? (childAtOffset.nodeType === Node.TEXT_NODE ? childAtOffset : null);
+      if (firstText && checkIfValueTypeAlignment(firstText)) {
+        return { node: firstText, offset: 1 };
+      }
+    }
+  }
+  const next = nextTextNode(root, node);
+  if (!next) {
+    return null;
+  }
+  return { node: next, offset: 1 };
+}
+function findPreviousCharacterPosition(root, node, offset) {
+  if (node.nodeType === Node.TEXT_NODE && offset > 0) {
+    return { node, offset: offset - 1 };
+  }
+  const prev = previousTextNode(root, node);
+  if (!prev || prev.nodeValue === null) {
+    return null;
+  }
+  return { node: prev, offset: prev.nodeValue.length - 1 };
+}
+function findFirstCharacterPosition(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  const firstChild = walker.firstChild();
+  if (firstChild === null) {
+    return null;
+  }
+  return {
+    node: firstChild,
+    offset: 0
+  };
+}
+function findLastCharacterPosition(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+  const lastChild = walker.lastChild();
+  if (lastChild === null) {
+    return null;
+  }
+  return {
+    node: lastChild,
+    offset: lastChild.nodeValue?.length ?? 0
+  };
+}
+function removeContentEditable(rootElement, removeEventTarget, eventType, customRemovalFn) {
+  const contentEditables = rootElement.querySelectorAll("[contenteditable]");
+  for (const editable of contentEditables) {
+    const previousValue = editable.getAttribute("contenteditable") ?? void 0;
+    editable.removeAttribute("contenteditable");
+    editable.dataset.wascontenteditable = previousValue;
+    if (editable.hasAttribute("tabindex")) {
+      editable.dataset.wastabindex = editable.getAttribute("tabindex") ?? "";
+      editable.removeAttribute("tabindex");
+    }
+  }
+  const signal = new AbortController();
+  removeEventTarget.addEventListener(
+    eventType,
+    (event) => {
+      if (event instanceof KeyboardEvent && (event.key === "Control" || event.key === "Meta" || event.key === "Alt")) {
+        return;
+      }
+      const wasContentEditables = rootElement.querySelectorAll(
+        "[data-wascontenteditable]"
+      );
+      const selection = window.getSelection();
+      const { anchorNode, anchorOffset, focusNode, focusOffset } = selection ?? {};
+      const hasMultiElementSelection = selection !== null && selection.toString().length > 0 && (anchorNode !== focusNode || anchorNode !== null && anchorNode === focusNode && anchorOffset !== focusOffset && anchorNode?.nodeType === Node.ELEMENT_NODE);
+      if (hasMultiElementSelection) {
+        rootElement.setAttribute("data-restoring-selection", "");
+      }
+      for (const editable of wasContentEditables) {
+        const previousValue = editable.getAttribute("data-wascontenteditable");
+        if (previousValue !== null) {
+          editable.setAttribute("contenteditable", previousValue);
+        }
+        editable.removeAttribute("data-wascontenteditable");
+        const wasTabIndex = editable.getAttribute("data-wastabindex");
+        if (wasTabIndex !== null) {
+          editable.setAttribute("tabindex", wasTabIndex);
+          editable.removeAttribute("data-wastabindex");
+        }
+      }
+      if (anchorNode !== null && anchorNode !== void 0 && anchorOffset !== void 0 && focusNode !== null && focusNode !== void 0 && focusOffset !== void 0) {
+        window.getSelection()?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      }
+      customRemovalFn?.(event, hasMultiElementSelection);
+      rootElement.removeAttribute("data-restoring-selection");
+      signal.abort();
+    },
+    { signal: signal.signal }
+  );
+}
+function extendSelection(key) {
+  const selection = window.getSelection();
+  if (selection === null || selection.focusNode === null || selection.rangeCount < 1) {
+    return;
+  }
+  const focusNode = selection.focusNode;
+  const focusOffset = selection.focusOffset;
+  let nextPos = null;
+  const root = focusNode.parentElement?.closest(".strato-inputgroup");
+  if (root === null || root === void 0) {
+    return;
+  }
+  if (key === "ArrowLeft") {
+    nextPos = findPreviousCharacterPosition(root, focusNode, focusOffset);
+  } else if (key === "ArrowRight") {
+    nextPos = findNextCharacterPosition(root, focusNode, focusOffset);
+  } else if (key === "Home") {
+    nextPos = findFirstCharacterPosition(root);
+  } else if (key === "End") {
+    nextPos = findLastCharacterPosition(root);
+  }
+  if (nextPos) {
+    selection.extend(nextPos.node, nextPos.offset);
+  }
+}
+function extendSelectionToAll() {
+  const selection = window.getSelection();
+  if (selection === null || selection.focusNode === null || selection.rangeCount < 1) {
+    return;
+  }
+  const focusNode = selection.focusNode;
+  const root = focusNode.parentElement?.closest(".strato-inputgroup");
+  if (root === null || root === void 0) {
+    return;
+  }
+  const firstPosition = findFirstCharacterPosition(root);
+  const lastPosition = findLastCharacterPosition(root);
+  if (firstPosition && lastPosition) {
+    selection.setBaseAndExtent(
+      firstPosition.node,
+      firstPosition.offset,
+      lastPosition.node,
+      lastPosition.offset
+    );
+  }
+}
+export {
+  extendSelection,
+  extendSelectionToAll,
+  removeContentEditable
+};
+//# sourceMappingURL=selection-helpers.js.map