@dxos/react-ui-mosaic 0.3.3-main.006ca4d → 0.3.3-main.0c081e6

package/src/views/Grid/Grid.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
-
 import { useDroppable } from '@dnd-kit/core';
 import { PlusCircle } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -23,7 +21,14 @@ import {
   type Position,
   type Size,
 } from './layout';
-import { type MosaicContainerProps, type MosaicDataItem, Mosaic, Path, useMosaic } from '../../mosaic';
+import {
+  type MosaicContainerProps,
+  type MosaicDataItem,
+  type MosaicTileAction,
+  Mosaic,
+  Path,
+  useMosaic,
+} from '../../mosaic';
 
 //
 // Selection
@@ -47,8 +52,8 @@ type GridOptions = {
 
 const defaultGridOptions: GridOptions = {
   size: { x: 8, y: 8 },
-  cellBounds: { width: 280, height: 280 },
-  spacing: 8,
+  cellBounds: { width: 272, height: 272 },
+  spacing: 6,
 };
 
 //
@@ -66,6 +71,7 @@ export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicCon
     square?: boolean;
     debug?: boolean;
     onCreate?: (position: Position) => void;
+    onAction?: (action: MosaicTileAction) => void; // TODO(burdon): Standardize across mosaics?
   };
 
 /**
@@ -84,8 +90,10 @@ export const Grid = ({
   Component = Mosaic.DefaultComponent,
   className,
   onDrop,
+  onOver,
   onSelect,
   onCreate,
+  onAction,
 }: GridProps) => {
   const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
   const options = defaultsDeep({}, opts, defaultGridOptions);
@@ -148,11 +156,12 @@ export const Grid = ({
         getOverlayProps: () => ({ grow: true }),
         getOverlayStyle: () => getDimension(cellBounds, options.spacing),
         onDrop,
+        onOver,
       }}
     >
       <div className={mx('flex grow overflow-auto', className)}>
-        <div ref={containerRef} className={mx('grow overflow-auto snap-x snap-mandatory md:snap-none bg-neutral-600')}>
-          <div className='group block relative bg-neutral-500' style={{ ...bounds, margin: marginSize }}>
+        <div ref={containerRef} className={mx('grow overflow-auto snap-x snap-mandatory md:snap-none')}>
+          <div className='group block relative' style={{ ...bounds, margin: marginSize }}>
             {matrix && (
               <div style={{ padding: options.spacing }}>
                 <div className='relative'>
@@ -172,7 +181,6 @@ export const Grid = ({
               </div>
             )}
 
-            {/* TODO(burdon): Events: onDoubleClick={() => handleSelect(id)} */}
             <div>
               {items.map((item) => {
                 const position = layout[item.id] ?? { x: 0, y: 0 };
@@ -188,6 +196,7 @@ export const Grid = ({
                       ...getBounds(position, cellBounds, options.spacing),
                     }}
                     onSelect={() => handleSelect(item.id)}
+                    onAction={onAction}
                     // debug={debug}
                   />
                 );
@@ -227,14 +236,18 @@ const GridCell: FC<{
     >
       <div
         className={mx(
-          'group/cell hidden group-hover:flex w-full h-full items-center justify-center',
-          isOverContainer && 'flex',
-          'box-border border-dashed border-4 border-neutral-600/50 rounded-lg',
-          'transition ease-in-out duration-200 bg-neutral-500',
-          isOver && 'flex bg-neutral-600',
+          'group/cell flex group-hover:flex w-full h-full items-center justify-center',
+          'box-border border-dashed border-4 border-neutral-100 rounded-lg',
+          'transition ease-in-out duration-300',
+          isOver && 'flex bg-neutral-200 border-neutral-400',
         )}
       >
-        <div className={mx('hidden group-hover/cell:flex', isOverContainer && 'hidden')}>
+        <div
+          className={mx(
+            'opacity-10 transition ease-in-out duration-300 group-hover/cell:opacity-100',
+            isOverContainer && 'hidden',
+          )}
+        >
           {onCreate && (
             // TODO(burdon): Style button.
             <Button variant='ghost' onClick={() => onCreate(position)}>

package/src/views/Grid/testing.tsx

@@ -11,8 +11,8 @@ import { type MosaicDataItem, type MosaicDropEvent } from '../../mosaic';
 import { ComplexCard, TestObjectGenerator } from '../../testing';
 
 export type DemoGridProps = GridProps & {
-  initialItems?: MosaicDataItem[];
-  initialLayout?: GridLayout;
+  initialItems?: MosaicDataItem[]; // TODO(burdon): Remove or convert to controlled.
+  initialLayout?: GridLayout; // TODO(burdon): Remove or convert to controlled.
   types?: string[];
   debug?: boolean;
 };

package/src/views/Kanban/Kanban.tsx

@@ -51,7 +51,7 @@ export const Kanban = ({
         // Restrict to objects from other columns.
         // TODO(burdon): Consider objects from other containers.
         // TODO(wittjosiah): Allow override.
-        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'adopt' : 'reject'),
+        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'transfer' : 'reject'),
         onDrop,
       }}
     >

package/src/views/Stack/Columns.stories.tsx

@@ -36,7 +36,7 @@ export default {
   },
 };
 
-export const Adopt = {
+export const Transfer = {
   args: {
     Component: SimpleCard,
     debug: true,

package/src/views/Stack/testing.tsx

@@ -26,7 +26,7 @@ export const DemoStack = ({
   types,
   count = 8,
   direction = 'vertical',
-  operation = 'adopt',
+  operation = 'transfer',
   debug,
 }: DemoStackProps) => {
   const [items, setItems] = useState<MosaicDataItem[]>(() => {

package/src/views/Tree/Tree.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
 import { Card, Tree as TreeComponent, TreeItem as TreeItemComponent } from '@dxos/react-ui';
 import { dropRing, mx } from '@dxos/react-ui-theme';
@@ -15,7 +15,7 @@ import {
   useContainer,
   useMosaic,
   Path,
-  useSortedItems,
+  useItemsWithPreview,
   type MosaicCompareDataItem,
 } from '../../mosaic';
 
@@ -55,13 +55,16 @@ export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], deb
 };
 
 const TreeRoot = ({ items }: { items: TreeData[] }) => {
-  const { id, Component } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const { id, Component, compare } = useContainer();
+  const sortedItems = useMemo(() => {
+    return compare ? [...items].sort(compare) : items;
+  }, [items, compare]);
+  const itemsWithPreview = useItemsWithPreview({ items: sortedItems, path: id, strategy: 'layout-stable' });
 
   return (
     <TreeComponent.Root classNames='flex flex-col'>
-      <Mosaic.SortableContext id={id} items={sortedItems} direction='vertical'>
-        {sortedItems.map((item, index) => (
+      <Mosaic.SortableContext id={id} items={itemsWithPreview} direction='vertical'>
+        {itemsWithPreview.map((item, index) => (
           <TreeItemComponent.Root key={item.id} collapsible defaultOpen>
             <Mosaic.SortableTile item={item} path={id} position={index} Component={Component!} />
           </TreeItemComponent.Root>
@@ -101,13 +104,16 @@ const TreeItem: MosaicTileComponent<TreeData> = forwardRef(
 
 const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
   const { operation, overItem } = useMosaic();
-  const { Component } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const { Component, compare } = useContainer();
+  const sortedItems = useMemo(() => {
+    return compare ? [...items].sort(compare) : items;
+  }, [items, compare]);
+  const itemsWithPreview = useItemsWithPreview({ items: sortedItems, path, strategy: 'layout-stable' });
 
   return (
     <TreeItemComponent.Body className='pis-4'>
-      <Mosaic.SortableContext id={path} items={sortedItems} direction='vertical'>
-        {sortedItems.map((child, index) => (
+      <Mosaic.SortableContext id={path} items={itemsWithPreview} direction='vertical'>
+        {itemsWithPreview.map((child, index) => (
           <TreeComponent.Branch key={child.id}>
             <TreeItemComponent.Root collapsible defaultOpen>
               <Mosaic.SortableTile
@@ -116,7 +122,7 @@ const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
                 position={index}
                 Component={Component!}
                 isOver={
-                  overItem?.path === Path.create(path, child.id) && (operation === 'adopt' || operation === 'copy')
+                  overItem?.path === Path.create(path, child.id) && (operation === 'transfer' || operation === 'copy')
                 }
               />
             </TreeItemComponent.Root>

package/src/views/Tree/testing.tsx

@@ -5,12 +5,12 @@
 import { faker } from '@faker-js/faker';
 import React, { useCallback, useState } from 'react';
 
-import { type Graph, GraphBuilder, type Node } from '@braneframe/plugin-graph';
-import { buildGraph } from '@braneframe/plugin-graph/testing';
+import { type Graph, GraphBuilder, type Node } from '@dxos/app-graph';
+import { buildGraph } from '@dxos/app-graph/testing';
 import { arrayMove } from '@dxos/util';
 
 import { Tree, type TreeData, type TreeProps } from './Tree';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '../../mosaic';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path, type MosaicOperation } from '../../mosaic';
 import { TestObjectGenerator, nextRearrangeIndex } from '../../testing';
 
 const fake = faker.helpers.fake;
@@ -47,8 +47,8 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
       }),
   );
 
-  const handleOver = useCallback(({ active, over }: MosaicMoveEvent<number>) => {
-    return !(active.path === id && over.path !== id) ? 'adopt' : 'reject';
+  const handleOver = useCallback(({ over }: MosaicMoveEvent<number>) => {
+    return over && Path.hasChild(id, over.path) ? 'transfer' : 'reject';
   }, []);
 
   // NOTE: Does not handle deep operations.
@@ -67,8 +67,8 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
             if (Path.last(Path.parent(active.path)) === item.id) {
               children.splice(active.position!, 1);
             }
-            if (Path.last(Path.parent(over.path)) === item.id) {
-              children.splice(over.position!, 0, active.item as TreeData);
+            if (Path.last(over.path) === item.id) {
+              children.push(active.item as TreeData);
             }
             return { ...item, children };
           }),
@@ -117,7 +117,6 @@ const graphNodeCompare = (a: Node, b: Node) => {
 };
 
 export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
-  // TODO(wittjosiah): This graph does not handle order currently.
   const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
     // Moving within the tree.
     if (Path.hasDescendent(id, active.path) && Path.hasDescendent(id, over.path)) {
@@ -137,18 +136,21 @@ export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; gr
         // This is a rearrange operation
         const nextIndex = nextRearrangeIndex(activeParent.children.sort(graphNodeCompare), activeNode.id, overNode.id);
         activeNode.properties.index = nextIndex ?? 'a0';
-      } else if (activeNode && activeParent && overParent && operation === 'adopt') {
+      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
         activeParent.removeNode(active.item.id);
         overNode.addNode('tree', { ...activeNode });
       }
     }
   };
 
+  const handleOver = (): MosaicOperation => 'transfer';
+
   return (
     <Tree
       id={id}
       items={graph.root.children as TreeData[]}
       onDrop={handleDrop}
+      onOver={handleOver}
       debug={debug}
       compare={graphNodeCompare}
     />

package/dist/types/src/mosaic/hooks/useSortedItems.d.ts

@@ -1,6 +0,0 @@
-import { type MosaicDataItem } from '../types';
-/**
- * Returns a sorted collection of items if a compare function is provided.
- */
-export declare const useSortedItems: <T extends MosaicDataItem>(items: T[]) => T[];
-//# sourceMappingURL=useSortedItems.d.ts.map

package/dist/types/src/mosaic/hooks/useSortedItems.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSortedItems.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/useSortedItems.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,cAAc,+CAG1B,CAAC"}

package/src/mosaic/hooks/useSortedItems.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useContainer } from './useContainer';
-import { type MosaicDataItem } from '../types';
-
-/**
- * Returns a sorted collection of items if a compare function is provided.
- */
-export const useSortedItems = <T extends MosaicDataItem>(items: T[]): T[] => {
-  const { compare } = useContainer();
-  return compare ? [...items].sort(compare) : items;
-};