@dxos/react-ui-list 0.6.14-main.f49f251 → 0.6.14-staging.e15392e
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 +24 -10
- 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/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,
|
|
@@ -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--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, 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":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":51330},"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":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":24347}}}
|
|
@@ -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.e15392e",
|
|
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/echo-schema": "0.6.14-
|
|
33
|
-
"@dxos/invariant": "0.6.14-
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/react-ui-
|
|
37
|
-
"@dxos/react-ui-
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
31
|
+
"@dxos/debug": "0.6.14-staging.e15392e",
|
|
32
|
+
"@dxos/echo-schema": "0.6.14-staging.e15392e",
|
|
33
|
+
"@dxos/invariant": "0.6.14-staging.e15392e",
|
|
34
|
+
"@dxos/log": "0.6.14-staging.e15392e",
|
|
35
|
+
"@dxos/react-ui-attention": "0.6.14-staging.e15392e",
|
|
36
|
+
"@dxos/react-ui-text-tooltip": "0.6.14-staging.e15392e",
|
|
37
|
+
"@dxos/react-ui-mosaic": "0.6.14-staging.e15392e",
|
|
38
|
+
"@dxos/react-ui-types": "0.6.14-staging.e15392e",
|
|
39
|
+
"@dxos/util": "0.6.14-staging.e15392e"
|
|
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/
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/react-ui-theme": "0.6.14-
|
|
51
|
-
"@dxos/storybook-utils": "0.6.14-
|
|
48
|
+
"@dxos/react-ui": "0.6.14-staging.e15392e",
|
|
49
|
+
"@dxos/random": "0.6.14-staging.e15392e",
|
|
50
|
+
"@dxos/react-ui-theme": "0.6.14-staging.e15392e",
|
|
51
|
+
"@dxos/storybook-utils": "0.6.14-staging.e15392e"
|
|
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-theme": "0.6.14-
|
|
59
|
-
"@dxos/react-ui": "0.6.14-
|
|
58
|
+
"@dxos/react-ui-theme": "0.6.14-staging.e15392e",
|
|
59
|
+
"@dxos/react-ui": "0.6.14-staging.e15392e"
|
|
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'>
|
|
@@ -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>
|