@noya-app/noya-designsystem 0.1.55 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "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/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,13 +31,15 @@ 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,
+  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 +778,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;
@@ -796,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>(
@@ -831,6 +831,8 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDrop,
     renderEmptyState,
     getDropTargetParentIndex,
+    sharedDragProps,
+    sortableId,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1003,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/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,107 @@
+import {
+  AcceptsDrop,
+  DragState,
+  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";
+
+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 = DragState;
+
+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 SharedDragProps = {
+  dragRegistrationContext: React.Context<DragRegistrationContextType | null>;
+  activeDragContext: React.Context<ActiveDragContextType | null>;
+};