import m from "react";
import { merge as h } from "../../utilities/merge.es.es.js";
import { DropZonePosition as e } from "../../utilities/dnd/types.es.es.js";
import { useDrop as D } from "../../../../../react-dnd/dist/hooks/useDrop/useDrop.es.js";
const b = ({ data: t, onDrop: i, children: n, treeId: p }) => {
  const [{ isOver: a, canDrop: s }, l] = D({
    accept: p,
    drop: (o) => {
      i == null || i(t.targetItem, o, t.position);
    },
    canDrop: (o) => o.id !== t.targetItem.id,
    collect: (o) => ({
      isOver: o.isOver(),
      canDrop: o.canDrop()
    })
  }), r = a && s, w = "tw-my-[-4px] tw-h-[10px] tw-py-1 tw-outline-none tw-relative tw-z-20", c = "tw-border-violet-60 tw-border-2 tw-h-7 tw-bg-clip-content", d = "tw-bg-violet-20";
  return /* @__PURE__ */ m.createElement("div", {
    role: "row",
    "aria-hidden": !r,
    "data-test-id": "drop-zone",
    className: h([
      "tw-w-full tw-transition-height",
      t.position !== e.Within ? w : "tw-h-auto",
      r && t.position !== e.Within ? c : "",
      r && t.position === e.Within ? d : ""
    ]),
    ref: l
  }, n);
};
export {
  b as DropZone
};
//# sourceMappingURL=DropZone.es.es.js.map
