@dnd-kit/solid 0.2.3

package/index.js

@@ -0,0 +1,417 @@
+import { createComponent, Dynamic, memo } from 'solid-js/web';
+import { createContext, createMemo, onCleanup, createEffect, useContext, createSignal, Show, on, batch } from 'solid-js';
+import { DragDropManager, defaultPreset, Draggable, Feedback, Droppable } from '@dnd-kit/dom';
+export { KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
+import { isSortable } from '@dnd-kit/dom/sortable';
+import { effect, untracked } from '@dnd-kit/state';
+
+// src/core/context/DragDropProvider.tsx
+var DragDropContext = createContext(null);
+function useRenderer() {
+  const [transitionCount, setTransitionCount] = createSignal(0);
+  let rendering = null;
+  let resolver = null;
+  createEffect(
+    on(transitionCount, () => {
+      resolver?.();
+      rendering = null;
+    })
+  );
+  return {
+    renderer: {
+      get rendering() {
+        return rendering ?? Promise.resolve();
+      }
+    },
+    trackRendering(callback) {
+      if (!rendering) {
+        rendering = new Promise((resolve) => {
+          resolver = resolve;
+        });
+      }
+      batch(() => {
+        callback();
+        setTransitionCount((c) => c + 1);
+      });
+    }
+  };
+}
+
+// src/utilities/saveElementPosition.ts
+function createSaveElementPosition() {
+  let savedPosition = null;
+  const savePosition = (source) => {
+    const element = source.element;
+    const id = source.id;
+    const prevElement = element.previousElementSibling;
+    const nextElement = element.nextElementSibling;
+    const parentElement = element.parentElement;
+    savedPosition = {
+      id,
+      element,
+      prevElement: prevElement === element ? null : prevElement,
+      nextElement: nextElement === element ? null : nextElement,
+      parentElement
+    };
+  };
+  const restorePosition = (element) => {
+    if (!savedPosition) return;
+    const { prevElement, nextElement, parentElement } = savedPosition;
+    if (prevElement && element.previousElementSibling !== prevElement) {
+      prevElement.insertAdjacentElement("afterend", element);
+    } else if (nextElement && element.nextElementSibling !== nextElement) {
+      nextElement.insertAdjacentElement("beforebegin", element);
+    } else if (!prevElement && !nextElement && parentElement) {
+      parentElement.appendChild(element);
+    }
+  };
+  const clearPosition = () => {
+    savedPosition = null;
+  };
+  return {
+    savePosition,
+    clearPosition,
+    restorePosition
+  };
+}
+
+// src/core/context/DragDropProvider.tsx
+function DragDropProvider(props) {
+  const {
+    savePosition,
+    restorePosition,
+    clearPosition
+  } = createSaveElementPosition();
+  const {
+    renderer,
+    trackRendering
+  } = useRenderer();
+  const manager = createMemo(() => props.manager ?? new DragDropManager(props));
+  onCleanup(() => {
+    if (!props.manager) {
+      manager().destroy();
+    }
+  });
+  createEffect(() => {
+    const _manager = manager();
+    _manager.renderer = renderer;
+    _manager.plugins = props.plugins ?? defaultPreset.plugins;
+    _manager.sensors = props.sensors ?? defaultPreset.sensors;
+    _manager.modifiers = props.modifiers ?? defaultPreset.modifiers;
+  });
+  createEffect(() => {
+    const disposers = [];
+    const monitor = manager().monitor;
+    disposers.push(monitor.addEventListener("beforedragstart", (event, manager2) => {
+      if (isSortable(event.operation.source)) {
+        savePosition(event.operation.source);
+      }
+      const callback = props.onBeforeDragStart;
+      if (callback) {
+        trackRendering(() => callback(event, manager2));
+      }
+    }), monitor.addEventListener("dragstart", (event, manager2) => {
+      props.onDragStart?.(event, manager2);
+    }), monitor.addEventListener("dragover", (event, manager2) => {
+      const callback = props.onDragOver;
+      if (callback) {
+        trackRendering(() => callback(event, manager2));
+        if (isSortable(event.operation.source)) {
+          const source = event.operation.source;
+          queueMicrotask(() => savePosition(source));
+        }
+      }
+    }), monitor.addEventListener("dragmove", (event, manager2) => {
+      const callback = props.onDragMove;
+      if (callback) {
+        trackRendering(() => callback(event, manager2));
+      }
+    }), monitor.addEventListener("dragend", (event, manager2) => {
+      if (isSortable(event.operation.source)) {
+        restorePosition(event.operation.source.element);
+      }
+      const callback = props.onDragEnd;
+      if (callback) {
+        trackRendering(() => callback(event, manager2));
+      }
+      clearPosition();
+    }), monitor.addEventListener("collision", (event, manager2) => {
+      props.onCollision?.(event, manager2);
+    }));
+    onCleanup(() => {
+      disposers.forEach((cleanup) => cleanup());
+    });
+  });
+  return createComponent(DragDropContext.Provider, {
+    get value() {
+      return manager();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useDeepSignal(target) {
+  const tracked = /* @__PURE__ */ new Map();
+  const [dirty, setDirty] = createSignal(0);
+  createEffect(() => {
+    const _target = target();
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    const dispose = effect(() => {
+      let stale = false;
+      for (const entry of tracked) {
+        const [key] = entry;
+        const value = untracked(() => entry[1]);
+        const latestValue = _target[key];
+        if (value !== latestValue) {
+          stale = true;
+          tracked.set(key, latestValue);
+        }
+      }
+      if (stale) {
+        setDirty((v) => v + 1);
+      }
+    });
+    onCleanup(dispose);
+  });
+  return () => {
+    const _target = target();
+    void dirty();
+    return _target ? new Proxy(_target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.set(key, value);
+        return value;
+      }
+    }) : _target;
+  };
+}
+function useDragDropManager() {
+  return useContext(DragDropContext);
+}
+
+// src/core/hooks/useInstance.ts
+function useInstance(initializer) {
+  const manager = useDragDropManager() ?? void 0;
+  const instance = initializer(manager);
+  createEffect(() => {
+    instance.manager = manager;
+    const cleanup = instance.register();
+    onCleanup(() => cleanup?.());
+  });
+  return instance;
+}
+
+// src/core/draggable/useDraggable.ts
+function useDraggable(input) {
+  const draggable = useInstance(
+    (manager) => new Draggable(
+      {
+        ...input,
+        register: false,
+        element: input.element,
+        handle: input.handle
+      },
+      manager
+    )
+  );
+  const trackedDraggable = useDeepSignal(() => draggable);
+  const [element, setElement] = createSignal(
+    input.element
+  );
+  const [handle, setHandle] = createSignal(input.handle);
+  createEffect(() => {
+    const el = element();
+    if (el) draggable.element = el;
+    const h = handle();
+    if (h) draggable.handle = h;
+    draggable.id = input.id;
+    draggable.disabled = input.disabled ?? false;
+    draggable.feedback = input.feedback ?? "default";
+    draggable.alignment = input.alignment;
+    draggable.modifiers = input.modifiers;
+    draggable.sensors = input.sensors;
+    if (input.data) {
+      draggable.data = input.data;
+    }
+  });
+  return {
+    get draggable() {
+      return draggable;
+    },
+    isDragging: () => trackedDraggable().isDragging,
+    isDropping: () => trackedDraggable().isDropping,
+    isDragSource: () => trackedDraggable().isDragSource,
+    ref: setElement,
+    handleRef: setHandle
+  };
+}
+
+// src/core/hooks/useDragOperation.ts
+function useDragOperation() {
+  const manager = useDragDropManager();
+  const trackedDragOperation = useDeepSignal(
+    () => manager?.dragOperation
+  );
+  return {
+    source: () => trackedDragOperation()?.source,
+    target: () => trackedDragOperation()?.target,
+    status: () => trackedDragOperation()?.status
+  };
+}
+
+// src/core/draggable/DragOverlay.tsx
+function DragOverlay(props) {
+  const [element, setElement] = createSignal();
+  const manager = useDragDropManager();
+  const patchedManager = createPatchedManager(() => manager);
+  const dragOperation = useDragOperation();
+  const source = () => dragOperation.source();
+  const isDisabled = () => {
+    if (typeof props.disabled === "function") {
+      return props.disabled(source());
+    }
+    return props.disabled ?? false;
+  };
+  createEffect(() => {
+    if (!source()) {
+      setElement(void 0);
+    }
+  });
+  createEffect(() => {
+    const _manager = manager;
+    if (!_manager || isDisabled()) return;
+    const feedback = _manager.plugins.find((plugin) => plugin instanceof Feedback);
+    if (!feedback) return;
+    feedback.overlay = element();
+    onCleanup(() => {
+      feedback.overlay = void 0;
+    });
+  });
+  return createComponent(DragDropContext.Provider, {
+    get value() {
+      return patchedManager();
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return memo(() => !!!isDisabled())() ? source() : void 0;
+        },
+        children: (src) => createComponent(Dynamic, {
+          get component() {
+            return props.tag || "div";
+          },
+          get ["class"]() {
+            return props.class;
+          },
+          get style() {
+            return props.style;
+          },
+          "data-dnd-overlay": true,
+          ref: setElement,
+          get children() {
+            return memo(() => typeof props.children === "function")() ? props.children(src()) : props.children;
+          }
+        })
+      });
+    }
+  });
+}
+function createPatchedManager(manager) {
+  return createMemo(() => {
+    const _manager = manager();
+    if (!_manager) return null;
+    const patchedRegistry = new Proxy(_manager.registry, {
+      get(target, property) {
+        if (property === "register" || property === "unregister") {
+          return noop;
+        }
+        return target[property];
+      }
+    });
+    return new Proxy(_manager, {
+      get(target, property) {
+        if (property === "registry") {
+          return patchedRegistry;
+        }
+        return target[property];
+      }
+    });
+  });
+}
+function noop() {
+  return () => {
+  };
+}
+function useDroppable(input) {
+  const droppable = useInstance(
+    (manager) => new Droppable(
+      {
+        ...input,
+        register: false,
+        element: input.element
+      },
+      manager
+    )
+  );
+  const trackedDroppable = useDeepSignal(() => droppable);
+  const [element, setElement] = createSignal(
+    input.element
+  );
+  createEffect(() => {
+    const el = element();
+    if (el) droppable.element = el;
+    droppable.id = input.id;
+    droppable.accept = input.accept;
+    droppable.type = input.type;
+    droppable.disabled = input.disabled ?? false;
+    if (input.collisionDetector) {
+      droppable.collisionDetector = input.collisionDetector;
+    }
+    if (input.data) {
+      droppable.data = input.data;
+    }
+  });
+  return {
+    get droppable() {
+      return droppable;
+    },
+    isDropTarget: () => trackedDroppable().isDropTarget,
+    ref: setElement
+  };
+}
+function useDragDropMonitor(handlers) {
+  const manager = useDragDropManager();
+  createEffect(() => {
+    if (!manager) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          "useDragDropMonitor hook was called outside of a DragDropProvider. Make sure your app is wrapped in a DragDropProvider component."
+        );
+      }
+      return;
+    }
+    const cleanupFns = Object.entries(handlers).reduce(
+      (acc, [handlerName, handler]) => {
+        if (handler) {
+          const eventName = handlerName.replace(/^on/, "").toLowerCase();
+          const unsubscribe = manager.monitor.addEventListener(
+            eventName,
+            handler
+          );
+          acc.push(unsubscribe);
+        }
+        return acc;
+      },
+      []
+    );
+    onCleanup(() => cleanupFns.forEach((cleanup) => cleanup()));
+  });
+}
+
+export { DragDropProvider, DragOverlay, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@dnd-kit/solid",
+  "version": "0.2.3",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "index.d.ts",
+    "index.cjs",
+    "hooks.js",
+    "hooks.d.ts",
+    "hooks.cjs",
+    "sortable.js",
+    "sortable.d.ts",
+    "sortable.cjs",
+    "utilities.js",
+    "utilities.d.ts",
+    "utilities.cjs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./hooks": {
+      "types": "./hooks.d.ts",
+      "import": "./hooks.js",
+      "require": "./hooks.cjs"
+    },
+    "./sortable": {
+      "types": "./sortable.d.ts",
+      "import": "./sortable.js",
+      "require": "./sortable.cjs"
+    },
+    "./utilities": {
+      "types": "./utilities.d.ts",
+      "import": "./utilities.js",
+      "require": "./utilities.cjs"
+    }
+  },
+  "scripts": {
+    "build": "bun build:utilities && bun build:hooks && bun build:core && bun build:sortable",
+    "build:core": "tsup src/core/index.ts",
+    "build:hooks": "tsup --entry.hooks src/hooks/index.ts",
+    "build:sortable": "tsup --entry.sortable src/sortable/index.ts",
+    "build:utilities": "tsup --entry.utilities src/utilities/index.ts",
+    "dev": "bun build:utilities --watch & bun build:hooks --watch & bun build:core --watch & bun build:sortable --watch",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@dnd-kit/abstract": "^0.2.3",
+    "@dnd-kit/dom": "^0.2.3",
+    "@dnd-kit/state": "^0.2.3",
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
+  },
+  "devDependencies": {
+    "esbuild-plugin-solid": "^0.6.0",
+    "tsup": "8.3.0",
+    "typescript": "^5.5.2",
+    "solid-js": "^1.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/clauderic/dnd-kit"
+  }
+}

package/sortable.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var sortable = require('@dnd-kit/dom/sortable');
+var state = require('@dnd-kit/state');
+var solidJs = require('solid-js');
+var hooks = require('@dnd-kit/solid/hooks');
+var solid = require('@dnd-kit/solid');
+
+// src/sortable/useSortable.ts
+function useSortable(input) {
+  const transition = {
+    ...sortable.defaultSortableTransition,
+    ...input.transition
+  };
+  const sortable$1 = solid.useInstance((manager) => {
+    return new sortable.Sortable(
+      {
+        ...input,
+        register: false,
+        transition,
+        element: input.element,
+        handle: input.handle,
+        target: input.target
+      },
+      manager
+    );
+  });
+  const trackedSortable = hooks.useDeepSignal(() => sortable$1);
+  const [element, setElement] = solidJs.createSignal(
+    input.element
+  );
+  const [handle, setHandle] = solidJs.createSignal(input.handle);
+  const [source, setSource] = solidJs.createSignal(input.source);
+  const [target, setTarget] = solidJs.createSignal(input.target);
+  solidJs.createEffect(() => {
+    const el = element();
+    if (el) sortable$1.element = el;
+    const h = handle();
+    if (h) sortable$1.handle = h;
+    const s = source();
+    if (s) sortable$1.source = s;
+    const t = target();
+    if (t) sortable$1.target = t;
+    sortable$1.id = input.id;
+    sortable$1.disabled = input.disabled ?? false;
+    sortable$1.feedback = input.feedback ?? "default";
+    sortable$1.alignment = input.alignment;
+    sortable$1.modifiers = input.modifiers;
+    sortable$1.sensors = input.sensors;
+    sortable$1.accept = input.accept;
+    sortable$1.type = input.type;
+    sortable$1.collisionPriority = input.collisionPriority;
+    sortable$1.transition = input.transition ? { ...sortable.defaultSortableTransition, ...input.transition } : sortable.defaultSortableTransition;
+    if (input.collisionDetector) {
+      sortable$1.collisionDetector = input.collisionDetector;
+    }
+    if (input.data) {
+      sortable$1.data = input.data;
+    }
+  });
+  solidJs.createEffect(
+    solidJs.on(
+      () => [input.group, input.index],
+      () => {
+        state.batch(() => {
+          sortable$1.group = input.group;
+          sortable$1.index = input.index;
+        });
+      }
+    )
+  );
+  solidJs.createEffect(
+    solidJs.on(
+      () => input.index,
+      () => {
+        if (sortable$1.manager?.dragOperation.status.idle && sortable$1.transition?.idle) {
+          sortable$1.refreshShape();
+        }
+      }
+    )
+  );
+  return {
+    get sortable() {
+      return sortable$1;
+    },
+    isDragging: () => trackedSortable().isDragging,
+    isDropping: () => trackedSortable().isDropping,
+    isDragSource: () => trackedSortable().isDragSource,
+    isDropTarget: () => trackedSortable().isDropTarget,
+    ref: setElement,
+    handleRef: setHandle,
+    sourceRef: setSource,
+    targetRef: setTarget
+  };
+}
+
+Object.defineProperty(exports, "isSortable", {
+  enumerable: true,
+  get: function () { return sortable.isSortable; }
+});
+exports.useSortable = useSortable;
+//# sourceMappingURL=sortable.cjs.map
+//# sourceMappingURL=sortable.cjs.map

package/sortable.d.ts

@@ -0,0 +1,24 @@
+import * as solid_js from 'solid-js';
+import { Data } from '@dnd-kit/abstract';
+import { SortableInput, Sortable } from '@dnd-kit/dom/sortable';
+export { isSortable } from '@dnd-kit/dom/sortable';
+
+interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element' | 'source' | 'target'> {
+    handle?: Element;
+    element?: Element;
+    source?: Element;
+    target?: Element;
+}
+declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
+    readonly sortable: Sortable<T>;
+    isDragging: () => boolean;
+    isDropping: () => boolean;
+    isDragSource: () => boolean;
+    isDropTarget: () => boolean;
+    ref: solid_js.Setter<Element | undefined>;
+    handleRef: solid_js.Setter<Element | undefined>;
+    sourceRef: solid_js.Setter<Element | undefined>;
+    targetRef: solid_js.Setter<Element | undefined>;
+};
+
+export { type UseSortableInput, useSortable };