@dxos/plugin-navtree 0.8.4-main.b97322e → 0.8.4-main.f5c0578
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/{app-graph-builder-5J4LRWDX.mjs → app-graph-builder-6JDBQ25U.mjs} +3 -3
- package/dist/lib/browser/{app-graph-builder-5J4LRWDX.mjs.map → app-graph-builder-6JDBQ25U.mjs.map} +3 -3
- package/dist/lib/browser/{chunk-SICQTLXC.mjs → chunk-SNGLGBFJ.mjs} +189 -162
- package/dist/lib/browser/chunk-SNGLGBFJ.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +4 -5
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/{intent-resolver-3XYN2CBU.mjs → intent-resolver-N35ZIHFD.mjs} +2 -2
- package/dist/lib/browser/{intent-resolver-3XYN2CBU.mjs.map → intent-resolver-N35ZIHFD.mjs.map} +3 -3
- package/dist/lib/browser/{keyboard-QRS6WOQH.mjs → keyboard-HMTMA33N.mjs} +1 -1
- package/dist/lib/browser/{keyboard-QRS6WOQH.mjs.map → keyboard-HMTMA33N.mjs.map} +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-surface-WURHCBQQ.mjs → react-surface-WKWXMM2N.mjs} +2 -2
- package/dist/lib/browser/{react-surface-WURHCBQQ.mjs.map → react-surface-WKWXMM2N.mjs.map} +1 -1
- package/dist/lib/browser/{state-54DY3DOY.mjs → state-P5DGL7KS.mjs} +1 -1
- package/dist/lib/browser/state-P5DGL7KS.mjs.map +7 -0
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
- package/dist/types/src/capabilities/keyboard.d.ts.map +1 -1
- package/dist/types/src/capabilities/state.d.ts.map +1 -1
- package/dist/types/src/components/NavTree/NavTree.d.ts +2 -2
- package/dist/types/src/components/NavTree/NavTree.d.ts.map +1 -1
- package/dist/types/src/components/NavTree/NavTree.stories.d.ts +1 -1
- package/dist/types/src/components/NavTree/NavTree.stories.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeItem/NavTreeItemColumns.d.ts +1 -1
- package/dist/types/src/components/NavTreeItem/NavTreeItemColumns.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/L0Menu.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/L1Panel.d.ts +5 -6
- package/dist/types/src/components/Sidebar/L1Panel.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/L1Tabs.d.ts +12 -0
- package/dist/types/src/components/Sidebar/L1Tabs.d.ts.map +1 -0
- package/dist/types/src/components/Sidebar/index.d.ts +1 -0
- package/dist/types/src/components/Sidebar/index.d.ts.map +1 -1
- package/dist/types/src/components/types.d.ts +2 -2
- package/dist/types/src/components/types.d.ts.map +1 -1
- package/dist/types/src/testing/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +1 -0
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/util.d.ts +1 -2
- package/dist/types/src/util.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +39 -38
- package/src/NavTreePlugin.tsx +5 -5
- package/src/capabilities/app-graph-builder.ts +2 -2
- package/src/capabilities/intent-resolver.ts +1 -1
- package/src/capabilities/keyboard.ts +2 -2
- package/src/capabilities/react-surface.tsx +1 -1
- package/src/capabilities/state.ts +3 -2
- package/src/components/CommandsDialog/CommandsDialog.tsx +2 -2
- package/src/components/CommandsDialog/CommandsTrigger.tsx +1 -1
- package/src/components/NavTree/NavTree.stories.tsx +3 -3
- package/src/components/NavTree/NavTree.tsx +3 -3
- package/src/components/NavTreeContainer.tsx +37 -13
- package/src/components/NavTreeItem/NavTreeItemAction.tsx +2 -2
- package/src/components/NavTreeItem/NavTreeItemColumns.tsx +7 -7
- package/src/components/Sidebar/L0Menu.tsx +2 -2
- package/src/components/Sidebar/L1Panel.tsx +72 -92
- package/src/components/Sidebar/L1Tabs.tsx +58 -0
- package/src/components/Sidebar/index.ts +1 -0
- package/src/components/types.ts +3 -2
- package/src/testing/app-graph-builder.ts +1 -1
- package/src/translations.ts +1 -0
- package/src/util.ts +2 -20
- package/dist/lib/browser/chunk-SICQTLXC.mjs.map +0 -7
- package/dist/lib/browser/state-54DY3DOY.mjs.map +0 -7
|
@@ -4,17 +4,18 @@ import {
|
|
|
4
4
|
import {
|
|
5
5
|
COMMANDS_DIALOG,
|
|
6
6
|
KEY_BINDING,
|
|
7
|
-
NAVTREE_PLUGIN
|
|
7
|
+
NAVTREE_PLUGIN,
|
|
8
|
+
meta
|
|
8
9
|
} from "./chunk-ERDGQTH5.mjs";
|
|
9
10
|
|
|
10
11
|
// src/components/CommandsDialog/CommandsDialog.tsx
|
|
11
12
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
12
13
|
import React, { useMemo, useState } from "react";
|
|
13
|
-
import {
|
|
14
|
+
import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
|
|
14
15
|
import { isAction, isActionGroup } from "@dxos/app-graph";
|
|
15
16
|
import { Keyboard, keySymbols } from "@dxos/keyboard";
|
|
16
17
|
import { useActions } from "@dxos/plugin-graph";
|
|
17
|
-
import { Button, Dialog, Icon,
|
|
18
|
+
import { Button, Dialog, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
|
|
18
19
|
import { SearchList } from "@dxos/react-ui-searchlist";
|
|
19
20
|
import { cardDialogContent, cardDialogHeader, cardDialogPaddedOverflow, cardDialogSearchListRoot } from "@dxos/react-ui-stack";
|
|
20
21
|
import { descriptionText, mx } from "@dxos/react-ui-theme";
|
|
@@ -120,7 +121,7 @@ var CommandsDialogContent = ({ selected: initial }) => {
|
|
|
120
121
|
// src/components/CommandsDialog/CommandsTrigger.tsx
|
|
121
122
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
122
123
|
import React2 from "react";
|
|
123
|
-
import {
|
|
124
|
+
import { LayoutAction as LayoutAction2, createIntent as createIntent2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
|
|
124
125
|
import { Button as Button2, Icon as Icon2, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
125
126
|
var CommandsTrigger = () => {
|
|
126
127
|
var _effect = _useSignals2();
|
|
@@ -148,7 +149,7 @@ var CommandsTrigger = () => {
|
|
|
148
149
|
};
|
|
149
150
|
|
|
150
151
|
// src/util.ts
|
|
151
|
-
import {
|
|
152
|
+
import { isActionLike } from "@dxos/app-graph";
|
|
152
153
|
import { isNonNullable } from "@dxos/util";
|
|
153
154
|
var getParent = (graph, node, path) => {
|
|
154
155
|
const parentId = path[path.length - 2];
|
|
@@ -198,22 +199,6 @@ var getChildren = (graph, node, path = []) => {
|
|
|
198
199
|
return nextPath.includes(n.id) ? void 0 : n;
|
|
199
200
|
}).filter(isNonNullable);
|
|
200
201
|
};
|
|
201
|
-
var getActions = (graph, node) => {
|
|
202
|
-
return graph.getActions(node.id).reduce((acc, arg) => {
|
|
203
|
-
if (arg.properties.disposition === "item") {
|
|
204
|
-
return acc;
|
|
205
|
-
}
|
|
206
|
-
acc.actions.push(arg);
|
|
207
|
-
if (!isAction2(arg)) {
|
|
208
|
-
const actionGroup = graph.getActions(arg.id);
|
|
209
|
-
acc.groupedActions[arg.id] = actionGroup;
|
|
210
|
-
}
|
|
211
|
-
return acc;
|
|
212
|
-
}, {
|
|
213
|
-
actions: [],
|
|
214
|
-
groupedActions: {}
|
|
215
|
-
});
|
|
216
|
-
};
|
|
217
202
|
var l0ItemType = (item) => {
|
|
218
203
|
if (item.properties.disposition === "collection") {
|
|
219
204
|
return "collection";
|
|
@@ -227,23 +212,31 @@ var l0ItemType = (item) => {
|
|
|
227
212
|
};
|
|
228
213
|
|
|
229
214
|
// src/components/NavTreeContainer.tsx
|
|
230
|
-
import { useSignals as
|
|
215
|
+
import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
|
|
231
216
|
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
232
217
|
import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
|
|
233
218
|
import { untracked } from "@preact/signals-core";
|
|
234
|
-
import
|
|
235
|
-
import {
|
|
236
|
-
import { isAction as
|
|
219
|
+
import React10, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo6 } from "react";
|
|
220
|
+
import { LayoutAction as LayoutAction3, Surface, createIntent as createIntent3, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
|
|
221
|
+
import { ROOT_ID, isAction as isAction3, isActionLike as isActionLike2 } from "@dxos/app-graph";
|
|
237
222
|
import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
|
|
238
|
-
import { useConnections } from "@dxos/plugin-graph";
|
|
223
|
+
import { useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
|
|
239
224
|
import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
|
|
240
225
|
import { isTreeData } from "@dxos/react-ui-list";
|
|
241
|
-
import { mx as
|
|
226
|
+
import { mx as mx3 } from "@dxos/react-ui-theme";
|
|
242
227
|
import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
|
|
243
228
|
|
|
229
|
+
// src/capabilities/index.ts
|
|
230
|
+
import { lazy } from "@dxos/app-framework";
|
|
231
|
+
var AppGraphBuilder = lazy(() => import("./app-graph-builder-6JDBQ25U.mjs"));
|
|
232
|
+
var IntentResolver = lazy(() => import("./intent-resolver-N35ZIHFD.mjs"));
|
|
233
|
+
var Keyboard2 = lazy(() => import("./keyboard-HMTMA33N.mjs"));
|
|
234
|
+
var ReactSurface = lazy(() => import("./react-surface-WKWXMM2N.mjs"));
|
|
235
|
+
var State = lazy(() => import("./state-P5DGL7KS.mjs"));
|
|
236
|
+
|
|
244
237
|
// src/components/NavTree/NavTree.tsx
|
|
245
|
-
import { useSignals as
|
|
246
|
-
import
|
|
238
|
+
import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
|
|
239
|
+
import React9, { useMemo as useMemo5 } from "react";
|
|
247
240
|
import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
|
|
248
241
|
|
|
249
242
|
// src/hooks.ts
|
|
@@ -295,7 +288,7 @@ import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-
|
|
|
295
288
|
import React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
|
|
296
289
|
import { invariant } from "@dxos/invariant";
|
|
297
290
|
import { Icon as Icon3, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
298
|
-
import {
|
|
291
|
+
import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
|
|
299
292
|
import { Tabs } from "@dxos/react-ui-tabs";
|
|
300
293
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
301
294
|
import { arrayMove, getFirstTwoRenderableChars } from "@dxos/util";
|
|
@@ -719,15 +712,15 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
|
|
|
719
712
|
// src/components/Sidebar/L1Panel.tsx
|
|
720
713
|
import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
|
|
721
714
|
import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
|
|
722
|
-
import {
|
|
715
|
+
import { IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
|
|
723
716
|
import { Tree } from "@dxos/react-ui-list";
|
|
724
717
|
import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
|
|
725
|
-
import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2
|
|
718
|
+
import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2 } from "@dxos/react-ui-theme";
|
|
726
719
|
|
|
727
720
|
// src/components/NavTreeItem/NavTreeItemAction.tsx
|
|
728
721
|
import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
|
|
729
722
|
import React5 from "react";
|
|
730
|
-
import {
|
|
723
|
+
import { IconButton, toLocalizedString as toLocalizedString4, useDensityContext, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
731
724
|
import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
|
|
732
725
|
import { hoverableControlItem, hoverableOpenControlItem } from "@dxos/react-ui-theme";
|
|
733
726
|
var fallbackIcon = "ph--placeholder--regular";
|
|
@@ -828,17 +821,17 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
|
|
|
828
821
|
// src/components/NavTreeItem/NavTreeItemColumns.tsx
|
|
829
822
|
import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
|
|
830
823
|
import React6, { Fragment, memo } from "react";
|
|
831
|
-
import { isAction as
|
|
832
|
-
import { DensityProvider, Popover, toLocalizedString as toLocalizedString5,
|
|
824
|
+
import { isAction as isAction2 } from "@dxos/app-graph";
|
|
825
|
+
import { DensityProvider, Popover, Treegrid, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
833
826
|
var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
|
|
834
827
|
var _effect = _useSignals6();
|
|
835
828
|
try {
|
|
836
829
|
const { t } = useTranslation6(NAVTREE_PLUGIN);
|
|
837
|
-
const {
|
|
830
|
+
const { useActions: useActions3, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
|
|
838
831
|
const level = path.length - 2;
|
|
839
|
-
const { actions: _actions, groupedActions } =
|
|
840
|
-
const [primaryAction, ...secondaryActions] = _actions.toSorted((a,
|
|
841
|
-
const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) =>
|
|
832
|
+
const { actions: _actions, groupedActions } = useActions3(item);
|
|
833
|
+
const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
|
|
834
|
+
const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction2(action) ? [
|
|
842
835
|
action
|
|
843
836
|
] : []).filter((a) => [
|
|
844
837
|
"list-item",
|
|
@@ -846,7 +839,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
|
|
|
846
839
|
].includes(a.properties?.disposition));
|
|
847
840
|
const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
|
|
848
841
|
useLoadDescendents(item);
|
|
849
|
-
useLoadDescendents(primaryAction && !
|
|
842
|
+
useLoadDescendents(primaryAction && !isAction2(primaryAction) ? primaryAction : void 0);
|
|
850
843
|
return /* @__PURE__ */ React6.createElement(DensityProvider, {
|
|
851
844
|
density
|
|
852
845
|
}, /* @__PURE__ */ React6.createElement("div", {
|
|
@@ -857,8 +850,8 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
|
|
|
857
850
|
label: toLocalizedString5(primaryAction.properties?.label, t),
|
|
858
851
|
icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
|
|
859
852
|
parent: item,
|
|
860
|
-
monolithic:
|
|
861
|
-
menuActions:
|
|
853
|
+
monolithic: isAction2(primaryAction),
|
|
854
|
+
menuActions: isAction2(primaryAction) ? [
|
|
862
855
|
primaryAction
|
|
863
856
|
] : groupedActions[primaryAction.id],
|
|
864
857
|
menuType: primaryAction.properties?.menuType,
|
|
@@ -881,30 +874,14 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
|
|
|
881
874
|
});
|
|
882
875
|
|
|
883
876
|
// src/components/Sidebar/L1Panel.tsx
|
|
884
|
-
var
|
|
885
|
-
var TitleButton = ({ title, onClick }) => {
|
|
886
|
-
var _effect = _useSignals7();
|
|
887
|
-
try {
|
|
888
|
-
return /* @__PURE__ */ React7.createElement(Button3, {
|
|
889
|
-
variant: "ghost",
|
|
890
|
-
classNames: "pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal",
|
|
891
|
-
onClick
|
|
892
|
-
}, /* @__PURE__ */ React7.createElement(Icon4, {
|
|
893
|
-
icon: "ph--caret-left--bold",
|
|
894
|
-
size: 3
|
|
895
|
-
}), /* @__PURE__ */ React7.createElement("span", {
|
|
896
|
-
className: mx3(headingBackButtonLabel)
|
|
897
|
-
}, title));
|
|
898
|
-
} finally {
|
|
899
|
-
_effect.f();
|
|
900
|
-
}
|
|
901
|
-
};
|
|
902
|
-
var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
|
|
877
|
+
var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
|
|
903
878
|
var _effect = _useSignals7();
|
|
904
879
|
try {
|
|
905
|
-
const {
|
|
906
|
-
const {
|
|
907
|
-
const
|
|
880
|
+
const { t } = useTranslation7(meta.id);
|
|
881
|
+
const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
|
|
882
|
+
const { useItems: useItems2 } = navTreeContext;
|
|
883
|
+
const title = toLocalizedString6(item.properties.label, t);
|
|
884
|
+
const alternateTree = useItems2(item, {
|
|
908
885
|
disposition: "alternate-tree"
|
|
909
886
|
})[0];
|
|
910
887
|
const alternatePath = useMemo3(() => [
|
|
@@ -914,34 +891,16 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
|
|
|
914
891
|
item.id,
|
|
915
892
|
path
|
|
916
893
|
]);
|
|
917
|
-
const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
|
|
918
|
-
alternatePath,
|
|
919
|
-
setAlternateTree
|
|
920
|
-
]);
|
|
921
894
|
const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
|
|
922
895
|
const useAlternateItems = useCallback2((node, { disposition } = {}) => {
|
|
923
|
-
return
|
|
896
|
+
return useItems2(node, {
|
|
924
897
|
disposition,
|
|
925
898
|
sort: node?.id === alternateTree.id
|
|
926
899
|
});
|
|
927
900
|
}, [
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
]);
|
|
931
|
-
const handleBack = useCallback2(() => {
|
|
932
|
-
if (isAlternate) {
|
|
933
|
-
setAlternateTree?.(alternatePath, false);
|
|
934
|
-
} else {
|
|
935
|
-
onBack?.();
|
|
936
|
-
}
|
|
937
|
-
}, [
|
|
938
|
-
isAlternate,
|
|
939
|
-
onBack,
|
|
940
|
-
alternatePath,
|
|
941
|
-
setAlternateTree
|
|
901
|
+
alternateTree,
|
|
902
|
+
useItems2
|
|
942
903
|
]);
|
|
943
|
-
const title = toLocalizedString6(item.properties.label, t);
|
|
944
|
-
const backCapable = item.id.startsWith("!") || isAlternate;
|
|
945
904
|
return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
|
|
946
905
|
key: item.id,
|
|
947
906
|
value: item.id,
|
|
@@ -956,33 +915,12 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
|
|
|
956
915
|
...!open && {
|
|
957
916
|
inert: "true"
|
|
958
917
|
}
|
|
959
|
-
}, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
|
|
960
|
-
className: "flex items-center border-be border-subduedSeparator app-drag pli-1 density-coarse"
|
|
961
|
-
}, backCapable ? /* @__PURE__ */ React7.createElement(TitleButton, {
|
|
962
|
-
title,
|
|
963
|
-
onClick: handleBack
|
|
964
|
-
}) : /* @__PURE__ */ React7.createElement("span", {
|
|
965
|
-
className: "flex-1 truncate min-is-0 pis-6"
|
|
966
|
-
}, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
|
|
967
|
-
variant: "ghost",
|
|
968
|
-
classNames: [
|
|
969
|
-
"shrink-0",
|
|
970
|
-
hoverableControlItem2,
|
|
971
|
-
hoverableOpenControlItem2,
|
|
972
|
-
"pli-2 pointer-fine:pli-1"
|
|
973
|
-
],
|
|
974
|
-
iconOnly: true,
|
|
975
|
-
size: 5,
|
|
976
|
-
icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
|
|
977
|
-
label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
|
|
978
|
-
"data-testid": "treeView.alternateTreeButton",
|
|
979
|
-
onClick: handleOpen
|
|
980
|
-
}), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
|
|
918
|
+
}, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(L1PanelHeader, {
|
|
981
919
|
path,
|
|
982
920
|
item,
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
})
|
|
921
|
+
currentItemId,
|
|
922
|
+
onBack
|
|
923
|
+
}), /* @__PURE__ */ React7.createElement("div", {
|
|
986
924
|
role: "none",
|
|
987
925
|
className: "overflow-y-auto"
|
|
988
926
|
}, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
|
|
@@ -1008,48 +946,106 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
|
|
|
1008
946
|
_effect.f();
|
|
1009
947
|
}
|
|
1010
948
|
};
|
|
1011
|
-
var
|
|
949
|
+
var L1PanelHeader = ({ item, path, onBack }) => {
|
|
1012
950
|
var _effect = _useSignals7();
|
|
1013
951
|
try {
|
|
1014
|
-
const {
|
|
1015
|
-
|
|
1016
|
-
const
|
|
1017
|
-
const
|
|
952
|
+
const { t } = useTranslation7(meta.id);
|
|
953
|
+
const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
|
|
954
|
+
const title = toLocalizedString6(item.properties.label, t);
|
|
955
|
+
const alternateTree = navTreeContext.useItems(item, {
|
|
956
|
+
disposition: "alternate-tree"
|
|
957
|
+
})[0];
|
|
958
|
+
const alternatePath = useMemo3(() => [
|
|
1018
959
|
...path,
|
|
1019
960
|
item.id
|
|
1020
961
|
], [
|
|
1021
962
|
item.id,
|
|
1022
963
|
path
|
|
1023
964
|
]);
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
965
|
+
const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
|
|
966
|
+
const backCapable = item.id.startsWith("!") || isAlternate;
|
|
967
|
+
const handleOpen = useCallback2(() => {
|
|
968
|
+
setAlternateTree?.(alternatePath, true);
|
|
969
|
+
}, [
|
|
970
|
+
alternatePath,
|
|
971
|
+
setAlternateTree
|
|
972
|
+
]);
|
|
973
|
+
const handleBack = useCallback2(() => {
|
|
974
|
+
if (isAlternate) {
|
|
975
|
+
setAlternateTree?.(alternatePath, false);
|
|
976
|
+
} else {
|
|
977
|
+
onBack?.();
|
|
978
|
+
}
|
|
979
|
+
}, [
|
|
980
|
+
isAlternate,
|
|
981
|
+
alternatePath,
|
|
982
|
+
setAlternateTree,
|
|
983
|
+
onBack
|
|
984
|
+
]);
|
|
985
|
+
return /* @__PURE__ */ React7.createElement("div", {
|
|
986
|
+
className: "flex is-full items-center border-be border-subduedSeparator app-drag density-coarse"
|
|
987
|
+
}, /* @__PURE__ */ React7.createElement("div", {
|
|
988
|
+
className: "is-6"
|
|
989
|
+
}), /* @__PURE__ */ React7.createElement("h2", {
|
|
990
|
+
className: "flex-1 truncate min-is-0"
|
|
991
|
+
}, title), /* @__PURE__ */ React7.createElement("div", null, backCapable && /* @__PURE__ */ React7.createElement(IconButton2, {
|
|
992
|
+
variant: "ghost",
|
|
993
|
+
icon: "ph--arrow-u-down-left--regular",
|
|
994
|
+
iconOnly: true,
|
|
995
|
+
size: 5,
|
|
996
|
+
label: t("button back"),
|
|
997
|
+
classNames: [
|
|
998
|
+
hoverableControlItem2,
|
|
999
|
+
hoverableOpenControlItem2,
|
|
1000
|
+
"pointer-fine:pli-1"
|
|
1001
|
+
],
|
|
1002
|
+
onClick: handleBack
|
|
1003
|
+
}) || alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
|
|
1004
|
+
"data-testid": "treeView.alternateTreeButton",
|
|
1005
|
+
variant: "ghost",
|
|
1006
|
+
icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
|
|
1007
|
+
iconOnly: true,
|
|
1008
|
+
size: 5,
|
|
1009
|
+
label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
|
|
1010
|
+
classNames: [
|
|
1011
|
+
hoverableControlItem2,
|
|
1012
|
+
hoverableOpenControlItem2,
|
|
1013
|
+
"pointer-fine:pli-1"
|
|
1014
|
+
],
|
|
1015
|
+
onClick: handleOpen
|
|
1016
|
+
}) || /* @__PURE__ */ React7.createElement("div", null)), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
|
|
1017
|
+
open: true,
|
|
1018
|
+
path,
|
|
1019
|
+
item,
|
|
1020
|
+
density: "coarse"
|
|
1021
|
+
}));
|
|
1030
1022
|
} finally {
|
|
1031
1023
|
_effect.f();
|
|
1032
1024
|
}
|
|
1033
1025
|
};
|
|
1034
|
-
|
|
1035
|
-
|
|
1026
|
+
|
|
1027
|
+
// src/components/Sidebar/L1Tabs.tsx
|
|
1028
|
+
import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
|
|
1029
|
+
import React8, { useMemo as useMemo4 } from "react";
|
|
1030
|
+
var L1Tabs = ({ topLevelItems, onBack, ...props }) => {
|
|
1031
|
+
var _effect = _useSignals8();
|
|
1036
1032
|
try {
|
|
1037
|
-
return /* @__PURE__ */
|
|
1033
|
+
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
|
|
1038
1034
|
const type = l0ItemType(item);
|
|
1039
1035
|
switch (type) {
|
|
1040
|
-
case "collection":
|
|
1041
|
-
return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
|
|
1042
|
-
key: item.id,
|
|
1043
|
-
item,
|
|
1044
|
-
...props
|
|
1045
|
-
});
|
|
1046
1036
|
case "tab":
|
|
1047
|
-
return /* @__PURE__ */
|
|
1037
|
+
return /* @__PURE__ */ React8.createElement(L1Panel, {
|
|
1048
1038
|
key: item.id,
|
|
1049
1039
|
item,
|
|
1050
1040
|
...props,
|
|
1051
1041
|
onBack
|
|
1052
1042
|
});
|
|
1043
|
+
case "collection":
|
|
1044
|
+
return /* @__PURE__ */ React8.createElement(L1PanelCollection, {
|
|
1045
|
+
key: item.id,
|
|
1046
|
+
item,
|
|
1047
|
+
...props
|
|
1048
|
+
});
|
|
1053
1049
|
default:
|
|
1054
1050
|
return null;
|
|
1055
1051
|
}
|
|
@@ -1058,11 +1054,34 @@ var L1Panels = ({ topLevelItems, onBack, ...props }) => {
|
|
|
1058
1054
|
_effect.f();
|
|
1059
1055
|
}
|
|
1060
1056
|
};
|
|
1057
|
+
var L1PanelCollection = ({ item, path, ...props }) => {
|
|
1058
|
+
var _effect = _useSignals8();
|
|
1059
|
+
try {
|
|
1060
|
+
const { useItems: useItems2 } = useNavTreeContext();
|
|
1061
|
+
useLoadDescendents(item);
|
|
1062
|
+
const collectionItems = useItems2(item);
|
|
1063
|
+
const groupPath = useMemo4(() => [
|
|
1064
|
+
...path,
|
|
1065
|
+
item.id
|
|
1066
|
+
], [
|
|
1067
|
+
item.id,
|
|
1068
|
+
path
|
|
1069
|
+
]);
|
|
1070
|
+
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React8.createElement(L1Panel, {
|
|
1071
|
+
key: item2.id,
|
|
1072
|
+
item: item2,
|
|
1073
|
+
path: groupPath,
|
|
1074
|
+
...props
|
|
1075
|
+
})));
|
|
1076
|
+
} finally {
|
|
1077
|
+
_effect.f();
|
|
1078
|
+
}
|
|
1079
|
+
};
|
|
1061
1080
|
|
|
1062
1081
|
// src/components/NavTree/NavTree.tsx
|
|
1063
1082
|
var NAV_TREE_ITEM = "NavTreeItem";
|
|
1064
1083
|
var NavTree = ({ id, root, ...props }) => {
|
|
1065
|
-
var _effect =
|
|
1084
|
+
var _effect = _useSignals9();
|
|
1066
1085
|
try {
|
|
1067
1086
|
const { tab, useItems: useItems2, onBack } = useNavTreeContext();
|
|
1068
1087
|
const topLevelActions = useItems2(root, {
|
|
@@ -1078,7 +1097,7 @@ var NavTree = ({ id, root, ...props }) => {
|
|
|
1078
1097
|
const topLevelNavigation = useItems2(root, {
|
|
1079
1098
|
disposition: "navigation"
|
|
1080
1099
|
});
|
|
1081
|
-
const l0Items =
|
|
1100
|
+
const l0Items = useMemo5(() => [
|
|
1082
1101
|
// prettier-ignore
|
|
1083
1102
|
...topLevelCollections,
|
|
1084
1103
|
...topLevelWorkspaces,
|
|
@@ -1095,7 +1114,7 @@ var NavTree = ({ id, root, ...props }) => {
|
|
|
1095
1114
|
const userAccountItem = useItems2(root, {
|
|
1096
1115
|
disposition: "user-account"
|
|
1097
1116
|
})[0];
|
|
1098
|
-
const topLevelItems =
|
|
1117
|
+
const topLevelItems = useMemo5(() => [
|
|
1099
1118
|
// prettier-ignore
|
|
1100
1119
|
...l0Items,
|
|
1101
1120
|
...pinnedItems,
|
|
@@ -1108,24 +1127,24 @@ var NavTree = ({ id, root, ...props }) => {
|
|
|
1108
1127
|
userAccountItem
|
|
1109
1128
|
]);
|
|
1110
1129
|
useLoadDescendents(root);
|
|
1111
|
-
const path =
|
|
1130
|
+
const path = useMemo5(() => [
|
|
1112
1131
|
id
|
|
1113
1132
|
], [
|
|
1114
1133
|
id
|
|
1115
1134
|
]);
|
|
1116
|
-
return /* @__PURE__ */
|
|
1135
|
+
return /* @__PURE__ */ React9.createElement(Tabs3.Root, {
|
|
1117
1136
|
value: tab,
|
|
1118
1137
|
orientation: "vertical",
|
|
1119
1138
|
verticalVariant: "stateless",
|
|
1120
1139
|
classNames: "relative"
|
|
1121
|
-
}, /* @__PURE__ */
|
|
1140
|
+
}, /* @__PURE__ */ React9.createElement(L0Menu, {
|
|
1122
1141
|
menuActions: topLevelActions,
|
|
1123
1142
|
topLevelItems: l0Items,
|
|
1124
1143
|
pinnedItems,
|
|
1125
1144
|
userAccountItem,
|
|
1126
1145
|
path,
|
|
1127
1146
|
parent: root
|
|
1128
|
-
}), /* @__PURE__ */
|
|
1147
|
+
}), /* @__PURE__ */ React9.createElement(L1Tabs, {
|
|
1129
1148
|
topLevelItems,
|
|
1130
1149
|
path,
|
|
1131
1150
|
currentItemId: tab,
|
|
@@ -1137,17 +1156,9 @@ var NavTree = ({ id, root, ...props }) => {
|
|
|
1137
1156
|
}
|
|
1138
1157
|
};
|
|
1139
1158
|
|
|
1140
|
-
// src/capabilities/index.ts
|
|
1141
|
-
import { lazy } from "@dxos/app-framework";
|
|
1142
|
-
var AppGraphBuilder = lazy(() => import("./app-graph-builder-5J4LRWDX.mjs"));
|
|
1143
|
-
var IntentResolver = lazy(() => import("./intent-resolver-3XYN2CBU.mjs"));
|
|
1144
|
-
var Keyboard2 = lazy(() => import("./keyboard-QRS6WOQH.mjs"));
|
|
1145
|
-
var ReactSurface = lazy(() => import("./react-surface-WURHCBQQ.mjs"));
|
|
1146
|
-
var State = lazy(() => import("./state-54DY3DOY.mjs"));
|
|
1147
|
-
|
|
1148
1159
|
// src/components/NavTreeContainer.tsx
|
|
1149
1160
|
var NODE_TYPE = "dxos/app-graph/node";
|
|
1150
|
-
var renderItemEnd = ({ node, open }) => /* @__PURE__ */
|
|
1161
|
+
var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Surface, {
|
|
1151
1162
|
role: "navtree-item-end",
|
|
1152
1163
|
data: {
|
|
1153
1164
|
id: node.id,
|
|
@@ -1161,7 +1172,7 @@ var filterItems = (node, disposition) => {
|
|
|
1161
1172
|
if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
|
|
1162
1173
|
return false;
|
|
1163
1174
|
} else if (!disposition) {
|
|
1164
|
-
const action =
|
|
1175
|
+
const action = isAction3(node);
|
|
1165
1176
|
return !action || node.properties.disposition === "item";
|
|
1166
1177
|
} else {
|
|
1167
1178
|
return node.properties.disposition === disposition;
|
|
@@ -1176,8 +1187,28 @@ var useItems = (node, options) => {
|
|
|
1176
1187
|
const filtered = connections.filter((node2) => filterItems(node2, options?.disposition));
|
|
1177
1188
|
return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
|
|
1178
1189
|
};
|
|
1190
|
+
var useActions2 = (node) => {
|
|
1191
|
+
const { graph } = useAppGraph2();
|
|
1192
|
+
const actions = useGraphActions(graph, node.id);
|
|
1193
|
+
return useMemo6(() => actions.reduce((acc, arg) => {
|
|
1194
|
+
if (arg.properties.disposition === "item") {
|
|
1195
|
+
return acc;
|
|
1196
|
+
}
|
|
1197
|
+
acc.actions.push(arg);
|
|
1198
|
+
if (!isAction3(arg)) {
|
|
1199
|
+
const actionGroup = graph.getActions(arg.id);
|
|
1200
|
+
acc.groupedActions[arg.id] = actionGroup;
|
|
1201
|
+
}
|
|
1202
|
+
return acc;
|
|
1203
|
+
}, {
|
|
1204
|
+
actions: [],
|
|
1205
|
+
groupedActions: {}
|
|
1206
|
+
}), [
|
|
1207
|
+
actions
|
|
1208
|
+
]);
|
|
1209
|
+
};
|
|
1179
1210
|
var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
|
|
1180
|
-
var _effect =
|
|
1211
|
+
var _effect = _useSignals10();
|
|
1181
1212
|
try {
|
|
1182
1213
|
const [isLg] = useMediaQuery2("lg", {
|
|
1183
1214
|
ssr: false
|
|
@@ -1187,9 +1218,6 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1187
1218
|
const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
|
|
1188
1219
|
const layout = useLayout();
|
|
1189
1220
|
const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
|
|
1190
|
-
const getActions2 = useCallback3((node) => getActions(graph, node), [
|
|
1191
|
-
graph
|
|
1192
|
-
]);
|
|
1193
1221
|
const getProps = useCallback3((node, path) => {
|
|
1194
1222
|
const children = getChildren(graph, node, path).filter(getChildrenFilter);
|
|
1195
1223
|
const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
|
|
@@ -1199,7 +1227,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1199
1227
|
parentOf,
|
|
1200
1228
|
icon: node.properties.icon,
|
|
1201
1229
|
disabled: node.properties.disabled,
|
|
1202
|
-
className:
|
|
1230
|
+
className: mx3(node.properties.modified && "italic", node.properties.className),
|
|
1203
1231
|
headingClassName: node.properties.headingClassName,
|
|
1204
1232
|
testId: node.properties.testId
|
|
1205
1233
|
};
|
|
@@ -1256,7 +1284,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1256
1284
|
if (!node.data) {
|
|
1257
1285
|
return;
|
|
1258
1286
|
}
|
|
1259
|
-
if (
|
|
1287
|
+
if (isAction3(node)) {
|
|
1260
1288
|
const [parent] = graph.getConnections(node.id, "inbound");
|
|
1261
1289
|
void (parent && node.data({
|
|
1262
1290
|
parent,
|
|
@@ -1292,7 +1320,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1292
1320
|
}));
|
|
1293
1321
|
}
|
|
1294
1322
|
const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
|
|
1295
|
-
if (
|
|
1323
|
+
if (isAction3(defaultAction)) {
|
|
1296
1324
|
void defaultAction.data();
|
|
1297
1325
|
}
|
|
1298
1326
|
if (!isLg) {
|
|
@@ -1372,10 +1400,10 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1372
1400
|
}, [
|
|
1373
1401
|
setItem
|
|
1374
1402
|
]);
|
|
1375
|
-
const navTreeContextValue =
|
|
1403
|
+
const navTreeContextValue = useMemo6(() => ({
|
|
1376
1404
|
useItems,
|
|
1377
1405
|
tab,
|
|
1378
|
-
|
|
1406
|
+
useActions: useActions2,
|
|
1379
1407
|
loadDescendents,
|
|
1380
1408
|
renderItemEnd,
|
|
1381
1409
|
popoverAnchorId,
|
|
@@ -1392,7 +1420,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1392
1420
|
onBack: handleBack
|
|
1393
1421
|
}), [
|
|
1394
1422
|
tab,
|
|
1395
|
-
|
|
1423
|
+
useActions2,
|
|
1396
1424
|
loadDescendents,
|
|
1397
1425
|
renderItemEnd,
|
|
1398
1426
|
popoverAnchorId,
|
|
@@ -1408,9 +1436,9 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1408
1436
|
handleSelect,
|
|
1409
1437
|
handleBack
|
|
1410
1438
|
]);
|
|
1411
|
-
return /* @__PURE__ */
|
|
1439
|
+
return /* @__PURE__ */ React10.createElement(NavTreeContext.Provider, {
|
|
1412
1440
|
value: navTreeContextValue
|
|
1413
|
-
}, /* @__PURE__ */
|
|
1441
|
+
}, /* @__PURE__ */ React10.createElement(NavTree, {
|
|
1414
1442
|
id: ROOT_ID,
|
|
1415
1443
|
root: graph.root,
|
|
1416
1444
|
open: layout.sidebarOpen
|
|
@@ -1428,7 +1456,6 @@ export {
|
|
|
1428
1456
|
resolveMigrationOperation,
|
|
1429
1457
|
sortActions,
|
|
1430
1458
|
getChildren,
|
|
1431
|
-
getActions,
|
|
1432
1459
|
l0ItemType,
|
|
1433
1460
|
NODE_TYPE,
|
|
1434
1461
|
NavTreeContainer,
|
|
@@ -1439,4 +1466,4 @@ export {
|
|
|
1439
1466
|
ReactSurface,
|
|
1440
1467
|
State
|
|
1441
1468
|
};
|
|
1442
|
-
//# sourceMappingURL=chunk-
|
|
1469
|
+
//# sourceMappingURL=chunk-SNGLGBFJ.mjs.map
|