@frontify/fondue
Version:
Design system of Frontify
34 lines (33 loc) • 1.24 kB
JavaScript
import { jsx as t } from "react/jsx-runtime";
import { forwardRef as d } from "react";
import m from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
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 = d(
({ active: r, showDragHandlerOnHoverOnly: o, activeColorStyle: a, ...e }, i) => {
const { selectedDragHanlderTextColor: l, dragHanlderTextColor: n } = w[a ?? "neutral"];
return /* @__PURE__ */ t(
"button",
{
"aria-label": "Draggable item",
...e,
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",
e.disabled ? "tw-invisible tw-pointer-events-none" : "tw-visible",
o ? !r && "tw-opacity-0" : "tw-opacity-100",
r ? l : n
]),
"data-test-id": "fondue-tree-item-drag-handle",
children: /* @__PURE__ */ t(m, {})
}
);
}
);
c.displayName = "FondueDragHandle";
export {
c as DragHandle
};
//# sourceMappingURL=DragHandle.es.js.map