@dxos/react-ui-list 0.7.4 → 0.7.5-feature-compute.4d9d99a

package/src/components/Tree/TreeItem.tsx

@@ -3,11 +3,7 @@
 //
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import {
-  draggable as pragmaticDraggable,
-  dropTargetForElements,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {
   attachInstruction,
   extractInstruction,
@@ -18,7 +14,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC
 
 import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Treegrid } from '@dxos/react-ui';
+import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
 import {
   focusRing,
   ghostHover,
@@ -28,7 +24,6 @@ import {
   mx,
 } from '@dxos/react-ui-theme';
 
-import { DropIndicator } from './DropIndicator';
 import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
@@ -54,7 +49,13 @@ export type TreeItemProps<T = any> = {
   path: string[];
   last: boolean;
   draggable?: boolean;
-  renderColumns?: FC<{ item: T; path: string[]; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;
+  renderColumns?: FC<{
+    item: T;
+    path: string[];
+    open: boolean;
+    menuOpen: boolean;
+    setMenuOpen: (open: boolean) => void;
+  }>;
   canDrop?: (source: TreeData, target: TreeData) => boolean;
   onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
@@ -64,7 +65,7 @@ export const RawTreeItem = <T = any,>({
   item,
   path: _path,
   last,
-  draggable,
+  draggable: _draggable,
   renderColumns: Columns,
   canDrop,
   onOpenChange,
@@ -97,7 +98,7 @@ export const RawTreeItem = <T = any,>({
   }, []);
 
   useEffect(() => {
-    if (!draggable) {
+    if (!_draggable) {
       return;
     }
 
@@ -105,7 +106,7 @@ export const RawTreeItem = <T = any,>({
 
     // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
     return combine(
-      pragmaticDraggable({
+      draggable({
         element: buttonRef.current,
         getInitialData: () => data,
         onDragStart: () => {
@@ -122,6 +123,7 @@ export const RawTreeItem = <T = any,>({
           }
         },
       }),
+      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
       dropTargetForElements({
         element: buttonRef.current,
         getData: ({ input, element }) => {
@@ -171,7 +173,7 @@ export const RawTreeItem = <T = any,>({
         },
       }),
     );
-  }, [draggable, item, id, mode, path, open, canDrop]);
+  }, [_draggable, item, id, mode, path, open, canDrop]);
 
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
@@ -253,8 +255,8 @@ export const RawTreeItem = <T = any,>({
               onSelect={handleSelect}
             />
           </div>
-          {Columns && <Columns item={item} path={path} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
-          {instruction && <DropIndicator instruction={instruction} gap={2} />}
+          {Columns && <Columns item={item} path={path} open={open} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
+          {instruction && <NaturalTreeItem.DropIndicator instruction={instruction} gap={2} />}
         </Treegrid.Cell>
       </Treegrid.Row>
       {open &&
@@ -264,7 +266,7 @@ export const RawTreeItem = <T = any,>({
             item={item}
             path={path}
             last={index === items.length - 1}
-            draggable={draggable}
+            draggable={_draggable}
             renderColumns={Columns}
             canDrop={canDrop}
             onOpenChange={onOpenChange}

package/dist/types/src/components/List/DropIndicator.d.ts

@@ -1,11 +0,0 @@
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
-import React from 'react';
-export type DropIndicatorProps = {
-    edge: Edge;
-    gap?: number;
-};
-/**
- * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
- */
-export declare const DropIndicator: ({ edge, gap }: DropIndicatorProps) => React.JSX.Element;
-//# sourceMappingURL=DropIndicator.d.ts.map

package/dist/types/src/components/List/DropIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/DropIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,gDAAgD,CAAC;AAC3E,OAAO,KAAkD,MAAM,OAAO,CAAC;AA6BvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,kBAAuB,kBAAkB,sBA0BlE,CAAC"}

package/dist/types/src/components/Tree/DropIndicator.d.ts

@@ -1,8 +0,0 @@
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React from 'react';
-export type DropIndicatorProps = {
-    instruction: Instruction;
-    gap?: number;
-};
-export declare const DropIndicator: ({ instruction, gap }: DropIndicatorProps) => React.JSX.Element | null;
-//# sourceMappingURL=DropIndicator.d.ts.map

package/dist/types/src/components/Tree/DropIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/DropIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,KAAkD,MAAM,OAAO,CAAC;AAoCvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,aAAa,yBAA8B,kBAAkB,6BA+BzE,CAAC"}

package/src/components/List/DropIndicator.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
-import React, { type CSSProperties, type HTMLAttributes } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-type Orientation = 'horizontal' | 'vertical';
-
-const edgeToOrientationMap: Record<Edge, Orientation> = {
-  top: 'horizontal',
-  bottom: 'horizontal',
-  left: 'vertical',
-  right: 'vertical',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
-  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
-};
-
-const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
-  top: 'top-[--line-offset] before:top-[--offset-terminal]',
-  right: 'right-[--line-offset] before:right-[--offset-terminal]',
-  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',
-  left: 'left-[--line-offset] before:left-[--offset-terminal]',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  edge: Edge;
-  gap?: number;
-};
-
-/**
- * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
- */
-export const DropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-
-  const orientation = edgeToOrientationMap[edge];
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-        } as CSSProperties
-      }
-      className={mx(
-        'absolute z-10 pointer-events-none bg-blue-700',
-        "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute",
-        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',
-        orientationStyles[orientation],
-        edgeStyles[edge],
-      )}
-    ></div>
-  );
-};

package/src/components/Tree/DropIndicator.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type HTMLAttributes, type CSSProperties } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-// Tree item hitbox
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
-
-type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
-type Orientation = 'sibling' | 'child';
-
-const edgeToOrientationMap: Record<InstructionType, Orientation> = {
-  'reorder-above': 'sibling',
-  'reorder-below': 'sibling',
-  'make-child': 'child',
-  reparent: 'child',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling:
-    'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',
-  child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',
-};
-
-const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
-  'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',
-  'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',
-  'make-child': 'border-accentSurface',
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: '',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  instruction: Instruction;
-  gap?: number;
-};
-
-export const DropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-  const isBlocked = instruction.type === 'instruction-blocked';
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-          '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
-        } as CSSProperties
-      }
-      className={mx(
-        'absolute z-10 pointer-events-none',
-        'before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute',
-        'before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full',
-        orientationStyles[orientation],
-        instructionStyles[desiredInstruction.type],
-      )}
-    ></div>
-  );
-};