@dynatrace/strato-components 3.1.1 → 3.2.0

package/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -18,10 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DateTimeRangePicker_css_exports = {};
 __export(DateTimeRangePicker_css_exports, {
-  dateTimeRangeCSS: () => dateTimeRangeCSS
+  dateTimeRangeCSS: () => dateTimeRangeCSS,
+  timeframeSeparator: () => timeframeSeparator
 });
 module.exports = __toCommonJS(DateTimeRangePicker_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeRangeCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-1-1", variantClassNames: { showError: { true: "_1vlwkc21-3-1-1" }, disabled: { true: "_1vlwkc22-3-1-1" }, readOnly: { true: "_1vlwkc23-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var dateTimeRangeCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-2-0", variantClassNames: { showError: { true: "_1vlwkc21-3-2-0" }, disabled: { true: "_1vlwkc22-3-2-0" }, readOnly: { true: "_1vlwkc23-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var timeframeSeparator = "_1vlwkc24-3-2-0";

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

@@ -13,7 +13,6 @@ export declare const useDateTimeInput: (props: DateTimeInputProps, expressionInp
     expressionOnFocusHandler: FocusEventHandler<HTMLSpanElement>;
     expressionOnBlurHandler: FocusEventHandler<HTMLSpanElement>;
     expressionOnKeyDownHandler: ReactKeyboardEventHandler<HTMLSpanElement>;
-    onCopyCapture: ClipboardEventHandler<HTMLSpanElement>;
     onPaste: ClipboardEventHandler<HTMLSpanElement>;
     focus: () => void;
     validateTimeValue: (value?: TimeValue | null, expressionValue?: string) => void;

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

@@ -27,6 +27,7 @@ var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_useDateTimeIInputValidation = require("./useDateTimeIInputValidation.js");
 var import_useDateTimeParser = require("./useDateTimeParser.js");
+var import_useExpressionSpin = require("./useExpressionSpin.js");
 var import_useAriaLabelingProps = require("../../../core/hooks/useAriaLabelingProps.js");
 var import_useControllableState = require("../../../core/hooks/useControllableState.js");
 var import_useDateTimePicker = require("../../date-time-picker/hooks/useDateTimePicker.js");
@@ -223,20 +224,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
       }
     }
   }, [value]);
-  const onCopyCapture = (0, import_react.useCallback)(
-    async (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (value === null) {
-        return;
-      }
-      try {
-        await navigator.clipboard.writeText(value.value);
-      } catch {
-      }
-    },
-    [value]
-  );
   const onPaste = (0, import_react.useCallback)(
     (event) => {
       if (readOnly) {
@@ -264,11 +251,46 @@ const useDateTimeInput = (props, expressionInputRef) => {
     },
     [applyDateTime, precision, readOnly, setValue, updateExpression]
   );
-  const expressionOnKeyDownHandler = (0, import_react.useCallback)((event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-    }
-  }, []);
+  const expressionOnKeyDownHandler = (0, import_react.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 = (0, import_useExpressionSpin.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 = (0, import_react.useCallback)(() => {
     switch (valueType) {
       case "expression":
@@ -327,7 +349,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
     expressionOnFocusHandler,
     expressionOnBlurHandler,
     expressionOnKeyDownHandler,
-    onCopyCapture,
     onPaste,
     focus,
     validateTimeValue

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

@@ -0,0 +1,15 @@
+/**
+ * Increments or decrements the number in a relative timeframe expression.
+ *
+ * @param currentText - The current expression (e.g. `now+1d`, `-2h`, `now`)
+ * @param direction - +1 to increment, -1 to decrement
+ * @returns The updated expression, or null if not spinnable
+ *
+ * @example
+ * spinExpressionValue('now+1d', 1)   // 'now+2d'
+ * spinExpressionValue('now+1d', -1)  // 'now'
+ * spinExpressionValue('-2h', -1)     // '-3h'
+ * spinExpressionValue('now', 1)      // 'now+1'
+ * spinExpressionValue('+', 1)        // '+1'
+ */
+export declare function spinExpressionValue(currentText: string, direction: 1 | -1): string | null;

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

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useExpressionSpin_exports = {};
+__export(useExpressionSpin_exports, {
+  spinExpressionValue: () => spinExpressionValue
+});
+module.exports = __toCommonJS(useExpressionSpin_exports);
+var import_units = require("@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((0, import_units._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}`;
+}

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

@@ -0,0 +1,14 @@
+import type { ClipboardEvent as ReactClipboardEvent } from 'react';
+export declare function convertCopyString(selectionString: string, patterns: Array<string> | null): string;
+/**
+ * Helper function that builds a pattern array from the selected text nodes.
+ * Extracts patterns from data-pattern attributes and skips data-expression nodes.
+ * @internal
+ */
+export declare function buildPattern(selection: Selection): string[] | null;
+/**
+ * Helper function that tries to parse parts of the current selection as valid time frames
+ * and if successful, copies the correctly pared ISO timestamp or timeframe to the clipboard.
+ * @internal
+ */
+export declare function onTimeframeCopyCapture(event: ReactClipboardEvent): void;

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

@@ -0,0 +1,143 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var selection_copy_helpers_exports = {};
+__export(selection_copy_helpers_exports, {
+  buildPattern: () => buildPattern,
+  convertCopyString: () => convertCopyString,
+  onTimeframeCopyCapture: () => onTimeframeCopyCapture
+});
+module.exports = __toCommonJS(selection_copy_helpers_exports);
+var import_tz = require("@date-fns/tz");
+var import_date_fns = require("date-fns");
+var import_units = require("@dynatrace-sdk/units");
+var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_timeParser = require("../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 ((0, import_timeParser.isExpressionString)(dateTimeInput)) {
+        parsedDateTimes[index] = (0, import_units.parseTimeAsTimeValue)(dateTimeInput)?.value ?? dateTimeInput;
+        continue;
+      }
+      const currentPattern = patterns?.[index];
+      if (currentPattern === void 0 || (currentPattern.includes("dd") && currentPattern.includes("MM") && currentPattern.includes("yyyy")) === false) {
+        parsedDateTimes[index] = dateTimeInput;
+        continue;
+      }
+      const dateTimeFormat = (0, import_date_fns.parse)(
+        dateTimeInput,
+        currentPattern,
+        new import_tz.TZDateMini(0, (0, import_user_preferences.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] = (0, import_date_fns.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);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Helper function that removes the contenteditable attributes for selection manipulation
+ * @param rootElement - Must contain all contenteditable children.
+ * @param removeEventTarget - Where to bind the inverese event listener to
+ * @param eventType - Inverse event type, when should the contenteditable attribute be added back
+ * @param customRemovalFn - Called when the inverse event fires in order to execute custom logic.
+ *
+ * @internal
+ */
+export declare function removeContentEditable(rootElement: HTMLElement, removeEventTarget: Document | HTMLElement, eventType: 'mouseup' | 'keyup', customRemovalFn?: (event: Event, hasMultiElementSelection: boolean) => void): void;
+/**
+ * Helper function that allows to move the selection further on a character basis or
+ * to the start / end of the TFS.
+ * @param key - Provides the key which allows to extend the selection in the correct direction.
+ * @internal
+ */
+export declare function extendSelection(key: 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End'): void;
+/**
+ * Helper function that allows to expand the selection to the entire range.
+ * @internal
+ */
+export declare function extendSelectionToAll(): void;

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

@@ -0,0 +1,233 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var selection_helpers_exports = {};
+__export(selection_helpers_exports, {
+  extendSelection: () => extendSelection,
+  extendSelectionToAll: () => extendSelectionToAll,
+  removeContentEditable: () => removeContentEditable
+});
+module.exports = __toCommonJS(selection_helpers_exports);
+var styles = __toESM(require("./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
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';
+/**
+ * Hook that provides interaction handlers for selection behavior in date/time pickers.
+ * Manages mouse and keyboard interactions including text selection and focus management.
+ *
+ * @param touchedContainerRef - Reference to the container that should be checked when forwarding focus
+ * @param onFocusInput - Callback to focus the appropriate input(s) when needed
+ * @returns Object containing onMouseDown and onKeyDown event handlers
+ *
+ * @internal
+ */
+export declare function useSelectionInteractionHandlers(touchedContainerRef: RefObject<HTMLElement>, onFocusInput: () => void): {
+    onMouseDown: (event: ReactMouseEvent<HTMLDivElement>) => void;
+    onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+};