@dynatrace/strato-components 3.6.0 → 3.7.1

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

@@ -1,19 +1,31 @@
-import * as styles from "./DateTimeInput.sty.js";
+import { checkIfValueTypeAlignment } from "./helpers.js";
+import { buildTimeframeClipboardText } from "./selection-copy-helpers.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}`
-  );
-  const currentValueType = closestDateTimeInput?.getAttribute("data-valuetype");
-  const closestValueTypeElement = textNode.parentElement?.closest("[data-valuetype]");
-  if (closestDateTimeInput === closestValueTypeElement) {
-    return true;
+function safeSetBaseAndExtent(selection, { anchorNode, anchorOffset, focusNode, focusOffset }, warnMessage) {
+  try {
+    selection?.setBaseAndExtent(
+      anchorNode,
+      anchorOffset,
+      focusNode,
+      focusOffset
+    );
+  } catch (error) {
+    warnSelectionFailed(warnMessage, error);
   }
-  const nodeValueType = closestValueTypeElement?.getAttribute("data-valuetype");
-  return nodeValueType === currentValueType;
+}
+function getMultiElementEndpoints(selection) {
+  if (!selection?.anchorNode || !selection.focusNode || selection.toString().length === 0) {
+    return null;
+  }
+  const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+  const isSameNode = anchorNode === focusNode;
+  if (isSameNode && !(anchorNode.nodeType === Node.ELEMENT_NODE && anchorOffset !== focusOffset)) {
+    return null;
+  }
+  return { anchorNode, anchorOffset, focusNode, focusOffset };
 }
 function previousTextNode(root, node) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
@@ -195,6 +207,23 @@ function compareSelectionPoints(firstNode, firstOffset, secondNode, secondOffset
     return 0;
   }
 }
+function buildDocumentOrderedRange({
+  anchorNode,
+  anchorOffset,
+  focusNode,
+  focusOffset
+}) {
+  const range = document.createRange();
+  const anchorBeforeFocus = compareSelectionPoints(anchorNode, anchorOffset, focusNode, focusOffset) <= 0;
+  if (anchorBeforeFocus) {
+    range.setStart(anchorNode, anchorOffset);
+    range.setEnd(focusNode, focusOffset);
+  } else {
+    range.setStart(focusNode, focusOffset);
+    range.setEnd(anchorNode, anchorOffset);
+  }
+  return range;
+}
 function selectionOverlapsSpinButton(selectionStartNode, selectionStartOffset, selectionEndNode, selectionEndOffset, spinButton) {
   const spinButtonStart = findFirstCharacterPosition(spinButton);
   const spinButtonEnd = findLastCharacterPosition(spinButton);
@@ -266,7 +295,7 @@ function shouldBypassRestore(e) {
   if (["Meta", "Control", "Alt", "Shift"].includes(e.key)) {
     return true;
   }
-  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+  if ((e.metaKey || e.ctrlKey) && (e.key.toLowerCase() === "c" || e.key.toLowerCase() === "x")) {
     return true;
   }
   return e.shiftKey && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(
@@ -295,6 +324,9 @@ function deferContentEditableRestore(root) {
   const restoreSignal = new AbortController();
   pendingRestoreSignals.set(root, restoreSignal);
   function handler(e) {
+    if (e instanceof MouseEvent && e.button === 2) {
+      return;
+    }
     if (e instanceof KeyboardEvent) {
       if (shouldBypassRestore(e)) {
         return;
@@ -304,50 +336,19 @@ function deferContentEditableRestore(root) {
       }
     }
     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 && e instanceof KeyboardEvent) {
-      lastPreRestoreEndpoints.set(root, {
-        anchorNode,
-        anchorOffset,
-        focusNode,
-        focusOffset
-      });
+    const endpoints = getMultiElementEndpoints(selection);
+    if (endpoints !== null && e instanceof KeyboardEvent) {
+      lastPreRestoreEndpoints.set(root, endpoints);
     }
     restoreContentEditableAttributes(root);
     pendingRestoreSignals.delete(root);
     restoreSignal.abort();
-    if (hasMultiElementSelection && anchorNode && focusNode) {
-      try {
-        const anchorIsEmpty = isEmptyPlaceholderSpinButton(anchorNode);
-        const focusIsEmpty = isEmptyPlaceholderSpinButton(focusNode);
-        if (anchorIsEmpty && !focusIsEmpty && focusNode.nodeType === Node.TEXT_NODE) {
-          selection?.setBaseAndExtent(focusNode, 0, focusNode, focusOffset);
-        } else if (focusIsEmpty && !anchorIsEmpty && anchorNode.nodeType === Node.TEXT_NODE) {
-          const anchorTextLength = anchorNode.nodeValue?.length ?? anchorOffset;
-          selection?.setBaseAndExtent(
-            anchorNode,
-            anchorOffset,
-            anchorNode,
-            anchorTextLength
-          );
-        } else if (!anchorIsEmpty && !focusIsEmpty) {
-          selection?.setBaseAndExtent(
-            anchorNode,
-            anchorOffset,
-            focusNode,
-            focusOffset
-          );
-        }
-      } catch (error) {
-        warnSelectionFailed(
-          "setBaseAndExtent failed when restoring selection after CE re-attach",
-          error
-        );
-      }
+    if (endpoints !== null) {
+      safeSetBaseAndExtent(
+        selection,
+        endpoints,
+        "setBaseAndExtent failed when restoring selection after CE re-attach"
+      );
     }
   }
   document.addEventListener("mousedown", handler, {
@@ -358,6 +359,84 @@ function deferContentEditableRestore(root) {
     signal: restoreSignal.signal,
     capture: true
   });
+  document.addEventListener(
+    "contextmenu",
+    () => {
+      const liveSelection = globalThis.getSelection();
+      const endpoints = getMultiElementEndpoints(liveSelection);
+      if (endpoints !== null) {
+        lastPreRestoreEndpoints.set(root, endpoints);
+      }
+      let stashedClipboardText = null;
+      if (endpoints !== null) {
+        safeSetBaseAndExtent(
+          liveSelection,
+          endpoints,
+          "setBaseAndExtent failed when restoring selection for context menu (pre-CE)"
+        );
+        stashedClipboardText = buildTimeframeClipboardText();
+      }
+      if (endpoints !== null) {
+        root.setAttribute("contenteditable", "true");
+      } else {
+        restoreContentEditableAttributes(root);
+      }
+      pendingRestoreSignals.delete(root);
+      restoreSignal.abort();
+      if (endpoints !== null) {
+        safeSetBaseAndExtent(
+          liveSelection,
+          endpoints,
+          "setBaseAndExtent failed when restoring selection for context menu"
+        );
+        markDragSelectedElements(root, buildDocumentOrderedRange(endpoints));
+      }
+      if (stashedClipboardText !== null) {
+        const copyListenerAbort = new AbortController();
+        const copyHandler = (copyEvent) => {
+          if (!(copyEvent instanceof ClipboardEvent)) {
+            return;
+          }
+          copyEvent.preventDefault();
+          copyEvent.clipboardData?.setData("text/plain", stashedClipboardText);
+          copyListenerAbort.abort();
+        };
+        document.addEventListener("copy", copyHandler, {
+          signal: copyListenerAbort.signal
+        });
+        document.addEventListener("cut", copyHandler, {
+          signal: copyListenerAbort.signal
+        });
+        document.addEventListener(
+          "mousedown",
+          () => copyListenerAbort.abort(),
+          { signal: copyListenerAbort.signal, capture: true, once: true }
+        );
+      }
+      if (endpoints !== null) {
+        const ceCleanupAbort = new AbortController();
+        const restorePerSpinButtonCE = () => {
+          root.removeAttribute("contenteditable");
+          restoreContentEditableAttributes(root);
+          ceCleanupAbort.abort();
+        };
+        document.addEventListener("mousedown", restorePerSpinButtonCE, {
+          signal: ceCleanupAbort.signal,
+          capture: true,
+          once: true
+        });
+        document.addEventListener("cut", restorePerSpinButtonCE, {
+          signal: ceCleanupAbort.signal,
+          once: true
+        });
+        document.addEventListener("copy", restorePerSpinButtonCE, {
+          signal: ceCleanupAbort.signal,
+          once: true
+        });
+      }
+    },
+    { signal: restoreSignal.signal, capture: true }
+  );
 }
 function removeContentEditable(rootElement, removeEventTarget, eventType, customRemovalFn, initialAnchorSpinButton) {
   rootElement.setAttribute("data-restoring-selection", "");
@@ -386,39 +465,33 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
             return;
           }
           const focusNode = sel.focusNode;
-          const focusOffset = sel.focusOffset ?? 0;
           if (!focusNode) {
             return;
           }
+          const focusOffset = sel.focusOffset ?? 0;
           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
-            );
-          }
+          sel.removeAllRanges();
+          const correctedEndpoints = anchorBeforeFocus ? {
+            anchorNode: anchorPos.node,
+            anchorOffset: anchorPos.offset,
+            focusNode,
+            focusOffset
+          } : {
+            anchorNode: focusNode,
+            anchorOffset: focusOffset,
+            focusNode: anchorPos.node,
+            focusOffset: anchorPos.offset
+          };
+          safeSetBaseAndExtent(
+            sel,
+            correctedEndpoints,
+            "selection anchor correction during drag failed"
+          );
         },
         { signal: signal.signal, capture: true }
       );
@@ -439,13 +512,16 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
   removeEventTarget.addEventListener(
     eventType,
     (event) => {
-      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);
-      if (hasMultiElementSelection && snapshotAnchorNode && snapshotFocusNode) {
+      const multiElementEndpoints = getMultiElementEndpoints(
+        globalThis.getSelection()
+      );
+      if (multiElementEndpoints !== null) {
+        const {
+          anchorNode: snapshotAnchorNode,
+          anchorOffset: snapshotAnchorOffset,
+          focusNode: snapshotFocusNode,
+          focusOffset: snapshotFocusOffset
+        } = multiElementEndpoints;
         const anchorIsElementNode = snapshotAnchorNode.nodeType !== Node.TEXT_NODE;
         const anchorNodeWasInContent = anchorIsElementNode ? initialAnchorSpinButton !== null : isEndpointInsideSpinButtonContent(
           snapshotAnchorNode,
@@ -503,51 +579,28 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
           focusPos = { node: snapshotFocusNode, offset: snapshotFocusOffset };
         }
         if (anchorPos && focusPos) {
-          try {
-            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) {
-            warnSelectionFailed(
-              "setBaseAndExtent failed when restoring drag selection",
-              error
-            );
-          }
+          const dragEndpoints = {
+            anchorNode: anchorPos.node,
+            anchorOffset: anchorPos.offset,
+            focusNode: focusPos.node,
+            focusOffset: focusPos.offset
+          };
+          safeSetBaseAndExtent(
+            globalThis.getSelection(),
+            dragEndpoints,
+            "setBaseAndExtent failed when restoring drag selection"
+          );
+          markDragSelectedElements(
+            rootElement,
+            buildDocumentOrderedRange(dragEndpoints)
+          );
         }
-        customRemovalFn?.(event, hasMultiElementSelection);
+        customRemovalFn?.(event, true);
         rootElement.removeAttribute("data-restoring-selection");
         deferContentEditableRestore(rootElement);
       } else {
         restoreContentEditableAttributes(rootElement);
-        if (snapshotAnchorNode && snapshotFocusNode) {
-          try {
-            globalThis.getSelection()?.setBaseAndExtent(
-              snapshotAnchorNode,
-              snapshotAnchorOffset,
-              snapshotFocusNode,
-              snapshotFocusOffset
-            );
-          } catch (error) {
-            warnSelectionFailed(
-              "setBaseAndExtent failed when restoring single-element selection",
-              error
-            );
-          }
-        }
-        customRemovalFn?.(event, hasMultiElementSelection);
+        customRemovalFn?.(event, false);
         rootElement.removeAttribute("data-restoring-selection");
       }
       signal.abort();
@@ -555,7 +608,7 @@ function removeContentEditable(rootElement, removeEventTarget, eventType, custom
     { signal: signal.signal }
   );
 }
-function findSpinButtonSnappedPosition(root, anchorNode, anchorOffset, focusNode, focusOffset, direction) {
+function findSpinButtonSnappedPosition(root, { anchorNode, anchorOffset, focusNode, focusOffset }, direction) {
   let spinButton = null;
   if (focusNode.nodeType === Node.TEXT_NODE) {
     spinButton = focusNode.parentElement?.closest(
@@ -621,24 +674,16 @@ function extendSelection(key) {
   if (root === null || root === void 0) {
     return;
   }
+  const selEndpoints = {
+    anchorNode,
+    anchorOffset,
+    focusNode,
+    focusOffset
+  };
   if (key === "ArrowLeft") {
-    nextPos = findSpinButtonSnappedPosition(
-      root,
-      anchorNode,
-      anchorOffset,
-      focusNode,
-      focusOffset,
-      "backward"
-    ) ?? findPreviousCharacterPosition(root, focusNode, focusOffset);
+    nextPos = findSpinButtonSnappedPosition(root, selEndpoints, "backward") ?? findPreviousCharacterPosition(root, focusNode, focusOffset);
   } else if (key === "ArrowRight") {
-    nextPos = findSpinButtonSnappedPosition(
-      root,
-      anchorNode,
-      anchorOffset,
-      focusNode,
-      focusOffset,
-      "forward"
-    ) ?? findNextCharacterPosition(root, focusNode, focusOffset);
+    nextPos = findSpinButtonSnappedPosition(root, selEndpoints, "forward") ?? findNextCharacterPosition(root, focusNode, focusOffset);
   } else if (key === "Home") {
     nextPos = findFirstCharacterPosition(root);
   } else if (key === "End") {
@@ -700,62 +745,35 @@ function extendSelection(key) {
       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
-      );
-    }
+    const nextEndpoints = {
+      anchorNode: resolvedAnchorNode,
+      anchorOffset: resolvedAnchorOffset,
+      focusNode: nextPos.node,
+      focusOffset: nextPos.offset
+    };
+    safeSetBaseAndExtent(
+      selection,
+      nextEndpoints,
+      "setBaseAndExtent failed when extending cross-boundary selection"
+    );
+    markDragSelectedElements(root, buildDocumentOrderedRange(nextEndpoints));
     root.removeAttribute("data-restoring-selection");
     deferContentEditableRestore(root);
   } else {
     root.setAttribute("data-restoring-selection", "");
-    try {
-      selection.setBaseAndExtent(
-        anchorNode,
-        anchorOffset,
-        nextPos.node,
-        nextPos.offset
-      );
-    } catch (error) {
-      warnSelectionFailed(
-        "setBaseAndExtent failed when extending selection",
-        error
-      );
-    }
+    const nextEndpoints = {
+      anchorNode,
+      anchorOffset,
+      focusNode: nextPos.node,
+      focusOffset: nextPos.offset
+    };
+    safeSetBaseAndExtent(
+      selection,
+      nextEndpoints,
+      "setBaseAndExtent failed when extending selection"
+    );
     root.removeAttribute("data-restoring-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);
+    markDragSelectedElements(root, buildDocumentOrderedRange(nextEndpoints));
   }
   root.setAttribute("data-shift-selection", "");
 }
@@ -782,29 +800,30 @@ function extendSelectionToAll() {
     const prev = editable.getAttribute("contenteditable") ?? "";
     editable.removeAttribute("contenteditable");
     editable.dataset.wascontenteditable = prev;
+    if (editable.hasAttribute("tabindex")) {
+      editable.dataset.wastabindex = editable.getAttribute("tabindex") ?? "";
+      editable.removeAttribute("tabindex");
+    }
   }
-  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) {
-    warnSelectionFailed(
-      "setBaseAndExtent failed when extending selection to all",
-      error
-    );
-  }
-  root.removeAttribute("data-restoring-selection");
   root.focus();
+  const allEndpoints = {
+    anchorNode: firstPosition.node,
+    anchorOffset: firstPosition.offset,
+    focusNode: lastPosition.node,
+    focusOffset: lastPosition.offset
+  };
+  safeSetBaseAndExtent(
+    selection,
+    allEndpoints,
+    "setBaseAndExtent failed when extending selection to all"
+  );
+  markDragSelectedElements(root, buildDocumentOrderedRange(allEndpoints), {
+    includeTextboxes: true
+  });
+  root.removeAttribute("data-restoring-selection");
   deferContentEditableRestore(root);
 }
-function getBoundaryNodes(direction, anchorNode, anchorOffset, focusNode, focusOffset) {
+function getBoundaryNodes(direction, { anchorNode, anchorOffset, focusNode, focusOffset }) {
   const anchorBeforeFocus = compareSelectionPoints(anchorNode, anchorOffset, focusNode, focusOffset) <= 0;
   if (direction === "left" && anchorBeforeFocus) {
     return { boundaryNode: anchorNode, boundaryOffset: anchorOffset };
@@ -826,13 +845,12 @@ function collapseMultiElementSelection(rootElement, direction) {
   }
   const anchorOffset = selection.anchorOffset;
   const focusOffset = selection.focusOffset;
-  const { boundaryNode, boundaryOffset } = getBoundaryNodes(
-    direction,
+  const { boundaryNode, boundaryOffset } = getBoundaryNodes(direction, {
     anchorNode,
     anchorOffset,
     focusNode,
     focusOffset
-  );
+  });
   pendingRestoreSignals.get(rootElement)?.abort();
   pendingRestoreSignals.delete(rootElement);
   restoreContentEditableAttributes(rootElement);
@@ -1209,7 +1227,6 @@ function restoreFocusAfterBulkClear(firstSpinButtonHandler, focusTarget) {
 }
 export {
   buildSpinButtonSnapshot,
-  checkIfValueTypeAlignment,
   collapseMultiElementSelection,
   consumePreRestoreEndpoints,
   deleteCrossExpressionPartial,
@@ -1229,6 +1246,7 @@ export {
   removeContentEditable,
   restoreExpressionCursorOffset,
   restoreFocusAfterBulkClear,
-  restoreSpinButtonSnapshot
+  restoreSpinButtonSnapshot,
+  safeSetBaseAndExtent
 };
 //# sourceMappingURL=selection-helpers.js.map