@jsenv/dom 0.17.91 → 0.17.93

package/dist/jsenv_dom.js

@@ -5267,6 +5267,9 @@ const findFocusable = (element, { exclude } = {}) => {
 // `visible` is the other non-scrolling value, and the only one on which the
 // content still reaches the ancestors.
 const isScrollable = (element, { includeHidden } = {}) => {
+  if (overflowGoesToViewport(element)) {
+    return false;
+  }
   if (canHaveVerticalScroll(element, { includeHidden })) {
     return true;
   }
@@ -5286,6 +5289,9 @@ const canScroll = (element, axis) => {
   if (!element || element.nodeType !== 1) {
     return false;
   }
+  if (overflowGoesToViewport(element)) {
+    return false;
+  }
   const style = getComputedStyle(element);
   const overflow = axis === "x" ? style.overflowX : style.overflowY;
   if (overflow !== "auto" && overflow !== "scroll") {
@@ -5298,6 +5304,23 @@ const canScroll = (element, axis) => {
   return scrollSize - clientSize > 1;
 };
 
+/**
+ * Whether `element` is a <body> whose overflow belongs to the viewport: when
+ * the root leaves its own overflow visible, the body's values are the
+ * viewport's (CSS overflow propagation), and body itself neither scrolls nor
+ * clips, whatever its computed overflow reads — `body { overflow-x: hidden }`
+ * computes overflow-y to auto there. The viewport scrolls, through the
+ * scrolling element.
+ */
+const overflowGoesToViewport = (element) => {
+  const { ownerDocument } = element;
+  if (element !== ownerDocument.body) {
+    return false;
+  }
+  const rootStyle = getComputedStyle(ownerDocument.documentElement);
+  return rootStyle.overflowX === "visible" && rootStyle.overflowY === "visible";
+};
+
 const canHaveVerticalScroll = (element, { includeHidden }) => {
   const verticalOverflow = getStyle(element, "overflow-y");
   if (verticalOverflow === "visible") {
@@ -12468,17 +12491,9 @@ const roundForConstraints = (value) => {
  *
  * @param {Object} gestureInfo - Gesture information
  * @param {Element[]} targetElements - Array of potential drop target elements
- * @param {object} [options]
- * @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.
  * @returns {Object|null} Drop target info with elementSide or null if no valid target found
  */
-const getDropTargetInfo = (
-  gestureInfo,
-  targetElements,
-  { fallbackToEdge = false } = {},
-) => {
+const getDropTargetInfo = (gestureInfo, targetElements) => {
   const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
   const dragElementRect = dragElement.getBoundingClientRect();
   const intersectingTargets = [];
@@ -12499,38 +12514,6 @@ const getDropTargetInfo = (
   }
 
   if (intersectingTargets.length === 0) {
-    if (fallbackToEdge) {
-      const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
-      const dragElementRect = dragElement.getBoundingClientRect();
-      const firstItem = targetElements[0];
-      const lastItem = targetElements[targetElements.length - 1];
-      if (
-        firstItem &&
-        dragElementRect.bottom < firstItem.getBoundingClientRect().top
-      ) {
-        // Drag element is above all items → treat as hovering the first item from the top.
-        return {
-          element: firstItem,
-          elementSide: { x: "start", y: "start" },
-          index: 0,
-          intersectingIndex: 0,
-          intersecting: [firstItem],
-        };
-      }
-      if (
-        lastItem &&
-        dragElementRect.top > lastItem.getBoundingClientRect().bottom
-      ) {
-        // Drag element is below all items → treat as hovering the last item from the bottom.
-        return {
-          element: lastItem,
-          elementSide: { x: "start", y: "end" },
-          index: targetElements.length - 1,
-          intersectingIndex: 0,
-          intersecting: [lastItem],
-        };
-      }
-    }
     return null;
   }
 
@@ -14645,6 +14628,22 @@ const css$1 = /* css */ `.navi_drop_hint {
   --drop-hint-y: calc(var(--drop-target-bottom) + var(--drop-hint-margin-y, 0px));
 }
 
+.navi_drop_hint[data-drop-edge="left"], .navi_drop_hint[data-drop-edge="right"] {
+  top: calc(var(--drop-target-top) + var(--drop-hint-margin-y, 0px));
+  left: var(--drop-hint-x);
+  width: var(--drop-hint-size, 3px);
+  height: calc(var(--drop-target-height) - 2 * var(--drop-hint-margin-y, 0px));
+  transform: translateX(-50%);
+}
+
+.navi_drop_hint[data-drop-edge="left"] {
+  --drop-hint-x: calc(var(--drop-target-left) - var(--drop-hint-margin-x, 0px));
+}
+
+.navi_drop_hint[data-drop-edge="right"] {
+  --drop-hint-x: calc(var(--drop-target-right) + var(--drop-hint-margin-x, 0px));
+}
+
 .navi_drop_hint_cap {
   color: var(--drop-hint-background-color, #4476ff);
   display: flex;
@@ -14668,6 +14667,23 @@ const css$1 = /* css */ `.navi_drop_hint {
   rotate: 90deg;
 }
 
+.navi_drop_hint:is([data-drop-edge="left"], [data-drop-edge="right"]) .navi_drop_hint_cap {
+  left: 50%;
+  right: auto;
+  translate: -50%;
+}
+
+.navi_drop_hint:is([data-drop-edge="left"], [data-drop-edge="right"]) .navi_drop_hint_cap[data-side="start"] {
+  top: calc(-1 * var(--drop-hint-arrow-size, 11px));
+  rotate: none;
+}
+
+.navi_drop_hint:is([data-drop-edge="left"], [data-drop-edge="right"]) .navi_drop_hint_cap[data-side="end"] {
+  top: auto;
+  bottom: calc(-1 * var(--drop-hint-arrow-size, 11px));
+  rotate: 180deg;
+}
+
 .navi_drop_surface {
   inset: auto;
   top: var(--drop-target-top);
@@ -15271,6 +15287,12 @@ const createDragToMoveGestureController = ({
  * @param {string} [options.itemSelector] What matches the items of the list.
  *   Left out, nothing is a place: no hint is drawn and no landing can be
  *   answered, which is what a drag that only ever throws the thing away asks for.
+ * @param {"column"|"row"|"wrap"} [options.itemFlow] How the items of a
+ *   reordered list are laid out: one under the other, side by side on one line,
+ *   or side by side over as many lines as it takes (inline-blocks, a flex-wrap,
+ *   a grid). A row runs in the writing direction of `containerElement`. It
+ *   decides which side of an item the copy is read on and where the hint is
+ *   drawn. Left out, it is read from where the items stand (see readItemFlow).
  * @param {function} [options.getItemId] `getItemId(element) → id`. An id rather
  *   than a DOM index, because the two do not match: a list draws fewer rows than
  *   it has, a search reorders them, and the structure may have holes.
@@ -15710,6 +15732,15 @@ const resolveDropMeaning = ({
   return "cancel";
 };
 
+// Which edge of its anchor the reorder hint is drawn at, for each way the items
+// can follow each other (see readItemFlow): before an item, the edge the flow
+// comes in by; after the last one, the edge it leaves by.
+const DROP_HINT_EDGES = {
+  down: { before: "top", after: "bottom" },
+  right: { before: "left", after: "right" },
+  left: { before: "right", after: "left" },
+};
+
 /**
  * A COPY of the element is carried, and the original keeps its place in the
  * layout — which is what makes a reorder possible at all: nothing else moves
@@ -15739,6 +15770,7 @@ const startDragToCarryCopy = (
     areaConstraint = canToss || canLeave ? "none" : undefined,
     containerElement = draggedElement.parentElement,
     itemSelector,
+    itemFlow,
     getItemId,
     onReorder,
     onLand,
@@ -15776,6 +15808,7 @@ const startDragToCarryCopy = (
   if (!isPrimaryButtonEvent(event)) {
     return undefined;
   }
+  const flowSaid = resolveItemFlow(itemFlow, containerElement);
   // Where the hand is, for a press handed over: its `pointerdown` says where it
   // WAS, before the hold and whatever the hold opened. Let go of meanwhile, it
   // is not picked up after the fact.
@@ -15890,6 +15923,7 @@ const startDragToCarryCopy = (
           dropHintEl.style.removeProperty("--drop-target-top");
           dropHintEl.style.removeProperty("--drop-target-bottom");
           dropHintEl.style.removeProperty("--drop-target-left");
+          dropHintEl.style.removeProperty("--drop-target-right");
           dropHintEl.style.removeProperty("--drop-target-width");
           dropHintEl.style.removeProperty("--drop-target-height");
         };
@@ -15931,12 +15965,10 @@ const startDragToCarryCopy = (
             }
           }
 
-          const dropTargetInfo = getDropTargetInfo(gestureInfo, items, {
-            // The edges of a LIST: above the first row means the top of it, below
-            // the last one means the end of it. A board has no such reading — away
-            // from every place is away from every place.
-            fallbackToEdge: !canLand,
-          });
+          const flow = canLand ? undefined : flowSaid || readItemFlow(allItems);
+          const dropTargetInfo = canLand
+            ? getDropTargetInfo(gestureInfo, items)
+            : findPlaceInList(gestureInfo, items, flow);
           gestureInfo.dropTargetInfo = dropTargetInfo || null;
           if (!dropTargetInfo) {
             clearDropHint();
@@ -15970,14 +16002,13 @@ const startDragToCarryCopy = (
             );
             return;
           }
-          // Convert {element, edge} to a beforeElement using the items array
+          // Convert {element, side} to a beforeElement using the items array
           // (not nextElementSibling, which breaks if non-item elements exist between items).
-          //   edge "start" → insert before the hovered element
-          //   edge "end"   → insert before the next item (null = append at end)
-          const edge = dropTargetInfo.elementSide.y;
+          //   side "start" → insert before the hovered element
+          //   side "end"   → insert before the next item (null = append at end)
           const hoveredIndex = items.indexOf(dropTargetInfo.element);
           const beforeElement =
-            edge === "start"
+            dropTargetInfo.side === "start"
               ? dropTargetInfo.element
               : (items[hoveredIndex + 1] ?? null);
           // Detect no-op: result would leave the grabbed element in the same position.
@@ -16000,9 +16031,11 @@ const startDragToCarryCopy = (
           currentReleaseElement = releaseElement;
           // Update drop hint CSS vars.
           // beforeElement = null → insert at end (hint after last item)
-          // beforeElement = X    → insert before X (hint at top edge of X)
+          // beforeElement = X    → insert before X (hint at the edge of X the
+          //                        flow comes in by)
           const anchorEl = beforeElement || items[items.length - 1];
-          const anchorEdge = beforeElement !== null ? "top" : "bottom";
+          const anchorEdge =
+            DROP_HINT_EDGES[flow][beforeElement !== null ? "before" : "after"];
           // Viewport coordinates, straight from the anchor row: the hint is fixed
           // in the page (see its CSS), so there is no container box to be relative
           // to and no scroll offset to add back.
@@ -16020,10 +16053,18 @@ const startDragToCarryCopy = (
             "--drop-target-left",
             `${anchorRect.left}px`,
           );
+          dropHintEl.style.setProperty(
+            "--drop-target-right",
+            `${anchorRect.right}px`,
+          );
           dropHintEl.style.setProperty(
             "--drop-target-width",
             `${anchorRect.width}px`,
           );
+          dropHintEl.style.setProperty(
+            "--drop-target-height",
+            `${anchorRect.height}px`,
+          );
         });
 
         dragGesture.addReleaseCallback(async (gestureInfo) => {
@@ -16284,6 +16325,123 @@ const createDropSurface = () => {
   return div;
 };
 
+/**
+ * The way the items follow each other, from how the caller said they are laid
+ * out (the `itemFlow` of startDragTo). A row runs the way the text of its list
+ * does: from right to left under `direction: rtl`.
+ */
+const resolveItemFlow = (itemFlow, containerElement) => {
+  if (itemFlow === undefined) {
+    return undefined;
+  }
+  if (itemFlow === "column") {
+    return "down";
+  }
+  if (itemFlow === "row" || itemFlow === "wrap") {
+    return getComputedStyle(containerElement).direction === "rtl"
+      ? "left"
+      : "right";
+  }
+  return undefined;
+};
+
+/**
+ * Which way the items of a list follow each other on screen: "down", or along a
+ * line — a row, a wrapped row, a grid — "right", or "left" when it runs from
+ * right to left. Read from where the items stand rather than declared: the
+ * first item level with the one after it makes the list run sideways, and which
+ * of the two is on the left says which way. Asked of the whole list, not of the
+ * item under the copy: alone on the last line of a wrapped row, an item is level
+ * with nothing and still part of a row.
+ */
+const readItemFlow = (items) => {
+  let previousRect;
+  for (const item of items) {
+    const rect = item.getBoundingClientRect();
+    // A box that takes no room stands on no line.
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    if (previousRect && areLevel(previousRect, rect)) {
+      return rect.left < previousRect.left ? "left" : "right";
+    }
+    previousRect = rect;
+  }
+  return "down";
+};
+
+// The middle of one within the height of the other. Overlapping is not enough:
+// items stacked with a negative margin (a border shared between two) overlap by
+// a pixel and are still one under the other.
+const areLevel = (a, b) => {
+  const aMiddle = a.top + a.height / 2;
+  const bMiddle = b.top + b.height / 2;
+  return (
+    (bMiddle > a.top && bMiddle < a.bottom) ||
+    (aMiddle > b.top && aMiddle < b.bottom)
+  );
+};
+
+/**
+ * The item the copy is at, and its `side` in the order of the list: "start" for
+ * before it, "end" for after it. Down a list, read by the copy's leading edge
+ * (see getDropTargetInfo); along a row, by its middle against the item's — how
+ * high the copy is says nothing there, and the leading edge assumes a copy as
+ * large as what it passes over: items of a row are as wide as their content,
+ * and one wider than its neighbour could never be put after it.
+ *
+ * Beyond an end of the list, over no item, is a place too: above the first line
+ * or below the last, and along a row beside the first item or past the last.
+ */
+const findPlaceInList = (gestureInfo, items, flow) => {
+  const dragElementRect = gestureInfo.elementImpacted.getBoundingClientRect();
+  const dropTargetInfo = getDropTargetInfo(gestureInfo, items);
+  if (dropTargetInfo) {
+    const { element } = dropTargetInfo;
+    if (flow === "down") {
+      return { element, side: dropTargetInfo.elementSide.y };
+    }
+    const elementRect = element.getBoundingClientRect();
+    const dragMiddle = dragElementRect.left + dragElementRect.width / 2;
+    const elementMiddle = elementRect.left + elementRect.width / 2;
+    const beforeItsMiddle =
+      flow === "right"
+        ? dragMiddle < elementMiddle
+        : dragMiddle > elementMiddle;
+    return { element, side: beforeItsMiddle ? "start" : "end" };
+  }
+  const firstItem = items[0];
+  if (!firstItem) {
+    return null;
+  }
+  const lastItem = items[items.length - 1];
+  const firstRect = firstItem.getBoundingClientRect();
+  const lastRect = lastItem.getBoundingClientRect();
+  if (
+    dragElementRect.bottom < firstRect.top ||
+    (flow !== "down" &&
+      areLevel(dragElementRect, firstRect) &&
+      isBeyond(dragElementRect, firstRect, flow === "right" ? "left" : "right"))
+  ) {
+    return { element: firstItem, side: "start" };
+  }
+  if (
+    dragElementRect.top > lastRect.bottom ||
+    (flow !== "down" &&
+      areLevel(dragElementRect, lastRect) &&
+      isBeyond(dragElementRect, lastRect, flow))
+  ) {
+    return { element: lastItem, side: "end" };
+  }
+  return null;
+};
+
+const isBeyond = (dragElementRect, itemRect, towards) => {
+  return towards === "left"
+    ? dragElementRect.right < itemRect.left
+    : dragElementRect.left > itemRect.right;
+};
+
 /**
  * The copy leaves the screen the way it was thrown, and the caller says what that
  * meant. Resolves true when it is really gone.
@@ -22736,4 +22894,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
 
-export { EASING, ELEMENT_SIZE_CHANGE, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, canScroll, captureScrollState, chainEvent, claimWheelGesture, clickIsSuppressed, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createInternalCustomEvent, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterIntent, dragSourceThatStoodDown, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollIntoViewScopedOffsets, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVirtualKeyboardOverlayHeight, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, installPanZoom, isAncestorOpen, isDisplayedDespiteClosedAncestor, isPressDisputedByDrag, isPressDrivenClick, isPrimaryButtonEvent, isSameColor, isScrollable, isTouchDrivenEvent, keepTouchRefusable, markDragSource, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, refuseDragTo, releaseWheelGesture, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewThroughScrollables, scrollIntoViewWithStickyAwareness, scrollRoomTowards, setAttribute, setAttributes, setPlacementViewportInsets, setStyles, setVirtualKeyboardOverlaysContent, snapToPixel, startDragTo, startDragToResizeGesture, startDragToTravel, stickyAsRelativeCoords, stringifyStyle, subscribeVirtualKeyboardGeometryChange, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, suppressClickAfterGesture, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect, waitForPressHeld, waitForTap, watchWheelTravel, wheelGestureIsTakenFrom };
+export { EASING, ELEMENT_SIZE_CHANGE, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, canScroll, captureScrollState, chainEvent, claimWheelGesture, clickIsSuppressed, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createInternalCustomEvent, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterIntent, dragSourceThatStoodDown, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollIntoViewScopedOffsets, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVirtualKeyboardOverlayHeight, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, installPanZoom, isAncestorOpen, isDisplayedDespiteClosedAncestor, isPressDisputedByDrag, isPressDrivenClick, isPrimaryButtonEvent, isSameColor, isScrollable, isTouchDrivenEvent, keepTouchRefusable, markDragSource, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, overflowGoesToViewport, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, refuseDragTo, releaseWheelGesture, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewThroughScrollables, scrollIntoViewWithStickyAwareness, scrollRoomTowards, setAttribute, setAttributes, setPlacementViewportInsets, setStyles, setVirtualKeyboardOverlaysContent, snapToPixel, startDragTo, startDragToResizeGesture, startDragToTravel, stickyAsRelativeCoords, stringifyStyle, subscribeVirtualKeyboardGeometryChange, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, suppressClickAfterGesture, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect, waitForPressHeld, waitForTap, watchWheelTravel, wheelGestureIsTakenFrom };

package/package.json

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