@archbase/kanban 4.0.37

package/dist/index.js

@@ -0,0 +1,1041 @@
+import { extractClosestEdge as $, attachClosestEdge as oe } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { reorderWithEdge as z } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";
+import { jsx as m, jsxs as T, Fragment as ae } from "react/jsx-runtime";
+import H from "classnames";
+import { forwardRef as J, createContext as Ie, useContext as ye, useRef as R, useState as se, useCallback as E, useEffect as F, memo as ie, useMemo as V, Fragment as ve } from "react";
+import { createPortal as le } from "react-dom";
+import { VList as De } from "virtua";
+import { draggable as de, dropTargetForElements as ce, monitorForElements as ke } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine as Q } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { setCustomNativeDragPreview as ue } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { preserveOffsetOnSource as ge } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { autoScrollForElements as me } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { autoScroller as M } from "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll";
+const we = (e) => e?.type === "card", j = (e) => e?.type === "column", G = (e, r) => {
+  const t = [], n = r[e];
+  return n && n.children?.forEach((a) => {
+    const l = r[a];
+    l && t.push(l);
+  }), t;
+}, Se = ({
+  source: e,
+  location: r,
+  columns: t,
+  dataSource: n,
+  onCardMove: o,
+  onColumnMove: a
+}) => {
+  if (j(e.data)) {
+    if (!a)
+      return;
+    const i = r.current.dropTargets[0];
+    if (!i)
+      return;
+    const f = i.data;
+    if (!j(f))
+      return;
+    const g = e.data.columnId, x = f.columnId;
+    if (g === x)
+      return;
+    const u = t.findIndex((D) => D.id === g), k = t.findIndex((D) => D.id === x);
+    if (u === -1 || k === -1)
+      return;
+    const p = $(f), S = z({
+      axis: "horizontal",
+      list: t,
+      startIndex: u,
+      indexOfTarget: k,
+      closestEdgeOfTarget: p
+    });
+    a({
+      columnId: g,
+      fromIndex: u,
+      toIndex: S.findIndex((D) => D.id === g)
+    });
+    return;
+  }
+  if (!we(e.data))
+    return;
+  const l = e.data.itemId, d = e.data.columnId, y = r.current.dropTargets[0];
+  if (!y)
+    return;
+  const h = y.data;
+  if (h["card-drop-target"]) {
+    const i = h.columnId, f = h.itemId, g = $(h), x = n[d], u = n[i];
+    if (!x || !u)
+      return;
+    if (d === i) {
+      const k = G(i, n), p = k.findIndex(
+        (w) => w.id === l
+      ), S = k.findIndex(
+        (w) => w.id === f
+      );
+      if (p === -1 || S === -1 || p === S)
+        return;
+      const D = z({
+        axis: "vertical",
+        list: k,
+        startIndex: p,
+        indexOfTarget: S,
+        closestEdgeOfTarget: g
+      }), c = D.findIndex(
+        (w) => w.id === l
+      ), C = c > 0 ? D[c - 1] : null, s = c < D.length - 1 ? D[c + 1] : null;
+      o && o({
+        cardId: l,
+        fromColumnId: d,
+        toColumnId: i,
+        taskAbove: C?.id,
+        taskBelow: s?.id,
+        position: c
+      });
+    } else {
+      const k = G(i, n), p = k.findIndex(
+        (N) => N.id === f
+      );
+      if (p === -1)
+        return;
+      const S = g === "bottom" ? p + 1 : p, D = G(d, n).find(
+        (N) => N.id === l
+      );
+      if (!D)
+        return;
+      const c = [...k];
+      c.splice(S, 0, D);
+      const C = z({
+        axis: "vertical",
+        list: c,
+        startIndex: S,
+        indexOfTarget: S,
+        closestEdgeOfTarget: g
+      }), s = C.findIndex(
+        (N) => N.id === l
+      ), w = s > 0 ? C[s - 1] : null, v = s < C.length - 1 ? C[s + 1] : null;
+      o && o({
+        cardId: l,
+        fromColumnId: d,
+        toColumnId: i,
+        taskAbove: w?.id,
+        taskBelow: v?.id,
+        position: s
+      });
+    }
+  } else if (j(h)) {
+    const i = h.columnId, f = G(i, n), g = f.length > 0 ? f[f.length - 1] : null;
+    o && o({
+      cardId: l,
+      fromColumnId: d,
+      toColumnId: i,
+      taskAbove: g?.id,
+      taskBelow: null,
+      position: f.length
+    });
+  }
+}, it = (e, r) => {
+  const { columnId: t, toIndex: n } = e, o = { ...r }, a = [...o.root?.children || []], l = a.indexOf(t);
+  return l === -1 || (a.splice(l, 1), a.splice(n, 0, t), o.root && (o.root.children = a)), o;
+}, lt = (e, r, t, n, o) => {
+  const { cardId: a, fromColumnId: l, toColumnId: d, taskAbove: y, taskBelow: h } = e, i = { ...r };
+  i[l]?.children && (i[l].children = i[l].children.filter((u) => u !== a), i[l]?.totalItems !== void 0 && i[l].totalItems > 0 && i[l].totalItems--), o && i[l] && (i[l] = o(
+    i[l]
+  ));
+  const f = i[d]?.children || [];
+  let g = 0;
+  y ? g = f.indexOf(y) + 1 : h && (g = f.indexOf(h));
+  const x = f.includes(a);
+  if (i[d]?.totalItems !== void 0 && !x && i[d].totalItems++, t && i[a]) {
+    const u = t?.(
+      i[d],
+      i[a]
+    );
+    i[a] = u || i[a];
+  }
+  return i[d]?.children && (i[d].children = i[d]?.children?.filter((u) => u !== a), i[d].children.splice(g, 0, a)), n && i[d] && (i[d] = n(
+    i[d]
+  )), i;
+}, xe = (e) => e?.root ? e.root.children?.map((r) => e[r]) || [] : [], Ne = (e, r) => e ? e.children?.map((t) => r[t]) || [] : [], te = "rkk", I = (e, r = " ") => Array.isArray(e) ? e.map((t) => `${te}-${t}`).join(r) : `${te}-${e}`, be = J((e, r) => {
+  const {
+    renderColumnHeader: t,
+    columnHeaderStyle: n,
+    columnHeaderClassName: o = "",
+    data: a
+  } = e, l = H(
+    I("column-header"),
+    o
+  );
+  return t ? /* @__PURE__ */ m("div", { ref: r, children: t(a) }) : /* @__PURE__ */ T(
+    "header",
+    {
+      ref: r,
+      className: l,
+      style: n?.(a),
+      children: [
+        /* @__PURE__ */ m("div", { className: I("column-header-left"), children: a?.title }),
+        /* @__PURE__ */ m("div", { className: I("column-header-right"), children: a?.totalItemsCount || a?.totalChildrenCount || 0 })
+      ]
+    }
+  );
+}), Ee = ({
+  className: e,
+  style: r,
+  animationType: t = "shimmer"
+}) => {
+  const n = `${I("skeleton")} ${t === "pulse" ? I("skeleton-pulse") : ""} ${t === "wave" ? I("skeleton-wave") : ""} ${e || ""}`.trim();
+  return /* @__PURE__ */ m("div", { className: n, style: r, children: /* @__PURE__ */ T("div", { className: I("skeleton-content"), children: [
+    /* @__PURE__ */ m("div", { className: I("skeleton-title") }),
+    /* @__PURE__ */ T("div", { className: I("skeleton-description"), children: [
+      /* @__PURE__ */ m("div", { className: I("skeleton-line") }),
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: `${I("skeleton-line")} ${I(
+            "skeleton-line-short"
+          )}`
+        }
+      )
+    ] })
+  ] }) });
+}, fe = Ie(void 0), K = () => {
+  const e = ye(fe);
+  if (!e)
+    throw new Error("KanbanContext must be used within a provider");
+  return e;
+}, Te = ({
+  children: e,
+  ...r
+}) => /* @__PURE__ */ m(fe.Provider, { value: r, children: e }), q = { type: "idle" }, Oe = (e = {}, r = {}, t, n, o) => {
+  const { viewOnly: a } = K(), l = R(null), d = R(null), [y, h] = se(q), i = E(
+    () => ({
+      type: "card",
+      itemId: e?.id,
+      columnId: r?.id,
+      index: t,
+      isDraggable: n,
+      parentId: e.parentId,
+      rect: d.current?.getBoundingClientRect() || null
+    }),
+    [e?.id, r?.id, t, n, e?.parentId]
+  ), f = E(
+    ({ input: c, element: C }) => {
+      const s = {
+        type: "card",
+        "card-drop-target": !0,
+        itemId: e.id,
+        columnId: r.id,
+        index: t,
+        isDraggable: n,
+        parentId: e.parentId
+      };
+      return oe(s, {
+        input: c,
+        element: C,
+        allowedEdges: ["top", "bottom"]
+      });
+    },
+    [e?.id, r?.id, t, n, e?.parentId]
+  ), g = E(
+    (c) => {
+      const C = c.source.data;
+      return C.itemId === e.parentId ? !1 : C.isDraggable;
+    },
+    [e?.id, e?.parentId]
+  ), x = E(
+    ({ nativeSetDragImage: c, location: C }) => {
+      ue({
+        nativeSetDragImage: c,
+        getOffset: ge({
+          element: d.current,
+          input: C.current.input
+        }),
+        render({ container: s }) {
+          const w = d.current.getBoundingClientRect();
+          h({
+            type: "preview",
+            container: s,
+            dragging: w
+          });
+        }
+      });
+    },
+    []
+  ), u = E(() => {
+    h({ type: "is-dragging" });
+  }, []), k = E(() => {
+    h(q);
+  }, []), p = E(
+    ({ source: c, self: C }) => {
+      if (c.data.type !== "card" || c.data.itemId === e.id)
+        return;
+      const s = $(C.data);
+      s && h({
+        type: "is-over",
+        dragging: c.data.rect,
+        closestEdge: s
+      });
+    },
+    [e?.id]
+  ), S = E(
+    ({ source: c, self: C }) => {
+      if (c.data.type !== "card" || c.data.itemId === e.id)
+        return;
+      const s = $(C.data);
+      s && h({
+        type: "is-over",
+        dragging: c.data.rect,
+        closestEdge: s
+      });
+    },
+    [e?.id]
+  ), D = E(
+    ({ source: c }) => {
+      if (c.data.type === "card") {
+        if (c.data.itemId === e?.id) {
+          h({ type: "is-dragging-and-left-self" });
+          return;
+        }
+        h(q);
+      }
+    },
+    [e.id]
+  );
+  return F(() => {
+    const c = l.current, C = d.current;
+    if (!(!c || !C))
+      return Q(
+        de({
+          element: C,
+          getInitialData: i,
+          onGenerateDragPreview: x,
+          onDragStart: u,
+          onDrop: k,
+          canDrag: () => n && !a
+        }),
+        ce({
+          element: c,
+          canDrop: g,
+          getIsSticky: () => !0,
+          getData: f,
+          onDragEnter: p,
+          onDrag: S,
+          onDragLeave: D,
+          onDrop: k
+        })
+      );
+  }, [
+    i,
+    x,
+    u,
+    k,
+    n,
+    g,
+    f,
+    p,
+    S,
+    D
+  ]), F(() => {
+    o?.({ state: y, card: e, column: r });
+  }, [y, o]), {
+    outerRef: l,
+    innerRef: d,
+    state: y
+  };
+}, _ = ie(
+  ({
+    height: e,
+    customIndicator: r
+  }) => /* @__PURE__ */ m("div", { className: I("card-shadow-container"), children: r || /* @__PURE__ */ m(
+    "div",
+    {
+      className: I("card-shadow"),
+      style: { height: `${e - 2}px` }
+    }
+  ) })
+), ne = (e) => {
+  const {
+    outerRef: r,
+    innerRef: t,
+    state: n,
+    data: o,
+    column: a,
+    index: l,
+    isDraggable: d,
+    cardsGap: y,
+    render: h,
+    onClick: i,
+    renderCardDragIndicator: f
+  } = e, g = V(() => {
+    const c = {};
+    return n.type === "is-dragging-and-left-self" && (c.display = "none"), c;
+  }, [n.type]), x = V(() => n.type === "is-dragging" ? { opacity: 0.6 } : n.type === "preview" ? {
+    width: n.dragging.width,
+    height: n.dragging.height,
+    transform: "rotate(4deg)"
+  } : {}, [n]), u = n.type === "is-over" && n.closestEdge === "top", k = n.type === "is-over" && n.closestEdge === "bottom", p = n.type === "is-over" ? n.dragging.height : 0, S = h({ data: o, column: a, index: l, isDraggable: d }), D = f?.(
+    n.type === "is-dragging" ? o : null,
+    {
+      height: p
+    }
+  );
+  return /* @__PURE__ */ m(ve, { children: /* @__PURE__ */ T(
+    "div",
+    {
+      ref: r,
+      className: I("card-outer"),
+      onClick: (c) => i?.(c, o),
+      style: {
+        ...g,
+        ...y !== void 0 ? { marginBottom: y } : {}
+      },
+      "data-test-id": o?.id,
+      "data-rkk-column": a?.id,
+      "data-rkk-index": l,
+      children: [
+        u && /* @__PURE__ */ m(_, { height: p, customIndicator: D }),
+        /* @__PURE__ */ m(
+          "div",
+          {
+            ref: t,
+            className: I("card-inner"),
+            style: {
+              ...x,
+              marginBottom: k ? y : 0,
+              marginTop: u ? y : 0
+            },
+            children: S
+          }
+        ),
+        k && /* @__PURE__ */ m(_, { height: p, customIndicator: D })
+      ]
+    }
+  ) });
+}, Re = (e) => {
+  const {
+    render: r,
+    data: t,
+    column: n,
+    index: o,
+    isDraggable: a,
+    cardsGap: l,
+    onClick: d,
+    onCardDndStateChange: y,
+    renderCardDragIndicator: h,
+    renderCardDragPreview: i,
+    renderGap: f
+  } = e, { outerRef: g, innerRef: x, state: u } = Oe(
+    t,
+    n,
+    o,
+    a,
+    y
+  );
+  return /* @__PURE__ */ T(ae, { children: [
+    /* @__PURE__ */ m(
+      ne,
+      {
+        outerRef: g,
+        innerRef: x,
+        state: u,
+        data: t,
+        column: n,
+        index: o,
+        isDraggable: a,
+        render: r,
+        onClick: d,
+        cardsGap: l,
+        renderCardDragIndicator: h,
+        renderGap: f
+      }
+    ),
+    u.type === "preview" ? le(
+      i?.(t, {
+        state: u,
+        data: t,
+        column: n,
+        index: o,
+        isDraggable: a
+      }) || /* @__PURE__ */ m(
+        ne,
+        {
+          state: u,
+          data: t,
+          column: n,
+          index: o,
+          isDraggable: a,
+          render: r
+        }
+      ),
+      u.container
+    ) : null
+  ] });
+}, $e = (e) => /* @__PURE__ */ m("div", { className: I("default-card"), children: e?.data?.title }), He = (e, r) => e?.isDraggable !== void 0 ? e?.isDraggable : r, Ae = (e) => {
+  const { index: r, options: t } = e, {
+    data: n,
+    column: o,
+    configMap: a,
+    isSkeleton: l,
+    cardWrapperStyle: d,
+    cardWrapperClassName: y,
+    cardsGap: h = 8,
+    isShadow: i,
+    isListFooter: f,
+    cardOverHeight: g = 90,
+    renderSkeletonCard: x,
+    onCardClick: u,
+    onCardDndStateChange: k,
+    renderCardDragIndicator: p,
+    renderListFooter: S,
+    renderCardDragPreview: D,
+    renderGap: c
+  } = t, { render: C = $e, isDraggable: s = !0 } = a?.[n?.type] || {}, w = H(
+    I("generic-item-wrapper"),
+    y
+  ), v = () => f ? /* @__PURE__ */ m("div", { className: I("generic-item-list-footer"), children: S?.(o) || "Default Footer" }) : i ? /* @__PURE__ */ m(
+    _,
+    {
+      height: g,
+      customIndicator: p?.(n, {
+        height: g
+      })
+    }
+  ) : l ? /* @__PURE__ */ m(
+    "div",
+    {
+      className: I("generic-item-skeleton"),
+      "data-index": r,
+      "data-rkk-column": o?.id,
+      children: x?.({ index: r, column: o }) || /* @__PURE__ */ m(Ee, { animationType: "wave" })
+    }
+  ) : /* @__PURE__ */ m(
+    Re,
+    {
+      render: C,
+      isDraggable: He(n, s),
+      data: n,
+      column: o,
+      index: r,
+      onClick: u,
+      cardsGap: h,
+      renderGap: c,
+      onCardDndStateChange: k,
+      renderCardDragIndicator: p,
+      renderCardDragPreview: D
+    }
+  );
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: w,
+      style: {
+        ...d?.(n, o) || {}
+      },
+      children: v()
+    }
+  );
+}, Be = (e, r, t, n) => {
+  const o = document.querySelector(
+    `.${I("column-content-list")}`
+  );
+  if (!o)
+    return;
+  const { scrollHeight: a, clientHeight: l } = o;
+  let d;
+  r ? d = typeof e == "number" ? e : 0 : d = e.target.scrollTop, t?.({
+    target: {
+      scrollTop: d,
+      scrollHeight: a,
+      clientHeight: l
+    }
+  }, n);
+}, Fe = ({ columnId: e, limit: r = 20 }) => {
+  const t = document.querySelectorAll(
+    `.${I("generic-item-skeleton")}[data-rkk-column="${e}"]`
+  );
+  return t.length ? Array.from(t).slice(0, r).some((a) => {
+    const { top: l, bottom: d } = a.getBoundingClientRect();
+    return l <= window.innerHeight && d >= 0;
+  }) : !1;
+}, pe = (e, r, t, n, o, a, l, d) => /* @__PURE__ */ m(
+  Ae,
+  {
+    index: r,
+    options: {
+      data: e[r],
+      column: t,
+      configMap: n,
+      isSkeleton: r >= e.length,
+      renderListFooter: a,
+      isShadow: o && r === d - (a ? 2 : 1),
+      isListFooter: a && r === d - (a ? 1 : 0),
+      ...l
+    }
+  },
+  r
+), Pe = ({
+  column: e,
+  items: r,
+  configMap: t,
+  onScroll: n,
+  cardOverShadowCount: o,
+  renderListFooter: a,
+  ...l
+}) => {
+  const d = e?.totalChildrenCount + o + (a ? 1 : 0);
+  return /* @__PURE__ */ m(
+    De,
+    {
+      count: d,
+      onScroll: n,
+      className: I("column-content-list"),
+      children: (y) => pe(
+        r,
+        y,
+        e,
+        t,
+        o,
+        a,
+        l,
+        d
+      )
+    }
+  );
+}, Ge = ({
+  column: e,
+  items: r,
+  configMap: t,
+  onScroll: n,
+  cardOverShadowCount: o,
+  renderListFooter: a,
+  ...l
+}) => {
+  const d = e?.totalChildrenCount + o + (a ? 1 : 0);
+  return /* @__PURE__ */ m("div", { className: I("column-content-list"), onScroll: n, children: Array.from(
+    {
+      length: d
+    },
+    (y, h) => pe(
+      r,
+      h,
+      e,
+      t,
+      o,
+      a,
+      l,
+      d
+    )
+  ) });
+}, Le = J((e, r) => {
+  const {
+    items: t,
+    column: n,
+    configMap: o,
+    columnListContentStyle: a,
+    columnListContentClassName: l,
+    cardWrapperStyle: d,
+    renderSkeletonCard: y,
+    cardWrapperClassName: h,
+    onCardClick: i,
+    loadMore: f,
+    cardOverShadowCount: g,
+    cardOverHeight: x,
+    onCardDndStateChange: u,
+    renderCardDragIndicator: k,
+    renderCardDragPreview: p,
+    renderListFooter: S,
+    renderGap: D
+  } = e, {
+    virtualization: c = !0,
+    cardsGap: C,
+    allowListFooter: s
+  } = K(), w = H(
+    I("column-content"),
+    l
+  ), v = (b, A) => {
+    Fe({
+      columnId: A?.id
+    }) && f?.(A?.id), e?.onScroll?.(b, A);
+  }, N = c ? Pe : Ge;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: w,
+      style: a?.(n),
+      children: /* @__PURE__ */ m(
+        N,
+        {
+          column: n,
+          items: t,
+          configMap: o,
+          cardWrapperStyle: d,
+          cardWrapperClassName: h,
+          cardsGap: C,
+          renderSkeletonCard: y,
+          onScroll: (b) => Be(b, c, v, n),
+          onCardClick: i,
+          cardOverShadowCount: g,
+          onCardDndStateChange: u,
+          renderCardDragIndicator: k,
+          renderCardDragPreview: p,
+          cardOverHeight: x,
+          renderGap: D,
+          renderListFooter: s !== void 0 && s?.(n) || s === void 0 ? S : null
+        }
+      )
+    }
+  );
+}), B = (e) => e.type === "card", L = (e) => e.type === "column", W = { type: "idle" }, We = (e, r, t, n, o, a) => {
+  const { viewOnly: l } = K(), d = !l && o !== !1 && e.isDraggable !== !1, y = R(null), h = R(null), i = R(null), [f, g] = se(W), x = f.type === "is-card-over" && !f.isOverChildCard ? 1 : 0, u = e.totalChildrenCount + x, k = E(
+    ({ data: p, location: S }) => {
+      const c = !!S.current.dropTargets[0]?.data["card-drop-target"], C = {
+        type: "is-card-over",
+        dragging: p.rect,
+        isOverChildCard: c
+      };
+      g((s) => s.type === C.type && s.isOverChildCard === C.isOverChildCard && s.dragging === C.dragging ? s : C);
+    },
+    []
+  );
+  return F(() => {
+    const p = h.current, S = i.current, D = y.current;
+    if (!p || !S || !D)
+      return;
+    const c = p.querySelector(
+      `.${I("column-content-list")}`
+    ), C = {
+      type: "column",
+      columnId: e.id,
+      column: e,
+      index: r
+    };
+    return Q(
+      de({
+        element: D,
+        getInitialData: () => C,
+        canDrag: () => d,
+        onGenerateDragPreview({ location: s, nativeSetDragImage: w }) {
+          const v = p.getBoundingClientRect();
+          ue({
+            nativeSetDragImage: w,
+            getOffset: ge({
+              element: p,
+              input: s.current.input
+            }),
+            render({ container: N }) {
+              if (a)
+                g({ type: "preview", container: N, dragging: v });
+              else {
+                const b = p.cloneNode(!0);
+                b.style.width = `${v.width}px`, b.style.height = `${v.height}px`, b.style.transform = "rotate(4deg)", b.style.boxShadow = "0 8px 24px rgba(0,0,0,0.15)", N.appendChild(b);
+              }
+            }
+          });
+        },
+        onDragStart() {
+          g({ type: "is-dragging" });
+        },
+        onDrop() {
+          g(W);
+        }
+      }),
+      ce({
+        element: p,
+        getData({ input: s, element: w }) {
+          return oe(C, {
+            input: s,
+            element: w,
+            allowedEdges: ["left", "right"]
+          });
+        },
+        canDrop({ source: s }) {
+          return B(s.data) || L(s.data);
+        },
+        getIsSticky: () => !0,
+        onDragStart({ source: s, location: w }) {
+          B(s.data) && k({ data: s.data, location: w });
+        },
+        onDragEnter({ source: s, location: w, self: v }) {
+          if (B(s.data)) {
+            k({ data: s.data, location: w });
+            return;
+          }
+          if (L(s.data) && s.data.columnId !== e.id) {
+            const N = $(v.data);
+            if (!N)
+              return;
+            const b = p.getBoundingClientRect();
+            g({ type: "is-column-over", closestEdge: N, rect: b });
+          }
+        },
+        onDrag({ source: s, self: w }) {
+          if (!L(s.data) || s.data.columnId === e.id)
+            return;
+          const v = $(w.data);
+          v && g((N) => {
+            if (N.type === "is-column-over" && N.closestEdge === v)
+              return N;
+            const b = p.getBoundingClientRect();
+            return { type: "is-column-over", closestEdge: v, rect: b };
+          });
+        },
+        onDropTargetChange({ source: s, location: w }) {
+          B(s.data) && k({ data: s.data, location: w });
+        },
+        onDragLeave({ source: s }) {
+          if (L(s.data) && s.data.columnId === e.id) {
+            g({ type: "is-dragging-and-left-self" });
+            return;
+          }
+          g(W);
+        },
+        onDrop() {
+          g(W);
+        }
+      }),
+      me({
+        canScroll({ source: s }) {
+          return B(s.data);
+        },
+        getConfiguration: () => ({ maxScrollSpeed: "standard" }),
+        element: c
+      })
+    );
+  }, [e, r, t?.length, d, a]), F(() => {
+    n?.({ state: f, column: e });
+  }, [f, n]), {
+    headerRef: y,
+    outerFullHeightRef: h,
+    innerRef: i,
+    state: f,
+    cardOverShadowCount: x,
+    totalTasksCount: u
+  };
+}, Ve = ie(
+  ({
+    width: e,
+    height: r,
+    customIndicator: t
+  }) => /* @__PURE__ */ m("div", { className: I("column-shadow-container"), children: t || /* @__PURE__ */ m(
+    "div",
+    {
+      className: I("column-shadow"),
+      style: { width: e, height: r }
+    }
+  ) })
+), Ke = (e) => {
+  const {
+    index: r,
+    data: t,
+    items: n,
+    onColumnClick: o,
+    renderColumnHeader: a,
+    renderColumnWrapper: l,
+    renderColumnFooter: d,
+    columnWrapperStyle: y,
+    columnHeaderStyle: h,
+    onColumnDndStateChange: i,
+    columnWrapperClassName: f,
+    columnHeaderClassName: g,
+    columnListContentClassName: x,
+    columnClassName: u,
+    columnStyle: k,
+    renderColumnDragPreview: p,
+    renderColumnDragIndicator: S,
+    allowColumnDrag: D,
+    ...c
+  } = e, {
+    headerRef: C,
+    outerFullHeightRef: s,
+    innerRef: w,
+    state: v,
+    cardOverShadowCount: N
+  } = We(
+    t,
+    r,
+    n,
+    i,
+    D,
+    !!p
+  ), b = v.type === "is-dragging" || v.type === "preview", A = v.type === "is-dragging-and-left-self", P = v.type === "is-column-over", U = P ? v.closestEdge : null, X = V(() => {
+    if (!P)
+      return null;
+    const { width: O, height: ee } = v.rect, he = v.closestEdge === "left" ? "left" : "right", Ce = S?.(t, { width: O, height: ee, edge: he });
+    return /* @__PURE__ */ m(
+      Ve,
+      {
+        width: O,
+        height: ee,
+        customIndicator: Ce
+      }
+    );
+  }, [P, v, S, t]), Y = V(() => v.type !== "preview" || !p ? null : p(t, {
+    state: v,
+    data: t,
+    index: r,
+    isDraggable: t.isDraggable !== !1
+  }), [v, t, r, p]), Z = H(
+    I("column-outer"),
+    f?.(t)
+  );
+  return /* @__PURE__ */ T(ae, { children: [
+    U === "left" && X,
+    /* @__PURE__ */ T("div", { onClick: (O) => o?.(O, t), style: A ? { display: "none" } : b ? { opacity: 0.4 } : void 0, children: [
+      ((O) => l ? l(t, {
+        children: O,
+        className: Z,
+        style: y?.(t),
+        ref: s
+      }) : /* @__PURE__ */ m(
+        "div",
+        {
+          className: Z,
+          ref: s,
+          style: y?.(t),
+          children: O
+        }
+      ))(
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: H(
+              I("column"),
+              u?.(t)
+            ),
+            ref: w,
+            style: k?.(t),
+            children: /* @__PURE__ */ T("div", { className: I("column-wrapper"), children: [
+              /* @__PURE__ */ m(
+                be,
+                {
+                  renderColumnHeader: a,
+                  columnHeaderStyle: h,
+                  columnHeaderClassName: g?.(t),
+                  data: t,
+                  ref: C
+                }
+              ),
+              /* @__PURE__ */ m(
+                Le,
+                {
+                  items: n,
+                  column: t,
+                  columnListContentClassName: x?.(t),
+                  cardOverHeight: N ? v.dragging.height : null,
+                  cardOverShadowCount: N,
+                  ...c
+                }
+              ),
+              d?.(t)
+            ] })
+          }
+        )
+      ),
+      v.type === "preview" && Y && le(Y, v.container)
+    ] }),
+    U === "right" && X
+  ] });
+}, re = (e) => !e || typeof e == "function" ? e : (r) => {
+  e.current = r;
+};
+function ze(e, r) {
+  const t = re(e), n = re(r);
+  return (o) => {
+    typeof t == "function" && t(o), typeof n == "function" && n(o);
+  };
+}
+const Me = (e) => {
+  const {
+    viewOnly: r = !1,
+    virtualization: t = !0,
+    cardsGap: n = 8,
+    allowColumnAdder: o = !0,
+    allowListFooter: a
+  } = e;
+  return {
+    viewOnly: r,
+    virtualization: t,
+    cardsGap: n,
+    allowColumnAdder: o,
+    allowListFooter: a
+  };
+}, je = ({ renderColumnAdder: e }) => {
+  const { allowColumnAdder: r = !0 } = K();
+  return r ? /* @__PURE__ */ m("div", { className: I("column-adder"), children: e?.() }) : null;
+}, dt = J((e, r) => {
+  const {
+    dataSource: t,
+    rootStyle: n = {},
+    rootClassName: o,
+    onColumnMove: a,
+    onCardMove: l,
+    renderColumnWrapper: d,
+    renderColumnAdder: y,
+    allowColumnDrag: h,
+    ...i
+  } = e, f = xe(t), g = R(null);
+  F(() => {
+    if (g.current)
+      return Q(
+        ke({
+          onDragStart({ location: u }) {
+            M.start({ input: u.current.input });
+          },
+          onDrag({ location: u }) {
+            M.updateInput({ input: u.current.input });
+          },
+          onDrop(u) {
+            M.stop(), Se({
+              source: {
+                id: u.source.id || "",
+                data: u.source.data
+              },
+              location: {
+                current: {
+                  dropTargets: u.location.current.dropTargets
+                }
+              },
+              columns: f,
+              dataSource: t,
+              onCardMove: l,
+              onColumnMove: a
+            });
+          }
+        }),
+        me({
+          element: g.current,
+          canScroll: () => !0,
+          getConfiguration: () => ({
+            maxScrollSpeed: "standard"
+          })
+        })
+      );
+  }, [f, t, l, a]);
+  const x = H(I("board"), o);
+  return /* @__PURE__ */ m(Te, { ...Me(e), children: /* @__PURE__ */ T(
+    "div",
+    {
+      ref: ze(r, g),
+      className: x,
+      style: n,
+      children: [
+        f?.map((u, k) => /* @__PURE__ */ m(
+          Ke,
+          {
+            index: k,
+            data: u,
+            items: Ne(u, t),
+            renderColumnWrapper: d,
+            allowColumnDrag: h,
+            ...i
+          },
+          u.id
+        )),
+        /* @__PURE__ */ m(je, { renderColumnAdder: y })
+      ]
+    }
+  ) });
+});
+export {
+  dt as Kanban,
+  it as dropColumnHandler,
+  lt as dropHandler
+};