@dxos/react-ui-mosaic 0.7.5-main.ff8607b → 0.8.4-main.69d29f4

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.
Files changed (282) hide show
  1. package/README.md +2 -44
  2. package/dist/lib/browser/chunk-4VDZJ3HV.mjs +1639 -0
  3. package/dist/lib/browser/chunk-4VDZJ3HV.mjs.map +7 -0
  4. package/dist/lib/browser/index.css +13 -0
  5. package/dist/lib/browser/index.css.map +7 -0
  6. package/dist/lib/browser/index.mjs +85 -689
  7. package/dist/lib/browser/index.mjs.map +4 -4
  8. package/dist/lib/browser/meta.json +1 -1
  9. package/dist/lib/browser/testing/index.css +13 -0
  10. package/dist/lib/browser/testing/index.css.map +7 -0
  11. package/dist/lib/browser/testing/index.mjs +306 -0
  12. package/dist/lib/browser/testing/index.mjs.map +7 -0
  13. package/dist/lib/node-esm/chunk-KONKDEUD.mjs +1641 -0
  14. package/dist/lib/node-esm/chunk-KONKDEUD.mjs.map +7 -0
  15. package/dist/lib/node-esm/index.css +13 -0
  16. package/dist/lib/node-esm/index.css.map +7 -0
  17. package/dist/lib/node-esm/index.mjs +85 -690
  18. package/dist/lib/node-esm/index.mjs.map +4 -4
  19. package/dist/lib/node-esm/meta.json +1 -1
  20. package/dist/lib/node-esm/testing/index.css +13 -0
  21. package/dist/lib/node-esm/testing/index.css.map +7 -0
  22. package/dist/lib/node-esm/testing/index.mjs +307 -0
  23. package/dist/lib/node-esm/testing/index.mjs.map +7 -0
  24. package/dist/types/src/components/Card/Card.d.ts +120 -0
  25. package/dist/types/src/components/Card/Card.d.ts.map +1 -0
  26. package/dist/types/src/components/Card/Card.stories.d.ts +21 -0
  27. package/dist/types/src/components/Card/Card.stories.d.ts.map +1 -0
  28. package/dist/types/src/components/Card/CardDragPreview.d.ts +6 -0
  29. package/dist/types/src/components/Card/CardDragPreview.d.ts.map +1 -0
  30. package/dist/types/src/components/Card/index.d.ts +4 -0
  31. package/dist/types/src/components/Card/index.d.ts.map +1 -0
  32. package/dist/types/src/components/Card/styles.d.ts +13 -0
  33. package/dist/types/src/components/Card/styles.d.ts.map +1 -0
  34. package/dist/types/src/components/Focus/Focus.d.ts +25 -0
  35. package/dist/types/src/components/Focus/Focus.d.ts.map +1 -0
  36. package/dist/types/src/components/Focus/index.d.ts +3 -0
  37. package/dist/types/src/components/Focus/index.d.ts.map +1 -0
  38. package/dist/types/src/components/Focus/styles.d.ts +6 -0
  39. package/dist/types/src/components/Focus/styles.d.ts.map +1 -0
  40. package/dist/types/src/components/Image/Image.d.ts +14 -0
  41. package/dist/types/src/components/Image/Image.d.ts.map +1 -0
  42. package/dist/types/src/components/Image/Image.stories.d.ts +33 -0
  43. package/dist/types/src/components/Image/Image.stories.d.ts.map +1 -0
  44. package/dist/types/src/components/Image/index.d.ts +2 -0
  45. package/dist/types/src/components/Image/index.d.ts.map +1 -0
  46. package/dist/types/src/components/Layout/Layout.d.ts +33 -0
  47. package/dist/types/src/components/Layout/Layout.d.ts.map +1 -0
  48. package/dist/types/src/components/Layout/Layout.stories.d.ts +10 -0
  49. package/dist/types/src/components/Layout/Layout.stories.d.ts.map +1 -0
  50. package/dist/types/src/components/Layout/index.d.ts +2 -0
  51. package/dist/types/src/components/Layout/index.d.ts.map +1 -0
  52. package/dist/types/src/components/Mosaic/Mosaic.d.ts +141 -0
  53. package/dist/types/src/components/Mosaic/Mosaic.d.ts.map +1 -0
  54. package/dist/types/src/components/Mosaic/Mosaic.stories.d.ts +27 -0
  55. package/dist/types/src/components/Mosaic/Mosaic.stories.d.ts.map +1 -0
  56. package/dist/types/src/components/Mosaic/extension.d.ts +20 -0
  57. package/dist/types/src/components/Mosaic/extension.d.ts.map +1 -0
  58. package/dist/types/src/components/Mosaic/index.d.ts +5 -0
  59. package/dist/types/src/components/Mosaic/index.d.ts.map +1 -0
  60. package/dist/types/src/components/Mosaic/styles.d.ts +7 -0
  61. package/dist/types/src/components/Mosaic/styles.d.ts.map +1 -0
  62. package/dist/types/src/components/Mosaic/types.d.ts +79 -0
  63. package/dist/types/src/components/Mosaic/types.d.ts.map +1 -0
  64. package/dist/types/src/components/Scrollable/Scrollable.d.ts +17 -0
  65. package/dist/types/src/components/Scrollable/Scrollable.d.ts.map +1 -0
  66. package/dist/types/src/components/Scrollable/Scrollable.stories.d.ts +8 -0
  67. package/dist/types/src/components/Scrollable/Scrollable.stories.d.ts.map +1 -0
  68. package/dist/types/src/components/Scrollable/index.d.ts +2 -0
  69. package/dist/types/src/components/Scrollable/index.d.ts.map +1 -0
  70. package/dist/types/src/components/Stack/Stack.d.ts +24 -0
  71. package/dist/types/src/components/Stack/Stack.d.ts.map +1 -0
  72. package/dist/types/src/components/Stack/Stack.stories.d.ts +9 -0
  73. package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -0
  74. package/dist/types/src/components/Stack/index.d.ts.map +1 -0
  75. package/dist/types/src/components/index.d.ts +7 -0
  76. package/dist/types/src/components/index.d.ts.map +1 -0
  77. package/dist/types/src/hooks/index.d.ts +4 -0
  78. package/dist/types/src/hooks/index.d.ts.map +1 -0
  79. package/dist/types/src/hooks/useContainerDebug.d.ts +9 -0
  80. package/dist/types/src/hooks/useContainerDebug.d.ts.map +1 -0
  81. package/dist/types/src/hooks/useEventHandlerAdapter.d.ts +32 -0
  82. package/dist/types/src/hooks/useEventHandlerAdapter.d.ts.map +1 -0
  83. package/dist/types/src/hooks/useVisibleItems.d.ts +16 -0
  84. package/dist/types/src/hooks/useVisibleItems.d.ts.map +1 -0
  85. package/dist/types/src/index.d.ts +2 -1
  86. package/dist/types/src/index.d.ts.map +1 -1
  87. package/dist/types/src/testing/Board.d.ts +45 -0
  88. package/dist/types/src/testing/Board.d.ts.map +1 -0
  89. package/dist/types/src/testing/CardContainer.d.ts +17 -0
  90. package/dist/types/src/testing/CardContainer.d.ts.map +1 -0
  91. package/dist/types/src/testing/DefaultStackTile.d.ts +4 -0
  92. package/dist/types/src/testing/DefaultStackTile.d.ts.map +1 -0
  93. package/dist/types/src/testing/Slot.stories.d.ts +14 -0
  94. package/dist/types/src/testing/Slot.stories.d.ts.map +1 -0
  95. package/dist/types/src/testing/Virtualizer.stories.d.ts +12 -0
  96. package/dist/types/src/testing/Virtualizer.stories.d.ts.map +1 -0
  97. package/dist/types/src/testing/decorator.d.ts +3 -0
  98. package/dist/types/src/testing/decorator.d.ts.map +1 -0
  99. package/dist/types/src/testing/index.d.ts +4 -2
  100. package/dist/types/src/testing/index.d.ts.map +1 -1
  101. package/dist/types/src/translations.d.ts +7 -0
  102. package/dist/types/src/translations.d.ts.map +1 -0
  103. package/dist/types/tsconfig.tsbuildinfo +1 -1
  104. package/package.json +63 -40
  105. package/src/components/Card/Card.stories.tsx +148 -0
  106. package/src/components/Card/Card.tsx +435 -0
  107. package/src/components/Card/CardDragPreview.tsx +23 -0
  108. package/src/components/Card/index.ts +8 -0
  109. package/src/components/Card/styles.ts +23 -0
  110. package/src/components/Focus/Focus.tsx +95 -0
  111. package/src/components/Focus/index.ts +7 -0
  112. package/src/components/Focus/styles.ts +24 -0
  113. package/src/components/Image/Image.stories.tsx +86 -0
  114. package/src/components/Image/Image.tsx +223 -0
  115. package/src/components/Image/index.ts +5 -0
  116. package/src/components/Layout/Layout.stories.tsx +59 -0
  117. package/src/components/Layout/Layout.tsx +108 -0
  118. package/src/components/Layout/index.ts +5 -0
  119. package/src/components/Mosaic/Mosaic.stories.tsx +113 -0
  120. package/src/components/Mosaic/Mosaic.tsx +930 -0
  121. package/src/components/Mosaic/extension.ts +141 -0
  122. package/src/components/Mosaic/index.ts +10 -0
  123. package/src/components/Mosaic/styles.ts +31 -0
  124. package/src/components/Mosaic/types.ts +82 -0
  125. package/src/components/Scrollable/Scrollable.stories.tsx +33 -0
  126. package/src/components/Scrollable/Scrollable.tsx +99 -0
  127. package/src/components/Scrollable/index.ts +5 -0
  128. package/src/components/Scrollable/scrollable.css +20 -0
  129. package/src/components/Stack/Stack.stories.tsx +115 -0
  130. package/src/components/Stack/Stack.tsx +210 -0
  131. package/src/{views → components}/Stack/index.ts +1 -1
  132. package/src/components/index.ts +10 -0
  133. package/src/hooks/index.ts +7 -0
  134. package/src/hooks/useContainerDebug.tsx +46 -0
  135. package/src/hooks/useEventHandlerAdapter.ts +99 -0
  136. package/src/hooks/useVisibleItems.ts +43 -0
  137. package/src/index.ts +3 -2
  138. package/src/testing/Board.tsx +278 -0
  139. package/src/testing/CardContainer.tsx +88 -0
  140. package/src/testing/DefaultStackTile.tsx +38 -0
  141. package/src/testing/Slot.stories.tsx +101 -0
  142. package/src/testing/Virtualizer.stories.tsx +133 -0
  143. package/src/testing/decorator.tsx +16 -0
  144. package/src/testing/index.ts +5 -3
  145. package/src/translations.ts +15 -0
  146. package/dist/lib/node/index.cjs +0 -705
  147. package/dist/lib/node/index.cjs.map +0 -7
  148. package/dist/lib/node/meta.json +0 -1
  149. package/dist/types/src/mosaic/Container.d.ts +0 -94
  150. package/dist/types/src/mosaic/Container.d.ts.map +0 -1
  151. package/dist/types/src/mosaic/Debug.d.ts +0 -9
  152. package/dist/types/src/mosaic/Debug.d.ts.map +0 -1
  153. package/dist/types/src/mosaic/DefaultComponent.d.ts +0 -4
  154. package/dist/types/src/mosaic/DefaultComponent.d.ts.map +0 -1
  155. package/dist/types/src/mosaic/DragOverlay.d.ts +0 -11
  156. package/dist/types/src/mosaic/DragOverlay.d.ts.map +0 -1
  157. package/dist/types/src/mosaic/Mosaic.d.ts +0 -34
  158. package/dist/types/src/mosaic/Mosaic.d.ts.map +0 -1
  159. package/dist/types/src/mosaic/Root.d.ts +0 -28
  160. package/dist/types/src/mosaic/Root.d.ts.map +0 -1
  161. package/dist/types/src/mosaic/SortableContext.d.ts +0 -14
  162. package/dist/types/src/mosaic/SortableContext.d.ts.map +0 -1
  163. package/dist/types/src/mosaic/Tile.d.ts +0 -74
  164. package/dist/types/src/mosaic/Tile.d.ts.map +0 -1
  165. package/dist/types/src/mosaic/hooks/index.d.ts +0 -5
  166. package/dist/types/src/mosaic/hooks/index.d.ts.map +0 -1
  167. package/dist/types/src/mosaic/hooks/useContainer.d.ts +0 -4
  168. package/dist/types/src/mosaic/hooks/useContainer.d.ts.map +0 -1
  169. package/dist/types/src/mosaic/hooks/useItemsWithOrigin.d.ts +0 -3
  170. package/dist/types/src/mosaic/hooks/useItemsWithOrigin.d.ts.map +0 -1
  171. package/dist/types/src/mosaic/hooks/useItemsWithPreview.d.ts +0 -10
  172. package/dist/types/src/mosaic/hooks/useItemsWithPreview.d.ts.map +0 -1
  173. package/dist/types/src/mosaic/hooks/useMosaic.d.ts +0 -2
  174. package/dist/types/src/mosaic/hooks/useMosaic.d.ts.map +0 -1
  175. package/dist/types/src/mosaic/index.d.ts +0 -5
  176. package/dist/types/src/mosaic/index.d.ts.map +0 -1
  177. package/dist/types/src/mosaic/types.d.ts +0 -10
  178. package/dist/types/src/mosaic/types.d.ts.map +0 -1
  179. package/dist/types/src/mosaic/util/data.d.ts +0 -3
  180. package/dist/types/src/mosaic/util/data.d.ts.map +0 -1
  181. package/dist/types/src/mosaic/util/index.d.ts +0 -5
  182. package/dist/types/src/mosaic/util/index.d.ts.map +0 -1
  183. package/dist/types/src/mosaic/util/path.d.ts +0 -14
  184. package/dist/types/src/mosaic/util/path.d.ts.map +0 -1
  185. package/dist/types/src/mosaic/util/path.test.d.ts +0 -2
  186. package/dist/types/src/mosaic/util/path.test.d.ts.map +0 -1
  187. package/dist/types/src/mosaic/util/props.d.ts +0 -4
  188. package/dist/types/src/mosaic/util/props.d.ts.map +0 -1
  189. package/dist/types/src/mosaic/util/styles.d.ts +0 -3
  190. package/dist/types/src/mosaic/util/styles.d.ts.map +0 -1
  191. package/dist/types/src/testing/Cards.d.ts +0 -10
  192. package/dist/types/src/testing/Cards.d.ts.map +0 -1
  193. package/dist/types/src/testing/generator.d.ts +0 -35
  194. package/dist/types/src/testing/generator.d.ts.map +0 -1
  195. package/dist/types/src/views/Demo/Demo.stories.d.ts +0 -14
  196. package/dist/types/src/views/Demo/Demo.stories.d.ts.map +0 -1
  197. package/dist/types/src/views/Demo/Echo.stories.d.ts +0 -8
  198. package/dist/types/src/views/Demo/Echo.stories.d.ts.map +0 -1
  199. package/dist/types/src/views/Grid/Grid.d.ts +0 -31
  200. package/dist/types/src/views/Grid/Grid.d.ts.map +0 -1
  201. package/dist/types/src/views/Grid/Grid.stories.d.ts +0 -14
  202. package/dist/types/src/views/Grid/Grid.stories.d.ts.map +0 -1
  203. package/dist/types/src/views/Grid/index.d.ts +0 -3
  204. package/dist/types/src/views/Grid/index.d.ts.map +0 -1
  205. package/dist/types/src/views/Grid/layout.d.ts +0 -27
  206. package/dist/types/src/views/Grid/layout.d.ts.map +0 -1
  207. package/dist/types/src/views/Grid/testing.d.ts +0 -11
  208. package/dist/types/src/views/Grid/testing.d.ts.map +0 -1
  209. package/dist/types/src/views/Kanban/Kanban.d.ts +0 -12
  210. package/dist/types/src/views/Kanban/Kanban.d.ts.map +0 -1
  211. package/dist/types/src/views/Kanban/Kanban.stories.d.ts +0 -29
  212. package/dist/types/src/views/Kanban/Kanban.stories.d.ts.map +0 -1
  213. package/dist/types/src/views/Kanban/index.d.ts +0 -2
  214. package/dist/types/src/views/Kanban/index.d.ts.map +0 -1
  215. package/dist/types/src/views/Kanban/testing.d.ts +0 -12
  216. package/dist/types/src/views/Kanban/testing.d.ts.map +0 -1
  217. package/dist/types/src/views/Stack/Columns.stories.d.ts +0 -34
  218. package/dist/types/src/views/Stack/Columns.stories.d.ts.map +0 -1
  219. package/dist/types/src/views/Stack/Stack.d.ts +0 -10
  220. package/dist/types/src/views/Stack/Stack.d.ts.map +0 -1
  221. package/dist/types/src/views/Stack/Stack.stories.d.ts +0 -40
  222. package/dist/types/src/views/Stack/Stack.stories.d.ts.map +0 -1
  223. package/dist/types/src/views/Stack/index.d.ts.map +0 -1
  224. package/dist/types/src/views/Stack/testing.d.ts +0 -10
  225. package/dist/types/src/views/Stack/testing.d.ts.map +0 -1
  226. package/dist/types/src/views/Tree/Graph.stories.d.ts +0 -11
  227. package/dist/types/src/views/Tree/Graph.stories.d.ts.map +0 -1
  228. package/dist/types/src/views/Tree/Tree.d.ts +0 -13
  229. package/dist/types/src/views/Tree/Tree.d.ts.map +0 -1
  230. package/dist/types/src/views/Tree/Tree.stories.d.ts +0 -42
  231. package/dist/types/src/views/Tree/Tree.stories.d.ts.map +0 -1
  232. package/dist/types/src/views/Tree/index.d.ts +0 -2
  233. package/dist/types/src/views/Tree/index.d.ts.map +0 -1
  234. package/dist/types/src/views/Tree/testing.d.ts +0 -11
  235. package/dist/types/src/views/Tree/testing.d.ts.map +0 -1
  236. package/dist/types/src/views/index.d.ts +0 -5
  237. package/dist/types/src/views/index.d.ts.map +0 -1
  238. package/src/mosaic/Container.tsx +0 -190
  239. package/src/mosaic/Debug.tsx +0 -24
  240. package/src/mosaic/DefaultComponent.tsx +0 -26
  241. package/src/mosaic/DragOverlay.tsx +0 -150
  242. package/src/mosaic/Mosaic.ts +0 -100
  243. package/src/mosaic/Root.tsx +0 -320
  244. package/src/mosaic/SortableContext.tsx +0 -61
  245. package/src/mosaic/Tile.tsx +0 -207
  246. package/src/mosaic/hooks/index.ts +0 -8
  247. package/src/mosaic/hooks/useContainer.ts +0 -13
  248. package/src/mosaic/hooks/useItemsWithOrigin.ts +0 -33
  249. package/src/mosaic/hooks/useItemsWithPreview.ts +0 -69
  250. package/src/mosaic/hooks/useMosaic.ts +0 -11
  251. package/src/mosaic/index.ts +0 -9
  252. package/src/mosaic/types.ts +0 -15
  253. package/src/mosaic/util/data.ts +0 -19
  254. package/src/mosaic/util/index.ts +0 -8
  255. package/src/mosaic/util/path.test.ts +0 -24
  256. package/src/mosaic/util/path.ts +0 -21
  257. package/src/mosaic/util/props.ts +0 -14
  258. package/src/mosaic/util/styles.ts +0 -10
  259. package/src/testing/Cards.tsx +0 -88
  260. package/src/testing/generator.ts +0 -131
  261. package/src/views/Demo/Demo.stories.tsx +0 -81
  262. package/src/views/Demo/Echo.stories.tsx +0 -75
  263. package/src/views/Grid/Grid.stories.tsx +0 -51
  264. package/src/views/Grid/Grid.tsx +0 -265
  265. package/src/views/Grid/index.ts +0 -7
  266. package/src/views/Grid/layout.ts +0 -42
  267. package/src/views/Grid/testing.tsx +0 -92
  268. package/src/views/Kanban/Kanban.stories.tsx +0 -51
  269. package/src/views/Kanban/Kanban.tsx +0 -139
  270. package/src/views/Kanban/index.ts +0 -5
  271. package/src/views/Kanban/testing.tsx +0 -234
  272. package/src/views/Stack/Columns.stories.tsx +0 -63
  273. package/src/views/Stack/Stack.stories.tsx +0 -65
  274. package/src/views/Stack/Stack.tsx +0 -58
  275. package/src/views/Stack/testing.tsx +0 -77
  276. package/src/views/Tree/Graph.stories.tsx +0 -37
  277. package/src/views/Tree/Tree.stories.tsx +0 -95
  278. package/src/views/Tree/Tree.tsx +0 -126
  279. package/src/views/Tree/index.ts +0 -5
  280. package/src/views/Tree/testing.tsx +0 -142
  281. package/src/views/index.ts +0 -8
  282. /package/dist/types/src/{views → components}/Stack/index.d.ts +0 -0
package/README.md CHANGED
@@ -1,45 +1,3 @@
1
- # Mosaic
1
+ # @dxos/react-ui-mosaic
2
2
 
3
- Mosaic is a drag-and-drop layout system for building responsive, multi-column layouts.
4
- It is built on top of [dnd kit](https://dndkit.com/) and DXOS UI.
5
-
6
-
7
- ## Taxonomy
8
-
9
- | Item | Description |
10
- |:-------------------|:---------------------------------------------------------------------------------------------------------------------|
11
- | Mosaic.Provider | A Root container and React context that routes events between Containers. |
12
- | Mosaic.Overlay | A DOM portal managed by the Mosaic context that renders a Container's Component while dragging. |
13
- | Mosaic.Container | A complex React component that manages the layout of a collection of tiles (e.g., Grid, Kanban, Stack, Table, Tree). |
14
- | Mosaic.Tile | A Draggable wrapper managed by its parent container. |
15
- | Component | A pure React component that is rendered within the layout via the container's Tile or the root Mosaic's Overlay. |
16
- | Item | A datum represented by a Tile. |
17
-
18
-
19
- ## Design principles
20
-
21
- - Extends `dnd-kit` without obfuscation or wrapping;
22
- for example, mosaic provides additional hooks in the same manner as `dnd-kit`'s own useSortable`.
23
- - Mosaics consist of containers and pure components that can be laid out and rearranged by the user
24
- - DXOS UI components are pure tailwind-styled Radix components that expose small parts (List, ListItem, ListItem.Header, etc.)
25
- - Mosaic Containers define their own data model and __assemble__ Radix-style DXOS UI components.
26
- - Containers implement specific layouts of Tiles, which may reuse common components, such as DXOS UI Cards.
27
- - Container Models facilitate pure React components, but are easily mapped to data structures (e.g., `Graph`)
28
- and `ECHO` data sets without the need to wrap/map the underlying __reactive__ objects (e.g., via `signals`).
29
-
30
-
31
- ## Issues
32
-
33
- - When dragging across grid always set bounds (currently changes when between cell gaps).
34
- - Remove padding between tiles in Sortable (causes flickering); instead selectively add padding to tiles.
35
-
36
- - Projections/Lenses: tile props (e.g., label); position (e.g., index, grid position).
37
- - Standardize generics (when to use any, unknown, provide default, etc.)
38
- - Standardize events (e.g., onSelect).
39
- - Standardize Mosaic Root components (e.g., make generic).
40
- - https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref#58473012
41
- - Radix-style components and theming (forwardRefs).
42
- - Focus (e.g., show grid while dragging in grid).
43
- - Mobile
44
-
45
- - Future of dnd-kit: https://github.com/clauderic/dnd-kit/issues/1194#issuecomment-1696704815
3
+ Mosaic is a collection of high-level building blocks for building Web and mobile applications.