@dnd-kit/solid 0.2.3

package/README.md

@@ -0,0 +1,17 @@
+# @dnd-kit/solid
+
+[![Stable release](https://img.shields.io/npm/v/@dnd-kit/solid.svg)](https://npm.im/@dnd-kit/solid)
+
+The SolidJS layer for @dnd-kit, built on top of @dnd-kit/dom.
+
+## Installation
+
+To get started, install the `@dnd-kit/solid` package via npm or yarn:
+
+```
+npm install @dnd-kit/solid
+```
+
+## Usage
+
+Visit [docs.dndkit.com](https://docs.dndkit.com) to learn how to get started with @dnd-kit.

package/hooks.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var state = require('@dnd-kit/state');
+var solidJs = require('solid-js');
+
+// src/hooks/useDeepSignal.ts
+function useDeepSignal(target) {
+  const tracked = /* @__PURE__ */ new Map();
+  const [dirty, setDirty] = solidJs.createSignal(0);
+  solidJs.createEffect(() => {
+    const _target = target();
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    const dispose = state.effect(() => {
+      let stale = false;
+      for (const entry of tracked) {
+        const [key] = entry;
+        const value = state.untracked(() => entry[1]);
+        const latestValue = _target[key];
+        if (value !== latestValue) {
+          stale = true;
+          tracked.set(key, latestValue);
+        }
+      }
+      if (stale) {
+        setDirty((v) => v + 1);
+      }
+    });
+    solidJs.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;
+  };
+}
+
+exports.useDeepSignal = useDeepSignal;
+//# sourceMappingURL=hooks.cjs.map
+//# sourceMappingURL=hooks.cjs.map

package/hooks.d.ts

@@ -0,0 +1,6 @@
+import { Accessor } from 'solid-js';
+
+/** Trigger a re-render when reading signal properties of an object. */
+declare function useDeepSignal<T extends object | null | undefined>(target: Accessor<T>): Accessor<T>;
+
+export { useDeepSignal };

package/hooks.js

@@ -0,0 +1,46 @@
+import { effect, untracked } from '@dnd-kit/state';
+import { createSignal, createEffect, onCleanup } from 'solid-js';
+
+// src/hooks/useDeepSignal.ts
+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;
+  };
+}
+
+export { useDeepSignal };
+//# sourceMappingURL=hooks.js.map
+//# sourceMappingURL=hooks.js.map

package/index.cjs

@@ -0,0 +1,433 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var dom = require('@dnd-kit/dom');
+var sortable = require('@dnd-kit/dom/sortable');
+var state = require('@dnd-kit/state');
+
+// src/core/context/DragDropProvider.tsx
+var DragDropContext = solidJs.createContext(null);
+function useRenderer() {
+  const [transitionCount, setTransitionCount] = solidJs.createSignal(0);
+  let rendering = null;
+  let resolver = null;
+  solidJs.createEffect(
+    solidJs.on(transitionCount, () => {
+      resolver?.();
+      rendering = null;
+    })
+  );
+  return {
+    renderer: {
+      get rendering() {
+        return rendering ?? Promise.resolve();
+      }
+    },
+    trackRendering(callback) {
+      if (!rendering) {
+        rendering = new Promise((resolve) => {
+          resolver = resolve;
+        });
+      }
+      solidJs.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 = solidJs.createMemo(() => props.manager ?? new dom.DragDropManager(props));
+  solidJs.onCleanup(() => {
+    if (!props.manager) {
+      manager().destroy();
+    }
+  });
+  solidJs.createEffect(() => {
+    const _manager = manager();
+    _manager.renderer = renderer;
+    _manager.plugins = props.plugins ?? dom.defaultPreset.plugins;
+    _manager.sensors = props.sensors ?? dom.defaultPreset.sensors;
+    _manager.modifiers = props.modifiers ?? dom.defaultPreset.modifiers;
+  });
+  solidJs.createEffect(() => {
+    const disposers = [];
+    const monitor = manager().monitor;
+    disposers.push(monitor.addEventListener("beforedragstart", (event, manager2) => {
+      if (sortable.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 (sortable.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 (sortable.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);
+    }));
+    solidJs.onCleanup(() => {
+      disposers.forEach((cleanup) => cleanup());
+    });
+  });
+  return web.createComponent(DragDropContext.Provider, {
+    get value() {
+      return manager();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useDeepSignal(target) {
+  const tracked = /* @__PURE__ */ new Map();
+  const [dirty, setDirty] = solidJs.createSignal(0);
+  solidJs.createEffect(() => {
+    const _target = target();
+    if (!_target) {
+      tracked.clear();
+      return;
+    }
+    const dispose = state.effect(() => {
+      let stale = false;
+      for (const entry of tracked) {
+        const [key] = entry;
+        const value = state.untracked(() => entry[1]);
+        const latestValue = _target[key];
+        if (value !== latestValue) {
+          stale = true;
+          tracked.set(key, latestValue);
+        }
+      }
+      if (stale) {
+        setDirty((v) => v + 1);
+      }
+    });
+    solidJs.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 solidJs.useContext(DragDropContext);
+}
+
+// src/core/hooks/useInstance.ts
+function useInstance(initializer) {
+  const manager = useDragDropManager() ?? void 0;
+  const instance = initializer(manager);
+  solidJs.createEffect(() => {
+    instance.manager = manager;
+    const cleanup = instance.register();
+    solidJs.onCleanup(() => cleanup?.());
+  });
+  return instance;
+}
+
+// src/core/draggable/useDraggable.ts
+function useDraggable(input) {
+  const draggable = useInstance(
+    (manager) => new dom.Draggable(
+      {
+        ...input,
+        register: false,
+        element: input.element,
+        handle: input.handle
+      },
+      manager
+    )
+  );
+  const trackedDraggable = useDeepSignal(() => draggable);
+  const [element, setElement] = solidJs.createSignal(
+    input.element
+  );
+  const [handle, setHandle] = solidJs.createSignal(input.handle);
+  solidJs.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] = solidJs.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;
+  };
+  solidJs.createEffect(() => {
+    if (!source()) {
+      setElement(void 0);
+    }
+  });
+  solidJs.createEffect(() => {
+    const _manager = manager;
+    if (!_manager || isDisabled()) return;
+    const feedback = _manager.plugins.find((plugin) => plugin instanceof dom.Feedback);
+    if (!feedback) return;
+    feedback.overlay = element();
+    solidJs.onCleanup(() => {
+      feedback.overlay = void 0;
+    });
+  });
+  return web.createComponent(DragDropContext.Provider, {
+    get value() {
+      return patchedManager();
+    },
+    get children() {
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return web.memo(() => !!!isDisabled())() ? source() : void 0;
+        },
+        children: (src) => web.createComponent(web.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 web.memo(() => typeof props.children === "function")() ? props.children(src()) : props.children;
+          }
+        })
+      });
+    }
+  });
+}
+function createPatchedManager(manager) {
+  return solidJs.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 dom.Droppable(
+      {
+        ...input,
+        register: false,
+        element: input.element
+      },
+      manager
+    )
+  );
+  const trackedDroppable = useDeepSignal(() => droppable);
+  const [element, setElement] = solidJs.createSignal(
+    input.element
+  );
+  solidJs.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();
+  solidJs.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;
+      },
+      []
+    );
+    solidJs.onCleanup(() => cleanupFns.forEach((cleanup) => cleanup()));
+  });
+}
+
+Object.defineProperty(exports, "KeyboardSensor", {
+  enumerable: true,
+  get: function () { return dom.KeyboardSensor; }
+});
+Object.defineProperty(exports, "PointerSensor", {
+  enumerable: true,
+  get: function () { return dom.PointerSensor; }
+});
+exports.DragDropProvider = DragDropProvider;
+exports.DragOverlay = DragOverlay;
+exports.useDragDropManager = useDragDropManager;
+exports.useDragDropMonitor = useDragDropMonitor;
+exports.useDragOperation = useDragOperation;
+exports.useDraggable = useDraggable;
+exports.useDroppable = useDroppable;
+exports.useInstance = useInstance;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/index.d.ts

@@ -0,0 +1,77 @@
+import * as solid_js from 'solid-js';
+import { ParentProps, JSX, ValidComponent } from 'solid-js';
+import * as _dnd_kit_dom from '@dnd-kit/dom';
+import { DragDropManagerInput, DragDropManager, Draggable, Droppable, DraggableInput, DroppableInput } from '@dnd-kit/dom';
+export { DragDropManager, KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
+import * as _dnd_kit_abstract from '@dnd-kit/abstract';
+import { DragDropEvents, Data } from '@dnd-kit/abstract';
+import { CleanupFunction } from '@dnd-kit/state';
+
+type Events$1 = DragDropEvents<Draggable, Droppable, DragDropManager>;
+interface DragDropProviderProps extends DragDropManagerInput, ParentProps {
+    manager?: DragDropManager;
+    onBeforeDragStart?: Events$1['beforedragstart'];
+    onCollision?: Events$1['collision'];
+    onDragStart?: Events$1['dragstart'];
+    onDragMove?: Events$1['dragmove'];
+    onDragOver?: Events$1['dragover'];
+    onDragEnd?: Events$1['dragend'];
+}
+declare function DragDropProvider(props: DragDropProviderProps): solid_js.JSX.Element;
+
+interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T>, 'handle' | 'element'> {
+    handle?: Element;
+    element?: Element;
+}
+declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
+    readonly draggable: Draggable<T>;
+    isDragging: () => boolean;
+    isDropping: () => boolean;
+    isDragSource: () => boolean;
+    ref: solid_js.Setter<Element | undefined>;
+    handleRef: solid_js.Setter<Element | undefined>;
+};
+
+interface DragOverlayProps<T extends Data, U extends Draggable<T>> {
+    class?: string;
+    children: JSX.Element | ((source: U) => JSX.Element);
+    style?: JSX.CSSProperties;
+    tag?: ValidComponent;
+    disabled?: boolean | ((source: U | null) => boolean);
+}
+declare function DragOverlay<T extends Data, U extends Draggable<T>>(props: DragOverlayProps<T, U>): JSX.Element;
+
+interface UseDroppableInput<T extends Data = Data> extends Omit<DroppableInput<T>, 'element'> {
+    element?: Element;
+}
+declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>): {
+    readonly droppable: Droppable<T>;
+    isDropTarget: () => boolean;
+    ref: solid_js.Setter<Element | undefined>;
+};
+
+declare function useDragDropManager(): _dnd_kit_dom.DragDropManager<_dnd_kit_abstract.Data, _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data>, _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data>> | null;
+
+type DragDropEventMap = {
+    beforedragstart: 'onBeforeDragStart';
+};
+type EventHandlerName<T extends string> = T extends keyof DragDropEventMap ? DragDropEventMap[T] : T extends `drag${infer Second}${infer Rest}` ? `onDrag${Uppercase<Second>}${Rest}` : `on${Capitalize<T>}`;
+type Events<T extends Data, U extends Draggable<T>, V extends Droppable<T>, W extends DragDropManager<T, U, V>> = DragDropEvents<U, V, W>;
+type EventHandlers<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> = {
+    [K in keyof Events<T, U, V, W> as EventHandlerName<K>]?: Events<T, U, V, W>[K];
+};
+declare function useDragDropMonitor<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>(handlers: EventHandlers<T, U, V, W>): void;
+
+declare function useDragOperation(): {
+    source: () => _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null | undefined;
+    target: () => _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null | undefined;
+    status: () => _dnd_kit_abstract.DragOperationStatus | undefined;
+};
+
+interface Instance<T extends DragDropManager = DragDropManager> {
+    manager: T | undefined;
+    register(): CleanupFunction | void;
+}
+declare function useInstance<T extends Instance>(initializer: (manager: DragDropManager | undefined) => T): T;
+
+export { type EventHandlers as DragDropEventHandlers, type Events$1 as DragDropEvents, DragDropProvider, type DragDropProviderProps, DragOverlay, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };