@frontify/fondue/dist/components/LegacyOrderableList/LegacyCollectionItem.es.js

Design system of Frontify

import { jsx as r } from "react/jsx-runtime";
import { useFocusRing as s } from "@react-aria/focus";
import { useDrag as d } from "react-dnd";
import { FOCUS_STYLE as p } from "../../utilities/focusStyle.es.js";
import { merge as a } from "../../utilities/merge.es.js";
import { LegacyItemDragState as i } from "./types.es.js";
const u = ({
  item: t,
  renderContent: n,
  dragDisabled: o,
  listId: m
}) => {
  const { isFocusVisible: e } = s(), [{ componentDragState: c }, g] = d({
    item: { ...t },
    collect: (l) => ({
      componentDragState: l.isDragging() ? i.Dragging : i.Idle
    }),
    type: m,
    canDrag: !o
  });
  return /* @__PURE__ */ r(
    "div",
    {
      ref: g,
      className: a(["tw-relative tw-outline-none", e ? "tw-z-30" : "tw-z-0"]),
      "data-test-id": "draggable-item",
      "aria-disabled": o,
      children: /* @__PURE__ */ r("div", { className: a(["tw-outline-none", e && p]), children: n(t, { componentDragState: c, isFocusVisible: e }) })
    }
  );
};
u.displayName = "FondueLegacyCollectionItem";
export {
  u as LegacyCollectionItem
};
//# sourceMappingURL=LegacyCollectionItem.es.js.map