@noya-app/noya-designsystem 0.1.55 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "@noya-app/noya-colorpicker": "0.1.21",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
-    "@noya-app/noya-icons": "0.1.9",
+    "@noya-app/noya-icons": "0.1.10",
     "@noya-app/noya-keymap": "0.1.3",
     "@noya-app/noya-tailwind-config": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",

package/src/__tests__/validateDropIndicator.test.ts

@@ -2,46 +2,46 @@ import { describe, expect, it } from "bun:test";
 import {
   defaultAcceptsDrop,
   validateDropIndicator,
-} from "../components/Sortable";
+} from "../components/sorting/sorting";
 
 describe("defaultAcceptsDrop", () => {
   it("should return false if the active item is the same as the over item", () => {
-    const result = defaultAcceptsDrop(0, 0, "inside");
+    const result = defaultAcceptsDrop(0, 0, "inside", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false for 'inside' position", () => {
-    const result = defaultAcceptsDrop(0, 1, "inside");
+    const result = defaultAcceptsDrop(0, 1, "inside", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "above");
+    const result = defaultAcceptsDrop(0, 0, "above", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "below");
+    const result = defaultAcceptsDrop(0, 0, "below", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the item below the source", () => {
-    const result = defaultAcceptsDrop(0, 1, "above");
+    const result = defaultAcceptsDrop(0, 1, "above", "", "");
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the item above the source", () => {
-    const result = defaultAcceptsDrop(1, 0, "below");
+    const result = defaultAcceptsDrop(1, 0, "below", "", "");
     expect(result).toBe(false);
   });
 
   it("should return true when dropping above a valid target", () => {
-    const result = defaultAcceptsDrop(0, 2, "above");
+    const result = defaultAcceptsDrop(0, 2, "above", "", "");
     expect(result).toBe(true);
   });
 
   it("should return true when dropping below a valid target", () => {
-    const result = defaultAcceptsDrop(2, 0, "below");
+    const result = defaultAcceptsDrop(2, 0, "below", "", "");
     expect(result).toBe(true);
   });
 });
@@ -97,6 +97,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 50, // offsetStart in middle third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -110,6 +112,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 20, // offsetStart in top third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("above");
     });
@@ -123,6 +127,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 80, // offsetStart in bottom third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -138,6 +144,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 50, // offsetStart in middle third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -151,6 +159,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 20, // offsetStart in top third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("above");
     });
@@ -164,6 +174,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 80, // offsetStart in bottom third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("below");
     });
@@ -177,6 +189,8 @@ describe("validateDropIndicator", () => {
         offsetStart: 120, // offsetStart in middle third relative to elementStart
         elementStart: 100, // elementStart
         elementSize: 60, // elementSize
+        sourceListId: "",
+        targetListId: "",
       });
       expect(result).toBe("inside");
     });
@@ -191,6 +205,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 50, // offsetStart in middle third
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("inside");
   });
@@ -204,6 +220,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 20, // offsetStart in top half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("above");
   });
@@ -217,6 +235,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 70, // offsetStart in bottom half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("below");
   });
@@ -230,6 +250,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 20, // offsetStart in top half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBe("inside");
   });
@@ -244,6 +266,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 50,
       elementStart: 0,
       elementSize: 100,
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBeUndefined();
   });
@@ -257,6 +281,8 @@ describe("validateDropIndicator", () => {
       offsetStart: 50,
       elementStart: 0,
       elementSize: 100,
+      sourceListId: "",
+      targetListId: "",
     });
     expect(result).toBeUndefined();
   });

package/src/components/ListView.tsx

@@ -31,13 +31,14 @@ import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
+import { Sortable } from "./sorting/Sortable";
 import {
   DropValidator,
+  MoveDragItemHandler,
   normalizeListTargetIndex,
   RelativeDropPosition,
-  Sortable,
-  type SortableItemContextProps,
-} from "./Sortable";
+  SortableItemContextProps,
+} from "./sorting/sorting";
 import { Spacer } from "./Spacer";
 
 export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
@@ -776,11 +777,7 @@ export type ListViewRootProps = {
   onPress?: () => void;
   scrollable?: boolean;
   expandable?: boolean;
-  onMoveItem?: (
-    sourceIndex: number,
-    targetIndex: number,
-    position: RelativeDropPosition
-  ) => void;
+  onMoveItem?: MoveDragItemHandler;
   indentation?: number;
   acceptsDrop?: DropValidator;
   pressEventName?: PressEventName;

package/src/components/Toolbar.tsx

@@ -1,5 +1,5 @@
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React from "react";
+import React, { ComponentProps } from "react";
 
 import { memoGeneric } from "@noya-app/react-utils";
 import { BaseToolbar } from "./BaseToolbar";
@@ -60,16 +60,20 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
 >({
   item,
   onSelectMenuItem,
+  as,
 }: {
   item: SelectableMenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
+  as?: ComponentProps<typeof Button>["as"];
 }) {
   const content = (
     <Button
+      as={as}
       disabled={item.disabled}
       active={item.checked}
       icon={item.icon}
       style={item.icon && !item.title ? iconButtonStyle : undefined}
+      {...(as === "a" && { href: item.value })}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
           onSelectMenuItem(item.value);
@@ -94,9 +98,11 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
 >({
   item,
   onSelectMenuItem,
+  buttonAs,
 }: {
   item: MenuItem<T>;
   onSelectMenuItem?: (value: T) => void;
+  buttonAs?: ComponentProps<typeof Button>["as"];
 }) {
   if (item.type === "sectionHeader") return null;
 
@@ -106,7 +112,11 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
 
   if (isSelectableMenuItem(item)) {
     return (
-      <ToolbarMenuButton item={item} onSelectMenuItem={onSelectMenuItem} />
+      <ToolbarMenuButton
+        item={item}
+        onSelectMenuItem={onSelectMenuItem}
+        as={buttonAs}
+      />
     );
   }
 
@@ -118,9 +128,11 @@ export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
 export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
+  buttonAs,
 }: {
   items: MenuItem<T>[];
   onSelectMenuItem?: (value: T) => void;
+  buttonAs?: ComponentProps<typeof Button>["as"];
 }) {
   return (
     <>
@@ -130,6 +142,7 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
             key={i}
             item={item}
             onSelectMenuItem={onSelectMenuItem}
+            buttonAs={buttonAs}
           />
         );
       })}

package/src/components/sorting/DragRegistration.tsx

@@ -0,0 +1,110 @@
+import {
+  AcceptsDrop,
+  MoveDragItemHandler,
+  RelativeDropPosition,
+} from "./sorting";
+
+import { Active, Over, UniqueIdentifier } from "@dnd-kit/core";
+import { AcceptsFromList } from "./sorting";
+
+import { Point } from "@noya-app/noya-geometry";
+import React from "react";
+import { DragItem } from "./sorting";
+
+export type GetDropIndicatorParameters = {
+  absolutePosition: Point;
+  active: Active;
+  over: Over;
+  sourceListId: string;
+  targetListId: string;
+};
+
+export interface RegisteredList {
+  id: string;
+  keys: UniqueIdentifier[];
+  onMoveItem: MoveDragItemHandler;
+  renderOverlay?: (id: UniqueIdentifier) => React.ReactNode;
+  acceptsFromList: AcceptsFromList;
+  acceptsDrop: AcceptsDrop;
+  getDropIndicator: (
+    parameters: GetDropIndicatorParameters
+  ) => RelativeDropPosition | undefined;
+}
+
+export interface DragRegistrationContextType {
+  registerList: (list: RegisteredList) => void;
+  unregisterList: (listId: string) => void;
+}
+
+export const DragRegistrationContext =
+  React.createContext<DragRegistrationContextType | null>(null);
+
+export function useDragRegistration(
+  context: React.Context<DragRegistrationContextType | null>
+): DragRegistrationContextType {
+  const value = React.useContext(context);
+
+  if (!value) {
+    throw new Error(
+      "useDragRegistration must be used within a DragRegistrationProvider"
+    );
+  }
+
+  return value;
+}
+
+export function useDragRegistrationManager() {
+  const [registeredLists, setRegisteredLists] = React.useState<
+    Map<string, RegisteredList>
+  >(new Map());
+
+  const registerList = React.useCallback((list: RegisteredList) => {
+    setRegisteredLists((prev) => new Map(prev).set(list.id, list));
+  }, []);
+
+  const unregisterList = React.useCallback((listId: string) => {
+    setRegisteredLists((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(listId);
+      return newMap;
+    });
+  }, []);
+
+  return { registerList, unregisterList, registeredLists };
+}
+
+export type ActiveDragContextType = {
+  activeItem: DragItem | null;
+  delta: Point;
+};
+
+export const ActiveDragContext =
+  React.createContext<ActiveDragContextType | null>(null);
+
+export function useActiveDrag(
+  context: React.Context<ActiveDragContextType | null>
+): ActiveDragContextType {
+  const value = React.useContext(context);
+
+  if (!value) {
+    throw new Error("useActiveDrag must be used within a ActiveDragProvider");
+  }
+
+  return value;
+}
+
+/**
+ * We use this context to automatically create a drag context if not exists.
+ * We do this separately from the contexts that actually store data since for those
+ * we want to allow a custom context to be passed and not get overwritten by nested contexts.
+ */
+export const AnyDragContext = React.createContext<boolean>(false);
+
+export function useAnyDragContext() {
+  return React.useContext(AnyDragContext);
+}
+
+export type SharedDragProviderContexts = {
+  dragRegistrationContext: React.Context<DragRegistrationContextType | null>;
+  activeDragContext: React.Context<ActiveDragContextType | null>;
+};

package/src/components/sorting/SharedDragProvider.tsx

@@ -0,0 +1,307 @@
+import {
+  closestCenter,
+  CollisionDetection,
+  DndContext,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  pointerWithin,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import * as React from "react";
+import { useMemo } from "react";
+import { createPortal } from "react-dom";
+import {
+  ActiveDragContext,
+  ActiveDragContextType,
+  AnyDragContext,
+  DragRegistrationContext,
+  DragRegistrationContextType,
+  SharedDragProviderContexts,
+  useDragRegistrationManager,
+} from "./DragRegistration";
+import { DragItem } from "./sorting";
+
+type SharedDragProviderProps = {
+  children: React.ReactNode;
+  contexts?: SharedDragProviderContexts;
+};
+
+export function SharedDragProvider({
+  children,
+  contexts = {
+    dragRegistrationContext: DragRegistrationContext,
+    activeDragContext: ActiveDragContext,
+  },
+}: SharedDragProviderProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 4,
+      },
+    })
+  );
+
+  const mounted = useMounted();
+  const [activeItem, setActiveItem] = React.useState<DragItem | null>(null);
+  const [delta, setDelta] = React.useState({ x: 0, y: 0 });
+  const { registerList, unregisterList, registeredLists } =
+    useDragRegistrationManager();
+
+  const activatorEventRef = React.useRef<PointerEvent | null>(null);
+
+  const acceptsListDrop = React.useCallback(
+    (sourceListId: string, targetListId: string) => {
+      const sourceList = registeredLists.get(sourceListId);
+      const targetList = registeredLists.get(targetListId);
+
+      if (!sourceList || !targetList) return false;
+
+      return targetList.acceptsFromList({
+        sourceListId,
+        targetListId,
+      });
+    },
+    [registeredLists]
+  );
+
+  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 = {
+            id: event.active.id,
+            listId,
+            index: itemIndex,
+          };
+
+          setActiveItem(dragItem);
+          break;
+        }
+      }
+    },
+    [registeredLists]
+  );
+
+  const handleDragMove = React.useCallback((event: DragMoveEvent) => {
+    setDelta({ x: event.delta.x, y: event.delta.y });
+  }, []);
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      const activatorEventPoint = activatorEventRef.current
+        ? {
+            x: activatorEventRef.current.clientX,
+            y: activatorEventRef.current.clientY,
+          }
+        : null;
+
+      setActiveItem(null);
+      activatorEventRef.current = null;
+
+      if (!activeItem || !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;
+        }
+      }
+
+      if (!targetListId || !acceptsListDrop(activeItem.listId, targetListId)) {
+        setActiveItem(null);
+        activatorEventRef.current = null;
+        return;
+      }
+
+      const targetList = registeredLists.get(targetListId);
+      const sourceList = registeredLists.get(activeItem.listId);
+
+      if (!targetList || !sourceList) {
+        return;
+      }
+
+      // Handle drops into items within the list
+      if (targetIndex < targetList.keys.length && activatorEventPoint) {
+        // Calculate absolute cursor position
+        const eventX = activatorEventPoint.x;
+        const eventY = activatorEventPoint.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: activeItem.listId,
+          targetListId,
+        });
+
+        if (!indicator) return;
+
+        // Notify the source list to handle the move
+        sourceList.onMoveItem(
+          activeItem.index,
+          targetIndex,
+          indicator,
+          activeItem.listId,
+          targetListId
+        );
+      }
+      // Handle drops into empty lists or at the end of lists
+      else if (targetIndex >= targetList.keys.length) {
+        // For empty lists or drops at the end, we don't need detailed position validation
+        // Just check if the drop is acceptable with a "below" position
+        const canDrop = targetList.acceptsDrop(
+          activeItem.index,
+          Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
+          "below",
+          activeItem.listId,
+          targetListId
+        );
+
+        if (canDrop) {
+          sourceList.onMoveItem(
+            activeItem.index,
+            targetIndex,
+            "below",
+            activeItem.listId,
+            targetListId
+          );
+        }
+      }
+    },
+    [activeItem, registeredLists, acceptsListDrop, delta]
+  );
+
+  const contextValue: DragRegistrationContextType = React.useMemo(
+    () => ({
+      activeItem,
+      delta,
+      registerList,
+      unregisterList,
+    }),
+    [activeItem, delta, registerList, unregisterList]
+  );
+
+  const activeList = activeItem ? registeredLists.get(activeItem.listId) : null;
+  const activeDragContextValue: ActiveDragContextType = React.useMemo(
+    () => ({ activeItem, delta }),
+    [activeItem, delta]
+  );
+
+  const collisionDetection = useMemo(() => {
+    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+  }, [registeredLists]);
+
+  return (
+    <AnyDragContext.Provider value={true}>
+      <contexts.dragRegistrationContext.Provider value={contextValue}>
+        <contexts.activeDragContext.Provider value={activeDragContextValue}>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={collisionDetection}
+            onDragStart={handleDragStart}
+            onDragMove={handleDragMove}
+            onDragEnd={handleDragEnd}
+          >
+            {children}
+            {mounted &&
+              activeList?.renderOverlay &&
+              activeItem &&
+              createPortal(
+                <DragOverlay dropAnimation={null}>
+                  {activeList.renderOverlay(activeItem.id)}
+                </DragOverlay>,
+                document.body
+              )}
+          </DndContext>
+        </contexts.activeDragContext.Provider>
+      </contexts.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);
+  };