@frontify/fondue
Version:
Design system of Frontify
35 lines (34 loc) • 1.26 kB
JavaScript
import { jsx as e } from "react/jsx-runtime";
import { IconGrabHandle as d } from "@frontify/fondue-icons";
import { forwardRef as m } from "react";
import { FOCUS_VISIBLE_STYLE as s } from "../../../utilities/focusStyle.es.js";
import { merge as p } from "../../../utilities/merge.es.js";
import { TreeItemColorsClassMap as w } from "../types.es.js";
const c = m(
({ active: r, showDragHandlerOnHoverOnly: o, activeColorStyle: a, ...t }, i) => {
const { selectedDragHanlderTextColor: n, dragHanlderTextColor: l } = w[a ?? "neutral"];
return /* @__PURE__ */ e(
"button",
{
type: "button",
"aria-label": "Draggable item",
...t,
ref: i,
className: p([
s,
"tw-p-1 first:tw-ml-2 tw-rounded-sm hover:tw-cursor-grab group-hover:tw-opacity-100 group-focus-within:tw-opacity-100",
t.disabled ? "tw-invisible tw-pointer-events-none" : "tw-visible",
o ? !r && "tw-opacity-0" : "tw-opacity-100",
r ? n : l
]),
"data-test-id": "fondue-tree-item-drag-handle",
children: /* @__PURE__ */ e(d, { size: 12 })
}
);
}
);
c.displayName = "FondueDragHandle";
export {
c as DragHandle
};
//# sourceMappingURL=DragHandle.es.js.map