@dxos/react-ui-mosaic NPM

Mosaic

Mosaic is a drag-and-drop layout system for building responsive, multi-column layouts. It is built on top of dnd kit and DXOS UI.

Taxonomy

Item	Description
Mosaic.Provider	A Root container and React context that routes events between Containers.
Mosaic.Overlay	A DOM portal managed by the Mosaic context that renders a Container's Component while dragging.
Mosaic.Container	A complex React component that manages the layout of a collection of tiles (e.g., Grid, Kanban, Stack, Table, Tree).
Mosaic.Tile	A Draggable wrapper managed by its parent container.
Component	A pure React component that is rendered within the layout via the container's Tile or the root Mosaic's Overlay.
Item	A datum represented by a Tile.

Design principles

Extends dnd-kit without obfuscation or wrapping; for example, mosaic provides additional hooks in the same manner as dnd-kit's own useSortable`.
Mosaics consist of containers and pure components that can be laid out and rearranged by the user
DXOS UI components are pure tailwind-styled Radix components that expose small parts (List, ListItem, ListItem.Header, etc.)
Mosaic Containers define their own data model and assemble Radix-style DXOS UI components.
Containers implement specific layouts of Tiles, which may reuse common components, such as DXOS UI Cards.
Container Models facilitate pure React components, but are easily mapped to data structures (e.g., Graph) and ECHO data sets without the need to wrap/map the underlying reactive objects (e.g., via signals).

Issues

When dragging across grid always set bounds (currently changes when between cell gaps).
Remove padding between tiles in Sortable (causes flickering); instead selectively add padding to tiles.
Projections/Lenses: tile props (e.g., label); position (e.g., index, grid position).
Standardize generics (when to use any, unknown, provide default, etc.)
Standardize events (e.g., onSelect).
Standardize Mosaic Root components (e.g., make generic).
- https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref#58473012
Radix-style components and theming (forwardRefs).
Focus (e.g., show grid while dragging in grid).
Mobile
Future of dnd-kit: https://github.com/clauderic/dnd-kit/issues/1194#issuecomment-1696704815

8 months ago

11 months ago

8 months ago

11 months ago

9 months ago

9 months ago

8 months ago

10 months ago

9 months ago

10 months ago

12 months ago

9 months ago

8 months ago

9 months ago

11 months ago

8 months ago

10 months ago

9 months ago

11 months ago

12 months ago

8 months ago

11 months ago

11 months ago

12 months ago

11 months ago

9 months ago

8 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

8 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

8 months ago

11 months ago

11 months ago

11 months ago

8 months ago

8 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago