@dynatrace/strato-components 3.2.0 → 3.3.0

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

@@ -2,6 +2,7 @@ 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 { isExpressionString } from "../forms-core/time/timeParser.js";
 function sanitizeCopyString(selectionString) {
   return selectionString.split("\u2192").map((part) => part.replaceAll("\n", "").trim()).join(" ").trim();
@@ -43,15 +44,16 @@ function convertCopyString(selectionString, patterns) {
   }
   return sanitizeCopyString(selectionString);
 }
-function buildPattern(selection) {
+function getPatternAndSelectedText(selection) {
   const anchorNode = selection.anchorNode;
   const focusNode = selection.focusNode;
   const root = anchorNode?.parentElement?.closest(".strato-inputgroup");
   if (root === null || root === void 0) {
-    return null;
+    return { pattern: null, text: "" };
   }
-  const pattern = [];
-  let capturePattern = false;
+  const patternParts = [];
+  let text = "";
+  let capturing = false;
   const treeWalker = document.createTreeWalker(
     root,
     NodeFilter.SHOW_TEXT,
@@ -61,19 +63,16 @@ function buildPattern(selection) {
   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;
+      capturing = true;
     }
-    if (capturePattern) {
+    if (capturing && checkIfValueTypeAlignment(currentNode)) {
+      text += currentNode.textContent ?? "";
       const parentElement = currentNode.parentElement;
       if (parentElement?.hasAttribute("data-pattern")) {
-        pattern.push(parentElement.getAttribute("data-pattern") ?? "");
+        patternParts.push(parentElement.getAttribute("data-pattern") ?? "");
       } else if (parentElement?.dataset.valuetype !== "expression") {
-        pattern.push(currentNode.textContent ?? "");
+        patternParts.push(currentNode.textContent ?? "");
       }
     }
     if (currentNode === endNode) {
@@ -81,44 +80,28 @@ function buildPattern(selection) {
     }
     currentNode = treeWalker.nextNode();
   }
-  if (pattern.length > 0) {
-    return pattern.join("").split("\u2192");
-  }
-  return null;
+  const pattern = patternParts.length > 0 ? patternParts.join("").split("\u2192") : null;
+  return { pattern, text };
 }
 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 root = selection.anchorNode?.parentElement?.closest(
+    ".strato-inputgroup"
+  );
+  if (root === null || root === void 0) {
+    return;
   }
-  const selectionString = selection?.toString() ?? "";
-  const pattern = buildPattern(selection);
+  const { text: selectionString, pattern } = getPatternAndSelectedText(selection);
   const clipBoardText = convertCopyString(selectionString, pattern);
-  navigator.clipboard.writeText(clipBoardText);
+  event.preventDefault();
+  event.clipboardData.setData("text/plain", clipBoardText);
 }
 export {
-  buildPattern,
   convertCopyString,
+  getPatternAndSelectedText,
   onTimeframeCopyCapture
 };
 //# sourceMappingURL=selection-copy-helpers.js.map

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';\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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",
+  "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 { 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  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 { 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  // 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  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 * 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  const root =\n    selection.anchorNode?.parentElement?.closest<HTMLDivElement>(\n      '.strato-inputgroup',\n    );\n\n  if (root === null || root === undefined) {\n    return;\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 anchor/focus walk in buildPattern.\n  const { text: selectionString, pattern } =\n    getPatternAndSelectedText(selection);\n  const clipBoardText = convertCopyString(selectionString, pattern);\n\n  // Write synchronously via event.clipboardData and prevent the browser's native copy\n  // (which would also only capture the anchor element's text due to contenteditable).\n  event.preventDefault();\n  event.clipboardData.setData('text/plain', clipBoardText);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -46,7 +46,7 @@ function nextTextNode(root, node) {
   return null;
 }
 function findNextCharacterPosition(root, node, offset) {
-  if (node.nodeType === Node.TEXT_NODE && node.nodeValue && offset < node.nodeValue.length) {
+  if (node.nodeType === Node.TEXT_NODE && node.nodeValue && offset < node.nodeValue.length && checkIfValueTypeAlignment(node)) {
     return { node, offset: offset + 1 };
   }
   if (node.nodeType !== Node.TEXT_NODE) {
@@ -63,17 +63,23 @@ function findNextCharacterPosition(root, node, offset) {
       }
     }
   }
-  const next = nextTextNode(root, node);
+  let next = nextTextNode(root, node);
+  while (next !== null && getClosestContentEditable(next) === null) {
+    next = nextTextNode(root, next);
+  }
   if (!next) {
     return null;
   }
   return { node: next, offset: 1 };
 }
 function findPreviousCharacterPosition(root, node, offset) {
-  if (node.nodeType === Node.TEXT_NODE && offset > 0) {
+  if (node.nodeType === Node.TEXT_NODE && offset > 0 && checkIfValueTypeAlignment(node)) {
     return { node, offset: offset - 1 };
   }
-  const prev = previousTextNode(root, node);
+  let prev = previousTextNode(root, node);
+  while (prev !== null && getClosestContentEditable(prev) === null) {
+    prev = previousTextNode(root, prev);
+  }
   if (!prev || prev.nodeValue === null) {
     return null;
   }
@@ -81,25 +87,25 @@ function findPreviousCharacterPosition(root, node, offset) {
 }
 function findFirstCharacterPosition(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
-  const firstChild = walker.firstChild();
-  if (firstChild === null) {
-    return null;
+  let current = walker.firstChild();
+  while (current !== null) {
+    if (checkIfValueTypeAlignment(current)) {
+      return { node: current, offset: 0 };
+    }
+    current = walker.nextNode();
   }
-  return {
-    node: firstChild,
-    offset: 0
-  };
+  return null;
 }
 function findLastCharacterPosition(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
-  const lastChild = walker.lastChild();
-  if (lastChild === null) {
-    return null;
+  let current = walker.lastChild();
+  while (current !== null) {
+    if (checkIfValueTypeAlignment(current)) {
+      return { node: current, offset: current.nodeValue?.length ?? 0 };
+    }
+    current = walker.previousNode();
   }
-  return {
-    node: lastChild,
-    offset: lastChild.nodeValue?.length ?? 0
-  };
+  return null;
 }
 function removeContentEditable(rootElement, removeEventTarget, eventType, customRemovalFn) {
   const contentEditables = rootElement.querySelectorAll("[contenteditable]");
@@ -122,12 +128,12 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
       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", "");
-      }
+      const selectionBeforeRestore = window.getSelection();
+      const snapshotAnchorNode = selectionBeforeRestore?.anchorNode ?? null;
+      const snapshotAnchorOffset = selectionBeforeRestore?.anchorOffset ?? 0;
+      const snapshotFocusNode = selectionBeforeRestore?.focusNode ?? null;
+      const snapshotFocusOffset = selectionBeforeRestore?.focusOffset ?? 0;
+      const hasMultiElementSelection = selectionBeforeRestore !== null && selectionBeforeRestore.toString().length > 0 && (snapshotAnchorNode !== snapshotFocusNode || snapshotAnchorNode !== null && snapshotAnchorNode === snapshotFocusNode && snapshotAnchorOffset !== snapshotFocusOffset && snapshotAnchorNode?.nodeType === Node.ELEMENT_NODE);
       for (const editable of wasContentEditables) {
         const previousValue = editable.getAttribute("data-wascontenteditable");
         if (previousValue !== null) {
@@ -140,11 +146,42 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
           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);
+      if (hasMultiElementSelection && snapshotAnchorNode && snapshotFocusNode) {
+        const anchorSpinButton = resolveSpinButton(
+          snapshotAnchorNode,
+          rootElement
+        );
+        const focusSpinButton = resolveSpinButton(
+          snapshotFocusNode,
+          rootElement
+        );
+        if (anchorSpinButton && focusSpinButton) {
+          const anchorToFocusPosition = anchorSpinButton.compareDocumentPosition(focusSpinButton);
+          const focusIsAfterAnchor = !!(anchorToFocusPosition & Node.DOCUMENT_POSITION_FOLLOWING);
+          const firstSpinButton = focusIsAfterAnchor ? anchorSpinButton : focusSpinButton;
+          const lastSpinButton = focusIsAfterAnchor ? focusSpinButton : anchorSpinButton;
+          const firstPos = findFirstCharacterPosition(firstSpinButton);
+          const lastPos = findLastCharacterPosition(lastSpinButton);
+          if (firstPos && lastPos) {
+            window.getSelection()?.setBaseAndExtent(
+              firstPos.node,
+              firstPos.offset,
+              lastPos.node,
+              lastPos.offset
+            );
+          }
+        }
+      } else {
+        if (snapshotAnchorNode && snapshotFocusNode) {
+          window.getSelection()?.setBaseAndExtent(
+            snapshotAnchorNode,
+            snapshotAnchorOffset,
+            snapshotFocusNode,
+            snapshotFocusOffset
+          );
+        }
       }
       customRemovalFn?.(event, hasMultiElementSelection);
-      rootElement.removeAttribute("data-restoring-selection");
       signal.abort();
     },
     { signal: signal.signal }
@@ -152,9 +189,11 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
 }
 function extendSelection(key) {
   const selection = window.getSelection();
-  if (selection === null || selection.focusNode === null || selection.rangeCount < 1) {
+  if (selection === null || selection.anchorNode === null || selection.focusNode === null || selection.rangeCount < 1) {
     return;
   }
+  const anchorNode = selection.anchorNode;
+  const anchorOffset = selection.anchorOffset;
   const focusNode = selection.focusNode;
   const focusOffset = selection.focusOffset;
   let nextPos = null;
@@ -172,7 +211,14 @@ function extendSelection(key) {
     nextPos = findLastCharacterPosition(root);
   }
   if (nextPos) {
-    selection.extend(nextPos.node, nextPos.offset);
+    root.setAttribute("data-restoring-selection", "");
+    selection.setBaseAndExtent(
+      anchorNode,
+      anchorOffset,
+      nextPos.node,
+      nextPos.offset
+    );
+    root.removeAttribute("data-restoring-selection");
   }
 }
 function extendSelectionToAll() {
@@ -185,20 +231,56 @@ function extendSelectionToAll() {
   if (root === null || root === void 0) {
     return;
   }
+  root.setAttribute("data-restoring-selection", "");
+  root.focus();
   const firstPosition = findFirstCharacterPosition(root);
   const lastPosition = findLastCharacterPosition(root);
-  if (firstPosition && lastPosition) {
-    selection.setBaseAndExtent(
-      firstPosition.node,
-      firstPosition.offset,
-      lastPosition.node,
-      lastPosition.offset
-    );
+  if (!firstPosition || !lastPosition) {
+    root.removeAttribute("data-restoring-selection");
+    return;
+  }
+  selection.setBaseAndExtent(
+    firstPosition.node,
+    firstPosition.offset,
+    lastPosition.node,
+    lastPosition.offset
+  );
+  root.removeAttribute("data-restoring-selection");
+}
+const SPIN_BUTTON_SELECTOR = "[contenteditable], [data-wascontenteditable]";
+function getClosestContentEditable(node) {
+  return node.nodeType === Node.TEXT_NODE ? node.parentElement?.closest(
+    SPIN_BUTTON_SELECTOR
+  ) ?? null : node.closest?.(SPIN_BUTTON_SELECTOR) ?? null;
+}
+function resolveSpinButton(node, root) {
+  const direct = getClosestContentEditable(node);
+  if (direct !== null) {
+    return direct;
+  }
+  return getNearestPrecedingSpinButton(node, root);
+}
+function getNearestPrecedingSpinButton(node, root) {
+  const spinButtons = Array.from(
+    root.querySelectorAll(SPIN_BUTTON_SELECTOR)
+  );
+  if (spinButtons.length === 0) {
+    return null;
+  }
+  let nearest = null;
+  for (const spinButton of spinButtons) {
+    const position = spinButton.compareDocumentPosition(node);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      nearest = spinButton;
+    }
   }
+  return nearest ?? spinButtons[0] ?? null;
 }
 export {
+  checkIfValueTypeAlignment,
   extendSelection,
   extendSelectionToAll,
-  removeContentEditable
+  removeContentEditable,
+  resolveSpinButton
 };
 //# sourceMappingURL=selection-helpers.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/selection-helpers.ts"],
-  "sourcesContent": ["import * as styles from './DateTimeInput.sty.js';\n\nfunction checkIfValueTypeAlignment(textNode: Node): boolean {\n  // There are a lot of hidden text nodes for the mix of spin button and expression\n  // in the DateTimeInput.\n  // In order to skip the hidden ones correctly, we need to check for parent value types.\n  const closestDateTimeInput = textNode.parentElement?.closest(\n    `.${styles.dateTimeInput}`,\n  );\n  const currentValueType = closestDateTimeInput?.getAttribute('data-valuetype');\n  const closestValueTypeElement =\n    textNode.parentElement?.closest('[data-valuetype]');\n\n  // If the query resolves to the same dateTime input element, it means that there is no other defining parent.\n  // In this case it may be a placeholder / separator text or any other node.\n  if (closestDateTimeInput === closestValueTypeElement) {\n    return true;\n  }\n\n  const nodeValueType = closestValueTypeElement?.getAttribute('data-valuetype');\n\n  return nodeValueType === currentValueType;\n}\n\n/** Helper to walk backwards through text nodes. */\nfunction previousTextNode(root: HTMLElement, node: Node): Node | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n\n  let current = walker.lastChild();\n  let found = false;\n  while (current) {\n    if (found) {\n      // There are a lot of hidden text nodes for the mix of spin button and expression\n      // in the DateTimeInput.\n      // In order to skip the hidden ones correctly, we need to check for parent value types.\n      if (checkIfValueTypeAlignment(current)) {\n        return current;\n      }\n    }\n\n    if (current === node) {\n      found = true;\n    }\n\n    current = walker.previousNode();\n  }\n\n  return null;\n}\n\n/** Helper to walk forwards through text nodes. */\nfunction nextTextNode(root: HTMLElement, node: Node): Node | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n\n  let current = walker.nextNode();\n  let found = false;\n\n  while (current) {\n    if (found) {\n      // There are a lot of hidden text nodes for the mix of spin button and expression\n      // in the DateTimeInput.\n      // In order to skip the hidden ones correctly, we need to check for parent value types.\n      if (checkIfValueTypeAlignment(current)) {\n        return current;\n      }\n    }\n    if (current === node) {\n      found = true;\n    }\n    current = walker.nextNode();\n  }\n\n  return null;\n}\n\n/** Helper that finds the next character position to adjust the global selection. */\nfunction findNextCharacterPosition(\n  root: HTMLElement,\n  node: Node,\n  offset: number,\n): { node: Node; offset: number } | null {\n  if (\n    node.nodeType === Node.TEXT_NODE &&\n    node.nodeValue &&\n    offset < node.nodeValue.length\n  ) {\n    return { node, offset: offset + 1 };\n  }\n\n  // When the selection lands on an element node (not a text node), the offset\n  // represents a child index. Walk into that child subtree to find the first\n  // text node from that position forward.\n  if (node.nodeType !== Node.TEXT_NODE) {\n    const childAtOffset = node.childNodes[offset];\n    if (childAtOffset) {\n      const walker = document.createTreeWalker(\n        childAtOffset,\n        NodeFilter.SHOW_TEXT,\n        null,\n      );\n      const firstText =\n        walker.firstChild() ??\n        (childAtOffset.nodeType === Node.TEXT_NODE ? childAtOffset : null);\n      if (firstText && checkIfValueTypeAlignment(firstText)) {\n        return { node: firstText, offset: 1 };\n      }\n    }\n  }\n\n  const next = nextTextNode(root, node);\n\n  if (!next) {\n    return null;\n  }\n\n  return { node: next, offset: 1 };\n}\n\n/** Helper that finds the previous character position to adjust the global selection. */\nfunction findPreviousCharacterPosition(\n  root: HTMLElement,\n  node: Node,\n  offset: number,\n): { node: Node; offset: number } | null {\n  if (node.nodeType === Node.TEXT_NODE && offset > 0) {\n    return { node, offset: offset - 1 };\n  }\n\n  const prev = previousTextNode(root, node);\n  if (!prev || prev.nodeValue === null) {\n    return null;\n  }\n\n  return { node: prev, offset: prev.nodeValue.length - 1 };\n}\n\n/** Helper to find the first textNode to apply selection */\nfunction findFirstCharacterPosition(\n  root: HTMLElement,\n): { node: Node; offset: number } | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n  const firstChild = walker.firstChild();\n  if (firstChild === null) {\n    return null;\n  }\n  return {\n    node: firstChild,\n    offset: 0,\n  };\n}\n\n/** Helper to find the last textNode to apply selection */\nfunction findLastCharacterPosition(\n  root: HTMLElement,\n): { node: Node; offset: number } | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n  const lastChild = walker.lastChild();\n  if (lastChild === null) {\n    return null;\n  }\n  return {\n    node: lastChild,\n    offset: lastChild.nodeValue?.length ?? 0,\n  };\n}\n\n/**\n * Helper function that removes the contenteditable attributes for selection manipulation\n * @param rootElement - Must contain all contenteditable children.\n * @param removeEventTarget - Where to bind the inverese event listener to\n * @param eventType - Inverse event type, when should the contenteditable attribute be added back\n * @param customRemovalFn - Called when the inverse event fires in order to execute custom logic.\n *\n * @internal\n */\nexport function removeContentEditable(\n  rootElement: HTMLElement,\n  removeEventTarget: Document | HTMLElement,\n  eventType: 'mouseup' | 'keyup',\n  customRemovalFn?: (event: Event, hasMultiElementSelection: boolean) => void,\n): void {\n  const contentEditables =\n    rootElement.querySelectorAll<HTMLElement>('[contenteditable]');\n  for (const editable of contentEditables) {\n    const previousValue = editable.getAttribute('contenteditable') ?? undefined;\n    editable.removeAttribute('contenteditable');\n    editable.dataset.wascontenteditable = previousValue;\n\n    // Also temporarily remove tabIndex so the element isn't focusable during\n    // the drag. Without this, the browser auto-focuses the first spin button\n    // on mousedown when the component didn't have focus before, which disrupts\n    // drag-select across multiple elements.\n    if (editable.hasAttribute('tabindex')) {\n      editable.dataset.wastabindex = editable.getAttribute('tabindex') ?? '';\n      editable.removeAttribute('tabindex');\n    }\n  }\n\n  const signal = new AbortController();\n\n  removeEventTarget.addEventListener(\n    eventType,\n    (event: Event) => {\n      if (\n        event instanceof KeyboardEvent &&\n        (event.key === 'Control' || event.key === 'Meta' || event.key === 'Alt')\n      ) {\n        return;\n      }\n\n      const wasContentEditables = rootElement.querySelectorAll<HTMLElement>(\n        '[data-wascontenteditable]',\n      );\n      const selection = window.getSelection();\n      const { anchorNode, anchorOffset, focusNode, focusOffset } =\n        selection ?? {};\n\n      // Only set the restoring-selection marker when the selection actually\n      // spans multiple elements (drag-select). For simple clicks the marker\n      // must NOT be set, otherwise the subsequent onFocus won't call selectAll().\n      const hasMultiElementSelection =\n        selection !== null &&\n        selection.toString().length > 0 &&\n        (anchorNode !== focusNode ||\n          (anchorNode !== null &&\n            anchorNode === focusNode &&\n            anchorOffset !== focusOffset &&\n            anchorNode?.nodeType === Node.ELEMENT_NODE));\n\n      if (hasMultiElementSelection) {\n        rootElement.setAttribute('data-restoring-selection', '');\n      }\n\n      for (const editable of wasContentEditables) {\n        const previousValue = editable.getAttribute('data-wascontenteditable');\n        if (previousValue !== null) {\n          editable.setAttribute('contenteditable', previousValue);\n        }\n        editable.removeAttribute('data-wascontenteditable');\n\n        const wasTabIndex = editable.getAttribute('data-wastabindex');\n        if (wasTabIndex !== null) {\n          editable.setAttribute('tabindex', wasTabIndex);\n          editable.removeAttribute('data-wastabindex');\n        }\n      }\n\n      // Firefox throws away the selection after the contentEditable is added back in,\n      // so we need to make sure we keep the selection\n      if (\n        anchorNode !== null &&\n        anchorNode !== undefined &&\n        anchorOffset !== undefined &&\n        focusNode !== null &&\n        focusNode !== undefined &&\n        focusOffset !== undefined\n      ) {\n        window\n          .getSelection()\n          ?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);\n      }\n\n      customRemovalFn?.(event, hasMultiElementSelection);\n\n      rootElement.removeAttribute('data-restoring-selection');\n\n      signal.abort();\n    },\n    { signal: signal.signal },\n  );\n}\n\n/**\n * Helper function that allows to move the selection further on a character basis or\n * to the start / end of the TFS.\n * @param key - Provides the key which allows to extend the selection in the correct direction.\n * @internal\n */\nexport function extendSelection(\n  key: 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End',\n): void {\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.focusNode === null ||\n    selection.rangeCount < 1\n  ) {\n    return;\n  }\n\n  const focusNode = selection.focusNode;\n  const focusOffset = selection.focusOffset;\n\n  let nextPos: { node: Node; offset: number } | null = null;\n\n  const root =\n    focusNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n  if (root === null || root === undefined) {\n    return;\n  }\n\n  if (key === 'ArrowLeft') {\n    nextPos = findPreviousCharacterPosition(root, focusNode, focusOffset);\n  } else if (key === 'ArrowRight') {\n    nextPos = findNextCharacterPosition(root, focusNode, focusOffset);\n  } else if (key === 'Home') {\n    nextPos = findFirstCharacterPosition(root);\n  } else if (key === 'End') {\n    nextPos = findLastCharacterPosition(root);\n  }\n  if (nextPos) {\n    selection.extend(nextPos.node, nextPos.offset);\n  }\n}\n\n/**\n * Helper function that allows to expand the selection to the entire range.\n * @internal\n */\nexport function extendSelectionToAll(): void {\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.focusNode === null ||\n    selection.rangeCount < 1\n  ) {\n    return;\n  }\n\n  const focusNode = selection.focusNode;\n\n  const root =\n    focusNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n  if (root === null || root === undefined) {\n    return;\n  }\n  const firstPosition = findFirstCharacterPosition(root);\n  const lastPosition = findLastCharacterPosition(root);\n  if (firstPosition && lastPosition) {\n    selection.setBaseAndExtent(\n      firstPosition.node,\n      firstPosition.offset,\n      lastPosition.node,\n      lastPosition.offset,\n    );\n  }\n}\n"],
-  "mappings": "AAAA,YAAY,YAAY;AAExB,SAAS,0BAA0B,UAAyB;AAI1D,QAAM,uBAAuB,SAAS,eAAe;AAAA,IACnD,IAAI,OAAO,aAAa;AAAA,EAC1B;AACA,QAAM,mBAAmB,sBAAsB,aAAa,gBAAgB;AAC5E,QAAM,0BACJ,SAAS,eAAe,QAAQ,kBAAkB;AAIpD,MAAI,yBAAyB,yBAAyB;AACpD,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,yBAAyB,aAAa,gBAAgB;AAE5E,SAAO,kBAAkB;AAC3B;AAGA,SAAS,iBAAiB,MAAmB,MAAyB;AACpE,QAAM,SAAS,SAAS,iBAAiB,MAAM,WAAW,WAAW,IAAI;AAEzE,MAAI,UAAU,OAAO,UAAU;AAC/B,MAAI,QAAQ;AACZ,SAAO,SAAS;AACd,QAAI,OAAO;AAIT,UAAI,0BAA0B,OAAO,GAAG;AACtC,eAAO;AAAA,MACT;AAAA,IACF;AAEA,QAAI,YAAY,MAAM;AACpB,cAAQ;AAAA,IACV;AAEA,cAAU,OAAO,aAAa;AAAA,EAChC;AAEA,SAAO;AACT;AAGA,SAAS,aAAa,MAAmB,MAAyB;AAChE,QAAM,SAAS,SAAS,iBAAiB,MAAM,WAAW,WAAW,IAAI;AAEzE,MAAI,UAAU,OAAO,SAAS;AAC9B,MAAI,QAAQ;AAEZ,SAAO,SAAS;AACd,QAAI,OAAO;AAIT,UAAI,0BAA0B,OAAO,GAAG;AACtC,eAAO;AAAA,MACT;AAAA,IACF;AACA,QAAI,YAAY,MAAM;AACpB,cAAQ;AAAA,IACV;AACA,cAAU,OAAO,SAAS;AAAA,EAC5B;AAEA,SAAO;AACT;AAGA,SAAS,0BACP,MACA,MACA,QACuC;AACvC,MACE,KAAK,aAAa,KAAK,aACvB,KAAK,aACL,SAAS,KAAK,UAAU,QACxB;AACA,WAAO,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,EACpC;AAKA,MAAI,KAAK,aAAa,KAAK,WAAW;AACpC,UAAM,gBAAgB,KAAK,WAAW,MAAM;AAC5C,QAAI,eAAe;AACjB,YAAM,SAAS,SAAS;AAAA,QACtB;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF;AACA,YAAM,YACJ,OAAO,WAAW,MACjB,cAAc,aAAa,KAAK,YAAY,gBAAgB;AAC/D,UAAI,aAAa,0BAA0B,SAAS,GAAG;AACrD,eAAO,EAAE,MAAM,WAAW,QAAQ,EAAE;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,aAAa,MAAM,IAAI;AAEpC,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,MAAM,MAAM,QAAQ,EAAE;AACjC;AAGA,SAAS,8BACP,MACA,MACA,QACuC;AACvC,MAAI,KAAK,aAAa,KAAK,aAAa,SAAS,GAAG;AAClD,WAAO,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,EACpC;AAEA,QAAM,OAAO,iBAAiB,MAAM,IAAI;AACxC,MAAI,CAAC,QAAQ,KAAK,cAAc,MAAM;AACpC,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,MAAM,MAAM,QAAQ,KAAK,UAAU,SAAS,EAAE;AACzD;AAGA,SAAS,2BACP,MACuC;AACvC,QAAM,SAAS,SAAS,iBAAiB,MAAM,WAAW,WAAW,IAAI;AACzE,QAAM,aAAa,OAAO,WAAW;AACrC,MAAI,eAAe,MAAM;AACvB,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAGA,SAAS,0BACP,MACuC;AACvC,QAAM,SAAS,SAAS,iBAAiB,MAAM,WAAW,WAAW,IAAI;AACzE,QAAM,YAAY,OAAO,UAAU;AACnC,MAAI,cAAc,MAAM;AACtB,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,UAAU,WAAW,UAAU;AAAA,EACzC;AACF;AAWO,SAAS,sBACd,aACA,mBACA,WACA,iBACM;AACN,QAAM,mBACJ,YAAY,iBAA8B,mBAAmB;AAC/D,aAAW,YAAY,kBAAkB;AACvC,UAAM,gBAAgB,SAAS,aAAa,iBAAiB,KAAK;AAClE,aAAS,gBAAgB,iBAAiB;AAC1C,aAAS,QAAQ,qBAAqB;AAMtC,QAAI,SAAS,aAAa,UAAU,GAAG;AACrC,eAAS,QAAQ,cAAc,SAAS,aAAa,UAAU,KAAK;AACpE,eAAS,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAEA,QAAM,SAAS,IAAI,gBAAgB;AAEnC,oBAAkB;AAAA,IAChB;AAAA,IACA,CAAC,UAAiB;AAChB,UACE,iBAAiB,kBAChB,MAAM,QAAQ,aAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,QAClE;AACA;AAAA,MACF;AAEA,YAAM,sBAAsB,YAAY;AAAA,QACtC;AAAA,MACF;AACA,YAAM,YAAY,OAAO,aAAa;AACtC,YAAM,EAAE,YAAY,cAAc,WAAW,YAAY,IACvD,aAAa,CAAC;AAKhB,YAAM,2BACJ,cAAc,QACd,UAAU,SAAS,EAAE,SAAS,MAC7B,eAAe,aACb,eAAe,QACd,eAAe,aACf,iBAAiB,eACjB,YAAY,aAAa,KAAK;AAEpC,UAAI,0BAA0B;AAC5B,oBAAY,aAAa,4BAA4B,EAAE;AAAA,MACzD;AAEA,iBAAW,YAAY,qBAAqB;AAC1C,cAAM,gBAAgB,SAAS,aAAa,yBAAyB;AACrE,YAAI,kBAAkB,MAAM;AAC1B,mBAAS,aAAa,mBAAmB,aAAa;AAAA,QACxD;AACA,iBAAS,gBAAgB,yBAAyB;AAElD,cAAM,cAAc,SAAS,aAAa,kBAAkB;AAC5D,YAAI,gBAAgB,MAAM;AACxB,mBAAS,aAAa,YAAY,WAAW;AAC7C,mBAAS,gBAAgB,kBAAkB;AAAA,QAC7C;AAAA,MACF;AAIA,UACE,eAAe,QACf,eAAe,UACf,iBAAiB,UACjB,cAAc,QACd,cAAc,UACd,gBAAgB,QAChB;AACA,eACG,aAAa,GACZ,iBAAiB,YAAY,cAAc,WAAW,WAAW;AAAA,MACvE;AAEA,wBAAkB,OAAO,wBAAwB;AAEjD,kBAAY,gBAAgB,0BAA0B;AAEtD,aAAO,MAAM;AAAA,IACf;AAAA,IACA,EAAE,QAAQ,OAAO,OAAO;AAAA,EAC1B;AACF;AAQO,SAAS,gBACd,KACM;AACN,QAAM,YAAY,OAAO,aAAa;AACtC,MACE,cAAc,QACd,UAAU,cAAc,QACxB,UAAU,aAAa,GACvB;AACA;AAAA,EACF;AAEA,QAAM,YAAY,UAAU;AAC5B,QAAM,cAAc,UAAU;AAE9B,MAAI,UAAiD;AAErD,QAAM,OACJ,UAAU,eAAe,QAAwB,oBAAoB;AACvE,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC;AAAA,EACF;AAEA,MAAI,QAAQ,aAAa;AACvB,cAAU,8BAA8B,MAAM,WAAW,WAAW;AAAA,EACtE,WAAW,QAAQ,cAAc;AAC/B,cAAU,0BAA0B,MAAM,WAAW,WAAW;AAAA,EAClE,WAAW,QAAQ,QAAQ;AACzB,cAAU,2BAA2B,IAAI;AAAA,EAC3C,WAAW,QAAQ,OAAO;AACxB,cAAU,0BAA0B,IAAI;AAAA,EAC1C;AACA,MAAI,SAAS;AACX,cAAU,OAAO,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC/C;AACF;AAMO,SAAS,uBAA6B;AAC3C,QAAM,YAAY,OAAO,aAAa;AACtC,MACE,cAAc,QACd,UAAU,cAAc,QACxB,UAAU,aAAa,GACvB;AACA;AAAA,EACF;AAEA,QAAM,YAAY,UAAU;AAE5B,QAAM,OACJ,UAAU,eAAe,QAAwB,oBAAoB;AACvE,MAAI,SAAS,QAAQ,SAAS,QAAW;AACvC;AAAA,EACF;AACA,QAAM,gBAAgB,2BAA2B,IAAI;AACrD,QAAM,eAAe,0BAA0B,IAAI;AACnD,MAAI,iBAAiB,cAAc;AACjC,cAAU;AAAA,MACR,cAAc;AAAA,MACd,cAAc;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as styles from './DateTimeInput.sty.js';\n\n/** @internal */\nexport function checkIfValueTypeAlignment(textNode: Node): boolean {\n  // There are a lot of hidden text nodes for the mix of spin button and expression\n  // in the DateTimeInput.\n  // In order to skip the hidden ones correctly, we need to check for parent value types.\n  const closestDateTimeInput = textNode.parentElement?.closest(\n    `.${styles.dateTimeInput}`,\n  );\n  const currentValueType = closestDateTimeInput?.getAttribute('data-valuetype');\n  const closestValueTypeElement =\n    textNode.parentElement?.closest('[data-valuetype]');\n\n  // If the query resolves to the same dateTime input element, it means that there is no other defining parent.\n  // In this case it may be a placeholder / separator text or any other node.\n  if (closestDateTimeInput === closestValueTypeElement) {\n    return true;\n  }\n\n  const nodeValueType = closestValueTypeElement?.getAttribute('data-valuetype');\n\n  return nodeValueType === currentValueType;\n}\n\n/** Helper to walk backwards through text nodes. */\nfunction previousTextNode(root: HTMLElement, node: Node): Node | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n\n  let current = walker.lastChild();\n  let found = false;\n  while (current) {\n    if (found) {\n      // There are a lot of hidden text nodes for the mix of spin button and expression\n      // in the DateTimeInput.\n      // In order to skip the hidden ones correctly, we need to check for parent value types.\n      if (checkIfValueTypeAlignment(current)) {\n        return current;\n      }\n    }\n\n    if (current === node) {\n      found = true;\n    }\n\n    current = walker.previousNode();\n  }\n\n  return null;\n}\n\n/** Helper to walk forwards through text nodes. */\nfunction nextTextNode(root: HTMLElement, node: Node): Node | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n\n  let current = walker.nextNode();\n  let found = false;\n\n  while (current) {\n    if (found) {\n      // There are a lot of hidden text nodes for the mix of spin button and expression\n      // in the DateTimeInput.\n      // In order to skip the hidden ones correctly, we need to check for parent value types.\n      if (checkIfValueTypeAlignment(current)) {\n        return current;\n      }\n    }\n    if (current === node) {\n      found = true;\n    }\n    current = walker.nextNode();\n  }\n\n  return null;\n}\n\n/** Helper that finds the next character position to adjust the global selection. */\nfunction findNextCharacterPosition(\n  root: HTMLElement,\n  node: Node,\n  offset: number,\n): { node: Node; offset: number } | null {\n  if (\n    node.nodeType === Node.TEXT_NODE &&\n    node.nodeValue &&\n    offset < node.nodeValue.length &&\n    checkIfValueTypeAlignment(node)\n  ) {\n    return { node, offset: offset + 1 };\n  }\n\n  // When the selection lands on an element node (not a text node), the offset\n  // represents a child index. Walk into that child subtree to find the first\n  // text node from that position forward.\n  if (node.nodeType !== Node.TEXT_NODE) {\n    const childAtOffset = node.childNodes[offset];\n    if (childAtOffset) {\n      const walker = document.createTreeWalker(\n        childAtOffset,\n        NodeFilter.SHOW_TEXT,\n        null,\n      );\n      const firstText =\n        walker.firstChild() ??\n        (childAtOffset.nodeType === Node.TEXT_NODE ? childAtOffset : null);\n      if (firstText && checkIfValueTypeAlignment(firstText)) {\n        return { node: firstText, offset: 1 };\n      }\n    }\n  }\n\n  // Skip separator text nodes (those not inside any spinbutton). Separators\n  // are implicitly included in the visual selection via setBaseAndExtent's\n  // spinbutton-boundary expansion, so stepping through them one character at\n  // a time would require extra keypresses without any visible change.\n  let next: Node | null = nextTextNode(root, node);\n  while (next !== null && getClosestContentEditable(next) === null) {\n    next = nextTextNode(root, next);\n  }\n\n  if (!next) {\n    return null;\n  }\n\n  return { node: next, offset: 1 };\n}\n\n/** Helper that finds the previous character position to adjust the global selection. */\nfunction findPreviousCharacterPosition(\n  root: HTMLElement,\n  node: Node,\n  offset: number,\n): { node: Node; offset: number } | null {\n  if (\n    node.nodeType === Node.TEXT_NODE &&\n    offset > 0 &&\n    checkIfValueTypeAlignment(node)\n  ) {\n    return { node, offset: offset - 1 };\n  }\n\n  // Skip separator text nodes going backwards for the same reason as in\n  // findNextCharacterPosition.\n  let prev: Node | null = previousTextNode(root, node);\n  while (prev !== null && getClosestContentEditable(prev) === null) {\n    prev = previousTextNode(root, prev);\n  }\n  if (!prev || prev.nodeValue === null) {\n    return null;\n  }\n\n  return { node: prev, offset: prev.nodeValue.length - 1 };\n}\n\n/** Helper to find the first textNode to apply selection */\nfunction findFirstCharacterPosition(\n  root: HTMLElement,\n): { node: Node; offset: number } | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n  let current = walker.firstChild();\n  while (current !== null) {\n    // Skip hidden text nodes (e.g. relative date expression values when in absolute mode).\n    if (checkIfValueTypeAlignment(current)) {\n      return { node: current, offset: 0 };\n    }\n    current = walker.nextNode();\n  }\n  return null;\n}\n\n/** Helper to find the last textNode to apply selection */\nfunction findLastCharacterPosition(\n  root: HTMLElement,\n): { node: Node; offset: number } | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n  let current = walker.lastChild();\n  while (current !== null) {\n    // Skip hidden text nodes (e.g. relative date expression values when in absolute mode).\n    if (checkIfValueTypeAlignment(current)) {\n      return { node: current, offset: current.nodeValue?.length ?? 0 };\n    }\n    current = walker.previousNode();\n  }\n  return null;\n}\n\n/**\n * Helper function that removes the contenteditable attributes for selection manipulation\n * @param rootElement - Must contain all contenteditable children.\n * @param removeEventTarget - Where to bind the inverese event listener to\n * @param eventType - Inverse event type, when should the contenteditable attribute be added back\n * @param customRemovalFn - Called when the inverse event fires in order to execute custom logic.\n *\n * @internal\n */\nexport function removeContentEditable(\n  rootElement: HTMLElement,\n  removeEventTarget: Document | HTMLElement,\n  eventType: 'mouseup' | 'keyup',\n  customRemovalFn?: (event: Event, hasMultiElementSelection: boolean) => void,\n): void {\n  const contentEditables =\n    rootElement.querySelectorAll<HTMLElement>('[contenteditable]');\n  for (const editable of contentEditables) {\n    const previousValue = editable.getAttribute('contenteditable') ?? undefined;\n    editable.removeAttribute('contenteditable');\n    editable.dataset.wascontenteditable = previousValue;\n\n    // Also temporarily remove tabIndex so the element isn't focusable during\n    // the drag. Without this, the browser auto-focuses the first spin button\n    // on mousedown when the component didn't have focus before, which disrupts\n    // drag-select across multiple elements.\n    if (editable.hasAttribute('tabindex')) {\n      editable.dataset.wastabindex = editable.getAttribute('tabindex') ?? '';\n      editable.removeAttribute('tabindex');\n    }\n  }\n\n  const signal = new AbortController();\n\n  removeEventTarget.addEventListener(\n    eventType,\n    (event: Event) => {\n      if (\n        event instanceof KeyboardEvent &&\n        (event.key === 'Control' || event.key === 'Meta' || event.key === 'Alt')\n      ) {\n        return;\n      }\n\n      const wasContentEditables = rootElement.querySelectorAll<HTMLElement>(\n        '[data-wascontenteditable]',\n      );\n\n      // Snapshot the selection BEFORE restoring contentEditable. Firefox\n      // discards the cross-element drag selection when contentEditable is added\n      // back, so we must capture it here while it is still intact.\n      const selectionBeforeRestore = window.getSelection();\n      const snapshotAnchorNode = selectionBeforeRestore?.anchorNode ?? null;\n      const snapshotAnchorOffset = selectionBeforeRestore?.anchorOffset ?? 0;\n      const snapshotFocusNode = selectionBeforeRestore?.focusNode ?? null;\n      const snapshotFocusOffset = selectionBeforeRestore?.focusOffset ?? 0;\n\n      const hasMultiElementSelection =\n        selectionBeforeRestore !== null &&\n        selectionBeforeRestore.toString().length > 0 &&\n        (snapshotAnchorNode !== snapshotFocusNode ||\n          (snapshotAnchorNode !== null &&\n            snapshotAnchorNode === snapshotFocusNode &&\n            snapshotAnchorOffset !== snapshotFocusOffset &&\n            snapshotAnchorNode?.nodeType === Node.ELEMENT_NODE));\n\n      for (const editable of wasContentEditables) {\n        const previousValue = editable.getAttribute('data-wascontenteditable');\n        if (previousValue !== null) {\n          editable.setAttribute('contenteditable', previousValue);\n        }\n        editable.removeAttribute('data-wascontenteditable');\n\n        const wasTabIndex = editable.getAttribute('data-wastabindex');\n        if (wasTabIndex !== null) {\n          editable.setAttribute('tabindex', wasTabIndex);\n          editable.removeAttribute('data-wastabindex');\n        }\n      }\n\n      // Firefox discards the drag selection when contentEditable is added back, so we\n      // re-apply it using the snapshot taken before the restoration loop. We do NOT call\n      // focus() here \u2014 no spin button should be focused after a drag-select, so all\n      // fields render with consistent selection height in Firefox.\n      // ArrowUp/Down after a drag is handled by the container's onKeyDown which forwards\n      // to the anchor spin button on demand.\n      if (hasMultiElementSelection && snapshotAnchorNode && snapshotFocusNode) {\n        const anchorSpinButton = resolveSpinButton(\n          snapshotAnchorNode,\n          rootElement,\n        );\n        const focusSpinButton = resolveSpinButton(\n          snapshotFocusNode,\n          rootElement,\n        );\n\n        if (anchorSpinButton && focusSpinButton) {\n          // Extend the selection to full spin-button boundaries.\n          const anchorToFocusPosition =\n            anchorSpinButton.compareDocumentPosition(focusSpinButton);\n          // Using bitwise and to check the position of anchor vs focus spin button.\n          // See example in getNearestPrecedingSpinButton.\n          const focusIsAfterAnchor = !!(\n            anchorToFocusPosition & Node.DOCUMENT_POSITION_FOLLOWING\n          );\n\n          const firstSpinButton = focusIsAfterAnchor\n            ? anchorSpinButton\n            : focusSpinButton;\n          const lastSpinButton = focusIsAfterAnchor\n            ? focusSpinButton\n            : anchorSpinButton;\n\n          const firstPos = findFirstCharacterPosition(firstSpinButton);\n          const lastPos = findLastCharacterPosition(lastSpinButton);\n\n          if (firstPos && lastPos) {\n            window\n              .getSelection()\n              ?.setBaseAndExtent(\n                firstPos.node,\n                firstPos.offset,\n                lastPos.node,\n                lastPos.offset,\n              );\n          }\n        }\n      } else {\n        // Single-element selection: restore the exact position. setBaseAndExtent is safe\n        // here because anchor and focus are within the same contenteditable element.\n        if (snapshotAnchorNode && snapshotFocusNode) {\n          window\n            .getSelection()\n            ?.setBaseAndExtent(\n              snapshotAnchorNode,\n              snapshotAnchorOffset,\n              snapshotFocusNode,\n              snapshotFocusOffset,\n            );\n        }\n      }\n\n      customRemovalFn?.(event, hasMultiElementSelection);\n\n      signal.abort();\n    },\n    { signal: signal.signal },\n  );\n}\n\n/**\n * Helper function that allows to move the selection further on a character basis or\n * to the start / end of the TFS.\n * @param key - Provides the key which allows to extend the selection in the correct direction.\n * @internal\n */\nexport function extendSelection(\n  key: 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End',\n): void {\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.anchorNode === null ||\n    selection.focusNode === null ||\n    selection.rangeCount < 1\n  ) {\n    return;\n  }\n\n  const anchorNode = selection.anchorNode;\n  const anchorOffset = selection.anchorOffset;\n  const focusNode = selection.focusNode;\n  const focusOffset = selection.focusOffset;\n\n  let nextPos: { node: Node; offset: number } | null = null;\n\n  const root =\n    focusNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n  if (root === null || root === undefined) {\n    return;\n  }\n\n  if (key === 'ArrowLeft') {\n    nextPos = findPreviousCharacterPosition(root, focusNode, focusOffset);\n  } else if (key === 'ArrowRight') {\n    nextPos = findNextCharacterPosition(root, focusNode, focusOffset);\n  } else if (key === 'Home') {\n    nextPos = findFirstCharacterPosition(root);\n  } else if (key === 'End') {\n    nextPos = findLastCharacterPosition(root);\n  }\n  if (nextPos) {\n    // Use setBaseAndExtent instead of selection.extend() so the new focus\n    // endpoint can cross contenteditable boundaries in Chrome without needing\n    // to temporarily strip the contenteditable attribute.\n    // Guard with data-restoring-selection so that Chrome's implicit auto-focus\n    // of the anchor spinbutton during setBaseAndExtent does not trigger\n    // selectAll() via onFocus.\n    root.setAttribute('data-restoring-selection', '');\n    selection.setBaseAndExtent(\n      anchorNode,\n      anchorOffset,\n      nextPos.node,\n      nextPos.offset,\n    );\n    root.removeAttribute('data-restoring-selection');\n  }\n}\n\n/**\n * Helper function that allows to expand the selection to the entire range.\n * @internal\n */\nexport function extendSelectionToAll(): void {\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.focusNode === null ||\n    selection.rangeCount < 1\n  ) {\n    return;\n  }\n\n  const focusNode = selection.focusNode;\n\n  const root =\n    focusNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n  if (root === null || root === undefined) {\n    return;\n  }\n\n  // Focus the container (not a spin button) so that no spin button receives the :focus background style for consistent\n  // selection height across all fields. In Chrome, setBaseAndExtent implicitly moves focus to the anchor spin button; the\n  // data-restoring-selection guard ensures onFocus skips selectAll() to avoid collapsing the selection to only the first\n  // spin button.\n  // ArrowUp/Down in Firefox is handled by the container's onKeyDown intercept,\n  // same as after a drag-select.\n  root.setAttribute('data-restoring-selection', '');\n  root.focus();\n\n  const firstPosition = findFirstCharacterPosition(root);\n  const lastPosition = findLastCharacterPosition(root);\n\n  if (!firstPosition || !lastPosition) {\n    root.removeAttribute('data-restoring-selection');\n    return;\n  }\n\n  selection.setBaseAndExtent(\n    firstPosition.node,\n    firstPosition.offset,\n    lastPosition.node,\n    lastPosition.offset,\n  );\n  root.removeAttribute('data-restoring-selection');\n}\n\n// Matches spinbuttons both in their normal state ([contenteditable]) and while\n// contenteditable is temporarily stripped during drag/key operations\n// ([data-wascontenteditable]).\nconst SPIN_BUTTON_SELECTOR = '[contenteditable], [data-wascontenteditable]';\n\nfunction getClosestContentEditable(node: Node): HTMLElement | null {\n  return node.nodeType === Node.TEXT_NODE\n    ? (node as Text).parentElement?.closest<HTMLElement>(\n        SPIN_BUTTON_SELECTOR,\n      ) ?? null\n    : (node as Element).closest?.(SPIN_BUTTON_SELECTOR) ?? null;\n}\n\n/**\n * Resolve a selection endpoint node to its containing spinbutton or, when the\n * endpoint lies on a separator between spinbuttons, to the nearest spinbutton.\n * Uses `[data-wascontenteditable]` to identify spinbuttons while contenteditable\n * is temporarily stripped during the drag, and falls back to the restored\n * `[contenteditable]` attribute afterwards.\n */\nexport function resolveSpinButton(\n  node: Node,\n  root: HTMLElement,\n): HTMLElement | null {\n  // Happy path: the node is inside a spinbutton.\n  const direct = getClosestContentEditable(node);\n  if (direct !== null) {\n    return direct;\n  }\n\n  // Separator node: find the nearest preceding spinbutton in document order.\n  return getNearestPrecedingSpinButton(node, root);\n}\n\n/**\n * When a drag ends on a separator (e.g. \"/\" or \".\"), the selection endpoint is\n * outside any spinbutton. Walk the contenteditable spinbuttons in document order\n * and return the one that immediately precedes the given node in document order.\n * Falls back to the first spinbutton when the node comes before all of them.\n */\nfunction getNearestPrecedingSpinButton(\n  node: Node,\n  root: HTMLElement,\n): HTMLElement | null {\n  const spinButtons = Array.from(\n    root.querySelectorAll<HTMLElement>(SPIN_BUTTON_SELECTOR),\n  );\n  if (spinButtons.length === 0) {\n    return null;\n  }\n\n  let nearest: HTMLElement | null = null;\n  for (const spinButton of spinButtons) {\n    /*\n     * compareDocumentPosition returns a bitmask that may vary depending on the browser and where the node lies\n     * in the document; the bitwise & extracts the FOLLOWING bit regardless of other bits that may also be set.\n     * e.g.:\n         0b000100  FOLLOWING\n       | 0b010000  CONTAINED_BY\n       ----------\n         0b010100  FOLLOWING | CONTAINED_BY (returned by  compareDocumentPosition when node is a child of the spinButton)\n\n      - node strictly after spinButton:\n          0b000100  FOLLOWING\n        & 0b000100\n        ----------\n          0b000100  \u2713\n\n      - node is a child of spinButton:\n          0b010100  CONTAINED_BY | FOLLOWING\n        & 0b000100\n        ----------\n          0b000100  \u2713\n\n      - node strictly before spinButton:\n          0b000010  PRECEDING\n        & 0b000100\n        ----------\n          0b000000  \u2717\n     */\n    const position = spinButton.compareDocumentPosition(node);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n      nearest = spinButton;\n    }\n  }\n\n  // If node precedes all spinbuttons, return the first one\n  return nearest ?? spinButtons[0] ?? null;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-range-picker/useSelectionInteractionHandlers.js

@@ -1,6 +1,5 @@
 import {
-  useCallback,
-  useRef
+  useCallback
 } from "react";
 import {
   extendSelection,
@@ -35,59 +34,62 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput) {
     },
     [onFocusInput]
   );
-  const hasContentEditableKeyRemoved = useRef(false);
   const onKeyDown = useCallback(
     (event) => {
-      const userAgent = navigator.userAgent.toLowerCase();
-      const isMac = userAgent.includes("mac");
-      const hasModifierKey = isMac ? event.metaKey === true : event.ctrlKey === true;
-      if (event.key === "Shift" || event.key === "Control" || event.key === "Command") {
+      const hasModifierKey = event.metaKey === true || event.ctrlKey === true;
+      if (event.key === "Shift" || event.key === "Control" || event.key === "Meta" || event.key === "Alt" || event.key === "Command") {
         event.preventDefault();
         return;
       }
-      function removeContentEditableIfNeeded() {
-        if (hasContentEditableKeyRemoved.current === false) {
-          hasContentEditableKeyRemoved.current = true;
-          removeContentEditable(
-            event.currentTarget,
-            event.currentTarget,
-            "keyup",
-            () => hasContentEditableKeyRemoved.current = false
-          );
-        }
-      }
-      if (hasModifierKey && event.key === "c") {
-        removeContentEditable(
-          event.currentTarget,
-          event.currentTarget,
-          "keyup"
-        );
-        return;
-      }
       if (hasModifierKey && event.key === "a") {
         event.preventDefault();
         if (event.currentTarget instanceof HTMLElement) {
-          removeContentEditableIfNeeded();
           extendSelectionToAll();
         }
         return;
       }
       if (event.shiftKey === true && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End")) {
         event.preventDefault();
-        if (event.currentTarget instanceof HTMLElement) {
-          removeContentEditableIfNeeded();
-          extendSelection(event.key);
-        }
+        extendSelection(event.key);
         return;
       }
-      if (event.target === touchedContainerRef.current) {
-        onFocusInput();
+      if (!event.shiftKey && !hasModifierKey && (event.key === "ArrowUp" || event.key === "ArrowDown") && event.target === touchedContainerRef.current) {
+        const anchorSpinButton = getAnchorSpinButton();
+        if (anchorSpinButton !== null) {
+          event.preventDefault();
+          anchorSpinButton.focus();
+          anchorSpinButton.dispatchEvent(
+            new KeyboardEvent("keydown", {
+              key: event.key,
+              bubbles: true,
+              cancelable: true
+            })
+          );
+          return;
+        }
+      }
+      if (event.target === touchedContainerRef.current && !hasModifierKey) {
+        const anchorSpinButton = getAnchorSpinButton();
+        if (anchorSpinButton !== null) {
+          anchorSpinButton.focus();
+        } else {
+          onFocusInput();
+        }
       }
     },
     [onFocusInput, touchedContainerRef]
   );
   return { onMouseDown, onKeyDown };
 }
+function getAnchorSpinButton() {
+  const anchorNode = window.getSelection()?.anchorNode ?? null;
+  if (anchorNode === null) {
+    return null;
+  }
+  return anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentElement?.closest(
+    "[contenteditable]"
+  ) ?? null : anchorNode?.closest?.("[contenteditable]") ?? null;
+}
 export {
   useSelectionInteractionHandlers
 };