@dxos/plugin-deck 0.6.12-main.15a606f → 0.6.12-main.568932b
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/index.mjs +23 -35
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/DeckPlugin.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts +2 -3
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts +2 -3
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts +2 -3
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts.map +1 -1
- package/package.json +26 -26
- package/src/DeckPlugin.tsx +21 -26
- package/src/components/DeckLayout/ComplementarySidebar.tsx +4 -5
- package/src/components/DeckLayout/DeckLayout.tsx +5 -7
- package/src/components/DeckLayout/NodePlankHeading.tsx +6 -5
- package/src/components/DeckLayout/Plank.tsx +2 -2
- package/src/components/DeckLayout/Sidebar.tsx +6 -5
|
@@ -17,7 +17,6 @@ import { createExtension } from "@dxos/plugin-graph";
|
|
|
17
17
|
import { ObservabilityAction } from "@dxos/plugin-observability/meta";
|
|
18
18
|
import { fullyQualifiedId } from "@dxos/react-client/echo";
|
|
19
19
|
import { translations as deckTranslations } from "@dxos/react-ui-deck";
|
|
20
|
-
import { Mosaic } from "@dxos/react-ui-mosaic";
|
|
21
20
|
|
|
22
21
|
// packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
|
|
23
22
|
var NAV_ID = "NavTree";
|
|
@@ -28,6 +27,7 @@ import { Sidebar as MenuIcon } from "@phosphor-icons/react";
|
|
|
28
27
|
import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
|
|
29
28
|
import { Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
|
|
30
29
|
import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useOnTransition, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
30
|
+
import { useAttended as useAttended3 } from "@dxos/react-ui-attention";
|
|
31
31
|
import { Deck } from "@dxos/react-ui-deck";
|
|
32
32
|
import { getSize } from "@dxos/react-ui-theme";
|
|
33
33
|
|
|
@@ -119,7 +119,7 @@ import React5 from "react";
|
|
|
119
119
|
import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3 } from "@dxos/app-framework";
|
|
120
120
|
import { useGraph as useGraph3 } from "@dxos/plugin-graph";
|
|
121
121
|
import { Main } from "@dxos/react-ui";
|
|
122
|
-
import {
|
|
122
|
+
import { useAttended } from "@dxos/react-ui-attention";
|
|
123
123
|
import { deckGrid } from "@dxos/react-ui-deck";
|
|
124
124
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
125
125
|
|
|
@@ -130,17 +130,7 @@ import { useGraph as useGraph2 } from "@dxos/plugin-graph";
|
|
|
130
130
|
import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
|
|
131
131
|
import { PlankHeading } from "@dxos/react-ui-deck";
|
|
132
132
|
import { TextTooltip } from "@dxos/react-ui-text-tooltip";
|
|
133
|
-
var NodePlankHeading = ({
|
|
134
|
-
node,
|
|
135
|
-
id,
|
|
136
|
-
layoutParts,
|
|
137
|
-
layoutPart,
|
|
138
|
-
// TODO(wittjosiah): Unused?
|
|
139
|
-
layoutEntry,
|
|
140
|
-
popoverAnchorId,
|
|
141
|
-
pending,
|
|
142
|
-
flatDeck
|
|
143
|
-
}) => {
|
|
133
|
+
var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pending, flatDeck }) => {
|
|
144
134
|
const { t } = useTranslation(DECK_PLUGIN);
|
|
145
135
|
const { graph } = useGraph2();
|
|
146
136
|
const icon = node?.properties?.icon ?? "ph--placeholder--regular";
|
|
@@ -174,6 +164,7 @@ var NodePlankHeading = ({
|
|
|
174
164
|
classNames: "pie-1 border-b border-separator"
|
|
175
165
|
}, /* @__PURE__ */ React2.createElement(ActionRoot, null, node ? /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
|
|
176
166
|
icon,
|
|
167
|
+
related: layoutPart === "complementary",
|
|
177
168
|
attendableId,
|
|
178
169
|
triggerLabel: t("actions menu label"),
|
|
179
170
|
actions: graph.actions(node),
|
|
@@ -195,7 +186,8 @@ var NodePlankHeading = ({
|
|
|
195
186
|
text: label,
|
|
196
187
|
onlyWhenTruncating: true
|
|
197
188
|
}, /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
|
|
198
|
-
attendableId
|
|
189
|
+
attendableId,
|
|
190
|
+
related: layoutPart === "complementary",
|
|
199
191
|
...pending && {
|
|
200
192
|
classNames: "text-description"
|
|
201
193
|
}
|
|
@@ -317,13 +309,12 @@ var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing Layo
|
|
|
317
309
|
// packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
|
|
318
310
|
var ComplementarySidebar = ({ context, layoutParts, flatDeck }) => {
|
|
319
311
|
const { popoverAnchorId } = useLayout();
|
|
320
|
-
const attended =
|
|
312
|
+
const attended = useAttended();
|
|
321
313
|
const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${context}` : void 0;
|
|
322
314
|
const { graph } = useGraph3();
|
|
323
315
|
const node = useNode(graph, id);
|
|
324
|
-
const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR2)[0] ?? "never");
|
|
325
316
|
useNodeActionExpander(node);
|
|
326
|
-
return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar,
|
|
317
|
+
return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, null, /* @__PURE__ */ React5.createElement("div", {
|
|
327
318
|
role: "none",
|
|
328
319
|
className: mx2(deckGrid, "grid-cols-1 bs-full")
|
|
329
320
|
}, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
|
|
@@ -336,7 +327,7 @@ var ComplementarySidebar = ({ context, layoutParts, flatDeck }) => {
|
|
|
336
327
|
}), node && /* @__PURE__ */ React5.createElement(Surface3, {
|
|
337
328
|
role: "article",
|
|
338
329
|
data: {
|
|
339
|
-
subject: node.
|
|
330
|
+
subject: node.properties.object,
|
|
340
331
|
part: "complementary",
|
|
341
332
|
popoverAnchorId
|
|
342
333
|
},
|
|
@@ -408,7 +399,7 @@ import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction2, S
|
|
|
408
399
|
import { debounce } from "@dxos/async";
|
|
409
400
|
import { useGraph as useGraph5 } from "@dxos/plugin-graph";
|
|
410
401
|
import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
411
|
-
import {
|
|
402
|
+
import { useAttendableAttributes } from "@dxos/react-ui-attention";
|
|
412
403
|
import { Plank as NaturalPlank } from "@dxos/react-ui-deck";
|
|
413
404
|
import { mainIntrinsicSize } from "@dxos/react-ui-theme";
|
|
414
405
|
|
|
@@ -428,7 +419,7 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
|
|
|
428
419
|
const node = useNode(graph, entry.id);
|
|
429
420
|
const rootElement = useRef(null);
|
|
430
421
|
const resizeable = layoutMode === "deck";
|
|
431
|
-
const attendableAttrs =
|
|
422
|
+
const attendableAttrs = useAttendableAttributes(entry.id);
|
|
432
423
|
const coordinate = {
|
|
433
424
|
part,
|
|
434
425
|
entryId: entry.id
|
|
@@ -555,8 +546,10 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
|
|
|
555
546
|
import React10, { useMemo } from "react";
|
|
556
547
|
import { openIds, Surface as Surface7 } from "@dxos/app-framework";
|
|
557
548
|
import { Main as Main2 } from "@dxos/react-ui";
|
|
558
|
-
|
|
549
|
+
import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
|
|
550
|
+
var Sidebar = ({ layoutParts }) => {
|
|
559
551
|
const { layoutMode, popoverAnchorId } = useLayout();
|
|
552
|
+
const attended = useAttended2();
|
|
560
553
|
const activeIds = useMemo(() => {
|
|
561
554
|
if (layoutMode === "solo") {
|
|
562
555
|
return new Set(layoutParts?.solo?.map((e) => e.id) ?? []);
|
|
@@ -571,11 +564,11 @@ var Sidebar = ({ attention, layoutParts }) => {
|
|
|
571
564
|
const navigationData = useMemo(() => ({
|
|
572
565
|
popoverAnchorId,
|
|
573
566
|
activeIds,
|
|
574
|
-
attended
|
|
567
|
+
attended
|
|
575
568
|
}), [
|
|
576
569
|
popoverAnchorId,
|
|
577
570
|
activeIds,
|
|
578
|
-
|
|
571
|
+
attended
|
|
579
572
|
]);
|
|
580
573
|
return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React10.createElement(Surface7, {
|
|
581
574
|
role: "navigation",
|
|
@@ -675,11 +668,12 @@ var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySideba
|
|
|
675
668
|
};
|
|
676
669
|
|
|
677
670
|
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
678
|
-
var DeckLayout = ({ layoutParts,
|
|
671
|
+
var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter, slots, onDismissToast }) => {
|
|
679
672
|
const context = useLayout();
|
|
680
673
|
const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
|
|
681
674
|
const { t } = useTranslation5(DECK_PLUGIN);
|
|
682
675
|
const { plankSizing } = useDeckContext();
|
|
676
|
+
const attended = useAttended3();
|
|
683
677
|
const searchPlugin = usePlugin("dxos.org/plugin/search");
|
|
684
678
|
const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
|
|
685
679
|
layoutParts
|
|
@@ -688,7 +682,7 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
688
682
|
const deckRef = useRef2(null);
|
|
689
683
|
useEffect5(() => {
|
|
690
684
|
const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
|
|
691
|
-
if (
|
|
685
|
+
if (attended.length === 0 && firstId) {
|
|
692
686
|
document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
|
|
693
687
|
}
|
|
694
688
|
}, []);
|
|
@@ -714,9 +708,7 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
714
708
|
}, [
|
|
715
709
|
layoutMode
|
|
716
710
|
]);
|
|
717
|
-
const firstAttendedId =
|
|
718
|
-
attention.attended
|
|
719
|
-
]);
|
|
711
|
+
const firstAttendedId = attended[0];
|
|
720
712
|
useEffect5(() => {
|
|
721
713
|
if (layoutMode === "deck" && firstAttendedId) {
|
|
722
714
|
}
|
|
@@ -800,7 +792,6 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
800
792
|
})), /* @__PURE__ */ React13.createElement(Surface9, {
|
|
801
793
|
role: "notch-end"
|
|
802
794
|
})), /* @__PURE__ */ React13.createElement(Sidebar, {
|
|
803
|
-
attention,
|
|
804
795
|
layoutParts
|
|
805
796
|
}), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
|
|
806
797
|
context: "comments",
|
|
@@ -1410,10 +1401,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1410
1401
|
value: deck.values
|
|
1411
1402
|
}, props.children)),
|
|
1412
1403
|
root: () => {
|
|
1413
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1414
|
-
attention: attentionPlugin?.provides.attention ?? {
|
|
1415
|
-
attended: /* @__PURE__ */ new Set()
|
|
1416
|
-
},
|
|
1404
|
+
return /* @__PURE__ */ React15.createElement(DeckLayout, {
|
|
1417
1405
|
layoutParts: location.values.active,
|
|
1418
1406
|
showHintsFooter: settings.values.showFooter,
|
|
1419
1407
|
overscroll: settings.values.overscroll,
|
|
@@ -1431,7 +1419,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1431
1419
|
}, 1e3);
|
|
1432
1420
|
}
|
|
1433
1421
|
}
|
|
1434
|
-
})
|
|
1422
|
+
});
|
|
1435
1423
|
},
|
|
1436
1424
|
surface: {
|
|
1437
1425
|
component: ({ data, role }) => {
|
|
@@ -1467,7 +1455,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1467
1455
|
} else {
|
|
1468
1456
|
log.warn("Invalid layout mode", intent?.data?.layoutMode, {
|
|
1469
1457
|
F: __dxlog_file,
|
|
1470
|
-
L:
|
|
1458
|
+
L: 410,
|
|
1471
1459
|
S: void 0,
|
|
1472
1460
|
C: (f, a) => f(...a)
|
|
1473
1461
|
});
|