@dxos/react-ui-table 0.4.10-main.c42bfdb → 0.4.10-main.c75170d
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 +153 -106
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/ColumnMenu/ColumnMenu.stories.d.ts +5 -1
- package/dist/types/src/components/ColumnMenu/ColumnMenu.stories.d.ts.map +1 -1
- package/dist/types/src/components/ColumnMenu/ColumnSettingsForm.d.ts.map +1 -1
- package/dist/types/src/components/Table/Table.d.ts.map +1 -1
- package/dist/types/src/components/Table/Table.stories.d.ts +3 -0
- package/dist/types/src/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/usePinLastRow.d.ts +1 -1
- package/dist/types/src/hooks/usePinLastRow.d.ts.map +1 -1
- package/dist/types/src/schema/schema.d.ts.map +1 -1
- package/dist/types/src/schema/schemaToColumns.d.ts +1 -1
- package/dist/types/src/schema/schemaToColumns.d.ts.map +1 -1
- package/package.json +16 -16
- package/src/components/ColumnMenu/ColumnMenu.stories.tsx +30 -0
- package/src/components/ColumnMenu/ColumnSettingsForm.tsx +69 -63
- package/src/components/Table/Table.stories.tsx +58 -3
- package/src/components/Table/Table.tsx +23 -8
- package/src/hooks/usePinLastRow.ts +41 -20
- package/src/schema/SchemaToTable.stories.tsx +1 -1
- package/src/schema/schema.test.ts +1 -1
- package/src/schema/schema.ts +36 -37
- package/src/schema/schemaToColumns.ts +2 -1
|
@@ -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":23695,"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/useColumnSorting.ts":{"bytes":5069,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytes":3982,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytes":597,"imports":[{"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"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx":{"bytes":18591,"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/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":8051,"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/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":32095,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","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":"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/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":3075,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytes":557,"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"}],"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":54314,"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":9040,"imports":[{"path":"@effect/schema","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/schema/schemaToColumns.ts":{"bytes":5164,"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":107763},"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":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","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":"@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":"@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","kind":"import-statement","external":true}],"exports":["CellCombobox","ColumnBuilder","ColumnMenu","ColumnSettingsForm","ColumnSettingsPanel","MemoizedVirtualisedTableContent","SortIndicator","Table","createColumnBuilder","currentRow","flushPadding","gridCellFocusRing","groupTh","headPadding","schemaToColumnDefs","selectedRow","tableRoot","tbodyRoot","tbodyTr","tdContent","tdRoot","textPadding","tfootRoot","tfootTh","tfootTr","theadResizeRoot","theadRoot","theadTh","theadTr","translations","useColumnSorting","usePinLastRow"],"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":5354},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx":{"bytesInOutput":6669},"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts":{"bytesInOutput":1082},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytesInOutput":896},"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytesInOutput":8325},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytesInOutput":1825},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytesInOutput":358},"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":13425},"packages/ui/react-ui-table/src/schema/schema.ts":{"bytesInOutput":1924},"packages/ui/react-ui-table/src/schema/schemaToColumns.ts":{"bytesInOutput":1047},"packages/ui/react-ui-table/src/schema/index.ts":{"bytesInOutput":0}},"bytes":52198}}}
|
|
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/useColumnSorting.ts":{"bytes":5069,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytes":5948,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytes":597,"imports":[{"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"}],"format":"esm"},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx":{"bytes":18591,"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/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":8051,"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/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":33669,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","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":"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/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":3075,"imports":[],"format":"esm"},"packages/ui/react-ui-table/src/components/Table/index.ts":{"bytes":557,"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"}],"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":54314,"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":109927},"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":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"@tanstack/react-table","kind":"import-statement","external":true},{"path":"@tanstack/react-virtual","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":"@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":"@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","createColumnBuilder","currentRow","flushPadding","gridCellFocusRing","groupTh","headPadding","schemaToColumnDefs","selectedRow","tableRoot","tbodyRoot","tbodyTr","tdContent","tdRoot","textPadding","tfootRoot","tfootTh","tfootTr","theadResizeRoot","theadRoot","theadTh","theadTr","translations","useColumnSorting","usePinLastRow"],"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":5354},"packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx":{"bytesInOutput":6917},"packages/ui/react-ui-table/src/hooks/useColumnSorting.ts":{"bytesInOutput":1082},"packages/ui/react-ui-table/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/hooks/usePinLastRow.ts":{"bytesInOutput":1318},"packages/ui/react-ui-table/src/components/ColumnMenu/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-table/src/components/Table/Table.tsx":{"bytesInOutput":8534},"packages/ui/react-ui-table/src/components/Table/TableBody.tsx":{"bytesInOutput":1825},"packages/ui/react-ui-table/src/components/Table/TableContext.tsx":{"bytesInOutput":358},"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":13425},"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":53110}}}
|
|
@@ -8,7 +8,6 @@ declare const _default: {
|
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const Default: {
|
|
10
10
|
args: {
|
|
11
|
-
column: ColumnProps;
|
|
12
11
|
context: {
|
|
13
12
|
header: {
|
|
14
13
|
column: {
|
|
@@ -19,6 +18,11 @@ export declare const Default: {
|
|
|
19
18
|
};
|
|
20
19
|
};
|
|
21
20
|
};
|
|
21
|
+
onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
|
|
22
|
+
onDelete?: ((id: string) => void) | undefined;
|
|
23
|
+
tableDef: import("../../schema").TableDef;
|
|
24
|
+
tableDefs: import("../../schema").TableDef[];
|
|
25
|
+
column: ColumnProps;
|
|
22
26
|
};
|
|
23
27
|
decorators: ((Story: any) => JSX.Element)[];
|
|
24
28
|
parameters: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AASpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;;;;;;AAEhD,wBAIE;AA2BF,eAAO,MAAM,OAAO;;;;;;2CAca,OAAO;;;;;;;;;;;;yBAY5B,GAAG;;;;CASd,CAAC;AAEF,eAAO,MAAM,YAAY;;CA2CxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSettingsForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnMenu/ColumnSettingsForm.tsx"],"names":[],"mappings":"
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,KAAqD,MAAM,OAAO,CAAC;AAS1E,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,KAAK,kEA6IjB,CAAC;AA8GF,eAAO,MAAM,+BAA+B,oDAlDzC,KAAK,mBAAmB,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,CAAC,iBAkDiB,CAAC"}
|
|
@@ -93,6 +93,9 @@ export declare const Editable: {
|
|
|
93
93
|
export declare const PinnedLastRow: {
|
|
94
94
|
render: () => JSX.Element;
|
|
95
95
|
};
|
|
96
|
+
export declare const InsertDelete: {
|
|
97
|
+
render: () => JSX.Element;
|
|
98
|
+
};
|
|
96
99
|
export declare const Resizable: {
|
|
97
100
|
render: () => JSX.Element;
|
|
98
101
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAQvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAKlD,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;;4BA4FsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAL5B,wBAuCE;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAmCnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CA4BpB,CAAC;AAEF,eAAO,MAAM,aAAa;;CA6BzB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAyBrB,CAAC;AAEF,eAAO,MAAM,eAAe;;CA4B3B,CAAC"}
|
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAQvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAKlD,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;;4BA4FsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAL5B,wBAuCE;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAmCnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CA4BpB,CAAC;AAEF,eAAO,MAAM,aAAa;;CA6BzB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAqDxB,CAAC;AAEF,eAAO,MAAM,SAAS;;CAyBrB,CAAC;AAEF,eAAO,MAAM,eAAe;;CA4B3B,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { type Table } from '@tanstack/react-table';
|
|
2
|
-
export declare const usePinLastRow: (pinLastRow: boolean | undefined, table: Table<any>, data: any, getScrollElement?: () => Element | null) => void;
|
|
2
|
+
export declare const usePinLastRow: (pinLastRow: boolean | undefined, table: Table<any>, data: any[], getScrollElement?: () => Element | null) => void;
|
|
3
3
|
//# sourceMappingURL=usePinLastRow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePinLastRow.d.ts","sourceRoot":"","sources":["../../../../src/hooks/usePinLastRow.ts"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"usePinLastRow.d.ts","sourceRoot":"","sources":["../../../../src/hooks/usePinLastRow.ts"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG7D,eAAO,MAAM,aAAa,eACZ,OAAO,GAAG,SAAS,SACxB,MAAM,GAAG,CAAC,QACX,GAAG,EAAE,qBACQ,MAAM,OAAO,GAAG,IAAI,SAoDxC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;AAG1D,eAAO,MAAM,wBAAwB,WAAY,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,KAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAwBnG,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type * as S from '@effect/schema/Schema';
|
|
2
1
|
import { type ColumnDef } from '@tanstack/react-table';
|
|
2
|
+
import type { S } from '@dxos/echo-schema';
|
|
3
3
|
export declare const schemaToColumnDefs: <T>(schema: S.Schema<T, any, never>) => ColumnDef<T, any>[];
|
|
4
4
|
//# sourceMappingURL=schemaToColumns.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schemaToColumns.d.ts","sourceRoot":"","sources":["../../../../src/schema/schemaToColumns.ts"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"schemaToColumns.d.ts","sourceRoot":"","sources":["../../../../src/schema/schemaToColumns.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAK3C,eAAO,MAAM,kBAAkB,6DAoC9B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-table",
|
|
3
|
-
"version": "0.4.10-main.
|
|
3
|
+
"version": "0.4.10-main.c75170d",
|
|
4
4
|
"description": "A table component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -24,29 +24,29 @@
|
|
|
24
24
|
"@tanstack/react-virtual": "^3.0.1",
|
|
25
25
|
"date-fns": "^3.3.1",
|
|
26
26
|
"effect": "2.4.9",
|
|
27
|
-
"@dxos/
|
|
28
|
-
"@dxos/
|
|
29
|
-
"@dxos/
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/react-ui-
|
|
33
|
-
"@dxos/react-ui": "0.4.10-main.
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/
|
|
27
|
+
"@dxos/async": "0.4.10-main.c75170d",
|
|
28
|
+
"@dxos/invariant": "0.4.10-main.c75170d",
|
|
29
|
+
"@dxos/keys": "0.4.10-main.c75170d",
|
|
30
|
+
"@dxos/log": "0.4.10-main.c75170d",
|
|
31
|
+
"@dxos/react-ui-theme": "0.4.10-main.c75170d",
|
|
32
|
+
"@dxos/react-ui-searchlist": "0.4.10-main.c75170d",
|
|
33
|
+
"@dxos/react-ui": "0.4.10-main.c75170d",
|
|
34
|
+
"@dxos/util": "0.4.10-main.c75170d",
|
|
35
|
+
"@dxos/react-ui-types": "0.4.10-main.c75170d"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@phosphor-icons/react": "^2.
|
|
38
|
+
"@phosphor-icons/react": "^2.1.5",
|
|
39
39
|
"@types/react": "^18.0.21",
|
|
40
40
|
"@types/react-dom": "^18.0.6",
|
|
41
41
|
"fast-check": "^3.15.1",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
43
|
"react-dom": "^18.2.0",
|
|
44
|
-
"vite": "^5.
|
|
44
|
+
"vite": "^5.2.9",
|
|
45
45
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
46
|
-
"@dxos/echo-schema": "0.4.10-main.
|
|
47
|
-
"@dxos/
|
|
48
|
-
"@dxos/
|
|
49
|
-
"@dxos/storybook-utils": "0.4.10-main.
|
|
46
|
+
"@dxos/echo-schema": "0.4.10-main.c75170d",
|
|
47
|
+
"@dxos/random": "0.4.10-main.c75170d",
|
|
48
|
+
"@dxos/react-ui-theme": "0.4.10-main.c75170d",
|
|
49
|
+
"@dxos/storybook-utils": "0.4.10-main.c75170d"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -10,6 +10,7 @@ import React from 'react';
|
|
|
10
10
|
import { withTheme } from '@dxos/storybook-utils';
|
|
11
11
|
|
|
12
12
|
import { ColumnMenu } from './ColumnMenu';
|
|
13
|
+
import { type ColumnSettingsFormProps } from './ColumnSettingsForm';
|
|
13
14
|
import { type ColumnProps } from '../../schema';
|
|
14
15
|
|
|
15
16
|
export default {
|
|
@@ -18,12 +19,41 @@ export default {
|
|
|
18
19
|
decorators: [withTheme],
|
|
19
20
|
};
|
|
20
21
|
|
|
22
|
+
const defs: Pick<ColumnSettingsFormProps, 'tableDef' | 'tableDefs'> = {
|
|
23
|
+
tableDef: {
|
|
24
|
+
id: '1',
|
|
25
|
+
name: 'table 1',
|
|
26
|
+
columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
|
|
27
|
+
},
|
|
28
|
+
tableDefs: [
|
|
29
|
+
{
|
|
30
|
+
id: '1',
|
|
31
|
+
name: 'table 1',
|
|
32
|
+
columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
id: '2',
|
|
36
|
+
name: 'table 2',
|
|
37
|
+
columns: [{ id: 'col-1', prop: 'two-foo', type: 'string' }],
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const funcs: Pick<ColumnSettingsFormProps, 'onUpdate' | 'onDelete'> = {
|
|
43
|
+
onUpdate: (...args: any) => console.log('onUpdate args', args),
|
|
44
|
+
onDelete: (...args: any) => console.log('onDelete args', args),
|
|
45
|
+
};
|
|
46
|
+
|
|
21
47
|
export const Default = {
|
|
22
48
|
args: {
|
|
23
49
|
column: {
|
|
24
50
|
id: 'test',
|
|
25
51
|
label: 'test',
|
|
26
52
|
} as ColumnProps,
|
|
53
|
+
|
|
54
|
+
...defs,
|
|
55
|
+
...funcs,
|
|
56
|
+
|
|
27
57
|
context: {
|
|
28
58
|
header: {
|
|
29
59
|
column: {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
|
-
|
|
5
4
|
import { Check, Trash, X } from '@phosphor-icons/react';
|
|
6
5
|
import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
|
|
7
6
|
|
|
@@ -35,21 +34,25 @@ export const ColumnSettingsForm = ({
|
|
|
35
34
|
onDelete,
|
|
36
35
|
onClose,
|
|
37
36
|
}: ColumnSettingsFormProps) => {
|
|
38
|
-
const [
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
const [formState, setFormState] = useState({
|
|
38
|
+
prop: column.id,
|
|
39
|
+
refTable: column.refTable,
|
|
40
|
+
refProp: column.refProp,
|
|
41
|
+
type: String(column.type),
|
|
42
|
+
label: column.label,
|
|
43
|
+
digits: String(column.digits ?? '0'),
|
|
44
|
+
});
|
|
45
|
+
|
|
44
46
|
const propRef = useRef<HTMLInputElement>(null);
|
|
45
47
|
const { t } = useTranslation(translationKey);
|
|
46
48
|
|
|
47
49
|
const handleCancel = () => {
|
|
48
|
-
setProp(column.id);
|
|
49
50
|
onClose?.();
|
|
50
51
|
};
|
|
51
52
|
|
|
52
53
|
const handleSave = () => {
|
|
54
|
+
const { prop, refTable, refProp, type, label, digits } = formState;
|
|
55
|
+
|
|
53
56
|
// Check valid.
|
|
54
57
|
if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
|
|
55
58
|
propRef.current?.focus();
|
|
@@ -58,7 +61,6 @@ export const ColumnSettingsForm = ({
|
|
|
58
61
|
|
|
59
62
|
// If already exists then check same type.
|
|
60
63
|
const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
|
|
61
|
-
|
|
62
64
|
if (current) {
|
|
63
65
|
// TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
|
|
64
66
|
if (current.type !== 'ref' /* || current.ref !== refTable */) {
|
|
@@ -68,7 +70,7 @@ export const ColumnSettingsForm = ({
|
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
onUpdate?.(
|
|
73
|
+
onUpdate?.(column.id, {
|
|
72
74
|
id: prop, // TODO(burdon): Make unique.
|
|
73
75
|
prop,
|
|
74
76
|
label,
|
|
@@ -77,7 +79,6 @@ export const ColumnSettingsForm = ({
|
|
|
77
79
|
refProp,
|
|
78
80
|
digits: safeParseInt(digits),
|
|
79
81
|
});
|
|
80
|
-
|
|
81
82
|
onClose?.();
|
|
82
83
|
};
|
|
83
84
|
|
|
@@ -88,8 +89,8 @@ export const ColumnSettingsForm = ({
|
|
|
88
89
|
<Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
|
|
89
90
|
<Input.TextInput
|
|
90
91
|
placeholder='Column label'
|
|
91
|
-
value={label ?? ''}
|
|
92
|
-
onChange={(event) =>
|
|
92
|
+
value={formState.label ?? ''}
|
|
93
|
+
onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
|
|
93
94
|
autoFocus
|
|
94
95
|
/>
|
|
95
96
|
</Input.Root>
|
|
@@ -98,14 +99,18 @@ export const ColumnSettingsForm = ({
|
|
|
98
99
|
<Input.TextInput
|
|
99
100
|
ref={propRef}
|
|
100
101
|
placeholder='Property key'
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
value={formState.prop ?? ''}
|
|
103
|
+
onChange={(event) =>
|
|
104
|
+
setFormState((prevState) => ({ ...prevState, prop: event.target.value.replace(/[^\w_]/g, '') }))
|
|
105
|
+
}
|
|
104
106
|
/>
|
|
105
107
|
</Input.Root>
|
|
106
108
|
<Input.Root>
|
|
107
109
|
<Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
|
|
108
|
-
<Select.Root
|
|
110
|
+
<Select.Root
|
|
111
|
+
value={formState.type}
|
|
112
|
+
onValueChange={(value) => setFormState((prevState) => ({ ...prevState, type: value }))}
|
|
113
|
+
>
|
|
109
114
|
<Select.TriggerButton placeholder='Type' classNames='is-full' />
|
|
110
115
|
<Select.Portal>
|
|
111
116
|
<Select.Content>
|
|
@@ -121,35 +126,59 @@ export const ColumnSettingsForm = ({
|
|
|
121
126
|
</Select.Root>
|
|
122
127
|
</Input.Root>
|
|
123
128
|
</Section>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<Input.
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</>
|
|
129
|
+
{formState.type === 'number' && (
|
|
130
|
+
<Section>
|
|
131
|
+
<Input.Root>
|
|
132
|
+
<Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
|
|
133
|
+
<Input.TextInput
|
|
134
|
+
value={formState.digits ?? ''}
|
|
135
|
+
onChange={(event) => setFormState((prevState) => ({ ...prevState, digits: event.target.value }))}
|
|
136
|
+
/>
|
|
137
|
+
</Input.Root>
|
|
138
|
+
</Section>
|
|
135
139
|
)}
|
|
136
140
|
|
|
137
|
-
{
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
+
{formState.type === 'ref' && (
|
|
142
|
+
<Section>
|
|
143
|
+
<Input.Root>
|
|
144
|
+
<Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
|
|
145
|
+
<Select.Root
|
|
146
|
+
value={formState.refTable}
|
|
147
|
+
onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refTable: value }))}
|
|
148
|
+
>
|
|
149
|
+
<Select.TriggerButton placeholder='Table' classNames='is-full' />
|
|
150
|
+
<Select.Portal>
|
|
151
|
+
<Select.Content>
|
|
152
|
+
<Select.Viewport>
|
|
153
|
+
{tableDefs
|
|
154
|
+
.filter((t) => t.id !== tableDef.id)
|
|
155
|
+
.map(({ id, name }) => (
|
|
156
|
+
<Select.Option key={id} value={id}>
|
|
157
|
+
{name ?? id}
|
|
158
|
+
</Select.Option>
|
|
159
|
+
))}
|
|
160
|
+
</Select.Viewport>
|
|
161
|
+
</Select.Content>
|
|
162
|
+
</Select.Portal>
|
|
163
|
+
</Select.Root>
|
|
164
|
+
</Input.Root>
|
|
165
|
+
|
|
166
|
+
{formState.refTable && (
|
|
141
167
|
<Input.Root>
|
|
142
|
-
<Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
|
|
143
|
-
<Select.Root
|
|
144
|
-
|
|
168
|
+
<Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
|
|
169
|
+
<Select.Root
|
|
170
|
+
value={formState.refProp}
|
|
171
|
+
onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refProp: value }))}
|
|
172
|
+
>
|
|
173
|
+
<Select.TriggerButton placeholder='Property' classNames='is-full' />
|
|
145
174
|
<Select.Portal>
|
|
146
175
|
<Select.Content>
|
|
147
176
|
<Select.Viewport>
|
|
148
177
|
{tableDefs
|
|
149
|
-
.
|
|
150
|
-
.map(({ id,
|
|
178
|
+
.find((tableDef) => tableDef.id === formState.refTable)
|
|
179
|
+
?.columns.map(({ id, label }) => (
|
|
151
180
|
<Select.Option key={id} value={id}>
|
|
152
|
-
{
|
|
181
|
+
{label ?? id}
|
|
153
182
|
</Select.Option>
|
|
154
183
|
))}
|
|
155
184
|
</Select.Viewport>
|
|
@@ -157,36 +186,13 @@ export const ColumnSettingsForm = ({
|
|
|
157
186
|
</Select.Portal>
|
|
158
187
|
</Select.Root>
|
|
159
188
|
</Input.Root>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<Input.Root>
|
|
163
|
-
<Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
|
|
164
|
-
<Select.Root value={refProp} onValueChange={setRefProp}>
|
|
165
|
-
<Select.TriggerButton placeholder='Property' classNames='is-full' />
|
|
166
|
-
<Select.Portal>
|
|
167
|
-
<Select.Content>
|
|
168
|
-
<Select.Viewport>
|
|
169
|
-
{tableDefs
|
|
170
|
-
.find((tableDef) => tableDef.id === refTable)
|
|
171
|
-
?.columns.map(({ id, label }) => (
|
|
172
|
-
<Select.Option key={id} value={id}>
|
|
173
|
-
{label ?? id}
|
|
174
|
-
</Select.Option>
|
|
175
|
-
))}
|
|
176
|
-
</Select.Viewport>
|
|
177
|
-
</Select.Content>
|
|
178
|
-
</Select.Portal>
|
|
179
|
-
</Select.Root>
|
|
180
|
-
</Input.Root>
|
|
181
|
-
)}
|
|
182
|
-
</Section>
|
|
183
|
-
</>
|
|
189
|
+
)}
|
|
190
|
+
</Section>
|
|
184
191
|
)}
|
|
185
192
|
|
|
186
193
|
<Separator classNames='mli-2' />
|
|
187
194
|
|
|
188
195
|
<Section className='space-b-1.5'>
|
|
189
|
-
{/* TODO(burdon): Style as DropdownMenuItem. */}
|
|
190
196
|
<Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
|
|
191
197
|
<span>{t('save label')}</span>
|
|
192
198
|
<div className='grow' />
|
|
@@ -7,10 +7,10 @@ import '@dxosTheme';
|
|
|
7
7
|
import { Plugs, PlugsConnected } from '@phosphor-icons/react';
|
|
8
8
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
9
9
|
|
|
10
|
-
import
|
|
10
|
+
import { create } from '@dxos/echo-schema/schema';
|
|
11
11
|
import { PublicKey } from '@dxos/keys';
|
|
12
12
|
import { faker } from '@dxos/random';
|
|
13
|
-
import { AnchoredOverflow, DensityProvider } from '@dxos/react-ui';
|
|
13
|
+
import { AnchoredOverflow, Button, DensityProvider } from '@dxos/react-ui';
|
|
14
14
|
import { withTheme } from '@dxos/storybook-utils';
|
|
15
15
|
import { range } from '@dxos/util';
|
|
16
16
|
|
|
@@ -35,7 +35,7 @@ faker.seed(911);
|
|
|
35
35
|
const createItems = (count: number) =>
|
|
36
36
|
range(count).map(
|
|
37
37
|
() =>
|
|
38
|
-
|
|
38
|
+
create<Item>({
|
|
39
39
|
publicKey: PublicKey.random(),
|
|
40
40
|
name: faker.commerce.productName(),
|
|
41
41
|
count: faker.datatype.boolean({ probability: 0.9 }) ? faker.number.int({ min: 0, max: 10_000 }) : undefined,
|
|
@@ -282,6 +282,61 @@ export const PinnedLastRow = {
|
|
|
282
282
|
},
|
|
283
283
|
};
|
|
284
284
|
|
|
285
|
+
export const InsertDelete = {
|
|
286
|
+
render: () => {
|
|
287
|
+
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
288
|
+
const [items, setItems] = useState<Item[]>(createItems(10));
|
|
289
|
+
|
|
290
|
+
const onUpdate: ValueUpdater<Item, any> = useCallback(
|
|
291
|
+
(item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
|
|
292
|
+
[setItems],
|
|
293
|
+
);
|
|
294
|
+
|
|
295
|
+
const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
|
|
296
|
+
|
|
297
|
+
const onInsertFirst = () => {
|
|
298
|
+
setItems((items) => [...createItems(1), ...items]);
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
const onInsertLast = () => {
|
|
302
|
+
setItems((items) => [...items, ...createItems(1)]);
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
const onDeleteFirst = () => {
|
|
306
|
+
setItems(([_first, ...rest]) => rest);
|
|
307
|
+
};
|
|
308
|
+
|
|
309
|
+
const onDeleteLast = () => {
|
|
310
|
+
setItems((items) => [...items.slice(0, items.length - 1)]);
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
return (
|
|
314
|
+
<div>
|
|
315
|
+
<div className='flex flex-row gap-2'>
|
|
316
|
+
<Button onClick={onInsertFirst}>Insert first</Button>
|
|
317
|
+
<Button onClick={onInsertLast}>Insert last</Button>
|
|
318
|
+
<Button onClick={onDeleteFirst}>Delete first</Button>
|
|
319
|
+
<Button onClick={onDeleteLast}>Delete last</Button>
|
|
320
|
+
</div>
|
|
321
|
+
<div ref={containerRef} className='fixed inset-0 top-[72px] overflow-auto'>
|
|
322
|
+
<Table<Item>
|
|
323
|
+
role='grid'
|
|
324
|
+
rowsSelectable='multi'
|
|
325
|
+
keyAccessor={(row) => row.publicKey.toHex()}
|
|
326
|
+
columns={columns}
|
|
327
|
+
data={items}
|
|
328
|
+
fullWidth
|
|
329
|
+
stickyHeader
|
|
330
|
+
border
|
|
331
|
+
getScrollElement={() => containerRef.current}
|
|
332
|
+
pinLastRow
|
|
333
|
+
/>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
);
|
|
337
|
+
},
|
|
338
|
+
};
|
|
339
|
+
|
|
285
340
|
export const Resizable = {
|
|
286
341
|
render: () => {
|
|
287
342
|
const containerRef = useRef<HTMLDivElement | null>(null);
|