@dxos/react-ui-mosaic 0.3.3-main.1817c8a → 0.3.3-main.22971a3
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.
- package/dist/lib/browser/index.mjs +87 -43
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/mosaic/hooks/index.d.ts +0 -1
- package/dist/types/src/mosaic/hooks/index.d.ts.map +1 -1
- package/dist/types/src/mosaic/hooks/useItemsWithPreview.d.ts +2 -1
- package/dist/types/src/mosaic/hooks/useItemsWithPreview.d.ts.map +1 -1
- package/dist/types/src/testing/generator.d.ts +4 -4
- package/dist/types/src/testing/generator.d.ts.map +1 -1
- package/dist/types/src/views/Grid/Grid.d.ts +1 -1
- package/dist/types/src/views/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/views/Grid/Grid.stories.d.ts +1 -1
- package/package.json +13 -13
- package/src/mosaic/hooks/index.ts +0 -1
- package/src/mosaic/hooks/useItemsWithPreview.ts +56 -20
- package/src/testing/generator.ts +9 -9
- package/src/views/Grid/Grid.tsx +2 -0
- package/src/views/Tree/Tree.tsx +16 -10
- package/dist/types/src/mosaic/hooks/useSortedItems.d.ts +0 -6
- package/dist/types/src/mosaic/hooks/useSortedItems.d.ts.map +0 -1
- package/src/mosaic/hooks/useSortedItems.ts +0 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx":{"bytes":8053,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts":{"bytes":1561,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx","kind":"import-statement","original":"../Container"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx":{"bytes":2101,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/data.ts":{"bytes":2029,"imports":[{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/path.ts":{"bytes":3427,"imports":[],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts":{"bytes":1464,"imports":[{"path":"@dnd-kit/utilities","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts":{"bytes":633,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/data.ts","kind":"import-statement","original":"./data"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/path.ts","kind":"import-statement","original":"./path"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx":{"bytes":2903,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx":{"bytes":26016,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"lodash.pick","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx","kind":"import-statement","original":"./Container"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx","kind":"import-statement","original":"./Debug"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts":{"bytes":1191,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx","kind":"import-statement","original":"../Root"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts":{"bytes":8761,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts","kind":"import-statement","original":"./useMosaic"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useSortedItems.ts":{"bytes":1476,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts","kind":"import-statement","original":"./useContainer"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts":{"bytes":806,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts","kind":"import-statement","original":"./useContainer"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts","kind":"import-statement","original":"./useItemsWithPreview"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts","kind":"import-statement","original":"./useMosaic"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useSortedItems.ts","kind":"import-statement","original":"./useSortedItems"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/types.ts":{"bytes":854,"imports":[],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx":{"bytes":14978,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx":{"bytes":6845,"imports":[{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx":{"bytes":16527,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts":{"bytes":6028,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx","kind":"import-statement","original":"./Container"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx","kind":"import-statement","original":"./Debug"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx","kind":"import-statement","original":"./DragOverlay"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx","kind":"import-statement","original":"./SortableContext"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx","kind":"import-statement","original":"./Tile"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/index.ts":{"bytes":714,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts","kind":"import-statement","original":"./Mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts":{"bytes":4883,"imports":[],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx":{"bytes":23759,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts","kind":"import-statement","original":"./layout"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Grid/index.ts":{"bytes":556,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts","kind":"import-statement","original":"./layout"},{"path":"packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx":{"bytes":14820,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Kanban/index.ts":{"bytes":478,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx","kind":"import-statement","original":"./Kanban"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx":{"bytes":5469,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Stack/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx","kind":"import-statement","original":"./Stack"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx":{"bytes":12625,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Tree/index.ts":{"bytes":470,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/index.ts":{"bytes":708,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"packages/ui/react-ui-mosaic/src/views/Kanban/index.ts","kind":"import-statement","original":"./Kanban"},{"path":"packages/ui/react-ui-mosaic/src/views/Stack/index.ts","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-mosaic/src/views/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/index.ts":{"bytes":679,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"./mosaic"},{"path":"packages/ui/react-ui-mosaic/src/views/index.ts","kind":"import-statement","original":"./views"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-mosaic/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":86749},"packages/ui/react-ui-mosaic/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"lodash.pick","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"@dnd-kit/utilities","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Grid","Kanban","Mosaic","Path","Stack","Tree","calculateCellWidth","createMatrix","getBounds","getDimension","getPanelBounds","getTransformCSS","swapItems","useContainer","useItemsWithPreview","useMosaic","useSortedItems"],"entryPoint":"packages/ui/react-ui-mosaic/src/index.ts","inputs":{"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts":{"bytesInOutput":188},"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx":{"bytesInOutput":808},"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts":{"bytesInOutput":1913},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts":{"bytesInOutput":194},"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx":{"bytesInOutput":5523},"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx":{"bytesInOutput":442},"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx":{"bytesInOutput":640},"packages/ui/react-ui-mosaic/src/mosaic/util/data.ts":{"bytesInOutput":306},"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/mosaic/util/path.ts":{"bytesInOutput":678},"packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts":{"bytesInOutput":180},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useSortedItems.ts":{"bytesInOutput":136},"packages/ui/react-ui-mosaic/src/mosaic/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx":{"bytesInOutput":3434},"packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx":{"bytesInOutput":1191},"packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx":{"bytesInOutput":3168},"packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts":{"bytesInOutput":383},"packages/ui/react-ui-mosaic/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts":{"bytesInOutput":877},"packages/ui/react-ui-mosaic/src/views/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx":{"bytesInOutput":5556},"packages/ui/react-ui-mosaic/src/views/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx":{"bytesInOutput":3910},"packages/ui/react-ui-mosaic/src/views/Kanban/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx":{"bytesInOutput":1242},"packages/ui/react-ui-mosaic/src/views/Stack/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx":{"bytesInOutput":2967},"packages/ui/react-ui-mosaic/src/views/Tree/index.ts":{"bytesInOutput":0}},"bytes":35512}}}
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx":{"bytes":8053,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts":{"bytes":1561,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx","kind":"import-statement","original":"../Container"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx":{"bytes":2101,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/data.ts":{"bytes":2029,"imports":[{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/path.ts":{"bytes":3427,"imports":[],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts":{"bytes":1464,"imports":[{"path":"@dnd-kit/utilities","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts":{"bytes":633,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/data.ts","kind":"import-statement","original":"./data"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/path.ts","kind":"import-statement","original":"./path"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx":{"bytes":2903,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx":{"bytes":26016,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"lodash.pick","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx","kind":"import-statement","original":"./Container"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx","kind":"import-statement","original":"./Debug"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts":{"bytes":1191,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx","kind":"import-statement","original":"../Root"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts":{"bytes":12334,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts","kind":"import-statement","original":"./useMosaic"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts":{"bytes":700,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts","kind":"import-statement","original":"./useContainer"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts","kind":"import-statement","original":"./useItemsWithPreview"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts","kind":"import-statement","original":"./useMosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/types.ts":{"bytes":854,"imports":[],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx":{"bytes":14978,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx":{"bytes":6845,"imports":[{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx":{"bytes":16527,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts":{"bytes":6028,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx","kind":"import-statement","original":"./Container"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx","kind":"import-statement","original":"./Debug"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx","kind":"import-statement","original":"./DefaultComponent"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx","kind":"import-statement","original":"./DragOverlay"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx","kind":"import-statement","original":"./SortableContext"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx","kind":"import-statement","original":"./Tile"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/mosaic/index.ts":{"bytes":714,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts","kind":"import-statement","original":"./util"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts","kind":"import-statement","original":"./Mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts":{"bytes":4883,"imports":[],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx":{"bytes":23855,"imports":[{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts","kind":"import-statement","original":"./layout"},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Grid/index.ts":{"bytes":556,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts","kind":"import-statement","original":"./layout"},{"path":"packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx":{"bytes":14820,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Kanban/index.ts":{"bytes":478,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx","kind":"import-statement","original":"./Kanban"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx":{"bytes":5469,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Stack/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx","kind":"import-statement","original":"./Stack"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx":{"bytes":14259,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"../../mosaic"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/Tree/index.ts":{"bytes":470,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/views/index.ts":{"bytes":708,"imports":[{"path":"packages/ui/react-ui-mosaic/src/views/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"packages/ui/react-ui-mosaic/src/views/Kanban/index.ts","kind":"import-statement","original":"./Kanban"},{"path":"packages/ui/react-ui-mosaic/src/views/Stack/index.ts","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-mosaic/src/views/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-mosaic/src/index.ts":{"bytes":679,"imports":[{"path":"packages/ui/react-ui-mosaic/src/mosaic/index.ts","kind":"import-statement","original":"./mosaic"},{"path":"packages/ui/react-ui-mosaic/src/views/index.ts","kind":"import-statement","original":"./views"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-mosaic/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":88520},"packages/ui/react-ui-mosaic/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"lodash.pick","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"@dnd-kit/utilities","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@dnd-kit/sortable","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dnd-kit/core","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Grid","Kanban","Mosaic","Path","Stack","Tree","calculateCellWidth","createMatrix","getBounds","getDimension","getPanelBounds","getTransformCSS","swapItems","useContainer","useItemsWithPreview","useMosaic"],"entryPoint":"packages/ui/react-ui-mosaic/src/index.ts","inputs":{"packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts":{"bytesInOutput":188},"packages/ui/react-ui-mosaic/src/mosaic/Container.tsx":{"bytesInOutput":808},"packages/ui/react-ui-mosaic/src/mosaic/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts":{"bytesInOutput":2792},"packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts":{"bytesInOutput":194},"packages/ui/react-ui-mosaic/src/mosaic/Root.tsx":{"bytesInOutput":5523},"packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx":{"bytesInOutput":442},"packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx":{"bytesInOutput":640},"packages/ui/react-ui-mosaic/src/mosaic/util/data.ts":{"bytesInOutput":306},"packages/ui/react-ui-mosaic/src/mosaic/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/mosaic/util/path.ts":{"bytesInOutput":678},"packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts":{"bytesInOutput":180},"packages/ui/react-ui-mosaic/src/mosaic/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx":{"bytesInOutput":3434},"packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx":{"bytesInOutput":1191},"packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx":{"bytesInOutput":3168},"packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts":{"bytesInOutput":383},"packages/ui/react-ui-mosaic/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Grid/layout.ts":{"bytesInOutput":877},"packages/ui/react-ui-mosaic/src/views/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Grid/Grid.tsx":{"bytesInOutput":5576},"packages/ui/react-ui-mosaic/src/views/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Kanban/Kanban.tsx":{"bytesInOutput":3910},"packages/ui/react-ui-mosaic/src/views/Kanban/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Stack/Stack.tsx":{"bytesInOutput":1242},"packages/ui/react-ui-mosaic/src/views/Stack/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-mosaic/src/views/Tree/Tree.tsx":{"bytesInOutput":3462},"packages/ui/react-ui-mosaic/src/views/Tree/index.ts":{"bytesInOutput":0}},"bytes":36685}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}
|
|
@@ -3,8 +3,9 @@ import { type MosaicDataItem } from '../types';
|
|
|
3
3
|
* Returns a spliced collection of items including a placeholder if items that could drop,
|
|
4
4
|
* and removing any item that is currently being dragged out.
|
|
5
5
|
*/
|
|
6
|
-
export declare const useItemsWithPreview: <T extends MosaicDataItem>({ path, items }: {
|
|
6
|
+
export declare const useItemsWithPreview: <T extends MosaicDataItem>({ path, items, strategy, }: {
|
|
7
7
|
path: string;
|
|
8
8
|
items: T[];
|
|
9
|
+
strategy?: "default" | "layout-stable" | undefined;
|
|
9
10
|
}) => T[];
|
|
10
11
|
//# sourceMappingURL=useItemsWithPreview.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useItemsWithPreview.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/useItemsWithPreview.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C;;;GAGG;AACH,eAAO,MAAM,mBAAmB;
|
|
1
|
+
{"version":3,"file":"useItemsWithPreview.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/useItemsWithPreview.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C;;;GAGG;AACH,eAAO,MAAM,mBAAmB;UAKxB,MAAM;;;SAgFb,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Schema
|
|
1
|
+
import { Schema } from '@dxos/client/echo';
|
|
2
2
|
import { type TypedObject } from '@dxos/echo-schema';
|
|
3
3
|
export declare const range: <T>(fn: (i: number) => T | undefined, length: number) => T[];
|
|
4
4
|
export type TestItem = {
|
|
@@ -6,11 +6,11 @@ export type TestItem = {
|
|
|
6
6
|
type: string;
|
|
7
7
|
} & Record<string, any>;
|
|
8
8
|
type ObjectDataGenerator = {
|
|
9
|
-
createSchema?: () =>
|
|
9
|
+
createSchema?: () => Schema;
|
|
10
10
|
createData: () => any;
|
|
11
11
|
};
|
|
12
12
|
type ObjectFactory<T extends TypedObject> = {
|
|
13
|
-
schema?:
|
|
13
|
+
schema?: Schema;
|
|
14
14
|
createObject: () => T;
|
|
15
15
|
};
|
|
16
16
|
type ObjectFactoryMap = {
|
|
@@ -30,7 +30,7 @@ export declare class TestObjectGenerator {
|
|
|
30
30
|
types?: string[];
|
|
31
31
|
factories?: ObjectFactoryMap;
|
|
32
32
|
});
|
|
33
|
-
get schema():
|
|
33
|
+
get schema(): Schema[];
|
|
34
34
|
createObject({ types }?: {
|
|
35
35
|
types?: string[];
|
|
36
36
|
}): any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG9D,eAAO,MAAM,KAAK,cAAe,MAAM,4BAA4B,MAAM,QAG9C,CAAC;AAG5B,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CA6CpE,CAAC;AAEF;;GAEG;AACH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,MAAM,EAAE,CAErB;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE"}
|
|
@@ -25,6 +25,6 @@ export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicCon
|
|
|
25
25
|
/**
|
|
26
26
|
* Grid content.
|
|
27
27
|
*/
|
|
28
|
-
export declare const Grid: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, onAction, }: GridProps) => JSX.Element;
|
|
28
|
+
export declare const Grid: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onOver, onSelect, onCreate, onAction, }: GridProps) => JSX.Element;
|
|
29
29
|
export {};
|
|
30
30
|
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,mKAgBd,SAAS,gBAmHX,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import '@dxosTheme';
|
|
3
3
|
declare const _default: {
|
|
4
|
-
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;
|
|
4
|
+
component: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onOver, onSelect, onCreate, onAction, }: import("./Grid").GridProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
|
|
5
5
|
render: () => JSX.Element;
|
|
6
6
|
decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R>[];
|
|
7
7
|
parameters: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-mosaic",
|
|
3
|
-
"version": "0.3.3-main.
|
|
3
|
+
"version": "0.3.3-main.22971a3",
|
|
4
4
|
"description": "An intermediate interface for drag-and-drop interactions.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
"@preact/signals-core": "^1.5.0",
|
|
23
23
|
"@radix-ui/react-compose-refs": "^1.0.0",
|
|
24
24
|
"@tldraw/indices": "2.0.0-alpha.14",
|
|
25
|
-
"deepsignal": "
|
|
25
|
+
"deepsignal": "1.4.0-shallow.0",
|
|
26
26
|
"lodash.defaultsdeep": "^4.6.1",
|
|
27
27
|
"lodash.pick": "^4.4.0",
|
|
28
28
|
"react-resize-detector": "^7.1.2",
|
|
29
|
-
"@dxos/debug": "0.3.3-main.
|
|
30
|
-
"@dxos/invariant": "0.3.3-main.
|
|
31
|
-
"@dxos/keys": "0.3.3-main.
|
|
32
|
-
"@dxos/react-ui": "0.3.3-main.
|
|
33
|
-
"@dxos/react-ui-theme": "0.3.3-main.
|
|
34
|
-
"@dxos/react-ui-types": "0.3.3-main.
|
|
35
|
-
"@dxos/util": "0.3.3-main.
|
|
29
|
+
"@dxos/debug": "0.3.3-main.22971a3",
|
|
30
|
+
"@dxos/invariant": "0.3.3-main.22971a3",
|
|
31
|
+
"@dxos/keys": "0.3.3-main.22971a3",
|
|
32
|
+
"@dxos/react-ui": "0.3.3-main.22971a3",
|
|
33
|
+
"@dxos/react-ui-theme": "0.3.3-main.22971a3",
|
|
34
|
+
"@dxos/react-ui-types": "0.3.3-main.22971a3",
|
|
35
|
+
"@dxos/util": "0.3.3-main.22971a3"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@faker-js/faker": "^8.0.2",
|
|
@@ -48,10 +48,10 @@
|
|
|
48
48
|
"react-dom": "^18.2.0",
|
|
49
49
|
"vite": "^4.3.9",
|
|
50
50
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
51
|
-
"@dxos/app-graph": "0.3.3-main.
|
|
52
|
-
"@dxos/echo-schema": "0.3.3-main.
|
|
53
|
-
"@dxos/gem-core": "0.3.3-main.
|
|
54
|
-
"@dxos/react-client": "0.3.3-main.
|
|
51
|
+
"@dxos/app-graph": "0.3.3-main.22971a3",
|
|
52
|
+
"@dxos/echo-schema": "0.3.3-main.22971a3",
|
|
53
|
+
"@dxos/gem-core": "0.3.3-main.22971a3",
|
|
54
|
+
"@dxos/react-client": "0.3.3-main.22971a3"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -12,7 +12,15 @@ import { Path } from '../util';
|
|
|
12
12
|
* Returns a spliced collection of items including a placeholder if items that could drop,
|
|
13
13
|
* and removing any item that is currently being dragged out.
|
|
14
14
|
*/
|
|
15
|
-
export const useItemsWithPreview = <T extends MosaicDataItem>({
|
|
15
|
+
export const useItemsWithPreview = <T extends MosaicDataItem>({
|
|
16
|
+
path,
|
|
17
|
+
items,
|
|
18
|
+
strategy = 'default',
|
|
19
|
+
}: {
|
|
20
|
+
path: string;
|
|
21
|
+
items: T[];
|
|
22
|
+
strategy?: 'default' | 'layout-stable';
|
|
23
|
+
}): T[] => {
|
|
16
24
|
const { operation, activeItem, overItem } = useMosaic();
|
|
17
25
|
const [itemsWithPreview, setItemsWithPreview] = useState(items);
|
|
18
26
|
const overParent =
|
|
@@ -24,7 +32,7 @@ export const useItemsWithPreview = <T extends MosaicDataItem>({ path, items }: {
|
|
|
24
32
|
const [lastOverParent, setLastOverParent] = useState(overParent);
|
|
25
33
|
|
|
26
34
|
useEffect(() => {
|
|
27
|
-
if (
|
|
35
|
+
if (!activeItem || !overItem) {
|
|
28
36
|
setLastOverParent(undefined);
|
|
29
37
|
setItemsWithPreview(items);
|
|
30
38
|
return;
|
|
@@ -34,31 +42,59 @@ export const useItemsWithPreview = <T extends MosaicDataItem>({ path, items }: {
|
|
|
34
42
|
return;
|
|
35
43
|
}
|
|
36
44
|
|
|
37
|
-
setLastOverParent(overParent);
|
|
38
|
-
|
|
39
45
|
const activeIsChild = Path.hasChild(path, activeItem.path);
|
|
40
46
|
const overIsChild = Path.hasChild(path, overItem.path);
|
|
41
47
|
const overSelf = overItem.path === path;
|
|
42
48
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
switch (strategy) {
|
|
50
|
+
case 'layout-stable':
|
|
51
|
+
setLastOverParent(overParent);
|
|
52
|
+
if (activeIsChild && !overIsChild && operation !== 'rearrange') {
|
|
53
|
+
// Change the dnd-id of the origin item that may move to a foreign destination
|
|
54
|
+
setItemsWithPreview((sortedItems) =>
|
|
55
|
+
sortedItems.map((item) => {
|
|
56
|
+
if (item.id === activeItem.item.id) {
|
|
57
|
+
return { ...item, id: `${item.id}--origin` };
|
|
58
|
+
} else {
|
|
59
|
+
return item;
|
|
60
|
+
}
|
|
61
|
+
}),
|
|
62
|
+
);
|
|
63
|
+
} else {
|
|
64
|
+
// Reset items.
|
|
65
|
+
setItemsWithPreview(items);
|
|
66
|
+
}
|
|
67
|
+
break;
|
|
68
|
+
case 'default':
|
|
69
|
+
default:
|
|
70
|
+
if (operation === 'reject' || operation === 'rearrange') {
|
|
71
|
+
setLastOverParent(undefined);
|
|
72
|
+
setItemsWithPreview(items);
|
|
73
|
+
return;
|
|
74
|
+
} else {
|
|
75
|
+
setLastOverParent(overParent);
|
|
76
|
+
}
|
|
77
|
+
if (!activeIsChild && overIsChild) {
|
|
78
|
+
// Insert item into sortable.
|
|
79
|
+
setItemsWithPreview((items) => {
|
|
80
|
+
const position = overItem.position as number;
|
|
81
|
+
return [...items.slice(0, position), activeItem.item as T, ...items.slice(position)];
|
|
82
|
+
});
|
|
83
|
+
} else if (!activeIsChild && overSelf) {
|
|
84
|
+
// Append item to end of sortable.
|
|
85
|
+
setItemsWithPreview((items) => [...items, activeItem.item as T]);
|
|
86
|
+
} else if (activeIsChild && !overIsChild) {
|
|
87
|
+
// Remove item being dragged out.
|
|
88
|
+
setItemsWithPreview((items) => items.filter((item) => item.id !== activeItem.item.id));
|
|
89
|
+
} else {
|
|
90
|
+
// Reset items.
|
|
91
|
+
setItemsWithPreview(items);
|
|
92
|
+
}
|
|
93
|
+
break;
|
|
58
94
|
}
|
|
59
95
|
}, [operation, activeItem, overItem, overParent, lastOverParent, path, items]);
|
|
60
96
|
|
|
61
97
|
// In order to avoid render glitching, rather than waiting for the effect to run,
|
|
62
98
|
// immediately return the new items after dropping an item into a new path.
|
|
63
|
-
return items.length === itemsWithPreview.length ? items : itemsWithPreview;
|
|
99
|
+
return strategy !== 'layout-stable' && items.length === itemsWithPreview.length ? items : itemsWithPreview;
|
|
64
100
|
};
|
package/src/testing/generator.ts
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
import { faker } from '@faker-js/faker';
|
|
10
10
|
|
|
11
|
-
import { Schema
|
|
11
|
+
import { Schema } from '@dxos/client/echo';
|
|
12
12
|
import { Expando, type TypedObject } from '@dxos/echo-schema';
|
|
13
13
|
|
|
14
14
|
// TODO(burdon): Util.
|
|
@@ -21,12 +21,12 @@ export const range = <T>(fn: (i: number) => T | undefined, length: number): T[]
|
|
|
21
21
|
export type TestItem = { id: string; type: string } & Record<string, any>;
|
|
22
22
|
|
|
23
23
|
type ObjectDataGenerator = {
|
|
24
|
-
createSchema?: () =>
|
|
24
|
+
createSchema?: () => Schema;
|
|
25
25
|
createData: () => any;
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
type ObjectFactory<T extends TypedObject> = {
|
|
29
|
-
schema?:
|
|
29
|
+
schema?: Schema; // TODO(burdon): Support both typed and expando schema.
|
|
30
30
|
createObject: () => T;
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -62,23 +62,23 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
|
|
|
62
62
|
|
|
63
63
|
project: {
|
|
64
64
|
createSchema: () =>
|
|
65
|
-
new
|
|
65
|
+
new Schema({
|
|
66
66
|
props: [
|
|
67
67
|
{
|
|
68
68
|
id: 'title',
|
|
69
|
-
type:
|
|
69
|
+
type: Schema.PropType.STRING,
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
id: 'repo',
|
|
73
|
-
type:
|
|
73
|
+
type: Schema.PropType.STRING,
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
id: 'status',
|
|
77
|
-
type:
|
|
77
|
+
type: Schema.PropType.STRING,
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
id: 'priority',
|
|
81
|
-
type:
|
|
81
|
+
type: Schema.PropType.NUMBER,
|
|
82
82
|
},
|
|
83
83
|
],
|
|
84
84
|
}),
|
|
@@ -106,7 +106,7 @@ export class TestObjectGenerator {
|
|
|
106
106
|
}, {});
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
get schema():
|
|
109
|
+
get schema(): Schema[] {
|
|
110
110
|
return Object.values(this.factories).map((f) => f.schema!);
|
|
111
111
|
}
|
|
112
112
|
|
package/src/views/Grid/Grid.tsx
CHANGED
|
@@ -90,6 +90,7 @@ export const Grid = ({
|
|
|
90
90
|
Component = Mosaic.DefaultComponent,
|
|
91
91
|
className,
|
|
92
92
|
onDrop,
|
|
93
|
+
onOver,
|
|
93
94
|
onSelect,
|
|
94
95
|
onCreate,
|
|
95
96
|
onAction,
|
|
@@ -155,6 +156,7 @@ export const Grid = ({
|
|
|
155
156
|
getOverlayProps: () => ({ grow: true }),
|
|
156
157
|
getOverlayStyle: () => getDimension(cellBounds, options.spacing),
|
|
157
158
|
onDrop,
|
|
159
|
+
onOver,
|
|
158
160
|
}}
|
|
159
161
|
>
|
|
160
162
|
<div className={mx('flex grow overflow-auto', className)}>
|
package/src/views/Tree/Tree.tsx
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, { forwardRef } from 'react';
|
|
5
|
+
import React, { forwardRef, useMemo } from 'react';
|
|
6
6
|
|
|
7
7
|
import { Card, Tree as TreeComponent, TreeItem as TreeItemComponent } from '@dxos/react-ui';
|
|
8
8
|
import { dropRing, mx } from '@dxos/react-ui-theme';
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
useContainer,
|
|
16
16
|
useMosaic,
|
|
17
17
|
Path,
|
|
18
|
-
|
|
18
|
+
useItemsWithPreview,
|
|
19
19
|
type MosaicCompareDataItem,
|
|
20
20
|
} from '../../mosaic';
|
|
21
21
|
|
|
@@ -55,13 +55,16 @@ export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], deb
|
|
|
55
55
|
};
|
|
56
56
|
|
|
57
57
|
const TreeRoot = ({ items }: { items: TreeData[] }) => {
|
|
58
|
-
const { id, Component } = useContainer();
|
|
59
|
-
const sortedItems =
|
|
58
|
+
const { id, Component, compare } = useContainer();
|
|
59
|
+
const sortedItems = useMemo(() => {
|
|
60
|
+
return compare ? [...items].sort(compare) : items;
|
|
61
|
+
}, [items, compare]);
|
|
62
|
+
const itemsWithPreview = useItemsWithPreview({ items: sortedItems, path: id, strategy: 'layout-stable' });
|
|
60
63
|
|
|
61
64
|
return (
|
|
62
65
|
<TreeComponent.Root classNames='flex flex-col'>
|
|
63
|
-
<Mosaic.SortableContext id={id} items={
|
|
64
|
-
{
|
|
66
|
+
<Mosaic.SortableContext id={id} items={itemsWithPreview} direction='vertical'>
|
|
67
|
+
{itemsWithPreview.map((item, index) => (
|
|
65
68
|
<TreeItemComponent.Root key={item.id} collapsible defaultOpen>
|
|
66
69
|
<Mosaic.SortableTile item={item} path={id} position={index} Component={Component!} />
|
|
67
70
|
</TreeItemComponent.Root>
|
|
@@ -101,13 +104,16 @@ const TreeItem: MosaicTileComponent<TreeData> = forwardRef(
|
|
|
101
104
|
|
|
102
105
|
const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
|
|
103
106
|
const { operation, overItem } = useMosaic();
|
|
104
|
-
const { Component } = useContainer();
|
|
105
|
-
const sortedItems =
|
|
107
|
+
const { Component, compare } = useContainer();
|
|
108
|
+
const sortedItems = useMemo(() => {
|
|
109
|
+
return compare ? [...items].sort(compare) : items;
|
|
110
|
+
}, [items, compare]);
|
|
111
|
+
const itemsWithPreview = useItemsWithPreview({ items: sortedItems, path, strategy: 'layout-stable' });
|
|
106
112
|
|
|
107
113
|
return (
|
|
108
114
|
<TreeItemComponent.Body className='pis-4'>
|
|
109
|
-
<Mosaic.SortableContext id={path} items={
|
|
110
|
-
{
|
|
115
|
+
<Mosaic.SortableContext id={path} items={itemsWithPreview} direction='vertical'>
|
|
116
|
+
{itemsWithPreview.map((child, index) => (
|
|
111
117
|
<TreeComponent.Branch key={child.id}>
|
|
112
118
|
<TreeItemComponent.Root collapsible defaultOpen>
|
|
113
119
|
<Mosaic.SortableTile
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { useContainer } from './useContainer';
|
|
6
|
-
import { type MosaicDataItem } from '../types';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Returns a sorted collection of items if a compare function is provided.
|
|
10
|
-
*/
|
|
11
|
-
export const useSortedItems = <T extends MosaicDataItem>(items: T[]): T[] => {
|
|
12
|
-
const { compare } = useContainer();
|
|
13
|
-
return compare ? [...items].sort(compare) : items;
|
|
14
|
-
};
|