@frontify/fondue 12.0.0-beta.271 → 12.0.0-beta.272
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import b, { memo as At, useCallback as I, Children as
|
|
1
|
+
import b, { memo as At, useCallback as I, Children as O, useMemo as N } from "react";
|
|
2
2
|
import { useSortable as Lt } from "@dnd-kit/sortable";
|
|
3
3
|
import { useDndContext as Mt, useDndMonitor as Rt } from "@dnd-kit/core";
|
|
4
4
|
import { CSS as Wt } from "@dnd-kit/utilities";
|
|
5
5
|
import Bt from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/noop.es.js";
|
|
6
|
-
import { merge as
|
|
6
|
+
import { merge as j } from "../../../utilities/merge.es.js";
|
|
7
7
|
import { FOCUS_VISIBLE_STYLE as Ft } from "../../../utilities/focusStyle.es.js";
|
|
8
8
|
import { DragHandle as Ht } from "./DragHandle.es.js";
|
|
9
9
|
import { ExpandButton as _t } from "./ExpandButton.es.js";
|
|
10
10
|
import { useDebounce as $t } from "../../../hooks/useDebounce.es.js";
|
|
11
11
|
import { useTreeItem as St } from "./useTreeItem.es.js";
|
|
12
12
|
import { removeFragmentsAndEnrichChildren as Kt } from "../utils/removeFragmentsAndEnrichChildren.es.js";
|
|
13
|
-
import { useDeepCompareEffect as
|
|
14
|
-
import { INDENTATION_WIDTH as
|
|
15
|
-
const
|
|
13
|
+
import { useDeepCompareEffect as Ut } from "../utils/useDeepCompareEffect.es.js";
|
|
14
|
+
import { INDENTATION_WIDTH as k } from "../helpers/constants.es.js";
|
|
15
|
+
const Vt = ({ isSorting: t, wasDragging: y }) => !(t || y), Yt = At(
|
|
16
16
|
({
|
|
17
17
|
id: t,
|
|
18
18
|
type: y,
|
|
19
|
-
label:
|
|
19
|
+
label: d,
|
|
20
20
|
onDrop: E,
|
|
21
|
-
accepts:
|
|
21
|
+
accepts: C,
|
|
22
22
|
showCaret: H,
|
|
23
23
|
children: w,
|
|
24
24
|
parentId: T,
|
|
25
|
-
level:
|
|
26
|
-
contentComponent:
|
|
25
|
+
level: c = 0,
|
|
26
|
+
contentComponent: f,
|
|
27
27
|
treeDraggable: tt = !1,
|
|
28
28
|
onClick: v,
|
|
29
29
|
onSelect: A,
|
|
@@ -31,99 +31,101 @@ const Ut = ({ isSorting: t, wasDragging: y }) => !(t || y), Vt = At(
|
|
|
31
31
|
onShrink: h,
|
|
32
32
|
registerOverlay: x,
|
|
33
33
|
registerNodeChildren: L,
|
|
34
|
-
unregisterNodeChildren:
|
|
34
|
+
unregisterNodeChildren: r,
|
|
35
35
|
draggable: et = !0,
|
|
36
36
|
ignoreItemDoubleClick: _ = !1,
|
|
37
|
-
expandOnSelect:
|
|
38
|
-
"data-test-id":
|
|
37
|
+
expandOnSelect: at = !1,
|
|
38
|
+
"data-test-id": st = "fondue-tree-item"
|
|
39
39
|
}) => {
|
|
40
|
-
var
|
|
41
|
-
const { active:
|
|
42
|
-
(
|
|
43
|
-
var
|
|
44
|
-
const { over:
|
|
45
|
-
!
|
|
40
|
+
var z, G, J, P, Q, X;
|
|
41
|
+
const { active: s, over: l } = Mt(), { isSelected: i, isExpanded: p, projection: M } = St(t), $ = tt && et, a = (s == null ? void 0 : s.id) === t, e = a && M !== null && M !== void 0 ? M : null, S = typeof ((G = (z = l == null ? void 0 : l.data) == null ? void 0 : z.current) == null ? void 0 : G.accepts) == "string" ? (J = l.data.current.accepts) == null ? void 0 : J.split(", ") : [], ot = typeof (e == null ? void 0 : e.accepts) == "string" ? (P = e.accepts) == null ? void 0 : P.split(", ") : [], D = ((Q = s == null ? void 0 : s.data.current) == null ? void 0 : Q.type) || "", K = (D == null ? void 0 : D.replace(/-\d+$/, "")) || "", U = l !== null && e !== null && e.depth > ((X = l.data.current) == null ? void 0 : X.level), nt = U && (s == null ? void 0 : s.data.current) && S.includes(`${K}-within`) || (e == null ? void 0 : e.isWithinParent) && ot.includes(`${K}-within`), u = a && (s == null ? void 0 : s.data.current) && (S.includes(D) && !U || nt), rt = I(
|
|
42
|
+
(o) => {
|
|
43
|
+
var Z;
|
|
44
|
+
const { over: m, active: F } = o;
|
|
45
|
+
!a || !e || F.id === (m == null ? void 0 : m.id) && (e == null ? void 0 : e.depth) === ((Z = F.data.current) == null ? void 0 : Z.level) || a && m && u && E && E({
|
|
46
46
|
id: F.id,
|
|
47
47
|
parentId: e.parentId,
|
|
48
48
|
sort: e.position,
|
|
49
|
-
contentComponent:
|
|
49
|
+
contentComponent: f,
|
|
50
50
|
parentType: e.type
|
|
51
51
|
});
|
|
52
52
|
},
|
|
53
|
-
[
|
|
54
|
-
), it = I(
|
|
55
|
-
(n) => {
|
|
56
|
-
n.active.id === t && (x == null || x({ contentComponent: u, children: w, id: t, label: m, level: r }));
|
|
57
|
-
},
|
|
58
|
-
[w, u, t, m, r, x]
|
|
53
|
+
[a, e, u, E, f]
|
|
59
54
|
), ct = I(
|
|
60
|
-
(
|
|
61
|
-
|
|
55
|
+
(o) => {
|
|
56
|
+
o.active.id === t && (x == null || x({ contentComponent: f, children: w, id: t, label: d, level: c }));
|
|
57
|
+
},
|
|
58
|
+
[w, f, t, d, c, x]
|
|
59
|
+
), lt = I(
|
|
60
|
+
(o) => {
|
|
61
|
+
o.active.id === t && document.body.style.setProperty("cursor", u ? "grabbing" : "no-drop");
|
|
62
62
|
},
|
|
63
|
-
[
|
|
63
|
+
[u, t]
|
|
64
64
|
);
|
|
65
65
|
Rt({
|
|
66
66
|
onDragEnd: rt,
|
|
67
|
-
onDragStart:
|
|
68
|
-
onDragMove:
|
|
67
|
+
onDragStart: ct,
|
|
68
|
+
onDragMove: lt
|
|
69
69
|
});
|
|
70
|
-
const
|
|
71
|
-
(
|
|
72
|
-
|
|
70
|
+
const V = I(
|
|
71
|
+
(o) => {
|
|
72
|
+
o == null || o.stopPropagation(), p ? h == null || h(t) : g == null || g(t);
|
|
73
73
|
},
|
|
74
|
-
[t,
|
|
75
|
-
),
|
|
76
|
-
(
|
|
77
|
-
|
|
74
|
+
[t, p, g, h]
|
|
75
|
+
), it = $t(
|
|
76
|
+
(o) => {
|
|
77
|
+
o.stopPropagation(), !(_ && o.detail >= 2) && (at && V(), A == null || A(t), v == null || v(t));
|
|
78
78
|
},
|
|
79
79
|
_ ? 300 : 0
|
|
80
|
-
),
|
|
81
|
-
const
|
|
80
|
+
), Y = T && (s == null ? void 0 : s.id) === T, q = O.count(w) > 0, { enrichedChildren: R, childrenIds: pt } = N(() => {
|
|
81
|
+
const o = Kt(w, { parentId: t, level: c + 1 });
|
|
82
82
|
return {
|
|
83
|
-
enrichedChildren:
|
|
84
|
-
childrenIds:
|
|
83
|
+
enrichedChildren: o,
|
|
84
|
+
childrenIds: o.map((m) => m.props.id)
|
|
85
85
|
};
|
|
86
|
-
}, [w, t,
|
|
87
|
-
attributes:
|
|
88
|
-
listeners:
|
|
89
|
-
transform:
|
|
86
|
+
}, [w, t, c]), {
|
|
87
|
+
attributes: mt,
|
|
88
|
+
listeners: dt,
|
|
89
|
+
transform: n,
|
|
90
90
|
transition: wt,
|
|
91
|
-
setDraggableNodeRef:
|
|
92
|
-
setDroppableNodeRef:
|
|
91
|
+
setDraggableNodeRef: ft,
|
|
92
|
+
setDroppableNodeRef: ut,
|
|
93
93
|
setActivatorNodeRef: bt
|
|
94
94
|
} = Lt({
|
|
95
95
|
id: t,
|
|
96
96
|
disabled: !$,
|
|
97
|
-
data: { type: y, accepts:
|
|
98
|
-
animateLayoutChanges:
|
|
97
|
+
data: { type: y, accepts: C, parentId: T, level: c },
|
|
98
|
+
animateLayoutChanges: Vt,
|
|
99
99
|
transition: null
|
|
100
100
|
});
|
|
101
|
-
|
|
102
|
-
if (
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
101
|
+
Ut(() => {
|
|
102
|
+
if (O.count(R) === 0) {
|
|
103
|
+
r == null || r(t);
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
if (a || Y) {
|
|
107
|
+
r == null || r(t);
|
|
108
|
+
return;
|
|
108
109
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
110
|
+
p ? L == null || L({ id: t, children: R }) : r == null || r(t);
|
|
111
|
+
}, [a, p, Y, R, t]);
|
|
112
|
+
const gt = N(
|
|
113
|
+
() => j([
|
|
112
114
|
Ft,
|
|
113
115
|
"tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10",
|
|
114
|
-
!
|
|
115
|
-
|
|
116
|
-
|
|
116
|
+
!a && !i && "active:tw-bg-box-neutral-pressed",
|
|
117
|
+
i && !(n != null && n.y) ? "tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover" : "hover:tw-bg-box-neutral tw-text-text",
|
|
118
|
+
n != null && n.y ? "tw-bg-box-neutral-strong-inverse tw-text-text tw-font-normal" : ""
|
|
117
119
|
]),
|
|
118
|
-
[
|
|
119
|
-
), ht =
|
|
120
|
+
[a, i, n == null ? void 0 : n.y]
|
|
121
|
+
), ht = j([
|
|
120
122
|
"tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full",
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
]), xt = e != null && e.depth ? e.depth *
|
|
123
|
+
a ? "tw-border-dashed tw-rounded-sm tw-border-2 tw-pr-0 tw-h-12" : "tw-h-10",
|
|
124
|
+
a && (u ? "tw-border-box-selected-strong tw-bg-box-selected-hover" : "tw-bg-box-negative-hover tw-border-box-negative-strong-hover")
|
|
125
|
+
]), xt = e != null && e.depth ? e.depth * k : void 0, Dt = a ? 0 : c * k, It = {
|
|
124
126
|
paddingLeft: xt ?? Dt
|
|
125
|
-
}, yt = !
|
|
126
|
-
transform: Wt.Transform.toString(
|
|
127
|
+
}, yt = !a, Et = p && !a, W = $ && !a, Tt = d !== void 0 && !a, B = !a && (H === void 0 ? q : H), vt = {
|
|
128
|
+
transform: Wt.Transform.toString(n),
|
|
127
129
|
transition: wt
|
|
128
130
|
};
|
|
129
131
|
return /* @__PURE__ */ b.createElement(
|
|
@@ -135,23 +137,23 @@ const Ut = ({ isSorting: t, wasDragging: y }) => !(t || y), Vt = At(
|
|
|
135
137
|
role: "treeitem",
|
|
136
138
|
style: It,
|
|
137
139
|
onKeyDown: Bt,
|
|
138
|
-
"aria-label":
|
|
139
|
-
"aria-level":
|
|
140
|
-
onClick:
|
|
140
|
+
"aria-label": d,
|
|
141
|
+
"aria-level": c + 1,
|
|
142
|
+
onClick: it,
|
|
141
143
|
className: gt,
|
|
142
|
-
ref:
|
|
143
|
-
"data-test-id":
|
|
144
|
-
"aria-selected":
|
|
145
|
-
"aria-expanded":
|
|
146
|
-
"data-has-children":
|
|
147
|
-
"aria-owns":
|
|
144
|
+
ref: ut,
|
|
145
|
+
"data-test-id": st,
|
|
146
|
+
"aria-selected": i,
|
|
147
|
+
"aria-expanded": p,
|
|
148
|
+
"data-has-children": q,
|
|
149
|
+
"aria-owns": pt.join(" ")
|
|
148
150
|
},
|
|
149
|
-
/* @__PURE__ */ b.createElement("div", { ref:
|
|
151
|
+
/* @__PURE__ */ b.createElement("div", { ref: ft, className: ht, style: vt }, /* @__PURE__ */ b.createElement(
|
|
150
152
|
Ht,
|
|
151
153
|
{
|
|
154
|
+
...dt,
|
|
152
155
|
...mt,
|
|
153
|
-
|
|
154
|
-
active: l,
|
|
156
|
+
active: i,
|
|
155
157
|
ref: bt,
|
|
156
158
|
disabled: !W,
|
|
157
159
|
"aria-hidden": !W,
|
|
@@ -160,19 +162,19 @@ const Ut = ({ isSorting: t, wasDragging: y }) => !(t || y), Vt = At(
|
|
|
160
162
|
), /* @__PURE__ */ b.createElement(
|
|
161
163
|
_t,
|
|
162
164
|
{
|
|
163
|
-
active:
|
|
164
|
-
onClick:
|
|
165
|
+
active: n != null && n.y ? !1 : i,
|
|
166
|
+
onClick: V,
|
|
165
167
|
expanded: Et,
|
|
166
168
|
disabled: !B,
|
|
167
169
|
"aria-hidden": !B,
|
|
168
170
|
className: B ? "tw-visible" : "tw-invisible tw-pointer-events-none"
|
|
169
171
|
}
|
|
170
|
-
), Tt && /* @__PURE__ */ b.createElement("span", { className: "first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center" },
|
|
172
|
+
), Tt && /* @__PURE__ */ b.createElement("span", { className: "first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center" }, d), yt && f)
|
|
171
173
|
);
|
|
172
174
|
}
|
|
173
175
|
);
|
|
174
|
-
|
|
176
|
+
Yt.displayName = "FondueTreeItem";
|
|
175
177
|
export {
|
|
176
|
-
|
|
178
|
+
Yt as TreeItem
|
|
177
179
|
};
|
|
178
180
|
//# sourceMappingURL=TreeItem.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, MouseEvent, memo, useCallback, useMemo } from 'react';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport noop from 'lodash-es/noop';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport type {\n RegisterNodeChildrenPayload,\n TreeDragEndEvent,\n TreeDragMoveEvent,\n TreeDragStartEvent,\n TreeItemProps,\n} from '@components/Tree/types';\n\nimport { INDENTATION_WIDTH, Projection } from '../helpers';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { DragHandle } from './DragHandle';\nimport { Overlay } from './TreeItemOverlay';\nimport { ExpandButton } from './ExpandButton';\nimport { useDebounce } from '@hooks/useDebounce';\nimport { useTreeItem } from './useTreeItem';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n isSorting || wasDragging ? false : true;\n\n/** @private */\ntype TreeItemPrivateProps = {\n level?: number;\n parentId?: string;\n isSelected?: boolean;\n isExpanded?: boolean;\n treeDraggable?: boolean;\n /** onSelect is passed by the Tree component when cloning the TreeItem */\n onSelect?: (id: string) => void;\n /** onClick is the user defined callback to run after the onSelect */\n onClick?: (id: string) => void;\n onExpand?: (id: string) => void;\n onShrink?: (id: string) => void;\n projection?: Nullable<Projection>;\n registerOverlay?: (overlay: Overlay) => void;\n unregisterNodeChildren?: (payload: string) => void;\n registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps;\n\nexport const TreeItem = memo(\n ({\n id,\n type,\n label,\n onDrop,\n accepts,\n showCaret,\n children,\n parentId,\n level = 0,\n contentComponent,\n treeDraggable = false,\n onClick,\n onSelect,\n onExpand,\n onShrink,\n registerOverlay,\n registerNodeChildren,\n unregisterNodeChildren,\n draggable: itemDraggable = true,\n ignoreItemDoubleClick = false,\n expandOnSelect = false,\n 'data-test-id': dataTestId = 'fondue-tree-item',\n }: InternalTreeItemProps) => {\n const { active, over } = useDndContext();\n const { isSelected, isExpanded, projection } = useTreeItem(id);\n\n const draggable = treeDraggable && itemDraggable;\n\n const isActive = active?.id === id;\n const activeProjection = isActive && projection !== null && projection !== undefined ? projection : null;\n\n const overAccepts =\n typeof over?.data?.current?.accepts === 'string' ? over.data.current.accepts?.split(', ') : [];\n\n const parentAccepts =\n typeof activeProjection?.accepts === 'string' ? activeProjection.accepts?.split(', ') : [];\n\n const currentType = active?.data.current?.type || '';\n const cleanCurrentType = currentType?.replace(/-\\d+$/, '') || '';\n\n const isWithin =\n over !== null && activeProjection !== null && activeProjection.depth > over.data.current?.level;\n\n const canDropWithin =\n (isWithin && active?.data.current && overAccepts.includes(`${cleanCurrentType}-within`)) ||\n (activeProjection?.isWithinParent && parentAccepts.includes(`${cleanCurrentType}-within`));\n\n const canDrop =\n isActive && active?.data.current && ((overAccepts.includes(currentType) && !isWithin) || canDropWithin);\n\n const handleItemDragEnd = useCallback(\n (event: TreeDragEndEvent) => {\n const { over, active } = event;\n\n if (\n !isActive ||\n !activeProjection ||\n (active.id === over?.id && activeProjection?.depth === active.data.current?.level)\n ) {\n return;\n }\n\n if (isActive && over && canDrop && onDrop) {\n onDrop({\n id: active.id,\n parentId: activeProjection.parentId,\n sort: activeProjection.position,\n contentComponent,\n parentType: activeProjection.type,\n });\n }\n },\n [isActive, activeProjection, canDrop, onDrop, contentComponent],\n );\n\n const handleItemDragStart = useCallback(\n (event: TreeDragStartEvent) => {\n if (event.active.id !== id) {\n return;\n }\n\n registerOverlay?.({ contentComponent, children, id, label, level });\n },\n [children, contentComponent, id, label, level, registerOverlay],\n );\n\n const handleItemDragMove = useCallback(\n (event: TreeDragMoveEvent) => {\n if (event.active.id === id) {\n document.body.style.setProperty('cursor', canDrop ? 'grabbing' : 'no-drop');\n }\n },\n [canDrop, id],\n );\n\n useDndMonitor({\n onDragEnd: handleItemDragEnd,\n onDragStart: handleItemDragStart,\n onDragMove: handleItemDragMove,\n });\n\n const toggleExpand = useCallback(\n (event?: MouseEvent<HTMLButtonElement>) => {\n event?.stopPropagation();\n isExpanded ? onShrink?.(id) : onExpand?.(id);\n },\n [id, isExpanded, onExpand, onShrink],\n );\n\n const handleItemClick = useDebounce(\n (event: MouseEvent<HTMLElement>) => {\n event.stopPropagation();\n if (ignoreItemDoubleClick && event.detail >= 2) {\n return;\n }\n\n if (expandOnSelect) {\n toggleExpand();\n }\n\n onSelect?.(id);\n onClick?.(id);\n },\n ignoreItemDoubleClick ? 300 : 0,\n );\n\n const isParentActive = parentId && active?.id === parentId;\n\n const hasChildren = Children.count(children) > 0;\n\n const { enrichedChildren, childrenIds } = useMemo(() => {\n const enrichedChildren = removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 });\n return {\n enrichedChildren,\n childrenIds: enrichedChildren.map((child) => child.props.id),\n };\n }, [children, id, level]);\n\n const {\n attributes,\n listeners,\n transform,\n transition,\n setDraggableNodeRef,\n setDroppableNodeRef,\n setActivatorNodeRef,\n } = useSortable({\n id,\n disabled: !draggable,\n data: { type, accepts, parentId, level },\n animateLayoutChanges,\n transition: null,\n });\n\n useDeepCompareEffect(() => {\n if (Children.count(enrichedChildren) === 0) {\n return;\n }\n\n if (isActive || isParentActive) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isExpanded) {\n registerNodeChildren?.({ id, children: enrichedChildren });\n } else {\n unregisterNodeChildren?.(id);\n }\n }, [isActive, isExpanded, isParentActive, enrichedChildren, id]);\n\n const liClassName = useMemo(\n () =>\n merge([\n FOCUS_VISIBLE_STYLE,\n 'tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n !isActive && !isSelected && 'active:tw-bg-box-neutral-pressed',\n isSelected && !transform?.y\n ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover'\n : 'hover:tw-bg-box-neutral tw-text-text',\n transform?.y ? 'tw-bg-box-neutral-strong-inverse tw-text-text tw-font-normal' : '',\n ]),\n [isActive, isSelected, transform?.y],\n );\n\n const containerClassName = merge([\n 'tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full',\n isActive ? 'tw-border-dashed tw-rounded-sm tw-border-2 tw-pr-0 tw-h-12' : 'tw-h-10',\n isActive &&\n (canDrop\n ? 'tw-border-box-selected-strong tw-bg-box-selected-hover'\n : 'tw-bg-box-negative-hover tw-border-box-negative-strong-hover'),\n ]);\n\n const depthPadding = activeProjection?.depth ? activeProjection.depth * INDENTATION_WIDTH : undefined;\n const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n const liStyle = {\n paddingLeft: depthPadding ?? levelPadding,\n };\n\n const showContent = !isActive;\n const showChildren = isExpanded && !isActive;\n const showDragHandle = draggable && !isActive;\n const showLabel = label !== undefined && !isActive;\n const showExpandButton = !isActive && (showCaret === undefined ? hasChildren : showCaret);\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n };\n\n return (\n <li\n id={id}\n key={id}\n tabIndex={0}\n role=\"treeitem\"\n style={liStyle}\n onKeyDown={noop}\n aria-label={label}\n aria-level={level + 1}\n onClick={handleItemClick}\n className={liClassName}\n ref={setDroppableNodeRef}\n data-test-id={dataTestId}\n aria-selected={isSelected}\n aria-expanded={isExpanded}\n data-has-children={hasChildren}\n aria-owns={childrenIds.join(' ')}\n >\n <div ref={setDraggableNodeRef} className={containerClassName} style={style}>\n <DragHandle\n {...listeners}\n {...attributes}\n active={isSelected}\n ref={setActivatorNodeRef}\n disabled={!showDragHandle}\n aria-hidden={!showDragHandle}\n className={showDragHandle ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n <ExpandButton\n active={transform?.y ? false : isSelected}\n onClick={toggleExpand}\n expanded={showChildren}\n disabled={!showExpandButton}\n aria-hidden={!showExpandButton}\n className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n {showLabel && (\n <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n )}\n\n {showContent && contentComponent}\n </div>\n </li>\n );\n },\n);\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","memo","id","type","label","onDrop","accepts","showCaret","children","parentId","level","contentComponent","treeDraggable","onClick","onSelect","onExpand","onShrink","registerOverlay","registerNodeChildren","unregisterNodeChildren","itemDraggable","ignoreItemDoubleClick","expandOnSelect","dataTestId","active","over","useDndContext","isSelected","isExpanded","projection","useTreeItem","draggable","isActive","activeProjection","overAccepts","_b","_a","_c","parentAccepts","_d","currentType","_e","cleanCurrentType","isWithin","_f","canDropWithin","canDrop","handleItemDragEnd","useCallback","event","handleItemDragStart","handleItemDragMove","useDndMonitor","toggleExpand","handleItemClick","useDebounce","isParentActive","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","attributes","listeners","transform","transition","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useDeepCompareEffect","liClassName","merge","FOCUS_VISIBLE_STYLE","containerClassName","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","showContent","showChildren","showDragHandle","showLabel","showExpandButton","style","CSS","React","noop","DragHandle","ExpandButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, MouseEvent, memo, useCallback, useMemo } from 'react';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport noop from 'lodash-es/noop';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport type {\n RegisterNodeChildrenPayload,\n TreeDragEndEvent,\n TreeDragMoveEvent,\n TreeDragStartEvent,\n TreeItemProps,\n} from '@components/Tree/types';\n\nimport { INDENTATION_WIDTH, Projection } from '../helpers';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { DragHandle } from './DragHandle';\nimport { Overlay } from './TreeItemOverlay';\nimport { ExpandButton } from './ExpandButton';\nimport { useDebounce } from '@hooks/useDebounce';\nimport { useTreeItem } from './useTreeItem';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n isSorting || wasDragging ? false : true;\n\n/** @private */\ntype TreeItemPrivateProps = {\n level?: number;\n parentId?: string;\n isSelected?: boolean;\n isExpanded?: boolean;\n treeDraggable?: boolean;\n /** onSelect is passed by the Tree component when cloning the TreeItem */\n onSelect?: (id: string) => void;\n /** onClick is the user defined callback to run after the onSelect */\n onClick?: (id: string) => void;\n onExpand?: (id: string) => void;\n onShrink?: (id: string) => void;\n projection?: Nullable<Projection>;\n registerOverlay?: (overlay: Overlay) => void;\n unregisterNodeChildren?: (payload: string) => void;\n registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps;\n\nexport const TreeItem = memo(\n ({\n id,\n type,\n label,\n onDrop,\n accepts,\n showCaret,\n children,\n parentId,\n level = 0,\n contentComponent,\n treeDraggable = false,\n onClick,\n onSelect,\n onExpand,\n onShrink,\n registerOverlay,\n registerNodeChildren,\n unregisterNodeChildren,\n draggable: itemDraggable = true,\n ignoreItemDoubleClick = false,\n expandOnSelect = false,\n 'data-test-id': dataTestId = 'fondue-tree-item',\n }: InternalTreeItemProps) => {\n const { active, over } = useDndContext();\n const { isSelected, isExpanded, projection } = useTreeItem(id);\n\n const draggable = treeDraggable && itemDraggable;\n\n const isActive = active?.id === id;\n const activeProjection = isActive && projection !== null && projection !== undefined ? projection : null;\n\n const overAccepts =\n typeof over?.data?.current?.accepts === 'string' ? over.data.current.accepts?.split(', ') : [];\n\n const parentAccepts =\n typeof activeProjection?.accepts === 'string' ? activeProjection.accepts?.split(', ') : [];\n\n const currentType = active?.data.current?.type || '';\n const cleanCurrentType = currentType?.replace(/-\\d+$/, '') || '';\n\n const isWithin =\n over !== null && activeProjection !== null && activeProjection.depth > over.data.current?.level;\n\n const canDropWithin =\n (isWithin && active?.data.current && overAccepts.includes(`${cleanCurrentType}-within`)) ||\n (activeProjection?.isWithinParent && parentAccepts.includes(`${cleanCurrentType}-within`));\n\n const canDrop =\n isActive && active?.data.current && ((overAccepts.includes(currentType) && !isWithin) || canDropWithin);\n\n const handleItemDragEnd = useCallback(\n (event: TreeDragEndEvent) => {\n const { over, active } = event;\n\n if (\n !isActive ||\n !activeProjection ||\n (active.id === over?.id && activeProjection?.depth === active.data.current?.level)\n ) {\n return;\n }\n\n if (isActive && over && canDrop && onDrop) {\n onDrop({\n id: active.id,\n parentId: activeProjection.parentId,\n sort: activeProjection.position,\n contentComponent,\n parentType: activeProjection.type,\n });\n }\n },\n [isActive, activeProjection, canDrop, onDrop, contentComponent],\n );\n\n const handleItemDragStart = useCallback(\n (event: TreeDragStartEvent) => {\n if (event.active.id !== id) {\n return;\n }\n\n registerOverlay?.({ contentComponent, children, id, label, level });\n },\n [children, contentComponent, id, label, level, registerOverlay],\n );\n\n const handleItemDragMove = useCallback(\n (event: TreeDragMoveEvent) => {\n if (event.active.id === id) {\n document.body.style.setProperty('cursor', canDrop ? 'grabbing' : 'no-drop');\n }\n },\n [canDrop, id],\n );\n\n useDndMonitor({\n onDragEnd: handleItemDragEnd,\n onDragStart: handleItemDragStart,\n onDragMove: handleItemDragMove,\n });\n\n const toggleExpand = useCallback(\n (event?: MouseEvent<HTMLButtonElement>) => {\n event?.stopPropagation();\n isExpanded ? onShrink?.(id) : onExpand?.(id);\n },\n [id, isExpanded, onExpand, onShrink],\n );\n\n const handleItemClick = useDebounce(\n (event: MouseEvent<HTMLElement>) => {\n event.stopPropagation();\n if (ignoreItemDoubleClick && event.detail >= 2) {\n return;\n }\n\n if (expandOnSelect) {\n toggleExpand();\n }\n\n onSelect?.(id);\n onClick?.(id);\n },\n ignoreItemDoubleClick ? 300 : 0,\n );\n\n const isParentActive = parentId && active?.id === parentId;\n\n const hasChildren = Children.count(children) > 0;\n\n const { enrichedChildren, childrenIds } = useMemo(() => {\n const enrichedChildren = removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 });\n return {\n enrichedChildren,\n childrenIds: enrichedChildren.map((child) => child.props.id),\n };\n }, [children, id, level]);\n\n const {\n attributes,\n listeners,\n transform,\n transition,\n setDraggableNodeRef,\n setDroppableNodeRef,\n setActivatorNodeRef,\n } = useSortable({\n id,\n disabled: !draggable,\n data: { type, accepts, parentId, level },\n animateLayoutChanges,\n transition: null,\n });\n\n useDeepCompareEffect(() => {\n if (Children.count(enrichedChildren) === 0) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isActive || isParentActive) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isExpanded) {\n registerNodeChildren?.({ id, children: enrichedChildren });\n } else {\n unregisterNodeChildren?.(id);\n }\n }, [isActive, isExpanded, isParentActive, enrichedChildren, id]);\n\n const liClassName = useMemo(\n () =>\n merge([\n FOCUS_VISIBLE_STYLE,\n 'tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n !isActive && !isSelected && 'active:tw-bg-box-neutral-pressed',\n isSelected && !transform?.y\n ? 'tw-font-medium tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover'\n : 'hover:tw-bg-box-neutral tw-text-text',\n transform?.y ? 'tw-bg-box-neutral-strong-inverse tw-text-text tw-font-normal' : '',\n ]),\n [isActive, isSelected, transform?.y],\n );\n\n const containerClassName = merge([\n 'tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full',\n isActive ? 'tw-border-dashed tw-rounded-sm tw-border-2 tw-pr-0 tw-h-12' : 'tw-h-10',\n isActive &&\n (canDrop\n ? 'tw-border-box-selected-strong tw-bg-box-selected-hover'\n : 'tw-bg-box-negative-hover tw-border-box-negative-strong-hover'),\n ]);\n\n const depthPadding = activeProjection?.depth ? activeProjection.depth * INDENTATION_WIDTH : undefined;\n const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n const liStyle = {\n paddingLeft: depthPadding ?? levelPadding,\n };\n\n const showContent = !isActive;\n const showChildren = isExpanded && !isActive;\n const showDragHandle = draggable && !isActive;\n const showLabel = label !== undefined && !isActive;\n const showExpandButton = !isActive && (showCaret === undefined ? hasChildren : showCaret);\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n };\n\n return (\n <li\n id={id}\n key={id}\n tabIndex={0}\n role=\"treeitem\"\n style={liStyle}\n onKeyDown={noop}\n aria-label={label}\n aria-level={level + 1}\n onClick={handleItemClick}\n className={liClassName}\n ref={setDroppableNodeRef}\n data-test-id={dataTestId}\n aria-selected={isSelected}\n aria-expanded={isExpanded}\n data-has-children={hasChildren}\n aria-owns={childrenIds.join(' ')}\n >\n <div ref={setDraggableNodeRef} className={containerClassName} style={style}>\n <DragHandle\n {...listeners}\n {...attributes}\n active={isSelected}\n ref={setActivatorNodeRef}\n disabled={!showDragHandle}\n aria-hidden={!showDragHandle}\n className={showDragHandle ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n <ExpandButton\n active={transform?.y ? false : isSelected}\n onClick={toggleExpand}\n expanded={showChildren}\n disabled={!showExpandButton}\n aria-hidden={!showExpandButton}\n className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n {showLabel && (\n <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n )}\n\n {showContent && contentComponent}\n </div>\n </li>\n );\n },\n);\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","memo","id","type","label","onDrop","accepts","showCaret","children","parentId","level","contentComponent","treeDraggable","onClick","onSelect","onExpand","onShrink","registerOverlay","registerNodeChildren","unregisterNodeChildren","itemDraggable","ignoreItemDoubleClick","expandOnSelect","dataTestId","active","over","useDndContext","isSelected","isExpanded","projection","useTreeItem","draggable","isActive","activeProjection","overAccepts","_b","_a","_c","parentAccepts","_d","currentType","_e","cleanCurrentType","isWithin","_f","canDropWithin","canDrop","handleItemDragEnd","useCallback","event","handleItemDragStart","handleItemDragMove","useDndMonitor","toggleExpand","handleItemClick","useDebounce","isParentActive","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","attributes","listeners","transform","transition","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useDeepCompareEffect","liClassName","merge","FOCUS_VISIBLE_STYLE","containerClassName","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","showContent","showChildren","showDragHandle","showLabel","showExpandButton","style","CSS","React","noop","DragHandle","ExpandButton"],"mappings":"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"}
|