@jsenv/dom 0.17.70 → 0.17.72

package/dist/jsenv_dom.js

@@ -7152,14 +7152,7 @@ const getScrollContainer = (arg, { includeHidden } = {}) => {
     }
     return null;
   }
-  if (element.hasAttribute("popover")) {
-    return getScrollingElement(element.ownerDocument);
-  }
-  if (element.tagName === "DIALOG" && element.matches(":modal")) {
-    return getScrollingElement(element.ownerDocument);
-  }
-  const position = getStyle(element, "position");
-  if (position === "fixed") {
+  if (isScrollBoundary(element)) {
     return getScrollingElement(element.ownerDocument);
   }
   return (
@@ -7190,6 +7183,9 @@ const findScrollContainer = (element, { includeHidden } = {}) => {
     if (parent === document) {
       return null;
     }
+    if (isScrollBoundary(parent)) {
+      return null;
+    }
     if (isScrollable(parent, { includeHidden })) {
       return parent;
     }
@@ -7198,6 +7194,24 @@ const findScrollContainer = (element, { includeHidden } = {}) => {
   return null;
 };
 
+// A popover, a modal dialog or a fixed box is not scrolled by the boxes around
+// it: the page is its scroll container, and the parent walk of any element
+// inside it stops there too. A scrolling box between that boundary and the
+// outer ancestors would otherwise be found, although nothing it scrolls moves
+// the element.
+const isScrollBoundary = (node) => {
+  if (node.nodeType !== 1) {
+    return false;
+  }
+  if (node.hasAttribute("popover")) {
+    return true;
+  }
+  if (node.tagName === "DIALOG" && node.matches(":modal")) {
+    return true;
+  }
+  return getStyle(node, "position") === "fixed";
+};
+
 const getSelfAndAncestorScrolls = (element, startOnParent) => {
   let scrollX = 0;
   let scrollY = 0;
@@ -8903,12 +8917,15 @@ const captureHolderByPointerId = new Map();
  * @param {boolean} [options.backdrop=true]
  * @param {number} [options.backdropZIndex=999999]
  * @returns {{grab: function, grabViaPointer: function}}
- *   `grabViaPointer(pointerdownEvent, { element, direction, cursor, scrollContainer })` for a
- *   gesture a hand starts, `grab({ element, grabX, grabY })` for one nothing pressed. Both give
- *   back the gesture — `gestureInfo` (its `layout` with `xDelta`/`yDelta`, its velocity, the way
- *   it is going), `drag`, `release`, and `addDragCallback`/`addReleaseCallback` for whoever joins
- *   after it started. `grabViaPointer` gives back `null` when the press is not one it can read: a
- *   secondary button, a text node, an element that has left the document since the press.
+ *   `grabViaPointer(pointerdownEvent, { element, direction, cursor, scrollContainer,
+ *   pointerCaptureElement })` for a gesture a hand starts — `pointerCaptureElement` (the
+ *   pressed target by default) must outlive whatever the gesture re-renders, or the capture
+ *   is lost and the gesture ends cancelled; `grab({ element, grabX, grabY })` for one nothing
+ *   pressed. Both give back the gesture — `gestureInfo` (its `layout` with `xDelta`/`yDelta`,
+ *   its velocity, the way it is going), `drag`, `release`, and
+ *   `addDragCallback`/`addReleaseCallback` for whoever joins after it started.
+ *   `grabViaPointer` gives back `null` when the press is not one it can read: a secondary
+ *   button, a text node, an element that has left the document since the press.
  */
 const createDragGestureController = (options = {}) => {
   const {
@@ -11952,8 +11969,6 @@ const roundForConstraints = (value) => {
  * @param {Object} gestureInfo - Gesture information
  * @param {Element[]} targetElements - Array of potential drop target elements
  * @param {object} [options]
- * @param {Element} [options.dragElement] - The element being dragged. When provided and
- *   `fallbackToEdge` is true, used to compute the fallback rect.
  * @param {boolean} [options.fallbackToEdge=false] - When true and the drag element does
  *   not intersect any target, falls back to the first item (if above all items) or the
  *   last item (if below all items) so there is always a valid drop target at list edges.
@@ -14517,8 +14532,8 @@ const createDragToMoveGestureController = ({
  * @param {("move"|"reorder"|"toss"|"land"|"leave")[]} effects
  *   What letting go of this element can mean. `reorder`, `toss` and `land` carry a
  *   copy; `move` carries the element itself, and `leave` goes with either. Asking
- *   for `move` and `reorder` together is asking one release to mean two things,
- *   and so is asking for `reorder` and `land`.
+ *   for `move` beside any of the three that carry a copy is asking one release to
+ *   mean two things, and so is asking for `reorder` and `land`.
  * @param {object} [options]
  * @param {Element} [options.draggedElement=event.currentTarget]
  * @param {(detail: {gestureInfo: object, x: number, y: number}) => void} [options.onMoving]
@@ -14538,8 +14553,8 @@ const createDragToMoveGestureController = ({
  *   a node rebuilt), and the element's own translate otherwise, baked in — see
  *   settleMovedElement.
  * @param {(detail: {gestureInfo: object, x: number, y: number}) => Promise|void} [options.onLeave]
- *   It was let go of away from every place: with places (`itemSelector`), away
- *   from all of them; without, out of `outsideOf`. Beside `move` the element
+ *   It was let go of away from every place: beside `reorder` or `land`, away
+ *   from all of their places; otherwise, out of `outsideOf`. Beside `move` the element
  *   itself is left where the hand put it while this runs, and the answer says
  *   what becomes of that position — let go of on a resolve (the caller has
  *   removed the thing, or drawn it where it goes back to), travelled home on a
@@ -14574,7 +14589,7 @@ const createDragToMoveGestureController = ({
  *   if the promise rejects, because the thing still exists and the screen has to
  *   say so.
  * @param {(detail: {fromId: string, toId: string, x: number, y: number, width: number, height: number, syncCloneWithDropTarget: Function}) => Promise|void} [options.onLand]
- *   It came down on `toId`, which is an element and never null: nothing under the
+ *   It came down on the element `toId` names, never null: nothing under the
  *   copy is a cancelled release. `x`/`y`/`width`/`height` say WHERE on it, which
  *   is the whole answer when the place is a surface — a plan, a map — with no
  *   element under the copy to name. The copy is held until what comes back
@@ -15417,13 +15432,14 @@ const getRectInside = (element, containerElement) => {
 // Creates the two-layer clone structure used for drag-to-reorder.
 //
 // Layer 1 — wrapper (navi-drag-clone-wrapper):
-//   Positioned absolutely via --clone-top/--clone-left CSS vars.
+//   Positioned fixed via --clone-top/--clone-left CSS vars.
 //   Carries the box-shadow and size. Moved every drag frame via dragStyleController.
 //   Has a view-transition-name so the View Transitions API can animate it on release.
 //
 // Layer 2 — inner clone (navi-drag-clone):
 //   A deep clone of the grabbed element.
-//   Applies transform: scale(1.15) via the CSS rule for [navi-drag-clone],
+//   Applies transform: scale(var(--drag-clone-scale, 1.03)) via the CSS rule
+//   for [navi-drag-clone],
 //   giving the "lifted" feel. The transform-origin is set to the grab point
 //   so the element expands naturally from where the user clicked.
 //   On release, the `navi-drag-clone` attribute is removed inside
@@ -15688,7 +15704,7 @@ const createDragClone = (element, pointerEvent) => {
   wrapper.viewTransitionName = "navi-drag-clone-wrapper";
   setCloneViewportRect(wrapper, element);
   // Grab point within the element — used as transform-origin so the
-  // scale(1.15) expands from where the user clicked, not the element center.
+  // scale expands from where the user clicked, not the element center.
   // These offsets are element-relative so viewport coords are correct here.
   wrapper.style.setProperty(
     "--drag-origin",

package/package.json

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