@dxos/react-ui-mosaic 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934
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/LICENSE +102 -5
- package/dist/lib/browser/{chunk-6R7CESWM.mjs → chunk-3BMPGIWZ.mjs} +59 -96
- package/dist/lib/browser/chunk-3BMPGIWZ.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +118 -54
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/playwright/index.mjs +90 -7
- package/dist/lib/browser/playwright/index.mjs.map +3 -3
- package/dist/lib/browser/testing/index.mjs +3 -6
- package/dist/lib/browser/testing/index.mjs.map +3 -3
- package/dist/lib/browser/translations.mjs +18 -0
- package/dist/lib/browser/translations.mjs.map +7 -0
- package/dist/lib/node-esm/{chunk-U7G2WXDG.mjs → chunk-2UCLTU76.mjs} +59 -96
- package/dist/lib/node-esm/chunk-2UCLTU76.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +118 -54
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/playwright/index.mjs +90 -7
- package/dist/lib/node-esm/playwright/index.mjs.map +3 -3
- package/dist/lib/node-esm/testing/index.mjs +3 -6
- package/dist/lib/node-esm/testing/index.mjs.map +3 -3
- package/dist/lib/node-esm/translations.mjs +20 -0
- package/dist/lib/node-esm/translations.mjs.map +7 -0
- package/dist/types/src/components/Board/Board.d.ts +12 -12
- package/dist/types/src/components/Board/Board.d.ts.map +1 -1
- package/dist/types/src/components/Board/Board.stories.d.ts +4 -4
- package/dist/types/src/components/Board/Board.stories.d.ts.map +1 -1
- package/dist/types/src/components/Board/Column.d.ts +5 -13
- package/dist/types/src/components/Board/Column.d.ts.map +1 -1
- package/dist/types/src/components/Board/Item.d.ts +1 -1
- package/dist/types/src/components/Board/Item.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Container.d.ts +9 -5
- package/dist/types/src/components/Mosaic/Container.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Mosaic.d.ts +6 -13
- package/dist/types/src/components/Mosaic/Mosaic.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Placeholder.d.ts +8 -8
- package/dist/types/src/components/Mosaic/Placeholder.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Root.d.ts +5 -6
- package/dist/types/src/components/Mosaic/Root.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Stack.d.ts +8 -2
- package/dist/types/src/components/Mosaic/Stack.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Stack.stories.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Tile.d.ts +6 -6
- package/dist/types/src/components/Mosaic/Tile.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/extension.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/styles.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/types.d.ts.map +1 -1
- package/dist/types/src/components/SearchStack/SearchStack.d.ts +20 -0
- package/dist/types/src/components/SearchStack/SearchStack.d.ts.map +1 -0
- package/dist/types/src/components/SearchStack/SearchStack.stories.d.ts +10 -0
- package/dist/types/src/components/SearchStack/SearchStack.stories.d.ts.map +1 -0
- package/dist/types/src/components/SearchStack/index.d.ts +2 -0
- package/dist/types/src/components/SearchStack/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useContainerDebug.d.ts.map +1 -1
- package/dist/types/src/hooks/useDefaultColumnEventHandler.d.ts.map +1 -1
- package/dist/types/src/hooks/useEventHandlerAdapter.d.ts +1 -1
- package/dist/types/src/hooks/useEventHandlerAdapter.d.ts.map +1 -1
- package/dist/types/src/hooks/useVisibleItems.d.ts.map +1 -1
- package/dist/types/src/playwright/board-manager.d.ts +12 -2
- package/dist/types/src/playwright/board-manager.d.ts.map +1 -1
- package/dist/types/src/playwright/playwright.config.d.ts.map +1 -1
- package/dist/types/src/testing/CardContainer.d.ts.map +1 -1
- package/dist/types/src/testing/DefaultStackTile.d.ts.map +1 -1
- package/dist/types/src/testing/types.d.ts +3 -3
- package/dist/types/src/translations.d.ts +3 -3
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +40 -37
- package/src/components/Board/Board.stories.tsx +15 -13
- package/src/components/Board/Board.tsx +2 -2
- package/src/components/Board/Column.tsx +19 -16
- package/src/components/Board/Item.tsx +12 -8
- package/src/components/Mosaic/Container.tsx +23 -8
- package/src/components/Mosaic/Placeholder.tsx +6 -0
- package/src/components/Mosaic/Root.tsx +199 -205
- package/src/components/Mosaic/Stack.stories.tsx +2 -2
- package/src/components/Mosaic/Stack.tsx +35 -10
- package/src/components/Mosaic/Tile.tsx +11 -2
- package/src/components/SearchStack/SearchStack.stories.tsx +47 -0
- package/src/components/SearchStack/SearchStack.tsx +135 -0
- package/src/components/SearchStack/index.ts +5 -0
- package/src/components/index.ts +1 -0
- package/src/hooks/useContainerDebug.tsx +3 -3
- package/src/hooks/useEventHandlerAdapter.ts +1 -1
- package/src/playwright/board-manager.ts +138 -10
- package/src/playwright/smoke.spec.ts +3 -3
- package/src/testing/CardContainer.tsx +2 -5
- package/src/testing/DefaultStackTile.tsx +8 -2
- package/dist/lib/browser/chunk-6R7CESWM.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-U7G2WXDG.mjs.map +0 -7
package/LICENSE
CHANGED
|
@@ -1,8 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
Copyright (c) 2022 DXOS
|
|
1
|
+
# Functional Source License, Version 1.1, ALv2 Future License
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
## Abbreviation
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
FSL-1.1-Apache-2.0
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
## Notice
|
|
8
|
+
|
|
9
|
+
Copyright 2026 DXOS
|
|
10
|
+
|
|
11
|
+
## Terms and Conditions
|
|
12
|
+
|
|
13
|
+
### Licensor ("We")
|
|
14
|
+
|
|
15
|
+
The party offering the Software under these Terms and Conditions.
|
|
16
|
+
|
|
17
|
+
### The Software
|
|
18
|
+
|
|
19
|
+
The "Software" is each version of the software that we make available under
|
|
20
|
+
these Terms and Conditions, as indicated by our inclusion of these Terms and
|
|
21
|
+
Conditions with the Software.
|
|
22
|
+
|
|
23
|
+
### License Grant
|
|
24
|
+
|
|
25
|
+
Subject to your compliance with this License Grant and the Patents,
|
|
26
|
+
Redistribution and Trademark clauses below, we hereby grant you the right to
|
|
27
|
+
use, copy, modify, create derivative works, publicly perform, publicly display
|
|
28
|
+
and redistribute the Software for any Permitted Purpose identified below.
|
|
29
|
+
|
|
30
|
+
### Permitted Purpose
|
|
31
|
+
|
|
32
|
+
A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
|
|
33
|
+
means making the Software available to others in a commercial product or
|
|
34
|
+
service that:
|
|
35
|
+
|
|
36
|
+
1. substitutes for the Software;
|
|
37
|
+
|
|
38
|
+
2. substitutes for any other product or service we offer using the Software
|
|
39
|
+
that exists as of the date we make the Software available; or
|
|
40
|
+
|
|
41
|
+
3. offers the same or substantially similar functionality as the Software.
|
|
42
|
+
|
|
43
|
+
Permitted Purposes specifically include using the Software:
|
|
44
|
+
|
|
45
|
+
1. for your internal use and access;
|
|
46
|
+
|
|
47
|
+
2. for non-commercial education;
|
|
48
|
+
|
|
49
|
+
3. for non-commercial research; and
|
|
50
|
+
|
|
51
|
+
4. in connection with professional services that you provide to a licensee
|
|
52
|
+
using the Software in accordance with these Terms and Conditions.
|
|
53
|
+
|
|
54
|
+
### Patents
|
|
55
|
+
|
|
56
|
+
To the extent your use for a Permitted Purpose would necessarily infringe our
|
|
57
|
+
patents, the license grant above includes a license under our patents. If you
|
|
58
|
+
make a claim against any party that the Software infringes or contributes to
|
|
59
|
+
the infringement of any patent, then your patent license to the Software ends
|
|
60
|
+
immediately.
|
|
61
|
+
|
|
62
|
+
### Redistribution
|
|
63
|
+
|
|
64
|
+
The Terms and Conditions apply to all copies, modifications and derivatives of
|
|
65
|
+
the Software.
|
|
66
|
+
|
|
67
|
+
If you redistribute any copies, modifications or derivatives of the Software,
|
|
68
|
+
you must include a copy of or a link to these Terms and Conditions and not
|
|
69
|
+
remove any copyright notices provided in or with the Software.
|
|
70
|
+
|
|
71
|
+
### Disclaimer
|
|
72
|
+
|
|
73
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
|
|
74
|
+
IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
|
|
75
|
+
PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
|
|
76
|
+
|
|
77
|
+
IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
|
|
78
|
+
SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
|
|
79
|
+
EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
|
|
80
|
+
|
|
81
|
+
### Trademarks
|
|
82
|
+
|
|
83
|
+
Except for displaying the License Details and identifying us as the origin of
|
|
84
|
+
the Software, you have no right under these Terms and Conditions to use our
|
|
85
|
+
trademarks, trade names, service marks or product names.
|
|
86
|
+
|
|
87
|
+
## Grant of Future License
|
|
88
|
+
|
|
89
|
+
We hereby irrevocably grant you an additional license to use the Software under
|
|
90
|
+
the Apache License, Version 2.0 that is effective on the second anniversary of
|
|
91
|
+
the date we make the Software available. On or after that date, you may use the
|
|
92
|
+
Software under the Apache License, Version 2.0, in which case the following
|
|
93
|
+
will apply:
|
|
94
|
+
|
|
95
|
+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
96
|
+
this file except in compliance with the License.
|
|
97
|
+
|
|
98
|
+
You may obtain a copy of the License at
|
|
99
|
+
|
|
100
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
101
|
+
|
|
102
|
+
Unless required by applicable law or agreed to in writing, software distributed
|
|
103
|
+
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
|
104
|
+
CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
|
105
|
+
specific language governing permissions and limitations under the License.
|
|
@@ -66,12 +66,11 @@ import { Primitive } from "@radix-ui/react-primitive";
|
|
|
66
66
|
import { Slot } from "@radix-ui/react-slot";
|
|
67
67
|
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
|
|
68
68
|
import { log } from "@dxos/log";
|
|
69
|
-
import { mx } from "@dxos/ui-theme";
|
|
70
69
|
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Root.tsx";
|
|
71
70
|
var [MosaicRootContextProvider, useMosaicRootContext] = createContext("MosaicRoot");
|
|
72
71
|
var MOSAIC_ROOT_NAME = "Mosaic.Root";
|
|
73
72
|
var MOSAIC_ROOT_DEBUG_ATTR = "mosaic-debug";
|
|
74
|
-
var MosaicRoot = /* @__PURE__ */ forwardRef(({
|
|
73
|
+
var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwardedRef) => {
|
|
75
74
|
const rootRef = useRef(null);
|
|
76
75
|
const composedRef = useComposedRefs(rootRef, forwardedRef);
|
|
77
76
|
const Comp = asChild ? Slot : Primitive.div;
|
|
@@ -121,7 +120,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
121
120
|
source: {
|
|
122
121
|
data: sourceData,
|
|
123
122
|
handler: handlers[sourceData.containerId],
|
|
124
|
-
//
|
|
123
|
+
// TODO(burdon): Check id matches.
|
|
125
124
|
container: location.initial.dropTargets.find((target) => target.data.type === "container")?.element
|
|
126
125
|
},
|
|
127
126
|
target: targetData && {
|
|
@@ -151,12 +150,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
151
150
|
log("Root.onDragStart", {
|
|
152
151
|
source: source.data,
|
|
153
152
|
location: location.current.dropTargets.map((target) => target.data)
|
|
154
|
-
}, {
|
|
155
|
-
F: __dxlog_file,
|
|
156
|
-
L: 149,
|
|
157
|
-
S: void 0,
|
|
158
|
-
C: (f, a) => f(...a)
|
|
159
|
-
});
|
|
153
|
+
}, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 96, S: void 0 });
|
|
160
154
|
handleChange({
|
|
161
155
|
source,
|
|
162
156
|
location
|
|
@@ -170,12 +164,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
170
164
|
log("Root.onDropTargetChange", {
|
|
171
165
|
source: source.data,
|
|
172
166
|
location: location.current.dropTargets.map((target) => target.data)
|
|
173
|
-
}, {
|
|
174
|
-
F: __dxlog_file,
|
|
175
|
-
L: 162,
|
|
176
|
-
S: void 0,
|
|
177
|
-
C: (f, a) => f(...a)
|
|
178
|
-
});
|
|
167
|
+
}, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 109, S: void 0 });
|
|
179
168
|
if (location.current.dropTargets.length === 0) {
|
|
180
169
|
noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
|
|
181
170
|
} else {
|
|
@@ -209,33 +198,18 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
209
198
|
log.info("Root.onDrop", {
|
|
210
199
|
source: source.data,
|
|
211
200
|
location: location.current.dropTargets.map((target) => target.data)
|
|
212
|
-
}, {
|
|
213
|
-
F: __dxlog_file,
|
|
214
|
-
L: 191,
|
|
215
|
-
S: void 0,
|
|
216
|
-
C: (f, a) => f(...a)
|
|
217
|
-
});
|
|
201
|
+
}, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 142, S: void 0 });
|
|
218
202
|
const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
|
|
219
203
|
if (!sourceHandler) {
|
|
220
204
|
log.warn("invalid source", {
|
|
221
205
|
source: sourceData,
|
|
222
206
|
handlers: Object.keys(handlers)
|
|
223
|
-
}, {
|
|
224
|
-
F: __dxlog_file,
|
|
225
|
-
L: 199,
|
|
226
|
-
S: void 0,
|
|
227
|
-
C: (f, a) => f(...a)
|
|
228
|
-
});
|
|
207
|
+
}, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 149, S: void 0 });
|
|
229
208
|
return;
|
|
230
209
|
}
|
|
231
210
|
try {
|
|
232
211
|
if (location.current.dropTargets.length === 0) {
|
|
233
|
-
log.info("cancelled", void 0, {
|
|
234
|
-
F: __dxlog_file,
|
|
235
|
-
L: 214,
|
|
236
|
-
S: void 0,
|
|
237
|
-
C: (f, a) => f(...a)
|
|
238
|
-
});
|
|
212
|
+
log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 163, S: void 0 });
|
|
239
213
|
} else {
|
|
240
214
|
const { data: targetData, handler: targetHandler } = getTargetHandler(location);
|
|
241
215
|
if (!targetHandler) {
|
|
@@ -243,12 +217,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
243
217
|
source: sourceData,
|
|
244
218
|
location,
|
|
245
219
|
handlers: Object.keys(handlers)
|
|
246
|
-
}, {
|
|
247
|
-
F: __dxlog_file,
|
|
248
|
-
L: 219,
|
|
249
|
-
S: void 0,
|
|
250
|
-
C: (f, a) => f(...a)
|
|
251
|
-
});
|
|
220
|
+
}, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 168, S: void 0 });
|
|
252
221
|
return;
|
|
253
222
|
}
|
|
254
223
|
if (sourceHandler === targetHandler) {
|
|
@@ -260,12 +229,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
260
229
|
if (!sourceHandler.onTake) {
|
|
261
230
|
log.warn("invalid source", {
|
|
262
231
|
source: sourceData
|
|
263
|
-
}, {
|
|
264
|
-
F: __dxlog_file,
|
|
265
|
-
L: 235,
|
|
266
|
-
S: void 0,
|
|
267
|
-
C: (f, a) => f(...a)
|
|
268
|
-
});
|
|
232
|
+
}, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 183, S: void 0 });
|
|
269
233
|
return;
|
|
270
234
|
}
|
|
271
235
|
sourceHandler.onTake?.({
|
|
@@ -306,7 +270,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, de
|
|
|
306
270
|
}),
|
|
307
271
|
dragging
|
|
308
272
|
}, /* @__PURE__ */ React.createElement(Comp, {
|
|
309
|
-
className:
|
|
273
|
+
className: "contents group",
|
|
310
274
|
[`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
|
|
311
275
|
ref: composedRef
|
|
312
276
|
}, children));
|
|
@@ -323,7 +287,7 @@ import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
|
|
|
323
287
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
324
288
|
import { bind } from "bind-event-listener";
|
|
325
289
|
import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
|
|
326
|
-
import { composable, composableProps
|
|
290
|
+
import { composable, composableProps } from "@dxos/ui-theme";
|
|
327
291
|
import { isTruthy } from "@dxos/util";
|
|
328
292
|
var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
|
|
329
293
|
var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext2("MosaicContainer");
|
|
@@ -331,8 +295,7 @@ var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
|
|
|
331
295
|
var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
|
|
332
296
|
var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
|
|
333
297
|
var counter = 0;
|
|
334
|
-
var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, debug, ...props }, forwardedRef) => {
|
|
335
|
-
const { className, ...rest } = composableProps(props);
|
|
298
|
+
var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
|
|
336
299
|
const Comp = asChild ? Slot2 : Primitive2.div;
|
|
337
300
|
const rootRef = useRef2(null);
|
|
338
301
|
const composedRef = useComposedRefs2(rootRef, forwardedRef);
|
|
@@ -350,6 +313,9 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
|
|
|
350
313
|
const setCurrentId = useCallback2((id) => onCurrentChange?.(id), [
|
|
351
314
|
onCurrentChange
|
|
352
315
|
]);
|
|
316
|
+
const setSelected = useCallback2((id, selected) => onSelectionChange?.(id, selected), [
|
|
317
|
+
onSelectionChange
|
|
318
|
+
]);
|
|
353
319
|
const scrollToRef = useRef2(void 0);
|
|
354
320
|
const registerScrollTo = useCallback2((fn) => {
|
|
355
321
|
scrollToRef.current = fn;
|
|
@@ -506,14 +472,17 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
|
|
|
506
472
|
setActiveLocation,
|
|
507
473
|
currentId,
|
|
508
474
|
setCurrentId,
|
|
475
|
+
selectedIds,
|
|
476
|
+
setSelected,
|
|
509
477
|
registerScrollTo
|
|
510
478
|
}, /* @__PURE__ */ React2.createElement(Comp, {
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
479
|
+
...composableProps(props, {
|
|
480
|
+
classNames: "h-full",
|
|
481
|
+
style: {
|
|
482
|
+
[MOSAIC_CONTAINER_PLACEHOLDER_WIDTH]: state.type === "active" && state.bounds ? `${state.bounds.width}px` : "0px",
|
|
483
|
+
[MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT]: state.type === "active" && state.bounds ? `${state.bounds.height}px` : "0px"
|
|
484
|
+
}
|
|
485
|
+
}),
|
|
517
486
|
[`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
|
|
518
487
|
ref: composedRef
|
|
519
488
|
}, children), debug?.());
|
|
@@ -536,7 +505,7 @@ import { composableProps as composableProps2, slottable } from "@dxos/ui-theme";
|
|
|
536
505
|
var MOSAIC_TILE_NAME = "Mosaic.Tile";
|
|
537
506
|
var [MosaicTileContextProvider, useMosaicTileContext] = createContext3("MosaicTile");
|
|
538
507
|
var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
|
|
539
|
-
var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current
|
|
508
|
+
var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, debug: _, ...props }, forwardedRef) => {
|
|
540
509
|
const Comp = asChild ? Slot3 : Primitive3.div;
|
|
541
510
|
const rootRef = useRef3(null);
|
|
542
511
|
const composedRef = composeRefs(rootRef, forwardedRef);
|
|
@@ -677,9 +646,15 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
|
|
|
677
646
|
state
|
|
678
647
|
}, /* @__PURE__ */ React3.createElement(Comp, {
|
|
679
648
|
...rest,
|
|
680
|
-
"data-
|
|
649
|
+
"data-object-id": id,
|
|
681
650
|
[`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
|
|
682
651
|
role: "listitem",
|
|
652
|
+
// Pair `current` / `selected` props with `aria-current` / `aria-selected`
|
|
653
|
+
// so the `dx-current` / `dx-selected` / `dx-hover` utilities (which key
|
|
654
|
+
// off those attributes) actually fire. Without this the props are purely
|
|
655
|
+
// advisory and the corresponding styling silently no-ops.
|
|
656
|
+
"aria-current": current ? "true" : void 0,
|
|
657
|
+
"aria-selected": selected ? "true" : void 0,
|
|
683
658
|
className,
|
|
684
659
|
ref: composedRef
|
|
685
660
|
}, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement(Comp, {
|
|
@@ -700,10 +675,11 @@ import { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragm
|
|
|
700
675
|
import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
|
|
701
676
|
import { Slot as Slot4 } from "@radix-ui/react-slot";
|
|
702
677
|
import React4, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4 } from "react";
|
|
703
|
-
import { mx
|
|
678
|
+
import { mx } from "@dxos/ui-theme";
|
|
704
679
|
var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
|
|
705
680
|
var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
|
|
706
681
|
var MOSAIC_PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
|
|
682
|
+
var MOSAIC_PLACEHOLDER_LOCATION_ATTR = "mosaic-placeholder-location";
|
|
707
683
|
var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
|
|
708
684
|
const rootRef = useRef4(null);
|
|
709
685
|
const Comp = asChild ? Slot4 : Primitive4.div;
|
|
@@ -749,8 +725,9 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
|
|
|
749
725
|
return /* @__PURE__ */ React4.createElement(Comp, {
|
|
750
726
|
[`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
|
|
751
727
|
[`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
|
|
728
|
+
[`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
|
|
752
729
|
role: "none",
|
|
753
|
-
className:
|
|
730
|
+
className: mx("relative", classNames),
|
|
754
731
|
ref: rootRef
|
|
755
732
|
}, children);
|
|
756
733
|
};
|
|
@@ -770,43 +747,31 @@ import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-ref
|
|
|
770
747
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
771
748
|
import React5, { forwardRef as forwardRef2, Fragment, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef5 } from "react";
|
|
772
749
|
import { invariant } from "@dxos/invariant";
|
|
773
|
-
import { composable as composable2, composableProps as composableProps3, mx as
|
|
750
|
+
import { composable as composable2, composableProps as composableProps3, mx as mx2 } from "@dxos/ui-theme";
|
|
774
751
|
var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
|
|
775
752
|
var MOSAIC_STACK_NAME = "MosaicStack";
|
|
776
|
-
var MosaicStackInner = composable2(({
|
|
777
|
-
|
|
778
|
-
F: __dxlog_file2,
|
|
779
|
-
L: 73,
|
|
780
|
-
S: void 0,
|
|
781
|
-
A: [
|
|
782
|
-
"Tile",
|
|
783
|
-
""
|
|
784
|
-
]
|
|
785
|
-
});
|
|
786
|
-
const { id, orientation = orientationProp, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
|
|
753
|
+
var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical", getId, items, scrollIntoView = true, Tile, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
|
|
754
|
+
const { id, orientation = orientationProp, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
|
|
787
755
|
const visibleItems = useVisibleItems({
|
|
788
756
|
id,
|
|
789
757
|
items,
|
|
790
758
|
dragging: dragging?.source.data,
|
|
791
759
|
getId
|
|
792
760
|
});
|
|
793
|
-
invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
|
|
794
|
-
F: __dxlog_file2,
|
|
795
|
-
L: 82,
|
|
796
|
-
S: void 0,
|
|
797
|
-
A: [
|
|
798
|
-
"orientation === 'vertical' || orientation === 'horizontal'",
|
|
799
|
-
"`Invalid orientation: ${orientation}`"
|
|
800
|
-
]
|
|
801
|
-
});
|
|
761
|
+
invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 45, S: void 0, A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"] });
|
|
802
762
|
const rootRef = useRef5(null);
|
|
803
763
|
const scrollToId = useCallback3((targetId) => {
|
|
804
|
-
|
|
764
|
+
if (!scrollIntoView) {
|
|
765
|
+
return;
|
|
766
|
+
}
|
|
767
|
+
const el = rootRef.current?.querySelector(`[data-object-id="${CSS.escape(targetId)}"]`);
|
|
805
768
|
el?.scrollIntoView({
|
|
806
769
|
block: "nearest",
|
|
807
770
|
behavior: "smooth"
|
|
808
771
|
});
|
|
809
|
-
}, [
|
|
772
|
+
}, [
|
|
773
|
+
scrollIntoView
|
|
774
|
+
]);
|
|
810
775
|
useEffect3(() => {
|
|
811
776
|
registerScrollTo(scrollToId);
|
|
812
777
|
return () => registerScrollTo(void 0);
|
|
@@ -836,6 +801,7 @@ var MosaicStackInner = composable2(({ getId, orientation: orientationProp = "ver
|
|
|
836
801
|
location: index + 1,
|
|
837
802
|
draggable: draggable2,
|
|
838
803
|
current: getId(item) === currentId,
|
|
804
|
+
selected: selectedIds?.has(getId(item)),
|
|
839
805
|
debug
|
|
840
806
|
}), draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
|
|
841
807
|
orientation,
|
|
@@ -845,17 +811,9 @@ var MosaicStackInner = composable2(({ getId, orientation: orientationProp = "ver
|
|
|
845
811
|
MosaicStackInner.displayName = MOSAIC_STACK_NAME;
|
|
846
812
|
var MosaicStack = MosaicStackInner;
|
|
847
813
|
var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
|
|
848
|
-
var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vertical", items,
|
|
849
|
-
invariant(Tile, void 0, {
|
|
850
|
-
|
|
851
|
-
L: 163,
|
|
852
|
-
S: void 0,
|
|
853
|
-
A: [
|
|
854
|
-
"Tile",
|
|
855
|
-
""
|
|
856
|
-
]
|
|
857
|
-
});
|
|
858
|
-
const { id, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
|
|
814
|
+
var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
|
|
815
|
+
invariant(Tile, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 102, S: void 0, A: ["Tile", ""] });
|
|
816
|
+
const { id, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
|
|
859
817
|
const visibleItems = useVisibleItems({
|
|
860
818
|
id,
|
|
861
819
|
items,
|
|
@@ -878,6 +836,9 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
|
|
|
878
836
|
const scrollToId = useCallback3((targetId) => {
|
|
879
837
|
const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
|
|
880
838
|
if (itemIndex >= 0) {
|
|
839
|
+
if (!scrollIntoView) {
|
|
840
|
+
return;
|
|
841
|
+
}
|
|
881
842
|
const virtualIndex = draggable2 ? itemIndex * 2 + 1 : itemIndex;
|
|
882
843
|
virtualizer.scrollToIndex(virtualIndex, {
|
|
883
844
|
align: "start",
|
|
@@ -888,7 +849,8 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
|
|
|
888
849
|
visibleItems,
|
|
889
850
|
getId,
|
|
890
851
|
draggable2,
|
|
891
|
-
virtualizer
|
|
852
|
+
virtualizer,
|
|
853
|
+
scrollIntoView
|
|
892
854
|
]);
|
|
893
855
|
useEffect3(() => {
|
|
894
856
|
registerScrollTo(scrollToId);
|
|
@@ -964,6 +926,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
|
|
|
964
926
|
location,
|
|
965
927
|
draggable: draggable2,
|
|
966
928
|
current: getId(data) === currentId,
|
|
929
|
+
selected: selectedIds?.has(getId(data)),
|
|
967
930
|
debug
|
|
968
931
|
}) : /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
|
|
969
932
|
orientation,
|
|
@@ -979,7 +942,7 @@ var InternalPlaceholder = (props) => {
|
|
|
979
942
|
...props,
|
|
980
943
|
classNames: styles.placeholder.root
|
|
981
944
|
}, /* @__PURE__ */ React5.createElement("div", {
|
|
982
|
-
className:
|
|
945
|
+
className: mx2("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
|
|
983
946
|
}));
|
|
984
947
|
};
|
|
985
948
|
InternalPlaceholder.displayName = "InternalPlaceholder";
|
|
@@ -1006,4 +969,4 @@ export {
|
|
|
1006
969
|
useMosaicTileContext,
|
|
1007
970
|
Mosaic
|
|
1008
971
|
};
|
|
1009
|
-
//# sourceMappingURL=chunk-
|
|
972
|
+
//# sourceMappingURL=chunk-3BMPGIWZ.mjs.map
|