@noya-app/noya-designsystem 0.1.56 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.21",
+    "@noya-app/noya-colorpicker": "0.1.22",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
     "@noya-app/noya-icons": "0.1.10",

package/src/__tests__/validateDropIndicator.test.ts

@@ -1,88 +1,121 @@
 import { describe, expect, it } from "bun:test";
 import {
   defaultAcceptsDrop,
+  MoveDragItemParameters,
   validateDropIndicator,
 } 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({
+      sourceIndex: 0,
+      targetIndex: 0,
+      position: "inside",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false for 'inside' position", () => {
-    const result = defaultAcceptsDrop(0, 1, "inside", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 1,
+      position: "inside",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "above", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 0,
+      position: "above",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "below", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 0,
+      position: "below",
+      sourceListId: "",
+      targetListId: "",
+    });
     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({
+      sourceIndex: 0,
+      targetIndex: 1,
+      position: "above",
+      sourceListId: "",
+      targetListId: "",
+    });
     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({
+      sourceIndex: 1,
+      targetIndex: 0,
+      position: "below",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return true when dropping above a valid target", () => {
-    const result = defaultAcceptsDrop(0, 2, "above", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 2,
+      position: "above",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(true);
   });
 
   it("should return true when dropping below a valid target", () => {
-    const result = defaultAcceptsDrop(2, 0, "below", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 2,
+      targetIndex: 0,
+      position: "below",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(true);
   });
 });
 
 describe("validateDropIndicator", () => {
-  const mockAcceptsDrop = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsDrop = (parameters: MoveDragItemParameters) => {
     // Mock that only allows dropping inside
-    if (position === "inside") return true;
+    if (parameters.position === "inside") return true;
     return false;
   };
 
-  const mockAcceptsDropAboveBelow = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsDropAboveBelow = (parameters: MoveDragItemParameters) => {
     // Mock that only allows dropping above/below
-    if (position === "inside") return false;
+    if (parameters.position === "inside") return false;
     return true;
   };
 
-  const mockAcceptsAll = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsAll = (_: MoveDragItemParameters) => {
     // Mock that allows all drop positions
     return true;
   };
 
-  const mockAcceptsAboveAndInside = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsAboveAndInside = (parameters: MoveDragItemParameters) => {
     // Mock that allows dropping above and inside, but not below
-    return position !== "below";
+    return parameters.position !== "below";
   };
 
   const keys = ["item1", "item2", "item3"];

package/src/components/Collection.tsx

@@ -8,6 +8,7 @@ import {
   ListViewRowProps,
 } from "../components/ListView";
 import { List } from "./List";
+import { SharedDragProps } from "./sorting/DragRegistration";
 
 export type CollectionViewType = "grid" | "list";
 
@@ -93,6 +94,8 @@ export interface CollectionProps<T, M extends string = string> {
   /** @default false */
   sortable?: boolean;
   dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
+  sharedDragProps?: SharedDragProps;
+  sortableId?: string;
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/List.tsx

@@ -64,6 +64,8 @@ export const List = memoGeneric(
       getPlaceholder,
       onClickItem,
       dragIndicatorStyle,
+      sortableId,
+      sharedDragProps,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -133,6 +135,8 @@ export const List = memoGeneric(
         onMoveItem={onMoveItem}
         renderEmptyState={renderEmptyState}
         getDropTargetParentIndex={getDropTargetParentIndex}
+        sharedDragProps={sharedDragProps}
+        sortableId={sortableId}
         {...dropTargetProps}
         renderItem={(
           item: T,

package/src/components/ListView.tsx

@@ -31,6 +31,7 @@ import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
+import { SharedDragProps } from "./sorting/DragRegistration";
 import { Sortable } from "./sorting/Sortable";
 import {
   DropValidator,
@@ -793,6 +794,8 @@ export type ListViewRootProps = {
   onDrop?: React.DragEventHandler<HTMLDivElement>;
   renderEmptyState?: () => ReactNode;
   getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
+  sharedDragProps?: SharedDragProps;
+  sortableId?: string;
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -828,6 +831,8 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDrop,
     renderEmptyState,
     getDropTargetParentIndex,
+    sharedDragProps,
+    sortableId,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1000,11 +1005,13 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   const withSortable = (children: ReactNode) =>
     sortable ? (
       <Sortable.Root
+        id={sortableId}
         onMoveItem={onMoveItem}
         keys={ids}
         renderOverlay={renderOverlay}
         acceptsDrop={acceptsDrop}
         getDropTargetParentIndex={getDropTargetParentIndex}
+        sharedDragProps={sharedDragProps}
       >
         {children}
       </Sortable.Root>

package/src/components/sorting/DragRegistration.tsx

@@ -1,5 +1,6 @@
 import {
   AcceptsDrop,
+  DragState,
   MoveDragItemHandler,
   RelativeDropPosition,
 } from "./sorting";
@@ -9,7 +10,6 @@ import { AcceptsFromList } from "./sorting";
 
 import { Point } from "@noya-app/noya-geometry";
 import React from "react";
-import { DragItem } from "./sorting";
 
 export type GetDropIndicatorParameters = {
   absolutePosition: Point;
@@ -73,10 +73,7 @@ export function useDragRegistrationManager() {
   return { registerList, unregisterList, registeredLists };
 }
 
-export type ActiveDragContextType = {
-  activeItem: DragItem | null;
-  delta: Point;
-};
+export type ActiveDragContextType = DragState;
 
 export const ActiveDragContext =
   React.createContext<ActiveDragContextType | null>(null);
@@ -104,7 +101,7 @@ export function useAnyDragContext() {
   return React.useContext(AnyDragContext);
 }
 
-export type SharedDragProviderContexts = {
+export type SharedDragProps = {
   dragRegistrationContext: React.Context<DragRegistrationContextType | null>;
   activeDragContext: React.Context<ActiveDragContextType | null>;
 };