@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/sorting/SharedDragProvider.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 import {
   Active,
+  ClientRect,
   closestCenter,
   CollisionDetection,
   DndContext,
@@ -13,9 +16,14 @@ import {
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
-import { Point, rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
+import {
+  Insets,
+  Point,
+  rectContainsPoint,
+  unionRects,
+} from "@noya-app/noya-geometry";
 import { windowsOf } from "@noya-app/noya-utils";
-import { useStableCallback } from "@noya-app/react-utils";
+import { useIsomorphicLayoutEffect } from "@noya-app/react-utils";
 import * as React from "react";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
@@ -30,6 +38,7 @@ import {
   useDragRegistrationManager,
 } from "./DragRegistration";
 import {
+  AcceptsDrop,
   DragItem,
   DragState,
   MoveDragItemHandler,
@@ -37,19 +46,23 @@ import {
   RelativeDropPosition,
 } from "./sorting";
 
-type SharedDragProviderProps = {
+export type SharedDragProviderProps = {
   children: React.ReactNode;
+  acceptsDrop?: AcceptsDrop;
   onMoveItem?: MoveDragItemHandler;
   sharedDragProps?: SharedDragProps;
+  itemHitSlop?: Insets;
 };
 
 export function SharedDragProvider({
   children,
+  acceptsDrop,
   onMoveItem,
   sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext,
   },
+  itemHitSlop,
 }: SharedDragProviderProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -66,6 +79,16 @@ export function SharedDragProvider({
     indicator: null,
   });
 
+  const stableOnMoveItem = React.useRef(onMoveItem);
+  useIsomorphicLayoutEffect(() => {
+    stableOnMoveItem.current = onMoveItem;
+  }, [onMoveItem]);
+
+  const stableAcceptsDrop = React.useRef(acceptsDrop);
+  useIsomorphicLayoutEffect(() => {
+    stableAcceptsDrop.current = acceptsDrop;
+  }, [acceptsDrop]);
+
   // console.log("dragState", dragState.target);
 
   const { registerList, unregisterList, registeredLists } =
@@ -117,6 +140,7 @@ export function SharedDragProvider({
         active,
         source: dragState.source,
         registeredLists,
+        acceptsDrop: stableAcceptsDrop.current,
       });
 
       setDragState({
@@ -128,8 +152,6 @@ export function SharedDragProvider({
     [registeredLists, dragState.source]
   );
 
-  const stableOnMoveItem = useStableCallback(onMoveItem);
-
   const handleDragEnd = React.useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
@@ -146,6 +168,7 @@ export function SharedDragProvider({
         active,
         source: dragState.source,
         registeredLists,
+        acceptsDrop: stableAcceptsDrop.current,
       });
 
       setDragState({
@@ -170,14 +193,16 @@ export function SharedDragProvider({
         targetListId: dropTarget.target.listId,
       };
 
-      // Both lists have the opportunity to handle the move
-      sourceList.onMoveItem(parameters);
+      if (stableOnMoveItem.current) {
+        stableOnMoveItem.current(parameters);
+      } else {
+        // Both lists have the opportunity to handle the move
+        sourceList.onMoveItem(parameters);
 
-      if (dropTarget.target.listId !== dropTarget.source.listId) {
-        targetList.onMoveItem(parameters);
+        if (dropTarget.target.listId !== dropTarget.source.listId) {
+          targetList.onMoveItem(parameters);
+        }
       }
-
-      stableOnMoveItem?.(parameters);
     },
     [registeredLists, dragState.source, stableOnMoveItem]
   );
@@ -199,8 +224,8 @@ export function SharedDragProvider({
   );
 
   const collisionDetection = useMemo(() => {
-    return getItemFirstCollisionDetection(registeredLists);
-  }, [registeredLists]);
+    return getItemFirstCollisionDetection(registeredLists, itemHitSlop);
+  }, [registeredLists, itemHitSlop]);
 
   return (
     <AnyDragContext.Provider value={true}>
@@ -262,9 +287,18 @@ export function withDragProvider<T extends object>(
 
 // Custom collision detection that prioritizes items over containers
 export const getItemFirstCollisionDetection =
-  (registeredLists: Map<string, RegisteredList>): CollisionDetection =>
+  (
+    registeredLists: Map<string, RegisteredList>,
+    itemHitSlop: Insets | undefined
+  ): CollisionDetection =>
   (parameters) => {
-    const pointerCollisions = pointerWithin(parameters);
+    const parametersWithHitSlop = getCollisionParametersWithHitSlop(
+      registeredLists,
+      parameters,
+      itemHitSlop
+    );
+
+    const pointerCollisions = pointerWithin(parametersWithHitSlop);
 
     if (pointerCollisions.length > 0) {
       const itemCollisions = pointerCollisions.filter((collision) => {
@@ -283,11 +317,11 @@ export const getItemFirstCollisionDetection =
     }
 
     const listCollision = pointerCollisions.at(0);
-    const nearestCenters = closestCenter(parameters);
+    const nearestCenters = closestCenter(parametersWithHitSlop);
 
     // Handle a pointer between items by checking if the pointer is within
     // a window of two items.
-    if (parameters.pointerCoordinates && listCollision) {
+    if (parametersWithHitSlop.pointerCoordinates && listCollision) {
       const list = registeredLists.get(listCollision.id as string);
 
       if (list) {
@@ -295,7 +329,7 @@ export const getItemFirstCollisionDetection =
 
         for (const pair of pairs) {
           const clientRects = pair.map(
-            (key) => parameters.droppableRects.get(key)!
+            (key) => parametersWithHitSlop.droppableRects.get(key)!
           );
 
           const merged = unionRects(
@@ -307,7 +341,9 @@ export const getItemFirstCollisionDetection =
             }))
           );
 
-          if (rectContainsPoint(merged, parameters.pointerCoordinates)) {
+          if (
+            rectContainsPoint(merged, parametersWithHitSlop.pointerCoordinates)
+          ) {
             return nearestCenters.filter((center) =>
               pair.some((id) => id === center.id)
             );
@@ -320,6 +356,69 @@ export const getItemFirstCollisionDetection =
     return pointerCollisions;
   };
 
+type CollisionDetectionParameters = Parameters<CollisionDetection>[0];
+
+function getCollisionParametersWithHitSlop(
+  registeredLists: Map<string, RegisteredList>,
+  parameters: CollisionDetectionParameters,
+  defaultHitSlop: Insets | undefined
+): CollisionDetectionParameters {
+  const adjustedDroppableRects = createDroppableRectsWithHitSlop(
+    registeredLists,
+    parameters.droppableRects,
+    defaultHitSlop
+  );
+
+  if (!adjustedDroppableRects) {
+    return parameters;
+  }
+
+  return {
+    ...parameters,
+    droppableRects: adjustedDroppableRects,
+  };
+}
+
+function createDroppableRectsWithHitSlop(
+  registeredLists: Map<string, RegisteredList>,
+  droppableRects: CollisionDetectionParameters["droppableRects"],
+  defaultHitSlop: Insets | undefined
+): Map<string | number, ClientRect> | undefined {
+  let adjustedRects: Map<string | number, ClientRect> | undefined;
+
+  for (const [, list] of registeredLists) {
+    const hitSlop = list.itemHitSlop ?? defaultHitSlop;
+
+    if (!hitSlop) continue;
+
+    for (const key of list.keys) {
+      const rect = droppableRects.get(key);
+
+      if (!rect) continue;
+
+      if (!adjustedRects) {
+        adjustedRects = new Map(droppableRects);
+      }
+
+      adjustedRects.set(key, expandRectByInsets(rect, hitSlop));
+    }
+  }
+
+  return adjustedRects;
+}
+
+function expandRectByInsets(rect: ClientRect, hitSlop: Insets): ClientRect {
+  return {
+    ...rect,
+    left: rect.left - hitSlop.left,
+    right: rect.right + hitSlop.right,
+    top: rect.top - hitSlop.top,
+    bottom: rect.bottom + hitSlop.bottom,
+    width: rect.width + hitSlop.left + hitSlop.right,
+    height: rect.height + hitSlop.top + hitSlop.bottom,
+  };
+}
+
 function findDropTarget({
   activationPoint,
   delta,
@@ -327,6 +426,7 @@ function findDropTarget({
   active,
   source,
   registeredLists,
+  acceptsDrop: acceptsDropProp,
 }: {
   activationPoint: Point;
   delta: Point;
@@ -334,6 +434,7 @@ function findDropTarget({
   active: Active;
   source: DragItem;
   registeredLists: Map<string, RegisteredList>;
+  acceptsDrop?: AcceptsDrop;
 }):
   | {
       source: DragItem;
@@ -379,9 +480,11 @@ function findDropTarget({
     return;
   }
 
+  const acceptsDrop = acceptsDropProp ?? targetList.acceptsDrop;
+
   // Dropping on the list container itself
   if (over.id === targetList.id) {
-    const canDrop = targetList.acceptsDrop({
+    const canDrop = acceptsDrop({
       sourceIndex: source.index,
       targetIndex: Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
       position: "below",
@@ -408,13 +511,17 @@ function findDropTarget({
   const currentY = eventY + delta.y;
   const absolutePosition = { x: currentX, y: currentY };
 
-  const indicator = targetList.getDropIndicator({
-    absolutePosition,
-    active,
-    over,
-    sourceListId: sourceList.id,
-    targetListId: targetList.id,
-  });
+  const indicator = targetList.getDropIndicator(
+    {
+      absolutePosition,
+      activeIndex: source.index,
+      overIndex: targetIndex,
+      overRect: over.rect,
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    },
+    acceptsDrop
+  );
 
   if (indicator) {
     return {

package/src/components/sorting/Sortable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { UniqueIdentifier, useDroppable } from "@dnd-kit/core";
 import {
   horizontalListSortingStrategy,
@@ -5,6 +7,7 @@ import {
   useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
+import { Insets } from "@noya-app/noya-geometry";
 import * as React from "react";
 import {
   ActiveDragContext,
@@ -28,12 +31,21 @@ import {
 
 type UseSortableReturnType = ReturnType<typeof useSortable>;
 
-type ItemChildrenProps<T> = {
-  ref: React.Ref<T>;
-  relativeDropPosition?: RelativeDropPosition;
+export type ItemChildrenProps<T> = {
+  ref: React.RefCallback<T>;
   style?: React.CSSProperties;
+  onPointerDown?: React.PointerEventHandler;
 } & UseSortableReturnType["attributes"];
 
+export type ItemChildrenExtraProps = {
+  isDragging: boolean;
+  isOverlay: boolean;
+  relativeDropPosition: RelativeDropPosition | undefined;
+  setActivatorNodeRef: React.RefCallback<HTMLElement>;
+  setDraggableNodeRef: React.RefCallback<HTMLElement>;
+  setDroppableNodeRef: React.RefCallback<HTMLElement>;
+};
+
 // Context for drop indicators within a sortable list
 interface SortableItemContextProps {
   acceptsDrop: DropValidator;
@@ -74,7 +86,9 @@ function useSortableDropIndicator({
   }
 
   const targetParentIndex =
-    target.index === -1 ? undefined : getDropTargetParentIndex?.(target.index);
+    listId !== target.listId || target.index === -1
+      ? undefined
+      : getDropTargetParentIndex?.(target.index);
 
   const isValidParent =
     targetParentIndex === undefined || targetParentIndex === -1
@@ -113,11 +127,13 @@ interface RootProps {
   children?: React.ReactNode;
   renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: MoveDragItemHandler;
+  onIsDraggingChange?: (isDragging: boolean) => void;
   acceptsFromList?: AcceptsFromList;
   acceptsDrop?: DropValidator;
   getDropTargetParentIndex?: (index: number) => number | undefined;
   sharedDragProps?: SharedDragProps;
-  containerRef?: React.RefObject<HTMLElement>;
+  containerRef?: React.RefObject<HTMLElement | null>;
+  itemHitSlop?: Insets;
 }
 
 function SortableItem<TElement extends HTMLElement>({
@@ -127,14 +143,26 @@ function SortableItem<TElement extends HTMLElement>({
 }: {
   id: UniqueIdentifier;
   disabled?: boolean;
-  children: (props: ItemChildrenProps<TElement>) => React.ReactNode;
+  children: (
+    props: ItemChildrenProps<TElement>,
+    extraProps: Omit<ItemChildrenExtraProps, "isOverlay">
+  ) => React.ReactNode;
 }) {
   const { acceptsDrop, listId, getDropTargetParentIndex } =
     React.useContext(SortableItemContext);
 
   const dragItemKey = createDragItemKey(listId, id);
 
-  const { attributes, listeners, setNodeRef, isDragging, index } = useSortable({
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    index,
+    setActivatorNodeRef,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+  } = useSortable({
     id: dragItemKey,
     disabled,
   });
@@ -152,21 +180,28 @@ function SortableItem<TElement extends HTMLElement>({
     getDropTargetParentIndex,
   });
 
-  return children({
-    ref,
-    ...attributes,
-    ...listeners,
-    relativeDropPosition,
-    style: {
-      opacity: isDragging ? 0.5 : 1,
+  return children(
+    {
+      ref,
+      ...attributes,
+      ...listeners,
+      style: { opacity: isDragging ? 0.5 : 1 },
     },
-  });
+    {
+      isDragging,
+      setActivatorNodeRef,
+      setDraggableNodeRef,
+      setDroppableNodeRef,
+      relativeDropPosition,
+    }
+  );
 }
 
 function SortableRoot_({
   id: idProp,
   keys: keysProp,
   onMoveItem,
+  onIsDraggingChange,
   renderOverlay,
   acceptsFromList,
   acceptsDrop = defaultAcceptsDrop,
@@ -175,6 +210,7 @@ function SortableRoot_({
   getDropTargetParentIndex,
   sharedDragProps,
   containerRef,
+  itemHitSlop,
 }: RootProps) {
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
@@ -202,20 +238,25 @@ function SortableRoot_({
       },
       acceptsFromList: acceptsFromList ?? (() => true),
       acceptsDrop,
-      getDropIndicator: (parameters) => {
-        const { absolutePosition, active, over, sourceListId, targetListId } =
-          parameters;
+      getDropIndicator: (parameters, acceptsDrop) => {
+        const {
+          absolutePosition,
+          activeIndex,
+          overIndex,
+          overRect,
+          sourceListId,
+          targetListId,
+        } = parameters;
 
         const offsetStart =
           axis === "x" ? absolutePosition.x : absolutePosition.y;
-        const elementStart = axis === "x" ? over.rect.left : over.rect.top;
-        const elementSize = axis === "x" ? over.rect.width : over.rect.height;
+        const elementStart = axis === "x" ? overRect.left : overRect.top;
+        const elementSize = axis === "x" ? overRect.width : overRect.height;
 
         const relativeDropPosition = validateDropIndicator({
           acceptsDrop,
-          keys,
-          activeId: active.id,
-          overId: over.id,
+          activeIndex,
+          overIndex,
           offsetStart,
           elementStart,
           elementSize,
@@ -225,6 +266,7 @@ function SortableRoot_({
 
         return relativeDropPosition;
       },
+      itemHitSlop,
     };
 
     registerList(listConfig);
@@ -242,6 +284,7 @@ function SortableRoot_({
     registerList,
     unregisterList,
     keys,
+    itemHitSlop,
   ]);
 
   const contextValue: SortableItemContextProps = React.useMemo(
@@ -256,6 +299,16 @@ function SortableRoot_({
     [keys, acceptsDrop, id, getDropTargetParentIndex, sharedDragProps]
   );
 
+  // Notify drag state changes to consumers if requested
+  const activeDragContext =
+    sharedDragProps?.activeDragContext ?? ActiveDragContext;
+  const dragState = React.useContext(activeDragContext);
+  const isDragging = !!dragState?.source;
+
+  React.useEffect(() => {
+    onIsDraggingChange?.(isDragging);
+  }, [isDragging, onIsDraggingChange]);
+
   // Set the droppable ref after every render.
   // Since we don't render the dom node internally, we aggressively set it
   // after every render to make sure we are using the latest.
@@ -291,7 +344,7 @@ export interface SortableProps<TItem, TElement extends HTMLElement>
   renderItem: (
     item: TItem,
     props: ItemChildrenProps<TElement>,
-    { isOverlay }: { isOverlay: boolean }
+    extraProps: { isOverlay: boolean } & ItemChildrenExtraProps
   ) => React.ReactNode;
 }
 
@@ -321,7 +374,14 @@ const Sortable_ = function Sortable_<TItem, TElement extends HTMLElement>({
           "aria-describedby": "Item being dragged",
           role: "button",
         },
-        { isOverlay: true }
+        {
+          isOverlay: true,
+          setActivatorNodeRef: () => {},
+          setDraggableNodeRef: () => {},
+          setDroppableNodeRef: () => {},
+          relativeDropPosition: undefined,
+          isDragging: true,
+        }
       );
     },
     [renderItem, items]
@@ -335,8 +395,11 @@ const Sortable_ = function Sortable_<TItem, TElement extends HTMLElement>({
     >
       {keys.map((key, index) => (
         <SortableItem<TElement> key={key} id={key}>
-          {(props) => {
-            return renderItem(items[index], props, { isOverlay: false });
+          {(props, extraProps) => {
+            return renderItem(items[index], props, {
+              isOverlay: false,
+              ...extraProps,
+            });
           }}
         </SortableItem>
       ))}

package/src/components/sorting/createSharedDrag.tsx

@@ -4,7 +4,10 @@ import {
   DragRegistrationContextType,
   SharedDragProps,
 } from "./DragRegistration";
-import { SharedDragProvider } from "./SharedDragProvider";
+import {
+  SharedDragProvider,
+  SharedDragProviderProps,
+} from "./SharedDragProvider";
 import { Sortable, SortableProps } from "./Sortable";
 
 export function createSharedDrag(): {
@@ -25,11 +28,9 @@ export function createSharedDrag(): {
     activeDragContext,
   };
 
-  const Provider = ({ children }: { children: React.ReactNode }) => (
-    <SharedDragProvider sharedDragProps={sharedDragProps}>
-      {children}
-    </SharedDragProvider>
-  );
+  const Provider = (
+    props: Omit<SharedDragProviderProps, "sharedDragProps">
+  ) => <SharedDragProvider sharedDragProps={sharedDragProps} {...props} />;
 
   return {
     Provider,

package/src/components/sorting/sorting.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { UniqueIdentifier } from "@dnd-kit/core";
 import * as React from "react";
 
@@ -83,9 +85,8 @@ export const SortableItemContext =
 
 export type ValidateDropIndicatorParams = {
   acceptsDrop: DropValidator; // Function that validates if a drop is allowed
-  keys: UniqueIdentifier[]; // Array of all sortable item IDs
-  activeId: UniqueIdentifier; // ID of item being dragged
-  overId: UniqueIdentifier; // ID of item being dragged over
+  activeIndex: number; // ID of item being dragged
+  overIndex: number; // ID of item being dragged over
   offsetStart: number; // Current drag position (x or y coordinate)
   elementStart: number; // Start position of target element (left or top)
   elementSize: number; // Size of target element (width or height)
@@ -95,18 +96,14 @@ export type ValidateDropIndicatorParams = {
 
 export function validateDropIndicator({
   acceptsDrop,
-  keys,
-  activeId,
-  overId,
+  activeIndex,
+  overIndex,
   offsetStart,
   elementStart,
   elementSize,
   sourceListId,
   targetListId,
 }: ValidateDropIndicatorParams): RelativeDropPosition | undefined {
-  const activeIndex = keys.findIndex((id) => id === activeId); // index of item being dragged
-  const overIndex = keys.findIndex((id) => id === overId); // index of item being dragged over
-
   if (overIndex === -1) return undefined;
   if (activeIndex === -1 && sourceListId === targetListId) return undefined;