playbook_ui 16.11.0.pre.rc.2 → 16.11.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3240b5088da697dc630863038b107d3afb359c41a2a7fb782c538c69b58e7f84
-  data.tar.gz: 2935c4cbffb05815b2a60e1d1d365f06b166a560a88472d38acaaf0f4d63fd9f
+  metadata.gz: 7ac0205b50ee49eadbe6eace5e060cf97a7cb52ad2187adfd0f367a69de229d7
+  data.tar.gz: af1a7209ac89983dd1aebf1fb746f119e7251301417f9c857319e7ef09a28f72
 SHA512:
-  metadata.gz: f8ff49b8d4936b46baaeae064f01de7d4a5e78b32579c80e647fb453f37e30ecd03d1f321e29795e89d21b78cddb6e34bd5eaa185b7b30156801976968a7f96b
-  data.tar.gz: 1da4e486c2dd4509bfac64af064bea02fce52baeeb904adc11c9f5dd37ddc06d216b1ad5217525a4de6c975128c07ebf69d11e32e20c9698c9da49c9b8fb5bc8
+  metadata.gz: cf7787a91d5395c55f3b86afc10a59ab765cc90d005a536672d75842d989ace47bb840f35bf783ba6765f00d71e3111f4fd85dab554a3194b00a7a031ddd8953
+  data.tar.gz: 004b1e4061a164048d880c73918a9292f43588c1e48656c667ae68878faade0114d588b69a033816b676dbfca704a947edcd03c3b175405a6bc526933a75ae2e

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -9,6 +9,9 @@
     }
 
     &.is_touch_active {
+      user-select: none;
+      -webkit-user-select: none;
+
       .pb_draggable_handle,
       .card_draggable_handle {
         color: $text_lt_default;

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -9,7 +9,7 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import { DraggableContext } from "../context";
 import { noop } from '../../utilities/object'
-import { bindTouchDrag, isTouchDragDevice } from "../utilities/touchDrag";
+import { bindMousePointerDrag, bindTouchDrag, isTouchDragDevice } from "../utilities/touchDrag";
 
 type DraggableItemProps = {
   aria?: { [key: string]: string };
@@ -27,6 +27,10 @@ type DraggableItemProps = {
   onDragStart?: () => void,
   onDrop?: () => void,
   dragId?: string;
+  /** Whole-item pointer drag (e.g. Typeahead pills without a grip). Disables HTML5 drag. */
+  pointerDrag?: boolean;
+  /** Handle-only pointer drag (e.g. Typeahead pills with a grip). Disables HTML5 drag. */
+  handlePointerDrag?: boolean;
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
@@ -48,6 +52,8 @@ const DraggableItem = (props: DraggableItemProps) => {
     onDragOver = noop,
     onDragStart = noop,
     onDrop = noop,
+    pointerDrag = false,
+    handlePointerDrag = false,
   } = props;
 
   const {
@@ -59,11 +65,11 @@ const DraggableItem = (props: DraggableItemProps) => {
     handleDragOver,
     dropZone = 'ghost',
     dropZoneColor = 'neutral',
-    direction = 'horizontal'
   } = DraggableContext();
 
   const itemRef = React.useRef<HTMLElement>(null);
   const [useTouchDrag, setUseTouchDrag] = React.useState(false);
+  const [usePointerMouseDrag, setUsePointerMouseDrag] = React.useState(false);
   const handlersRef = React.useRef({
     handleDragStart,
     handleDragEnter,
@@ -90,9 +96,36 @@ const DraggableItem = (props: DraggableItemProps) => {
     onDragEnd,
   };
 
-  React.useEffect(() => {
-    setUseTouchDrag(isTouchDragDevice());
-  }, []);
+  const dragHandlers = React.useMemo(() => ({
+    onDragStart: (id: string, itemContainer?: string) => {
+      handlersRef.current.handleDragStart(id, itemContainer);
+      handlersRef.current.onDragStart();
+    },
+    onDragEnter: (targetDragId: string, targetContainer?: string) => {
+      handlersRef.current.handleDragEnter(targetDragId, targetContainer);
+      handlersRef.current.onDragEnter();
+    },
+    onDragOver: (event: Event, targetContainer?: string) => {
+      handlersRef.current.handleDragOver(event, targetContainer);
+      handlersRef.current.onDragOver();
+    },
+    onDrop: (dropContainer?: string) => {
+      handlersRef.current.handleDrop(dropContainer);
+      handlersRef.current.onDrop();
+    },
+    onDragEnd: () => {
+      handlersRef.current.handleDragEnd();
+      handlersRef.current.onDragEnd();
+    },
+  }), []);
+
+  React.useLayoutEffect(() => {
+    const touchMode = isTouchDragDevice();
+
+    setUseTouchDrag(touchMode);
+    // Pointer drag is opt-in only — regular Draggable items keep HTML5 drag on the whole item.
+    setUsePointerMouseDrag(!touchMode && (pointerDrag || handlePointerDrag));
+  }, [dragId, container, children, pointerDrag, handlePointerDrag]);
 
   React.useEffect(() => {
     if (!useTouchDrag || !itemRef.current || !dragId) return;
@@ -101,30 +134,21 @@ const DraggableItem = (props: DraggableItemProps) => {
       dragId,
       container,
       itemElement: itemRef.current,
-      handlers: {
-        onDragStart: (id, itemContainer) => {
-          handlersRef.current.handleDragStart(id, itemContainer);
-          handlersRef.current.onDragStart();
-        },
-        onDragEnter: (targetDragId, targetContainer) => {
-          handlersRef.current.handleDragEnter(targetDragId, targetContainer);
-          handlersRef.current.onDragEnter();
-        },
-        onDragOver: (event, targetContainer) => {
-          handlersRef.current.handleDragOver(event, targetContainer);
-          handlersRef.current.onDragOver();
-        },
-        onDrop: (dropContainer) => {
-          handlersRef.current.handleDrop(dropContainer);
-          handlersRef.current.onDrop();
-        },
-        onDragEnd: () => {
-          handlersRef.current.handleDragEnd();
-          handlersRef.current.onDragEnd();
-        },
-      },
+      handlers: dragHandlers,
+    });
+  }, [useTouchDrag, dragId, container, dragHandlers]);
+
+  React.useEffect(() => {
+    if (!usePointerMouseDrag || !itemRef.current || !dragId) return;
+
+    return bindMousePointerDrag({
+      dragId,
+      container,
+      itemElement: itemRef.current,
+      handlers: dragHandlers,
+      allowWholeItem: pointerDrag,
     });
-  }, [useTouchDrag, dragId, container]);
+  }, [usePointerMouseDrag, dragId, container, dragHandlers, pointerDrag]);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -188,7 +212,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         {...htmlProps}
         className={classes}
         data-pb-drag-id={dragId}
-        draggable={!useTouchDrag}
+        draggable={!useTouchDrag && !usePointerMouseDrag}
         id={id}
         key={dragId}
         onDrag={onDrag}

data/app/pb_kits/playbook/pb_draggable/touchDrag.test.js

@@ -35,4 +35,50 @@ describe("touchDrag utilities", () => {
     const item = document.querySelector(".pb_draggable_item");
     expect(getContainerFromElement(item)).toBe("To Do");
   });
+
+  test("resolvePointerDragTarget uses sibling slots when pointer stays on dragged pill", () => {
+    document.body.innerHTML = `
+      <div class="pb_draggable_container" data-pb-drag-container="typeahead-pills">
+        <div class="pb_draggable_item" data-pb-drag-id="b"></div>
+        <div class="pb_draggable_item" data-pb-drag-id="c"></div>
+        <div class="pb_draggable_item" data-pb-drag-id="a"></div>
+      </div>
+    `;
+
+    const rects = {
+      b: { left: 0, width: 100 },
+      c: { left: 100, width: 100 },
+      a: { left: 200, width: 100 },
+    };
+
+    document.querySelectorAll(".pb_draggable_item").forEach((item) => {
+      const id = item.getAttribute("data-pb-drag-id");
+      item.getBoundingClientRect = () => ({
+        left: rects[id].left,
+        width: rects[id].width,
+        right: rects[id].left + rects[id].width,
+        top: 0,
+        bottom: 20,
+        height: 20,
+        x: rects[id].left,
+        y: 0,
+        toJSON: () => ({}),
+      });
+    });
+
+    const { resolvePointerDragTarget } = require("./utilities/touchDrag");
+
+    document.elementFromPoint = () => document.querySelector('[data-pb-drag-id="a"]');
+    document.elementsFromPoint = () => [document.querySelector('[data-pb-drag-id="a"]')];
+
+    expect(resolvePointerDragTarget(250, 10, "a")).toEqual({
+      targetDragId: null,
+      targetContainer: "typeahead-pills",
+    });
+
+    expect(resolvePointerDragTarget(120, 10, "a")).toEqual({
+      targetDragId: "c",
+      targetContainer: "typeahead-pills",
+    });
+  });
 });

data/app/pb_kits/playbook/pb_draggable/utilities/touchDrag.ts

@@ -5,12 +5,14 @@ const DRAG_THRESHOLD_PX = 5;
 export const isTouchDragDevice = (): boolean => {
   if (typeof window === 'undefined') return false;
 
-  const hasTouch = 'ontouchstart' in window;
+  // Only treat true touch-primary devices as touch-drag targets.
+  // `ontouchstart` alone is true on many desktops (e.g. macOS trackpads) and
+  // must not disable HTML5 mouse dragging.
   const hasCoarsePointer =
     typeof window.matchMedia === 'function' &&
     window.matchMedia('(hover: none) and (pointer: coarse)').matches;
 
-  return hasTouch || hasCoarsePointer;
+  return hasCoarsePointer;
 };
 
 export const getDragIdFromElement = (element: Element | null): string | null => {
@@ -27,6 +29,99 @@ export const getContainerFromElement = (element: Element | null): string | undef
   return container.getAttribute('data-pb-drag-container') || undefined;
 };
 
+type SortedDragItem = {
+  id: string;
+  rect: DOMRect;
+};
+
+const getSortedDragItems = (containerElement: Element): SortedDragItem[] => (
+  Array.from(containerElement.querySelectorAll('.pb_draggable_item[data-pb-drag-id]'))
+    .map((element) => ({
+      id: element.getAttribute('data-pb-drag-id') as string,
+      rect: element.getBoundingClientRect(),
+    }))
+    .sort((a, b) => a.rect.left - b.rect.left)
+);
+
+const getDragIdFromElementsAtPoint = (
+  clientX: number,
+  clientY: number,
+  dragId: string,
+): string | null => {
+  if (typeof document.elementsFromPoint !== 'function') return null;
+
+  return document.elementsFromPoint(clientX, clientY)
+    .map((element) => getDragIdFromElement(element))
+    .find((id) => id && id !== dragId) ?? null;
+};
+
+// When the pointer stays on the dragged item, use sibling midpoints (not the
+// dragged pill's own rect) to decide which slot the cursor is in.
+const getTargetWhenPointerOnDraggedItem = (
+  containerElement: Element,
+  clientX: number,
+  dragId: string,
+): string | null => {
+  const items = getSortedDragItems(containerElement);
+  const currentIndex = items.findIndex((item) => item.id === dragId);
+  if (currentIndex === -1) return null;
+
+  const others = items.filter((item) => item.id !== dragId);
+  if (!others.length) return null;
+
+  let slot = 0;
+  others.forEach((item, index) => {
+    const midpoint = item.rect.left + item.rect.width / 2;
+    if (clientX > midpoint) {
+      slot = index + 1;
+    }
+  });
+
+  const desiredIndex = Math.min(slot, items.length - 1);
+  if (desiredIndex === currentIndex) return null;
+
+  const targetItem = items[desiredIndex];
+  if (!targetItem || targetItem.id === dragId) return null;
+
+  return targetItem.id;
+};
+
+export const resolvePointerDragTarget = (
+  clientX: number,
+  clientY: number,
+  dragId: string,
+): { targetDragId: string | null; targetContainer: string | undefined } => {
+  const elementBelow = typeof document.elementFromPoint === 'function'
+    ? document.elementFromPoint(clientX, clientY)
+    : null;
+  const hitId = getDragIdFromElement(elementBelow);
+
+  if (hitId && hitId !== dragId) {
+    return {
+      targetDragId: hitId,
+      targetContainer: getContainerFromElement(elementBelow),
+    };
+  }
+
+  const stackId = getDragIdFromElementsAtPoint(clientX, clientY, dragId);
+  if (stackId) {
+    return {
+      targetDragId: stackId,
+      targetContainer: getContainerFromElement(elementBelow),
+    };
+  }
+
+  const containerElement = elementBelow?.closest('.pb_draggable_container');
+  if (!containerElement) {
+    return { targetDragId: null, targetContainer: undefined };
+  }
+
+  return {
+    targetDragId: getTargetWhenPointerOnDraggedItem(containerElement, clientX, dragId),
+    targetContainer: getContainerFromElement(containerElement),
+  };
+};
+
 type TouchDragHandlers = {
   onDragStart: (dragId: string, container?: string) => void;
   onDragEnter: (targetDragId: string, container?: string) => void;
@@ -42,7 +137,7 @@ type TouchDragOptions = {
   handlers: TouchDragHandlers;
 };
 
-type TouchDragState = {
+type DragPointerState = {
   active: boolean;
   dragging: boolean;
   startX: number;
@@ -55,18 +150,85 @@ const createPreventableEvent = (): Event => ({
   preventDefault: () => undefined,
 } as Event);
 
+const runDragPointerMove = (
+  state: DragPointerState,
+  clientX: number,
+  clientY: number,
+  dragId: string,
+  container: string | undefined,
+  handlers: TouchDragHandlers,
+) => {
+  if (!state.dragging) {
+    const deltaX = clientX - state.startX;
+    const deltaY = clientY - state.startY;
+
+    if (Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD_PX) return false;
+
+    state.dragging = true;
+    handlers.onDragStart(dragId, container);
+  }
+
+  const { targetDragId, targetContainer } = resolvePointerDragTarget(clientX, clientY, dragId);
+
+  if (!targetDragId || targetDragId === dragId) {
+    state.lastTargetDragId = null;
+  } else if (targetDragId !== state.lastTargetDragId) {
+    state.lastTargetDragId = targetDragId;
+    handlers.onDragEnter(targetDragId, targetContainer ?? container);
+  }
+
+  if (targetContainer && targetContainer !== state.lastContainer) {
+    state.lastContainer = targetContainer;
+    handlers.onDragOver(createPreventableEvent(), targetContainer);
+  } else if (targetContainer) {
+    handlers.onDragOver(createPreventableEvent(), targetContainer);
+  }
+
+  return true;
+};
+
+const finishDragPointer = (
+  state: DragPointerState,
+  clientX: number | null,
+  clientY: number | null,
+  container: string | undefined,
+  handlers: TouchDragHandlers,
+  itemElement: HTMLElement,
+) => {
+  if (!state.active) return;
+
+  if (state.dragging && clientX !== null && clientY !== null) {
+    const elementBelow = document.elementFromPoint(clientX, clientY);
+    const dropContainer = getContainerFromElement(elementBelow) ?? container;
+
+    if (dropContainer) {
+      handlers.onDrop(dropContainer);
+    }
+
+    handlers.onDragEnd();
+  }
+
+  state.active = false;
+  state.dragging = false;
+  state.lastTargetDragId = null;
+  state.lastContainer = undefined;
+  itemElement.classList.remove('is_touch_active');
+};
+
 export const bindTouchDrag = ({
   dragId,
   container,
   itemElement,
   handlers,
 }: TouchDragOptions): (() => void) => {
-  if (!isTouchDragDevice()) return () => undefined;
+  if (!isTouchDragDevice()) {
+    return () => undefined;
+  }
 
   const handle = itemElement.querySelector(DRAG_HANDLE_SELECTOR) as HTMLElement | null;
   const dragTarget = handle || itemElement;
 
-  const state: TouchDragState = {
+  const state: DragPointerState = {
     active: false,
     dragging: false,
     startX: 0,
@@ -75,16 +237,10 @@ export const bindTouchDrag = ({
     lastContainer: undefined,
   };
 
-  const resetState = () => {
-    state.active = false;
-    state.dragging = false;
-    state.lastTargetDragId = null;
-    state.lastContainer = undefined;
-    itemElement.classList.remove('is_touch_active');
-  };
-
   const handleTouchStart = (event: TouchEvent) => {
-    if (handle && !handle.contains(event.target as Node)) return;
+    if (handle && !handle.contains(event.target as Node)) {
+      return;
+    }
 
     const touch = event.touches[0];
     if (!touch) return;
@@ -101,50 +257,20 @@ export const bindTouchDrag = ({
     const touch = event.touches[0];
     if (!touch) return;
 
-    if (!state.dragging) {
-      const deltaX = touch.clientX - state.startX;
-      const deltaY = touch.clientY - state.startY;
-
-      if (Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD_PX) return;
-
-      state.dragging = true;
-      handlers.onDragStart(dragId, container);
-    }
-
-    event.preventDefault();
-
-    const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-    const targetDragId = getDragIdFromElement(elementBelow);
-    const targetContainer = getContainerFromElement(elementBelow);
-
-    if (targetDragId && targetDragId !== dragId && targetDragId !== state.lastTargetDragId) {
-      state.lastTargetDragId = targetDragId;
-      handlers.onDragEnter(targetDragId, targetContainer ?? container);
-    }
-
-    if (targetContainer && targetContainer !== state.lastContainer) {
-      state.lastContainer = targetContainer;
-      handlers.onDragOver(createPreventableEvent(), targetContainer);
-    } else if (targetContainer) {
-      handlers.onDragOver(createPreventableEvent(), targetContainer);
+    if (runDragPointerMove(state, touch.clientX, touch.clientY, dragId, container, handlers)) {
+      event.preventDefault();
     }
   };
 
   const finishDrag = (touch: Touch | null) => {
-    if (!state.active) return;
-
-    if (state.dragging && touch) {
-      const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-      const dropContainer = getContainerFromElement(elementBelow) ?? container;
-
-      if (dropContainer) {
-        handlers.onDrop(dropContainer);
-      }
-
-      handlers.onDragEnd();
-    }
-
-    resetState();
+    finishDragPointer(
+      state,
+      touch?.clientX ?? null,
+      touch?.clientY ?? null,
+      container,
+      handlers,
+      itemElement,
+    );
   };
 
   const handleTouchEnd = (event: TouchEvent) => {
@@ -171,3 +297,95 @@ export const bindTouchDrag = ({
     dragTarget.removeEventListener('touchcancel', handleTouchCancel);
   };
 };
+
+const DRAG_INTERACTION_EXCLUDE_SELECTOR = '.pb_form_pill_close';
+
+const isHandleEventTarget = (target: EventTarget | null): boolean => {
+  return Boolean((target as Element | null)?.closest(DRAG_HANDLE_SELECTOR));
+};
+
+const isExcludedDragTarget = (target: EventTarget | null): boolean => {
+  return Boolean((target as Element | null)?.closest(DRAG_INTERACTION_EXCLUDE_SELECTOR));
+};
+
+type MousePointerDragOptions = TouchDragOptions & {
+  allowWholeItem?: boolean;
+};
+
+export const bindMousePointerDrag = ({
+  dragId,
+  container,
+  itemElement,
+  handlers,
+  allowWholeItem = false,
+}: MousePointerDragOptions): (() => void) => {
+  const hasHandle = Boolean(itemElement.querySelector(DRAG_HANDLE_SELECTOR));
+
+  if (!hasHandle && !allowWholeItem) {
+    return () => undefined;
+  }
+
+  const state: DragPointerState = {
+    active: false,
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    lastTargetDragId: null,
+    lastContainer: undefined,
+  };
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!state.active) return;
+
+    if (runDragPointerMove(state, event.clientX, event.clientY, dragId, container, handlers)) {
+      event.preventDefault();
+    }
+  };
+
+  const handleMouseUp = (event: MouseEvent) => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    finishDragPointer(
+      state,
+      event.clientX,
+      event.clientY,
+      container,
+      handlers,
+      itemElement,
+    );
+  };
+
+  const handleMouseDown = (event: MouseEvent) => {
+    if (event.button !== 0) return;
+    if (isExcludedDragTarget(event.target)) return;
+
+    if (hasHandle) {
+      if (!isHandleEventTarget(event.target)) return;
+    } else if (!itemElement.contains(event.target as Node)) {
+      return;
+    }
+
+    // Pointer drag only — HTML5 drag is disabled on these items. preventDefault stops text selection.
+    event.preventDefault();
+    event.stopPropagation();
+
+    state.active = true;
+    state.startX = event.clientX;
+    state.startY = event.clientY;
+    itemElement.classList.add('is_touch_active');
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  // Delegate on the stable draggable item element so re-rendered handles stay wired
+  itemElement.addEventListener('mousedown', handleMouseDown);
+
+  return () => {
+    itemElement.removeEventListener('mousedown', handleMouseDown);
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+};
+
+export const bindMouseHandleDrag = bindMousePointerDrag;

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -7,7 +7,7 @@ import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Icon from "../pb_icon/_icon";
 import Image from "../pb_image/_image";
 import Collapsible from "../pb_collapsible/_collapsible";
-import { NavChildProps } from "./navTypes";
+import { NavChildProps, SpacingObject } from "./navTypes";
 import { Spacing } from "../types";
 
 type NavItemProps = {
@@ -35,7 +35,7 @@ type NavItemProps = {
   collapsibleTrail?: boolean;
   collapsed?: boolean;
   orientation?: "vertical" | "horizontal";
-  variant?: "normal" | "subtle";
+  variant?: "normal" | "subtle" | "bold";
   margin?: Spacing;
   marginBottom?: Spacing;
   marginTop?: Spacing;
@@ -44,6 +44,7 @@ type NavItemProps = {
   marginX?: Spacing;
   marginY?: Spacing;
   disabled?: boolean;
+  itemSpacing?: SpacingObject;
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -22,7 +22,7 @@ type NavProps = {
   orientation?: "vertical" | "horizontal",
   link?: string,
   title?: string,
-  variant?: "normal" | "subtle",
+  variant?: "normal" | "subtle" | "bold",
   itemSpacing?: SpacingObject
 } & GlobalProps