@noya-app/noya-designsystem 0.1.55 → 0.1.57

package/src/components/sorting/SharedDragProvider.tsx

@@ -0,0 +1,376 @@
+import {
+  Active,
+  closestCenter,
+  CollisionDetection,
+  DndContext,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverlay,
+  DragStartEvent,
+  Over,
+  PointerSensor,
+  pointerWithin,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { Point } from "@noya-app/noya-geometry";
+import * as React from "react";
+import { useMemo } from "react";
+import { createPortal } from "react-dom";
+import {
+  ActiveDragContext,
+  ActiveDragContextType,
+  AnyDragContext,
+  DragRegistrationContext,
+  DragRegistrationContextType,
+  RegisteredList,
+  SharedDragProps,
+  useDragRegistrationManager,
+} from "./DragRegistration";
+import { DragItem, DragState, RelativeDropPosition } from "./sorting";
+
+type SharedDragProviderProps = {
+  children: React.ReactNode;
+  sharedDragProps?: SharedDragProps;
+};
+
+export function SharedDragProvider({
+  children,
+  sharedDragProps = {
+    dragRegistrationContext: DragRegistrationContext,
+    activeDragContext: ActiveDragContext,
+  },
+}: SharedDragProviderProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 4,
+      },
+    })
+  );
+
+  const mounted = useMounted();
+  const [dragState, setDragState] = React.useState<DragState>({
+    source: null,
+    target: null,
+    indicator: null,
+  });
+
+  const { registerList, unregisterList, registeredLists } =
+    useDragRegistrationManager();
+
+  const activatorEventRef = React.useRef<PointerEvent | null>(null);
+
+  const handleDragStart = React.useCallback(
+    (event: DragStartEvent) => {
+      // Capture the activator event for position calculations
+      activatorEventRef.current = event.activatorEvent as PointerEvent;
+
+      // Find which list contains this item
+      for (const [listId, list] of registeredLists) {
+        const itemIndex = list.keys.findIndex((key) => key === event.active.id);
+
+        if (itemIndex >= 0) {
+          const dragItem: DragItem = {
+            itemId: event.active.id,
+            listId,
+            index: itemIndex,
+          };
+
+          setDragState({
+            source: dragItem,
+            target: null,
+            indicator: null,
+          });
+          break;
+        }
+      }
+    },
+    [registeredLists]
+  );
+
+  const handleDragMove = React.useCallback(
+    (event: DragMoveEvent) => {
+      const { active, over } = event;
+
+      if (!activatorEventRef.current || !dragState.source) return;
+
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY,
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists,
+      });
+
+      setDragState({
+        source: dragState.source,
+        target: dropTarget?.target ?? null,
+        indicator: dropTarget?.indicator ?? null,
+      });
+    },
+    [registeredLists, dragState.source]
+  );
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (!activatorEventRef.current || !dragState.source) return;
+
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY,
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists,
+      });
+
+      setDragState({
+        source: null,
+        target: null,
+        indicator: null,
+      });
+      activatorEventRef.current = null;
+
+      if (!dropTarget) return;
+
+      const sourceList = registeredLists.get(dropTarget.source.listId);
+      const targetList = registeredLists.get(dropTarget.target.listId);
+
+      if (!sourceList || !targetList) return;
+
+      sourceList.onMoveItem(
+        dropTarget.source.index,
+        dropTarget.target.index,
+        dropTarget.indicator,
+        dropTarget.source.listId,
+        dropTarget.target.listId
+      );
+    },
+    [registeredLists, dragState.source]
+  );
+
+  const contextValue: DragRegistrationContextType = React.useMemo(
+    () => ({
+      registerList,
+      unregisterList,
+    }),
+    [registerList, unregisterList]
+  );
+
+  const activeList = dragState.source
+    ? registeredLists.get(dragState.source.listId)
+    : null;
+  const activeDragContextValue: ActiveDragContextType = React.useMemo(
+    () => dragState,
+    [dragState]
+  );
+
+  const collisionDetection = useMemo(() => {
+    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+  }, [registeredLists]);
+
+  return (
+    <AnyDragContext.Provider value={true}>
+      <sharedDragProps.dragRegistrationContext.Provider value={contextValue}>
+        <sharedDragProps.activeDragContext.Provider
+          value={activeDragContextValue}
+        >
+          <DndContext
+            sensors={sensors}
+            collisionDetection={collisionDetection}
+            onDragStart={handleDragStart}
+            onDragMove={handleDragMove}
+            onDragEnd={handleDragEnd}
+          >
+            {children}
+            {mounted &&
+              activeList?.renderOverlay &&
+              dragState.source &&
+              createPortal(
+                <DragOverlay dropAnimation={null}>
+                  {activeList.renderOverlay(dragState.source.itemId)}
+                </DragOverlay>,
+                document.body
+              )}
+          </DndContext>
+        </sharedDragProps.activeDragContext.Provider>
+      </sharedDragProps.dragRegistrationContext.Provider>
+    </AnyDragContext.Provider>
+  );
+}
+
+function useMounted() {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+}
+
+export function withDragProvider<T extends object>(
+  Component: React.ComponentType<T>
+) {
+  return function WithDragProvider(props: T) {
+    const anyDragContext = React.useContext(AnyDragContext);
+
+    if (!anyDragContext) {
+      return (
+        <SharedDragProvider>
+          <Component {...props} />
+        </SharedDragProvider>
+      );
+    }
+
+    return <Component {...props} />;
+  };
+}
+
+// Custom collision detection that prioritizes items over containers
+export const getItemFirstCollisionDetection =
+  (registeredListIds: string[]): CollisionDetection =>
+  (parameters) => {
+    const pointerCollisions = pointerWithin(parameters);
+
+    if (pointerCollisions.length > 0) {
+      const itemCollisions = pointerCollisions.filter((collision) => {
+        for (const listId of registeredListIds) {
+          if (collision.id === listId) {
+            return false;
+          }
+        }
+
+        return true;
+      });
+
+      if (itemCollisions.length > 0) {
+        return itemCollisions;
+      }
+    }
+
+    // Fall back to pointer-based detection (includes containers)
+    // This handles empty lists and edge cases
+    return pointerCollisions.length > 0
+      ? pointerCollisions
+      : closestCenter(parameters);
+  };
+
+function findDropTarget({
+  activationPoint,
+  delta,
+  over,
+  active,
+  source,
+  registeredLists,
+}: {
+  activationPoint: Point;
+  delta: Point;
+  over: Over | null;
+  active: Active;
+  source: DragItem;
+  registeredLists: Map<string, RegisteredList>;
+}):
+  | {
+      source: DragItem;
+      target: DragItem;
+      indicator: RelativeDropPosition;
+    }
+  | undefined {
+  if (!over || active.id === over.id) return;
+
+  // Find target list and item
+  let targetListId: string | null = null;
+  let targetIndex: number = -1;
+
+  for (const [listId, list] of registeredLists) {
+    const itemIndex = list.keys.findIndex((key) => key === over.id);
+
+    if (itemIndex >= 0) {
+      targetListId = listId;
+      targetIndex = itemIndex;
+      break;
+    }
+
+    // Also check if dropping on the list container itself
+    if (over.id === listId) {
+      targetListId = listId;
+      targetIndex = list.keys.length; // Append to end
+      break;
+    }
+  }
+
+  const targetList =
+    targetListId !== null ? registeredLists.get(targetListId) : null;
+  const sourceList = registeredLists.get(source.listId);
+
+  if (
+    !targetList ||
+    !sourceList ||
+    !targetList.acceptsFromList({
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    })
+  ) {
+    return;
+  }
+
+  // Dropping on the list container itself
+  if (over.id === targetList.id) {
+    const canDrop = targetList.acceptsDrop(
+      source.index,
+      Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
+      "below",
+      sourceList.id,
+      targetList.id
+    );
+
+    if (canDrop) {
+      return {
+        source,
+        target: {
+          itemId: over.id,
+          listId: targetList.id,
+          index: targetIndex,
+        },
+        indicator: "below",
+      };
+    }
+  }
+
+  const eventX = activationPoint.x;
+  const eventY = activationPoint.y;
+  const currentX = eventX + delta.x;
+  const currentY = eventY + delta.y;
+  const absolutePosition = { x: currentX, y: currentY };
+
+  const indicator = targetList.getDropIndicator({
+    absolutePosition,
+    active,
+    over,
+    sourceListId: sourceList.id,
+    targetListId: targetList.id,
+  });
+
+  if (indicator) {
+    return {
+      source,
+      target: {
+        itemId: over.id,
+        listId: targetList.id,
+        index: targetIndex,
+      },
+      indicator,
+    };
+  }
+}

package/src/components/sorting/Sortable.tsx

@@ -0,0 +1,357 @@
+import { UniqueIdentifier, useDroppable } from "@dnd-kit/core";
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import * as React from "react";
+import {
+  ActiveDragContext,
+  ActiveDragContextType,
+  DragRegistrationContext,
+  RegisteredList,
+  SharedDragProps,
+  useActiveDrag,
+  useDragRegistration,
+} from "./DragRegistration";
+import { withDragProvider } from "./SharedDragProvider";
+import {
+  AcceptsFromList,
+  createDragItemKey,
+  defaultAcceptsDrop,
+  DropValidator,
+  MoveDragItemHandler,
+  RelativeDropPosition,
+  validateDropIndicator,
+} from "./sorting";
+
+type UseSortableReturnType = ReturnType<typeof useSortable>;
+
+type ItemChildrenProps<T> = {
+  ref: React.Ref<T>;
+  relativeDropPosition?: RelativeDropPosition;
+  style?: React.CSSProperties;
+} & UseSortableReturnType["attributes"];
+
+// Context for drop indicators within a sortable list
+interface SortableItemContextProps {
+  acceptsDrop: DropValidator;
+  listId: string;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+  activeDragContext: React.Context<ActiveDragContextType | null>;
+}
+
+const SortableItemContext = React.createContext<SortableItemContextProps>({
+  acceptsDrop: defaultAcceptsDrop,
+  listId: "",
+  getDropTargetParentIndex: undefined,
+  activeDragContext: ActiveDragContext,
+});
+
+// Custom hook for drop indicators in sortable lists
+function useSortableDropIndicator({
+  index,
+  itemId,
+  listId,
+  acceptsDrop,
+  getDropTargetParentIndex,
+}: {
+  index: number;
+  itemId: UniqueIdentifier;
+  listId: string;
+  acceptsDrop: DropValidator;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+}): RelativeDropPosition | undefined {
+  const { activeDragContext } = React.useContext(SortableItemContext);
+  const activeDrag = useActiveDrag(activeDragContext);
+  const { source, target } = activeDrag;
+
+  if (!source || !target) return;
+
+  const indicator =
+    target.listId === listId && target.itemId === itemId
+      ? activeDrag.indicator
+      : undefined;
+
+  const targetParentIndex =
+    target.index === -1 ? undefined : getDropTargetParentIndex?.(target.index);
+
+  const isValidParent =
+    targetParentIndex === undefined || targetParentIndex === -1
+      ? false
+      : acceptsDrop(
+          source.index,
+          targetParentIndex,
+          "inside",
+          source.listId,
+          target.listId
+        );
+
+  const overIdAcceptsDrop =
+    target.index === -1
+      ? undefined
+      : acceptsDrop(
+          source.index,
+          target.index,
+          "inside",
+          source.listId,
+          target.listId
+        );
+
+  const thisItemIsTargetParent = targetParentIndex === index;
+
+  const showDragInsideIndicatorOnParent =
+    !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
+
+  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : undefined);
+}
+
+interface RootProps {
+  id?: string;
+  keys: UniqueIdentifier[];
+  axis?: "x" | "y";
+  children?: React.ReactNode;
+  renderOverlay?: (index: number) => React.ReactNode;
+  onMoveItem?: MoveDragItemHandler;
+  acceptsFromList?: AcceptsFromList;
+  acceptsDrop?: DropValidator;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+  sharedDragProps?: SharedDragProps;
+  containerRef?: React.RefObject<HTMLElement>;
+}
+
+function SortableItem<TElement extends HTMLElement>({
+  id,
+  disabled,
+  children,
+}: {
+  id: UniqueIdentifier;
+  disabled?: boolean;
+  children: (props: ItemChildrenProps<TElement>) => React.ReactNode;
+}) {
+  const { acceptsDrop, listId, getDropTargetParentIndex } =
+    React.useContext(SortableItemContext);
+
+  const dragItemKey = createDragItemKey(listId, id);
+
+  const { attributes, listeners, setNodeRef, isDragging, index } = useSortable({
+    id: dragItemKey,
+    disabled,
+  });
+
+  const ref = React.useCallback(
+    (node: TElement | null) => setNodeRef(node),
+    [setNodeRef]
+  );
+
+  const relativeDropPosition = useSortableDropIndicator({
+    index,
+    itemId: dragItemKey,
+    listId,
+    acceptsDrop,
+    getDropTargetParentIndex,
+  });
+
+  return children({
+    ref,
+    ...attributes,
+    ...listeners,
+    relativeDropPosition,
+    style: {
+      opacity: isDragging ? 0.5 : 1,
+    },
+  });
+}
+
+function SortableRoot_({
+  id: idProp,
+  keys: keysProp,
+  onMoveItem,
+  renderOverlay,
+  acceptsFromList,
+  acceptsDrop = defaultAcceptsDrop,
+  axis = "y",
+  children,
+  getDropTargetParentIndex,
+  sharedDragProps,
+  containerRef,
+}: RootProps) {
+  const defaultId = React.useId();
+  const id = idProp ?? defaultId;
+  const keys = React.useMemo(() => {
+    return keysProp.map((key) => createDragItemKey(id, key));
+  }, [keysProp, id]);
+
+  const { registerList, unregisterList } = useDragRegistration(
+    sharedDragProps?.dragRegistrationContext ?? DragRegistrationContext
+  );
+
+  const { setNodeRef: setDroppableRef } = useDroppable({
+    id,
+    // Make the container droppable only when the list is empty
+    // This avoids conflicts with individual sortable items.
+    // This isn't strictly necessary since we also use a custom collision detection
+    // that prioritizes items over containers, but it helps with dropping into
+    // the best position (either above or below, rather than always below).
+    disabled: keys.length > 0,
+  });
+
+  // Register this list with the global drag system
+  React.useEffect(() => {
+    const listConfig: RegisteredList = {
+      id,
+      keys,
+      onMoveItem: onMoveItem ?? (() => {}),
+      renderOverlay: (id) => {
+        const index = keys.findIndex((key) => key === id);
+        return renderOverlay?.(index) ?? null;
+      },
+      acceptsFromList: acceptsFromList ?? (() => true),
+      acceptsDrop,
+      getDropIndicator: (parameters) => {
+        const { absolutePosition, active, over, 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 relativeDropPosition = validateDropIndicator({
+          acceptsDrop,
+          keys,
+          activeId: active.id,
+          overId: over.id,
+          offsetStart,
+          elementStart,
+          elementSize,
+          sourceListId,
+          targetListId,
+        });
+
+        return relativeDropPosition;
+      },
+    };
+
+    registerList(listConfig);
+
+    return () => {
+      unregisterList(id);
+    };
+  }, [
+    id,
+    onMoveItem,
+    renderOverlay,
+    acceptsFromList,
+    acceptsDrop,
+    axis,
+    registerList,
+    unregisterList,
+    keys,
+  ]);
+
+  const contextValue: SortableItemContextProps = React.useMemo(
+    () => ({
+      keys,
+      acceptsDrop,
+      listId: id,
+      getDropTargetParentIndex,
+      activeDragContext:
+        sharedDragProps?.activeDragContext ?? ActiveDragContext,
+    }),
+    [keys, acceptsDrop, id, getDropTargetParentIndex, sharedDragProps]
+  );
+
+  // 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.
+  React.useEffect(() => {
+    if (containerRef) {
+      setDroppableRef(containerRef.current);
+    }
+  });
+
+  return (
+    <SortableItemContext.Provider value={contextValue}>
+      <SortableContext
+        items={keys}
+        strategy={
+          axis === "x"
+            ? horizontalListSortingStrategy
+            : verticalListSortingStrategy
+        }
+      >
+        {children}
+      </SortableContext>
+    </SortableItemContext.Provider>
+  );
+}
+
+const SortableRoot = withDragProvider(SortableRoot_) as typeof SortableRoot_;
+
+export interface SortableProps<TItem, TElement extends HTMLElement>
+  extends Omit<RootProps, "children" | "keys" | "renderOverlay"> {
+  items: TItem[];
+  keyExtractor: (item: TItem) => UniqueIdentifier;
+  shouldRenderOverlay?: boolean;
+  renderItem: (
+    item: TItem,
+    props: ItemChildrenProps<TElement>,
+    { isOverlay }: { isOverlay: boolean }
+  ) => React.ReactNode;
+}
+
+const Sortable_ = function Sortable_<TItem, TElement extends HTMLElement>({
+  items,
+  keyExtractor,
+  shouldRenderOverlay = true,
+  renderItem,
+  ...rest
+}: SortableProps<TItem, TElement>) {
+  const keys = React.useMemo(
+    () => items.map(keyExtractor),
+    [items, keyExtractor]
+  );
+
+  const renderOverlay = React.useCallback(
+    (index: number) => {
+      return renderItem(
+        items[index],
+        {
+          ref: () => {},
+          style: {},
+          tabIndex: -1,
+          "aria-disabled": true,
+          "aria-pressed": false,
+          "aria-roledescription": "Item being dragged",
+          "aria-describedby": "Item being dragged",
+          role: "button",
+        },
+        { isOverlay: true }
+      );
+    },
+    [renderItem, items]
+  );
+
+  return (
+    <SortableRoot
+      {...rest}
+      keys={keys}
+      renderOverlay={shouldRenderOverlay ? renderOverlay : undefined}
+    >
+      {keys.map((key, index) => (
+        <SortableItem<TElement> key={key} id={key}>
+          {(props) => {
+            return renderItem(items[index], props, { isOverlay: false });
+          }}
+        </SortableItem>
+      ))}
+    </SortableRoot>
+  );
+};
+
+export const Sortable = Object.assign(Sortable_, {
+  Root: SortableRoot,
+  Item: SortableItem,
+});