fluid-dnd/dist/react/index.mjs

An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte

import { useState as b, useRef as d, useEffect as S } from "react";
import { H as A } from "../HandlerPublisher-FfZFZOWF.js";
import { n as C } from "../index-CU_UvYra.js";
import { flushSync as p } from "react-dom";
function E(l, i) {
  const [t, r] = b(l), u = d(t);
  S(() => {
    u.current = t;
  }, [t]);
  function f(e, s = !1) {
    const o = u.current[e], n = () => {
      r((c) => [...c.slice(0, e), ...c.slice(e + 1)]);
    };
    return s ? p(n) : n(), o;
  }
  function m(e, s, o = !1) {
    const n = () => {
      r((c) => [...c.slice(0, e), s, ...c.slice(e)]);
    };
    o ? p(n) : n();
  }
  function g() {
    return t.length;
  }
  function h(e) {
    return t[e];
  }
  function a(e, s, o) {
    import("../insert-C4OmG7nn.js").then(({ insertToListEmpty: n }) => {
      n(e, i.current, s, o);
    });
  }
  return [t, r, {
    removeAtEvent: f,
    insertEvent: m,
    getLength: g,
    getValue: h,
    insertToListEmpty: a
  }];
}
const v = new A();
function k(l, i) {
  const t = d(null), [r, u, f] = E(l, t), [m, g, h] = C(
    f,
    v,
    i,
    "data-index"
  );
  return S(() => {
    const a = h(t.current);
    return () => {
      a && a.disconnect();
    };
  }, [r.length, i]), [t, r, u, g, m];
}
export {
  k as useDragAndDrop
};