@dxos/react-ui-list 0.6.14-main.f49f251 → 0.6.14-staging.54a8bab
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 +26 -12
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/List/List.d.ts +1 -1
- package/dist/types/src/components/List/List.stories.d.ts.map +1 -1
- package/dist/types/src/components/List/ListRoot.d.ts +2 -3
- package/dist/types/src/components/List/ListRoot.d.ts.map +1 -1
- package/package.json +16 -16
- package/src/components/List/List.stories.tsx +5 -1
- package/src/components/List/ListItem.tsx +2 -2
- package/src/components/List/ListRoot.tsx +25 -6
|
@@ -53,10 +53,22 @@ import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/ad
|
|
|
53
53
|
import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
|
|
54
54
|
import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
|
|
55
55
|
import { createContext } from "@radix-ui/react-context";
|
|
56
|
-
import React2, { useEffect, useState } from "react";
|
|
56
|
+
import React2, { useCallback, useEffect, useState } from "react";
|
|
57
57
|
var LIST_NAME = "List";
|
|
58
58
|
var [ListProvider, useListContext] = createContext(LIST_NAME);
|
|
59
|
-
var
|
|
59
|
+
var defaultGetId = (item) => item?.id;
|
|
60
|
+
var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultGetId, onMove, ...props }) => {
|
|
61
|
+
const isEqual = useCallback((a, b) => {
|
|
62
|
+
const idA = getId?.(a);
|
|
63
|
+
const idB = getId?.(b);
|
|
64
|
+
if (idA !== void 0 && idB !== void 0) {
|
|
65
|
+
return idA === idB;
|
|
66
|
+
} else {
|
|
67
|
+
return a === b;
|
|
68
|
+
}
|
|
69
|
+
}, [
|
|
70
|
+
getId
|
|
71
|
+
]);
|
|
60
72
|
const [state, setState] = useState(idle);
|
|
61
73
|
useEffect(() => {
|
|
62
74
|
if (!items) {
|
|
@@ -90,7 +102,9 @@ var ListRoot = ({ classNames, children, items, isItem: isItem2, isEqual = (a, b)
|
|
|
90
102
|
}
|
|
91
103
|
});
|
|
92
104
|
}, [
|
|
93
|
-
items
|
|
105
|
+
items,
|
|
106
|
+
isEqual,
|
|
107
|
+
onMove
|
|
94
108
|
]);
|
|
95
109
|
return /* @__PURE__ */ React2.createElement(ListProvider, {
|
|
96
110
|
isItem: isItem2,
|
|
@@ -267,7 +281,7 @@ var ListItemDragHandle = () => {
|
|
|
267
281
|
const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
|
|
268
282
|
return /* @__PURE__ */ React3.createElement(IconButton, {
|
|
269
283
|
ref: dragHandleRef,
|
|
270
|
-
icon: "ph--dots-six--regular"
|
|
284
|
+
icon: "ph--dots-six-vertical--regular"
|
|
271
285
|
});
|
|
272
286
|
};
|
|
273
287
|
var ListItemDragPreview = ({ children }) => {
|
|
@@ -277,7 +291,7 @@ var ListItemDragPreview = ({ children }) => {
|
|
|
277
291
|
}), state.container) : null;
|
|
278
292
|
};
|
|
279
293
|
var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React3.createElement("div", {
|
|
280
|
-
className: mx2("flex
|
|
294
|
+
className: mx2("flex is-full gap-2", classNames)
|
|
281
295
|
}, children);
|
|
282
296
|
var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React3.createElement("div", {
|
|
283
297
|
className: mx2("flex grow items-center truncate", classNames),
|
|
@@ -305,7 +319,7 @@ import { Path } from "@dxos/react-ui-mosaic";
|
|
|
305
319
|
import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
|
306
320
|
import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
307
321
|
import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
|
|
308
|
-
import React7, { memo as memo3, useCallback as
|
|
322
|
+
import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
|
|
309
323
|
import { invariant as invariant2 } from "@dxos/invariant";
|
|
310
324
|
import { Treegrid } from "@dxos/react-ui";
|
|
311
325
|
import { focusRing, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/react-ui-theme";
|
|
@@ -358,13 +372,13 @@ var DropIndicator2 = ({ instruction }) => {
|
|
|
358
372
|
};
|
|
359
373
|
|
|
360
374
|
// packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx
|
|
361
|
-
import React5, { forwardRef as forwardRef2, memo, useCallback } from "react";
|
|
375
|
+
import React5, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
|
|
362
376
|
import { Button, Icon as Icon2, toLocalizedString, useTranslation } from "@dxos/react-ui";
|
|
363
377
|
import { TextTooltip } from "@dxos/react-ui-text-tooltip";
|
|
364
378
|
import { mx as mx4 } from "@dxos/react-ui-theme";
|
|
365
379
|
var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
|
|
366
380
|
const { t } = useTranslation();
|
|
367
|
-
const handleButtonKeydown =
|
|
381
|
+
const handleButtonKeydown = useCallback2((event) => {
|
|
368
382
|
if (event.key === " " || event.key === "Enter") {
|
|
369
383
|
event.preventDefault();
|
|
370
384
|
event.stopPropagation();
|
|
@@ -450,7 +464,7 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
|
|
|
450
464
|
const [_state, setState] = useState3("idle");
|
|
451
465
|
const [instruction, setInstruction] = useState3(null);
|
|
452
466
|
const [menuOpen, setMenuOpen] = useState3(false);
|
|
453
|
-
const cancelExpand =
|
|
467
|
+
const cancelExpand = useCallback3(() => {
|
|
454
468
|
if (cancelExpandRef.current) {
|
|
455
469
|
clearTimeout(cancelExpandRef.current);
|
|
456
470
|
cancelExpandRef.current = null;
|
|
@@ -541,12 +555,12 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
|
|
|
541
555
|
useEffect3(() => () => cancelExpand(), [
|
|
542
556
|
cancelExpand
|
|
543
557
|
]);
|
|
544
|
-
const handleOpenChange =
|
|
558
|
+
const handleOpenChange = useCallback3(() => onOpenChange?.(item, !open), [
|
|
545
559
|
onOpenChange,
|
|
546
560
|
item,
|
|
547
561
|
open
|
|
548
562
|
]);
|
|
549
|
-
const handleSelect =
|
|
563
|
+
const handleSelect = useCallback3(() => {
|
|
550
564
|
rowRef.current?.focus();
|
|
551
565
|
onSelect?.(item, !current);
|
|
552
566
|
}, [
|
|
@@ -554,7 +568,7 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
|
|
|
554
568
|
item,
|
|
555
569
|
current
|
|
556
570
|
]);
|
|
557
|
-
const handleKeyDown =
|
|
571
|
+
const handleKeyDown = useCallback3((event) => {
|
|
558
572
|
switch (event.key) {
|
|
559
573
|
case "ArrowRight":
|
|
560
574
|
isBranch && !open && handleOpenChange();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/DropIndicator.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx", "../../../src/components/Tree/Tree.tsx", "../../../src/components/Tree/TreeItem.tsx", "../../../src/components/Tree/DropIndicator.tsx", "../../../src/components/Tree/TreeItemHeading.tsx", "../../../src/components/Tree/TreeItemToggle.tsx", "../../../src/components/Tree/helpers.ts", "../../../src/components/Tree/types.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 } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\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 },\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 && <DropIndicator edge={state.closestEdge} />}\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 ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n const { state } = useListContext('DELETE_BUTTON');\n const disabled = state.type !== 'idle';\n return (\n <IconButton\n icon='ph--x--regular'\n disabled={disabled}\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--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 w-full', 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 { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n top: 'horizontal',\n bottom: 'horizontal',\n left: 'vertical',\n right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n top: 'top-[--line-offset] before:top-[--offset-terminal]',\n right: 'right-[--line-offset] before:right-[--offset-terminal]',\n bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n const orientation = edgeToOrientationMap[edge];\n\n return (\n <div\n style={\n {\n '--line-thickness': `${strokeSize}px`,\n '--line-offset': `${lineOffset}`,\n '--terminal-size': `${terminalSize}px`,\n '--terminal-radius': `${terminalSize / 2}px`,\n '--negative-terminal-size': `-${terminalSize}px`,\n '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n } as CSSProperties\n }\n className={mx(\n 'absolute z-10 pointer-events-none bg-blue-700',\n \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n 'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n orientationStyles[orientation],\n edgeStyles[edge],\n )}\n ></div>\n );\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, 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 isEqual?: (item1: T, item2: T) => 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' | 'isEqual' | 'getId' | 'dragPreview'>;\n\nexport const ListRoot = <T extends ListItemRecord>({\n classNames,\n children,\n items,\n isItem,\n isEqual = (a, b) => (getId ? getId(a) === getId(b) : a === b),\n getId,\n onMove,\n ...props\n}: ListRootProps<T>) => {\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 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 onMove?.(sourceIdx, destinationIndex);\n },\n });\n }, [items]);\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 from 'react';\n\nimport { Treegrid, type TreegridRootProps } from '@dxos/react-ui';\nimport { Path } from '@dxos/react-ui-mosaic';\n\nimport { TreeItem, type TreeItemProps } from './TreeItem';\nimport { getMode } from './helpers';\nimport { type ItemType } from './types';\n\nexport type TreeProps<T extends ItemType = ItemType> = {\n items: T[];\n open: string[];\n current: string[];\n} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &\n Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;\n\nexport const Tree = <T extends ItemType = ItemType>({\n items,\n open,\n current,\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 return (\n <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>\n {items.map((item, i) => {\n const path = Path.create(...item.path);\n\n return (\n <TreeItem<T>\n key={item.id}\n item={item}\n mode={getMode(items, i)}\n open={open.includes(path)}\n // TODO(wittjosiah): This should also be path-based.\n current={current.includes(item.id)}\n draggable={draggable}\n renderColumns={renderColumns}\n canDrop={canDrop}\n onOpenChange={onOpenChange}\n onSelect={onSelect}\n />\n );\n })}\n </Treegrid.Root>\n );\n};\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';\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, useRef, useState, type FC, type KeyboardEvent } from 'react';\n\nimport { invariant } from '@dxos/invariant';\nimport { Treegrid } from '@dxos/react-ui';\nimport {\n focusRing,\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n mx,\n} from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { TreeItemHeading } from './TreeItemHeading';\nimport { TreeItemToggle } from './TreeItemToggle';\nimport { DEFAULT_INDENTATION, paddingIndendation } from './helpers';\nimport { type ItemType } from './types';\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\n// TODO(burdon): Make generic?\nexport type TreeItemProps<T extends ItemType = ItemType> = {\n item: T;\n mode: ItemMode;\n open: boolean;\n current: boolean;\n draggable?: boolean;\n renderColumns?: FC<{ item: T; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;\n canDrop?: (source: T, target: T) => boolean;\n onOpenChange?: (item: T, nextOpen: boolean) => void;\n onSelect?: (item: T, nextState: boolean) => void;\n};\n\n// TODO(wittjosiah): Styles.\nexport const RawTreeItem = <T extends ItemType = ItemType>({\n item,\n mode,\n open,\n current,\n draggable: _draggable,\n renderColumns: Columns,\n canDrop,\n onOpenChange,\n onSelect,\n}: TreeItemProps<T>) => {\n const { id, label, icon, className, headingClassName, disabled, path, parentOf } = item;\n const level = path.length - 2;\n const isBranch = !!parentOf;\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: () => item,\n onDragStart: () => {\n setState('dragging');\n if (open) {\n openRef.current = true;\n onOpenChange?.(item, false);\n }\n },\n onDrop: () => {\n setState('idle');\n if (openRef.current) {\n onOpenChange?.(item, true);\n }\n },\n }),\n dropTargetForElements({\n element: buttonRef.current,\n getData: ({ input, element }) => {\n return attachInstruction(item, {\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 T, item);\n },\n getIsSticky: () => true,\n onDrag: ({ self, source }) => {\n const instruction = extractInstruction(self.data);\n\n if (source.data.id !== item.id) {\n if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {\n cancelExpandRef.current = setTimeout(() => {\n onOpenChange?.(item, 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, mode, open, canDrop]);\n\n // Cancel expand on unmount.\n useEffect(() => () => cancelExpand(), [cancelExpand]);\n\n const handleOpenChange = useCallback(() => onOpenChange?.(item, !open), [onOpenChange, item, open]);\n\n const handleSelect = useCallback(() => {\n rowRef.current?.focus();\n onSelect?.(item, !current);\n }, [onSelect, item, current]);\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();\n break;\n }\n },\n [isBranch, open, handleOpenChange, handleSelect],\n );\n\n return (\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] aria-[current]:bg-input',\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n hoverableDescriptionIcons,\n focusRing,\n className,\n )}\n data-itemid={item.id}\n data-testid={item.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} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}\n {instruction && <DropIndicator instruction={instruction} />}\n </Treegrid.Cell>\n </Treegrid.Row>\n );\n};\n\nexport const TreeItem = memo(RawTreeItem) as <T extends ItemType = ItemType>(prosp: TreeItemProps<T>) => JSX.Element;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';\nimport React, { type HTMLAttributes, type CSSProperties } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\n// Tree item hitbox\n// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item\n\nexport type DropIndicatorProps = {\n instruction: Instruction;\n};\n\ntype InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];\ntype Orientation = 'sibling' | 'child';\n\nconst edgeToOrientationMap: Record<InstructionType, Orientation> = {\n 'reorder-above': 'sibling',\n 'reorder-below': 'sibling',\n 'make-child': 'child',\n reparent: 'child',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n // TODO(wittjosiah): Stop using left/right here.\n sibling:\n 'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',\n child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',\n};\n\nconst instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {\n 'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',\n 'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',\n 'make-child': 'border-accentSurface',\n // TODO(wittjosiah): This is not occurring in the current implementation.\n reparent: '',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\nconst gap = '0px';\n\nexport const DropIndicator = ({ instruction }: DropIndicatorProps) => {\n const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n const isBlocked = instruction.type === 'instruction-blocked';\n const desiredInstruction = isBlocked ? instruction.desired : instruction;\n const orientation = edgeToOrientationMap[desiredInstruction.type];\n\n if (isBlocked) {\n return null;\n }\n\n return (\n <div\n style={\n {\n '--line-thickness': `${strokeSize}px`,\n '--line-offset': `${lineOffset}`,\n '--terminal-size': `${terminalSize}px`,\n '--terminal-radius': `${terminalSize / 2}px`,\n '--negative-terminal-size': `-${terminalSize}px`,\n '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,\n } as CSSProperties\n }\n className={mx(\n 'absolute z-10 pointer-events-none',\n 'before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute',\n 'before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full',\n orientationStyles[orientation],\n instructionStyles[desiredInstruction.type],\n )}\n ></div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type KeyboardEvent, 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\nexport type NavTreeItemHeadingProps = {\n label: Label;\n icon?: string;\n className?: string;\n disabled?: boolean;\n current?: boolean;\n onSelect?: () => 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 handleButtonKeydown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n onSelect?.();\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('grow gap-1 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent', className)}\n disabled={disabled}\n onClick={onSelect}\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'>{toLocalizedString(label, t)}</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 variant='ghost'\n density='fine'\n classNames={mx('!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\nimport { type ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';\n\nimport { type ItemType } from './types';\n\nexport const DEFAULT_INDENTATION = 8;\n\nexport const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({\n paddingInlineStart: `${(level - 1) * indentation}px`,\n});\n\nexport const getMode = (items: ItemType[], index: number): ItemMode => {\n const item = items[index];\n const next = items[index + 1];\n if (!next || item.path.length > next.path.length) {\n return 'last-in-group';\n } else if (item.path.length < next.path.length) {\n return 'expanded';\n } else {\n return 'standard';\n }\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/echo-schema';\n\nconst LabelSchema = S.Union(\n S.String,\n S.Tuple(\n S.String,\n S.Struct({\n ns: S.String,\n count: S.optional(S.Number),\n }),\n ),\n);\n\nexport const ItemSchema = S.mutable(\n S.Struct({\n id: S.String,\n label: S.mutable(LabelSchema),\n icon: S.optional(S.String),\n disabled: S.optional(S.Boolean),\n className: S.optional(S.String),\n headingClassName: S.optional(S.String),\n testId: S.optional(S.String),\n path: S.Array(S.String),\n parentOf: S.optional(S.Array(S.String)),\n }),\n);\n\nexport type ItemType = S.Schema.Type<typeof ItemSchema>;\n\nexport const isItem: (item: unknown) => boolean = S.is(ItemSchema);\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "mx", "React", "mx", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "div", "style", "className", "mx", "monitorForElements", "extractClosestEdge", "getReorderDestinationIndex", "createContext", "React", "useEffect", "useState", "LIST_NAME", "ListProvider", "useListContext", "createContext", "ListRoot", "classNames", "children", "items", "isItem", "isEqual", "a", "b", "
|
|
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 } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\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 },\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 && <DropIndicator edge={state.closestEdge} />}\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 ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n const { state } = useListContext('DELETE_BUTTON');\n const disabled = state.type !== 'idle';\n return (\n <IconButton\n icon='ph--x--regular'\n disabled={disabled}\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 { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n top: 'horizontal',\n bottom: 'horizontal',\n left: 'vertical',\n right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n top: 'top-[--line-offset] before:top-[--offset-terminal]',\n right: 'right-[--line-offset] before:right-[--offset-terminal]',\n bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n const orientation = edgeToOrientationMap[edge];\n\n return (\n <div\n style={\n {\n '--line-thickness': `${strokeSize}px`,\n '--line-offset': `${lineOffset}`,\n '--terminal-size': `${terminalSize}px`,\n '--terminal-radius': `${terminalSize / 2}px`,\n '--negative-terminal-size': `-${terminalSize}px`,\n '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n } as CSSProperties\n }\n className={mx(\n 'absolute z-10 pointer-events-none bg-blue-700',\n \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n 'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n orientationStyles[orientation],\n edgeStyles[edge],\n )}\n ></div>\n );\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 from 'react';\n\nimport { Treegrid, type TreegridRootProps } from '@dxos/react-ui';\nimport { Path } from '@dxos/react-ui-mosaic';\n\nimport { TreeItem, type TreeItemProps } from './TreeItem';\nimport { getMode } from './helpers';\nimport { type ItemType } from './types';\n\nexport type TreeProps<T extends ItemType = ItemType> = {\n items: T[];\n open: string[];\n current: string[];\n} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &\n Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;\n\nexport const Tree = <T extends ItemType = ItemType>({\n items,\n open,\n current,\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 return (\n <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>\n {items.map((item, i) => {\n const path = Path.create(...item.path);\n\n return (\n <TreeItem<T>\n key={item.id}\n item={item}\n mode={getMode(items, i)}\n open={open.includes(path)}\n // TODO(wittjosiah): This should also be path-based.\n current={current.includes(item.id)}\n draggable={draggable}\n renderColumns={renderColumns}\n canDrop={canDrop}\n onOpenChange={onOpenChange}\n onSelect={onSelect}\n />\n );\n })}\n </Treegrid.Root>\n );\n};\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';\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, useRef, useState, type FC, type KeyboardEvent } from 'react';\n\nimport { invariant } from '@dxos/invariant';\nimport { Treegrid } from '@dxos/react-ui';\nimport {\n focusRing,\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n mx,\n} from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { TreeItemHeading } from './TreeItemHeading';\nimport { TreeItemToggle } from './TreeItemToggle';\nimport { DEFAULT_INDENTATION, paddingIndendation } from './helpers';\nimport { type ItemType } from './types';\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\n// TODO(burdon): Make generic?\nexport type TreeItemProps<T extends ItemType = ItemType> = {\n item: T;\n mode: ItemMode;\n open: boolean;\n current: boolean;\n draggable?: boolean;\n renderColumns?: FC<{ item: T; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;\n canDrop?: (source: T, target: T) => boolean;\n onOpenChange?: (item: T, nextOpen: boolean) => void;\n onSelect?: (item: T, nextState: boolean) => void;\n};\n\n// TODO(wittjosiah): Styles.\nexport const RawTreeItem = <T extends ItemType = ItemType>({\n item,\n mode,\n open,\n current,\n draggable: _draggable,\n renderColumns: Columns,\n canDrop,\n onOpenChange,\n onSelect,\n}: TreeItemProps<T>) => {\n const { id, label, icon, className, headingClassName, disabled, path, parentOf } = item;\n const level = path.length - 2;\n const isBranch = !!parentOf;\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: () => item,\n onDragStart: () => {\n setState('dragging');\n if (open) {\n openRef.current = true;\n onOpenChange?.(item, false);\n }\n },\n onDrop: () => {\n setState('idle');\n if (openRef.current) {\n onOpenChange?.(item, true);\n }\n },\n }),\n dropTargetForElements({\n element: buttonRef.current,\n getData: ({ input, element }) => {\n return attachInstruction(item, {\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 T, item);\n },\n getIsSticky: () => true,\n onDrag: ({ self, source }) => {\n const instruction = extractInstruction(self.data);\n\n if (source.data.id !== item.id) {\n if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {\n cancelExpandRef.current = setTimeout(() => {\n onOpenChange?.(item, 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, mode, open, canDrop]);\n\n // Cancel expand on unmount.\n useEffect(() => () => cancelExpand(), [cancelExpand]);\n\n const handleOpenChange = useCallback(() => onOpenChange?.(item, !open), [onOpenChange, item, open]);\n\n const handleSelect = useCallback(() => {\n rowRef.current?.focus();\n onSelect?.(item, !current);\n }, [onSelect, item, current]);\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();\n break;\n }\n },\n [isBranch, open, handleOpenChange, handleSelect],\n );\n\n return (\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] aria-[current]:bg-input',\n hoverableControls,\n hoverableFocusedKeyboardControls,\n hoverableFocusedWithinControls,\n hoverableDescriptionIcons,\n focusRing,\n className,\n )}\n data-itemid={item.id}\n data-testid={item.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} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}\n {instruction && <DropIndicator instruction={instruction} />}\n </Treegrid.Cell>\n </Treegrid.Row>\n );\n};\n\nexport const TreeItem = memo(RawTreeItem) as <T extends ItemType = ItemType>(prosp: TreeItemProps<T>) => JSX.Element;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';\nimport React, { type HTMLAttributes, type CSSProperties } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\n// Tree item hitbox\n// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item\n\nexport type DropIndicatorProps = {\n instruction: Instruction;\n};\n\ntype InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];\ntype Orientation = 'sibling' | 'child';\n\nconst edgeToOrientationMap: Record<InstructionType, Orientation> = {\n 'reorder-above': 'sibling',\n 'reorder-below': 'sibling',\n 'make-child': 'child',\n reparent: 'child',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n // TODO(wittjosiah): Stop using left/right here.\n sibling:\n 'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',\n child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',\n};\n\nconst instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {\n 'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',\n 'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',\n 'make-child': 'border-accentSurface',\n // TODO(wittjosiah): This is not occurring in the current implementation.\n reparent: '',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\nconst gap = '0px';\n\nexport const DropIndicator = ({ instruction }: DropIndicatorProps) => {\n const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n const isBlocked = instruction.type === 'instruction-blocked';\n const desiredInstruction = isBlocked ? instruction.desired : instruction;\n const orientation = edgeToOrientationMap[desiredInstruction.type];\n\n if (isBlocked) {\n return null;\n }\n\n return (\n <div\n style={\n {\n '--line-thickness': `${strokeSize}px`,\n '--line-offset': `${lineOffset}`,\n '--terminal-size': `${terminalSize}px`,\n '--terminal-radius': `${terminalSize / 2}px`,\n '--negative-terminal-size': `-${terminalSize}px`,\n '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,\n } as CSSProperties\n }\n className={mx(\n 'absolute z-10 pointer-events-none',\n 'before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute',\n 'before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full',\n orientationStyles[orientation],\n instructionStyles[desiredInstruction.type],\n )}\n ></div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type KeyboardEvent, 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\nexport type NavTreeItemHeadingProps = {\n label: Label;\n icon?: string;\n className?: string;\n disabled?: boolean;\n current?: boolean;\n onSelect?: () => 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 handleButtonKeydown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n onSelect?.();\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('grow gap-1 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent', className)}\n disabled={disabled}\n onClick={onSelect}\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'>{toLocalizedString(label, t)}</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 variant='ghost'\n density='fine'\n classNames={mx('!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\nimport { type ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';\n\nimport { type ItemType } from './types';\n\nexport const DEFAULT_INDENTATION = 8;\n\nexport const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({\n paddingInlineStart: `${(level - 1) * indentation}px`,\n});\n\nexport const getMode = (items: ItemType[], index: number): ItemMode => {\n const item = items[index];\n const next = items[index + 1];\n if (!next || item.path.length > next.path.length) {\n return 'last-in-group';\n } else if (item.path.length < next.path.length) {\n return 'expanded';\n } else {\n return 'standard';\n }\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/echo-schema';\n\nconst LabelSchema = S.Union(\n S.String,\n S.Tuple(\n S.String,\n S.Struct({\n ns: S.String,\n count: S.optional(S.Number),\n }),\n ),\n);\n\nexport const ItemSchema = S.mutable(\n S.Struct({\n id: S.String,\n label: S.mutable(LabelSchema),\n icon: S.optional(S.String),\n disabled: S.optional(S.Boolean),\n className: S.optional(S.String),\n headingClassName: S.optional(S.String),\n testId: S.optional(S.String),\n path: S.Array(S.String),\n parentOf: S.optional(S.Array(S.String)),\n }),\n);\n\nexport type ItemType = S.Schema.Type<typeof ItemSchema>;\n\nexport const isItem: (item: unknown) => boolean = S.is(ItemSchema);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "mx", "React", "mx", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "div", "style", "className", "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", "React", "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", "className", "role", "mx", "DropIndicator", "edge", "IconButton", "forwardRef", "icon", "props", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "ListRoot", "Item", "ListItem", "ItemDragPreview", "ListItemDragPreview", "ItemWrapper", "ListItemWrapper", "ItemDragHandle", "ListItemDragHandle", "ItemDeleteButton", "ListItemDeleteButton", "ItemTitle", "ListItemTitle", "IconButton", "React", "Treegrid", "Path", "combine", "draggable", "dropTargetForElements", "attachInstruction", "extractInstruction", "React", "memo", "useCallback", "useEffect", "useRef", "useState", "invariant", "Treegrid", "focusRing", "hoverableControls", "hoverableFocusedKeyboardControls", "hoverableFocusedWithinControls", "mx", "React", "mx", "edgeToOrientationMap", "reparent", "orientationStyles", "sibling", "child", "instructionStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "gap", "DropIndicator", "instruction", "lineOffset", "isBlocked", "type", "desiredInstruction", "desired", "orientation", "React", "div", "style", "currentLevel", "indentPerLevel", "className", "mx", "React", "forwardRef", "memo", "useCallback", "Button", "Icon", "toLocalizedString", "useTranslation", "TextTooltip", "mx", "TreeItemHeading", "memo", "forwardRef", "label", "icon", "className", "disabled", "current", "onSelect", "forwardedRef", "t", "useTranslation", "handleButtonKeydown", "useCallback", "event", "key", "preventDefault", "stopPropagation", "React", "TextTooltip", "text", "toLocalizedString", "side", "truncateQuery", "onlyWhenTruncating", "asChild", "ref", "Button", "data-testid", "variant", "density", "classNames", "mx", "onClick", "onKeyDown", "Icon", "size", "span", "React", "forwardRef", "memo", "Button", "Icon", "mx", "TreeItemToggle", "memo", "forwardRef", "open", "isBranch", "onToggle", "forwardedRef", "React", "Button", "ref", "data-testid", "variant", "density", "classNames", "mx", "onClick", "Icon", "icon", "size", "DEFAULT_INDENTATION", "paddingIndendation", "level", "indentation", "paddingInlineStart", "getMode", "items", "index", "item", "next", "path", "length", "hoverableDescriptionIcons", "RawTreeItem", "item", "mode", "open", "current", "draggable", "_draggable", "renderColumns", "Columns", "canDrop", "onOpenChange", "onSelect", "id", "label", "icon", "className", "headingClassName", "disabled", "path", "parentOf", "level", "length", "isBranch", "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", "data", "getIsSticky", "onDrag", "self", "extractInstruction", "type", "setTimeout", "onDragLeave", "handleOpenChange", "handleSelect", "focus", "handleKeyDown", "event", "key", "React", "Treegrid", "Row", "ref", "aria-labelledby", "join", "PARENT_OF_SEPARATOR", "classNames", "mx", "hoverableControls", "hoverableFocusedKeyboardControls", "hoverableFocusedWithinControls", "focusRing", "data-itemid", "data-testid", "testId", "aria-current", "undefined", "onKeyDown", "onContextMenu", "preventDefault", "Cell", "indent", "style", "paddingIndendation", "div", "role", "TreeItemToggle", "onToggle", "TreeItemHeading", "DropIndicator", "TreeItem", "memo", "Tree", "items", "open", "current", "draggable", "gridTemplateColumns", "classNames", "renderColumns", "canDrop", "onOpenChange", "onSelect", "React", "Treegrid", "Root", "map", "item", "i", "path", "Path", "create", "TreeItem", "key", "id", "mode", "getMode", "includes", "S", "LabelSchema", "S", "Union", "String", "Tuple", "Struct", "ns", "count", "optional", "Number", "ItemSchema", "mutable", "id", "label", "icon", "disabled", "Boolean", "className", "headingClassName", "testId", "path", "Array", "parentOf", "isItem", "is"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":9112,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":23986,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx":{"bytes":8693,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytes":6550,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytes":3074,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytes":2692,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytes":25783,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx","kind":"import-statement","original":"./TreeItemHeading"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx","kind":"import-statement","original":"./TreeItemToggle"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytes":4925,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/types.ts":{"bytes":3189,"imports":[{"path":"@dxos/echo-schema","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytes":674,"imports":[{"path":"packages/ui/react-ui-list/src/components/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"},{"path":"packages/ui/react-ui-list/src/components/Tree/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":580,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"},{"path":"packages/ui/react-ui-list/src/components/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":50475},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true}],"exports":["ItemSchema","List","RawTreeItem","Tree","TreeItem","isItem"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6347},"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytesInOutput":1709},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":1935},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytesInOutput":890},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytesInOutput":6446},"packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx":{"bytesInOutput":2176},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytesInOutput":1608},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytesInOutput":734},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytesInOutput":456},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/types.ts":{"bytesInOutput":522},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":24067}}}
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":10900,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24026,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx":{"bytes":8693,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytes":6550,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytes":3074,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytes":2692,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytes":25783,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx","kind":"import-statement","original":"./TreeItemHeading"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx","kind":"import-statement","original":"./TreeItemToggle"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytes":4925,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/types.ts":{"bytes":3189,"imports":[{"path":"@dxos/echo-schema","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytes":674,"imports":[{"path":"packages/ui/react-ui-list/src/components/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"},{"path":"packages/ui/react-ui-list/src/components/Tree/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":580,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"},{"path":"packages/ui/react-ui-list/src/components/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":51348},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true}],"exports":["ItemSchema","List","RawTreeItem","Tree","TreeItem","isItem"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6363},"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytesInOutput":1709},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":2198},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytesInOutput":890},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytesInOutput":6446},"packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx":{"bytesInOutput":2176},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytesInOutput":1625},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytesInOutput":734},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytesInOutput":456},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/types.ts":{"bytesInOutput":522},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":24363}}}
|
|
@@ -6,7 +6,7 @@ import { type ListRootProps } from './ListRoot';
|
|
|
6
6
|
* Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx
|
|
7
7
|
*/
|
|
8
8
|
export declare const List: {
|
|
9
|
-
Root: <T extends ListItemRecord>({ classNames, children, items, isItem,
|
|
9
|
+
Root: <T extends ListItemRecord>({ classNames, children, items, isItem, getId, onMove, ...props }: ListRootProps<T>) => import("react").JSX.Element;
|
|
10
10
|
Item: <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => import("react").JSX.Element;
|
|
11
11
|
ItemDragPreview: <T extends ListItemRecord>({ children, }: {
|
|
12
12
|
children: ({ item }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQ5D,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AA6E1E,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAMzD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAMxD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -3,7 +3,6 @@ import { type ThemedClassName } from '@dxos/react-ui';
|
|
|
3
3
|
import { type ItemState, type ListItemRecord } from './ListItem';
|
|
4
4
|
type ListContext<T extends ListItemRecord> = {
|
|
5
5
|
isItem: (item: any) => boolean;
|
|
6
|
-
isEqual?: (item1: T, item2: T) => boolean;
|
|
7
6
|
getId?: (item: T) => string;
|
|
8
7
|
dragPreview?: boolean;
|
|
9
8
|
state: ItemState & {
|
|
@@ -27,7 +26,7 @@ export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
|
|
|
27
26
|
children?: (props: ListRendererProps<T>) => ReactNode;
|
|
28
27
|
items?: T[];
|
|
29
28
|
onMove?: (fromIndex: number, toIndex: number) => void;
|
|
30
|
-
}> & Pick<ListContext<T>, 'isItem' | '
|
|
31
|
-
export declare const ListRoot: <T extends ListItemRecord>({ classNames, children, items, isItem,
|
|
29
|
+
}> & Pick<ListContext<T>, 'isItem' | 'getId' | 'dragPreview'>;
|
|
30
|
+
export declare const ListRoot: <T extends ListItemRecord>({ classNames, children, items, isItem, getId, onMove, ...props }: ListRootProps<T>) => React.JSX.Element;
|
|
32
31
|
export {};
|
|
33
32
|
//# sourceMappingURL=ListRoot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvE,KAAK,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CACrD,CAAC;AAIF,eAAO,MAAO,YAAY;;wBAlBoD,SAAS;;;GAkB3D,cAAc,4CAA8C,CAAC;AAEzF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,IAAI;IACxD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,IAAI,eAAe,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAAC,GACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC,CAAC;AAI3D,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,cAAc,oEAQ9C,aAAa,CAAC,CAAC,CAAC,sBA4DlB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-list",
|
|
3
|
-
"version": "0.6.14-
|
|
3
|
+
"version": "0.6.14-staging.54a8bab",
|
|
4
4
|
"description": "A list component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -28,15 +28,15 @@
|
|
|
28
28
|
"@preact/signals-core": "^1.6.0",
|
|
29
29
|
"@radix-ui/react-context": "^1.0.0",
|
|
30
30
|
"effect": "^3.9.1",
|
|
31
|
-
"@dxos/debug": "0.6.14-
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/react-ui-
|
|
37
|
-
"@dxos/react-ui-
|
|
38
|
-
"@dxos/util": "0.6.14-
|
|
39
|
-
"@dxos/react-ui-types": "0.6.14-
|
|
31
|
+
"@dxos/debug": "0.6.14-staging.54a8bab",
|
|
32
|
+
"@dxos/invariant": "0.6.14-staging.54a8bab",
|
|
33
|
+
"@dxos/echo-schema": "0.6.14-staging.54a8bab",
|
|
34
|
+
"@dxos/log": "0.6.14-staging.54a8bab",
|
|
35
|
+
"@dxos/react-ui-attention": "0.6.14-staging.54a8bab",
|
|
36
|
+
"@dxos/react-ui-text-tooltip": "0.6.14-staging.54a8bab",
|
|
37
|
+
"@dxos/react-ui-mosaic": "0.6.14-staging.54a8bab",
|
|
38
|
+
"@dxos/util": "0.6.14-staging.54a8bab",
|
|
39
|
+
"@dxos/react-ui-types": "0.6.14-staging.54a8bab"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
"react": "~18.2.0",
|
|
46
46
|
"react-dom": "~18.2.0",
|
|
47
47
|
"vite": "5.4.7",
|
|
48
|
-
"@dxos/random": "0.6.14-
|
|
49
|
-
"@dxos/react-ui": "0.6.14-
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
48
|
+
"@dxos/random": "0.6.14-staging.54a8bab",
|
|
49
|
+
"@dxos/react-ui": "0.6.14-staging.54a8bab",
|
|
50
|
+
"@dxos/storybook-utils": "0.6.14-staging.54a8bab",
|
|
51
|
+
"@dxos/react-ui-theme": "0.6.14-staging.54a8bab"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@phosphor-icons/react": "^2.1.5",
|
|
55
55
|
"effect": "^3.9.1",
|
|
56
56
|
"react": "~18.2.0",
|
|
57
57
|
"react-dom": "~18.2.0",
|
|
58
|
-
"@dxos/react-ui
|
|
59
|
-
"@dxos/react-ui": "0.6.14-
|
|
58
|
+
"@dxos/react-ui": "0.6.14-staging.54a8bab",
|
|
59
|
+
"@dxos/react-ui-theme": "0.6.14-staging.54a8bab"
|
|
60
60
|
},
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
@@ -10,6 +10,7 @@ import React from 'react';
|
|
|
10
10
|
import { create, S } from '@dxos/echo-schema';
|
|
11
11
|
import { ghostHover, mx } from '@dxos/react-ui-theme';
|
|
12
12
|
import { withTheme, withLayout } from '@dxos/storybook-utils';
|
|
13
|
+
import { arrayMove } from '@dxos/util';
|
|
13
14
|
|
|
14
15
|
import { List, type ListRootProps } from './List';
|
|
15
16
|
import { createList, TestItemSchema, type TestItemType } from './testing';
|
|
@@ -25,9 +26,12 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
|
|
|
25
26
|
const idx = items.findIndex((i) => i.id === item.id);
|
|
26
27
|
items.splice(idx, 1);
|
|
27
28
|
};
|
|
29
|
+
const handleMove = (from: number, to: number) => {
|
|
30
|
+
arrayMove(items, from, to);
|
|
31
|
+
};
|
|
28
32
|
|
|
29
33
|
return (
|
|
30
|
-
<List.Root<TestItemType> dragPreview items={items} {...props}>
|
|
34
|
+
<List.Root<TestItemType> dragPreview items={items} getId={(item) => item.id} onMove={handleMove} {...props}>
|
|
31
35
|
{({ items }) => (
|
|
32
36
|
<>
|
|
33
37
|
<div className='flex flex-col w-full'>
|
|
@@ -209,7 +209,7 @@ export const ListItemDeleteButton = ({
|
|
|
209
209
|
|
|
210
210
|
export const ListItemDragHandle = () => {
|
|
211
211
|
const { dragHandleRef } = useListItemContext('DRAG_HANDLE');
|
|
212
|
-
return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;
|
|
212
|
+
return <IconButton ref={dragHandleRef as any} icon='ph--dots-six-vertical--regular' />;
|
|
213
213
|
};
|
|
214
214
|
|
|
215
215
|
export const ListItemDragPreview = <T extends ListItemRecord>({
|
|
@@ -222,7 +222,7 @@ export const ListItemDragPreview = <T extends ListItemRecord>({
|
|
|
222
222
|
};
|
|
223
223
|
|
|
224
224
|
export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
|
|
225
|
-
<div className={mx('flex
|
|
225
|
+
<div className={mx('flex is-full gap-2', classNames)}>{children}</div>
|
|
226
226
|
);
|
|
227
227
|
|
|
228
228
|
export const ListItemTitle = ({
|
|
@@ -6,7 +6,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
|
|
|
6
6
|
import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
7
7
|
import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
|
|
8
8
|
import { createContext } from '@radix-ui/react-context';
|
|
9
|
-
import React, { type ReactNode, useEffect, useState } from 'react';
|
|
9
|
+
import React, { type ReactNode, useCallback, useEffect, useState } from 'react';
|
|
10
10
|
|
|
11
11
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
12
12
|
|
|
@@ -14,7 +14,6 @@ import { idle, type ItemState, type ListItemRecord } from './ListItem';
|
|
|
14
14
|
|
|
15
15
|
type ListContext<T extends ListItemRecord> = {
|
|
16
16
|
isItem: (item: any) => boolean;
|
|
17
|
-
isEqual?: (item1: T, item2: T) => boolean;
|
|
18
17
|
getId?: (item: T) => string; // TODO(burdon): Require if T doesn't conform to type.
|
|
19
18
|
dragPreview?: boolean;
|
|
20
19
|
state: ItemState & { item?: T };
|
|
@@ -35,18 +34,36 @@ export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
|
|
|
35
34
|
items?: T[];
|
|
36
35
|
onMove?: (fromIndex: number, toIndex: number) => void;
|
|
37
36
|
}> &
|
|
38
|
-
Pick<ListContext<T>, 'isItem' | '
|
|
37
|
+
Pick<ListContext<T>, 'isItem' | 'getId' | 'dragPreview'>;
|
|
38
|
+
|
|
39
|
+
const defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;
|
|
39
40
|
|
|
40
41
|
export const ListRoot = <T extends ListItemRecord>({
|
|
41
42
|
classNames,
|
|
42
43
|
children,
|
|
43
44
|
items,
|
|
44
45
|
isItem,
|
|
45
|
-
|
|
46
|
-
getId,
|
|
46
|
+
getId = defaultGetId,
|
|
47
47
|
onMove,
|
|
48
48
|
...props
|
|
49
49
|
}: ListRootProps<T>) => {
|
|
50
|
+
const isEqual = useCallback(
|
|
51
|
+
(a: T, b: T) => {
|
|
52
|
+
const idA = getId?.(a);
|
|
53
|
+
const idB = getId?.(b);
|
|
54
|
+
|
|
55
|
+
if (idA !== undefined && idB !== undefined) {
|
|
56
|
+
return idA === idB;
|
|
57
|
+
} else {
|
|
58
|
+
// Fallback for primitive values or when getId fails.
|
|
59
|
+
// NOTE(ZaymonFC): After drag and drop, pragmatic internally serializes drop targets which breaks reference equality.
|
|
60
|
+
// You must provide an `getId` function that returns a stable identifier for your items.
|
|
61
|
+
return a === b;
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
[getId],
|
|
65
|
+
);
|
|
66
|
+
|
|
50
67
|
const [state, setState] = useState<ListContext<T>['state']>(idle);
|
|
51
68
|
useEffect(() => {
|
|
52
69
|
if (!items) {
|
|
@@ -63,6 +80,7 @@ export const ListRoot = <T extends ListItemRecord>({
|
|
|
63
80
|
|
|
64
81
|
const sourceData = source.data;
|
|
65
82
|
const targetData = target.data;
|
|
83
|
+
|
|
66
84
|
if (!isItem(sourceData) || !isItem(targetData)) {
|
|
67
85
|
return;
|
|
68
86
|
}
|
|
@@ -79,10 +97,11 @@ export const ListRoot = <T extends ListItemRecord>({
|
|
|
79
97
|
indexOfTarget: targetIdx,
|
|
80
98
|
axis: 'vertical',
|
|
81
99
|
});
|
|
100
|
+
|
|
82
101
|
onMove?.(sourceIdx, destinationIndex);
|
|
83
102
|
},
|
|
84
103
|
});
|
|
85
|
-
}, [items]);
|
|
104
|
+
}, [items, isEqual, onMove]);
|
|
86
105
|
|
|
87
106
|
return (
|
|
88
107
|
<ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items: items ?? [] })}</ListProvider>
|