@dxos/react-ui-table 0.5.1-next.2ad6c47 → 0.5.1-next.5a770e3

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 (23) hide show
  1. package/dist/lib/browser/index.mjs +118 -90
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/components/ColumnMenu/ColumnMenu.d.ts +6 -6
  5. package/dist/types/src/components/ColumnMenu/ColumnMenu.d.ts.map +1 -1
  6. package/dist/types/src/components/ColumnMenu/ColumnMenu.stories.d.ts +2 -2
  7. package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts +2 -2
  8. package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts.map +1 -1
  9. package/dist/types/src/components/Table/Table.d.ts +1 -1
  10. package/dist/types/src/components/Table/Table.d.ts.map +1 -1
  11. package/dist/types/src/components/Table/props.d.ts +3 -1
  12. package/dist/types/src/components/Table/props.d.ts.map +1 -1
  13. package/dist/types/src/hooks/useColumnSorting.d.ts +9 -3
  14. package/dist/types/src/hooks/useColumnSorting.d.ts.map +1 -1
  15. package/package.json +15 -15
  16. package/src/components/ColumnMenu/ColumnMenu.stories.tsx +2 -2
  17. package/src/components/ColumnMenu/ColumnMenu.tsx +49 -36
  18. package/src/components/ColumnMenu/ColumnSettingsForm.tsx +10 -5
  19. package/src/components/Table/Table.stories.tsx +8 -8
  20. package/src/components/Table/Table.tsx +6 -3
  21. package/src/components/Table/props.ts +3 -1
  22. package/src/hooks/useColumnSorting.ts +34 -24
  23. package/src/schema/SchemaToTable.stories.tsx +1 -1
package/dist/lib/browser/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-table/src/translations.ts":{"bytes":2343,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytes":11696,"imports":[{"path":"@phosphor-icons/react","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-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx","kind":"import-statement","original":"./CellCombobox"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx":{"bytes":24959,"imports":[{"path":"@phosphor-icons/react","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":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/useColumnSizing.ts":{"bytes":5013,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts":{"bytes":5069,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytes":6297,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"../components"}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/useRowSelection.ts":{"bytes":5030,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytes":811,"imports":[{"path":"packages/ui/react-ui-table/src/hooks/useColumnSizing.ts","kind":"import-statement","original":"./useColumnSizing"},{"path":"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts","kind":"import-statement","original":"./useColumnSorting"},{"path":"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts","kind":"import-statement","original":"./usePinLastRow"},{"path":"packages/ui/react-ui-table/src/hooks/useRowSelection.ts","kind":"import-statement","original":"./useRowSelection"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx":{"bytes":18877,"imports":[{"path":"@phosphor-icons/react","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":"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx","kind":"import-statement","original":"./ColumnSettingsForm"},{"path":"packages/ui/react-ui-table/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts":{"bytes":608,"imports":[{"path":"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx","kind":"import-statement","original":"./ColumnMenu"},{"path":"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx","kind":"import-statement","original":"./ColumnSettingsForm"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytes":3140,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts":{"bytes":3903,"imports":[{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/theme.ts":{"bytes":10262,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytes":4842,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"../Table/TableContext"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytes":8850,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts","kind":"import-statement","original":"./TableRootContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Cell/Cell.tsx","kind":"import-statement","original":"../Cell/Cell"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytes":4638,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytes":7863,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytes":30127,"imports":[{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"@tanstack/react-table","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":"packages/ui/react-ui-table/src/components/Table/TableBody.tsx","kind":"import-statement","original":"./TableBody"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx","kind":"import-statement","original":"./TableFooter"},{"path":"packages/ui/react-ui-table/src/components/Table/TableHead.tsx","kind":"import-statement","original":"./TableHead"},{"path":"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts","kind":"import-statement","original":"./TableRootContext"},{"path":"packages/ui/react-ui-table/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/props.ts":{"bytes":2679,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytes":669,"imports":[{"path":"packages/ui/react-ui-table/src/components/Table/Table.tsx","kind":"import-statement","original":"./Table"},{"path":"packages/ui/react-ui-table/src/components/Table/props.ts","kind":"import-statement","original":"./props"},{"path":"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts","kind":"import-statement","original":"./TableRootContext"}],"format":"esm"},"packages/ui/react-ui-table/src/components/index.ts":{"bytes":644,"imports":[{"path":"packages/ui/react-ui-table/src/components/Cell/index.ts","kind":"import-statement","original":"./Cell"},{"path":"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts","kind":"import-statement","original":"./ColumnMenu"},{"path":"packages/ui/react-ui-table/src/components/Table/index.ts","kind":"import-statement","original":"./Table"}],"format":"esm"},"packages/ui/react-ui-table/src/helpers.tsx":{"bytes":54890,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","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-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./components/Table/TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"}],"format":"esm"},"packages/ui/react-ui-table/src/schema/schema.ts":{"bytes":9419,"imports":[{"path":"@effect/schema/AST","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/schema/schemaToColumns.ts":{"bytes":5160,"imports":[{"path":"packages/ui/react-ui-table/src/schema/schema.ts","kind":"import-statement","original":"./schema"},{"path":"packages/ui/react-ui-table/src/helpers.tsx","kind":"import-statement","original":"../helpers"}],"format":"esm"},"packages/ui/react-ui-table/src/schema/types.ts":{"bytes":1117,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/schema/index.ts":{"bytes":573,"imports":[{"path":"packages/ui/react-ui-table/src/schema/schemaToColumns.ts","kind":"import-statement","original":"./schemaToColumns"},{"path":"packages/ui/react-ui-table/src/schema/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"},"packages/ui/react-ui-table/src/types.ts":{"bytes":1830,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/index.ts":{"bytes":1102,"imports":[{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/helpers.tsx","kind":"import-statement","original":"./helpers"},{"path":"packages/ui/react-ui-table/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-table/src/schema/index.ts","kind":"import-statement","original":"./schema"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"},{"path":"packages/ui/react-ui-table/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-table/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":116547},"packages/ui/react-ui-table/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","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-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","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":"@phosphor-icons/react","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":"@dxos/util","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"@tanstack/react-table","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":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","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":"@effect/schema/AST","kind":"import-statement","external":true}],"exports":["CellCombobox","ColumnBuilder","ColumnMenu","ColumnSettingsForm","ColumnSettingsPanel","MemoizedVirtualisedTableContent","SortIndicator","Table","TablePrimitive","TableRootContext","createColumnBuilder","currentRow","flushPadding","gridCellFocusRing","groupTh","headPadding","schemaToColumnDefs","selectedRow","tableRoot","tbodyRoot","tbodyTr","tdContent","tdRoot","textPadding","tfootRoot","tfootTh","tfootTr","theadResizeRoot","theadRoot","theadTh","theadTr","translations","useColumnResizing","useColumnSorting","usePinLastRow","useRowSelection","useTableRootContext"],"entryPoint":"packages/ui/react-ui-table/src/index.ts","inputs":{"packages/ui/react-ui-table/src/translations.ts":{"bytesInOutput":611},"packages/ui/react-ui-table/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytesInOutput":2989},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx":{"bytesInOutput":5419},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx":{"bytesInOutput":6917},"packages/ui/react-ui-table/src/hooks/useColumnSizing.ts":{"bytesInOutput":1068},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts":{"bytesInOutput":1082},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytesInOutput":1381},"packages/ui/react-ui-table/src/hooks/useRowSelection.ts":{"bytesInOutput":1055},"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytesInOutput":7309},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytesInOutput":1983},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytesInOutput":358},"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts":{"bytesInOutput":758},"packages/ui/react-ui-table/src/theme.ts":{"bytesInOutput":2205},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytesInOutput":973},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytesInOutput":1015},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytesInOutput":1739},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/helpers.tsx":{"bytesInOutput":13550},"packages/ui/react-ui-table/src/schema/schema.ts":{"bytesInOutput":1957},"packages/ui/react-ui-table/src/schema/schemaToColumns.ts":{"bytesInOutput":1047},"packages/ui/react-ui-table/src/schema/index.ts":{"bytesInOutput":0}},"bytes":55470}}}
1
+ {"inputs":{"packages/ui/react-ui-table/src/translations.ts":{"bytes":2343,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytes":11696,"imports":[{"path":"@phosphor-icons/react","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-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx","kind":"import-statement","original":"./CellCombobox"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx":{"bytes":25276,"imports":[{"path":"@phosphor-icons/react","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":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"../../translations"}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/useColumnSizing.ts":{"bytes":5013,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytes":3140,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts":{"bytes":6741,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"../components/Table/TableContext"}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytes":6297,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"../components"}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/useRowSelection.ts":{"bytes":5030,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytes":811,"imports":[{"path":"packages/ui/react-ui-table/src/hooks/useColumnSizing.ts","kind":"import-statement","original":"./useColumnSizing"},{"path":"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts","kind":"import-statement","original":"./useColumnSorting"},{"path":"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts","kind":"import-statement","original":"./usePinLastRow"},{"path":"packages/ui/react-ui-table/src/hooks/useRowSelection.ts","kind":"import-statement","original":"./useRowSelection"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx":{"bytes":21032,"imports":[{"path":"@phosphor-icons/react","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":"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx","kind":"import-statement","original":"./ColumnSettingsForm"},{"path":"packages/ui/react-ui-table/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts":{"bytes":608,"imports":[{"path":"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx","kind":"import-statement","original":"./ColumnMenu"},{"path":"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx","kind":"import-statement","original":"./ColumnSettingsForm"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts":{"bytes":3903,"imports":[{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/theme.ts":{"bytes":10262,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytes":4842,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"../Table/TableContext"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytes":8850,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts","kind":"import-statement","original":"./TableRootContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"},{"path":"packages/ui/react-ui-table/src/components/Cell/Cell.tsx","kind":"import-statement","original":"../Cell/Cell"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytes":4638,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytes":7863,"imports":[{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytes":30604,"imports":[{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"@tanstack/react-table","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":"packages/ui/react-ui-table/src/components/Table/TableBody.tsx","kind":"import-statement","original":"./TableBody"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./TableContext"},{"path":"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx","kind":"import-statement","original":"./TableFooter"},{"path":"packages/ui/react-ui-table/src/components/Table/TableHead.tsx","kind":"import-statement","original":"./TableHead"},{"path":"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts","kind":"import-statement","original":"./TableRootContext"},{"path":"packages/ui/react-ui-table/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"../../theme"}],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/props.ts":{"bytes":2875,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytes":669,"imports":[{"path":"packages/ui/react-ui-table/src/components/Table/Table.tsx","kind":"import-statement","original":"./Table"},{"path":"packages/ui/react-ui-table/src/components/Table/props.ts","kind":"import-statement","original":"./props"},{"path":"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts","kind":"import-statement","original":"./TableRootContext"}],"format":"esm"},"packages/ui/react-ui-table/src/components/index.ts":{"bytes":644,"imports":[{"path":"packages/ui/react-ui-table/src/components/Cell/index.ts","kind":"import-statement","original":"./Cell"},{"path":"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts","kind":"import-statement","original":"./ColumnMenu"},{"path":"packages/ui/react-ui-table/src/components/Table/index.ts","kind":"import-statement","original":"./Table"}],"format":"esm"},"packages/ui/react-ui-table/src/helpers.tsx":{"bytes":54890,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","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-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/components/Table/TableContext.tsx","kind":"import-statement","original":"./components/Table/TableContext"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"}],"format":"esm"},"packages/ui/react-ui-table/src/schema/schema.ts":{"bytes":9419,"imports":[{"path":"@effect/schema/AST","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/schema/schemaToColumns.ts":{"bytes":5160,"imports":[{"path":"packages/ui/react-ui-table/src/schema/schema.ts","kind":"import-statement","original":"./schema"},{"path":"packages/ui/react-ui-table/src/helpers.tsx","kind":"import-statement","original":"../helpers"}],"format":"esm"},"packages/ui/react-ui-table/src/schema/types.ts":{"bytes":1117,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/schema/index.ts":{"bytes":573,"imports":[{"path":"packages/ui/react-ui-table/src/schema/schemaToColumns.ts","kind":"import-statement","original":"./schemaToColumns"},{"path":"packages/ui/react-ui-table/src/schema/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"},"packages/ui/react-ui-table/src/types.ts":{"bytes":1830,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/index.ts":{"bytes":1102,"imports":[{"path":"packages/ui/react-ui-table/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-table/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-table/src/helpers.tsx","kind":"import-statement","original":"./helpers"},{"path":"packages/ui/react-ui-table/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-table/src/schema/index.ts","kind":"import-statement","original":"./schema"},{"path":"packages/ui/react-ui-table/src/theme.ts","kind":"import-statement","original":"./theme"},{"path":"packages/ui/react-ui-table/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-table/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":119278},"packages/ui/react-ui-table/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","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-searchlist","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","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":"@phosphor-icons/react","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":"@dxos/util","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","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":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"@tanstack/react-table","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":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"date-fns/format","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","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":"@effect/schema/AST","kind":"import-statement","external":true}],"exports":["CellCombobox","ColumnBuilder","ColumnMenu","ColumnSettingsForm","MemoizedVirtualisedTableContent","SortIndicator","Table","TablePrimitive","TableRootContext","createColumnBuilder","currentRow","flushPadding","gridCellFocusRing","groupTh","headPadding","schemaToColumnDefs","selectedRow","tableRoot","tbodyRoot","tbodyTr","tdContent","tdRoot","textPadding","tfootRoot","tfootTh","tfootTr","theadResizeRoot","theadRoot","theadTh","theadTr","translations","useColumnResizing","useColumnSorting","usePinLastRow","useRowSelection","useSortColumn","useTableRootContext"],"entryPoint":"packages/ui/react-ui-table/src/index.ts","inputs":{"packages/ui/react-ui-table/src/translations.ts":{"bytesInOutput":611},"packages/ui/react-ui-table/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx":{"bytesInOutput":2989},"packages/ui/react-ui-table/src/components/Cell/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx":{"bytesInOutput":6168},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx":{"bytesInOutput":7006},"packages/ui/react-ui-table/src/hooks/useColumnSizing.ts":{"bytesInOutput":1068},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts":{"bytesInOutput":1472},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytesInOutput":358},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytesInOutput":1381},"packages/ui/react-ui-table/src/hooks/useRowSelection.ts":{"bytesInOutput":1055},"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytesInOutput":7412},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytesInOutput":1983},"packages/ui/react-ui-table/src/components/Table/TableRootContext.ts":{"bytesInOutput":758},"packages/ui/react-ui-table/src/theme.ts":{"bytesInOutput":2205},"packages/ui/react-ui-table/src/components/Cell/Cell.tsx":{"bytesInOutput":973},"packages/ui/react-ui-table/src/components/Table/TableFooter.tsx":{"bytesInOutput":1015},"packages/ui/react-ui-table/src/components/Table/TableHead.tsx":{"bytesInOutput":1739},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/helpers.tsx":{"bytesInOutput":13550},"packages/ui/react-ui-table/src/schema/schema.ts":{"bytesInOutput":1957},"packages/ui/react-ui-table/src/schema/schemaToColumns.ts":{"bytesInOutput":1047},"packages/ui/react-ui-table/src/schema/index.ts":{"bytesInOutput":0}},"bytes":56856}}}
package/dist/types/src/components/ColumnMenu/ColumnMenu.d.ts CHANGED
@@ -2,18 +2,18 @@ import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/
2
2
  import { type TableDef, type ColumnProps } from '../../schema';
3
3
  export type ColumnMenuProps<TData extends RowData, TValue> = {
4
4
  context: HeaderContext<TData, TValue>;
5
- tableDefs: TableDef[];
5
+ tablesToReference: TableDef[];
6
6
  tableDef: TableDef;
7
7
  column: ColumnProps;
8
+ columnOrderable: boolean;
9
+ columnPosition: 'start' | 'end' | undefined;
10
+ onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
8
11
  onUpdate?: (id: string, column: ColumnProps) => void;
9
12
  onDelete?: (id: string) => void;
10
13
  };
11
- export declare const ColumnMenu: <TData extends unknown, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => JSX.Element;
12
- export declare const ColumnSettingsPanel: <TData extends unknown, TValue>({ tableDefs, tableDef, column, onUpdate, onDelete, onClose, }: ColumnMenuProps<TData, TValue> & {
13
- onClose: () => void;
14
- }) => JSX.Element;
14
+ export declare const ColumnMenu: <TData extends unknown, TValue>({ column, columnOrderable, columnPosition, onColumnReorder, ...props }: ColumnMenuProps<TData, TValue>) => JSX.Element;
15
15
  export declare const SortIndicator: ({ direction, onClick, }: {
16
- direction: SortDirection | false;
16
+ direction: SortDirection | undefined;
17
17
  onClick: (e: any) => void;
18
18
  }) => JSX.Element | null;
19
19
  //# sourceMappingURL=ColumnMenu.d.ts.map
package/dist/types/src/components/ColumnMenu/ColumnMenu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQ7F,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI;IAC3D,OAAO,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,sGAuFtB,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAOe,MAAM,IAAI;iBAkBxD,CAAC;AAEF,eAAO,MAAM,aAAa;eAIb,aAAa,GAAG,KAAK;iBACnB,GAAG,KAAK,IAAI;wBAsB1B,CAAC"}
1
+ {"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQ7F,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI;IAC3D,OAAO,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtC,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAC5C,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,wJA4HtB,CAAC;AAEF,eAAO,MAAM,aAAa;eAIb,aAAa,GAAG,SAAS;iBACvB,GAAG,KAAK,IAAI;wBAsB1B,CAAC"}
package/dist/types/src/components/ColumnMenu/ColumnMenu.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import '@dxosTheme';
2
2
  import { type ColumnProps } from '../../schema';
3
3
  declare const _default: {
4
4
  title: string;
5
- component: <TData extends unknown, TValue>({ column, ...props }: import("./ColumnMenu").ColumnMenuProps<TData, TValue>) => JSX.Element;
5
+ component: <TData extends unknown, TValue>({ column, columnOrderable, columnPosition, onColumnReorder, ...props }: import("./ColumnMenu").ColumnMenuProps<TData, TValue>) => JSX.Element;
6
6
  decorators: import("@storybook/react").Decorator[];
7
7
  };
8
8
  export default _default;
@@ -21,7 +21,7 @@ export declare const Default: {
21
21
  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
22
22
  onDelete?: ((id: string) => void) | undefined;
23
23
  tableDef: import("../../schema").TableDef;
24
- tableDefs: import("../../schema").TableDef[];
24
+ tablesToReference: import("../../schema").TableDef[];
25
25
  column: ColumnProps;
26
26
  };
27
27
  decorators: ((Story: any) => JSX.Element)[];
package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts CHANGED
@@ -2,10 +2,10 @@ import { type TableDef, type ColumnProps } from '../../schema';
2
2
  export type ColumnSettingsFormProps = {
3
3
  column: ColumnProps;
4
4
  tableDef: TableDef;
5
- tableDefs: TableDef[];
5
+ tablesToReference: TableDef[];
6
6
  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
7
7
  onDelete?: ((id: string) => void) | undefined;
8
8
  onClose?: () => void;
9
9
  };
10
- export declare const ColumnSettingsForm: ({ column, tableDef, tableDefs, onUpdate, onDelete, onClose, }: ColumnSettingsFormProps) => JSX.Element;
10
+ export declare const ColumnSettingsForm: ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose, }: ColumnSettingsFormProps) => JSX.Element;
11
11
  //# sourceMappingURL=ColumnSettingsForm.d.ts.map
package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettingsForm.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,cAAc,CAAC;AAShF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kEAO5B,uBAAuB,gBAkLzB,CAAC"}
1
+ {"version":3,"file":"ColumnSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettingsForm.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,cAAc,CAAC;AAShF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAO5B,uBAAuB,gBAuLzB,CAAC"}
package/dist/types/src/components/Table/Table.d.ts CHANGED
@@ -12,8 +12,8 @@ export declare const TablePrimitive: <TData extends unknown>(props: TableProps<T
12
12
  export declare const MemoizedVirtualisedTableContent: React.MemoExoticComponent<() => JSX.Element>;
13
13
  export declare const Table: {
14
14
  Root: ({ children }: TableRootProps) => JSX.Element;
15
- Table: <TData extends unknown>(props: TableProps<TData>) => JSX.Element;
16
15
  Viewport: ({ children, classNames, asChild, ...props }: TableViewportProps) => JSX.Element;
16
+ Main: <TData extends unknown>(props: TableProps<TData>) => JSX.Element;
17
17
  };
18
18
  export {};
19
19
  //# sourceMappingURL=Table.d.ts.map
package/dist/types/src/components/Table/Table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAA0D,MAAM,OAAO,CAAC;AAErH,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAQvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,KAAK,cAAc,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAOpD,KAAK,kBAAkB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBF,eAAO,MAAM,cAAc,kEAqG1B,CAAC;AAyFF,eAAO,MAAM,+BAA+B,8CAAsC,CAAC;AAkCnF,eAAO,MAAM,KAAK;yBAzPe,cAAc;;4DASqB,kBAAkB;CAoPrF,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAA0D,MAAM,OAAO,CAAC;AAErH,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAQvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,KAAK,cAAc,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAOpD,KAAK,kBAAkB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBF,eAAO,MAAM,cAAc,kEAwG1B,CAAC;AAyFF,eAAO,MAAM,+BAA+B,8CAAsC,CAAC;AAkCnF,eAAO,MAAM,KAAK;yBA5Pe,cAAc;4DASqB,kBAAkB;;CAuPrF,CAAC"}
package/dist/types/src/components/Table/props.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
2
2
  import { type ClassNameValue } from '@dxos/react-ui-types';
3
+ import { type ColumnSorting } from '../../hooks';
3
4
  import { type KeyValue, type TableColumnDef } from '../../types';
4
5
  export type TableFlags = Partial<{
5
6
  role: 'table' | 'grid' | 'treegrid';
@@ -25,6 +26,7 @@ export type TableProps<TData extends RowData> = TableFlags & TableCurrent<TData>
25
26
  data: TData[];
26
27
  columns: TableColumnDef<TData>[];
27
28
  onColumnResize: (state: Record<string, number>) => void;
29
+ onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
28
30
  columnVisibility: VisibilityState;
29
31
  rowSelection: RowSelectionState;
30
32
  defaultRowSelection: RowSelectionState;
@@ -37,5 +39,5 @@ export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
37
39
  export type TableContextValue<TData> = TableFlags & TableCurrent<TData> & Pick<TableProps<TData>, 'keyAccessor'> & {
38
40
  table: Table<TData>;
39
41
  isGrid: boolean;
40
- };
42
+ } & ColumnSorting;
41
43
  //# sourceMappingURL=props.d.ts.map
package/dist/types/src/components/Table/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/props.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/G,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC;IAC/B,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,OAAO,IAAI,OAAO,CAAC;IAExD,YAAY,EAAE,KAAK,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IAAI,UAAU,GACxD,YAAY,CAAC,KAAK,CAAC,GACnB,OAAO,CAAC;IACN,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACjC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,gBAAgB,EAAE,eAAe,CAAC;IAElC,YAAY,EAAE,iBAAiB,CAAC;IAChC,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,oBAAoB,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE,qBAAqB,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAExD,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEL,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,KAAK,IAAI,UAAU,GAC/C,YAAY,CAAC,KAAK,CAAC,GACnB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACvC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/props.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/G,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC;IAC/B,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,KAAK,SAAS,OAAO,IAAI,OAAO,CAAC;IAExD,YAAY,EAAE,KAAK,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC,CAAC,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IAAI,UAAU,GACxD,YAAY,CAAC,KAAK,CAAC,GACnB,OAAO,CAAC;IACN,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACjC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,eAAe,CAAC;IAElC,YAAY,EAAE,iBAAiB,CAAC;IAChC,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,oBAAoB,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhE,qBAAqB,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAExD,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEL,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,KAAK,IAAI,UAAU,GAC/C,YAAY,CAAC,KAAK,CAAC,GACnB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACvC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB,GAAG,aAAa,CAAC"}
package/dist/types/src/hooks/useColumnSorting.d.ts CHANGED
@@ -1,7 +1,13 @@
1
- import { type SortDirection, type Column } from '@tanstack/react-table';
2
- export declare const useColumnSorting: (column: Column<any>) => {
1
+ import { type SortDirection, type Column, type ColumnSort } from '@tanstack/react-table';
2
+ export declare const useColumnSorting: () => {
3
+ sorting: ColumnSort[];
4
+ sortColumn: (columnId: string, sortDirection: SortDirection) => void;
5
+ clearColumnSorting: () => void;
6
+ };
7
+ export type ColumnSorting = ReturnType<typeof useColumnSorting>;
8
+ export declare const useSortColumn: (column: Column<any>) => {
3
9
  canSort: boolean;
4
- sortDirection: false | SortDirection;
10
+ sortDirection: "asc" | "desc" | undefined;
5
11
  onSelectSort: (direction: SortDirection) => void;
6
12
  onToggleSort: () => void;
7
13
  onClearSort: () => void;
package/dist/types/src/hooks/useColumnSorting.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useColumnSorting.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useColumnSorting.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxE,eAAO,MAAM,gBAAgB,WAAY,OAAO,GAAG,CAAC;;;8BAoCjB,aAAa;;;CAU/C,CAAC"}
1
+ {"version":3,"file":"useColumnSorting.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useColumnSorting.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKzF,eAAO,MAAM,gBAAgB;;2BAGG,MAAM,iBAAiB,aAAa;;CASnE,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEhE,eAAO,MAAM,aAAa,WAAY,OAAO,GAAG,CAAC;;;8BA2Bd,aAAa;;;CAW/C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-table",
3
- "version": "0.5.1-next.2ad6c47",
3
+ "version": "0.5.1-next.5a770e3",
4
4
  "description": "A table component.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,15 +26,15 @@
26
26
  "@tanstack/react-virtual": "^3.0.1",
27
27
  "date-fns": "^3.3.1",
28
28
  "effect": "2.4.9",
29
- "@dxos/async": "0.5.1-next.2ad6c47",
30
- "@dxos/invariant": "0.5.1-next.2ad6c47",
31
- "@dxos/keys": "0.5.1-next.2ad6c47",
32
- "@dxos/log": "0.5.1-next.2ad6c47",
33
- "@dxos/react-ui-searchlist": "0.5.1-next.2ad6c47",
34
- "@dxos/react-ui-theme": "0.5.1-next.2ad6c47",
35
- "@dxos/react-ui-types": "0.5.1-next.2ad6c47",
36
- "@dxos/util": "0.5.1-next.2ad6c47",
37
- "@dxos/react-ui": "0.5.1-next.2ad6c47"
29
+ "@dxos/async": "0.5.1-next.5a770e3",
30
+ "@dxos/invariant": "0.5.1-next.5a770e3",
31
+ "@dxos/react-ui": "0.5.1-next.5a770e3",
32
+ "@dxos/log": "0.5.1-next.5a770e3",
33
+ "@dxos/keys": "0.5.1-next.5a770e3",
34
+ "@dxos/react-ui-searchlist": "0.5.1-next.5a770e3",
35
+ "@dxos/react-ui-theme": "0.5.1-next.5a770e3",
36
+ "@dxos/react-ui-types": "0.5.1-next.5a770e3",
37
+ "@dxos/util": "0.5.1-next.5a770e3"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@phosphor-icons/react": "^2.1.5",
@@ -45,11 +45,11 @@
45
45
  "react-dom": "^18.2.0",
46
46
  "vite": "^5.2.9",
47
47
  "vite-plugin-turbosnap": "^1.0.2",
48
- "@dxos/echo-schema": "0.5.1-next.2ad6c47",
49
- "@dxos/random": "0.5.1-next.2ad6c47",
50
- "@dxos/react-ui-theme": "0.5.1-next.2ad6c47",
51
- "@dxos/storybook-utils": "0.5.1-next.2ad6c47",
52
- "@dxos/echo-signals": "0.5.1-next.2ad6c47"
48
+ "@dxos/echo-signals": "0.5.1-next.5a770e3",
49
+ "@dxos/echo-schema": "0.5.1-next.5a770e3",
50
+ "@dxos/random": "0.5.1-next.5a770e3",
51
+ "@dxos/react-ui-theme": "0.5.1-next.5a770e3",
52
+ "@dxos/storybook-utils": "0.5.1-next.5a770e3"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "@phosphor-icons/react": "^2.0.5",
package/src/components/ColumnMenu/ColumnMenu.stories.tsx CHANGED
@@ -19,13 +19,13 @@ export default {
19
19
  decorators: [withTheme],
20
20
  };
21
21
 
22
- const defs: Pick<ColumnSettingsFormProps, 'tableDef' | 'tableDefs'> = {
22
+ const defs: Pick<ColumnSettingsFormProps, 'tableDef' | 'tablesToReference'> = {
23
23
  tableDef: {
24
24
  id: '1',
25
25
  name: 'table 1',
26
26
  columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
27
27
  },
28
- tableDefs: [
28
+ tablesToReference: [
29
29
  {
30
30
  id: '1',
31
31
  name: 'table 1',
package/src/components/ColumnMenu/ColumnMenu.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { X, GearSix, CaretDown, ArrowDown, ArrowUp } from '@phosphor-icons/react';
5
+ import { X, GearSix, CaretDown, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from '@phosphor-icons/react';
6
6
  import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
7
7
  import React, { useRef, useState, useCallback } from 'react';
8
8
 
@@ -10,23 +10,32 @@ import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
10
10
  import { getSize, mx } from '@dxos/react-ui-theme';
11
11
 
12
12
  import { ColumnSettingsForm } from './ColumnSettingsForm';
13
- import { useColumnSorting } from '../../hooks';
13
+ import { useSortColumn } from '../../hooks';
14
14
  import { type TableDef, type ColumnProps } from '../../schema';
15
15
 
16
16
  export type ColumnMenuProps<TData extends RowData, TValue> = {
17
17
  context: HeaderContext<TData, TValue>;
18
- tableDefs: TableDef[];
18
+ tablesToReference: TableDef[];
19
19
  tableDef: TableDef;
20
20
  column: ColumnProps;
21
+ columnOrderable: boolean;
22
+ columnPosition: 'start' | 'end' | undefined;
23
+ onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
21
24
  onUpdate?: (id: string, column: ColumnProps) => void;
22
25
  onDelete?: (id: string) => void;
23
26
  };
24
27
 
25
- export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
28
+ export const ColumnMenu = <TData extends RowData, TValue>({
29
+ column,
30
+ columnOrderable,
31
+ columnPosition,
32
+ onColumnReorder,
33
+ ...props
34
+ }: ColumnMenuProps<TData, TValue>) => {
26
35
  const title = column.label?.length ? column.label : column.id;
27
36
  const header = props.context.header;
28
37
 
29
- const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
38
+ const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useSortColumn(header.column);
30
39
 
31
40
  const columnSettingsAnchorRef = useRef<any>(null);
32
41
 
@@ -83,7 +92,7 @@ export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }:
83
92
  <ArrowDown className={getSize(4)} />
84
93
  </span>
85
94
  </DropdownMenu.Item>
86
- {sortDirection !== false && (
95
+ {sortDirection && (
87
96
  <DropdownMenu.Item onClick={onClearSort}>
88
97
  <span className='grow'>Clear sort</span>
89
98
  <span className='opacity-50'>
@@ -93,6 +102,28 @@ export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }:
93
102
  )}
94
103
  </>
95
104
  )}
105
+
106
+ {columnOrderable && (
107
+ <>
108
+ {columnPosition !== 'start' && (
109
+ <DropdownMenu.Item onClick={() => onColumnReorder(header.column.id, 'left')}>
110
+ <span className='grow'>Move left</span>
111
+ <span className='opacity-50'>
112
+ <ArrowLeft className={mx(getSize(4))} />
113
+ </span>
114
+ </DropdownMenu.Item>
115
+ )}
116
+ {columnPosition !== 'end' && (
117
+ <DropdownMenu.Item onClick={() => onColumnReorder(header.column.id, 'right')}>
118
+ <span className='grow'>Move right</span>
119
+ <span className='opacity-50'>
120
+ <ArrowRight className={mx(getSize(4))} />
121
+ </span>
122
+ </DropdownMenu.Item>
123
+ )}
124
+ </>
125
+ )}
126
+
96
127
  <DropdownMenu.Item onClick={onOpenColumnSettings}>
97
128
  <span className='grow'>Column settings</span>
98
129
  <span className='opacity-50'>
@@ -104,48 +135,30 @@ export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }:
104
135
  </DropdownMenu.Content>
105
136
  </DropdownMenu.Portal>
106
137
 
107
- <ColumnSettingsPanel {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
138
+ <Popover.Portal>
139
+ <Popover.Content>
140
+ <Popover.Viewport classNames='w-60'>
141
+ <DensityProvider density='fine'>
142
+ <ColumnSettingsForm {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
143
+ </DensityProvider>
144
+ </Popover.Viewport>
145
+ <Popover.Arrow />
146
+ </Popover.Content>
147
+ </Popover.Portal>
108
148
  </Popover.Root>
109
149
  </DropdownMenu.Root>
110
150
  </div>
111
151
  );
112
152
  };
113
153
 
114
- export const ColumnSettingsPanel = <TData extends RowData, TValue>({
115
- tableDefs,
116
- tableDef,
117
- column,
118
- onUpdate,
119
- onDelete,
120
- onClose,
121
- }: ColumnMenuProps<TData, TValue> & { onClose: () => void }) => (
122
- <Popover.Portal>
123
- <Popover.Content>
124
- <Popover.Viewport classNames='w-60'>
125
- <DensityProvider density='fine'>
126
- <ColumnSettingsForm
127
- column={column}
128
- tableDefs={tableDefs}
129
- tableDef={tableDef}
130
- onUpdate={onUpdate}
131
- onDelete={onDelete}
132
- onClose={onClose}
133
- />
134
- </DensityProvider>
135
- </Popover.Viewport>
136
- <Popover.Arrow />
137
- </Popover.Content>
138
- </Popover.Portal>
139
- );
140
-
141
154
  export const SortIndicator = ({
142
155
  direction,
143
156
  onClick,
144
157
  }: {
145
- direction: SortDirection | false;
158
+ direction: SortDirection | undefined;
146
159
  onClick: (e: any) => void;
147
160
  }) => {
148
- if (direction === false) {
161
+ if (direction === undefined) {
149
162
  return null;
150
163
  }
151
164
 
package/src/components/ColumnMenu/ColumnSettingsForm.tsx CHANGED
@@ -20,7 +20,7 @@ const Section: FC<PropsWithChildren & { className?: string }> = ({ children, cla
20
20
  export type ColumnSettingsFormProps = {
21
21
  column: ColumnProps;
22
22
  tableDef: TableDef;
23
- tableDefs: TableDef[];
23
+ tablesToReference: TableDef[];
24
24
  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
25
25
  onDelete?: ((id: string) => void) | undefined;
26
26
  onClose?: () => void;
@@ -29,7 +29,7 @@ export type ColumnSettingsFormProps = {
29
29
  export const ColumnSettingsForm = ({
30
30
  column,
31
31
  tableDef,
32
- tableDefs,
32
+ tablesToReference,
33
33
  onUpdate,
34
34
  onDelete,
35
35
  onClose,
@@ -82,6 +82,11 @@ export const ColumnSettingsForm = ({
82
82
  onClose?.();
83
83
  };
84
84
 
85
+ const handleDelete = () => {
86
+ onDelete?.(column.id);
87
+ onClose?.();
88
+ };
89
+
85
90
  return (
86
91
  <div className='flex flex-col gap-1'>
87
92
  <Section>
@@ -150,7 +155,7 @@ export const ColumnSettingsForm = ({
150
155
  <Select.Portal>
151
156
  <Select.Content>
152
157
  <Select.Viewport>
153
- {tableDefs
158
+ {tablesToReference
154
159
  .filter((t) => t.id !== tableDef.id)
155
160
  .map(({ id, name }) => (
156
161
  <Select.Option key={id} value={id}>
@@ -174,7 +179,7 @@ export const ColumnSettingsForm = ({
174
179
  <Select.Portal>
175
180
  <Select.Content>
176
181
  <Select.Viewport>
177
- {tableDefs
182
+ {tablesToReference
178
183
  .find((tableDef) => tableDef.id === formState.refTable)
179
184
  ?.columns.map(({ id, label }) => (
180
185
  <Select.Option key={id} value={id}>
@@ -203,7 +208,7 @@ export const ColumnSettingsForm = ({
203
208
  <div className='grow' />
204
209
  <X className={getSize(5)} />
205
210
  </Button>
206
- <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
211
+ <Button classNames='is-full flex gap-2' onClick={handleDelete}>
207
212
  <span>{t('delete label')}</span>
208
213
  <div className='grow' />
209
214
  <Trash className={getSize(5)} />