@dxos/plugin-navtree 0.7.5-main.e9bb01b → 0.7.5-staging.2ff1350
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-EO6JEADO.mjs → chunk-7OKF4GP3.mjs} +116 -73
- package/dist/lib/browser/chunk-7OKF4GP3.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +3 -3
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-surface-6ZP5XUTS.mjs → react-surface-SIEGT4YS.mjs} +2 -2
- package/dist/lib/browser/{state-65TQKYX7.mjs → state-IEFQTUPG.mjs} +2 -2
- package/dist/lib/browser/state-IEFQTUPG.mjs.map +7 -0
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/components/CommandsDialog.d.ts +1 -2
- package/dist/types/src/components/CommandsDialog.d.ts.map +1 -1
- package/dist/types/src/components/CommandsTrigger.d.ts +1 -2
- package/dist/types/src/components/CommandsTrigger.d.ts.map +1 -1
- package/dist/types/src/components/HaloButton.d.ts +1 -2
- package/dist/types/src/components/HaloButton.d.ts.map +1 -1
- package/dist/types/src/components/HaloButton.stories.d.ts +1 -2
- package/dist/types/src/components/HaloButton.stories.d.ts.map +1 -1
- package/dist/types/src/components/L0Menu.d.ts +1 -2
- package/dist/types/src/components/L0Menu.d.ts.map +1 -1
- package/dist/types/src/components/L1Panels.d.ts +8 -3
- package/dist/types/src/components/L1Panels.d.ts.map +1 -1
- package/dist/types/src/components/NavTree.d.ts +1 -2
- package/dist/types/src/components/NavTree.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeContainer.d.ts +1 -1
- package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeItemAction.d.ts +4 -4
- package/dist/types/src/components/NavTreeItemAction.d.ts.map +1 -1
- package/dist/types/src/components/NavTreeItemAction.stories.d.ts +1 -1
- package/dist/types/src/components/NavTreeItemColumns.d.ts +1 -1
- package/dist/types/src/components/NavTreeItemColumns.d.ts.map +1 -1
- package/dist/types/src/components/NotchStart.d.ts +1 -2
- package/dist/types/src/components/NotchStart.d.ts.map +1 -1
- package/dist/types/src/components/types.d.ts +2 -1
- package/dist/types/src/components/types.d.ts.map +1 -1
- package/dist/types/src/experimental/Tree.d.ts +8 -8
- package/dist/types/src/experimental/Tree.d.ts.map +1 -1
- package/dist/types/src/experimental/Tree.stories.d.ts +2 -3
- package/dist/types/src/experimental/Tree.stories.d.ts.map +1 -1
- package/dist/types/src/stories/StorybookNavTree.d.ts +1 -2
- package/dist/types/src/stories/StorybookNavTree.d.ts.map +1 -1
- package/dist/types/src/util.d.ts +1 -1
- package/package.json +31 -31
- package/src/NavTreePlugin.tsx +2 -2
- package/src/capabilities/state.ts +1 -1
- package/src/components/L0Menu.tsx +83 -53
- package/src/components/L1Panels.tsx +25 -6
- package/src/components/NavTree.stories.tsx +1 -1
- package/src/components/NavTree.tsx +3 -3
- package/src/components/NavTreeContainer.tsx +9 -2
- package/src/components/types.ts +12 -10
- package/src/hooks.ts +1 -1
- package/src/stories/Graph.stories.tsx +1 -1
- package/src/util.ts +2 -2
- package/dist/lib/browser/chunk-EO6JEADO.mjs.map +0 -7
- package/dist/lib/browser/state-65TQKYX7.mjs.map +0 -7
- /package/dist/lib/browser/{react-surface-6ZP5XUTS.mjs.map → react-surface-SIEGT4YS.mjs.map} +0 -0
|
@@ -187,7 +187,7 @@ var NotchStart = () => {
|
|
|
187
187
|
|
|
188
188
|
// packages/plugins/plugin-navtree/src/util.ts
|
|
189
189
|
import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2, isActionLike } from "@dxos/app-graph";
|
|
190
|
-
import {
|
|
190
|
+
import { isNonNullable } from "@dxos/util";
|
|
191
191
|
var getParent = (graph, node, path) => {
|
|
192
192
|
const parentId = path[path.length - 2];
|
|
193
193
|
return graph.nodes(node, {
|
|
@@ -239,7 +239,7 @@ var getChildren = (graph, node, filter, path = []) => {
|
|
|
239
239
|
node.id
|
|
240
240
|
];
|
|
241
241
|
return nextPath.includes(n.id) ? void 0 : n;
|
|
242
|
-
}).filter(
|
|
242
|
+
}).filter(isNonNullable);
|
|
243
243
|
};
|
|
244
244
|
var getActions = (graph, node) => {
|
|
245
245
|
return graph.actions(node).reduce((acc, arg) => {
|
|
@@ -313,13 +313,13 @@ var getFirstTwoRenderableChars = (label) => {
|
|
|
313
313
|
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
314
314
|
import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
|
|
315
315
|
import { untracked } from "@preact/signals-core";
|
|
316
|
-
import React10, { memo as memo2, useCallback as useCallback2, useEffect as
|
|
316
|
+
import React10, { memo as memo2, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo5 } from "react";
|
|
317
317
|
import { createIntent as createIntent5, LayoutAction as LayoutAction4, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher5, useLayout as useLayout2 } from "@dxos/app-framework";
|
|
318
318
|
import { isAction as isAction4, isActionLike as isActionLike2 } from "@dxos/app-graph";
|
|
319
319
|
import { isEchoObject, isSpace } from "@dxos/react-client/echo";
|
|
320
320
|
import { useMediaQuery as useMediaQuery2 } from "@dxos/react-ui";
|
|
321
321
|
import { isTreeData } from "@dxos/react-ui-list";
|
|
322
|
-
import { mx as
|
|
322
|
+
import { mx as mx6 } from "@dxos/react-ui-theme";
|
|
323
323
|
import { arrayMove } from "@dxos/util";
|
|
324
324
|
|
|
325
325
|
// packages/plugins/plugin-navtree/src/components/NavTree.tsx
|
|
@@ -330,7 +330,7 @@ import { byPosition } from "@dxos/util";
|
|
|
330
330
|
// packages/plugins/plugin-navtree/src/components/L0Menu.tsx
|
|
331
331
|
import React5, { useCallback, useMemo as useMemo2 } from "react";
|
|
332
332
|
import { createIntent as createIntent4, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
|
|
333
|
-
import { Icon as Icon2, toLocalizedString as
|
|
333
|
+
import { Icon as Icon2, Popover, ScrollArea, toLocalizedString as toLocalizedString3, Tooltip, useMediaQuery, useSidebars, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
334
334
|
import { Tabs } from "@dxos/react-ui-tabs";
|
|
335
335
|
import { mx as mx3 } from "@dxos/react-ui-theme";
|
|
336
336
|
|
|
@@ -341,10 +341,27 @@ var NavTreeContext = /* @__PURE__ */ createContext(null);
|
|
|
341
341
|
var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("NavTreeContext not found"));
|
|
342
342
|
|
|
343
343
|
// packages/plugins/plugin-navtree/src/hooks.ts
|
|
344
|
+
import { useEffect as useEffect2 } from "react";
|
|
345
|
+
|
|
346
|
+
// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
|
|
344
347
|
import { useEffect } from "react";
|
|
348
|
+
import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
|
|
349
|
+
var NavTreeDocumentTitle = ({ node }) => {
|
|
350
|
+
const { t } = useTranslation3(NAVTREE_PLUGIN);
|
|
351
|
+
useEffect(() => {
|
|
352
|
+
document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
|
|
353
|
+
ns: "appkit"
|
|
354
|
+
});
|
|
355
|
+
}, [
|
|
356
|
+
node?.properties?.label
|
|
357
|
+
]);
|
|
358
|
+
return null;
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
// packages/plugins/plugin-navtree/src/hooks.ts
|
|
345
362
|
var useLoadDescendents = (root) => {
|
|
346
363
|
const { loadDescendents } = useNavTreeContext();
|
|
347
|
-
|
|
364
|
+
useEffect2(() => {
|
|
348
365
|
const frame = requestAnimationFrame(() => {
|
|
349
366
|
if (root) {
|
|
350
367
|
void loadDescendents?.(root);
|
|
@@ -407,7 +424,7 @@ var l0Breakpoints = {
|
|
|
407
424
|
lg: "hidden lg:grid"
|
|
408
425
|
};
|
|
409
426
|
var L0Item = ({ item, parent, path, pinned }) => {
|
|
410
|
-
const { t } =
|
|
427
|
+
const { t } = useTranslation4(NAVTREE_PLUGIN);
|
|
411
428
|
const type = l0ItemType(item);
|
|
412
429
|
const itemPath = useMemo2(() => [
|
|
413
430
|
...path,
|
|
@@ -416,7 +433,7 @@ var L0Item = ({ item, parent, path, pinned }) => {
|
|
|
416
433
|
item.id,
|
|
417
434
|
path
|
|
418
435
|
]);
|
|
419
|
-
const { getProps } = useNavTreeContext();
|
|
436
|
+
const { getProps, popoverAnchorId } = useNavTreeContext();
|
|
420
437
|
const { id, testId } = getProps?.(item, path) ?? {};
|
|
421
438
|
const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
|
|
422
439
|
const handleClick = useL0ItemClick({
|
|
@@ -437,37 +454,58 @@ var L0Item = ({ item, parent, path, pinned }) => {
|
|
|
437
454
|
} : {
|
|
438
455
|
onClick: handleClick
|
|
439
456
|
};
|
|
440
|
-
const localizedString =
|
|
441
|
-
const
|
|
457
|
+
const localizedString = toLocalizedString3(item.properties.label, t);
|
|
458
|
+
const hue = item.properties.hue ?? null;
|
|
459
|
+
const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
|
|
442
460
|
type,
|
|
443
461
|
item.properties.label,
|
|
444
462
|
t
|
|
445
463
|
]);
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
}
|
|
464
|
+
const hueFgStyle = hue && {
|
|
465
|
+
style: {
|
|
466
|
+
color: `var(--dx-${hue}SurfaceText)`
|
|
467
|
+
}
|
|
468
|
+
};
|
|
469
|
+
const l0ItemTrigger = /* @__PURE__ */ React5.createElement(Root, {
|
|
451
470
|
...rootProps,
|
|
452
471
|
"data-type": type,
|
|
453
472
|
className: mx3('group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint])
|
|
454
473
|
}, type !== "collection" && /* @__PURE__ */ React5.createElement("div", {
|
|
455
474
|
role: "none",
|
|
456
|
-
className: mx3("absolute -z-[1]
|
|
475
|
+
className: mx3("absolute -z-[1] dx-focus-ring-group-indicator transition-colors", type === "tab" || pinned ? "rounded" : "rounded-full", pinned ? "bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5" : "bg-groupSurface inset-inline-3 inset-block-2"),
|
|
476
|
+
...hue && {
|
|
477
|
+
style: {
|
|
478
|
+
background: `var(--dx-${hue}Surface)`
|
|
479
|
+
}
|
|
480
|
+
}
|
|
457
481
|
}), /* @__PURE__ */ React5.createElement("div", {
|
|
458
482
|
role: "none",
|
|
459
483
|
className: "hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
|
|
460
|
-
}),
|
|
484
|
+
}), item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
|
|
485
|
+
icon: item.properties.icon,
|
|
486
|
+
size: pinned ? 5 : 7,
|
|
487
|
+
classNames: "place-self-center",
|
|
488
|
+
...hueFgStyle
|
|
489
|
+
}) || (type === "tab" && item.properties.disposition !== "pin-end" ? /* @__PURE__ */ React5.createElement("span", {
|
|
461
490
|
role: "img",
|
|
462
|
-
className: "place-self-center text-3xl font-light"
|
|
491
|
+
className: "place-self-center text-3xl font-light",
|
|
492
|
+
...hueFgStyle
|
|
463
493
|
}, avatarValue) : item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
|
|
464
|
-
icon:
|
|
494
|
+
icon: "ph--planet--regular",
|
|
465
495
|
size: pinned ? 5 : 7,
|
|
466
|
-
classNames: "place-self-center"
|
|
467
|
-
|
|
496
|
+
classNames: "place-self-center",
|
|
497
|
+
...hueFgStyle
|
|
498
|
+
})), /* @__PURE__ */ React5.createElement("span", {
|
|
468
499
|
id: `${item.id}__label`,
|
|
469
500
|
className: "sr-only"
|
|
470
|
-
}, localizedString))
|
|
501
|
+
}, localizedString));
|
|
502
|
+
return popoverAnchorId === id ? /* @__PURE__ */ React5.createElement(Popover.Anchor, {
|
|
503
|
+
asChild: true
|
|
504
|
+
}, l0ItemTrigger) : /* @__PURE__ */ React5.createElement(Tooltip.Root, {
|
|
505
|
+
delayDuration: 0
|
|
506
|
+
}, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
|
|
507
|
+
asChild: true
|
|
508
|
+
}, l0ItemTrigger), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, {
|
|
471
509
|
side: "right"
|
|
472
510
|
}, localizedString, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
|
|
473
511
|
};
|
|
@@ -489,11 +527,7 @@ var L0Collection = ({ item, path, parent }) => {
|
|
|
489
527
|
"aria-labelledby": `${item.id}__label`,
|
|
490
528
|
"data-itemid": id,
|
|
491
529
|
"data-testid": testId
|
|
492
|
-
}, /* @__PURE__ */ React5.createElement(L0Item, {
|
|
493
|
-
item,
|
|
494
|
-
parent,
|
|
495
|
-
path: groupPath
|
|
496
|
-
}), collectionItems.map((collectionItem) => /* @__PURE__ */ React5.createElement(L0Item, {
|
|
530
|
+
}, collectionItems.map((collectionItem) => /* @__PURE__ */ React5.createElement(L0Item, {
|
|
497
531
|
key: collectionItem.id,
|
|
498
532
|
item: collectionItem,
|
|
499
533
|
parent: item,
|
|
@@ -502,10 +536,10 @@ var L0Collection = ({ item, path, parent }) => {
|
|
|
502
536
|
};
|
|
503
537
|
var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
|
|
504
538
|
return /* @__PURE__ */ React5.createElement(Tabs.Tablist, {
|
|
505
|
-
classNames: "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag"
|
|
506
|
-
}, /* @__PURE__ */ React5.createElement("div", {
|
|
539
|
+
classNames: "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]"
|
|
540
|
+
}, /* @__PURE__ */ React5.createElement(ScrollArea.Root, null, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React5.createElement("div", {
|
|
507
541
|
role: "none",
|
|
508
|
-
className: 'grid auto-rows-[calc(var(--l0-size)-.5rem)]
|
|
542
|
+
className: 'grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
|
|
509
543
|
}, topLevelItems.map((item) => {
|
|
510
544
|
if (l0ItemType(item) === "collection") {
|
|
511
545
|
return /* @__PURE__ */ React5.createElement(L0Collection, {
|
|
@@ -522,7 +556,9 @@ var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
|
|
|
522
556
|
path
|
|
523
557
|
});
|
|
524
558
|
}
|
|
525
|
-
})), /* @__PURE__ */ React5.createElement(
|
|
559
|
+
})), /* @__PURE__ */ React5.createElement(ScrollArea.Scrollbar, {
|
|
560
|
+
orientation: "vertical"
|
|
561
|
+
}, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React5.createElement("div", {
|
|
526
562
|
role: "none",
|
|
527
563
|
className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
|
|
528
564
|
}, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React5.createElement(L0Item, {
|
|
@@ -546,18 +582,19 @@ var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
|
|
|
546
582
|
// packages/plugins/plugin-navtree/src/components/L1Panels.tsx
|
|
547
583
|
import React8, { useMemo as useMemo3 } from "react";
|
|
548
584
|
import { useLayout } from "@dxos/app-framework";
|
|
549
|
-
import { toLocalizedString as
|
|
585
|
+
import { IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
|
|
550
586
|
import { Tree } from "@dxos/react-ui-list";
|
|
551
587
|
import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
|
|
588
|
+
import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx5 } from "@dxos/react-ui-theme";
|
|
552
589
|
|
|
553
590
|
// packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
|
|
554
591
|
import React7, { Fragment, memo } from "react";
|
|
555
592
|
import { isAction as isAction3 } from "@dxos/app-graph";
|
|
556
|
-
import { Popover, toLocalizedString as
|
|
593
|
+
import { Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
|
|
557
594
|
|
|
558
595
|
// packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
|
|
559
596
|
import React6, { useRef } from "react";
|
|
560
|
-
import { useTranslation as
|
|
597
|
+
import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton } from "@dxos/react-ui";
|
|
561
598
|
import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
|
|
562
599
|
import { hoverableControlItem, hoverableOpenControlItem, mx as mx4 } from "@dxos/react-ui-theme";
|
|
563
600
|
var fallbackIcon = "ph--placeholder--regular";
|
|
@@ -566,7 +603,7 @@ var actionButtonProps = {
|
|
|
566
603
|
density: "fine"
|
|
567
604
|
};
|
|
568
605
|
var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
|
|
569
|
-
const { t } =
|
|
606
|
+
const { t } = useTranslation5(NAVTREE_PLUGIN);
|
|
570
607
|
const suppressNextTooltip = useRef(false);
|
|
571
608
|
return /* @__PURE__ */ React6.createElement(MenuProvider, {
|
|
572
609
|
onAction
|
|
@@ -581,7 +618,7 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onActio
|
|
|
581
618
|
variant: "ghost",
|
|
582
619
|
icon: icon ?? fallbackIcon,
|
|
583
620
|
iconOnly: true,
|
|
584
|
-
label:
|
|
621
|
+
label: toLocalizedString4(label, t),
|
|
585
622
|
"data-testid": testId,
|
|
586
623
|
suppressNextTooltip
|
|
587
624
|
}))));
|
|
@@ -613,9 +650,9 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
|
|
|
613
650
|
});
|
|
614
651
|
};
|
|
615
652
|
var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
|
|
616
|
-
const { t } =
|
|
653
|
+
const { t } = useTranslation5(NAVTREE_PLUGIN);
|
|
617
654
|
const monolithicAction = menuActions?.length === 1 && menuActions[0];
|
|
618
|
-
const baseLabel =
|
|
655
|
+
const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
|
|
619
656
|
return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React6.createElement(NavTreeItemMonolithicAction, {
|
|
620
657
|
baseLabel,
|
|
621
658
|
parent: node,
|
|
@@ -636,7 +673,7 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
|
|
|
636
673
|
|
|
637
674
|
// packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
|
|
638
675
|
var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
|
|
639
|
-
const { t } =
|
|
676
|
+
const { t } = useTranslation6(NAVTREE_PLUGIN);
|
|
640
677
|
const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
|
|
641
678
|
const level = path.length - 2;
|
|
642
679
|
const { actions: _actions, groupedActions } = getActions2(item);
|
|
@@ -644,7 +681,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
|
|
|
644
681
|
const actions = (primaryAction?.properties?.disposition === "toolbar" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
|
|
645
682
|
action
|
|
646
683
|
] : []).filter((action) => !action.properties?.hidden);
|
|
647
|
-
const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ?
|
|
684
|
+
const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover2.Anchor : Fragment;
|
|
648
685
|
useLoadDescendents(item);
|
|
649
686
|
useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
|
|
650
687
|
return /* @__PURE__ */ React7.createElement("div", {
|
|
@@ -652,7 +689,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
|
|
|
652
689
|
className: "contents app-no-drag"
|
|
653
690
|
}, primaryAction?.properties?.disposition === "toolbar" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React7.createElement(NavTreeItemAction, {
|
|
654
691
|
testId: primaryAction.properties?.testId,
|
|
655
|
-
label:
|
|
692
|
+
label: toLocalizedString5(primaryAction.properties?.label, t),
|
|
656
693
|
icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
|
|
657
694
|
parent: item,
|
|
658
695
|
monolithic: isAction3(primaryAction),
|
|
@@ -676,15 +713,15 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
|
|
|
676
713
|
});
|
|
677
714
|
|
|
678
715
|
// packages/plugins/plugin-navtree/src/components/L1Panels.tsx
|
|
679
|
-
var L1Panel = ({ item, path, currentItemId }) => {
|
|
716
|
+
var L1Panel = ({ item, path, currentItemId, onBack }) => {
|
|
680
717
|
const layout = useLayout();
|
|
681
718
|
const navTreeContext = useNavTreeContext();
|
|
682
|
-
const { t } =
|
|
719
|
+
const { t } = useTranslation7(NAVTREE_PLUGIN);
|
|
683
720
|
return /* @__PURE__ */ React8.createElement(Tabs2.Tabpanel, {
|
|
684
721
|
key: item.id,
|
|
685
722
|
value: item.id,
|
|
686
723
|
classNames: [
|
|
687
|
-
"absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]",
|
|
724
|
+
"absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr] pbs-[env(safe-area-inset-top)]",
|
|
688
725
|
item.id === currentItemId && "grid"
|
|
689
726
|
],
|
|
690
727
|
tabIndex: -1,
|
|
@@ -693,9 +730,18 @@ var L1Panel = ({ item, path, currentItemId }) => {
|
|
|
693
730
|
}
|
|
694
731
|
}, item.id === currentItemId && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
|
|
695
732
|
className: "flex items-center border-be border-separator pis-4 app-drag"
|
|
696
|
-
}, /* @__PURE__ */ React8.createElement(
|
|
733
|
+
}, item.properties.disposition === "pin-end" && /* @__PURE__ */ React8.createElement(IconButton2, {
|
|
734
|
+
label: t("back label"),
|
|
735
|
+
iconOnly: true,
|
|
736
|
+
icon: "ph--caret-left--regular",
|
|
737
|
+
size: 5,
|
|
738
|
+
density: "fine",
|
|
739
|
+
variant: "ghost",
|
|
740
|
+
classNames: mx5("shrink-0 mie-2", "pli-2 pointer-fine:pli-1", hoverableControlItem2, hoverableOpenControlItem2),
|
|
741
|
+
onClick: onBack
|
|
742
|
+
}), /* @__PURE__ */ React8.createElement("span", {
|
|
697
743
|
className: "flex-1 truncate cursor-default"
|
|
698
|
-
},
|
|
744
|
+
}, toLocalizedString6(item.properties.label, t)), /* @__PURE__ */ React8.createElement(NavTreeItemColumns, {
|
|
699
745
|
path,
|
|
700
746
|
item,
|
|
701
747
|
open: true
|
|
@@ -731,7 +777,7 @@ var L1PanelCollection = ({ item, path, currentItemId }) => {
|
|
|
731
777
|
currentItemId
|
|
732
778
|
})));
|
|
733
779
|
};
|
|
734
|
-
var L1Panels = ({ topLevelItems, path, currentItemId }) => {
|
|
780
|
+
var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
|
|
735
781
|
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
|
|
736
782
|
const type = l0ItemType(item);
|
|
737
783
|
switch (type) {
|
|
@@ -747,7 +793,8 @@ var L1Panels = ({ topLevelItems, path, currentItemId }) => {
|
|
|
747
793
|
key: item.id,
|
|
748
794
|
item,
|
|
749
795
|
path,
|
|
750
|
-
currentItemId
|
|
796
|
+
currentItemId,
|
|
797
|
+
onBack
|
|
751
798
|
});
|
|
752
799
|
default:
|
|
753
800
|
return null;
|
|
@@ -758,8 +805,8 @@ var L1Panels = ({ topLevelItems, path, currentItemId }) => {
|
|
|
758
805
|
// packages/plugins/plugin-navtree/src/components/NavTree.tsx
|
|
759
806
|
var NAV_TREE_ITEM = "NavTreeItem";
|
|
760
807
|
var NavTree = ({ id, root }) => {
|
|
761
|
-
const { getItems,
|
|
762
|
-
const topLevelActions = getItems(root, "item");
|
|
808
|
+
const { tab, getItems, onBack } = useNavTreeContext();
|
|
809
|
+
const topLevelActions = getItems(root, "item").toSorted((a, b) => byPosition(a.properties, b.properties));
|
|
763
810
|
const topLevelCollections = getItems(root, "collection");
|
|
764
811
|
const topLevelWorkspaces = getItems(root, "workspace");
|
|
765
812
|
const topLevelNavigation = getItems(root, "navigation");
|
|
@@ -803,7 +850,8 @@ var NavTree = ({ id, root }) => {
|
|
|
803
850
|
}), /* @__PURE__ */ React9.createElement(L1Panels, {
|
|
804
851
|
topLevelItems,
|
|
805
852
|
path,
|
|
806
|
-
currentItemId: tab
|
|
853
|
+
currentItemId: tab,
|
|
854
|
+
onBack
|
|
807
855
|
}))
|
|
808
856
|
);
|
|
809
857
|
};
|
|
@@ -813,8 +861,8 @@ import { lazy } from "@dxos/app-framework";
|
|
|
813
861
|
var AppGraphBuilder = lazy(() => import("./app-graph-builder-BL7LRXCM.mjs"));
|
|
814
862
|
var IntentResolver = lazy(() => import("./intent-resolver-U25VBFH3.mjs"));
|
|
815
863
|
var Keyboard2 = lazy(() => import("./keyboard-MUBRTPI5.mjs"));
|
|
816
|
-
var ReactSurface = lazy(() => import("./react-surface-
|
|
817
|
-
var State = lazy(() => import("./state-
|
|
864
|
+
var ReactSurface = lazy(() => import("./react-surface-SIEGT4YS.mjs"));
|
|
865
|
+
var State = lazy(() => import("./state-IEFQTUPG.mjs"));
|
|
818
866
|
|
|
819
867
|
// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
|
|
820
868
|
var NODE_TYPE = "dxos/app-graph/node";
|
|
@@ -842,7 +890,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
842
890
|
return graph.nodes(node ?? graph.root, {
|
|
843
891
|
filter: (node2) => {
|
|
844
892
|
return untracked(() => {
|
|
845
|
-
const action =
|
|
893
|
+
const action = isAction4(node2);
|
|
846
894
|
if (!disposition) {
|
|
847
895
|
return !action || node2.properties.disposition === "item";
|
|
848
896
|
}
|
|
@@ -862,7 +910,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
862
910
|
parentOf,
|
|
863
911
|
icon: node.properties.icon,
|
|
864
912
|
disabled: node.properties.disabled,
|
|
865
|
-
className:
|
|
913
|
+
className: mx6(node.properties.modified && "italic", node.properties.className),
|
|
866
914
|
headingClassName: node.properties.headingClassName,
|
|
867
915
|
testId: node.properties.testId
|
|
868
916
|
};
|
|
@@ -899,7 +947,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
899
947
|
}));
|
|
900
948
|
if (layout.active.length === 0) {
|
|
901
949
|
const [item] = getItems(node).filter((node2) => !isActionLike2(node2));
|
|
902
|
-
if (item) {
|
|
950
|
+
if (item && item.data) {
|
|
903
951
|
await dispatch(createIntent5(LayoutAction4.Open, {
|
|
904
952
|
part: "main",
|
|
905
953
|
subject: [
|
|
@@ -982,7 +1030,15 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
982
1030
|
isCurrent,
|
|
983
1031
|
isLg
|
|
984
1032
|
]);
|
|
985
|
-
|
|
1033
|
+
const onBack = useCallback2(() => dispatch(createIntent5(LayoutAction4.RevertWorkspace, {
|
|
1034
|
+
part: "workspace",
|
|
1035
|
+
options: {
|
|
1036
|
+
revert: true
|
|
1037
|
+
}
|
|
1038
|
+
})), [
|
|
1039
|
+
dispatch
|
|
1040
|
+
]);
|
|
1041
|
+
useEffect3(() => {
|
|
986
1042
|
return monitorForElements({
|
|
987
1043
|
canMonitor: ({ source }) => isTreeData(source.data),
|
|
988
1044
|
onDrop: ({ location, source }) => {
|
|
@@ -1035,6 +1091,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1035
1091
|
const navTreeContextValue = useMemo5(() => ({
|
|
1036
1092
|
tab,
|
|
1037
1093
|
onTabChange,
|
|
1094
|
+
onBack,
|
|
1038
1095
|
getActions: getActions2,
|
|
1039
1096
|
loadDescendents,
|
|
1040
1097
|
renderItemEnd,
|
|
@@ -1050,6 +1107,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1050
1107
|
}), [
|
|
1051
1108
|
tab,
|
|
1052
1109
|
onTabChange,
|
|
1110
|
+
onBack,
|
|
1053
1111
|
getActions2,
|
|
1054
1112
|
loadDescendents,
|
|
1055
1113
|
renderItemEnd,
|
|
@@ -1071,21 +1129,6 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
|
|
|
1071
1129
|
}));
|
|
1072
1130
|
});
|
|
1073
1131
|
|
|
1074
|
-
// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
|
|
1075
|
-
import { useEffect as useEffect3 } from "react";
|
|
1076
|
-
import { toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
|
|
1077
|
-
var NavTreeDocumentTitle = ({ node }) => {
|
|
1078
|
-
const { t } = useTranslation7(NAVTREE_PLUGIN);
|
|
1079
|
-
useEffect3(() => {
|
|
1080
|
-
document.title = node ? toLocalizedString6(node.properties.label, t) : t("current app name", {
|
|
1081
|
-
ns: "appkit"
|
|
1082
|
-
});
|
|
1083
|
-
}, [
|
|
1084
|
-
node?.properties?.label
|
|
1085
|
-
]);
|
|
1086
|
-
return null;
|
|
1087
|
-
};
|
|
1088
|
-
|
|
1089
1132
|
export {
|
|
1090
1133
|
CommandsDialogContent,
|
|
1091
1134
|
CommandsTrigger,
|
|
@@ -1110,4 +1153,4 @@ export {
|
|
|
1110
1153
|
ReactSurface,
|
|
1111
1154
|
State
|
|
1112
1155
|
};
|
|
1113
|
-
//# sourceMappingURL=chunk-
|
|
1156
|
+
//# sourceMappingURL=chunk-7OKF4GP3.mjs.map
|