@jsenv/dom 0.17.3 → 0.17.5

package/dist/jsenv_dom.js

@@ -7029,24 +7029,45 @@ const getScrollport = (scrollBox, scrollContainer) => {
   };
 };
 
-// https://davidwalsh.name/detect-scrollbar-width
+/**
+ * Returns [verticalScrollbarWidth, horizontalScrollbarHeight] as currently
+ * rendered by `scrollableElement`, in px. Returns zeros when the element has no
+ * classic scrollbar: no overflow, overlay scrollbars, `scrollbar-width: none`,
+ * or a `::-webkit-scrollbar { display: none }` rule.
+ *
+ * The measurement is taken on the element itself (its own border box versus its
+ * own content box) rather than on a probe node appended inside it. A probe
+ * cannot answer this question: `scrollbar-width` and `::-webkit-scrollbar` are
+ * not inherited, so a probe reports the platform default scrollbar size even
+ * when the element renders no scrollbar at all.
+ */
 const measureScrollbar = (scrollableElement) => {
-  const hasXScrollbar =
-    scrollableElement.scrollHeight > scrollableElement.clientHeight;
-  const hasYScrollbar =
-    scrollableElement.scrollWidth > scrollableElement.clientWidth;
-  if (!hasXScrollbar && !hasYScrollbar) {
-    return [0, 0];
-  }
-  const scrollDiv = document.createElement("div");
-  scrollDiv.style.cssText = `position: absolute; width: 100px; height: 100px; overflow: scroll; pointer-events: none; visibility: hidden;`;
-  scrollableElement.appendChild(scrollDiv);
-  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  const scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
-  scrollableElement.removeChild(scrollDiv);
+  if (
+    scrollableElement === document.documentElement ||
+    scrollableElement === document.scrollingElement
+  ) {
+    // documentElement.clientWidth/Height report the viewport minus its
+    // scrollbars, not this element's own box (which `max-width` can shrink), so
+    // the border box to compare against is the window itself.
+    return [
+      snapToPixel(window.innerWidth - document.documentElement.clientWidth),
+      snapToPixel(window.innerHeight - document.documentElement.clientHeight),
+    ];
+  }
+  const { left, right, top, bottom } = getBorderSizes(scrollableElement);
+  const scrollbarWidth =
+    scrollableElement.offsetWidth -
+    scrollableElement.clientWidth -
+    left -
+    right;
+  const scrollbarHeight =
+    scrollableElement.offsetHeight -
+    scrollableElement.clientHeight -
+    top -
+    bottom;
   return [
-    hasXScrollbar ? snapToPixel(scrollbarWidth) : 0,
-    hasYScrollbar ? snapToPixel(scrollbarHeight) : 0,
+    scrollbarWidth > 0 ? snapToPixel(scrollbarWidth) : 0,
+    scrollbarHeight > 0 ? snapToPixel(scrollbarHeight) : 0,
   ];
 };
 
@@ -8781,7 +8802,7 @@ const createDragGestureController = (options = {}) => {
   };
   dragGestureController.grab = grab;
   const initDragByPointer = (grabEvent, dragOptions, initializer) => {
-    if (grabEvent.button !== undefined && grabEvent.button !== 0) {
+    if (!isPrimaryButtonEvent(grabEvent)) {
       return null;
     }
     const target = grabEvent.target;
@@ -8877,12 +8898,22 @@ const createDragGestureController = (options = {}) => {
   dragGestureController.grabViaPointer = grabViaPointer;
   return dragGestureController;
 };
+
+// Only the primary button drags: a right click (or any secondary button) opens
+// a context menu, it never grabs anything.
+const isPrimaryButtonEvent = event => event.button === undefined || event.button === 0;
 const dragAfterThreshold = (grabEvent, dragGestureInitializer, threshold) => {
+  if (!isPrimaryButtonEvent(grabEvent)) {
+    return;
+  }
   const target = grabEvent.target;
   const isDedicatedHandle = target.closest && target.closest("[data-drag-handle]");
   if (isDedicatedHandle) {
     // Element is dedicated to drag — skip the threshold and start immediately.
     const dragGesture = dragGestureInitializer();
+    if (!dragGesture) {
+      return;
+    }
     dragGesture.dragViaPointer(grabEvent);
     return;
   }
@@ -11020,6 +11051,10 @@ const startDragToReorder = (event, {
   if (event.target.closest && event.target.closest("[data-drag-ignore]")) {
     return undefined;
   }
+  // A secondary button (right click and friends) is a context menu, not a grab.
+  if (!isPrimaryButtonEvent(event)) {
+    return undefined;
+  }
   event.preventDefault();
   return dragAfterThreshold(event, () => {
     const cloneWrapper = createDragClone(draggedElement, event);

package/package.json

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