@lonli-lokli/react-mosaic-component/lib/MosaicDropTarget.mjs

A React Tiling Window Manager

// libs/react-mosaic-component/src/lib/MosaicDropTarget.tsx
import React from "react";
import classNames from "classnames";
import { useDrop } from "react-dnd";
import { MosaicDragType } from "./types.mjs";
import { MosaicContext } from "./contextTypes.mjs";
var MosaicDropTarget = ({ path, position }) => {
  const { mosaicId } = React.useContext(MosaicContext);
  const [{ isOver, draggedMosaicId }, connectDropTarget] = useDrop({
    accept: MosaicDragType.WINDOW,
    drop: () => ({
      path,
      position
    }),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      draggedMosaicId: monitor.getItem()?.mosaicId
    })
  });
  return connectDropTarget(
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: classNames("drop-target", position, {
          "drop-target-hover": isOver && draggedMosaicId === mosaicId
        })
      }
    )
  );
};
export {
  MosaicDropTarget
};