@noya-app/noya-designsystem 0.1.54 → 0.1.56

package/src/components/sorting/Sortable.tsx

@@ -0,0 +1,404 @@
+import { UniqueIdentifier, useDndContext, useDroppable } from "@dnd-kit/core";
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import * as React from "react";
+import {
+  ActiveDragContext,
+  ActiveDragContextType,
+  DragRegistrationContext,
+  RegisteredList,
+  SharedDragProviderContexts,
+  useActiveDrag,
+  useDragRegistration,
+} from "./DragRegistration";
+import { withDragProvider } from "./SharedDragProvider";
+import {
+  AcceptsFromList,
+  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 {
+  keys: UniqueIdentifier[];
+  acceptsDrop: DropValidator;
+  axis: "x" | "y";
+  listId: string;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+  activeDragContext: React.Context<ActiveDragContextType | null>;
+}
+
+const SortableItemContext = React.createContext<SortableItemContextProps>({
+  keys: [],
+  acceptsDrop: defaultAcceptsDrop,
+  axis: "y",
+  listId: "",
+  getDropTargetParentIndex: undefined,
+  activeDragContext: ActiveDragContext,
+});
+
+// Custom hook for drop indicators in sortable lists
+function useSortableDropIndicator({
+  id,
+  index,
+  isDragging,
+  overIndex,
+  activeIndex,
+  keys,
+  acceptsDrop,
+  axis,
+  listId,
+  getDropTargetParentIndex,
+}: {
+  id: UniqueIdentifier;
+  index: number;
+  isDragging: boolean;
+  overIndex: number;
+  activeIndex: number;
+  keys: UniqueIdentifier[];
+  acceptsDrop: DropValidator;
+  axis: "x" | "y";
+  listId: string;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+}): RelativeDropPosition | undefined {
+  const { active, over, activatorEvent } = useDndContext();
+  const { activeDragContext } = React.useContext(SortableItemContext);
+  const { activeItem, delta: position } = useActiveDrag(activeDragContext);
+
+  if (
+    index < 0 ||
+    isDragging ||
+    !active ||
+    !over ||
+    !activeItem ||
+    !(
+      // Same-list drop: check normal overIndex matching
+      (
+        (activeItem.listId === listId && index === overIndex) ||
+        // Cross-list drop: check if we're hovering over this specific item
+        (activeItem.listId !== listId && over.id === id)
+      )
+    )
+  ) {
+    return undefined;
+  }
+
+  const isCrossContainer = activeItem.listId !== listId;
+
+  // For cross-list drops, use combined keys like MultiSortable does
+  const validationKeys = isCrossContainer ? [active.id, ...keys] : keys;
+
+  const eventX = (activatorEvent as PointerEvent | null)?.clientX ?? 0;
+  const eventY = (activatorEvent as PointerEvent | null)?.clientY ?? 0;
+  const offsetLeft = eventX + position.x;
+  const offsetTop = eventY + position.y;
+
+  const parentIndex =
+    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
+
+  const isValidParent =
+    parentIndex === undefined || parentIndex === -1
+      ? false
+      : acceptsDrop(activeIndex, parentIndex, "inside", listId, listId);
+
+  const overIdAcceptsDrop =
+    overIndex === -1
+      ? undefined
+      : acceptsDrop(activeIndex, overIndex, "inside", listId, listId);
+
+  const relativeDropPosition =
+    index >= 0 && index === overIndex && !isDragging && active && over
+      ? validateDropIndicator({
+          acceptsDrop,
+          keys: validationKeys,
+          activeId: active.id,
+          overId: over.id,
+          offsetStart: axis === "x" ? offsetLeft : offsetTop,
+          elementStart: axis === "x" ? over.rect.left : over.rect.top,
+          elementSize: axis === "x" ? over.rect.width : over.rect.height,
+          sourceListId: listId,
+          targetListId: listId,
+        })
+      : undefined;
+
+  const showDragInsideIndicatorOnParent =
+    !overIdAcceptsDrop && isValidParent && parentIndex === index;
+
+  return (
+    relativeDropPosition ??
+    (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;
+  sharedDragProviderContexts?: SharedDragProviderContexts;
+  containerRef?: React.RefObject<HTMLElement>;
+}
+
+function SortableItem<TElement extends HTMLElement>({
+  id,
+  disabled,
+  children,
+}: {
+  id: UniqueIdentifier;
+  disabled?: boolean;
+  children: (props: ItemChildrenProps<TElement>) => React.ReactNode;
+}) {
+  const { keys, acceptsDrop, axis, listId, getDropTargetParentIndex } =
+    React.useContext(SortableItemContext);
+
+  const { attributes, listeners, setNodeRef, isDragging, index, overIndex } =
+    useSortable({ id, disabled });
+
+  const ref = React.useCallback(
+    (node: TElement | null) => setNodeRef(node),
+    [setNodeRef]
+  );
+
+  const relativeDropPosition = useSortableDropIndicator({
+    id,
+    index,
+    isDragging,
+    overIndex,
+    keys,
+    acceptsDrop,
+    axis,
+    listId,
+    activeIndex: index,
+    getDropTargetParentIndex,
+  });
+
+  return children({
+    ref,
+    ...attributes,
+    ...listeners,
+    relativeDropPosition,
+    style: {
+      opacity: isDragging ? 0.5 : 1,
+    },
+  });
+}
+
+function SortableRoot_({
+  id: idProp,
+  keys,
+  onMoveItem,
+  renderOverlay,
+  acceptsFromList,
+  acceptsDrop = defaultAcceptsDrop,
+  axis = "y",
+  children,
+  getDropTargetParentIndex,
+  sharedDragProviderContexts,
+  containerRef,
+}: RootProps) {
+  const defaultId = React.useId();
+  const id = idProp ?? defaultId;
+
+  const { registerList, unregisterList } = useDragRegistration(
+    sharedDragProviderContexts?.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 ??
+        (({ sourceListId, targetListId }) => sourceListId === targetListId),
+      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,
+      axis,
+      listId: id,
+      getDropTargetParentIndex,
+      activeDragContext:
+        sharedDragProviderContexts?.activeDragContext ?? ActiveDragContext,
+    }),
+    [
+      keys,
+      acceptsDrop,
+      axis,
+      id,
+      getDropTargetParentIndex,
+      sharedDragProviderContexts,
+    ]
+  );
+
+  // 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,
+});

package/src/components/sorting/createSharedDrag.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import {
+  ActiveDragContextType,
+  DragRegistrationContextType,
+  SharedDragProviderContexts,
+} from "./DragRegistration";
+import { SharedDragProvider } from "./SharedDragProvider";
+import { Sortable, SortableProps } from "./Sortable";
+
+export function createSharedDrag(): {
+  Provider: typeof SharedDragProvider;
+  props: SharedDragProviderContexts;
+  Sortable: <TItem, TElement extends HTMLElement>(
+    props: SortableProps<TItem, TElement>
+  ) => React.ReactNode;
+} {
+  const dragRegistrationContext =
+    React.createContext<DragRegistrationContextType | null>(null);
+  const activeDragContext = React.createContext<ActiveDragContextType | null>(
+    null
+  );
+
+  const Provider = ({ children }: { children: React.ReactNode }) => (
+    <SharedDragProvider
+      contexts={{
+        dragRegistrationContext,
+        activeDragContext,
+      }}
+    >
+      {children}
+    </SharedDragProvider>
+  );
+
+  const dragProps = {
+    dragRegistrationContext,
+    activeDragContext,
+  };
+
+  return {
+    Provider,
+    Sortable: <TItem, TElement extends HTMLElement>(
+      props: SortableProps<TItem, TElement>
+    ) => <Sortable sharedDragProviderContexts={dragProps} {...props} />,
+    props: dragProps,
+  };
+}

package/src/components/sorting/sorting.ts

@@ -0,0 +1,180 @@
+import { UniqueIdentifier } from "@dnd-kit/core";
+import * as React from "react";
+
+export type RelativeDropPosition = "above" | "below" | "inside";
+
+export type DropValidator = (
+  sourceIndex: number,
+  targetIndex: number,
+  position: RelativeDropPosition,
+  sourceListId: string,
+  targetListId: string
+) => boolean;
+
+export type AcceptsDrop = (
+  sourceIndex: number,
+  targetIndex: number,
+  position: RelativeDropPosition,
+  sourceListId: string,
+  targetListId: string
+) => boolean;
+
+export type MoveDragItemHandler = (
+  sourceIndex: number,
+  targetIndex: number,
+  position: RelativeDropPosition,
+  sourceListId: string,
+  targetListId: string
+) => void;
+
+export type AcceptsFromList = ({
+  sourceListId,
+  targetListId,
+}: {
+  sourceListId: string;
+  targetListId: string;
+}) => boolean;
+
+export interface DragItem {
+  id: UniqueIdentifier;
+  listId: string;
+  index: number;
+}
+
+export interface DropTarget {
+  id: UniqueIdentifier;
+  listId: string;
+  index: number;
+}
+
+export const normalizeListTargetIndex = (
+  index: number,
+  position: "above" | "below"
+): number => {
+  return position === "above" ? index : index + 1;
+};
+
+export const defaultAcceptsDrop: DropValidator = (
+  sourceIndex,
+  targetIndex,
+  position
+) => {
+  if (position === "inside") return false;
+
+  const normalized = normalizeListTargetIndex(targetIndex, position);
+
+  if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
+    return false;
+  }
+
+  return true;
+};
+
+export type SortableItemContextProps = {
+  keys: UniqueIdentifier[];
+  acceptsDrop: DropValidator;
+  axis: "x" | "y";
+  position: { x: number; y: number };
+  setActivatorEvent: (event: PointerEvent) => void;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+  listId: string;
+};
+
+export const SortableItemContext =
+  React.createContext<SortableItemContextProps>({
+    keys: [],
+    acceptsDrop: defaultAcceptsDrop,
+    axis: "y",
+    position: { x: 0, y: 0 },
+    setActivatorEvent: () => {},
+    getDropTargetParentIndex: undefined,
+    listId: "",
+  });
+
+export type ValidateDropIndicatorParams = {
+  acceptsDrop: DropValidator; // Function that validates if a drop is allowed
+  keys: UniqueIdentifier[]; // Array of all sortable item IDs
+  activeId: UniqueIdentifier; // ID of item being dragged
+  overId: UniqueIdentifier; // ID of item being dragged over
+  offsetStart: number; // Current drag position (x or y coordinate)
+  elementStart: number; // Start position of target element (left or top)
+  elementSize: number; // Size of target element (width or height)
+  sourceListId: string; // ID of the list the item is being dragged from
+  targetListId: string; // ID of the list the item is being dragged to
+};
+
+export function validateDropIndicator({
+  acceptsDrop,
+  keys,
+  activeId,
+  overId,
+  offsetStart,
+  elementStart,
+  elementSize,
+  sourceListId,
+  targetListId,
+}: ValidateDropIndicatorParams): RelativeDropPosition | undefined {
+  const activeIndex = keys.findIndex((id) => id === activeId); // index of item being dragged
+  const overIndex = keys.findIndex((id) => id === overId); // index of item being dragged over
+
+  if (overIndex === -1) return undefined;
+  if (activeIndex === -1 && sourceListId === targetListId) return undefined;
+
+  const acceptsDropInside = acceptsDrop(
+    activeIndex,
+    overIndex,
+    "inside",
+    sourceListId,
+    targetListId
+  );
+
+  // Drop into the middle third if possible
+  if (
+    isContainedInMiddleThird(elementStart, elementSize, offsetStart) &&
+    acceptsDropInside
+  ) {
+    return "inside";
+  }
+
+  const containingHalf = getContainingHalf(
+    elementStart,
+    elementSize,
+    offsetStart
+  );
+
+  // Drop above or below if possible
+  const acceptedHalf = acceptsDrop(
+    activeIndex,
+    overIndex,
+    containingHalf,
+    sourceListId,
+    targetListId
+  );
+
+  return acceptedHalf
+    ? containingHalf
+    : // Lastly, check if inside but not middle third
+      acceptsDropInside
+      ? "inside"
+      : undefined;
+}
+
+function isContainedInMiddleThird(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): boolean {
+  return (
+    offsetStart >= elementStart + elementSize / 3 &&
+    offsetStart <= elementStart + (elementSize * 2) / 3
+  );
+}
+
+function getContainingHalf(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): "above" | "below" {
+  if (offsetStart < elementStart + elementSize / 2) return "above";
+  return "below";
+}

package/src/contexts/DesignSystemConfiguration.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
+import { OpenPortalsProvider } from "./OpenPortalsContext";
 
 export type DesignSystemConfigurationContextValue = {
   platform: PlatformName;
@@ -39,11 +40,13 @@ export const DesignSystemConfigurationProvider = React.memo(
 
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-        <DialogProvider>
-          <ToastProvider>
-            <FloatingWindowProvider>{children}</FloatingWindowProvider>
-          </ToastProvider>
-        </DialogProvider>
+        <OpenPortalsProvider>
+          <DialogProvider>
+            <ToastProvider>
+              <FloatingWindowProvider>{children}</FloatingWindowProvider>
+            </ToastProvider>
+          </DialogProvider>
+        </OpenPortalsProvider>
       </DesignSystemConfigurationContext.Provider>
     );
   }