@noya-app/noya-designsystem 0.1.54 → 0.1.56

package/src/components/Toolbar.tsx

@@ -1,13 +1,11 @@
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
 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";
 import { Button } from "./Button";
 import { DividerVertical } from "./Divider";
 import { DropdownMenu } from "./DropdownMenu";
-import { renderIcon } from "./Icons";
 import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
@@ -15,7 +13,6 @@ import {
   SelectableMenuItem,
   SubMenuItem,
 } from "./internal/Menu";
-import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
 const iconButtonStyle = {
@@ -46,12 +43,13 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
         }
       }}
     >
-      <Button disabled={item.disabled} active={item.checked || open}>
-        {item.icon && renderIcon(item.icon)}
-        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+      <Button
+        disabled={item.disabled}
+        active={item.checked || open}
+        icon={item.icon}
+        iconRight="DropdownChevronIcon"
+      >
         {item.title}
-        <Spacer.Horizontal inline size={6} />
-        <DropdownChevronIcon />
       </Button>
     </DropdownMenu>
   );
@@ -62,23 +60,26 @@ 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);
         }
       }}
     >
-      {item.icon && renderIcon(item.icon)}
-      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
       {item.title}
     </Button>
   );
@@ -97,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;
 
@@ -109,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}
+      />
     );
   }
 
@@ -121,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 (
     <>
@@ -133,6 +142,7 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
             key={i}
             item={item}
             onSelectMenuItem={onSelectMenuItem}
+            buttonAs={buttonAs}
           />
         );
       })}

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -1,12 +1,7 @@
-import { cssVars } from "../../theme";
-
-import { ChatBubbleWithDotsIcon } from "@noya-app/noya-icons";
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
-import { colorFromString } from "../../utils/colorFromString";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
 import Button from "../Button";
-import { Spacer } from "../Spacer";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -25,14 +20,12 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
 
 type ConnectedUsersMenuLayoutProps = {
   renderUsers: () => React.ReactNode;
-  currentUserId?: string;
   launchAIAssistant?: () => void;
   isAssistantOpen?: boolean;
 };
 
 export const ConnectedUsersMenuLayout = ({
   renderUsers,
-  currentUserId,
   launchAIAssistant,
   isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
@@ -41,29 +34,13 @@ export const ConnectedUsersMenuLayout = ({
       <AvatarStack size={INPUT_HEIGHT} className="mr-1">
         {renderUsers()}
       </AvatarStack>
-
-      {/* AI Assistant Avatar */}
       {launchAIAssistant && (
-        <Tooltip
-          content={
-            <div className="flex flex-col">
-              <Small>AI Assistant</Small>
-            </div>
-          }
-        >
+        <Tooltip content="AI Assistant">
           <Button
-            variant={isAssistantOpen ? "secondary" : undefined}
+            active={isAssistantOpen}
             onClick={launchAIAssistant}
-            style={{
-              backgroundColor: isAssistantOpen
-                ? colorFromString(currentUserId ?? "")
-                : undefined,
-            }}
+            icon="ChatBubbleWithDotsIcon"
           >
-            <ChatBubbleWithDotsIcon
-              color={isAssistantOpen ? undefined : cssVars.colors.icon}
-            />
-            <Spacer.Horizontal inline size={6} />
             AI
           </Button>
         </Tooltip>

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);
+  };