@jsenv/dom 0.17.28 → 0.17.29

package/dist/jsenv_dom.js

@@ -9484,7 +9484,9 @@ const css$4 = /* css */`
     touch-action: pinch-zoom;
   }
   [data-drag-ignore],
-  [data-own-target] {
+  [data-own-target],
+  [data-drag-source] [popover],
+  [data-drag-source] dialog {
     -webkit-touch-callout: default;
     touch-action: auto;
   }
@@ -11926,7 +11928,8 @@ const css$1 = /* css */`
      whoever puts the drag there asks for the hand when a grab really is the
      first thing the element offers.
      An opted-out area keeps both its cursor and its selection, and never starts
-     a drag (see the check in startDragTo).
+     a drag (see the check in startDragTo); a popover or a dialog anchored in a
+     source is one without having to say so.
      Controls inside a source keep their own cursor: cursor is inherited, and
      anything setting its own (a button's pointer) wins on itself.
      Only the resting cursor is set here: what it becomes once a drag is under
@@ -11939,7 +11942,9 @@ const css$1 = /* css */`
     cursor: default;
   }
   [data-drag-ignore],
-  [data-own-target] {
+  [data-own-target],
+  [data-drag-source] [popover],
+  [data-drag-source] dialog {
     cursor: auto;
   }
 
@@ -12039,8 +12044,12 @@ import.meta.css = [css$1, "@jsenv/dom/src/interaction/drag/drag_to.js"];
 // control that reads the pointer itself. `data-own-target` is the same fact said
 // once for every gesture there is: an element declaring that a press landing on
 // it is aimed AT it, whatever it happens to sit inside (see also
-// DRAG_EXCLUDED_SELECTOR in drag_to_travel.js).
-const DRAG_IGNORED_SELECTOR = "[data-drag-ignore],[data-own-target]";
+// DRAG_EXCLUDED_SELECTOR in drag_to_travel.js). A popover or a dialog says it
+// without being asked: it is a layer OVER the surface, so a press in it is aimed
+// at the layer — yet it stays a descendant of whatever it is anchored in (a
+// callout next to a button, in the card that carries both), and the press
+// bubbles through the surface as if it had landed on it.
+const DRAG_IGNORED_SELECTOR = "[data-drag-ignore],[data-own-target],[popover],dialog";
 
 /**
  * Starts a drag-to-reorder interaction on a list item.
@@ -12540,8 +12549,8 @@ const startDragTo = (event, effects, {
   ...options
 } = {}) => {
   // An area that opted out of dragging (a text one wants to select, a control that
-  // owns the gesture): the press there is none of our business.
-  if (event.target.closest && event.target.closest(DRAG_IGNORED_SELECTOR)) {
+  // owns the gesture, a callout): the press there is none of our business.
+  if (isPressIgnored(event.target, draggedElement)) {
     return undefined;
   }
   // A secondary button (right click and friends) is a context menu, not a grab.
@@ -12722,8 +12731,8 @@ const startDragToCarryCopy = (event, {
   ...options
 }) => {
   // An area that opted out of dragging (a text one wants to select, a control
-  // that owns the gesture): the press there is none of our business.
-  if (event.target.closest && event.target.closest(DRAG_IGNORED_SELECTOR)) {
+  // that owns the gesture, a callout): the press there is none of our business.
+  if (isPressIgnored(event.target, draggedElement)) {
     return undefined;
   }
   // A secondary button (right click and friends) is a context menu, not a grab.
@@ -13231,6 +13240,18 @@ const createDragClone = (element, pointerEvent) => {
   return wrapper;
 };
 
+// The nearest word about the press wins: an opted-out area INSIDE the dragged
+// element takes the press away from it, one AROUND it does not — a list
+// reordered inside a dialog, or a dialog carried by its own handle, is itself the
+// last thing said before the finger.
+const isPressIgnored = (target, draggedElement) => {
+  if (!target.closest) {
+    return false;
+  }
+  const ignored = target.closest(DRAG_IGNORED_SELECTOR);
+  return Boolean(ignored) && !ignored.contains(draggedElement);
+};
+
 const startDragToResizeGesture = (
   pointerdownEvent,
   { onDragStart, onDrag, onRelease, ...options },
@@ -13471,8 +13492,10 @@ const DRAG_RESISTANCE = 0.3;
 // place whose only purpose is to be taken hold of, from the first pixel. And so
 // is an OWN TARGET: an element saying a press landing on it is aimed at IT,
 // which is the same sentence said to every gesture at once rather than to this
-// one (see DRAG_IGNORED_SELECTOR in drag_to.js).
-const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable=""]', '[contenteditable="true"]', "[data-drag-handle]", "[data-no-drag-travel]", "[data-own-target]"].join(",");
+// one (see DRAG_IGNORED_SELECTOR in drag_to.js). And so is a popover or a
+// dialog: a layer OVER the box, whose press only bubbles through the box because
+// the layer is anchored in it.
+const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable=""]', '[contenteditable="true"]', "[data-drag-handle]", "[data-no-drag-travel]", "[data-own-target]", "[popover]", "dialog"].join(",");
 
 // Which axes a box travels on, one attribute per gesture, said in the DOM by
 // whoever owns the box: it is what a box ABOVE another reads to know the
@@ -13698,7 +13721,7 @@ const startDragToTravel = (pointerDownEvent, {
   onGiveUp = () => {}
 }) => {
   const target = pointerDownEvent.target;
-  if (!target.closest || target.closest(DRAG_EXCLUDED_SELECTOR)) {
+  if (!target.closest || isPressExcluded(target, element)) {
     return null;
   }
   // A box between the finger and this one that travels the same way, and then
@@ -14159,7 +14182,7 @@ const watchWheelTravel = (element, {
       const {
         target
       } = wheelEvent;
-      if (target.closest && target.closest(DRAG_EXCLUDED_SELECTOR) || scrollRoomTowards(target, element, axis, sign) ||
+      if (target.closest && isPressExcluded(target, element) || scrollRoomTowards(target, element, axis, sign) ||
       // …plus the third: a box below this one that travels on this axis. Its
       // watcher hears the same wheel event this one does — they all listen at
       // the document — so without this both step, and one push moves two
@@ -14250,6 +14273,14 @@ const watchWheelTravel = (element, {
   };
 };
 
+// The nearest word wins: what is excluded INSIDE the box takes the press away
+// from it, what is around the box does not — a docked dialog IS the box that
+// travels, and being a dialog is no reason for it to refuse its own press.
+const isPressExcluded = (target, element) => {
+  const excluded = target.closest(DRAG_EXCLUDED_SELECTOR);
+  return Boolean(excluded) && !excluded.contains(element);
+};
+
 // Shared by navi's own use_displayed_layout_effect.js (rich "navi_displayed"
 // CustomEvent, open transitions only) and visible_rect.js (needs both
 // directions: hide when a container closes, recheck when it reopens) — the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.28",
+  "version": "0.17.29",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {