@dxos/react-ui-list 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8
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 +120 -92
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +117 -90
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +120 -92
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/List/List.d.ts +6 -6
- package/dist/types/src/components/List/List.d.ts.map +1 -1
- package/dist/types/src/components/List/ListItem.d.ts +10 -13
- package/dist/types/src/components/List/ListItem.d.ts.map +1 -1
- package/dist/types/src/components/List/ListRoot.d.ts +4 -7
- package/dist/types/src/components/List/ListRoot.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.d.ts +4 -3
- package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.stories.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItem.d.ts +3 -2
- package/dist/types/src/components/Tree/TreeItem.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItemHeading.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItemToggle.d.ts +1 -0
- package/dist/types/src/components/Tree/TreeItemToggle.d.ts.map +1 -1
- package/dist/types/src/components/Tree/helpers.d.ts +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/util/index.d.ts +2 -0
- package/dist/types/src/util/index.d.ts.map +1 -0
- package/dist/types/src/util/path.d.ts +14 -0
- package/dist/types/src/util/path.d.ts.map +1 -0
- package/dist/types/src/util/path.test.d.ts +2 -0
- package/dist/types/src/util/path.test.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -20
- package/src/components/List/ListItem.tsx +10 -4
- package/src/components/Tree/Tree.stories.tsx +1 -1
- package/src/components/Tree/Tree.tsx +9 -5
- package/src/components/Tree/TreeItem.tsx +13 -16
- package/src/components/Tree/TreeItemHeading.tsx +2 -3
- package/src/components/Tree/TreeItemToggle.tsx +3 -2
- package/src/components/Tree/helpers.ts +1 -1
- package/src/index.ts +1 -0
- package/src/util/index.ts +5 -0
- package/src/util/path.test.ts +24 -0
- package/src/util/path.ts +21 -0
|
@@ -90,7 +90,7 @@ var stateStyles = {
|
|
|
90
90
|
var defaultContext = {};
|
|
91
91
|
var LIST_ITEM_NAME = "ListItem";
|
|
92
92
|
var [ListItemProvider, useListItemContext] = createContext2(LIST_ITEM_NAME, defaultContext);
|
|
93
|
-
var ListItem = ({ children, classNames, item }) => {
|
|
93
|
+
var ListItem = ({ children, classNames, item, ...props }) => {
|
|
94
94
|
const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
|
|
95
95
|
const ref = useRef(null);
|
|
96
96
|
const dragHandleRef = useRef(null);
|
|
@@ -99,7 +99,7 @@ var ListItem = ({ children, classNames, item }) => {
|
|
|
99
99
|
const element = ref.current;
|
|
100
100
|
invariant(element, void 0, {
|
|
101
101
|
F: __dxlog_file,
|
|
102
|
-
L:
|
|
102
|
+
L: 91,
|
|
103
103
|
S: void 0,
|
|
104
104
|
A: [
|
|
105
105
|
"element",
|
|
@@ -208,11 +208,13 @@ var ListItem = ({ children, classNames, item }) => {
|
|
|
208
208
|
item,
|
|
209
209
|
dragHandleRef
|
|
210
210
|
}, /* @__PURE__ */ React2.createElement("div", {
|
|
211
|
+
role: "none",
|
|
211
212
|
className: "relative"
|
|
212
213
|
}, /* @__PURE__ */ React2.createElement("div", {
|
|
213
214
|
ref,
|
|
214
215
|
role: "listitem",
|
|
215
|
-
className: mx("flex overflow-hidden", classNames, stateStyles[state.type])
|
|
216
|
+
className: mx("flex overflow-hidden", classNames, stateStyles[state.type]),
|
|
217
|
+
...props
|
|
216
218
|
}, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React2.createElement(NaturalListItem.DropIndicator, {
|
|
217
219
|
edge: state.closestEdge
|
|
218
220
|
})));
|
|
@@ -287,13 +289,13 @@ var TreeProvider = TreeContext.Provider;
|
|
|
287
289
|
|
|
288
290
|
// packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
|
|
289
291
|
import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
|
290
|
-
import { draggable as
|
|
292
|
+
import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
291
293
|
import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
|
|
292
294
|
import React5, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
|
|
293
295
|
import { S } from "@dxos/echo-schema";
|
|
294
296
|
import { invariant as invariant2 } from "@dxos/invariant";
|
|
295
297
|
import { Treegrid, TreeItem as NaturalTreeItem } from "@dxos/react-ui";
|
|
296
|
-
import {
|
|
298
|
+
import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/react-ui-theme";
|
|
297
299
|
|
|
298
300
|
// packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx
|
|
299
301
|
import React3, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
|
|
@@ -327,7 +329,7 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
|
|
|
327
329
|
"data-testid": "treeItem.heading",
|
|
328
330
|
variant: "ghost",
|
|
329
331
|
density: "fine",
|
|
330
|
-
classNames: mx2("grow gap-2
|
|
332
|
+
classNames: mx2("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
|
|
331
333
|
disabled,
|
|
332
334
|
onClick: handleSelect,
|
|
333
335
|
onKeyDown: handleButtonKeydown,
|
|
@@ -348,14 +350,14 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
|
|
|
348
350
|
import React4, { forwardRef as forwardRef3, memo as memo2 } from "react";
|
|
349
351
|
import { Button as Button2, Icon as Icon3 } from "@dxos/react-ui";
|
|
350
352
|
import { mx as mx3 } from "@dxos/react-ui-theme";
|
|
351
|
-
var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, onToggle }, forwardedRef) => {
|
|
353
|
+
var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
|
|
352
354
|
return /* @__PURE__ */ React4.createElement(Button2, {
|
|
353
355
|
ref: forwardedRef,
|
|
354
356
|
"data-testid": "treeItem.toggle",
|
|
355
357
|
"aria-expanded": open,
|
|
356
358
|
variant: "ghost",
|
|
357
359
|
density: "fine",
|
|
358
|
-
classNames: mx3("is-
|
|
360
|
+
classNames: mx3("is-4 dx-focus-ring-inset pli-0", hidden ? "hidden" : !isBranch && "invisible"),
|
|
359
361
|
onClick: onToggle
|
|
360
362
|
}, /* @__PURE__ */ React4.createElement(Icon3, {
|
|
361
363
|
icon: "ph--caret-right--regular",
|
|
@@ -366,7 +368,7 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open,
|
|
|
366
368
|
|
|
367
369
|
// packages/ui/react-ui-list/src/components/Tree/helpers.ts
|
|
368
370
|
var DEFAULT_INDENTATION = 8;
|
|
369
|
-
var
|
|
371
|
+
var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
|
|
370
372
|
paddingInlineStart: `${(level - 1) * indentation}px`
|
|
371
373
|
});
|
|
372
374
|
|
|
@@ -379,7 +381,7 @@ var TreeDataSchema = S.Struct({
|
|
|
379
381
|
item: S.Any
|
|
380
382
|
});
|
|
381
383
|
var isTreeData = (data) => S.is(TreeDataSchema)(data);
|
|
382
|
-
var RawTreeItem = ({ item, path: _path, last, draggable:
|
|
384
|
+
var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset = 2 }) => {
|
|
383
385
|
const { getItems, getProps, isOpen, isCurrent } = useTree();
|
|
384
386
|
const items = getItems(item);
|
|
385
387
|
const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
|
|
@@ -392,7 +394,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
|
|
|
392
394
|
]);
|
|
393
395
|
const open = isOpen(path, item);
|
|
394
396
|
const current = isCurrent(path, item);
|
|
395
|
-
const level = path.length -
|
|
397
|
+
const level = path.length - levelOffset;
|
|
396
398
|
const isBranch = !!parentOf;
|
|
397
399
|
const mode = last ? "last-in-group" : open ? "expanded" : "standard";
|
|
398
400
|
const data = useMemo(() => ({
|
|
@@ -418,94 +420,98 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
|
|
|
418
420
|
}
|
|
419
421
|
}, []);
|
|
420
422
|
useEffect3(() => {
|
|
421
|
-
if (!
|
|
423
|
+
if (!_draggable) {
|
|
422
424
|
return;
|
|
423
425
|
}
|
|
424
426
|
invariant2(buttonRef.current, void 0, {
|
|
425
427
|
F: __dxlog_file2,
|
|
426
|
-
L:
|
|
428
|
+
L: 106,
|
|
427
429
|
S: void 0,
|
|
428
430
|
A: [
|
|
429
431
|
"buttonRef.current",
|
|
430
432
|
""
|
|
431
433
|
]
|
|
432
434
|
});
|
|
433
|
-
return combine2(
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
435
|
+
return combine2(
|
|
436
|
+
draggable2({
|
|
437
|
+
element: buttonRef.current,
|
|
438
|
+
getInitialData: () => data,
|
|
439
|
+
onDragStart: () => {
|
|
440
|
+
setState("dragging");
|
|
441
|
+
if (open) {
|
|
442
|
+
openRef.current = true;
|
|
443
|
+
onOpenChange?.({
|
|
444
|
+
item,
|
|
445
|
+
path,
|
|
446
|
+
open: false
|
|
447
|
+
});
|
|
448
|
+
}
|
|
449
|
+
},
|
|
450
|
+
onDrop: () => {
|
|
451
|
+
setState("idle");
|
|
452
|
+
if (openRef.current) {
|
|
453
|
+
onOpenChange?.({
|
|
454
|
+
item,
|
|
455
|
+
path,
|
|
456
|
+
open: true
|
|
457
|
+
});
|
|
458
|
+
}
|
|
445
459
|
}
|
|
446
|
-
},
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
460
|
+
}),
|
|
461
|
+
// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
|
|
462
|
+
dropTargetForElements2({
|
|
463
|
+
element: buttonRef.current,
|
|
464
|
+
getData: ({ input, element }) => {
|
|
465
|
+
return attachInstruction(data, {
|
|
466
|
+
input,
|
|
467
|
+
element,
|
|
468
|
+
indentPerLevel: DEFAULT_INDENTATION,
|
|
469
|
+
currentLevel: level,
|
|
470
|
+
mode,
|
|
471
|
+
block: isBranch ? [] : [
|
|
472
|
+
"make-child"
|
|
473
|
+
]
|
|
454
474
|
});
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
onOpenChange?.({
|
|
482
|
-
item,
|
|
483
|
-
path,
|
|
484
|
-
open: true
|
|
485
|
-
});
|
|
486
|
-
}, 500);
|
|
487
|
-
}
|
|
488
|
-
if (instruction2?.type !== "make-child") {
|
|
489
|
-
cancelExpand();
|
|
475
|
+
},
|
|
476
|
+
canDrop: ({ source }) => {
|
|
477
|
+
const _canDrop = canDrop ?? (() => true);
|
|
478
|
+
return source.element !== buttonRef.current && _canDrop(source.data, data);
|
|
479
|
+
},
|
|
480
|
+
getIsSticky: () => true,
|
|
481
|
+
onDrag: ({ self, source }) => {
|
|
482
|
+
const instruction2 = extractInstruction(self.data);
|
|
483
|
+
if (source.data.id !== id) {
|
|
484
|
+
if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
|
|
485
|
+
cancelExpandRef.current = setTimeout(() => {
|
|
486
|
+
onOpenChange?.({
|
|
487
|
+
item,
|
|
488
|
+
path,
|
|
489
|
+
open: true
|
|
490
|
+
});
|
|
491
|
+
}, 500);
|
|
492
|
+
}
|
|
493
|
+
if (instruction2?.type !== "make-child") {
|
|
494
|
+
cancelExpand();
|
|
495
|
+
}
|
|
496
|
+
setInstruction(instruction2);
|
|
497
|
+
} else if (instruction2?.type === "reparent") {
|
|
498
|
+
setInstruction(instruction2);
|
|
499
|
+
} else {
|
|
500
|
+
setInstruction(null);
|
|
490
501
|
}
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
502
|
+
},
|
|
503
|
+
onDragLeave: () => {
|
|
504
|
+
cancelExpand();
|
|
505
|
+
setInstruction(null);
|
|
506
|
+
},
|
|
507
|
+
onDrop: () => {
|
|
508
|
+
cancelExpand();
|
|
495
509
|
setInstruction(null);
|
|
496
510
|
}
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
cancelExpand();
|
|
500
|
-
setInstruction(null);
|
|
501
|
-
},
|
|
502
|
-
onDrop: () => {
|
|
503
|
-
cancelExpand();
|
|
504
|
-
setInstruction(null);
|
|
505
|
-
}
|
|
506
|
-
}));
|
|
511
|
+
})
|
|
512
|
+
);
|
|
507
513
|
}, [
|
|
508
|
-
|
|
514
|
+
_draggable,
|
|
509
515
|
item,
|
|
510
516
|
id,
|
|
511
517
|
mode,
|
|
@@ -564,7 +570,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
|
|
|
564
570
|
id,
|
|
565
571
|
"aria-labelledby": `${id}__label`,
|
|
566
572
|
parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
|
|
567
|
-
classNames: mx4("grid grid-cols-subgrid col-[tree-row]
|
|
573
|
+
classNames: mx4("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, className),
|
|
568
574
|
"data-itemid": id,
|
|
569
575
|
"data-testid": testId,
|
|
570
576
|
// NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
|
|
@@ -579,7 +585,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
|
|
|
579
585
|
}, /* @__PURE__ */ React5.createElement(Treegrid.Cell, {
|
|
580
586
|
indent: true,
|
|
581
587
|
classNames: "relative grid grid-cols-subgrid col-[tree-row]",
|
|
582
|
-
style:
|
|
588
|
+
style: paddingIndentation(level)
|
|
583
589
|
}, /* @__PURE__ */ React5.createElement("div", {
|
|
584
590
|
role: "none",
|
|
585
591
|
className: "flex items-center"
|
|
@@ -609,7 +615,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
|
|
|
609
615
|
item: item2,
|
|
610
616
|
path,
|
|
611
617
|
last: index === items.length - 1,
|
|
612
|
-
draggable:
|
|
618
|
+
draggable: _draggable,
|
|
613
619
|
renderColumns: Columns,
|
|
614
620
|
canDrop,
|
|
615
621
|
onOpenChange,
|
|
@@ -619,7 +625,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
|
|
|
619
625
|
var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
|
|
620
626
|
|
|
621
627
|
// packages/ui/react-ui-list/src/components/Tree/Tree.tsx
|
|
622
|
-
var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable:
|
|
628
|
+
var Tree = ({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect, levelOffset }) => {
|
|
623
629
|
const context = useMemo2(() => ({
|
|
624
630
|
getItems,
|
|
625
631
|
getProps,
|
|
@@ -631,11 +637,15 @@ var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 =
|
|
|
631
637
|
isOpen,
|
|
632
638
|
isCurrent
|
|
633
639
|
]);
|
|
634
|
-
const items = getItems();
|
|
635
|
-
const
|
|
640
|
+
const items = getItems(root);
|
|
641
|
+
const treePath = useMemo2(() => path ? [
|
|
642
|
+
...path,
|
|
636
643
|
id
|
|
637
|
-
]
|
|
644
|
+
] : [
|
|
638
645
|
id
|
|
646
|
+
], [
|
|
647
|
+
id,
|
|
648
|
+
path
|
|
639
649
|
]);
|
|
640
650
|
return /* @__PURE__ */ React6.createElement(Treegrid2.Root, {
|
|
641
651
|
gridTemplateColumns,
|
|
@@ -646,16 +656,34 @@ var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 =
|
|
|
646
656
|
key: item.id,
|
|
647
657
|
item,
|
|
648
658
|
last: index === items.length - 1,
|
|
649
|
-
path,
|
|
650
|
-
|
|
659
|
+
path: treePath,
|
|
660
|
+
levelOffset,
|
|
661
|
+
draggable: draggable3,
|
|
651
662
|
renderColumns,
|
|
652
663
|
canDrop,
|
|
653
664
|
onOpenChange,
|
|
654
665
|
onSelect
|
|
655
666
|
}))));
|
|
656
667
|
};
|
|
668
|
+
|
|
669
|
+
// packages/ui/react-ui-list/src/util/path.ts
|
|
670
|
+
var SEPARATOR = "~";
|
|
671
|
+
var Path = {
|
|
672
|
+
create: (...args) => args.join(SEPARATOR),
|
|
673
|
+
parts: (path) => path.split(SEPARATOR),
|
|
674
|
+
length: (path) => path.split(SEPARATOR).length,
|
|
675
|
+
first: (path) => path.split(SEPARATOR)[0] ?? path,
|
|
676
|
+
last: (path) => path.split(SEPARATOR).at(-1) ?? path,
|
|
677
|
+
parent: (path) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
|
|
678
|
+
hasRoot: (path, id) => Path.first(path) === id,
|
|
679
|
+
hasChild: (path, compare) => Path.parent(compare) === path,
|
|
680
|
+
hasDescendent: (path, compare) => compare !== path && compare.startsWith(path),
|
|
681
|
+
siblings: (path, compare) => Path.parent(path) === Path.parent(compare),
|
|
682
|
+
onPath: (path, id) => Path.parts(path).includes(id)
|
|
683
|
+
};
|
|
657
684
|
export {
|
|
658
685
|
List,
|
|
686
|
+
Path,
|
|
659
687
|
RawTreeItem,
|
|
660
688
|
Tree,
|
|
661
689
|
TreeDataSchema,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx", "../../../src/components/Tree/Tree.tsx", "../../../src/components/Tree/TreeContext.tsx", "../../../src/components/Tree/TreeItem.tsx", "../../../src/components/Tree/TreeItemHeading.tsx", "../../../src/components/Tree/TreeItemToggle.tsx", "../../../src/components/Tree/helpers.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport {\n type Edge,\n attachClosestEdge,\n extractClosestEdge,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n type ComponentProps,\n type HTMLAttributes,\n type MutableRefObject,\n type PropsWithChildren,\n type ReactNode,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { Icon, type ThemedClassName, ListItem as NaturalListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = {};\n\nexport type ItemState =\n | {\n type: 'idle';\n }\n | {\n type: 'preview';\n container: HTMLElement;\n }\n | {\n type: 'is-dragging';\n }\n | {\n type: 'is-dragging-over';\n closestEdge: Edge | null;\n };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n 'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n item: T;\n dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n LIST_ITEM_NAME,\n defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n PropsWithChildren<{\n item: T;\n }>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {\n const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n const ref = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLElement | null>(null);\n const [state, setState] = useState<ItemState>(idle);\n useEffect(() => {\n const element = ref.current;\n invariant(element);\n return combine(\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n //\n draggable({\n element,\n dragHandle: dragHandleRef.current!,\n getInitialData: () => item,\n onGenerateDragPreview: dragPreview\n ? ({ nativeSetDragImage, source }) => {\n const rect = source.element.getBoundingClientRect();\n setCustomNativeDragPreview({\n nativeSetDragImage,\n getOffset: ({ container }) => {\n const { height } = container.getBoundingClientRect();\n return {\n x: 20,\n y: height / 2,\n };\n },\n render: ({ container }) => {\n container.style.width = rect.width + 'px';\n setState({ type: 'preview', container });\n setRootState({ type: 'preview', container, item });\n return () => {}; // TODO(burdon): Cleanup.\n },\n });\n }\n : undefined,\n onDragStart: () => {\n setState({ type: 'is-dragging' });\n setRootState({ type: 'is-dragging', item });\n },\n onDrop: () => {\n setState(idle);\n setRootState(idle);\n },\n }),\n\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n //\n dropTargetForElements({\n element,\n canDrop: ({ source }) => {\n return source.element !== element && isItem(source.data);\n },\n getData: ({ input }) => {\n return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n },\n getIsSticky: () => true,\n onDragEnter: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState({ type: 'is-dragging-over', closestEdge });\n },\n onDrag: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState((current) => {\n if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n return current;\n }\n return { type: 'is-dragging-over', closestEdge };\n });\n },\n onDragLeave: () => {\n setState(idle);\n },\n onDrop: () => {\n setState(idle);\n },\n }),\n );\n }, [item]);\n\n return (\n <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n <div className='relative'>\n <div ref={ref} role='listitem' className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}>\n {children}\n </div>\n {state.type === 'is-dragging-over' && state.closestEdge && (\n <NaturalListItem.DropIndicator edge={state.closestEdge} />\n )}\n </div>\n </ListItemProvider>\n );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ classNames, icon, ...props }, forwardedRef) => {\n return (\n <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n <Icon icon={icon} classNames='cursor-pointer' size={4} />\n </button>\n );\n },\n);\n\nexport const ListItemDeleteButton = ({\n autoHide = true,\n classNames,\n disabled,\n ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n const { state } = useListContext('DELETE_BUTTON');\n const isDisabled = state.type !== 'idle' || disabled;\n return (\n <IconButton\n icon='ph--x--regular'\n disabled={isDisabled}\n classNames={[classNames, autoHide && disabled && 'hidden']}\n {...props}\n />\n );\n};\n\nexport const ListItemDragHandle = () => {\n const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n return <IconButton ref={dragHandleRef as any} icon='ph--dots-six-vertical--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n children,\n}: {\n children: ({ item }: { item: T }) => ReactNode;\n}) => {\n const { state } = useListContext('DRAG_PREVIEW');\n return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n <div className={mx('flex is-full gap-2', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n classNames,\n children,\n ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n <div className={mx('flex grow items-center truncate', classNames)} {...props}>\n {children}\n </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useCallback, useEffect, useState } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\n\nimport { idle, type ItemState, type ListItemRecord } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n isItem: (item: any) => boolean;\n getId?: (item: T) => string; // TODO(burdon): Require if T doesn't conform to type.\n dragPreview?: boolean;\n state: ItemState & { item?: T };\n setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n state: ListContext<T>['state'];\n items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n children?: (props: ListRendererProps<T>) => ReactNode;\n items?: T[];\n onMove?: (fromIndex: number, toIndex: number) => void;\n}> &\n Pick<ListContext<T>, 'isItem' | 'getId' | 'dragPreview'>;\n\nconst defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;\n\nexport const ListRoot = <T extends ListItemRecord>({\n classNames,\n children,\n items,\n isItem,\n getId = defaultGetId,\n onMove,\n ...props\n}: ListRootProps<T>) => {\n const isEqual = useCallback(\n (a: T, b: T) => {\n const idA = getId?.(a);\n const idB = getId?.(b);\n\n if (idA !== undefined && idB !== undefined) {\n return idA === idB;\n } else {\n // Fallback for primitive values or when getId fails.\n // NOTE(ZaymonFC): After drag and drop, pragmatic internally serializes drop targets which breaks reference equality.\n // You must provide an `getId` function that returns a stable identifier for your items.\n return a === b;\n }\n },\n [getId],\n );\n\n const [state, setState] = useState<ListContext<T>['state']>(idle);\n useEffect(() => {\n if (!items) {\n return;\n }\n\n return monitorForElements({\n canMonitor: ({ source }) => isItem(source.data),\n onDrop: ({ location, source }) => {\n const target = location.current.dropTargets[0];\n if (!target) {\n return;\n }\n\n const sourceData = source.data;\n const targetData = target.data;\n\n if (!isItem(sourceData) || !isItem(targetData)) {\n return;\n }\n\n const sourceIdx = items.findIndex((item) => isEqual(item, sourceData as T));\n const targetIdx = items.findIndex((item) => isEqual(item, targetData as T));\n if (targetIdx < 0 || sourceIdx < 0) {\n return;\n }\n const closestEdgeOfTarget = extractClosestEdge(targetData);\n const destinationIndex = getReorderDestinationIndex({\n closestEdgeOfTarget,\n startIndex: sourceIdx,\n indexOfTarget: targetIdx,\n axis: 'vertical',\n });\n\n onMove?.(sourceIdx, destinationIndex);\n },\n });\n }, [items, isEqual, onMove]);\n\n return (\n <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items: items ?? [] })}</ListProvider>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n IconButton,\n type IconButtonProps,\n ListItem,\n ListItemDeleteButton,\n ListItemDragHandle,\n ListItemDragPreview,\n type ListItemProps,\n type ListItemRecord,\n ListItemTitle,\n ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n Root: ListRoot,\n Item: ListItem,\n ItemDragPreview: ListItemDragPreview,\n ItemWrapper: ListItemWrapper,\n ItemDragHandle: ListItemDragHandle,\n ItemDeleteButton: ListItemDeleteButton,\n ItemTitle: ListItemTitle,\n IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useMemo } from 'react';\n\nimport { Treegrid, type TreegridRootProps } from '@dxos/react-ui';\n\nimport { type TreeContextType, TreeProvider } from './TreeContext';\nimport { TreeItem, type TreeItemProps } from './TreeItem';\n\nexport type TreeProps<T = any> = { id: string } & TreeContextType &\n Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &\n Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;\n\nexport const Tree = <T = any,>({\n id,\n getItems,\n getProps,\n isOpen,\n isCurrent,\n draggable = false,\n gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',\n classNames,\n renderColumns,\n canDrop,\n onOpenChange,\n onSelect,\n}: TreeProps<T>) => {\n const context = useMemo(\n () => ({\n getItems,\n getProps,\n isOpen,\n isCurrent,\n }),\n [getItems, getProps, isOpen, isCurrent],\n );\n const items = getItems();\n const path = useMemo(() => [id], [id]);\n\n return (\n <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>\n <TreeProvider value={context}>\n {items.map((item, index) => (\n <TreeItem\n key={item.id}\n item={item}\n last={index === items.length - 1}\n path={path}\n draggable={draggable}\n renderColumns={renderColumns}\n canDrop={canDrop}\n onOpenChange={onOpenChange}\n onSelect={onSelect}\n />\n ))}\n </TreeProvider>\n </Treegrid.Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\nimport { type Label } from '@dxos/react-ui';\n\nexport type PropsFromTreeItem = {\n id: string;\n label: Label;\n parentOf?: string[];\n icon?: string;\n disabled?: boolean;\n className?: string;\n headingClassName?: string;\n testId?: string;\n};\n\nexport type TreeContextType<T = any> = {\n getItems: (parent?: T) => T[];\n getProps: (item: T, parent: string[]) => PropsFromTreeItem;\n isOpen: (path: string[], item: T) => boolean;\n isCurrent: (path: string[], item: T) => boolean;\n};\n\nconst TreeContext = createContext<null | TreeContextType>(null);\n\nexport const useTree = () => useContext(TreeContext) ?? raise(new Error('TreeContext not found'));\n\nexport const TreeProvider = TreeContext.Provider;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n draggable as pragmaticDraggable,\n dropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx\nimport {\n attachInstruction,\n extractInstruction,\n type Instruction,\n type ItemMode,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';\nimport React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC, type KeyboardEvent } from 'react';\n\nimport { S } from '@dxos/echo-schema';\nimport { invariant } from '@dxos/invariant';\nimport { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';\nimport {\n focusRing,\n ghostHover,\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n mx,\n} from '@dxos/react-ui-theme';\n\nimport { useTree } from './TreeContext';\nimport { TreeItemHeading } from './TreeItemHeading';\nimport { TreeItemToggle } from './TreeItemToggle';\nimport { DEFAULT_INDENTATION, paddingIndendation } from './helpers';\n\ntype TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';\n\nconst hoverableDescriptionIcons =\n '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';\n\nexport const TreeDataSchema = S.Struct({\n id: S.String,\n path: S.Array(S.String),\n item: S.Any,\n});\n\nexport type TreeData = S.Schema.Type<typeof TreeDataSchema>;\n\nexport const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSchema)(data);\n\nexport type TreeItemProps<T = any> = {\n item: T;\n path: string[];\n last: boolean;\n draggable?: boolean;\n renderColumns?: FC<{\n item: T;\n path: string[];\n open: boolean;\n menuOpen: boolean;\n setMenuOpen: (open: boolean) => void;\n }>;\n canDrop?: (source: TreeData, target: TreeData) => boolean;\n onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;\n onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;\n};\n\nexport const RawTreeItem = <T = any,>({\n item,\n path: _path,\n last,\n draggable,\n renderColumns: Columns,\n canDrop,\n onOpenChange,\n onSelect,\n}: TreeItemProps<T>) => {\n const { getItems, getProps, isOpen, isCurrent } = useTree();\n const items = getItems(item);\n const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);\n const path = useMemo(() => [..._path, id], [_path, id]);\n const open = isOpen(path, item);\n const current = isCurrent(path, item);\n const level = path.length - 2;\n const isBranch = !!parentOf;\n const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';\n const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);\n\n const rowRef = useRef<HTMLDivElement | null>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const openRef = useRef(false);\n const cancelExpandRef = useRef<NodeJS.Timeout | null>(null);\n const [_state, setState] = useState<TreeItemState>('idle');\n const [instruction, setInstruction] = useState<Instruction | null>(null);\n const [menuOpen, setMenuOpen] = useState(false);\n\n const cancelExpand = useCallback(() => {\n if (cancelExpandRef.current) {\n clearTimeout(cancelExpandRef.current);\n cancelExpandRef.current = null;\n }\n }, []);\n\n useEffect(() => {\n if (!draggable) {\n return;\n }\n\n invariant(buttonRef.current);\n\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about\n return combine(\n pragmaticDraggable({\n element: buttonRef.current,\n getInitialData: () => data,\n onDragStart: () => {\n setState('dragging');\n if (open) {\n openRef.current = true;\n onOpenChange?.({ item, path, open: false });\n }\n },\n onDrop: () => {\n setState('idle');\n if (openRef.current) {\n onOpenChange?.({ item, path, open: true });\n }\n },\n }),\n dropTargetForElements({\n element: buttonRef.current,\n getData: ({ input, element }) => {\n return attachInstruction(data, {\n input,\n element,\n indentPerLevel: DEFAULT_INDENTATION,\n currentLevel: level,\n mode,\n block: isBranch ? [] : ['make-child'],\n });\n },\n canDrop: ({ source }) => {\n const _canDrop = canDrop ?? (() => true);\n return source.element !== buttonRef.current && _canDrop(source.data as TreeData, data);\n },\n getIsSticky: () => true,\n onDrag: ({ self, source }) => {\n const instruction = extractInstruction(self.data);\n\n if (source.data.id !== id) {\n if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {\n cancelExpandRef.current = setTimeout(() => {\n onOpenChange?.({ item, path, open: true });\n }, 500);\n }\n\n if (instruction?.type !== 'make-child') {\n cancelExpand();\n }\n\n setInstruction(instruction);\n } else if (instruction?.type === 'reparent') {\n // TODO(wittjosiah): This is not occurring in the current implementation.\n setInstruction(instruction);\n } else {\n setInstruction(null);\n }\n },\n onDragLeave: () => {\n cancelExpand();\n setInstruction(null);\n },\n onDrop: () => {\n cancelExpand();\n setInstruction(null);\n },\n }),\n );\n }, [draggable, item, id, mode, path, open, canDrop]);\n\n // Cancel expand on unmount.\n useEffect(() => () => cancelExpand(), [cancelExpand]);\n\n const handleOpenChange = useCallback(\n () => onOpenChange?.({ item, path, open: !open }),\n [onOpenChange, item, path, open],\n );\n\n const handleSelect = useCallback(\n (option = false) => {\n rowRef.current?.focus();\n onSelect?.({ item, path, current: !current, option });\n },\n [onSelect, item, path, current],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n isBranch && !open && handleOpenChange();\n break;\n case 'ArrowLeft':\n isBranch && open && handleOpenChange();\n break;\n case ' ':\n handleSelect(event.altKey);\n break;\n }\n },\n [isBranch, open, handleOpenChange, handleSelect],\n );\n\n return (\n <>\n <Treegrid.Row\n ref={rowRef}\n key={id}\n id={id}\n aria-labelledby={`${id}__label`}\n parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}\n classNames={mx(\n 'grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input',\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n hoverableDescriptionIcons,\n ghostHover,\n focusRing,\n className,\n )}\n data-itemid={id}\n data-testid={testId}\n // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS\n // without alerting the user (except for in the correct link element). See also:\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description\n aria-current={current ? ('' as 'page') : undefined}\n onKeyDown={handleKeyDown}\n onContextMenu={(event) => {\n event.preventDefault();\n setMenuOpen(true);\n }}\n >\n <Treegrid.Cell\n indent\n classNames='relative grid grid-cols-subgrid col-[tree-row]'\n style={paddingIndendation(level)}\n >\n <div role='none' className='flex items-center'>\n <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />\n <TreeItemHeading\n ref={buttonRef}\n label={label}\n icon={icon}\n className={headingClassName}\n disabled={disabled}\n current={current}\n onSelect={handleSelect}\n />\n </div>\n {Columns && <Columns item={item} path={path} open={open} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}\n {instruction && <NaturalTreeItem.DropIndicator instruction={instruction} gap={2} />}\n </Treegrid.Cell>\n </Treegrid.Row>\n {open &&\n items.map((item, index) => (\n <TreeItem\n key={item.id}\n item={item}\n path={path}\n last={index === items.length - 1}\n draggable={draggable}\n renderColumns={Columns}\n canDrop={canDrop}\n onOpenChange={onOpenChange}\n onSelect={onSelect}\n />\n ))}\n </>\n );\n};\n\nexport const TreeItem = memo(RawTreeItem) as FC<TreeItemProps>;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallback } from 'react';\n\nimport { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';\nimport { TextTooltip } from '@dxos/react-ui-text-tooltip';\nimport { mx } from '@dxos/react-ui-theme';\n\n// TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct\n// rather than just making the item unselectable.\nexport type NavTreeItemHeadingProps = {\n label: Label;\n icon?: string;\n className?: string;\n disabled?: boolean;\n current?: boolean;\n onSelect?: (option: boolean) => void;\n};\n\nexport const TreeItemHeading = memo(\n forwardRef<HTMLButtonElement, NavTreeItemHeadingProps>(\n ({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {\n const { t } = useTranslation();\n\n const handleSelect = useCallback(\n (event: MouseEvent) => {\n onSelect?.(event.altKey);\n },\n [onSelect],\n );\n\n const handleButtonKeydown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n onSelect?.(event.altKey);\n }\n },\n [onSelect],\n );\n\n return (\n <TextTooltip\n text={toLocalizedString(label, t)}\n side='bottom'\n truncateQuery='span[data-tooltip]'\n onlyWhenTruncating\n asChild\n ref={forwardedRef}\n >\n {/* TODO(wittjosiah): Class precedence. See #8149. */}\n <Button\n data-testid='treeItem.heading'\n variant='ghost'\n density='fine'\n classNames={mx(\n 'grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent',\n 'disabled:!cursor-default disabled:!opacity-100',\n className,\n )}\n disabled={disabled}\n onClick={handleSelect}\n onKeyDown={handleButtonKeydown}\n {...(current && { 'aria-current': 'location' })}\n >\n {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={4} classNames='is-[1em] bs-[1em] mlb-1' />}\n <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>\n {toLocalizedString(label, t)}\n </span>\n </Button>\n </TextTooltip>\n );\n },\n ),\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, memo } from 'react';\n\nimport { Button, Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type TreeItemToggleProps = {\n open?: boolean;\n isBranch?: boolean;\n onToggle?: () => void;\n};\n\nexport const TreeItemToggle = memo(\n forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, onToggle }, forwardedRef) => {\n return (\n <Button\n ref={forwardedRef}\n data-testid='treeItem.toggle'\n aria-expanded={open}\n variant='ghost'\n density='fine'\n classNames={mx('is-6 !pli-1', !isBranch && 'invisible')}\n onClick={onToggle}\n >\n <Icon\n icon='ph--caret-right--regular'\n size={3}\n classNames={mx('transition duration-200', open && 'rotate-90')}\n />\n </Button>\n );\n }),\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const DEFAULT_INDENTATION = 8;\n\nexport const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({\n paddingInlineStart: `${(level - 1) * indentation}px`,\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "ListItem", "NaturalListItem", "mx", "monitorForElements", "extractClosestEdge", "getReorderDestinationIndex", "createContext", "React", "useCallback", "useEffect", "useState", "LIST_NAME", "ListProvider", "useListContext", "createContext", "defaultGetId", "item", "id", "ListRoot", "classNames", "children", "items", "isItem", "getId", "onMove", "props", "isEqual", "useCallback", "a", "b", "idA", "idB", "undefined", "state", "setState", "useState", "idle", "useEffect", "monitorForElements", "canMonitor", "source", "data", "onDrop", "location", "target", "current", "dropTargets", "sourceData", "targetData", "sourceIdx", "findIndex", "targetIdx", "closestEdgeOfTarget", "extractClosestEdge", "destinationIndex", "getReorderDestinationIndex", "startIndex", "indexOfTarget", "axis", "idle", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "createContext", "ListItem", "children", "classNames", "item", "isItem", "dragPreview", "setState", "setRootState", "useListContext", "ref", "useRef", "dragHandleRef", "state", "useState", "useEffect", "element", "current", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "source", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "style", "width", "undefined", "onDragStart", "onDrop", "dropTargetForElements", "canDrop", "data", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "extractClosestEdge", "onDrag", "onDragLeave", "React", "div", "
|
|
3
|
+
"sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx", "../../../src/components/Tree/Tree.tsx", "../../../src/components/Tree/TreeContext.tsx", "../../../src/components/Tree/TreeItem.tsx", "../../../src/components/Tree/TreeItemHeading.tsx", "../../../src/components/Tree/TreeItemToggle.tsx", "../../../src/components/Tree/helpers.ts", "../../../src/util/path.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport {\n type Edge,\n attachClosestEdge,\n extractClosestEdge,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n type ComponentProps,\n type HTMLAttributes,\n type MutableRefObject,\n type PropsWithChildren,\n type ReactNode,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { Icon, type ThemedClassName, ListItem as NaturalListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = {};\n\nexport type ItemState =\n | {\n type: 'idle';\n }\n | {\n type: 'preview';\n container: HTMLElement;\n }\n | {\n type: 'is-dragging';\n }\n | {\n type: 'is-dragging-over';\n closestEdge: Edge | null;\n };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n 'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n item: T;\n dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n LIST_ITEM_NAME,\n defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n PropsWithChildren<{\n item: T;\n }> &\n HTMLAttributes<HTMLDivElement>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item, ...props }: ListItemProps<T>) => {\n const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n const ref = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLElement | null>(null);\n const [state, setState] = useState<ItemState>(idle);\n useEffect(() => {\n const element = ref.current;\n invariant(element);\n return combine(\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n //\n draggable({\n element,\n dragHandle: dragHandleRef.current!,\n getInitialData: () => item,\n onGenerateDragPreview: dragPreview\n ? ({ nativeSetDragImage, source }) => {\n const rect = source.element.getBoundingClientRect();\n setCustomNativeDragPreview({\n nativeSetDragImage,\n getOffset: ({ container }) => {\n const { height } = container.getBoundingClientRect();\n return {\n x: 20,\n y: height / 2,\n };\n },\n render: ({ container }) => {\n container.style.width = rect.width + 'px';\n setState({ type: 'preview', container });\n setRootState({ type: 'preview', container, item });\n return () => {}; // TODO(burdon): Cleanup.\n },\n });\n }\n : undefined,\n onDragStart: () => {\n setState({ type: 'is-dragging' });\n setRootState({ type: 'is-dragging', item });\n },\n onDrop: () => {\n setState(idle);\n setRootState(idle);\n },\n }),\n\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n //\n dropTargetForElements({\n element,\n canDrop: ({ source }) => {\n return source.element !== element && isItem(source.data);\n },\n getData: ({ input }) => {\n return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n },\n getIsSticky: () => true,\n onDragEnter: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState({ type: 'is-dragging-over', closestEdge });\n },\n onDrag: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState((current) => {\n if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n return current;\n }\n return { type: 'is-dragging-over', closestEdge };\n });\n },\n onDragLeave: () => {\n setState(idle);\n },\n onDrop: () => {\n setState(idle);\n },\n }),\n );\n }, [item]);\n\n return (\n <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n <div role='none' className='relative'>\n <div\n ref={ref}\n role='listitem'\n className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}\n {...props}\n >\n {children}\n </div>\n {state.type === 'is-dragging-over' && state.closestEdge && (\n <NaturalListItem.DropIndicator edge={state.closestEdge} />\n )}\n </div>\n </ListItemProvider>\n );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ classNames, icon, ...props }, forwardedRef) => {\n return (\n <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n <Icon icon={icon} classNames='cursor-pointer' size={4} />\n </button>\n );\n },\n);\n\nexport const ListItemDeleteButton = ({\n autoHide = true,\n classNames,\n disabled,\n ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n const { state } = useListContext('DELETE_BUTTON');\n const isDisabled = state.type !== 'idle' || disabled;\n return (\n <IconButton\n icon='ph--x--regular'\n disabled={isDisabled}\n classNames={[classNames, autoHide && disabled && 'hidden']}\n {...props}\n />\n );\n};\n\nexport const ListItemDragHandle = () => {\n const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n return <IconButton ref={dragHandleRef as any} icon='ph--dots-six-vertical--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n children,\n}: {\n children: ({ item }: { item: T }) => ReactNode;\n}) => {\n const { state } = useListContext('DRAG_PREVIEW');\n return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n <div className={mx('flex is-full gap-2', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n classNames,\n children,\n ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n <div className={mx('flex grow items-center truncate', classNames)} {...props}>\n {children}\n </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useCallback, useEffect, useState } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\n\nimport { idle, type ItemState, type ListItemRecord } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n isItem: (item: any) => boolean;\n getId?: (item: T) => string; // TODO(burdon): Require if T doesn't conform to type.\n dragPreview?: boolean;\n state: ItemState & { item?: T };\n setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n state: ListContext<T>['state'];\n items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n children?: (props: ListRendererProps<T>) => ReactNode;\n items?: T[];\n onMove?: (fromIndex: number, toIndex: number) => void;\n}> &\n Pick<ListContext<T>, 'isItem' | 'getId' | 'dragPreview'>;\n\nconst defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;\n\nexport const ListRoot = <T extends ListItemRecord>({\n classNames,\n children,\n items,\n isItem,\n getId = defaultGetId,\n onMove,\n ...props\n}: ListRootProps<T>) => {\n const isEqual = useCallback(\n (a: T, b: T) => {\n const idA = getId?.(a);\n const idB = getId?.(b);\n\n if (idA !== undefined && idB !== undefined) {\n return idA === idB;\n } else {\n // Fallback for primitive values or when getId fails.\n // NOTE(ZaymonFC): After drag and drop, pragmatic internally serializes drop targets which breaks reference equality.\n // You must provide an `getId` function that returns a stable identifier for your items.\n return a === b;\n }\n },\n [getId],\n );\n\n const [state, setState] = useState<ListContext<T>['state']>(idle);\n useEffect(() => {\n if (!items) {\n return;\n }\n\n return monitorForElements({\n canMonitor: ({ source }) => isItem(source.data),\n onDrop: ({ location, source }) => {\n const target = location.current.dropTargets[0];\n if (!target) {\n return;\n }\n\n const sourceData = source.data;\n const targetData = target.data;\n\n if (!isItem(sourceData) || !isItem(targetData)) {\n return;\n }\n\n const sourceIdx = items.findIndex((item) => isEqual(item, sourceData as T));\n const targetIdx = items.findIndex((item) => isEqual(item, targetData as T));\n if (targetIdx < 0 || sourceIdx < 0) {\n return;\n }\n const closestEdgeOfTarget = extractClosestEdge(targetData);\n const destinationIndex = getReorderDestinationIndex({\n closestEdgeOfTarget,\n startIndex: sourceIdx,\n indexOfTarget: targetIdx,\n axis: 'vertical',\n });\n\n onMove?.(sourceIdx, destinationIndex);\n },\n });\n }, [items, isEqual, onMove]);\n\n return (\n <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items: items ?? [] })}</ListProvider>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n IconButton,\n type IconButtonProps,\n ListItem,\n ListItemDeleteButton,\n ListItemDragHandle,\n ListItemDragPreview,\n type ListItemProps,\n type ListItemRecord,\n ListItemTitle,\n ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n Root: ListRoot,\n Item: ListItem,\n ItemDragPreview: ListItemDragPreview,\n ItemWrapper: ListItemWrapper,\n ItemDragHandle: ListItemDragHandle,\n ItemDeleteButton: ListItemDeleteButton,\n ItemTitle: ListItemTitle,\n IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useMemo } from 'react';\n\nimport { Treegrid, type TreegridRootProps } from '@dxos/react-ui';\n\nimport { type TreeContextType, TreeProvider } from './TreeContext';\nimport { TreeItem, type TreeItemProps } from './TreeItem';\n\nexport type TreeProps<T = any> = { root?: T; path?: string[]; id: string } & TreeContextType &\n Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &\n Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;\n\nexport const Tree = <T = any,>({\n root,\n path,\n id,\n getItems,\n getProps,\n isOpen,\n isCurrent,\n draggable = false,\n gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',\n classNames,\n renderColumns,\n canDrop,\n onOpenChange,\n onSelect,\n levelOffset,\n}: TreeProps<T>) => {\n const context = useMemo(\n () => ({\n getItems,\n getProps,\n isOpen,\n isCurrent,\n }),\n [getItems, getProps, isOpen, isCurrent],\n );\n const items = getItems(root);\n const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);\n\n return (\n <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>\n <TreeProvider value={context}>\n {items.map((item, index) => (\n <TreeItem\n key={item.id}\n item={item}\n last={index === items.length - 1}\n path={treePath}\n levelOffset={levelOffset}\n draggable={draggable}\n renderColumns={renderColumns}\n canDrop={canDrop}\n onOpenChange={onOpenChange}\n onSelect={onSelect}\n />\n ))}\n </TreeProvider>\n </Treegrid.Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\nimport { type Label } from '@dxos/react-ui';\n\nexport type PropsFromTreeItem = {\n id: string;\n label: Label;\n parentOf?: string[];\n icon?: string;\n disabled?: boolean;\n className?: string;\n headingClassName?: string;\n testId?: string;\n};\n\nexport type TreeContextType<T = any> = {\n getItems: (parent?: T) => T[];\n getProps: (item: T, parent: string[]) => PropsFromTreeItem;\n isOpen: (path: string[], item: T) => boolean;\n isCurrent: (path: string[], item: T) => boolean;\n};\n\nconst TreeContext = createContext<null | TreeContextType>(null);\n\nexport const useTree = () => useContext(TreeContext) ?? raise(new Error('TreeContext not found'));\n\nexport const TreeProvider = TreeContext.Provider;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport {\n attachInstruction,\n extractInstruction,\n type Instruction,\n type ItemMode,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';\nimport React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC, type KeyboardEvent } from 'react';\n\nimport { S } from '@dxos/echo-schema';\nimport { invariant } from '@dxos/invariant';\nimport { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';\nimport {\n ghostHover,\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n mx,\n} from '@dxos/react-ui-theme';\n\nimport { useTree } from './TreeContext';\nimport { TreeItemHeading } from './TreeItemHeading';\nimport { TreeItemToggle } from './TreeItemToggle';\nimport { DEFAULT_INDENTATION, paddingIndentation } from './helpers';\n\ntype TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';\n\nconst hoverableDescriptionIcons =\n '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';\n\nexport const TreeDataSchema = S.Struct({\n id: S.String,\n path: S.Array(S.String),\n item: S.Any,\n});\n\nexport type TreeData = S.Schema.Type<typeof TreeDataSchema>;\n\nexport const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSchema)(data);\n\nexport type TreeItemProps<T = any> = {\n item: T;\n path: string[];\n levelOffset?: number;\n last: boolean;\n draggable?: boolean;\n renderColumns?: FC<{\n item: T;\n path: string[];\n open: boolean;\n menuOpen: boolean;\n setMenuOpen: (open: boolean) => void;\n }>;\n canDrop?: (source: TreeData, target: TreeData) => boolean;\n onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;\n onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;\n};\n\nexport const RawTreeItem = <T = any,>({\n item,\n path: _path,\n last,\n draggable: _draggable,\n renderColumns: Columns,\n canDrop,\n onOpenChange,\n onSelect,\n levelOffset = 2,\n}: TreeItemProps<T>) => {\n const { getItems, getProps, isOpen, isCurrent } = useTree();\n const items = getItems(item);\n const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);\n const path = useMemo(() => [..._path, id], [_path, id]);\n const open = isOpen(path, item);\n const current = isCurrent(path, item);\n const level = path.length - levelOffset;\n const isBranch = !!parentOf;\n const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';\n const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);\n\n const rowRef = useRef<HTMLDivElement | null>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const openRef = useRef(false);\n const cancelExpandRef = useRef<NodeJS.Timeout | null>(null);\n const [_state, setState] = useState<TreeItemState>('idle');\n const [instruction, setInstruction] = useState<Instruction | null>(null);\n const [menuOpen, setMenuOpen] = useState(false);\n\n const cancelExpand = useCallback(() => {\n if (cancelExpandRef.current) {\n clearTimeout(cancelExpandRef.current);\n cancelExpandRef.current = null;\n }\n }, []);\n\n useEffect(() => {\n if (!_draggable) {\n return;\n }\n\n invariant(buttonRef.current);\n\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about\n return combine(\n draggable({\n element: buttonRef.current,\n getInitialData: () => data,\n onDragStart: () => {\n setState('dragging');\n if (open) {\n openRef.current = true;\n onOpenChange?.({ item, path, open: false });\n }\n },\n onDrop: () => {\n setState('idle');\n if (openRef.current) {\n onOpenChange?.({ item, path, open: true });\n }\n },\n }),\n // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx\n dropTargetForElements({\n element: buttonRef.current,\n getData: ({ input, element }) => {\n return attachInstruction(data, {\n input,\n element,\n indentPerLevel: DEFAULT_INDENTATION,\n currentLevel: level,\n mode,\n block: isBranch ? [] : ['make-child'],\n });\n },\n canDrop: ({ source }) => {\n const _canDrop = canDrop ?? (() => true);\n return source.element !== buttonRef.current && _canDrop(source.data as TreeData, data);\n },\n getIsSticky: () => true,\n onDrag: ({ self, source }) => {\n const instruction = extractInstruction(self.data);\n\n if (source.data.id !== id) {\n if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {\n cancelExpandRef.current = setTimeout(() => {\n onOpenChange?.({ item, path, open: true });\n }, 500);\n }\n\n if (instruction?.type !== 'make-child') {\n cancelExpand();\n }\n\n setInstruction(instruction);\n } else if (instruction?.type === 'reparent') {\n // TODO(wittjosiah): This is not occurring in the current implementation.\n setInstruction(instruction);\n } else {\n setInstruction(null);\n }\n },\n onDragLeave: () => {\n cancelExpand();\n setInstruction(null);\n },\n onDrop: () => {\n cancelExpand();\n setInstruction(null);\n },\n }),\n );\n }, [_draggable, item, id, mode, path, open, canDrop]);\n\n // Cancel expand on unmount.\n useEffect(() => () => cancelExpand(), [cancelExpand]);\n\n const handleOpenChange = useCallback(\n () => onOpenChange?.({ item, path, open: !open }),\n [onOpenChange, item, path, open],\n );\n\n const handleSelect = useCallback(\n (option = false) => {\n rowRef.current?.focus();\n onSelect?.({ item, path, current: !current, option });\n },\n [onSelect, item, path, current],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n isBranch && !open && handleOpenChange();\n break;\n case 'ArrowLeft':\n isBranch && open && handleOpenChange();\n break;\n case ' ':\n handleSelect(event.altKey);\n break;\n }\n },\n [isBranch, open, handleOpenChange, handleSelect],\n );\n\n return (\n <>\n <Treegrid.Row\n ref={rowRef}\n key={id}\n id={id}\n aria-labelledby={`${id}__label`}\n parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}\n classNames={mx(\n 'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface',\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n hoverableDescriptionIcons,\n ghostHover,\n className,\n )}\n data-itemid={id}\n data-testid={testId}\n // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS\n // without alerting the user (except for in the correct link element). See also:\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description\n aria-current={current ? ('' as 'page') : undefined}\n onKeyDown={handleKeyDown}\n onContextMenu={(event) => {\n event.preventDefault();\n setMenuOpen(true);\n }}\n >\n <Treegrid.Cell\n indent\n classNames='relative grid grid-cols-subgrid col-[tree-row]'\n style={paddingIndentation(level)}\n >\n <div role='none' className='flex items-center'>\n <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />\n <TreeItemHeading\n ref={buttonRef}\n label={label}\n icon={icon}\n className={headingClassName}\n disabled={disabled}\n current={current}\n onSelect={handleSelect}\n />\n </div>\n {Columns && <Columns item={item} path={path} open={open} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}\n {instruction && <NaturalTreeItem.DropIndicator instruction={instruction} gap={2} />}\n </Treegrid.Cell>\n </Treegrid.Row>\n {open &&\n items.map((item, index) => (\n <TreeItem\n key={item.id}\n item={item}\n path={path}\n last={index === items.length - 1}\n draggable={_draggable}\n renderColumns={Columns}\n canDrop={canDrop}\n onOpenChange={onOpenChange}\n onSelect={onSelect}\n />\n ))}\n </>\n );\n};\n\nexport const TreeItem = memo(RawTreeItem) as FC<TreeItemProps>;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallback } from 'react';\n\nimport { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';\nimport { TextTooltip } from '@dxos/react-ui-text-tooltip';\nimport { mx } from '@dxos/react-ui-theme';\n\n// TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct\n// rather than just making the item unselectable.\nexport type NavTreeItemHeadingProps = {\n label: Label;\n icon?: string;\n className?: string;\n disabled?: boolean;\n current?: boolean;\n onSelect?: (option: boolean) => void;\n};\n\nexport const TreeItemHeading = memo(\n forwardRef<HTMLButtonElement, NavTreeItemHeadingProps>(\n ({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {\n const { t } = useTranslation();\n\n const handleSelect = useCallback(\n (event: MouseEvent) => {\n onSelect?.(event.altKey);\n },\n [onSelect],\n );\n\n const handleButtonKeydown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n onSelect?.(event.altKey);\n }\n },\n [onSelect],\n );\n\n return (\n <TextTooltip\n text={toLocalizedString(label, t)}\n side='bottom'\n truncateQuery='span[data-tooltip]'\n onlyWhenTruncating\n asChild\n ref={forwardedRef}\n >\n <Button\n data-testid='treeItem.heading'\n variant='ghost'\n density='fine'\n classNames={mx(\n 'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',\n 'disabled:cursor-default disabled:opacity-100',\n className,\n )}\n disabled={disabled}\n onClick={handleSelect}\n onKeyDown={handleButtonKeydown}\n {...(current && { 'aria-current': 'location' })}\n >\n {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={4} classNames='is-[1em] bs-[1em] mlb-1' />}\n <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>\n {toLocalizedString(label, t)}\n </span>\n </Button>\n </TextTooltip>\n );\n },\n ),\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, memo } from 'react';\n\nimport { Button, Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type TreeItemToggleProps = {\n open?: boolean;\n isBranch?: boolean;\n onToggle?: () => void;\n hidden?: boolean;\n};\n\nexport const TreeItemToggle = memo(\n forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, hidden, onToggle }, forwardedRef) => {\n return (\n <Button\n ref={forwardedRef}\n data-testid='treeItem.toggle'\n aria-expanded={open}\n variant='ghost'\n density='fine'\n classNames={mx('is-4 dx-focus-ring-inset pli-0', hidden ? 'hidden' : !isBranch && 'invisible')}\n onClick={onToggle}\n >\n <Icon\n icon='ph--caret-right--regular'\n size={3}\n classNames={mx('transition duration-200', open && 'rotate-90')}\n />\n </Button>\n );\n }),\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const DEFAULT_INDENTATION = 8;\n\nexport const paddingIndentation = (level: number, indentation = DEFAULT_INDENTATION) => ({\n paddingInlineStart: `${(level - 1) * indentation}px`,\n});\n", "//\n// Copyright 2023 DXOS.org\n//\n\nconst SEPARATOR = '~';\n\nexport const Path = {\n create: (...args: string[]) => args.join(SEPARATOR),\n\n parts: (path: string) => path.split(SEPARATOR),\n length: (path: string) => path.split(SEPARATOR).length,\n first: (path: string) => path.split(SEPARATOR)[0] ?? path,\n last: (path: string) => path.split(SEPARATOR).at(-1) ?? path,\n parent: (path: string) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),\n\n hasRoot: (path: string, id: string) => Path.first(path) === id,\n hasChild: (path: string, compare: string) => Path.parent(compare) === path,\n hasDescendent: (path: string, compare: string) => compare !== path && compare.startsWith(path),\n siblings: (path: string, compare: string) => Path.parent(path) === Path.parent(compare),\n onPath: (path: string, id: string) => Path.parts(path).includes(id),\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "ListItem", "NaturalListItem", "mx", "monitorForElements", "extractClosestEdge", "getReorderDestinationIndex", "createContext", "React", "useCallback", "useEffect", "useState", "LIST_NAME", "ListProvider", "useListContext", "createContext", "defaultGetId", "item", "id", "ListRoot", "classNames", "children", "items", "isItem", "getId", "onMove", "props", "isEqual", "useCallback", "a", "b", "idA", "idB", "undefined", "state", "setState", "useState", "idle", "useEffect", "monitorForElements", "canMonitor", "source", "data", "onDrop", "location", "target", "current", "dropTargets", "sourceData", "targetData", "sourceIdx", "findIndex", "targetIdx", "closestEdgeOfTarget", "extractClosestEdge", "destinationIndex", "getReorderDestinationIndex", "startIndex", "indexOfTarget", "axis", "idle", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "createContext", "ListItem", "children", "classNames", "item", "props", "isItem", "dragPreview", "setState", "setRootState", "useListContext", "ref", "useRef", "dragHandleRef", "state", "useState", "useEffect", "element", "current", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "source", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "style", "width", "undefined", "onDragStart", "onDrop", "dropTargetForElements", "canDrop", "data", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "extractClosestEdge", "onDrag", "onDragLeave", "React", "div", "role", "className", "mx", "NaturalListItem", "DropIndicator", "edge", "IconButton", "forwardRef", "icon", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "isDisabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "ListRoot", "Item", "ListItem", "ItemDragPreview", "ListItemDragPreview", "ItemWrapper", "ListItemWrapper", "ItemDragHandle", "ListItemDragHandle", "ItemDeleteButton", "ListItemDeleteButton", "ItemTitle", "ListItemTitle", "IconButton", "React", "useMemo", "Treegrid", "createContext", "useContext", "raise", "TreeContext", "createContext", "useTree", "useContext", "raise", "Error", "TreeProvider", "Provider", "combine", "draggable", "dropTargetForElements", "attachInstruction", "extractInstruction", "React", "memo", "useCallback", "useEffect", "useMemo", "useRef", "useState", "S", "invariant", "Treegrid", "TreeItem", "NaturalTreeItem", "ghostHover", "hoverableControls", "hoverableFocusedKeyboardControls", "hoverableFocusedWithinControls", "mx", "React", "forwardRef", "memo", "useCallback", "Button", "Icon", "toLocalizedString", "useTranslation", "TextTooltip", "mx", "TreeItemHeading", "memo", "forwardRef", "label", "icon", "className", "disabled", "current", "onSelect", "forwardedRef", "t", "useTranslation", "handleSelect", "useCallback", "event", "altKey", "handleButtonKeydown", "key", "preventDefault", "stopPropagation", "React", "TextTooltip", "text", "toLocalizedString", "side", "truncateQuery", "onlyWhenTruncating", "asChild", "ref", "Button", "data-testid", "variant", "density", "classNames", "mx", "onClick", "onKeyDown", "Icon", "size", "span", "data-tooltip", "React", "forwardRef", "memo", "Button", "Icon", "mx", "TreeItemToggle", "memo", "forwardRef", "open", "isBranch", "hidden", "onToggle", "forwardedRef", "React", "Button", "ref", "data-testid", "aria-expanded", "variant", "density", "classNames", "mx", "onClick", "Icon", "icon", "size", "DEFAULT_INDENTATION", "paddingIndentation", "level", "indentation", "paddingInlineStart", "hoverableDescriptionIcons", "TreeDataSchema", "S", "Struct", "id", "String", "path", "Array", "item", "Any", "isTreeData", "data", "is", "RawTreeItem", "_path", "last", "draggable", "_draggable", "renderColumns", "Columns", "canDrop", "onOpenChange", "onSelect", "levelOffset", "getItems", "getProps", "isOpen", "isCurrent", "useTree", "items", "label", "parentOf", "icon", "disabled", "className", "headingClassName", "testId", "useMemo", "open", "current", "level", "length", "isBranch", "mode", "rowRef", "useRef", "buttonRef", "openRef", "cancelExpandRef", "_state", "setState", "useState", "instruction", "setInstruction", "menuOpen", "setMenuOpen", "cancelExpand", "useCallback", "clearTimeout", "useEffect", "invariant", "combine", "element", "getInitialData", "onDragStart", "onDrop", "dropTargetForElements", "getData", "input", "attachInstruction", "indentPerLevel", "DEFAULT_INDENTATION", "currentLevel", "block", "source", "_canDrop", "getIsSticky", "onDrag", "self", "extractInstruction", "type", "setTimeout", "onDragLeave", "handleOpenChange", "handleSelect", "option", "focus", "handleKeyDown", "event", "key", "altKey", "React", "Treegrid", "Row", "ref", "aria-labelledby", "join", "PARENT_OF_SEPARATOR", "classNames", "mx", "hoverableControls", "hoverableFocusedKeyboardControls", "hoverableFocusedWithinControls", "ghostHover", "data-itemid", "data-testid", "aria-current", "undefined", "onKeyDown", "onContextMenu", "preventDefault", "Cell", "indent", "style", "paddingIndentation", "div", "role", "TreeItemToggle", "onToggle", "TreeItemHeading", "NaturalTreeItem", "DropIndicator", "gap", "map", "index", "TreeItem", "memo", "Tree", "root", "path", "id", "getItems", "getProps", "isOpen", "isCurrent", "draggable", "gridTemplateColumns", "classNames", "renderColumns", "canDrop", "onOpenChange", "onSelect", "levelOffset", "context", "useMemo", "items", "treePath", "React", "Treegrid", "Root", "TreeProvider", "value", "map", "item", "index", "TreeItem", "key", "last", "length", "SEPARATOR", "Path", "create", "args", "join", "parts", "path", "split", "length", "first", "last", "at", "parent", "slice", "hasRoot", "id", "hasChild", "compare", "hasDescendent", "startsWith", "siblings", "onPath", "includes"]
|
|
7
7
|
}
|