@noya-app/noya-designsystem 0.1.55 → 0.1.57

package/src/components/sorting/createSharedDrag.tsx

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

package/src/components/sorting/sorting.ts

@@ -0,0 +1,215 @@
+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 {
+  itemId: UniqueIdentifier;
+  listId: string;
+  index: number;
+}
+
+export type DragState = {
+  source: DragItem | null;
+  target: DragItem | null;
+  indicator: RelativeDropPosition | null;
+};
+
+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
+  );
+
+  // For moving within the same list, we are more strict about the drop position.
+  // The source item must actually be contained in the target element.
+  // Otherwise the user may unintentionally drop the item into target,
+  // since it’s difficult to select no target at all.
+  // When dropping into a different list, the user definitely wants the item within that list,
+  // and it also handles the empty list case.
+  if (
+    !isContained(elementStart, elementSize, offsetStart) &&
+    sourceListId === targetListId
+  ) {
+    return undefined;
+  }
+
+  // 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 isContained(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): boolean {
+  return (
+    offsetStart >= elementStart && offsetStart <= elementStart + elementSize
+  );
+}
+
+function getContainingHalf(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): "above" | "below" {
+  if (offsetStart < elementStart + elementSize / 2) return "above";
+  return "below";
+}
+
+export function createDragItemKey(listId: string, itemId: UniqueIdentifier) {
+  return `${listId}-~-${itemId}`;
+}
+
+export function parseDragItemKey(key: string): {
+  listId: string;
+  itemId: UniqueIdentifier;
+} {
+  const [listId, itemId] = key.split("-~-");
+  return { listId, itemId };
+}

package/src/index.tsx

@@ -60,8 +60,10 @@ export * from "./components/SegmentedControl";
 export * from "./components/SelectionToolbar";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
-export * from "./components/Sortable";
-export type { RelativeDropPosition } from "./components/Sortable";
+export * from "./components/sorting/createSharedDrag";
+export * from "./components/sorting/SharedDragProvider";
+export * from "./components/sorting/Sortable";
+export * from "./components/sorting/sorting";
 export * from "./components/Spacer";
 export * from "./components/Switch";
 export * from "./components/Text";

package/src/utils/moveTreeItem.ts

@@ -2,7 +2,7 @@ import { isDeepEqual } from "@noya-app/noya-utils";
 import {
   defaultAcceptsDrop,
   RelativeDropPosition,
-} from "../components/Sortable";
+} from "../components/sorting/sorting";
 
 type MoveOptions = {
   paths: number[][];
@@ -91,7 +91,9 @@ export function acceptsDrop({
     return defaultAcceptsDrop(
       sourceIndexPath.at(-1)!,
       targetIndexPath.at(-1)!,
-      position
+      position,
+      "",
+      ""
     );
   }