@dxos/react-ui-mosaic 0.3.3-main.006ca4d → 0.3.3-main.1b7ca63

package/dist/types/src/views/Grid/Grid.d.ts

@@ -1,6 +1,5 @@
-import '@dxosTheme';
 import { type Dimension, type Position, type Size } from './layout';
-import { type MosaicContainerProps, type MosaicDataItem } from '../../mosaic';
+import { type MosaicContainerProps, type MosaicDataItem, type MosaicTileAction } from '../../mosaic';
 type ControlledSelection = {
     selected?: string;
     onSelect?: (id: string) => void;
@@ -21,10 +20,11 @@ export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicCon
     square?: boolean;
     debug?: boolean;
     onCreate?: (position: Position) => void;
+    onAction?: (action: MosaicTileAction) => void;
 };
 /**
  * Grid content.
  */
-export declare const Grid: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, }: GridProps) => JSX.Element;
+export declare const Grid: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, onAction, }: GridProps) => JSX.Element;
 export {};
 //# sourceMappingURL=Grid.d.ts.map

package/dist/types/src/views/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAWpB,OAAO,EAML,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,IAAI,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAA2B,MAAM,cAAc,CAAC;AAOvG,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAMF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAYF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,IAAI,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,GAC1G,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC,CAAC;AAEJ;;GAEG;AAEH,eAAO,MAAM,IAAI,iJAcd,SAAS,gBAkHX,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/Grid.tsx"],"names":[],"mappings":"AAaA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,IAAI,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAOtB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAMF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAYF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,IAAI,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,GAC1G,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEJ;;GAEG;AAEH,eAAO,MAAM,IAAI,2JAed,SAAS,gBAkHX,CAAC"}

package/dist/types/src/views/Grid/Grid.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import '@dxosTheme';
 declare const _default: {
-    component: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, }: import("./Grid").GridProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
+    component: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, onAction, }: import("./Grid").GridProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
     render: () => JSX.Element;
     decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R>[];
     parameters: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.3.3-main.006ca4d",
+  "version": "0.3.3-main.1b7ca63",
   "description": "An intermediate interface for drag-and-drop interactions.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,13 +26,13 @@
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.pick": "^4.4.0",
     "react-resize-detector": "^7.1.2",
-    "@dxos/debug": "0.3.3-main.006ca4d",
-    "@dxos/invariant": "0.3.3-main.006ca4d",
-    "@dxos/keys": "0.3.3-main.006ca4d",
-    "@dxos/react-ui": "0.3.3-main.006ca4d",
-    "@dxos/react-ui-theme": "0.3.3-main.006ca4d",
-    "@dxos/react-ui-types": "0.3.3-main.006ca4d",
-    "@dxos/util": "0.3.3-main.006ca4d"
+    "@dxos/debug": "0.3.3-main.1b7ca63",
+    "@dxos/invariant": "0.3.3-main.1b7ca63",
+    "@dxos/keys": "0.3.3-main.1b7ca63",
+    "@dxos/react-ui": "0.3.3-main.1b7ca63",
+    "@dxos/react-ui-theme": "0.3.3-main.1b7ca63",
+    "@dxos/react-ui-types": "0.3.3-main.1b7ca63",
+    "@dxos/util": "0.3.3-main.1b7ca63"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
@@ -48,10 +48,10 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@braneframe/plugin-graph": "0.3.3-main.006ca4d",
-    "@dxos/echo-schema": "0.3.3-main.006ca4d",
-    "@dxos/gem-core": "0.3.3-main.006ca4d",
-    "@dxos/react-client": "0.3.3-main.006ca4d"
+    "@braneframe/plugin-graph": "0.3.3-main.1b7ca63",
+    "@dxos/echo-schema": "0.3.3-main.1b7ca63",
+    "@dxos/gem-core": "0.3.3-main.1b7ca63",
+    "@dxos/react-client": "0.3.3-main.1b7ca63"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/index.ts

@@ -3,3 +3,6 @@
 //
 
 export * from './mosaic';
+
+// TODO(burdon): Remove (factor out components).
+export * from './views';

package/src/mosaic/Mosaic.ts

@@ -21,6 +21,7 @@ import {
   DraggableTile,
   DroppableTile,
   SortableTile,
+  type MosaicTileAction as NaturalMosaicTileAction,
   type MosaicTileProps as NaturalMosaicTileProps,
   type MosaicTileComponent as NaturalMosaicTileComponent,
   type MosaicActiveType as NaturalMosaicActiveType,
@@ -64,6 +65,8 @@ export type MosaicOverlayProps = MosaicDragOverlayProps;
 
 export type MosaicSortableProps = NaturalMosaicSortableProps;
 
+export type MosaicTileAction = NaturalMosaicTileAction;
+
 export type MosaicTileProps<
   TData extends MosaicDataItem = MosaicDataItem,
   TPosition = unknown,
@@ -74,11 +77,12 @@ export type MosaicTileComponent<
   TElement extends HTMLElement = HTMLDivElement,
 > = NaturalMosaicTileComponent<TData, TElement>;
 
-export type MosaicDebugProps = DebugProps;
-
 export type MosaicMoveEvent<TPosition = unknown> = NaturalMosaicMoveEvent<TPosition>;
 export type MosaicDropEvent<TPosition = unknown> = NaturalMosaicDropEvent<TPosition>;
 export type MosaicOperation = NaturalMosaicOperation;
 export type MosaicActiveType = NaturalMosaicActiveType;
 
 export type MosaicCompareDataItem = NaturalMosaicCompareDataItem;
+
+// TODO(burdon): Remove.
+export type MosaicDebugProps = DebugProps;

package/src/mosaic/Tile.tsx

@@ -15,6 +15,8 @@ import { getTransformCSS, Path } from './util';
 
 export type MosaicActiveType = 'overlay' | 'rearrange' | 'origin' | 'destination';
 
+export type MosaicTileAction = { id: string; action: string; data?: any };
+
 /**
  * Props passed to mosaic tile.
  */
@@ -38,8 +40,10 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
       // TODO(wittjosiah): SyntheticListenerMap.
       HTMLAttributes<HTMLElement>;
 
+    // TODO(burdon): Generalize events via onAction?
     onSelect?: () => void;
     onRemove?: () => void;
+    onAction?: (action: MosaicTileAction) => void;
   };
 
 /**

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
@@ -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?
   };
 
 /**
@@ -86,6 +92,7 @@ export const Grid = ({
   onDrop,
   onSelect,
   onCreate,
+  onAction,
 }: GridProps) => {
   const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
   const options = defaultsDeep({}, opts, defaultGridOptions);
@@ -151,8 +158,8 @@ export const Grid = ({
       }}
     >
       <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 +179,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 +194,7 @@ export const Grid = ({
                       ...getBounds(position, cellBounds, options.spacing),
                     }}
                     onSelect={() => handleSelect(item.id)}
+                    onAction={onAction}
                     // debug={debug}
                   />
                 );
@@ -227,14 +234,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;
 };