@dxos/react-ui-mosaic 0.8.4-main.937b3ca → 0.8.4-main.bc674ce
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-QKMUWO5X.mjs → chunk-UMBPEG4F.mjs} +347 -236
- package/dist/lib/browser/chunk-UMBPEG4F.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +9 -3
- package/dist/lib/browser/index.mjs.map +1 -1
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/testing/index.mjs +78 -185
- package/dist/lib/browser/testing/index.mjs.map +4 -4
- package/dist/lib/node-esm/{chunk-BYUYHEAX.mjs → chunk-X6GV7SMK.mjs} +347 -236
- package/dist/lib/node-esm/chunk-X6GV7SMK.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +9 -3
- package/dist/lib/node-esm/index.mjs.map +1 -1
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/testing/index.mjs +78 -185
- package/dist/lib/node-esm/testing/index.mjs.map +4 -4
- package/dist/types/src/components/Card/Card.d.ts +2 -1
- package/dist/types/src/components/Card/Card.d.ts.map +1 -1
- package/dist/types/src/components/Focus/Focus.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Mosaic.d.ts +8 -1
- package/dist/types/src/components/Mosaic/Mosaic.d.ts.map +1 -1
- package/dist/types/src/components/Scrollable/Scrollable.d.ts +11 -4
- package/dist/types/src/components/Scrollable/Scrollable.d.ts.map +1 -1
- package/dist/types/src/components/Scrollable/Scrollable.stories.d.ts +6 -4
- package/dist/types/src/components/Scrollable/Scrollable.stories.d.ts.map +1 -1
- package/dist/types/src/components/Stack/Stack.d.ts +4 -6
- package/dist/types/src/components/Stack/Stack.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/testing/Board.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +22 -22
- package/src/components/Card/Card.tsx +25 -2
- package/src/components/Focus/Focus.tsx +2 -0
- package/src/components/Mosaic/Mosaic.tsx +32 -33
- package/src/components/Scrollable/Scrollable.stories.tsx +34 -8
- package/src/components/Scrollable/Scrollable.tsx +7 -18
- package/src/components/Stack/Stack.stories.tsx +8 -8
- package/src/components/Stack/Stack.tsx +10 -10
- package/src/index.ts +1 -0
- package/src/testing/Board.tsx +11 -11
- package/src/testing/Virtualizer.stories.tsx +3 -3
- package/dist/lib/browser/chunk-QKMUWO5X.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-BYUYHEAX.mjs.map +0 -7
|
@@ -4,136 +4,27 @@ import {
|
|
|
4
4
|
Focus,
|
|
5
5
|
Mosaic,
|
|
6
6
|
styles3 as styles,
|
|
7
|
-
|
|
7
|
+
useContainerDebug,
|
|
8
|
+
useEventHandlerAdapter,
|
|
8
9
|
useRootContext
|
|
9
|
-
} from "../chunk-
|
|
10
|
-
|
|
11
|
-
// src/testing/decorator.tsx
|
|
12
|
-
import React2 from "react";
|
|
13
|
-
|
|
14
|
-
// src/hooks/useContainerDebug.tsx
|
|
15
|
-
import React, { forwardRef, useMemo, useRef } from "react";
|
|
16
|
-
import { createPortal } from "react-dom";
|
|
17
|
-
import { Json } from "@dxos/react-ui-syntax-highlighter";
|
|
18
|
-
import { mx } from "@dxos/ui-theme";
|
|
19
|
-
var useContainerDebug = (debug) => {
|
|
20
|
-
const debugRef = useRef(null);
|
|
21
|
-
return useMemo(() => {
|
|
22
|
-
if (!debug) {
|
|
23
|
-
return [
|
|
24
|
-
() => null,
|
|
25
|
-
void 0
|
|
26
|
-
];
|
|
27
|
-
}
|
|
28
|
-
return [
|
|
29
|
-
({ classNames }) => /* @__PURE__ */ React.createElement("div", {
|
|
30
|
-
role: "none",
|
|
31
|
-
className: mx("overflow-hidden", classNames),
|
|
32
|
-
ref: debugRef
|
|
33
|
-
}),
|
|
34
|
-
() => debugRef.current && /* @__PURE__ */ createPortal(/* @__PURE__ */ React.createElement(ContainerInfo, null), debugRef.current)
|
|
35
|
-
];
|
|
36
|
-
}, [
|
|
37
|
-
debug,
|
|
38
|
-
debugRef
|
|
39
|
-
]);
|
|
40
|
-
};
|
|
41
|
-
var ContainerInfo = /* @__PURE__ */ forwardRef(({ classNames }, forwardedRef) => {
|
|
42
|
-
const { id, state, activeLocation, scrolling } = useContainerContext(ContainerInfo.displayName);
|
|
43
|
-
const counter = useRef(0);
|
|
44
|
-
return /* @__PURE__ */ React.createElement(Json, {
|
|
45
|
-
data: {
|
|
46
|
-
id,
|
|
47
|
-
activeLocation,
|
|
48
|
-
scrolling,
|
|
49
|
-
state,
|
|
50
|
-
count: counter.current++
|
|
51
|
-
},
|
|
52
|
-
classNames: mx("text-xs", classNames),
|
|
53
|
-
ref: forwardedRef
|
|
54
|
-
});
|
|
55
|
-
});
|
|
56
|
-
ContainerInfo.displayName = "ContainerInfo";
|
|
57
|
-
|
|
58
|
-
// src/hooks/useEventHandlerAdapter.ts
|
|
59
|
-
import { useMemo as useMemo2 } from "react";
|
|
60
|
-
import { log } from "@dxos/log";
|
|
61
|
-
import { arrayMove } from "@dxos/util";
|
|
62
|
-
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/hooks/useEventHandlerAdapter.ts";
|
|
63
|
-
var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) => {
|
|
64
|
-
return useMemo2(() => ({
|
|
65
|
-
...props,
|
|
66
|
-
onTake: ({ source }, cb) => {
|
|
67
|
-
log.info("onTake", {
|
|
68
|
-
source
|
|
69
|
-
}, {
|
|
70
|
-
F: __dxlog_file,
|
|
71
|
-
L: 58,
|
|
72
|
-
S: void 0,
|
|
73
|
-
C: (f, a) => f(...a)
|
|
74
|
-
});
|
|
75
|
-
const mutate = (items2) => {
|
|
76
|
-
const from = items2.findIndex((item) => getId(item) === source.id);
|
|
77
|
-
if (from !== -1) {
|
|
78
|
-
items2.splice(from, 1);
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
if (onChange) {
|
|
82
|
-
onChange(mutate);
|
|
83
|
-
} else {
|
|
84
|
-
mutate(items);
|
|
85
|
-
}
|
|
86
|
-
void cb(source.data);
|
|
87
|
-
},
|
|
88
|
-
onDrop: ({ source, target }) => {
|
|
89
|
-
const to = target?.type === "tile" || target?.type === "placeholder" ? target.location : -1;
|
|
90
|
-
log.info("onDrop", {
|
|
91
|
-
source,
|
|
92
|
-
target,
|
|
93
|
-
to
|
|
94
|
-
}, {
|
|
95
|
-
F: __dxlog_file,
|
|
96
|
-
L: 76,
|
|
97
|
-
S: void 0,
|
|
98
|
-
C: (f, a) => f(...a)
|
|
99
|
-
});
|
|
100
|
-
const mutate = (items2) => {
|
|
101
|
-
const from = items2.findIndex((item) => getId(item) === source.id);
|
|
102
|
-
if (to !== -1) {
|
|
103
|
-
if (from !== -1) {
|
|
104
|
-
arrayMove(items2, from, to);
|
|
105
|
-
} else {
|
|
106
|
-
items2.splice(to, 0, make(get(source.data)));
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
if (onChange) {
|
|
111
|
-
onChange(mutate);
|
|
112
|
-
} else {
|
|
113
|
-
mutate(items);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}), [
|
|
117
|
-
items,
|
|
118
|
-
onChange
|
|
119
|
-
]);
|
|
120
|
-
};
|
|
10
|
+
} from "../chunk-X6GV7SMK.mjs";
|
|
121
11
|
|
|
122
12
|
// src/testing/decorator.tsx
|
|
13
|
+
import React from "react";
|
|
123
14
|
var withMosaic = () => {
|
|
124
|
-
return (Story) => /* @__PURE__ */
|
|
15
|
+
return (Story) => /* @__PURE__ */ React.createElement(Mosaic.Root, null, /* @__PURE__ */ React.createElement(Story, null));
|
|
125
16
|
};
|
|
126
17
|
|
|
127
18
|
// src/testing/Board.tsx
|
|
128
19
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
129
20
|
import * as Schema from "effect/Schema";
|
|
130
|
-
import
|
|
21
|
+
import React2, { forwardRef, useMemo, useRef, useState } from "react";
|
|
131
22
|
import { Obj, Ref, Type } from "@dxos/echo";
|
|
132
23
|
import { ObjectId } from "@dxos/keys";
|
|
133
24
|
import { useObject } from "@dxos/react-client/echo";
|
|
134
25
|
import { Tag } from "@dxos/react-ui";
|
|
135
|
-
import { Json
|
|
136
|
-
import { getHashStyles, mx
|
|
26
|
+
import { Json } from "@dxos/react-ui-syntax-highlighter";
|
|
27
|
+
import { getHashStyles, mx } from "@dxos/ui-theme";
|
|
137
28
|
var TestItem = Schema.Struct({
|
|
138
29
|
name: Schema.String,
|
|
139
30
|
description: Schema.optional(Schema.String),
|
|
@@ -149,9 +40,9 @@ var TestColumn = Schema.Struct({
|
|
|
149
40
|
typename: "example.com/type/Column",
|
|
150
41
|
version: "0.1.0"
|
|
151
42
|
}));
|
|
152
|
-
var Root = /* @__PURE__ */
|
|
43
|
+
var Root = /* @__PURE__ */ forwardRef(({ id, columns, debug }, forwardedRef) => {
|
|
153
44
|
const [DebugInfo, debugHandler] = useContainerDebug(debug);
|
|
154
|
-
const
|
|
45
|
+
const [viewport, setViewport] = useState(null);
|
|
155
46
|
const eventHandler = useEventHandlerAdapter({
|
|
156
47
|
id,
|
|
157
48
|
items: columns,
|
|
@@ -160,37 +51,37 @@ var Root = /* @__PURE__ */ forwardRef2(({ id, columns, debug }, forwardedRef) =>
|
|
|
160
51
|
make: (object) => object,
|
|
161
52
|
canDrop: ({ source }) => Obj.instanceOf(TestColumn, source.data)
|
|
162
53
|
});
|
|
163
|
-
return /* @__PURE__ */
|
|
54
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
164
55
|
role: "none",
|
|
165
|
-
className:
|
|
56
|
+
className: mx("plb-2 grid bs-full is-full overflow-hidden", debug && "grid-cols-[1fr_20rem] gap-2"),
|
|
166
57
|
ref: forwardedRef
|
|
167
|
-
}, /* @__PURE__ */
|
|
58
|
+
}, /* @__PURE__ */ React2.createElement(Focus.Group, {
|
|
168
59
|
asChild: true,
|
|
169
60
|
axis: "horizontal"
|
|
170
|
-
}, /* @__PURE__ */
|
|
61
|
+
}, /* @__PURE__ */ React2.createElement(Mosaic.Container, {
|
|
171
62
|
asChild: true,
|
|
172
|
-
axis: "horizontal",
|
|
173
63
|
withFocus: true,
|
|
174
|
-
|
|
64
|
+
axis: "horizontal",
|
|
65
|
+
autoScroll: viewport,
|
|
175
66
|
eventHandler,
|
|
176
67
|
debug: debugHandler
|
|
177
|
-
}, /* @__PURE__ */
|
|
68
|
+
}, /* @__PURE__ */ React2.createElement(Mosaic.Viewport, {
|
|
178
69
|
axis: "horizontal",
|
|
179
70
|
padding: true,
|
|
180
|
-
viewportRef
|
|
181
|
-
}, /* @__PURE__ */
|
|
71
|
+
viewportRef: setViewport
|
|
72
|
+
}, /* @__PURE__ */ React2.createElement(Mosaic.Stack, {
|
|
182
73
|
axis: "horizontal",
|
|
183
74
|
items: columns,
|
|
184
75
|
getId: (item) => item.id,
|
|
185
76
|
Tile: Column,
|
|
186
77
|
debug
|
|
187
|
-
})))), /* @__PURE__ */
|
|
78
|
+
})))), /* @__PURE__ */ React2.createElement(DebugInfo, null));
|
|
188
79
|
});
|
|
189
|
-
var Column = /* @__PURE__ */
|
|
80
|
+
var Column = /* @__PURE__ */ forwardRef(({ classNames, location, data, debug }, forwardedRef) => {
|
|
190
81
|
const [column, updateColumn] = useObject(data);
|
|
191
82
|
const [DebugInfo, debugHandler] = useContainerDebug(debug);
|
|
192
|
-
const dragHandleRef =
|
|
193
|
-
const
|
|
83
|
+
const dragHandleRef = useRef(null);
|
|
84
|
+
const [viewport, setViewport] = useState(null);
|
|
194
85
|
const eventHandler = useEventHandlerAdapter({
|
|
195
86
|
id: data.id,
|
|
196
87
|
items: column.items,
|
|
@@ -200,7 +91,7 @@ var Column = /* @__PURE__ */ forwardRef2(({ classNames, location, data, debug },
|
|
|
200
91
|
canDrop: ({ source }) => Obj.instanceOf(TestItem, source.data.target),
|
|
201
92
|
onChange: (mutator) => updateColumn((column2) => mutator(column2.items))
|
|
202
93
|
});
|
|
203
|
-
const menuItems =
|
|
94
|
+
const menuItems = useMemo(() => [
|
|
204
95
|
{
|
|
205
96
|
label: "Delete",
|
|
206
97
|
onClick: (obj) => {
|
|
@@ -215,104 +106,106 @@ var Column = /* @__PURE__ */ forwardRef2(({ classNames, location, data, debug },
|
|
|
215
106
|
], [
|
|
216
107
|
updateColumn
|
|
217
108
|
]);
|
|
218
|
-
return /* @__PURE__ */
|
|
109
|
+
return /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
|
|
219
110
|
asChild: true,
|
|
220
111
|
dragHandle: dragHandleRef.current,
|
|
221
112
|
location,
|
|
222
113
|
id: data.id,
|
|
223
114
|
data,
|
|
224
115
|
debug
|
|
225
|
-
}, /* @__PURE__ */
|
|
116
|
+
}, /* @__PURE__ */ React2.createElement(Focus.Group, {
|
|
226
117
|
asChild: true
|
|
227
|
-
}, /* @__PURE__ */
|
|
228
|
-
className:
|
|
118
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
119
|
+
className: mx("grid bs-full card-default-width overflow-hidden bg-deckSurface", debug ? "grid-rows-[min-content_1fr_20rem]" : "grid-rows-[min-content_1fr_min-content]", classNames),
|
|
229
120
|
ref: forwardedRef
|
|
230
|
-
}, /* @__PURE__ */
|
|
121
|
+
}, /* @__PURE__ */ React2.createElement(Card.Toolbar, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
|
|
231
122
|
ref: dragHandleRef
|
|
232
|
-
}), /* @__PURE__ */
|
|
123
|
+
}), /* @__PURE__ */ React2.createElement(Card.Title, null, column.id), /* @__PURE__ */ React2.createElement(Card.Menu, {
|
|
233
124
|
items: []
|
|
234
|
-
})), /* @__PURE__ */
|
|
125
|
+
})), /* @__PURE__ */ React2.createElement(Card.Context, {
|
|
235
126
|
value: {
|
|
236
127
|
menuItems
|
|
237
128
|
}
|
|
238
|
-
}, /* @__PURE__ */
|
|
129
|
+
}, /* @__PURE__ */ React2.createElement(Mosaic.Container, {
|
|
239
130
|
asChild: true,
|
|
240
|
-
axis: "vertical",
|
|
241
131
|
withFocus: true,
|
|
242
|
-
|
|
132
|
+
axis: "vertical",
|
|
133
|
+
autoScroll: viewport,
|
|
243
134
|
eventHandler,
|
|
244
135
|
debug: debugHandler
|
|
245
|
-
}, /* @__PURE__ */
|
|
136
|
+
}, /* @__PURE__ */ React2.createElement(Mosaic.Viewport, {
|
|
246
137
|
axis: "vertical",
|
|
247
138
|
padding: true,
|
|
248
|
-
viewportRef
|
|
249
|
-
}, /* @__PURE__ */
|
|
139
|
+
viewportRef: setViewport
|
|
140
|
+
}, /* @__PURE__ */ React2.createElement(Mosaic.Stack, {
|
|
250
141
|
axis: "vertical",
|
|
251
142
|
items: column.items,
|
|
252
143
|
getId: (data2) => data2.dxn.toString(),
|
|
253
144
|
Tile: Item
|
|
254
|
-
})))), /* @__PURE__ */
|
|
145
|
+
})))), /* @__PURE__ */ React2.createElement("div", {
|
|
146
|
+
role: "none"
|
|
147
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
255
148
|
className: "grow flex p-1 justify-center text-xs"
|
|
256
|
-
}, column.items.length), /* @__PURE__ */
|
|
149
|
+
}, column.items.length), /* @__PURE__ */ React2.createElement(DebugInfo, null)))));
|
|
257
150
|
});
|
|
258
151
|
Column.displayName = "Column";
|
|
259
|
-
var Item = /* @__PURE__ */
|
|
260
|
-
const rootRef =
|
|
152
|
+
var Item = /* @__PURE__ */ forwardRef(({ classNames, data: ref, location, debug }, forwardedRef) => {
|
|
153
|
+
const rootRef = useRef(null);
|
|
261
154
|
const composedRef = useComposedRefs(rootRef, forwardedRef);
|
|
262
|
-
const dragHandleRef =
|
|
155
|
+
const dragHandleRef = useRef(null);
|
|
263
156
|
const object = ref.target;
|
|
264
157
|
if (!object) {
|
|
265
158
|
return null;
|
|
266
159
|
}
|
|
267
|
-
return /* @__PURE__ */
|
|
160
|
+
return /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
|
|
268
161
|
asChild: true,
|
|
269
162
|
dragHandle: dragHandleRef.current,
|
|
270
163
|
id: ref.dxn.toString(),
|
|
271
164
|
data: ref,
|
|
272
165
|
location,
|
|
273
166
|
debug
|
|
274
|
-
}, /* @__PURE__ */
|
|
167
|
+
}, /* @__PURE__ */ React2.createElement(Focus.Group, {
|
|
275
168
|
asChild: true
|
|
276
|
-
}, /* @__PURE__ */
|
|
169
|
+
}, /* @__PURE__ */ React2.createElement(Card.Root, {
|
|
277
170
|
classNames,
|
|
278
171
|
onClick: () => rootRef.current?.focus(),
|
|
279
172
|
ref: composedRef
|
|
280
|
-
}, /* @__PURE__ */
|
|
173
|
+
}, /* @__PURE__ */ React2.createElement(Card.Toolbar, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
|
|
281
174
|
ref: dragHandleRef
|
|
282
|
-
}), /* @__PURE__ */
|
|
175
|
+
}), /* @__PURE__ */ React2.createElement(Card.Title, null, object.name), /* @__PURE__ */ React2.createElement(Card.Menu, {
|
|
283
176
|
context: object
|
|
284
|
-
})), /* @__PURE__ */
|
|
177
|
+
})), /* @__PURE__ */ React2.createElement(Card.Row, {
|
|
285
178
|
icon: "ph--note--regular",
|
|
286
179
|
classNames: "text-description"
|
|
287
|
-
}, object.description), /* @__PURE__ */
|
|
180
|
+
}, object.description), /* @__PURE__ */ React2.createElement(Card.Row, {
|
|
288
181
|
icon: "ph--tag--regular"
|
|
289
|
-
}, object.label && /* @__PURE__ */
|
|
182
|
+
}, object.label && /* @__PURE__ */ React2.createElement("div", {
|
|
290
183
|
role: "none",
|
|
291
184
|
className: "flex shrink-0 gap-1 text-xs items-center"
|
|
292
|
-
}, /* @__PURE__ */
|
|
185
|
+
}, /* @__PURE__ */ React2.createElement(Tag, {
|
|
293
186
|
palette: getHashStyles(object.label).hue
|
|
294
187
|
}, object.label))))));
|
|
295
188
|
});
|
|
296
189
|
Item.displayName = "Item";
|
|
297
190
|
var Placeholder = (props) => {
|
|
298
|
-
return /* @__PURE__ */
|
|
191
|
+
return /* @__PURE__ */ React2.createElement(Mosaic.Placeholder, {
|
|
299
192
|
...props,
|
|
300
193
|
classNames: styles.placeholder.root
|
|
301
|
-
}, /* @__PURE__ */
|
|
302
|
-
className:
|
|
194
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
195
|
+
className: mx("flex bs-full border border-dashed border-separator rounded-sm", styles.placeholder.content)
|
|
303
196
|
}));
|
|
304
197
|
};
|
|
305
198
|
Placeholder.displayName = "Placeholder";
|
|
306
|
-
var Debug = /* @__PURE__ */
|
|
199
|
+
var Debug = /* @__PURE__ */ forwardRef(({ classNames }, forwardedRef) => {
|
|
307
200
|
const { containers, dragging } = useRootContext(Debug.displayName);
|
|
308
|
-
const counter =
|
|
309
|
-
return /* @__PURE__ */
|
|
201
|
+
const counter = useRef(0);
|
|
202
|
+
return /* @__PURE__ */ React2.createElement(Json, {
|
|
310
203
|
data: {
|
|
311
204
|
containers,
|
|
312
205
|
dragging,
|
|
313
206
|
count: counter.current++
|
|
314
207
|
},
|
|
315
|
-
classNames:
|
|
208
|
+
classNames: mx("text-xs", classNames),
|
|
316
209
|
ref: forwardedRef
|
|
317
210
|
});
|
|
318
211
|
});
|
|
@@ -327,7 +220,7 @@ var Board = {
|
|
|
327
220
|
|
|
328
221
|
// src/testing/CardContainer.tsx
|
|
329
222
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
330
|
-
import
|
|
223
|
+
import React3 from "react";
|
|
331
224
|
import { Icon, Popover } from "@dxos/react-ui";
|
|
332
225
|
import { ResizeHandle, resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
|
|
333
226
|
var DEFAULT_BLOCK_SIZE = 22;
|
|
@@ -335,25 +228,25 @@ var MIN_BLOCK_SIZE = 8;
|
|
|
335
228
|
var CardContainer = ({ children, icon = "ph--placeholder--regular", role }) => {
|
|
336
229
|
switch (role) {
|
|
337
230
|
case "card--popover":
|
|
338
|
-
return /* @__PURE__ */
|
|
231
|
+
return /* @__PURE__ */ React3.createElement(PopoverCardContainer, {
|
|
339
232
|
icon
|
|
340
233
|
}, children);
|
|
341
234
|
case "card--intrinsic":
|
|
342
235
|
default:
|
|
343
|
-
return /* @__PURE__ */
|
|
236
|
+
return /* @__PURE__ */ React3.createElement(IntrinsicCardContainer, null, children);
|
|
344
237
|
}
|
|
345
238
|
};
|
|
346
239
|
var border = "relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-x-auto";
|
|
347
240
|
var PopoverCardContainer = ({ children, icon = "ph--placeholder--regular" }) => {
|
|
348
|
-
return /* @__PURE__ */
|
|
241
|
+
return /* @__PURE__ */ React3.createElement(Popover.Root, {
|
|
349
242
|
open: true
|
|
350
|
-
}, /* @__PURE__ */
|
|
243
|
+
}, /* @__PURE__ */ React3.createElement(Popover.Content, {
|
|
351
244
|
onOpenAutoFocus: (event) => event.preventDefault()
|
|
352
|
-
}, /* @__PURE__ */
|
|
245
|
+
}, /* @__PURE__ */ React3.createElement(Popover.Viewport, {
|
|
353
246
|
classNames: "popover-card-width"
|
|
354
|
-
}, children), /* @__PURE__ */
|
|
247
|
+
}, children), /* @__PURE__ */ React3.createElement(Popover.Arrow, null)), /* @__PURE__ */ React3.createElement(Popover.Trigger, {
|
|
355
248
|
asChild: true
|
|
356
|
-
}, /* @__PURE__ */
|
|
249
|
+
}, /* @__PURE__ */ React3.createElement(Icon, {
|
|
357
250
|
icon,
|
|
358
251
|
size: 5
|
|
359
252
|
})));
|
|
@@ -364,11 +257,11 @@ var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeCha
|
|
|
364
257
|
defaultProp: defaultSize,
|
|
365
258
|
onChange: onSizeChange
|
|
366
259
|
});
|
|
367
|
-
return /* @__PURE__ */
|
|
260
|
+
return /* @__PURE__ */ React3.createElement("div", {
|
|
368
261
|
className: border,
|
|
369
262
|
style: sizeStyle(size, "horizontal"),
|
|
370
263
|
...resizeAttributes
|
|
371
|
-
}, children, /* @__PURE__ */
|
|
264
|
+
}, children, /* @__PURE__ */ React3.createElement(ResizeHandle, {
|
|
372
265
|
side: "inline-end",
|
|
373
266
|
fallbackSize: DEFAULT_BLOCK_SIZE,
|
|
374
267
|
minSize: MIN_BLOCK_SIZE,
|
|
@@ -378,25 +271,25 @@ var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeCha
|
|
|
378
271
|
};
|
|
379
272
|
|
|
380
273
|
// src/testing/DefaultStackTile.tsx
|
|
381
|
-
import
|
|
274
|
+
import React4, { useRef as useRef2, useState as useState2 } from "react";
|
|
382
275
|
import { Obj as Obj2 } from "@dxos/echo";
|
|
383
|
-
import { Json as
|
|
276
|
+
import { Json as Json2 } from "@dxos/react-ui-syntax-highlighter";
|
|
384
277
|
var DefaultStackTile = (props) => {
|
|
385
|
-
const dragHandleRef =
|
|
386
|
-
const [open, setOpen] =
|
|
387
|
-
return /* @__PURE__ */
|
|
278
|
+
const dragHandleRef = useRef2(null);
|
|
279
|
+
const [open, setOpen] = useState2(false);
|
|
280
|
+
return /* @__PURE__ */ React4.createElement(Mosaic.Tile, {
|
|
388
281
|
...props,
|
|
389
282
|
className: "border border-separator rounded-sm font-mono"
|
|
390
|
-
}, /* @__PURE__ */
|
|
283
|
+
}, /* @__PURE__ */ React4.createElement(Card.Toolbar, null, /* @__PURE__ */ React4.createElement(Card.DragHandle, {
|
|
391
284
|
ref: dragHandleRef
|
|
392
|
-
}), /* @__PURE__ */
|
|
285
|
+
}), /* @__PURE__ */ React4.createElement(Card.Title, null, Obj2.getLabel(props.data) ?? props.data.id), /* @__PURE__ */ React4.createElement(Card.Menu, {
|
|
393
286
|
items: [
|
|
394
287
|
{
|
|
395
288
|
label: open ? "Hide details" : "Show details",
|
|
396
289
|
onClick: () => setOpen((open2) => !open2)
|
|
397
290
|
}
|
|
398
291
|
]
|
|
399
|
-
})), open && /* @__PURE__ */
|
|
292
|
+
})), open && /* @__PURE__ */ React4.createElement(Card.Row, null, /* @__PURE__ */ React4.createElement(Json2, {
|
|
400
293
|
data: props.data,
|
|
401
294
|
classNames: "text-xs"
|
|
402
295
|
})));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/testing/decorator.tsx", "../../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n return (Story) => (\n <Mosaic.Root>\n <Story />\n </Mosaic.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type FC, type ReactNode, forwardRef, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\nimport { mx } from '@dxos/ui-theme';\n\nimport { useMosaicContainer } from '../components';\n\nexport type UseContainerDebug = [FC<ThemedClassName>, (() => ReactNode) | undefined];\n\n/**\n * Hook that returns a component to be rendered in the container's viewport (within the context),\n * and a component that creates a portal in the container's debug area.\n */\nexport const useContainerDebug = (debug?: boolean): UseContainerDebug => {\n const debugRef = useRef<HTMLDivElement | null>(null);\n return useMemo(() => {\n if (!debug) {\n return [() => null, undefined];\n }\n\n return [\n ({ classNames }) => <div role='none' className={mx('overflow-hidden', classNames)} ref={debugRef} />,\n () => debugRef.current && createPortal(<ContainerInfo />, debugRef.current),\n ];\n }, [debug, debugRef]);\n};\n\nconst ContainerInfo = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {\n const { id, state, activeLocation, scrolling } = useMosaicContainer(ContainerInfo.displayName!);\n const counter = useRef(0);\n return (\n <Json\n data={{ id, activeLocation, scrolling, state, count: counter.current++ }}\n classNames={mx('text-xs', classNames)}\n ref={forwardedRef}\n />\n );\n});\n\nContainerInfo.displayName = 'ContainerInfo';\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\nimport { type Obj } from '@dxos/echo';\nimport { log } from '@dxos/log';\nimport { arrayMove } from '@dxos/util';\n\nimport { type GetId, type MosaicEventHandler } from '../components';\n\nexport type UseEventHandlerProps<TItem = any, TObject = any> = Pick<MosaicEventHandler<TItem>, 'id' | 'canDrop'> & {\n /**\n * The items to manage.\n */\n items: TItem[];\n\n /**\n * ID getter.\n */\n getId: GetId<TItem>;\n\n /**\n * Extracts the object from an item.\n */\n get: (item: TItem) => TObject;\n\n /**\n * Creates a new item from the dragged object.\n */\n make: (object: TObject) => TItem;\n\n /**\n * Optional change callback for wrapping mutations in Obj.change style.\n * When provided, all array mutations will be wrapped in this callback.\n * When not provided, mutations happen directly on the items array.\n */\n onChange?: (mutator: (items: TItem[]) => void) => void;\n};\n\n/**\n * Returns a handler for the given items.\n * NOTE: This supports arrays of objects, or arrays of refs to objects.\n */\nexport const useEventHandlerAdapter = <TItem = any, TObject extends Obj.Unknown = Obj.Unknown>({\n items,\n getId,\n get,\n make,\n onChange,\n ...props\n}: UseEventHandlerProps<TItem, TObject>): MosaicEventHandler<TItem> => {\n return useMemo<MosaicEventHandler<TItem>>(\n () => ({\n ...props,\n onTake: ({ source }, cb) => {\n log.info('onTake', { source });\n const mutate = (items: TItem[]) => {\n const from = items.findIndex((item) => getId(item) === source.id);\n if (from !== -1) {\n items.splice(from, 1);\n }\n };\n\n if (onChange) {\n onChange(mutate);\n } else {\n mutate(items);\n }\n\n void cb(source.data);\n },\n onDrop: ({ source, target }) => {\n const to = target?.type === 'tile' || target?.type === 'placeholder' ? target.location : -1;\n log.info('onDrop', { source, target, to });\n\n const mutate = (items: TItem[]) => {\n const from = items.findIndex((item) => getId(item) === source.id);\n if (to !== -1) {\n if (from !== -1) {\n arrayMove(items, from, to);\n } else {\n // TODO(burdon): This should be the responsibility of the source container.\n items.splice(to, 0, make(get(source.data)));\n }\n }\n };\n\n if (onChange) {\n onChange(mutate);\n } else {\n mutate(items);\n }\n },\n }),\n [items, onChange],\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as Schema from 'effect/Schema';\nimport React, { forwardRef, useMemo, useRef } from 'react';\n\nimport { Obj, Ref, Type } from '@dxos/echo';\nimport { ObjectId } from '@dxos/keys';\nimport { useObject } from '@dxos/react-client/echo';\nimport { Tag, type ThemedClassName } from '@dxos/react-ui';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\nimport { getHashStyles, mx } from '@dxos/ui-theme';\n\nimport {\n Card,\n type CardMenuProps,\n Focus,\n Mosaic,\n type MosaicTileProps,\n type MosiacPlaceholderProps,\n mosaicStyles,\n useMosaic,\n} from '../components';\nimport { useContainerDebug, useEventHandlerAdapter } from '../hooks';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n name: Schema.String,\n description: Schema.optional(Schema.String),\n label: Schema.optional(Schema.String),\n}).pipe(\n Type.object({\n typename: 'example.com/type/Item',\n version: '0.1.0',\n }),\n);\n\nexport interface TestItem extends Schema.Schema.Type<typeof TestItem> {}\n\nexport const TestColumn = Schema.Struct({\n id: ObjectId,\n items: Schema.mutable(Schema.Array(Type.Ref(TestItem))),\n}).pipe(\n Type.object({\n typename: 'example.com/type/Column',\n version: '0.1.0',\n }),\n);\n\nexport interface TestColumn extends Schema.Schema.Type<typeof TestColumn> {}\n\n//\n// Root\n//\n\ntype RootProps = {\n id: string;\n columns: TestColumn[];\n debug?: boolean;\n};\n\nconst Root = forwardRef<HTMLDivElement, RootProps>(({ id, columns, debug }, forwardedRef) => {\n const [DebugInfo, debugHandler] = useContainerDebug(debug);\n const viewportRef = useRef<HTMLElement | null>(null);\n\n const eventHandler = useEventHandlerAdapter({\n id,\n items: columns,\n getId: (data) => data.id,\n get: (data) => data,\n make: (object) => object,\n canDrop: ({ source }) => Obj.instanceOf(TestColumn, source.data),\n });\n\n return (\n <div\n role='none'\n className={mx('p-2 grid bs-full is-full overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}\n ref={forwardedRef}\n >\n <Focus.Group asChild axis='horizontal'>\n <Mosaic.Container\n asChild\n axis='horizontal'\n withFocus\n autoScroll={viewportRef.current}\n eventHandler={eventHandler}\n debug={debugHandler}\n >\n <Mosaic.Viewport axis='horizontal' padding viewportRef={viewportRef}>\n <Mosaic.Stack axis='horizontal' items={columns} getId={(item) => item.id} Tile={Column} debug={debug} />\n </Mosaic.Viewport>\n </Mosaic.Container>\n </Focus.Group>\n <DebugInfo />\n </div>\n );\n});\n\n//\n// Column\n//\n\ntype ColumnProps = Pick<MosaicTileProps<TestColumn>, 'classNames' | 'location' | 'data' | 'debug'>;\n\nconst Column = forwardRef<HTMLDivElement, ColumnProps>(({ classNames, location, data, debug }, forwardedRef) => {\n const [column, updateColumn] = useObject(data);\n const [DebugInfo, debugHandler] = useContainerDebug(debug);\n const dragHandleRef = useRef<HTMLButtonElement>(null);\n const viewportRef = useRef<HTMLElement | null>(null);\n const eventHandler = useEventHandlerAdapter<Ref.Unknown>({\n id: data.id,\n items: column.items,\n getId: (data) => data.dxn.toString(),\n get: (data) => data.target!,\n make: (object) => Ref.make(object),\n canDrop: ({ source }) => Obj.instanceOf(TestItem, source.data.target),\n onChange: (mutator) => updateColumn((column) => mutator(column.items)),\n });\n\n // Context menu.\n const menuItems = useMemo<NonNullable<CardMenuProps<TestItem>['items']>>(\n () => [\n {\n label: 'Delete',\n onClick: (obj) => {\n updateColumn((column) => {\n const idx = column.items.findIndex((item) => item.target?.id === obj?.id);\n if (idx !== -1) {\n column.items.splice(idx, 1);\n }\n });\n },\n },\n ],\n [updateColumn],\n );\n\n return (\n <Mosaic.Tile asChild dragHandle={dragHandleRef.current} location={location} id={data.id} data={data} debug={debug}>\n <Focus.Group asChild>\n <div\n className={mx(\n 'grid bs-full card-default-width overflow-hidden bg-deckSurface',\n debug ? 'grid-rows-[min-content_1fr_20rem]' : 'grid-rows-[min-content_1fr_min-content]',\n classNames,\n )}\n ref={forwardedRef}\n >\n <Card.Toolbar>\n <Card.DragHandle ref={dragHandleRef} />\n <Card.Title>{column.id}</Card.Title>\n <Card.Menu items={[]} />\n </Card.Toolbar>\n <Card.Context value={{ menuItems }}>\n <Mosaic.Container\n asChild\n axis='vertical'\n withFocus\n autoScroll={viewportRef.current}\n eventHandler={eventHandler}\n debug={debugHandler}\n >\n <Mosaic.Viewport axis='vertical' padding viewportRef={viewportRef}>\n <Mosaic.Stack axis='vertical' items={column.items} getId={(data) => data.dxn.toString()} Tile={Item} />\n </Mosaic.Viewport>\n </Mosaic.Container>\n </Card.Context>\n <div>\n <div className='grow flex p-1 justify-center text-xs'>{column.items.length}</div>\n <DebugInfo />\n </div>\n </div>\n </Focus.Group>\n </Mosaic.Tile>\n );\n});\n\nColumn.displayName = 'Column';\n\n//\n// Item\n//\n\ntype ItemProps = Pick<MosaicTileProps<Ref.Ref<TestItem>>, 'classNames' | 'location' | 'data' | 'debug'>;\n\nconst Item = forwardRef<HTMLDivElement, ItemProps>(({ classNames, data: ref, location, debug }, forwardedRef) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);\n const dragHandleRef = useRef<HTMLButtonElement>(null);\n const object = ref.target;\n if (!object) {\n return null;\n }\n\n return (\n <Mosaic.Tile\n asChild\n dragHandle={dragHandleRef.current}\n id={ref.dxn.toString()}\n data={ref}\n location={location}\n debug={debug}\n >\n <Focus.Group asChild>\n <Card.Root classNames={classNames} onClick={() => rootRef.current?.focus()} ref={composedRef}>\n <Card.Toolbar>\n <Card.DragHandle ref={dragHandleRef} />\n <Card.Title>{object.name}</Card.Title>\n <Card.Menu context={object} />\n </Card.Toolbar>\n <Card.Row icon='ph--note--regular' classNames='text-description'>\n {object.description}\n </Card.Row>\n <Card.Row icon='ph--tag--regular'>\n {object.label && (\n <div role='none' className='flex shrink-0 gap-1 text-xs items-center'>\n <Tag palette={getHashStyles(object.label).hue}>{object.label}</Tag>\n </div>\n )}\n </Card.Row>\n </Card.Root>\n </Focus.Group>\n </Mosaic.Tile>\n );\n});\n\nItem.displayName = 'Item';\n\n//\n// Placeholder\n//\n\nconst Placeholder = (props: MosiacPlaceholderProps<number>) => {\n return (\n <Mosaic.Placeholder {...props} classNames={mosaicStyles.placeholder.root}>\n <div\n className={mx(\n 'flex bs-full border border-dashed border-separator rounded-sm',\n mosaicStyles.placeholder.content,\n )}\n />\n </Mosaic.Placeholder>\n );\n};\n\nPlaceholder.displayName = 'Placeholder';\n\n//\n// Debug\n//\n\nexport const Debug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {\n const { containers, dragging } = useMosaic(Debug.displayName!);\n const counter = useRef(0);\n return (\n <Json\n data={{ containers, dragging, count: counter.current++ }}\n classNames={mx('text-xs', classNames)}\n ref={forwardedRef}\n />\n );\n});\n\nDebug.displayName = 'Debug';\n\n//\n// Board\n//\n\nexport const Board = { Root, Column, Item, Placeholder, Debug };\n\nexport type { RootProps, ColumnProps, ItemProps };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport const CardContainer = ({\n children,\n icon = 'ph--placeholder--regular',\n role,\n}: PropsWithChildren<{ icon?: string; role?: string }>) => {\n switch (role) {\n case 'card--popover':\n return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;\n case 'card--intrinsic':\n default:\n return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n }\n};\n\nconst border = 'relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-x-auto';\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({ children, icon = 'ph--placeholder--regular' }: PopoverCardContainerProps) => {\n return (\n <Popover.Root open>\n <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Popover.Viewport classNames='popover-card-width'>{children}</Popover.Viewport>\n <Popover.Arrow />\n </Popover.Content>\n <Popover.Trigger asChild>\n <Icon icon={icon} size={5} />\n </Popover.Trigger>\n </Popover.Root>\n );\n};\n\n//\n// Intrinsic card container (size constrained by card).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n defaultSize?: Size;\n size?: Size;\n onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n children,\n defaultSize,\n size: propSize,\n onSizeChange,\n}: IntrinsicCardContainerProps) => {\n const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n prop: propSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n\n return (\n <div className={border} style={sizeStyle(size, 'horizontal')} {...resizeAttributes}>\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_BLOCK_SIZE}\n minSize={MIN_BLOCK_SIZE}\n size={size}\n onSizeChange={setSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Card, Mosaic, type StackTileComponent } from '../components';\n\nexport const DefaultStackTile: StackTileComponent<Obj.Any> = (props) => {\n const dragHandleRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(false);\n return (\n <Mosaic.Tile {...props} className='border border-separator rounded-sm font-mono'>\n <Card.Toolbar>\n <Card.DragHandle ref={dragHandleRef} />\n <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n <Card.Menu\n items={[\n {\n label: open ? 'Hide details' : 'Show details',\n onClick: () => setOpen((open) => !open),\n },\n ]}\n />\n </Card.Toolbar>\n {open && (\n <Card.Row>\n <Json data={props.data} classNames='text-xs' />\n </Card.Row>\n )}\n </Mosaic.Tile>\n );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["React", "
|
|
3
|
+
"sources": ["../../../../src/testing/decorator.tsx", "../../../../src/testing/Board.tsx", "../../../../src/testing/CardContainer.tsx", "../../../../src/testing/DefaultStackTile.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n return (Story) => (\n <Mosaic.Root>\n <Story />\n </Mosaic.Root>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as Schema from 'effect/Schema';\nimport React, { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { Obj, Ref, Type } from '@dxos/echo';\nimport { ObjectId } from '@dxos/keys';\nimport { useObject } from '@dxos/react-client/echo';\nimport { Tag, type ThemedClassName } from '@dxos/react-ui';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\nimport { getHashStyles, mx } from '@dxos/ui-theme';\n\nimport {\n Card,\n type CardMenuProps,\n Focus,\n Mosaic,\n type MosaicTileProps,\n type MosiacPlaceholderProps,\n mosaicStyles,\n useMosaic,\n} from '../components';\nimport { useContainerDebug, useEventHandlerAdapter } from '../hooks';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n name: Schema.String,\n description: Schema.optional(Schema.String),\n label: Schema.optional(Schema.String),\n}).pipe(\n Type.object({\n typename: 'example.com/type/Item',\n version: '0.1.0',\n }),\n);\n\nexport interface TestItem extends Schema.Schema.Type<typeof TestItem> {}\n\nexport const TestColumn = Schema.Struct({\n id: ObjectId,\n items: Schema.mutable(Schema.Array(Type.Ref(TestItem))),\n}).pipe(\n Type.object({\n typename: 'example.com/type/Column',\n version: '0.1.0',\n }),\n);\n\nexport interface TestColumn extends Schema.Schema.Type<typeof TestColumn> {}\n\n//\n// Root\n//\n\ntype RootProps = {\n id: string;\n columns: TestColumn[];\n debug?: boolean;\n};\n\nconst Root = forwardRef<HTMLDivElement, RootProps>(({ id, columns, debug }, forwardedRef) => {\n const [DebugInfo, debugHandler] = useContainerDebug(debug);\n const [viewport, setViewport] = useState<HTMLElement | null>(null);\n\n const eventHandler = useEventHandlerAdapter({\n id,\n items: columns,\n getId: (data) => data.id,\n get: (data) => data,\n make: (object) => object,\n canDrop: ({ source }) => Obj.instanceOf(TestColumn, source.data),\n });\n\n return (\n <div\n role='none'\n className={mx('plb-2 grid bs-full is-full overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}\n ref={forwardedRef}\n >\n <Focus.Group asChild axis='horizontal'>\n <Mosaic.Container\n asChild\n withFocus\n axis='horizontal'\n autoScroll={viewport}\n eventHandler={eventHandler}\n debug={debugHandler}\n >\n <Mosaic.Viewport axis='horizontal' padding viewportRef={setViewport}>\n <Mosaic.Stack axis='horizontal' items={columns} getId={(item) => item.id} Tile={Column} debug={debug} />\n </Mosaic.Viewport>\n </Mosaic.Container>\n </Focus.Group>\n <DebugInfo />\n </div>\n );\n});\n\n//\n// Column\n//\n\ntype ColumnProps = Pick<MosaicTileProps<TestColumn>, 'classNames' | 'location' | 'data' | 'debug'>;\n\nconst Column = forwardRef<HTMLDivElement, ColumnProps>(({ classNames, location, data, debug }, forwardedRef) => {\n const [column, updateColumn] = useObject(data);\n const [DebugInfo, debugHandler] = useContainerDebug(debug);\n const dragHandleRef = useRef<HTMLButtonElement>(null);\n const [viewport, setViewport] = useState<HTMLElement | null>(null);\n const eventHandler = useEventHandlerAdapter<Ref.Unknown>({\n id: data.id,\n items: column.items,\n getId: (data) => data.dxn.toString(),\n get: (data) => data.target!,\n make: (object) => Ref.make(object),\n canDrop: ({ source }) => Obj.instanceOf(TestItem, source.data.target),\n onChange: (mutator) => updateColumn((column) => mutator(column.items)),\n });\n\n // Context menu.\n const menuItems = useMemo<NonNullable<CardMenuProps<TestItem>['items']>>(\n () => [\n {\n label: 'Delete',\n onClick: (obj) => {\n updateColumn((column) => {\n const idx = column.items.findIndex((item) => item.target?.id === obj?.id);\n if (idx !== -1) {\n column.items.splice(idx, 1);\n }\n });\n },\n },\n ],\n [updateColumn],\n );\n\n return (\n <Mosaic.Tile asChild dragHandle={dragHandleRef.current} location={location} id={data.id} data={data} debug={debug}>\n <Focus.Group asChild>\n <div\n className={mx(\n 'grid bs-full card-default-width overflow-hidden bg-deckSurface',\n debug ? 'grid-rows-[min-content_1fr_20rem]' : 'grid-rows-[min-content_1fr_min-content]',\n classNames,\n )}\n ref={forwardedRef}\n >\n <Card.Toolbar>\n <Card.DragHandle ref={dragHandleRef} />\n <Card.Title>{column.id}</Card.Title>\n <Card.Menu items={[]} />\n </Card.Toolbar>\n <Card.Context value={{ menuItems }}>\n <Mosaic.Container\n asChild\n withFocus\n axis='vertical'\n autoScroll={viewport}\n eventHandler={eventHandler}\n debug={debugHandler}\n >\n <Mosaic.Viewport axis='vertical' padding viewportRef={setViewport}>\n <Mosaic.Stack axis='vertical' items={column.items} getId={(data) => data.dxn.toString()} Tile={Item} />\n </Mosaic.Viewport>\n </Mosaic.Container>\n </Card.Context>\n <div role='none'>\n <div className='grow flex p-1 justify-center text-xs'>{column.items.length}</div>\n <DebugInfo />\n </div>\n </div>\n </Focus.Group>\n </Mosaic.Tile>\n );\n});\n\nColumn.displayName = 'Column';\n\n//\n// Item\n//\n\ntype ItemProps = Pick<MosaicTileProps<Ref.Ref<TestItem>>, 'classNames' | 'location' | 'data' | 'debug'>;\n\nconst Item = forwardRef<HTMLDivElement, ItemProps>(({ classNames, data: ref, location, debug }, forwardedRef) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);\n const dragHandleRef = useRef<HTMLButtonElement>(null);\n const object = ref.target;\n if (!object) {\n return null;\n }\n\n return (\n <Mosaic.Tile\n asChild\n dragHandle={dragHandleRef.current}\n id={ref.dxn.toString()}\n data={ref}\n location={location}\n debug={debug}\n >\n <Focus.Group asChild>\n <Card.Root classNames={classNames} onClick={() => rootRef.current?.focus()} ref={composedRef}>\n <Card.Toolbar>\n <Card.DragHandle ref={dragHandleRef} />\n <Card.Title>{object.name}</Card.Title>\n <Card.Menu context={object} />\n </Card.Toolbar>\n <Card.Row icon='ph--note--regular' classNames='text-description'>\n {object.description}\n </Card.Row>\n <Card.Row icon='ph--tag--regular'>\n {object.label && (\n <div role='none' className='flex shrink-0 gap-1 text-xs items-center'>\n <Tag palette={getHashStyles(object.label).hue}>{object.label}</Tag>\n </div>\n )}\n </Card.Row>\n </Card.Root>\n </Focus.Group>\n </Mosaic.Tile>\n );\n});\n\nItem.displayName = 'Item';\n\n//\n// Placeholder\n//\n\nconst Placeholder = (props: MosiacPlaceholderProps<number>) => {\n return (\n <Mosaic.Placeholder {...props} classNames={mosaicStyles.placeholder.root}>\n <div\n className={mx(\n 'flex bs-full border border-dashed border-separator rounded-sm',\n mosaicStyles.placeholder.content,\n )}\n />\n </Mosaic.Placeholder>\n );\n};\n\nPlaceholder.displayName = 'Placeholder';\n\n//\n// Debug\n//\n\nexport const Debug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {\n const { containers, dragging } = useMosaic(Debug.displayName!);\n const counter = useRef(0);\n return (\n <Json\n data={{ containers, dragging, count: counter.current++ }}\n classNames={mx('text-xs', classNames)}\n ref={forwardedRef}\n />\n );\n});\n\nDebug.displayName = 'Debug';\n\n//\n// Board\n//\n\nexport const Board = { Root, Column, Item, Placeholder, Debug };\n\nexport type { RootProps, ColumnProps, ItemProps };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport const CardContainer = ({\n children,\n icon = 'ph--placeholder--regular',\n role,\n}: PropsWithChildren<{ icon?: string; role?: string }>) => {\n switch (role) {\n case 'card--popover':\n return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;\n case 'card--intrinsic':\n default:\n return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n }\n};\n\nconst border = 'relative border border-dashed border-subduedSeparator p-4 rounded-lg overflow-x-auto';\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({ children, icon = 'ph--placeholder--regular' }: PopoverCardContainerProps) => {\n return (\n <Popover.Root open>\n <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>\n <Popover.Viewport classNames='popover-card-width'>{children}</Popover.Viewport>\n <Popover.Arrow />\n </Popover.Content>\n <Popover.Trigger asChild>\n <Icon icon={icon} size={5} />\n </Popover.Trigger>\n </Popover.Root>\n );\n};\n\n//\n// Intrinsic card container (size constrained by card).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n defaultSize?: Size;\n size?: Size;\n onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n children,\n defaultSize,\n size: propSize,\n onSizeChange,\n}: IntrinsicCardContainerProps) => {\n const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n prop: propSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n\n return (\n <div className={border} style={sizeStyle(size, 'horizontal')} {...resizeAttributes}>\n {children}\n <ResizeHandle\n side='inline-end'\n fallbackSize={DEFAULT_BLOCK_SIZE}\n minSize={MIN_BLOCK_SIZE}\n size={size}\n onSizeChange={setSize}\n />\n </div>\n );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Card, Mosaic, type StackTileComponent } from '../components';\n\nexport const DefaultStackTile: StackTileComponent<Obj.Any> = (props) => {\n const dragHandleRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(false);\n return (\n <Mosaic.Tile {...props} className='border border-separator rounded-sm font-mono'>\n <Card.Toolbar>\n <Card.DragHandle ref={dragHandleRef} />\n <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n <Card.Menu\n items={[\n {\n label: open ? 'Hide details' : 'Show details',\n onClick: () => setOpen((open) => !open),\n },\n ]}\n />\n </Card.Toolbar>\n {open && (\n <Card.Row>\n <Json data={props.data} classNames='text-xs' />\n </Card.Row>\n )}\n </Mosaic.Tile>\n );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "withMosaic", "Story", "Mosaic", "Root", "useComposedRefs", "Schema", "React", "forwardRef", "useMemo", "useRef", "useState", "Obj", "Ref", "Type", "ObjectId", "useObject", "Tag", "Json", "getHashStyles", "mx", "TestItem", "Struct", "name", "String", "description", "optional", "label", "pipe", "Type", "object", "typename", "version", "TestColumn", "id", "ObjectId", "items", "mutable", "Array", "Ref", "Root", "forwardRef", "columns", "debug", "forwardedRef", "DebugInfo", "debugHandler", "useContainerDebug", "viewport", "setViewport", "useState", "eventHandler", "useEventHandlerAdapter", "getId", "data", "get", "make", "canDrop", "source", "Obj", "instanceOf", "React", "div", "role", "className", "mx", "ref", "Focus", "Group", "asChild", "axis", "Mosaic", "Container", "withFocus", "autoScroll", "Viewport", "padding", "viewportRef", "Stack", "item", "Tile", "Column", "classNames", "location", "column", "updateColumn", "useObject", "dragHandleRef", "useRef", "dxn", "toString", "target", "onChange", "mutator", "menuItems", "useMemo", "onClick", "obj", "idx", "findIndex", "splice", "dragHandle", "current", "Card", "Toolbar", "DragHandle", "Title", "Menu", "Context", "value", "Item", "length", "displayName", "rootRef", "composedRef", "useComposedRefs", "focus", "context", "Row", "icon", "Tag", "palette", "getHashStyles", "hue", "Placeholder", "props", "mosaicStyles", "placeholder", "root", "content", "Debug", "containers", "dragging", "useMosaic", "counter", "Json", "count", "Board", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "icon", "role", "React", "PopoverCardContainer", "IntrinsicCardContainer", "border", "Popover", "Root", "open", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "Trigger", "asChild", "Icon", "size", "defaultSize", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "div", "className", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "useRef", "useState", "Obj", "Json", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "React", "Mosaic", "Tile", "className", "Card", "Toolbar", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Menu", "items", "label", "onClick", "Row", "Json", "classNames", "displayName"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
1
|
+
import React, { type ComponentPropsWithoutRef, type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
2
2
|
import { type Density, type IconProps, type ThemedClassName, type ToolbarRootProps } from '@dxos/react-ui';
|
|
3
3
|
type CardSharedProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
|
|
4
4
|
asChild?: boolean;
|
|
@@ -84,6 +84,7 @@ export declare const Card: {
|
|
|
84
84
|
Icon: ({ toolbar, ...props }: IconProps & {
|
|
85
85
|
toolbar?: boolean;
|
|
86
86
|
}) => React.JSX.Element;
|
|
87
|
+
IconBlock: ({ classNames, children, role, ...props }: ThemedClassName<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>) => React.JSX.Element;
|
|
87
88
|
Content: React.ForwardRefExoticComponent<{
|
|
88
89
|
children?: React.ReactNode | undefined;
|
|
89
90
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAC7B,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,OAAO,EAGZ,KAAK,SAAS,EACd,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EAEtB,MAAM,gBAAgB,CAAC;AAQxB,KAAK,eAAe,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CACjC,CAAC;AASF,KAAK,aAAa,GAAG,eAAe,GAAG;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA2BF,KAAK,gBAAgB,GAAG,gBAAgB,GAAG;IAEzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoDF,KAAK,cAAc,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAuB/C,KAAK,YAAY,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;CAC3B,CAAC;AAsJF,KAAK,eAAe,GAAG,eAAe,CACpC;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAC7C,CAAC;AA6BF,KAAK,eAAe,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAsBnG,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAyDrD,eAAO,MAAM,IAAI;;;;;kBA/YL,OAAO;oBACL,MAAM;;aAmBb,MAAM;iBACF,OAAO;oBACJ,OAAO;;;;;;;;;kBA8BT,OAAO;;;;;;;;;;;;;;kBApDP,OAAO;oBACL,MAAM;;;WAyIF,CAAC,6CAAgD,aAAa,CAAC,CAAC,CAAC;kCAyP1C,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;0DAhBvE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;;;;;;;kBAnXzD,OAAO;oBACL,MAAM;;eAiN2B,MAAM;;;;;kBAlNzC,OAAO;oBACL,MAAM;;kBAkOkC,SAAS,GAAG,UAAU;;;;;kBAnOhE,OAAO;oBACL,MAAM;;mBAyPgC,OAAO;kBAAY,SAAS,GAAG,aAAa;;oBA2CrE,eAAe;mDA6B6C,eAAe;4BAsBnE,aAAa;CA8E/C,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}
|