@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850
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.
- package/dist/lib/browser/{chunk-TLQLMZXU.mjs → chunk-33VLL4IJ.mjs} +2 -2
- package/dist/lib/browser/{chunk-TLQLMZXU.mjs.map → chunk-33VLL4IJ.mjs.map} +1 -1
- package/dist/lib/browser/chunk-MFAWMFJC.mjs +1418 -0
- package/dist/lib/browser/chunk-MFAWMFJC.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +3 -3
- package/dist/lib/browser/index.mjs.map +1 -1
- package/dist/lib/browser/{intent-resolver-PW7B76HO.mjs → intent-resolver-NAYKKAOP.mjs} +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-surface-M3CAS7ZP.mjs → react-surface-HGA3TAQU.mjs} +3 -3
- package/dist/lib/browser/{state-3UBYOTQT.mjs → state-R2UMYAHN.mjs} +2 -2
- package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts +1 -2
- package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/L0Menu.d.ts.map +1 -1
- package/dist/types/src/hooks.d.ts.map +1 -1
- package/package.json +36 -35
- package/src/components/NavTree/NavTree.stories.tsx +1 -1
- package/src/components/NavTreeContainer.tsx +13 -15
- package/src/components/NavTreeItem/NavTreeItemAction.tsx +2 -10
- package/src/components/Sidebar/L0Menu.tsx +3 -5
- package/src/components/Sidebar/L1Panel.tsx +1 -1
- package/src/hooks.ts +11 -12
- package/dist/lib/browser/chunk-UM2C5XK3.mjs +0 -1301
- package/dist/lib/browser/chunk-UM2C5XK3.mjs.map +0 -7
- /package/dist/lib/browser/{intent-resolver-PW7B76HO.mjs.map → intent-resolver-NAYKKAOP.mjs.map} +0 -0
- /package/dist/lib/browser/{react-surface-M3CAS7ZP.mjs.map → react-surface-HGA3TAQU.mjs.map} +0 -0
- /package/dist/lib/browser/{state-3UBYOTQT.mjs.map → state-R2UMYAHN.mjs.map} +0 -0
|
@@ -1,1301 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
NavTreeCapabilities
|
|
3
|
-
} from "./chunk-TLQLMZXU.mjs";
|
|
4
|
-
import {
|
|
5
|
-
COMMANDS_DIALOG,
|
|
6
|
-
KEY_BINDING,
|
|
7
|
-
NAVTREE_PLUGIN
|
|
8
|
-
} from "./chunk-IEW3JD5C.mjs";
|
|
9
|
-
|
|
10
|
-
// packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsDialog.tsx
|
|
11
|
-
import React, { useMemo, useState } from "react";
|
|
12
|
-
import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
|
|
13
|
-
import { isAction, isActionGroup } from "@dxos/app-graph";
|
|
14
|
-
import { Keyboard, keySymbols } from "@dxos/keyboard";
|
|
15
|
-
import { useActions } from "@dxos/plugin-graph";
|
|
16
|
-
import { Button, Dialog, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
|
|
17
|
-
import { SearchList } from "@dxos/react-ui-searchlist";
|
|
18
|
-
import { descriptionText, mx } from "@dxos/react-ui-theme";
|
|
19
|
-
import { getHostPlatform } from "@dxos/util";
|
|
20
|
-
var CommandsDialogContent = ({ selected: initial }) => {
|
|
21
|
-
const { t } = useTranslation(NAVTREE_PLUGIN);
|
|
22
|
-
const [selected, setSelected] = useState(initial);
|
|
23
|
-
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
24
|
-
const { graph } = useAppGraph();
|
|
25
|
-
const allActions = useMemo(() => {
|
|
26
|
-
const current = Keyboard.singleton.getCurrentContext();
|
|
27
|
-
const actionMap = /* @__PURE__ */ new Set();
|
|
28
|
-
const actions2 = [];
|
|
29
|
-
graph.traverse({
|
|
30
|
-
visitor: (node, path) => {
|
|
31
|
-
if ((isAction(node) || isActionGroup(node)) && !actionMap.has(node.id) && current.startsWith(path.slice(0, -1).join("/"))) {
|
|
32
|
-
actionMap.add(node.id);
|
|
33
|
-
actions2.push(node);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
actions2.sort((a, b) => {
|
|
38
|
-
return toLocalizedString(a.properties.label, t)?.toLowerCase().localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
|
|
39
|
-
});
|
|
40
|
-
return actions2;
|
|
41
|
-
}, [
|
|
42
|
-
graph
|
|
43
|
-
]);
|
|
44
|
-
const group = allActions.find(({ id }) => id === selected);
|
|
45
|
-
const groupActions = useActions(graph, group?.id);
|
|
46
|
-
const actions = isActionGroup(group) ? groupActions : allActions;
|
|
47
|
-
return /* @__PURE__ */ React.createElement(Dialog.Content, {
|
|
48
|
-
classNames: [
|
|
49
|
-
"md:max-is-[30rem] overflow-hidden mbs-12"
|
|
50
|
-
]
|
|
51
|
-
}, /* @__PURE__ */ React.createElement(Dialog.Title, null, t("commands dialog title", {
|
|
52
|
-
ns: NAVTREE_PLUGIN
|
|
53
|
-
})), /* @__PURE__ */ React.createElement(SearchList.Root, {
|
|
54
|
-
label: t("command list input placeholder"),
|
|
55
|
-
classNames: "flex flex-col grow overflow-hidden my-2"
|
|
56
|
-
}, /* @__PURE__ */ React.createElement(SearchList.Input, {
|
|
57
|
-
placeholder: t("command list input placeholder"),
|
|
58
|
-
classNames: "px-1 my-2"
|
|
59
|
-
}), /* @__PURE__ */ React.createElement(SearchList.Content, {
|
|
60
|
-
classNames: "max-bs-[24rem] overflow-auto"
|
|
61
|
-
}, actions?.map((action) => {
|
|
62
|
-
const label = toLocalizedString(action.properties.label, t);
|
|
63
|
-
const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
|
|
64
|
-
return /* @__PURE__ */ React.createElement(SearchList.Item, {
|
|
65
|
-
value: label,
|
|
66
|
-
key: action.id,
|
|
67
|
-
onSelect: () => {
|
|
68
|
-
if (action.properties.disabled) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
if (isActionGroup(action)) {
|
|
72
|
-
setSelected(action.id);
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
void dispatch(createIntent(LayoutAction.UpdateDialog, {
|
|
76
|
-
part: "dialog",
|
|
77
|
-
options: {
|
|
78
|
-
state: false
|
|
79
|
-
}
|
|
80
|
-
}));
|
|
81
|
-
setTimeout(() => {
|
|
82
|
-
const node = graph.getConnections(group?.id ?? action.id, "inbound")[0];
|
|
83
|
-
void (node && isAction(action) && action.data({
|
|
84
|
-
parent: node,
|
|
85
|
-
caller: KEY_BINDING
|
|
86
|
-
}));
|
|
87
|
-
});
|
|
88
|
-
},
|
|
89
|
-
classNames: "flex items-center gap-2",
|
|
90
|
-
disabled: action.properties.disabled,
|
|
91
|
-
...action.properties?.testId && {
|
|
92
|
-
"data-testid": action.properties.testId
|
|
93
|
-
}
|
|
94
|
-
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
95
|
-
icon: action.properties.icon,
|
|
96
|
-
size: 4
|
|
97
|
-
}), /* @__PURE__ */ React.createElement("span", {
|
|
98
|
-
className: "grow truncate"
|
|
99
|
-
}, label), shortcut && /* @__PURE__ */ React.createElement("span", {
|
|
100
|
-
className: mx("shrink-0", descriptionText)
|
|
101
|
-
}, keySymbols(shortcut).join("")));
|
|
102
|
-
}))), /* @__PURE__ */ React.createElement(Dialog.Close, {
|
|
103
|
-
asChild: true
|
|
104
|
-
}, /* @__PURE__ */ React.createElement(Button, {
|
|
105
|
-
variant: "primary",
|
|
106
|
-
classNames: "mbs-2"
|
|
107
|
-
}, t("close label", {
|
|
108
|
-
ns: "os"
|
|
109
|
-
}))));
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
// packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsTrigger.tsx
|
|
113
|
-
import { MagnifyingGlass } from "@phosphor-icons/react";
|
|
114
|
-
import React2 from "react";
|
|
115
|
-
import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
|
|
116
|
-
import { Button as Button2, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
117
|
-
import { getSize } from "@dxos/react-ui-theme";
|
|
118
|
-
var CommandsTrigger = () => {
|
|
119
|
-
const { dispatchPromise: dispatch } = useIntentDispatcher2();
|
|
120
|
-
const { t } = useTranslation2(NAVTREE_PLUGIN);
|
|
121
|
-
return /* @__PURE__ */ React2.createElement(Button2, {
|
|
122
|
-
classNames: "m-1 pli-1 lg:pli-2",
|
|
123
|
-
onClick: () => dispatch(createIntent2(LayoutAction2.UpdateDialog, {
|
|
124
|
-
part: "dialog",
|
|
125
|
-
subject: COMMANDS_DIALOG,
|
|
126
|
-
options: {
|
|
127
|
-
blockAlign: "start"
|
|
128
|
-
}
|
|
129
|
-
}))
|
|
130
|
-
}, /* @__PURE__ */ React2.createElement("span", {
|
|
131
|
-
className: "text-description font-normal grow text-start"
|
|
132
|
-
}, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(MagnifyingGlass, {
|
|
133
|
-
className: getSize(5)
|
|
134
|
-
}));
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
// packages/plugins/plugin-navtree/src/util.ts
|
|
138
|
-
import { isAction as isAction2, isActionLike } from "@dxos/app-graph";
|
|
139
|
-
import { isNonNullable } from "@dxos/util";
|
|
140
|
-
var getParent = (graph, node, path) => {
|
|
141
|
-
const parentId = path[path.length - 2];
|
|
142
|
-
return graph.getConnections(node.id, "inbound").find((n) => n.id === parentId);
|
|
143
|
-
};
|
|
144
|
-
var getPersistenceParent = (graph, node, path, persistenceClass) => {
|
|
145
|
-
if (node.properties.acceptPersistenceClass?.has(persistenceClass)) {
|
|
146
|
-
return node;
|
|
147
|
-
} else {
|
|
148
|
-
const parent = getParent(graph, node, path);
|
|
149
|
-
return parent ? getPersistenceParent(graph, parent, path.slice(0, path.length - 1), persistenceClass) : null;
|
|
150
|
-
}
|
|
151
|
-
};
|
|
152
|
-
var resolveMigrationOperation = (graph, activeNode, destinationPath, destinationRelatedNode) => {
|
|
153
|
-
const activeClass = activeNode.properties.persistenceClass;
|
|
154
|
-
if (destinationRelatedNode && activeClass) {
|
|
155
|
-
const persistenceParent = getPersistenceParent(graph, destinationRelatedNode, destinationPath, activeClass);
|
|
156
|
-
if (persistenceParent) {
|
|
157
|
-
const activeKey = activeNode.properties.persistenceKey;
|
|
158
|
-
if (activeKey && persistenceParent?.properties.acceptPersistenceKey) {
|
|
159
|
-
return persistenceParent.properties.acceptPersistenceKey.has(activeKey) && persistenceParent.properties.onTransferStart ? "transfer" : persistenceParent.properties.onCopy ? "copy" : "reject";
|
|
160
|
-
} else {
|
|
161
|
-
return "reject";
|
|
162
|
-
}
|
|
163
|
-
} else {
|
|
164
|
-
return "reject";
|
|
165
|
-
}
|
|
166
|
-
} else {
|
|
167
|
-
return "reject";
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
var sortActions = (actions) => actions.sort((a, b) => {
|
|
171
|
-
if (a.properties.disposition === b.properties.disposition) {
|
|
172
|
-
return 0;
|
|
173
|
-
}
|
|
174
|
-
if (a.properties.disposition === "list-item-primary") {
|
|
175
|
-
return -1;
|
|
176
|
-
}
|
|
177
|
-
return 1;
|
|
178
|
-
});
|
|
179
|
-
var getChildren = (graph, node, path = []) => {
|
|
180
|
-
return graph.getConnections(node.id, "outbound").map((n) => {
|
|
181
|
-
const nextPath = [
|
|
182
|
-
...path,
|
|
183
|
-
node.id
|
|
184
|
-
];
|
|
185
|
-
return nextPath.includes(n.id) ? void 0 : n;
|
|
186
|
-
}).filter(isNonNullable);
|
|
187
|
-
};
|
|
188
|
-
var getActions = (graph, node) => {
|
|
189
|
-
return graph.getActions(node.id).reduce((acc, arg) => {
|
|
190
|
-
if (arg.properties.disposition === "item") {
|
|
191
|
-
return acc;
|
|
192
|
-
}
|
|
193
|
-
acc.actions.push(arg);
|
|
194
|
-
if (!isAction2(arg)) {
|
|
195
|
-
const actionGroup = graph.getActions(arg.id);
|
|
196
|
-
acc.groupedActions[arg.id] = actionGroup;
|
|
197
|
-
}
|
|
198
|
-
return acc;
|
|
199
|
-
}, {
|
|
200
|
-
actions: [],
|
|
201
|
-
groupedActions: {}
|
|
202
|
-
});
|
|
203
|
-
};
|
|
204
|
-
var l0ItemType = (item) => {
|
|
205
|
-
if (item.properties.disposition === "collection") {
|
|
206
|
-
return "collection";
|
|
207
|
-
} else if (isActionLike(item)) {
|
|
208
|
-
return "action";
|
|
209
|
-
} else if (item.properties.disposition === "navigation") {
|
|
210
|
-
return "link";
|
|
211
|
-
} else {
|
|
212
|
-
return "tab";
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
|
|
216
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
|
|
217
|
-
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
218
|
-
import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
|
|
219
|
-
import { untracked } from "@preact/signals-core";
|
|
220
|
-
import React9, { memo as memo2, useCallback as useCallback3, useEffect, useMemo as useMemo5 } from "react";
|
|
221
|
-
import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
|
|
222
|
-
import { isAction as isAction4, isActionLike as isActionLike2, ROOT_ID } from "@dxos/app-graph";
|
|
223
|
-
import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
|
|
224
|
-
import { useConnections } from "@dxos/plugin-graph";
|
|
225
|
-
import { isEchoObject, isSpace } from "@dxos/react-client/echo";
|
|
226
|
-
import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
|
|
227
|
-
import { isTreeData } from "@dxos/react-ui-list";
|
|
228
|
-
import { mx as mx5 } from "@dxos/react-ui-theme";
|
|
229
|
-
import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
|
|
230
|
-
|
|
231
|
-
// packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
|
|
232
|
-
import React8, { useMemo as useMemo4 } from "react";
|
|
233
|
-
import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
|
|
234
|
-
|
|
235
|
-
// packages/plugins/plugin-navtree/src/hooks.ts
|
|
236
|
-
var useLoadDescendents = (root) => {
|
|
237
|
-
};
|
|
238
|
-
|
|
239
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeContext.tsx
|
|
240
|
-
import { createContext, useContext } from "react";
|
|
241
|
-
import { raise } from "@dxos/debug";
|
|
242
|
-
var NavTreeContext = /* @__PURE__ */ createContext(null);
|
|
243
|
-
var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Missing NavTreeContext"));
|
|
244
|
-
|
|
245
|
-
// packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
|
|
246
|
-
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
|
247
|
-
import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
248
|
-
import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
|
|
249
|
-
import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view";
|
|
250
|
-
import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
|
|
251
|
-
import React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
|
|
252
|
-
import { invariant } from "@dxos/invariant";
|
|
253
|
-
import { Icon as Icon2, IconButton, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString2, useMediaQuery, useTranslation as useTranslation3 } from "@dxos/react-ui";
|
|
254
|
-
import { MenuProvider, DropdownMenu } from "@dxos/react-ui-menu";
|
|
255
|
-
import { Tabs } from "@dxos/react-ui-tabs";
|
|
256
|
-
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
257
|
-
import { arrayMove, getFirstTwoRenderableChars } from "@dxos/util";
|
|
258
|
-
|
|
259
|
-
// packages/plugins/plugin-navtree/src/components/UserAccountAvatar/UserAccountAvatar.tsx
|
|
260
|
-
import React3 from "react";
|
|
261
|
-
import { Avatar } from "@dxos/react-ui";
|
|
262
|
-
import { hexToFallback } from "@dxos/util";
|
|
263
|
-
var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
|
|
264
|
-
const fallbackValue = hexToFallback(userId ?? "0");
|
|
265
|
-
return /* @__PURE__ */ React3.createElement("div", {
|
|
266
|
-
className: "grid place-items-center",
|
|
267
|
-
"data-joyride": "welcome/account"
|
|
268
|
-
}, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
|
|
269
|
-
variant: "circle",
|
|
270
|
-
size: size ?? 12,
|
|
271
|
-
status: status ?? "active",
|
|
272
|
-
hue: hue || fallbackValue.hue,
|
|
273
|
-
fallback: emoji || fallbackValue.emoji,
|
|
274
|
-
"data-testid": "treeView.userAccount"
|
|
275
|
-
})));
|
|
276
|
-
};
|
|
277
|
-
|
|
278
|
-
// packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
|
|
279
|
-
var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
|
|
280
|
-
var useL0ItemClick = ({ item, parent, path }, type) => {
|
|
281
|
-
const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
|
|
282
|
-
const [isLg] = useMediaQuery("lg", {
|
|
283
|
-
ssr: false
|
|
284
|
-
});
|
|
285
|
-
return useCallback((event) => {
|
|
286
|
-
switch (type) {
|
|
287
|
-
case "action": {
|
|
288
|
-
const { data: invoke, properties: { caller } } = item;
|
|
289
|
-
return invoke?.(caller ? {
|
|
290
|
-
node: parent,
|
|
291
|
-
caller
|
|
292
|
-
} : {
|
|
293
|
-
node: parent
|
|
294
|
-
});
|
|
295
|
-
}
|
|
296
|
-
case "tab":
|
|
297
|
-
return onTabChange?.(item);
|
|
298
|
-
case "link":
|
|
299
|
-
return onSelect?.({
|
|
300
|
-
item,
|
|
301
|
-
path,
|
|
302
|
-
current: !isCurrent(path, item),
|
|
303
|
-
option: event.altKey
|
|
304
|
-
});
|
|
305
|
-
}
|
|
306
|
-
}, [
|
|
307
|
-
item,
|
|
308
|
-
parent,
|
|
309
|
-
type,
|
|
310
|
-
tab,
|
|
311
|
-
isCurrent,
|
|
312
|
-
onSelect,
|
|
313
|
-
onTabChange,
|
|
314
|
-
isLg
|
|
315
|
-
]);
|
|
316
|
-
};
|
|
317
|
-
var l0Breakpoints = {
|
|
318
|
-
lg: "hidden lg:grid"
|
|
319
|
-
};
|
|
320
|
-
var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, forwardedRef) => {
|
|
321
|
-
const { getProps } = useNavTreeContext();
|
|
322
|
-
const { id, testId } = getProps?.(item, path) ?? {};
|
|
323
|
-
const type = l0ItemType(item);
|
|
324
|
-
const itemPath = useMemo2(() => [
|
|
325
|
-
...path,
|
|
326
|
-
item.id
|
|
327
|
-
], [
|
|
328
|
-
item.id,
|
|
329
|
-
path
|
|
330
|
-
]);
|
|
331
|
-
const { t } = useTranslation3(NAVTREE_PLUGIN);
|
|
332
|
-
const localizedString = toLocalizedString2(item.properties.label, t);
|
|
333
|
-
const handleClick = useL0ItemClick({
|
|
334
|
-
item,
|
|
335
|
-
parent,
|
|
336
|
-
path: itemPath
|
|
337
|
-
}, type);
|
|
338
|
-
const rootProps = type === "tab" ? {
|
|
339
|
-
value: item.id,
|
|
340
|
-
tabIndex: 0,
|
|
341
|
-
onClick: handleClick,
|
|
342
|
-
"data-testid": testId,
|
|
343
|
-
"data-itemid": id
|
|
344
|
-
} : type !== "collection" ? {
|
|
345
|
-
onClick: handleClick,
|
|
346
|
-
"data-testid": testId,
|
|
347
|
-
"data-itemid": id
|
|
348
|
-
} : {
|
|
349
|
-
onClick: handleClick
|
|
350
|
-
};
|
|
351
|
-
const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
|
|
352
|
-
return /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
|
|
353
|
-
asChild: true,
|
|
354
|
-
delayDuration: 0,
|
|
355
|
-
side: "right",
|
|
356
|
-
content: localizedString
|
|
357
|
-
}, /* @__PURE__ */ React4.createElement(Root, {
|
|
358
|
-
...rootProps,
|
|
359
|
-
"data-type": type,
|
|
360
|
-
className: mx2('group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group', l0Breakpoints[item.properties.l0Breakpoint]),
|
|
361
|
-
ref: forwardedRef
|
|
362
|
-
}, children));
|
|
363
|
-
});
|
|
364
|
-
var L0Avator = ({ item }) => {
|
|
365
|
-
const { t } = useTranslation3(NAVTREE_PLUGIN);
|
|
366
|
-
const type = l0ItemType(item);
|
|
367
|
-
const hue = item.properties.hue ?? null;
|
|
368
|
-
const hueFgStyle = hue && {
|
|
369
|
-
style: {
|
|
370
|
-
color: `var(--dx-${hue}SurfaceText)`
|
|
371
|
-
}
|
|
372
|
-
};
|
|
373
|
-
const localizedString = toLocalizedString2(item.properties.label, t);
|
|
374
|
-
const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
|
|
375
|
-
type,
|
|
376
|
-
item.properties.label,
|
|
377
|
-
t
|
|
378
|
-
]);
|
|
379
|
-
return /* @__PURE__ */ React4.createElement("span", {
|
|
380
|
-
role: "img",
|
|
381
|
-
className: "place-self-center text-xl font-light",
|
|
382
|
-
...hueFgStyle
|
|
383
|
-
}, avatarValue);
|
|
384
|
-
};
|
|
385
|
-
var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
|
|
386
|
-
const { t } = useTranslation3(NAVTREE_PLUGIN);
|
|
387
|
-
const itemElement = useRef(null);
|
|
388
|
-
const [closestEdge, setEdge] = useState2(null);
|
|
389
|
-
const type = l0ItemType(item);
|
|
390
|
-
const localizedString = toLocalizedString2(item.properties.label, t);
|
|
391
|
-
const hue = item.properties.hue ?? null;
|
|
392
|
-
const hueFgStyle = hue && {
|
|
393
|
-
style: {
|
|
394
|
-
color: `var(--dx-${hue}SurfaceText)`
|
|
395
|
-
}
|
|
396
|
-
};
|
|
397
|
-
useLayoutEffect(() => {
|
|
398
|
-
if (!itemElement.current || !onRearrange) {
|
|
399
|
-
return;
|
|
400
|
-
}
|
|
401
|
-
return combine(draggable({
|
|
402
|
-
element: itemElement.current,
|
|
403
|
-
getInitialData: () => ({
|
|
404
|
-
id: item.id,
|
|
405
|
-
type: "l0Item"
|
|
406
|
-
}),
|
|
407
|
-
onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
|
|
408
|
-
document.body.setAttribute("data-drag-preview", "true");
|
|
409
|
-
const element = source.element.querySelector("[data-frame]");
|
|
410
|
-
scrollJustEnoughIntoView({
|
|
411
|
-
element
|
|
412
|
-
});
|
|
413
|
-
const { x, y } = preserveOffsetOnSource({
|
|
414
|
-
element,
|
|
415
|
-
input: location.current.input
|
|
416
|
-
})({
|
|
417
|
-
container: element.offsetParent ?? document.body
|
|
418
|
-
});
|
|
419
|
-
nativeSetDragImage?.(element, x, y);
|
|
420
|
-
},
|
|
421
|
-
onDragStart: () => {
|
|
422
|
-
document.body.removeAttribute("data-drag-preview");
|
|
423
|
-
itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
|
|
424
|
-
},
|
|
425
|
-
onDrop: () => {
|
|
426
|
-
itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
|
|
427
|
-
}
|
|
428
|
-
}), dropTargetForElements({
|
|
429
|
-
element: itemElement.current,
|
|
430
|
-
getData: ({ input, element }) => {
|
|
431
|
-
return attachClosestEdge({
|
|
432
|
-
id: item.id,
|
|
433
|
-
type: "l0Item"
|
|
434
|
-
}, {
|
|
435
|
-
input,
|
|
436
|
-
element,
|
|
437
|
-
allowedEdges: [
|
|
438
|
-
"top",
|
|
439
|
-
"bottom"
|
|
440
|
-
]
|
|
441
|
-
});
|
|
442
|
-
},
|
|
443
|
-
onDragEnter: ({ self, source }) => {
|
|
444
|
-
if (source.data.type === self.data.type) {
|
|
445
|
-
setEdge(extractClosestEdge(self.data));
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
|
-
onDrag: ({ self, source }) => {
|
|
449
|
-
if (source.data.type === self.data.type) {
|
|
450
|
-
setEdge(extractClosestEdge(self.data));
|
|
451
|
-
}
|
|
452
|
-
},
|
|
453
|
-
onDragLeave: () => setEdge(null),
|
|
454
|
-
onDrop: ({ self, source }) => {
|
|
455
|
-
setEdge(null);
|
|
456
|
-
if (source.data.type === self.data.type) {
|
|
457
|
-
onRearrange(source.data, self.data, extractClosestEdge(self.data));
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
}));
|
|
461
|
-
}, [
|
|
462
|
-
item,
|
|
463
|
-
onRearrange
|
|
464
|
-
]);
|
|
465
|
-
return /* @__PURE__ */ React4.createElement(L0ItemRoot, {
|
|
466
|
-
ref: itemElement,
|
|
467
|
-
item,
|
|
468
|
-
parent,
|
|
469
|
-
path
|
|
470
|
-
}, /* @__PURE__ */ React4.createElement("div", {
|
|
471
|
-
role: "none",
|
|
472
|
-
"data-frame": true,
|
|
473
|
-
className: mx2(
|
|
474
|
-
"flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded",
|
|
475
|
-
// TODO(burdon): Create reusable button/component and/or create var for size.
|
|
476
|
-
pinned ? "bg-transparent w-[50px] p-2 group-hover/l0item:bg-groupSurface" : "bg-groupSurface w-[50px] h-[50px]"
|
|
477
|
-
),
|
|
478
|
-
...hue && {
|
|
479
|
-
style: {
|
|
480
|
-
background: `var(--dx-${hue}Surface)`
|
|
481
|
-
}
|
|
482
|
-
}
|
|
483
|
-
}, item.properties.icon && /* @__PURE__ */ React4.createElement(Icon2, {
|
|
484
|
-
icon: item.properties.icon,
|
|
485
|
-
size: pinned ? 5 : 6,
|
|
486
|
-
...hueFgStyle
|
|
487
|
-
}) || type === "tab" && item.properties.disposition !== "pin-end" && /* @__PURE__ */ React4.createElement(L0Avator, {
|
|
488
|
-
item
|
|
489
|
-
})), /* @__PURE__ */ React4.createElement("div", {
|
|
490
|
-
role: "none",
|
|
491
|
-
className: "hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
|
|
492
|
-
}), /* @__PURE__ */ React4.createElement("span", {
|
|
493
|
-
id: `${item.id}__label`,
|
|
494
|
-
className: "sr-only"
|
|
495
|
-
}, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
|
|
496
|
-
edge: closestEdge
|
|
497
|
-
}));
|
|
498
|
-
};
|
|
499
|
-
var L0Collection = ({ item, path }) => {
|
|
500
|
-
const navTreeContext = useNavTreeContext();
|
|
501
|
-
useLoadDescendents(item);
|
|
502
|
-
const collectionItems = navTreeContext.useItems(item);
|
|
503
|
-
const groupPath = useMemo2(() => [
|
|
504
|
-
...path,
|
|
505
|
-
item.id
|
|
506
|
-
], [
|
|
507
|
-
item.id,
|
|
508
|
-
path
|
|
509
|
-
]);
|
|
510
|
-
const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
|
|
511
|
-
const handleRearrange = useCallback((source, target, closestEdge) => {
|
|
512
|
-
invariant(item.properties.onRearrangeChildren, void 0, {
|
|
513
|
-
F: __dxlog_file,
|
|
514
|
-
L: 266,
|
|
515
|
-
S: void 0,
|
|
516
|
-
A: [
|
|
517
|
-
"item.properties.onRearrangeChildren",
|
|
518
|
-
""
|
|
519
|
-
]
|
|
520
|
-
});
|
|
521
|
-
const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
|
|
522
|
-
const targetIndex = collectionItems.findIndex((i) => i.id === target.id);
|
|
523
|
-
const insertIndex = source.id === target.id ? sourceIndex : targetIndex + (sourceIndex < targetIndex ? closestEdge === "top" ? -1 : 0 : closestEdge === "bottom" ? 1 : 0);
|
|
524
|
-
const nextOrder = arrayMove([
|
|
525
|
-
...collectionItems
|
|
526
|
-
], sourceIndex, insertIndex);
|
|
527
|
-
return item.properties.onRearrangeChildren(nextOrder);
|
|
528
|
-
}, [
|
|
529
|
-
collectionItems,
|
|
530
|
-
item.properties.onRearrangeChildren
|
|
531
|
-
]);
|
|
532
|
-
return /* @__PURE__ */ React4.createElement("div", {
|
|
533
|
-
role: "group",
|
|
534
|
-
className: "contents group/l0c",
|
|
535
|
-
"aria-labelledby": `${item.id}__label`,
|
|
536
|
-
"data-itemid": id,
|
|
537
|
-
"data-testid": testId
|
|
538
|
-
}, collectionItems.map((collectionItem) => /* @__PURE__ */ React4.createElement(L0Item, {
|
|
539
|
-
key: collectionItem.id,
|
|
540
|
-
item: collectionItem,
|
|
541
|
-
parent: item,
|
|
542
|
-
path: groupPath,
|
|
543
|
-
...item.properties.onRearrangeChildren && {
|
|
544
|
-
onRearrange: handleRearrange
|
|
545
|
-
}
|
|
546
|
-
})));
|
|
547
|
-
};
|
|
548
|
-
var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
|
|
549
|
-
const { t } = useTranslation3(NAVTREE_PLUGIN);
|
|
550
|
-
const suppressNextTooltip = useRef(true);
|
|
551
|
-
return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
|
|
552
|
-
classNames: [
|
|
553
|
-
"group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg",
|
|
554
|
-
"grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout",
|
|
555
|
-
"!is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]"
|
|
556
|
-
]
|
|
557
|
-
}, /* @__PURE__ */ React4.createElement("div", {
|
|
558
|
-
role: "none",
|
|
559
|
-
className: "flex justify-center p-1"
|
|
560
|
-
}, /* @__PURE__ */ React4.createElement(MenuProvider, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
|
|
561
|
-
group: parent,
|
|
562
|
-
items: menuActions
|
|
563
|
-
}, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
|
|
564
|
-
asChild: true
|
|
565
|
-
}, /* @__PURE__ */ React4.createElement(IconButton, {
|
|
566
|
-
iconOnly: true,
|
|
567
|
-
icon: "ph--dots-three--regular",
|
|
568
|
-
size: 5,
|
|
569
|
-
label: t("app menu label"),
|
|
570
|
-
tooltipSide: "right",
|
|
571
|
-
classNames: "w-[50px] _bg-primary-500",
|
|
572
|
-
suppressNextTooltip,
|
|
573
|
-
"data-testid": "spacePlugin.addSpace"
|
|
574
|
-
}))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
|
|
575
|
-
role: "none",
|
|
576
|
-
className: mx2([
|
|
577
|
-
"flex flex-col gap-2 pbs-1",
|
|
578
|
-
'[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
|
|
579
|
-
'[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
|
|
580
|
-
])
|
|
581
|
-
}, topLevelItems.map((item) => {
|
|
582
|
-
if (l0ItemType(item) === "collection") {
|
|
583
|
-
return /* @__PURE__ */ React4.createElement(L0Collection, {
|
|
584
|
-
key: item.id,
|
|
585
|
-
item,
|
|
586
|
-
parent,
|
|
587
|
-
path
|
|
588
|
-
});
|
|
589
|
-
} else {
|
|
590
|
-
return /* @__PURE__ */ React4.createElement(L0Item, {
|
|
591
|
-
key: item.id,
|
|
592
|
-
item,
|
|
593
|
-
parent,
|
|
594
|
-
path
|
|
595
|
-
});
|
|
596
|
-
}
|
|
597
|
-
})), /* @__PURE__ */ React4.createElement(ScrollArea.Scrollbar, {
|
|
598
|
-
orientation: "vertical"
|
|
599
|
-
}, /* @__PURE__ */ React4.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React4.createElement("div", {
|
|
600
|
-
role: "none",
|
|
601
|
-
className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
|
|
602
|
-
}, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React4.createElement(L0Item, {
|
|
603
|
-
key: item.id,
|
|
604
|
-
item,
|
|
605
|
-
parent,
|
|
606
|
-
path,
|
|
607
|
-
pinned: true
|
|
608
|
-
}))), userAccountItem && /* @__PURE__ */ React4.createElement("div", {
|
|
609
|
-
role: "none",
|
|
610
|
-
className: "grid app-no-drag"
|
|
611
|
-
}, /* @__PURE__ */ React4.createElement(L0ItemRoot, {
|
|
612
|
-
key: userAccountItem.id,
|
|
613
|
-
item: userAccountItem,
|
|
614
|
-
parent,
|
|
615
|
-
path
|
|
616
|
-
}, /* @__PURE__ */ React4.createElement(UserAccountAvatar, {
|
|
617
|
-
userId: userAccountItem.properties.userId,
|
|
618
|
-
hue: userAccountItem.properties.hue,
|
|
619
|
-
emoji: userAccountItem.properties.emoji,
|
|
620
|
-
status: userAccountItem.properties.status,
|
|
621
|
-
size: 11
|
|
622
|
-
}))), /* @__PURE__ */ React4.createElement("div", {
|
|
623
|
-
role: "none",
|
|
624
|
-
className: 'hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]',
|
|
625
|
-
style: {
|
|
626
|
-
background: "linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)"
|
|
627
|
-
}
|
|
628
|
-
}));
|
|
629
|
-
};
|
|
630
|
-
|
|
631
|
-
// packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
|
|
632
|
-
import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
|
|
633
|
-
import { Button as Button3, Icon as Icon3, IconButton as IconButton3, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
634
|
-
import { Tree } from "@dxos/react-ui-list";
|
|
635
|
-
import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
|
|
636
|
-
import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx4 } from "@dxos/react-ui-theme";
|
|
637
|
-
|
|
638
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemAction.tsx
|
|
639
|
-
import React5, { useRef as useRef2 } from "react";
|
|
640
|
-
import { useTranslation as useTranslation4, toLocalizedString as toLocalizedString3, IconButton as IconButton2, useDensityContext } from "@dxos/react-ui";
|
|
641
|
-
import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
|
|
642
|
-
import { hoverableControlItem, hoverableOpenControlItem, mx as mx3 } from "@dxos/react-ui-theme";
|
|
643
|
-
var fallbackIcon = "ph--placeholder--regular";
|
|
644
|
-
var fineActionButtonProps = {
|
|
645
|
-
size: 4,
|
|
646
|
-
density: "fine"
|
|
647
|
-
};
|
|
648
|
-
var coarseActionButtonProps = {
|
|
649
|
-
size: 5,
|
|
650
|
-
density: "coarse"
|
|
651
|
-
};
|
|
652
|
-
var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
|
|
653
|
-
const { t } = useTranslation4(NAVTREE_PLUGIN);
|
|
654
|
-
const suppressNextTooltip = useRef2(false);
|
|
655
|
-
const density = useDensityContext();
|
|
656
|
-
return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
|
|
657
|
-
group: parent,
|
|
658
|
-
items: menuActions,
|
|
659
|
-
caller,
|
|
660
|
-
suppressNextTooltip
|
|
661
|
-
}, /* @__PURE__ */ React5.createElement(DropdownMenu2.Trigger, {
|
|
662
|
-
asChild: true
|
|
663
|
-
}, /* @__PURE__ */ React5.createElement(IconButton2, {
|
|
664
|
-
...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
|
|
665
|
-
classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
|
|
666
|
-
variant: "ghost",
|
|
667
|
-
icon: icon ?? fallbackIcon,
|
|
668
|
-
iconOnly: true,
|
|
669
|
-
label: toLocalizedString3(label, t),
|
|
670
|
-
"data-testid": testId,
|
|
671
|
-
suppressNextTooltip
|
|
672
|
-
}))));
|
|
673
|
-
};
|
|
674
|
-
var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
|
|
675
|
-
label: "never"
|
|
676
|
-
}, data: invoke, baseLabel }) => {
|
|
677
|
-
const density = useDensityContext();
|
|
678
|
-
return /* @__PURE__ */ React5.createElement(IconButton2, {
|
|
679
|
-
...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
|
|
680
|
-
variant,
|
|
681
|
-
classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
|
|
682
|
-
icon: icon ?? fallbackIcon,
|
|
683
|
-
iconOnly,
|
|
684
|
-
label: baseLabel,
|
|
685
|
-
disabled,
|
|
686
|
-
onClick: (event) => {
|
|
687
|
-
if (disabled) {
|
|
688
|
-
return;
|
|
689
|
-
}
|
|
690
|
-
event.stopPropagation();
|
|
691
|
-
void invoke?.(caller ? {
|
|
692
|
-
parent,
|
|
693
|
-
caller
|
|
694
|
-
} : {
|
|
695
|
-
parent
|
|
696
|
-
});
|
|
697
|
-
},
|
|
698
|
-
"data-testid": testId
|
|
699
|
-
});
|
|
700
|
-
};
|
|
701
|
-
var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
|
|
702
|
-
const { t } = useTranslation4(NAVTREE_PLUGIN);
|
|
703
|
-
const monolithicAction = menuActions?.length === 1 && menuActions[0];
|
|
704
|
-
const baseLabel = toLocalizedString3(monolithicAction ? monolithicAction.properties.label : props.label, t);
|
|
705
|
-
return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
|
|
706
|
-
baseLabel,
|
|
707
|
-
parent: node,
|
|
708
|
-
...menuActions[0]
|
|
709
|
-
}) : /* @__PURE__ */ React5.createElement(NavTreeItemActionDropdownMenu, {
|
|
710
|
-
...props,
|
|
711
|
-
label: baseLabel,
|
|
712
|
-
parent: node,
|
|
713
|
-
menuActions
|
|
714
|
-
});
|
|
715
|
-
};
|
|
716
|
-
|
|
717
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemColumns.tsx
|
|
718
|
-
import React6, { Fragment, memo } from "react";
|
|
719
|
-
import { isAction as isAction3 } from "@dxos/app-graph";
|
|
720
|
-
import { DensityProvider, Popover, toLocalizedString as toLocalizedString4, Treegrid, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
721
|
-
var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
|
|
722
|
-
const { t } = useTranslation5(NAVTREE_PLUGIN);
|
|
723
|
-
const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
|
|
724
|
-
const level = path.length - 2;
|
|
725
|
-
const { actions: _actions, groupedActions } = getActions2(item);
|
|
726
|
-
const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
|
|
727
|
-
const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
|
|
728
|
-
action
|
|
729
|
-
] : []).filter((action) => !action.properties?.hidden);
|
|
730
|
-
const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
|
|
731
|
-
useLoadDescendents(item);
|
|
732
|
-
useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
|
|
733
|
-
return /* @__PURE__ */ React6.createElement(DensityProvider, {
|
|
734
|
-
density
|
|
735
|
-
}, /* @__PURE__ */ React6.createElement("div", {
|
|
736
|
-
role: "none",
|
|
737
|
-
className: "contents app-no-drag"
|
|
738
|
-
}, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
|
|
739
|
-
testId: primaryAction.properties?.testId,
|
|
740
|
-
label: toLocalizedString4(primaryAction.properties?.label, t),
|
|
741
|
-
icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
|
|
742
|
-
parent: item,
|
|
743
|
-
monolithic: isAction3(primaryAction),
|
|
744
|
-
menuActions: isAction3(primaryAction) ? [
|
|
745
|
-
primaryAction
|
|
746
|
-
] : groupedActions[primaryAction.id],
|
|
747
|
-
menuType: primaryAction.properties?.menuType,
|
|
748
|
-
caller: NAV_TREE_ITEM
|
|
749
|
-
}) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
|
|
750
|
-
testId: `navtree.treeItem.actionsLevel${level}`,
|
|
751
|
-
label: t("tree item actions label"),
|
|
752
|
-
icon: "ph--dots-three-vertical--regular",
|
|
753
|
-
parent: item,
|
|
754
|
-
menuActions: actions,
|
|
755
|
-
menuType: "dropdown",
|
|
756
|
-
caller: NAV_TREE_ITEM
|
|
757
|
-
}) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
|
|
758
|
-
node: item,
|
|
759
|
-
open
|
|
760
|
-
})));
|
|
761
|
-
});
|
|
762
|
-
|
|
763
|
-
// packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
|
|
764
|
-
var headingBackButtonLabel = "inset-0 min-is-0 truncate flex items-center pis-2";
|
|
765
|
-
var TitleButton = ({ title, onClick }) => {
|
|
766
|
-
return /* @__PURE__ */ React7.createElement(Button3, {
|
|
767
|
-
variant: "ghost",
|
|
768
|
-
classNames: "pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal",
|
|
769
|
-
onClick
|
|
770
|
-
}, /* @__PURE__ */ React7.createElement(Icon3, {
|
|
771
|
-
icon: "ph--caret-left--bold",
|
|
772
|
-
size: 3
|
|
773
|
-
}), /* @__PURE__ */ React7.createElement("span", {
|
|
774
|
-
className: mx4(headingBackButtonLabel)
|
|
775
|
-
}, title));
|
|
776
|
-
};
|
|
777
|
-
var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
|
|
778
|
-
const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
|
|
779
|
-
const { t } = useTranslation6(NAVTREE_PLUGIN);
|
|
780
|
-
const alternateTree = navTreeContext.useItems(item, {
|
|
781
|
-
disposition: "alternate-tree"
|
|
782
|
-
})[0];
|
|
783
|
-
const alternatePath = useMemo3(() => [
|
|
784
|
-
...path,
|
|
785
|
-
item.id
|
|
786
|
-
], [
|
|
787
|
-
item.id,
|
|
788
|
-
path
|
|
789
|
-
]);
|
|
790
|
-
const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
|
|
791
|
-
alternatePath,
|
|
792
|
-
setAlternateTree
|
|
793
|
-
]);
|
|
794
|
-
const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
|
|
795
|
-
const useAlternateItems = useCallback2((node, { disposition } = {}) => {
|
|
796
|
-
return navTreeContext.useItems(node, {
|
|
797
|
-
disposition,
|
|
798
|
-
sort: node?.id === alternateTree.id
|
|
799
|
-
});
|
|
800
|
-
}, [
|
|
801
|
-
navTreeContext,
|
|
802
|
-
alternateTree
|
|
803
|
-
]);
|
|
804
|
-
const handleBack = useCallback2(() => {
|
|
805
|
-
if (isAlternate) {
|
|
806
|
-
setAlternateTree?.(alternatePath, false);
|
|
807
|
-
} else {
|
|
808
|
-
onBack?.();
|
|
809
|
-
}
|
|
810
|
-
}, [
|
|
811
|
-
isAlternate,
|
|
812
|
-
onBack,
|
|
813
|
-
alternatePath,
|
|
814
|
-
setAlternateTree
|
|
815
|
-
]);
|
|
816
|
-
const title = toLocalizedString5(item.properties.label, t);
|
|
817
|
-
const backCapable = item.id.startsWith("!") || isAlternate;
|
|
818
|
-
return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
|
|
819
|
-
key: item.id,
|
|
820
|
-
value: item.id,
|
|
821
|
-
classNames: [
|
|
822
|
-
"absolute inset-block-0 inline-end-0",
|
|
823
|
-
"is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]",
|
|
824
|
-
"pbs-[env(safe-area-inset-top)]",
|
|
825
|
-
item.id === currentItemId && "grid"
|
|
826
|
-
],
|
|
827
|
-
tabIndex: -1,
|
|
828
|
-
"aria-label": title,
|
|
829
|
-
...!open && {
|
|
830
|
-
inert: "true"
|
|
831
|
-
}
|
|
832
|
-
}, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
|
|
833
|
-
className: "flex items-center border-be border-separator app-drag pli-1"
|
|
834
|
-
}, backCapable ? /* @__PURE__ */ React7.createElement(TitleButton, {
|
|
835
|
-
title,
|
|
836
|
-
onClick: handleBack
|
|
837
|
-
}) : /* @__PURE__ */ React7.createElement("span", {
|
|
838
|
-
className: "flex-1 truncate min-is-0 pis-6"
|
|
839
|
-
}, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton3, {
|
|
840
|
-
variant: "ghost",
|
|
841
|
-
classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
|
|
842
|
-
iconOnly: true,
|
|
843
|
-
size: 5,
|
|
844
|
-
density: "coarse",
|
|
845
|
-
icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
|
|
846
|
-
label: toLocalizedString5(alternateTree.properties.label ?? alternateTree.id, t),
|
|
847
|
-
"data-testid": "treeView.alternateTreeButton",
|
|
848
|
-
onClick: handleOpen
|
|
849
|
-
}), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
|
|
850
|
-
path,
|
|
851
|
-
item,
|
|
852
|
-
open: true,
|
|
853
|
-
density: "coarse"
|
|
854
|
-
})), /* @__PURE__ */ React7.createElement("div", {
|
|
855
|
-
role: "none",
|
|
856
|
-
className: "overflow-y-auto"
|
|
857
|
-
}, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
|
|
858
|
-
...navTreeContext,
|
|
859
|
-
useItems: useAlternateItems,
|
|
860
|
-
id: alternateTree.id,
|
|
861
|
-
root: alternateTree,
|
|
862
|
-
path: alternatePath,
|
|
863
|
-
levelOffset: 5,
|
|
864
|
-
gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
|
|
865
|
-
renderColumns: NavTreeItemColumns
|
|
866
|
-
}) : /* @__PURE__ */ React7.createElement(Tree, {
|
|
867
|
-
...navTreeContext,
|
|
868
|
-
id: item.id,
|
|
869
|
-
root: item,
|
|
870
|
-
path,
|
|
871
|
-
levelOffset: 5,
|
|
872
|
-
draggable: true,
|
|
873
|
-
gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
|
|
874
|
-
renderColumns: NavTreeItemColumns
|
|
875
|
-
}))));
|
|
876
|
-
};
|
|
877
|
-
var L1PanelCollection = ({ item, path, ...props }) => {
|
|
878
|
-
const { useItems: useItems2 } = useNavTreeContext();
|
|
879
|
-
useLoadDescendents(item);
|
|
880
|
-
const collectionItems = useItems2(item);
|
|
881
|
-
const groupPath = useMemo3(() => [
|
|
882
|
-
...path,
|
|
883
|
-
item.id
|
|
884
|
-
], [
|
|
885
|
-
item.id,
|
|
886
|
-
path
|
|
887
|
-
]);
|
|
888
|
-
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React7.createElement(L1Panel, {
|
|
889
|
-
key: item2.id,
|
|
890
|
-
item: item2,
|
|
891
|
-
path: groupPath,
|
|
892
|
-
...props
|
|
893
|
-
})));
|
|
894
|
-
};
|
|
895
|
-
var L1Panels = ({ topLevelItems, onBack, ...props }) => {
|
|
896
|
-
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
|
|
897
|
-
const type = l0ItemType(item);
|
|
898
|
-
switch (type) {
|
|
899
|
-
case "collection":
|
|
900
|
-
return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
|
|
901
|
-
key: item.id,
|
|
902
|
-
item,
|
|
903
|
-
...props
|
|
904
|
-
});
|
|
905
|
-
case "tab":
|
|
906
|
-
return /* @__PURE__ */ React7.createElement(L1Panel, {
|
|
907
|
-
key: item.id,
|
|
908
|
-
item,
|
|
909
|
-
...props,
|
|
910
|
-
onBack
|
|
911
|
-
});
|
|
912
|
-
default:
|
|
913
|
-
return null;
|
|
914
|
-
}
|
|
915
|
-
}));
|
|
916
|
-
};
|
|
917
|
-
|
|
918
|
-
// packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
|
|
919
|
-
var NAV_TREE_ITEM = "NavTreeItem";
|
|
920
|
-
var NavTree = ({ id, root, ...props }) => {
|
|
921
|
-
const { tab, useItems: useItems2, onBack } = useNavTreeContext();
|
|
922
|
-
const topLevelActions = useItems2(root, {
|
|
923
|
-
disposition: "menu",
|
|
924
|
-
sort: true
|
|
925
|
-
});
|
|
926
|
-
const topLevelCollections = useItems2(root, {
|
|
927
|
-
disposition: "collection"
|
|
928
|
-
});
|
|
929
|
-
const topLevelWorkspaces = useItems2(root, {
|
|
930
|
-
disposition: "workspace"
|
|
931
|
-
});
|
|
932
|
-
const topLevelNavigation = useItems2(root, {
|
|
933
|
-
disposition: "navigation"
|
|
934
|
-
});
|
|
935
|
-
const l0Items = useMemo4(() => [
|
|
936
|
-
// prettier-ignore
|
|
937
|
-
...topLevelCollections,
|
|
938
|
-
...topLevelWorkspaces,
|
|
939
|
-
...topLevelNavigation
|
|
940
|
-
], [
|
|
941
|
-
topLevelCollections,
|
|
942
|
-
topLevelWorkspaces,
|
|
943
|
-
topLevelNavigation
|
|
944
|
-
]);
|
|
945
|
-
const pinnedItems = useItems2(root, {
|
|
946
|
-
disposition: "pin-end",
|
|
947
|
-
sort: true
|
|
948
|
-
});
|
|
949
|
-
const userAccountItem = useItems2(root, {
|
|
950
|
-
disposition: "user-account"
|
|
951
|
-
})[0];
|
|
952
|
-
const topLevelItems = useMemo4(() => [
|
|
953
|
-
// prettier-ignore
|
|
954
|
-
...l0Items,
|
|
955
|
-
...pinnedItems,
|
|
956
|
-
...userAccountItem ? [
|
|
957
|
-
userAccountItem
|
|
958
|
-
] : []
|
|
959
|
-
], [
|
|
960
|
-
l0Items,
|
|
961
|
-
pinnedItems,
|
|
962
|
-
userAccountItem
|
|
963
|
-
]);
|
|
964
|
-
useLoadDescendents(root);
|
|
965
|
-
const path = useMemo4(() => [
|
|
966
|
-
id
|
|
967
|
-
], [
|
|
968
|
-
id
|
|
969
|
-
]);
|
|
970
|
-
return /* @__PURE__ */ React8.createElement(Tabs3.Root, {
|
|
971
|
-
value: tab,
|
|
972
|
-
orientation: "vertical",
|
|
973
|
-
verticalVariant: "stateless",
|
|
974
|
-
classNames: "relative"
|
|
975
|
-
}, /* @__PURE__ */ React8.createElement(L0Menu, {
|
|
976
|
-
menuActions: topLevelActions,
|
|
977
|
-
topLevelItems: l0Items,
|
|
978
|
-
pinnedItems,
|
|
979
|
-
userAccountItem,
|
|
980
|
-
path,
|
|
981
|
-
parent: root
|
|
982
|
-
}), /* @__PURE__ */ React8.createElement(L1Panels, {
|
|
983
|
-
topLevelItems,
|
|
984
|
-
path,
|
|
985
|
-
currentItemId: tab,
|
|
986
|
-
onBack,
|
|
987
|
-
...props
|
|
988
|
-
}));
|
|
989
|
-
};
|
|
990
|
-
|
|
991
|
-
// packages/plugins/plugin-navtree/src/capabilities/index.ts
|
|
992
|
-
import { lazy } from "@dxos/app-framework";
|
|
993
|
-
var AppGraphBuilder = lazy(() => import("./app-graph-builder-P7AY3K72.mjs"));
|
|
994
|
-
var IntentResolver = lazy(() => import("./intent-resolver-PW7B76HO.mjs"));
|
|
995
|
-
var Keyboard2 = lazy(() => import("./keyboard-DDFATRUG.mjs"));
|
|
996
|
-
var ReactSurface = lazy(() => import("./react-surface-M3CAS7ZP.mjs"));
|
|
997
|
-
var State = lazy(() => import("./state-3UBYOTQT.mjs"));
|
|
998
|
-
|
|
999
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
|
|
1000
|
-
var NODE_TYPE = "dxos/app-graph/node";
|
|
1001
|
-
var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Surface, {
|
|
1002
|
-
role: "navtree-item-end",
|
|
1003
|
-
data: {
|
|
1004
|
-
id: node.id,
|
|
1005
|
-
subject: node.data,
|
|
1006
|
-
open
|
|
1007
|
-
},
|
|
1008
|
-
limit: 1
|
|
1009
|
-
});
|
|
1010
|
-
var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
|
|
1011
|
-
var filterItems = (node, disposition) => {
|
|
1012
|
-
if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
|
|
1013
|
-
return false;
|
|
1014
|
-
} else if (!disposition) {
|
|
1015
|
-
const action = isAction4(node);
|
|
1016
|
-
return !action || node.properties.disposition === "item";
|
|
1017
|
-
} else {
|
|
1018
|
-
return node.properties.disposition === disposition;
|
|
1019
|
-
}
|
|
1020
|
-
};
|
|
1021
|
-
var getItems = (graph, node, disposition) => {
|
|
1022
|
-
return graph.getConnections(node?.id ?? ROOT_ID, "outbound").filter((node2) => filterItems(node2, disposition));
|
|
1023
|
-
};
|
|
1024
|
-
var useItems = (node, options) => {
|
|
1025
|
-
const { graph } = useAppGraph2();
|
|
1026
|
-
const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node2) => filterItems(node2, options?.disposition));
|
|
1027
|
-
return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
|
|
1028
|
-
};
|
|
1029
|
-
var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
|
|
1030
|
-
const [isLg] = useMediaQuery2("lg", {
|
|
1031
|
-
ssr: false
|
|
1032
|
-
});
|
|
1033
|
-
const { dispatchPromise: dispatch } = useIntentDispatcher3();
|
|
1034
|
-
const { graph } = useAppGraph2();
|
|
1035
|
-
const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
|
|
1036
|
-
const layout = useLayout();
|
|
1037
|
-
const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
|
|
1038
|
-
const getActions2 = useCallback3((node) => getActions(graph, node), [
|
|
1039
|
-
graph
|
|
1040
|
-
]);
|
|
1041
|
-
const getProps = useCallback3((node, path) => {
|
|
1042
|
-
const children = getChildren(graph, node, path).filter(getChildrenFilter);
|
|
1043
|
-
const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
|
|
1044
|
-
return {
|
|
1045
|
-
id: node.id,
|
|
1046
|
-
label: node.properties.label ?? node.id,
|
|
1047
|
-
parentOf,
|
|
1048
|
-
icon: node.properties.icon,
|
|
1049
|
-
disabled: node.properties.disabled,
|
|
1050
|
-
className: mx5(node.properties.modified && "italic", node.properties.className),
|
|
1051
|
-
headingClassName: node.properties.headingClassName,
|
|
1052
|
-
testId: node.properties.testId
|
|
1053
|
-
};
|
|
1054
|
-
}, [
|
|
1055
|
-
graph
|
|
1056
|
-
]);
|
|
1057
|
-
const handleOpenChange = useCallback3(({ item: { id }, path, open }) => {
|
|
1058
|
-
setItem(path, "open", open);
|
|
1059
|
-
}, [
|
|
1060
|
-
graph
|
|
1061
|
-
]);
|
|
1062
|
-
const handleTabChange = useCallback3(async (node) => {
|
|
1063
|
-
await dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
|
|
1064
|
-
part: "sidebar",
|
|
1065
|
-
options: {
|
|
1066
|
-
state: node.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
|
|
1067
|
-
}
|
|
1068
|
-
}));
|
|
1069
|
-
await dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
|
|
1070
|
-
part: "workspace",
|
|
1071
|
-
subject: node.id
|
|
1072
|
-
}));
|
|
1073
|
-
if (layout.active.length === 0) {
|
|
1074
|
-
const [item] = getItems(graph, node).filter((node2) => !isActionLike2(node2));
|
|
1075
|
-
if (item && item.data) {
|
|
1076
|
-
await dispatch(createIntent3(LayoutAction3.Open, {
|
|
1077
|
-
part: "main",
|
|
1078
|
-
subject: [
|
|
1079
|
-
item.id
|
|
1080
|
-
]
|
|
1081
|
-
}));
|
|
1082
|
-
}
|
|
1083
|
-
}
|
|
1084
|
-
}, [
|
|
1085
|
-
dispatch,
|
|
1086
|
-
layout.active,
|
|
1087
|
-
tab,
|
|
1088
|
-
navigationSidebarState,
|
|
1089
|
-
isLg
|
|
1090
|
-
]);
|
|
1091
|
-
const canDrop = useCallback3((source, target) => {
|
|
1092
|
-
const sourceNode = source.item;
|
|
1093
|
-
const targetNode = target.item;
|
|
1094
|
-
if (isSpace(targetNode.data)) {
|
|
1095
|
-
return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
|
|
1096
|
-
} else if (isEchoObject(targetNode.data)) {
|
|
1097
|
-
return isEchoObject(sourceNode.data);
|
|
1098
|
-
} else {
|
|
1099
|
-
return false;
|
|
1100
|
-
}
|
|
1101
|
-
}, []);
|
|
1102
|
-
const handleSelect = useCallback3(({ item: node, path, option }) => {
|
|
1103
|
-
if (!node.data) {
|
|
1104
|
-
return;
|
|
1105
|
-
}
|
|
1106
|
-
if (isAction4(node)) {
|
|
1107
|
-
const [parent] = graph.getConnections(node.id, "inbound");
|
|
1108
|
-
void (parent && node.data({
|
|
1109
|
-
parent,
|
|
1110
|
-
caller: NAV_TREE_ITEM
|
|
1111
|
-
}));
|
|
1112
|
-
return;
|
|
1113
|
-
}
|
|
1114
|
-
const current = isCurrent(path, node);
|
|
1115
|
-
if (!current) {
|
|
1116
|
-
void dispatch(createIntent3(LayoutAction3.Open, {
|
|
1117
|
-
part: "main",
|
|
1118
|
-
subject: [
|
|
1119
|
-
node.id
|
|
1120
|
-
],
|
|
1121
|
-
options: {
|
|
1122
|
-
key: node.properties.key
|
|
1123
|
-
}
|
|
1124
|
-
}));
|
|
1125
|
-
} else if (option) {
|
|
1126
|
-
void dispatch(createIntent3(LayoutAction3.Close, {
|
|
1127
|
-
part: "main",
|
|
1128
|
-
subject: [
|
|
1129
|
-
node.id
|
|
1130
|
-
],
|
|
1131
|
-
options: {
|
|
1132
|
-
state: false
|
|
1133
|
-
}
|
|
1134
|
-
}));
|
|
1135
|
-
} else {
|
|
1136
|
-
void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
|
|
1137
|
-
part: "current",
|
|
1138
|
-
subject: node.id
|
|
1139
|
-
}));
|
|
1140
|
-
}
|
|
1141
|
-
const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
|
|
1142
|
-
if (isAction4(defaultAction)) {
|
|
1143
|
-
void defaultAction.data();
|
|
1144
|
-
}
|
|
1145
|
-
if (!isLg) {
|
|
1146
|
-
void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
|
|
1147
|
-
part: "sidebar",
|
|
1148
|
-
options: {
|
|
1149
|
-
state: "closed"
|
|
1150
|
-
}
|
|
1151
|
-
}));
|
|
1152
|
-
}
|
|
1153
|
-
}, [
|
|
1154
|
-
graph,
|
|
1155
|
-
dispatch,
|
|
1156
|
-
isCurrent,
|
|
1157
|
-
isLg
|
|
1158
|
-
]);
|
|
1159
|
-
const handleBack = useCallback3(() => dispatch(createIntent3(LayoutAction3.RevertWorkspace, {
|
|
1160
|
-
part: "workspace",
|
|
1161
|
-
options: {
|
|
1162
|
-
revert: true
|
|
1163
|
-
}
|
|
1164
|
-
})), [
|
|
1165
|
-
dispatch
|
|
1166
|
-
]);
|
|
1167
|
-
useEffect(() => {
|
|
1168
|
-
return monitorForElements({
|
|
1169
|
-
canMonitor: ({ source }) => isTreeData(source.data),
|
|
1170
|
-
onDrop: ({ location, source }) => {
|
|
1171
|
-
if (!location.current.dropTargets.length) {
|
|
1172
|
-
return;
|
|
1173
|
-
}
|
|
1174
|
-
const target = location.current.dropTargets[0];
|
|
1175
|
-
const instruction = extractInstruction(target.data);
|
|
1176
|
-
if (instruction !== null && instruction.type !== "instruction-blocked") {
|
|
1177
|
-
const sourceNode = source.data.item;
|
|
1178
|
-
const targetNode = target.data.item;
|
|
1179
|
-
const sourcePath = source.data.path;
|
|
1180
|
-
const targetPath = target.data.path;
|
|
1181
|
-
const operation = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== "make-child" ? "rearrange" : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
|
|
1182
|
-
const sourceParent = getParent(graph, sourceNode, sourcePath);
|
|
1183
|
-
const targetParent = getParent(graph, targetNode, targetPath);
|
|
1184
|
-
const sourceItems = getItems(graph, sourceParent);
|
|
1185
|
-
const targetItems = getItems(graph, targetParent);
|
|
1186
|
-
const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
|
|
1187
|
-
const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
|
|
1188
|
-
const migrationIndex = instruction.type === "make-child" ? void 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
|
|
1189
|
-
switch (operation) {
|
|
1190
|
-
case "rearrange": {
|
|
1191
|
-
const nextItems = sourceItems.map(({ data }) => data);
|
|
1192
|
-
arrayMove2(nextItems, sourceIndex, targetIndex);
|
|
1193
|
-
void sourceParent?.properties.onRearrangeChildren?.(nextItems);
|
|
1194
|
-
break;
|
|
1195
|
-
}
|
|
1196
|
-
case "copy": {
|
|
1197
|
-
const target2 = instruction.type === "make-child" ? targetNode : targetParent;
|
|
1198
|
-
void target2?.properties.onCopy?.(sourceNode, migrationIndex);
|
|
1199
|
-
break;
|
|
1200
|
-
}
|
|
1201
|
-
case "transfer": {
|
|
1202
|
-
const target2 = instruction.type === "make-child" ? targetNode : targetParent;
|
|
1203
|
-
if (!target2?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
|
|
1204
|
-
break;
|
|
1205
|
-
}
|
|
1206
|
-
void target2?.properties.onTransferStart(sourceNode, migrationIndex);
|
|
1207
|
-
void sourceParent?.properties.onTransferEnd?.(sourceNode, target2);
|
|
1208
|
-
break;
|
|
1209
|
-
}
|
|
1210
|
-
}
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
});
|
|
1214
|
-
}, [
|
|
1215
|
-
graph
|
|
1216
|
-
]);
|
|
1217
|
-
const setAlternateTree = useCallback3((path, open) => {
|
|
1218
|
-
setItem(path, "alternateTree", open);
|
|
1219
|
-
}, [
|
|
1220
|
-
setItem
|
|
1221
|
-
]);
|
|
1222
|
-
const navTreeContextValue = useMemo5(() => ({
|
|
1223
|
-
useItems,
|
|
1224
|
-
tab,
|
|
1225
|
-
getActions: getActions2,
|
|
1226
|
-
// loadDescendents,
|
|
1227
|
-
renderItemEnd,
|
|
1228
|
-
popoverAnchorId,
|
|
1229
|
-
topbar,
|
|
1230
|
-
getProps,
|
|
1231
|
-
isCurrent,
|
|
1232
|
-
isOpen,
|
|
1233
|
-
canDrop,
|
|
1234
|
-
isAlternateTree,
|
|
1235
|
-
setAlternateTree,
|
|
1236
|
-
onTabChange: handleTabChange,
|
|
1237
|
-
onOpenChange: handleOpenChange,
|
|
1238
|
-
onSelect: handleSelect,
|
|
1239
|
-
onBack: handleBack
|
|
1240
|
-
}), [
|
|
1241
|
-
tab,
|
|
1242
|
-
getActions2,
|
|
1243
|
-
// loadDescendents,
|
|
1244
|
-
renderItemEnd,
|
|
1245
|
-
popoverAnchorId,
|
|
1246
|
-
topbar,
|
|
1247
|
-
getProps,
|
|
1248
|
-
isCurrent,
|
|
1249
|
-
isOpen,
|
|
1250
|
-
canDrop,
|
|
1251
|
-
isAlternateTree,
|
|
1252
|
-
setAlternateTree,
|
|
1253
|
-
handleTabChange,
|
|
1254
|
-
handleOpenChange,
|
|
1255
|
-
handleSelect,
|
|
1256
|
-
handleBack
|
|
1257
|
-
]);
|
|
1258
|
-
return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
|
|
1259
|
-
value: navTreeContextValue
|
|
1260
|
-
}, /* @__PURE__ */ React9.createElement(NavTree, {
|
|
1261
|
-
id: ROOT_ID,
|
|
1262
|
-
root: graph.root,
|
|
1263
|
-
open: layout.sidebarOpen
|
|
1264
|
-
}));
|
|
1265
|
-
});
|
|
1266
|
-
|
|
1267
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
|
|
1268
|
-
import { useEffect as useEffect2 } from "react";
|
|
1269
|
-
import { toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
|
|
1270
|
-
var NavTreeDocumentTitle = ({ node }) => {
|
|
1271
|
-
const { t } = useTranslation7(NAVTREE_PLUGIN);
|
|
1272
|
-
useEffect2(() => {
|
|
1273
|
-
document.title = node ? toLocalizedString6(node.properties.label, t) : t("current app name", {
|
|
1274
|
-
ns: "appkit"
|
|
1275
|
-
});
|
|
1276
|
-
}, [
|
|
1277
|
-
node?.properties?.label
|
|
1278
|
-
]);
|
|
1279
|
-
return null;
|
|
1280
|
-
};
|
|
1281
|
-
|
|
1282
|
-
export {
|
|
1283
|
-
CommandsDialogContent,
|
|
1284
|
-
CommandsTrigger,
|
|
1285
|
-
getParent,
|
|
1286
|
-
getPersistenceParent,
|
|
1287
|
-
resolveMigrationOperation,
|
|
1288
|
-
sortActions,
|
|
1289
|
-
getChildren,
|
|
1290
|
-
getActions,
|
|
1291
|
-
l0ItemType,
|
|
1292
|
-
NODE_TYPE,
|
|
1293
|
-
NavTreeContainer,
|
|
1294
|
-
NavTreeDocumentTitle,
|
|
1295
|
-
AppGraphBuilder,
|
|
1296
|
-
IntentResolver,
|
|
1297
|
-
Keyboard2 as Keyboard,
|
|
1298
|
-
ReactSurface,
|
|
1299
|
-
State
|
|
1300
|
-
};
|
|
1301
|
-
//# sourceMappingURL=chunk-UM2C5XK3.mjs.map
|