@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -1,5 +1,8 @@
 import * as styles from "./DateTimeInput.sty.js";
 import { getStratoLogger } from "../../core/sdk/sdk-logger.js";
+function warnSelectionFailed(message, error) {
+  getStratoLogger("DateTimeRangePicker").warn(message, error);
+}
 function checkIfValueTypeAlignment(textNode) {
   const closestDateTimeInput = textNode.parentElement?.closest(
     `.${styles.dateTimeInput}`
@@ -109,7 +112,7 @@ function findPreviousCharacterPosition(root, node, offset) {
         null
       );
       const lastText = walker.lastChild() ?? (childAtOffset.nodeType === Node.TEXT_NODE ? childAtOffset : null);
-      if (lastText && lastText.nodeValue && (checkIfValueTypeAlignment(lastText) || getClosestContentEditable(lastText) !== null)) {
+      if (lastText?.nodeValue && (checkIfValueTypeAlignment(lastText) || getClosestContentEditable(lastText) !== null)) {
         return { node: lastText, offset: lastText.nodeValue.length - 1 };
       }
     }
@@ -121,7 +124,7 @@ function findPreviousCharacterPosition(root, node, offset) {
       prev = previousEditableNode;
     }
   }
-  if (!prev || prev.nodeValue === null) {
+  if (!prev || prev?.nodeValue === null) {
     return null;
   }
   return { node: prev, offset: prev.nodeValue.length - 1 };
@@ -178,7 +181,132 @@ function selectionOverlapsSpinButton(selectionStartNode, selectionStartOffset, s
     spinButtonStart.offset
   ) > 0;
 }
-function removeContentEditable(rootElement, removeEventTarget, eventType, customRemovalFn) {
+function restoreContentEditableAttributes(root) {
+  for (const editable of root.querySelectorAll(
+    "[data-wascontenteditable]"
+  )) {
+    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");
+    }
+  }
+  for (const el of root.querySelectorAll("[data-drag-selected]")) {
+    el.removeAttribute("data-drag-selected");
+  }
+}
+function markDragSelectedElements(rootElement, range, { includeTextboxes = false } = {}) {
+  for (const el of rootElement.querySelectorAll(
+    "[data-drag-selected]"
+  )) {
+    el.removeAttribute("data-drag-selected");
+  }
+  for (const group of rootElement.querySelectorAll(
+    '[data-valuetype="iso8601"]'
+  )) {
+    for (const child of group.children) {
+      if (range.intersectsNode(child)) {
+        child.setAttribute("data-drag-selected", "");
+      }
+    }
+  }
+  if (includeTextboxes) {
+    for (const textbox of rootElement.querySelectorAll('[role="textbox"]')) {
+      if (range.intersectsNode(textbox)) {
+        textbox.setAttribute("data-drag-selected", "");
+      }
+    }
+  }
+}
+const pendingRestoreSignals = /* @__PURE__ */ new WeakMap();
+const lastPreRestoreEndpoints = /* @__PURE__ */ new WeakMap();
+function consumePreRestoreEndpoints(root) {
+  const stash = lastPreRestoreEndpoints.get(root);
+  lastPreRestoreEndpoints.delete(root);
+  return stash;
+}
+function deferContentEditableRestore(root) {
+  pendingRestoreSignals.get(root)?.abort();
+  const restoreSignal = new AbortController();
+  pendingRestoreSignals.set(root, restoreSignal);
+  function handler(e) {
+    if (e instanceof KeyboardEvent) {
+      if (["Meta", "Control", "Alt", "Shift"].includes(e.key)) {
+        return;
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+        return;
+      }
+      if (e.shiftKey && [
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End"
+      ].includes(e.key)) {
+        return;
+      }
+      if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        const collapsed = collapseMultiElementSelection(
+          root,
+          e.key === "ArrowLeft" ? "left" : "right"
+        );
+        if (collapsed) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+      }
+    }
+    const selection = globalThis.getSelection();
+    const anchorNode = selection?.anchorNode ?? null;
+    const anchorOffset = selection?.anchorOffset ?? 0;
+    const focusNode = selection?.focusNode ?? null;
+    const focusOffset = selection?.focusOffset ?? 0;
+    const hasMultiElementSelection = selection !== null && anchorNode !== null && focusNode !== null && anchorNode !== focusNode && selection.toString().length > 0;
+    if (hasMultiElementSelection && anchorNode && focusNode) {
+      lastPreRestoreEndpoints.set(root, {
+        anchorNode,
+        anchorOffset,
+        focusNode,
+        focusOffset
+      });
+    }
+    restoreContentEditableAttributes(root);
+    pendingRestoreSignals.delete(root);
+    restoreSignal.abort();
+    if (hasMultiElementSelection && anchorNode && focusNode) {
+      try {
+        selection?.setBaseAndExtent(
+          anchorNode,
+          anchorOffset,
+          focusNode,
+          focusOffset
+        );
+      } catch (error) {
+        warnSelectionFailed(
+          "setBaseAndExtent failed when restoring selection after CE re-attach",
+          error
+        );
+      }
+    }
+  }
+  document.addEventListener("mousedown", handler, {
+    signal: restoreSignal.signal,
+    capture: true
+  });
+  document.addEventListener("keydown", handler, {
+    signal: restoreSignal.signal,
+    capture: true
+  });
+}
+function removeContentEditable(rootElement, removeEventTarget, eventType, customRemovalFn, initialAnchorSpinButton) {
   rootElement.setAttribute("data-restoring-selection", "");
   const contentEditables = rootElement.querySelectorAll("[contenteditable]");
   for (const editable of contentEditables) {
@@ -191,92 +319,222 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
     }
   }
   const signal = new AbortController();
+  if (initialAnchorSpinButton) {
+    const anchorPos = findLastCharacterPosition(initialAnchorSpinButton);
+    if (anchorPos) {
+      rootElement.addEventListener(
+        "mousemove",
+        () => {
+          const sel = globalThis.getSelection();
+          if (!sel || !sel.anchorNode) {
+            return;
+          }
+          if (sel.anchorNode.nodeType === Node.TEXT_NODE) {
+            return;
+          }
+          const focusNode = sel.focusNode;
+          const focusOffset = sel.focusOffset ?? 0;
+          if (!focusNode) {
+            return;
+          }
+          const anchorBeforeFocus = compareSelectionPoints(
+            anchorPos.node,
+            anchorPos.offset,
+            focusNode,
+            focusOffset
+          ) <= 0;
+          try {
+            sel.removeAllRanges();
+            if (anchorBeforeFocus) {
+              sel.setBaseAndExtent(
+                anchorPos.node,
+                anchorPos.offset,
+                focusNode,
+                focusOffset
+              );
+            } else {
+              sel.setBaseAndExtent(
+                focusNode,
+                focusOffset,
+                anchorPos.node,
+                anchorPos.offset
+              );
+            }
+          } catch (error) {
+            warnSelectionFailed(
+              "selection anchor correction during drag failed",
+              error
+            );
+          }
+        },
+        { signal: signal.signal, capture: true }
+      );
+    }
+  }
+  rootElement.addEventListener(
+    "mousemove",
+    () => {
+      const sel = globalThis.getSelection();
+      if (!sel || sel.rangeCount === 0) {
+        return;
+      }
+      const range = sel.getRangeAt(0);
+      markDragSelectedElements(rootElement, range);
+    },
+    { signal: signal.signal, capture: true }
+  );
   removeEventTarget.addEventListener(
     eventType,
     (event) => {
-      const wasContentEditables = rootElement.querySelectorAll(
-        "[data-wascontenteditable]"
-      );
-      const selectionBeforeRestore = window.getSelection();
+      const selectionBeforeRestore = globalThis.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) {
-          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");
-        }
-      }
+      const hasMultiElementSelection = selectionBeforeRestore !== null && selectionBeforeRestore.toString().length > 0 && (snapshotAnchorNode !== snapshotFocusNode || snapshotAnchorNode !== null && snapshotAnchorNode === snapshotFocusNode && snapshotAnchorOffset !== snapshotFocusOffset && snapshotAnchorNode.nodeType === Node.ELEMENT_NODE);
       if (hasMultiElementSelection && snapshotAnchorNode && snapshotFocusNode) {
-        const anchorNodeWasInContent = isEndpointInsideSpinButtonContent(
+        const anchorIsElementNode = snapshotAnchorNode.nodeType !== Node.TEXT_NODE;
+        const anchorNodeWasInContent = anchorIsElementNode ? initialAnchorSpinButton !== null : isEndpointInsideSpinButtonContent(
           snapshotAnchorNode,
           snapshotAnchorOffset
         );
+        let anchorSpinButton;
+        if (anchorIsElementNode) {
+          anchorSpinButton = initialAnchorSpinButton ?? null;
+        } else if (anchorNodeWasInContent) {
+          anchorSpinButton = resolveSpinButton(
+            snapshotAnchorNode,
+            rootElement,
+            snapshotAnchorOffset
+          );
+        } else {
+          anchorSpinButton = null;
+        }
+        let anchorNodeForComparison = snapshotAnchorNode;
+        let anchorOffsetForComparison = snapshotAnchorOffset;
+        if (anchorIsElementNode && anchorSpinButton) {
+          const lastPos = findLastCharacterPosition(anchorSpinButton);
+          if (lastPos) {
+            anchorNodeForComparison = lastPos.node;
+            anchorOffsetForComparison = lastPos.offset;
+          }
+        }
         const focusNodeWasInContent = isEndpointInsideSpinButtonContent(
           snapshotFocusNode,
           snapshotFocusOffset
         );
-        const anchorSpinButton = anchorNodeWasInContent ? resolveSpinButton(snapshotAnchorNode, rootElement) : null;
-        const focusSpinButton = focusNodeWasInContent ? resolveSpinButton(snapshotFocusNode, rootElement) : null;
+        const focusSpinButton = focusNodeWasInContent || snapshotFocusNode.nodeType !== Node.TEXT_NODE ? resolveSpinButton(
+          snapshotFocusNode,
+          rootElement,
+          snapshotFocusOffset
+        ) : null;
         const anchorBeforeFocus = compareSelectionPoints(
-          snapshotAnchorNode,
-          snapshotAnchorOffset,
+          anchorNodeForComparison,
+          anchorOffsetForComparison,
           snapshotFocusNode,
           snapshotFocusOffset
         ) <= 0;
-        const anchorPos = anchorSpinButton && anchorSpinButton.getAttribute("role") === "spinbutton" ? anchorBeforeFocus ? findFirstCharacterPosition(anchorSpinButton) : findLastCharacterPosition(anchorSpinButton) : { node: snapshotAnchorNode, offset: snapshotAnchorOffset };
-        const focusPos = focusSpinButton && focusSpinButton.getAttribute("role") === "spinbutton" ? anchorBeforeFocus ? findLastCharacterPosition(focusSpinButton) : findFirstCharacterPosition(focusSpinButton) : { node: snapshotFocusNode, offset: snapshotFocusOffset };
+        let anchorPos;
+        if (anchorSpinButton?.getAttribute("role") === "spinbutton") {
+          anchorPos = anchorBeforeFocus ? findFirstCharacterPosition(anchorSpinButton) : findLastCharacterPosition(anchorSpinButton);
+        } else {
+          anchorPos = {
+            node: anchorNodeForComparison,
+            offset: anchorOffsetForComparison
+          };
+        }
+        let focusPos;
+        if (focusSpinButton?.getAttribute("role") === "spinbutton") {
+          focusPos = anchorBeforeFocus ? findLastCharacterPosition(focusSpinButton) : findFirstCharacterPosition(focusSpinButton);
+        } else {
+          focusPos = { node: snapshotFocusNode, offset: snapshotFocusOffset };
+        }
         if (anchorPos && focusPos) {
           try {
-            window.getSelection()?.setBaseAndExtent(
+            const range = document.createRange();
+            if (anchorBeforeFocus) {
+              range.setStart(anchorPos.node, anchorPos.offset);
+              range.setEnd(focusPos.node, focusPos.offset);
+            } else {
+              range.setStart(focusPos.node, focusPos.offset);
+              range.setEnd(anchorPos.node, anchorPos.offset);
+            }
+            const sel = globalThis.getSelection();
+            sel?.setBaseAndExtent(
               anchorPos.node,
               anchorPos.offset,
               focusPos.node,
               focusPos.offset
             );
+            markDragSelectedElements(rootElement, range);
           } catch (error) {
-            const logger = getStratoLogger("DateTimeRangePicker");
-            logger.warn(
+            warnSelectionFailed(
               "setBaseAndExtent failed when restoring drag selection",
               error
             );
           }
         }
+        customRemovalFn?.(event, hasMultiElementSelection);
+        rootElement.removeAttribute("data-restoring-selection");
+        deferContentEditableRestore(rootElement);
       } else {
+        restoreContentEditableAttributes(rootElement);
         if (snapshotAnchorNode && snapshotFocusNode) {
           try {
-            window.getSelection()?.setBaseAndExtent(
+            globalThis.getSelection()?.setBaseAndExtent(
               snapshotAnchorNode,
               snapshotAnchorOffset,
               snapshotFocusNode,
               snapshotFocusOffset
             );
           } catch (error) {
-            const logger = getStratoLogger("DateTimeRangePicker");
-            logger.warn(
+            warnSelectionFailed(
               "setBaseAndExtent failed when restoring single-element selection",
               error
             );
           }
         }
+        customRemovalFn?.(event, hasMultiElementSelection);
+        rootElement.removeAttribute("data-restoring-selection");
       }
-      customRemovalFn?.(event, hasMultiElementSelection);
-      rootElement.removeAttribute("data-restoring-selection");
       signal.abort();
     },
     { signal: signal.signal }
   );
 }
+function findSpinButtonSnappedPosition(root, anchorNode, anchorOffset, focusNode, focusOffset, direction) {
+  let spinButton = null;
+  if (focusNode.nodeType === Node.TEXT_NODE) {
+    spinButton = focusNode.parentElement?.closest(
+      '[role="spinbutton"]'
+    ) ?? null;
+  } else if (focusNode instanceof HTMLElement && focusNode.getAttribute("role") === "spinbutton") {
+    spinButton = focusNode;
+  }
+  if (!spinButton) {
+    return null;
+  }
+  const allSBs = Array.from(
+    root.querySelectorAll('[role="spinbutton"]')
+  );
+  const idx = allSBs.indexOf(spinButton);
+  const focusIsBeforeAnchor = compareSelectionPoints(focusNode, focusOffset, anchorNode, anchorOffset) < 0;
+  const isGrowing = direction === "forward" ? !focusIsBeforeAnchor : focusIsBeforeAnchor;
+  if (direction === "forward") {
+    const nextSB = allSBs[idx + 1] ?? null;
+    if (!nextSB) {
+      return null;
+    }
+    return isGrowing ? findLastCharacterPosition(nextSB) : findFirstCharacterPosition(nextSB);
+  }
+  const prevSB = allSBs[idx - 1] ?? null;
+  if (!prevSB) {
+    return null;
+  }
+  return isGrowing ? findFirstCharacterPosition(prevSB) : findLastCharacterPosition(prevSB);
+}
 function extendSelection(key) {
-  const selection = window.getSelection();
+  const selection = globalThis.getSelection();
   if (selection === null || selection.anchorNode === null || selection.focusNode === null || selection.rangeCount < 1) {
     return;
   }
@@ -285,20 +543,121 @@ function extendSelection(key) {
   const focusNode = selection.focusNode;
   const focusOffset = selection.focusOffset;
   let nextPos = null;
-  const root = focusNode.parentElement?.closest(".strato-inputgroup");
+  const root = focusNode.nodeType === Node.TEXT_NODE ? focusNode.parentElement?.closest(
+    ".strato-inputgroup"
+  ) : focusNode instanceof HTMLElement ? focusNode.closest(".strato-inputgroup") : null;
   if (root === null || root === void 0) {
     return;
   }
   if (key === "ArrowLeft") {
-    nextPos = findPreviousCharacterPosition(root, focusNode, focusOffset);
+    nextPos = findSpinButtonSnappedPosition(
+      root,
+      anchorNode,
+      anchorOffset,
+      focusNode,
+      focusOffset,
+      "backward"
+    ) ?? findPreviousCharacterPosition(root, focusNode, focusOffset);
   } else if (key === "ArrowRight") {
-    nextPos = findNextCharacterPosition(root, focusNode, focusOffset);
+    nextPos = findSpinButtonSnappedPosition(
+      root,
+      anchorNode,
+      anchorOffset,
+      focusNode,
+      focusOffset,
+      "forward"
+    ) ?? findNextCharacterPosition(root, focusNode, focusOffset);
   } else if (key === "Home") {
     nextPos = findFirstCharacterPosition(root);
   } else if (key === "End") {
     nextPos = findLastCharacterPosition(root);
   }
-  if (nextPos) {
+  let crossedSeparator = false;
+  while (nextPos && getClosestContentEditable(nextPos.node) === null) {
+    crossedSeparator = true;
+    const skipped = key === "ArrowLeft" || key === "Home" ? findPreviousCharacterPosition(root, nextPos.node, nextPos.offset) : findNextCharacterPosition(root, nextPos.node, nextPos.offset);
+    if (!skipped) {
+      break;
+    }
+    nextPos = skipped;
+  }
+  if (crossedSeparator && nextPos?.node.nodeType === Node.TEXT_NODE) {
+    if (key === "ArrowRight") {
+      nextPos = { node: nextPos.node, offset: 0 };
+    } else if (key === "ArrowLeft") {
+      nextPos = {
+        node: nextPos.node,
+        offset: nextPos.node.nodeValue?.length ?? 0
+      };
+    }
+  }
+  if (!nextPos) {
+    return;
+  }
+  const spinButtonFromNode = (node) => {
+    const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node instanceof HTMLElement ? node : null;
+    const sb = el?.closest(SPIN_BUTTON_SELECTOR) ?? null;
+    return sb?.getAttribute("role") === "spinbutton" ? sb : null;
+  };
+  const anchorSB = spinButtonFromNode(anchorNode);
+  const anchorCE = getClosestContentEditable(anchorNode);
+  const nextCE = getClosestContentEditable(nextPos.node);
+  const crossesBoundary = anchorCE !== null && anchorCE !== nextCE;
+  if (crossesBoundary) {
+    let resolvedAnchorNode = anchorNode;
+    let resolvedAnchorOffset = anchorOffset;
+    if (anchorNode.nodeType !== Node.TEXT_NODE && anchorSB) {
+      const anchorBeforeFocus = compareSelectionPoints(
+        anchorNode,
+        anchorOffset,
+        nextPos.node,
+        nextPos.offset
+      ) <= 0;
+      const resolved = anchorBeforeFocus ? findFirstCharacterPosition(anchorSB) : findLastCharacterPosition(anchorSB);
+      if (resolved) {
+        resolvedAnchorNode = resolved.node;
+        resolvedAnchorOffset = resolved.offset;
+      }
+    }
+    root.setAttribute("data-restoring-selection", "");
+    for (const editable of root.querySelectorAll(
+      "[contenteditable]"
+    )) {
+      const prev = editable.getAttribute("contenteditable") ?? "";
+      editable.removeAttribute("contenteditable");
+      editable.dataset.wascontenteditable = prev;
+    }
+    try {
+      selection.setBaseAndExtent(
+        resolvedAnchorNode,
+        resolvedAnchorOffset,
+        nextPos.node,
+        nextPos.offset
+      );
+      const anchorBeforeFocus = compareSelectionPoints(
+        resolvedAnchorNode,
+        resolvedAnchorOffset,
+        nextPos.node,
+        nextPos.offset
+      ) <= 0;
+      const range = document.createRange();
+      if (anchorBeforeFocus) {
+        range.setStart(resolvedAnchorNode, resolvedAnchorOffset);
+        range.setEnd(nextPos.node, nextPos.offset);
+      } else {
+        range.setStart(nextPos.node, nextPos.offset);
+        range.setEnd(resolvedAnchorNode, resolvedAnchorOffset);
+      }
+      markDragSelectedElements(root, range);
+    } catch (error) {
+      warnSelectionFailed(
+        "setBaseAndExtent failed when extending cross-boundary selection",
+        error
+      );
+    }
+    root.removeAttribute("data-restoring-selection");
+    deferContentEditableRestore(root);
+  } else {
     root.setAttribute("data-restoring-selection", "");
     try {
       selection.setBaseAndExtent(
@@ -308,46 +667,110 @@ function extendSelection(key) {
         nextPos.offset
       );
     } catch (error) {
-      const logger = getStratoLogger("DateTimeRangePicker");
-      logger.warn("setBaseAndExtent failed when extending selection", error);
+      warnSelectionFailed(
+        "setBaseAndExtent failed when extending selection",
+        error
+      );
     }
     root.removeAttribute("data-restoring-selection");
-    root.setAttribute("data-shift-selection", "");
+    const updatedRange = new Range();
+    const cmp = anchorNode.compareDocumentPosition(nextPos.node);
+    if (cmp & Node.DOCUMENT_POSITION_FOLLOWING || cmp === 0 && anchorOffset <= nextPos.offset) {
+      updatedRange.setStart(anchorNode, anchorOffset);
+      updatedRange.setEnd(nextPos.node, nextPos.offset);
+    } else {
+      updatedRange.setStart(nextPos.node, nextPos.offset);
+      updatedRange.setEnd(anchorNode, anchorOffset);
+    }
+    markDragSelectedElements(root, updatedRange);
   }
+  root.setAttribute("data-shift-selection", "");
 }
 function extendSelectionToAll() {
-  const selection = window.getSelection();
+  const selection = globalThis.getSelection();
   if (selection === null || selection.focusNode === null || selection.rangeCount < 1) {
     return;
   }
-  const focusNode = selection.focusNode;
-  const root = focusNode.parentElement?.closest(".strato-inputgroup");
+  const root = selection.focusNode.parentElement?.closest(
+    ".strato-inputgroup"
+  );
   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) {
-    root.removeAttribute("data-restoring-selection");
     return;
   }
+  root.setAttribute("data-restoring-selection", "");
+  for (const editable of root.querySelectorAll(
+    "[contenteditable]"
+  )) {
+    const prev = editable.getAttribute("contenteditable") ?? "";
+    editable.removeAttribute("contenteditable");
+    editable.dataset.wascontenteditable = prev;
+  }
   try {
+    const range = document.createRange();
+    range.setStart(firstPosition.node, firstPosition.offset);
+    range.setEnd(lastPosition.node, lastPosition.offset);
     selection.setBaseAndExtent(
       firstPosition.node,
       firstPosition.offset,
       lastPosition.node,
       lastPosition.offset
     );
+    markDragSelectedElements(root, range, { includeTextboxes: true });
   } catch (error) {
-    const logger = getStratoLogger("DateTimeRangePicker");
-    logger.warn(
+    warnSelectionFailed(
       "setBaseAndExtent failed when extending selection to all",
       error
     );
   }
   root.removeAttribute("data-restoring-selection");
+  root.focus();
+  deferContentEditableRestore(root);
+}
+function getBoundaryNodes(direction, anchorNode, anchorOffset, focusNode, focusOffset) {
+  const anchorBeforeFocus = compareSelectionPoints(anchorNode, anchorOffset, focusNode, focusOffset) <= 0;
+  if (direction === "left" && anchorBeforeFocus) {
+    return { boundaryNode: anchorNode, boundaryOffset: anchorOffset };
+  }
+  return { boundaryNode: focusNode, boundaryOffset: focusOffset };
+}
+function collapseMultiElementSelection(rootElement, direction) {
+  const selection = globalThis.getSelection();
+  if (selection === null || selection.rangeCount < 1 || selection.isCollapsed) {
+    return false;
+  }
+  const anchorNode = selection.anchorNode;
+  const focusNode = selection.focusNode;
+  if (anchorNode === null || focusNode === null || anchorNode === focusNode) {
+    return false;
+  }
+  if (!rootElement.contains(anchorNode) && !rootElement.contains(focusNode)) {
+    return false;
+  }
+  const anchorOffset = selection.anchorOffset;
+  const focusOffset = selection.focusOffset;
+  const { boundaryNode, boundaryOffset } = getBoundaryNodes(
+    direction,
+    anchorNode,
+    anchorOffset,
+    focusNode,
+    focusOffset
+  );
+  pendingRestoreSignals.get(rootElement)?.abort();
+  pendingRestoreSignals.delete(rootElement);
+  restoreContentEditableAttributes(rootElement);
+  rootElement.removeAttribute("data-shift-selection");
+  const target = resolveSpinButton(boundaryNode, rootElement, boundaryOffset);
+  selection.removeAllRanges();
+  if (target === null) {
+    return false;
+  }
+  target.focus();
+  return true;
 }
 const SPIN_BUTTON_SELECTOR = "[contenteditable], [data-wascontenteditable]";
 function getClosestContentEditable(node) {
@@ -358,11 +781,20 @@ function getClosestContentEditable(node) {
 function isExpressionNode(node) {
   return node !== null && getClosestContentEditable(node)?.getAttribute("role") === "textbox";
 }
-function resolveSpinButton(node, root) {
+function resolveSpinButton(node, root, offset) {
   const direct = getClosestContentEditable(node);
   if (direct !== null) {
     return direct;
   }
+  if (node.nodeType !== Node.TEXT_NODE && offset !== void 0 && offset > 0) {
+    const childBefore = node.childNodes[offset - 1];
+    if (childBefore) {
+      const nearest = getNearestPrecedingSpinButton(childBefore, root);
+      if (nearest) {
+        return nearest;
+      }
+    }
+  }
   return getNearestPrecedingSpinButton(node, root);
 }
 function getNearestPrecedingSpinButton(node, root) {
@@ -558,15 +990,19 @@ function focusExpression(expressionElement, range) {
   const root = expressionElement.closest(".strato-inputgroup");
   root?.setAttribute("data-restoring-selection", "");
   expressionElement.focus();
-  const sel = window.getSelection();
+  const sel = globalThis.getSelection();
   if (sel) {
     if (!range) {
       range = document.createRange();
       range.selectNodeContents(expressionElement);
       range.collapse(false);
     }
-    sel.removeAllRanges();
-    sel.addRange(range);
+    sel.setBaseAndExtent(
+      range.startContainer,
+      range.startOffset,
+      range.endContainer,
+      range.endOffset
+    );
   }
   root?.removeAttribute("data-restoring-selection");
 }
@@ -595,7 +1031,7 @@ function deletePartialExpression(selection, expressionElement) {
   expressionElement.textContent = nextText;
   const nextRange = document.createRange();
   const node = expressionElement.firstChild;
-  if (node && node.nodeType === Node.TEXT_NODE) {
+  if (node?.nodeType === Node.TEXT_NODE) {
     nextRange.setStart(node, Math.min(from, nextText.length));
   } else {
     nextRange.setStart(expressionElement, 0);
@@ -604,26 +1040,30 @@ function deletePartialExpression(selection, expressionElement) {
   focusExpression(expressionElement, nextRange);
   expressionElement.dispatchEvent(new InputEvent("input", { bubbles: true }));
 }
-function planBulkClear(selection, inputRefs) {
+function planBulkClear(selection, inputRefs, endpointsOverride) {
+  const anchorNode = endpointsOverride?.anchorNode ?? selection.anchorNode;
+  const anchorOffset = endpointsOverride?.anchorOffset ?? selection.anchorOffset;
+  const focusNode = endpointsOverride?.focusNode ?? selection.focusNode;
+  const focusOffset = endpointsOverride?.focusOffset ?? selection.focusOffset;
   const affectedExpressionRefs = inputRefs.filter((ref) => {
     const expressionInputRef = ref.current?.expressionInputRef;
-    return expressionInputRef && (expressionInputRef.contains(selection.anchorNode) || expressionInputRef.contains(selection.focusNode));
+    return expressionInputRef && (expressionInputRef.contains(anchorNode) || expressionInputRef.contains(focusNode));
   });
   const clearedExpressions = affectedExpressionRefs.map((ref) => ({
     inputRef: ref,
     previousText: ref.current?.inputRef?.value ?? ref.current?.expressionInputRef?.textContent ?? ""
   }));
   const anchorInExpression = affectedExpressionRefs.some(
-    (ref) => ref.current?.expressionInputRef?.contains(selection.anchorNode)
+    (ref) => ref.current?.expressionInputRef?.contains(anchorNode)
   );
   const focusInExpression = affectedExpressionRefs.some(
-    (ref) => ref.current?.expressionInputRef?.contains(selection.focusNode)
+    (ref) => ref.current?.expressionInputRef?.contains(focusNode)
   );
   const snapshot = anchorInExpression && focusInExpression ? [] : buildSpinButtonSnapshot(
-    selection.anchorNode,
-    selection.anchorOffset,
-    selection.focusNode,
-    selection.focusOffset,
+    anchorNode,
+    anchorOffset,
+    focusNode,
+    focusOffset,
     inputRefs
   );
   return {
@@ -675,6 +1115,8 @@ function restoreFocusAfterBulkClear(firstSpinButtonHandler, focusTarget) {
 export {
   buildSpinButtonSnapshot,
   checkIfValueTypeAlignment,
+  collapseMultiElementSelection,
+  consumePreRestoreEndpoints,
   deleteCrossExpressionPartial,
   deletePartialExpression,
   extendSelection,