playbook_ui 16.9.0.pre.alpha.touchdragmulticontainers17268 → 16.9.0.pre.alpha.touchdragmulticontainers17271

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89c52f53eea784d92355431d75ff12e5b12309cc1daa70b45c9811369a9d51d9
-  data.tar.gz: 8424c9aeabd6007e2ba9151207c40f798bad2c5243ceb597aa43b176859b5326
+  metadata.gz: 68c5efbb867c4afb1698ad5d63b0280a6a93aa798f60f2e974ac82beab57232e
+  data.tar.gz: 63e67402a6e5a31443575dbf19f2710f4c4ff397013d82cbc9515cb8193dcec8
 SHA512:
-  metadata.gz: 2bd62a01ea9037bd4b5b86e6d70d947b08ddcc445f534db3edffabde5ab29c3d527dc779ba6b41552cd875078bbfb1d7287a1f1badbc9e0aa27d537cc8079aa4
-  data.tar.gz: bd30042e81eaa8205affab38ab44be73865af3adaec7d060be15a7aabb3058fe55d5a63a04fd3258a6be63d804da9c2eacdb02a540b62f0607e965f89ea0c529
+  metadata.gz: eeed97fa95a5195c7c9c15a500508e67fd5010f1d8a753df55cc6b0bee173a83cd7b202eb7d110cba69b2d7500d7c3df8ab552fa0482e3da779e969f09ae6289
+  data.tar.gz: 85126a6b3965ec648c12b6557b7ea1b562fc797d52b7191d6305d3f4eb1a4faba78da313da747719d9328115d7d560ef1aec736db2441b8084b1c1eb6cf61838

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -606,14 +606,6 @@ export const DraggableProvider = ({
   }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
 
   return (
-    <DragContext.Provider value={contextValue}>
-      <div
-          data-pb-draggable-root
-          style={{ display: "contents" }}
-      >
-        {children}
-      </div>
-    </DragContext.Provider>
+    <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
 };
-

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md

@@ -1,3 +1 @@
-The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure — **one** `DraggableProvider` with multiple `Draggable.Container` components so items can move between columns.
-
-For lists that should stay separate, see [Independent Draggable Containers](#draggable_independent_containers).
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -4,7 +4,6 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_independent_containers: Independent Draggable Containers
   - draggable_with_table: Draggable with Table
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -1,6 +1,5 @@
 export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
-export { default as DraggableIndependentContainers } from './_draggable_independent_containers.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

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

@@ -1,9 +1,7 @@
 import {
   DRAG_HANDLE_SELECTOR,
-  DRAGGABLE_ROOT_SELECTOR,
   getContainerFromElement,
   getDragIdFromElement,
-  getDraggableRootFromElement,
 } from "./utilities/touchDrag";
 
 describe("touchDrag utilities", () => {
@@ -37,29 +35,4 @@ describe("touchDrag utilities", () => {
     const item = document.querySelector(".pb_draggable_item");
     expect(getContainerFromElement(item)).toBe("To Do");
   });
-
-  test("getDraggableRootFromElement finds nearest draggable root", () => {
-    document.body.innerHTML = `
-      <div data-pb-draggable-root>
-        <div class="pb_draggable_container" data-pb-drag-container="To Do">
-          <div class="pb_draggable_item" data-pb-drag-id="1"></div>
-        </div>
-      </div>
-    `;
-
-    const item = document.querySelector(".pb_draggable_item");
-    expect(getDraggableRootFromElement(item)).toHaveAttribute("data-pb-draggable-root");
-  });
-
-  test("DRAGGABLE_ROOT_SELECTOR matches rails and react draggable roots", () => {
-    document.body.innerHTML = `
-      <div data-pb-draggable>
-        <div class="pb_draggable">
-          <div data-pb-draggable-root></div>
-        </div>
-      </div>
-    `;
-
-    expect(document.querySelector(DRAGGABLE_ROOT_SELECTOR)).toHaveAttribute("data-pb-draggable");
-  });
 });

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

@@ -1,6 +1,4 @@
 export const DRAG_HANDLE_SELECTOR = '.pb_draggable_handle, .card_draggable_handle';
-export const DRAGGABLE_ROOT_SELECTOR =
-  '[data-pb-draggable], .pb_draggable, [data-pb-draggable-root]';
 
 const DRAG_THRESHOLD_PX = 5;
 
@@ -29,14 +27,6 @@ export const getContainerFromElement = (element: Element | null): string | undef
   return container.getAttribute('data-pb-drag-container') || undefined;
 };
 
-export const getDraggableRootFromElement = (
-  element: Element | null
-): HTMLElement | null => {
-  if (!element) return null;
-
-  return element.closest(DRAGGABLE_ROOT_SELECTOR) as HTMLElement | null;
-};
-
 type TouchDragHandlers = {
   onDragStart: (dragId: string, container?: string) => void;
   onDragEnter: (targetDragId: string, container?: string) => void;
@@ -49,7 +39,6 @@ type TouchDragOptions = {
   dragId: string;
   container?: string;
   itemElement: HTMLElement;
-  draggableRoot?: HTMLElement | null;
   handlers: TouchDragHandlers;
 };
 
@@ -59,6 +48,7 @@ type TouchDragState = {
   startX: number;
   startY: number;
   lastTargetDragId: string | null;
+  lastContainer: string | undefined;
 };
 
 const createPreventableEvent = (): Event => ({
@@ -69,16 +59,10 @@ export const bindTouchDrag = ({
   dragId,
   container,
   itemElement,
-  draggableRoot: draggableRootOption,
   handlers,
 }: TouchDragOptions): (() => void) => {
   if (!isTouchDragDevice()) return () => undefined;
 
-  const draggableRoot =
-    draggableRootOption ?? getDraggableRootFromElement(itemElement);
-  const isWithinDraggableRoot = (element: Element | null) =>
-    !draggableRoot || (!!element && draggableRoot.contains(element));
-
   const handle = itemElement.querySelector(DRAG_HANDLE_SELECTOR) as HTMLElement | null;
   const dragTarget = handle || itemElement;
 
@@ -88,12 +72,14 @@ export const bindTouchDrag = ({
     startX: 0,
     startY: 0,
     lastTargetDragId: null,
+    lastContainer: undefined,
   };
 
   const resetState = () => {
     state.active = false;
     state.dragging = false;
     state.lastTargetDragId = null;
+    state.lastContainer = undefined;
     itemElement.classList.remove('is_touch_active');
   };
 
@@ -128,27 +114,19 @@ export const bindTouchDrag = ({
     event.preventDefault();
 
     const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-    if (!isWithinDraggableRoot(elementBelow)) return;
-
     const targetDragId = getDragIdFromElement(elementBelow);
     const targetContainer = getContainerFromElement(elementBelow);
-    const targetItem = elementBelow?.closest('.pb_draggable_item');
-
-    if (
-      targetDragId &&
-      targetDragId !== dragId &&
-      targetDragId !== state.lastTargetDragId &&
-      isWithinDraggableRoot(targetItem)
-    ) {
+
+    if (targetDragId && targetDragId !== dragId && targetDragId !== state.lastTargetDragId) {
       state.lastTargetDragId = targetDragId;
       handlers.onDragEnter(targetDragId, targetContainer ?? container);
     }
 
-    if (targetContainer) {
-      const containerElement = elementBelow?.closest('.pb_draggable_container');
-      if (isWithinDraggableRoot(containerElement)) {
-        handlers.onDragOver(createPreventableEvent(), targetContainer);
-      }
+    if (targetContainer && targetContainer !== state.lastContainer) {
+      state.lastContainer = targetContainer;
+      handlers.onDragOver(createPreventableEvent(), targetContainer);
+    } else if (targetContainer) {
+      handlers.onDragOver(createPreventableEvent(), targetContainer);
     }
   };
 
@@ -156,11 +134,8 @@ export const bindTouchDrag = ({
     if (!state.active) return;
 
     if (state.dragging && touch) {
-      const sourceContainer = getContainerFromElement(itemElement) ?? container;
       const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-      const dropContainer = isWithinDraggableRoot(elementBelow)
-        ? (getContainerFromElement(elementBelow) ?? container)
-        : sourceContainer;
+      const dropContainer = getContainerFromElement(elementBelow) ?? container;
 
       if (dropContainer) {
         handlers.onDrop(dropContainer);