@vuu-ui/vuu-table 0.13.111-alpha.1 → 0.13.111

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 (104) hide show
  1. package/cjs/Row.css.js +6 -0
  2. package/cjs/Row.css.js.map +1 -0
  3. package/cjs/Row.js +31 -2
  4. package/cjs/Row.js.map +1 -1
  5. package/cjs/Table.css.js +1 -1
  6. package/cjs/Table.js +9 -25
  7. package/cjs/Table.js.map +1 -1
  8. package/cjs/bulk-edit/BulkEditPanel.css.js +1 -1
  9. package/cjs/bulk-edit/BulkEditPanel.js +1 -2
  10. package/cjs/bulk-edit/BulkEditPanel.js.map +1 -1
  11. package/cjs/bulk-edit/useBulkEditPanel.js +12 -15
  12. package/cjs/bulk-edit/useBulkEditPanel.js.map +1 -1
  13. package/cjs/cell-block/cellblock-utils.js +3 -3
  14. package/cjs/cell-block/cellblock-utils.js.map +1 -1
  15. package/cjs/cell-block/useCellBlockSelection.js +0 -3
  16. package/cjs/cell-block/useCellBlockSelection.js.map +1 -1
  17. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +2 -2
  18. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
  19. package/cjs/cell-renderers/input-cell/InputCell.css.js +1 -1
  20. package/cjs/cell-renderers/input-cell/InputCell.js +2 -3
  21. package/cjs/cell-renderers/input-cell/InputCell.js.map +1 -1
  22. package/cjs/cell-renderers/toggle-cell/ToggleCell.js +1 -1
  23. package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
  24. package/cjs/column-resizing/ColumnResizer.css.js +1 -1
  25. package/cjs/header-cell/GroupHeaderCell.css.js +1 -1
  26. package/cjs/header-cell/HeaderCell.css.js +1 -1
  27. package/cjs/table-cell/TableCell.css.js +1 -1
  28. package/cjs/table-cell/TableCell.js +19 -19
  29. package/cjs/table-cell/TableCell.js.map +1 -1
  30. package/cjs/table-dom-utils.js +24 -4
  31. package/cjs/table-dom-utils.js.map +1 -1
  32. package/cjs/table-header/TableHeader.js +91 -89
  33. package/cjs/table-header/TableHeader.js.map +1 -1
  34. package/cjs/useCell.js +2 -1
  35. package/cjs/useCell.js.map +1 -1
  36. package/cjs/useCellEditing.js +3 -28
  37. package/cjs/useCellEditing.js.map +1 -1
  38. package/cjs/useCellFocus.js +4 -8
  39. package/cjs/useCellFocus.js.map +1 -1
  40. package/cjs/useKeyboardNavigation.js +25 -11
  41. package/cjs/useKeyboardNavigation.js.map +1 -1
  42. package/cjs/useTable.js +55 -85
  43. package/cjs/useTable.js.map +1 -1
  44. package/cjs/useTableContextMenu.js +3 -2
  45. package/cjs/useTableContextMenu.js.map +1 -1
  46. package/cjs/useTableModel.js +25 -48
  47. package/cjs/useTableModel.js.map +1 -1
  48. package/esm/Row.css.js +4 -0
  49. package/esm/Row.css.js.map +1 -0
  50. package/esm/Row.js +33 -5
  51. package/esm/Row.js.map +1 -1
  52. package/esm/Table.css.js +1 -1
  53. package/esm/Table.js +7 -23
  54. package/esm/Table.js.map +1 -1
  55. package/esm/bulk-edit/BulkEditPanel.css.js +1 -1
  56. package/esm/bulk-edit/BulkEditPanel.js +1 -2
  57. package/esm/bulk-edit/BulkEditPanel.js.map +1 -1
  58. package/esm/bulk-edit/useBulkEditPanel.js +12 -15
  59. package/esm/bulk-edit/useBulkEditPanel.js.map +1 -1
  60. package/esm/cell-block/cellblock-utils.js +2 -2
  61. package/esm/cell-block/cellblock-utils.js.map +1 -1
  62. package/esm/cell-block/useCellBlockSelection.js +0 -3
  63. package/esm/cell-block/useCellBlockSelection.js.map +1 -1
  64. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +3 -3
  65. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
  66. package/esm/cell-renderers/input-cell/InputCell.css.js +1 -1
  67. package/esm/cell-renderers/input-cell/InputCell.js +2 -3
  68. package/esm/cell-renderers/input-cell/InputCell.js.map +1 -1
  69. package/esm/cell-renderers/toggle-cell/ToggleCell.js +2 -2
  70. package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
  71. package/esm/column-resizing/ColumnResizer.css.js +1 -1
  72. package/esm/header-cell/GroupHeaderCell.css.js +1 -1
  73. package/esm/header-cell/HeaderCell.css.js +1 -1
  74. package/esm/table-cell/TableCell.css.js +1 -1
  75. package/esm/table-cell/TableCell.js +19 -19
  76. package/esm/table-cell/TableCell.js.map +1 -1
  77. package/esm/table-dom-utils.js +21 -3
  78. package/esm/table-dom-utils.js.map +1 -1
  79. package/esm/table-header/TableHeader.js +91 -89
  80. package/esm/table-header/TableHeader.js.map +1 -1
  81. package/esm/useCell.js +2 -1
  82. package/esm/useCell.js.map +1 -1
  83. package/esm/useCellEditing.js +5 -30
  84. package/esm/useCellEditing.js.map +1 -1
  85. package/esm/useCellFocus.js +4 -8
  86. package/esm/useCellFocus.js.map +1 -1
  87. package/esm/useKeyboardNavigation.js +25 -11
  88. package/esm/useKeyboardNavigation.js.map +1 -1
  89. package/esm/useTable.js +56 -86
  90. package/esm/useTable.js.map +1 -1
  91. package/esm/useTableContextMenu.js +2 -1
  92. package/esm/useTableContextMenu.js.map +1 -1
  93. package/esm/useTableModel.js +25 -48
  94. package/esm/useTableModel.js.map +1 -1
  95. package/package.json +11 -11
  96. package/types/Row.d.ts +3 -0
  97. package/types/Table.d.ts +6 -9
  98. package/types/bulk-edit/BulkEditPanel.d.ts +2 -3
  99. package/types/table-dom-utils.d.ts +3 -1
  100. package/types/table-header/TableHeader.d.ts +2 -2
  101. package/types/useCellEditing.d.ts +1 -3
  102. package/types/useKeyboardNavigation.d.ts +2 -2
  103. package/types/useTable.d.ts +4 -6
  104. package/types/useTableModel.d.ts +7 -4
@@ -17,11 +17,11 @@ const getDataType = (column, tableSchema) => {
17
17
  return column.serverDataType;
18
18
  }
19
19
  };
20
- const CheckboxColumnDescriptor = (width = 25) => ({
20
+ const checkboxColumnDescriptor = {
21
21
  allowColumnHeaderMenu: false,
22
22
  label: "",
23
23
  name: "",
24
- width,
24
+ width: 25,
25
25
  resizeable: false,
26
26
  sortable: false,
27
27
  isSystemColumn: true,
@@ -31,11 +31,11 @@ const CheckboxColumnDescriptor = (width = 25) => ({
31
31
  name: "checkbox-row-selector-cell"
32
32
  }
33
33
  }
34
- });
35
- const PinnedCheckboxColumnDescriptor = (width) => ({
36
- ...CheckboxColumnDescriptor(width),
34
+ };
35
+ const pinnedCheckboxColumnDescriptor = {
36
+ ...checkboxColumnDescriptor,
37
37
  pin: "left"
38
- });
38
+ };
39
39
  const numericTypes = ["int", "long", "double"];
40
40
  const getDefaultAlignment = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
41
41
  const tableModelReducer = (state, action) => {
@@ -64,6 +64,8 @@ const tableModelReducer = (state, action) => {
64
64
  return hideColumns(state, action);
65
65
  case "showColumns":
66
66
  return showColumns(state, action);
67
+ case "pinColumn":
68
+ return pinColumn(state, action);
67
69
  case "updateColumnProp":
68
70
  return updateColumnProp(state, action);
69
71
  case "tableConfig":
@@ -99,7 +101,7 @@ const useTableModel = ({
99
101
  };
100
102
  };
101
103
  function init({ availableWidth, dataSource, selectionModel, tableConfig }, previousConfig) {
102
- const { checkboxColumnWidth = 25, columns, ...tableAttributes } = tableConfig;
104
+ const { columns, ...tableAttributes } = tableConfig;
103
105
  const { config: dataSourceConfig, tableSchema } = dataSource;
104
106
  const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(
105
107
  tableAttributes,
@@ -122,17 +124,17 @@ function init({ availableWidth, dataSource, selectionModel, tableConfig }, previ
122
124
  0,
123
125
  0,
124
126
  toRuntimeColumnDescriptor(
125
- somePinnedLeft ? PinnedCheckboxColumnDescriptor(checkboxColumnWidth) : CheckboxColumnDescriptor(checkboxColumnWidth),
127
+ somePinnedLeft ? pinnedCheckboxColumnDescriptor : checkboxColumnDescriptor,
126
128
  -1
127
129
  )
128
130
  );
129
131
  }
130
- const { columnLayout = "static", selectionBookendWidth = 4 } = tableConfig;
132
+ const { columnLayout = "static" } = tableConfig;
131
133
  const runtimeColumnsWithLayout = vuuUtils.applyWidthToColumns(runtimeColumns, {
132
134
  availableWidth,
133
135
  columnLayout
134
136
  });
135
- const columnsInRenderOrder = runtimeColumnsWithLayout.some(vuuUtils.isPinned) ? vuuUtils.sortPinnedColumns(runtimeColumnsWithLayout, selectionBookendWidth) : runtimeColumnsWithLayout;
137
+ const columnsInRenderOrder = runtimeColumnsWithLayout.some(vuuUtils.isPinned) ? vuuUtils.sortPinnedColumns(runtimeColumnsWithLayout) : runtimeColumnsWithLayout;
136
138
  let state = {
137
139
  availableWidth,
138
140
  columns: columnsInRenderOrder,
@@ -250,16 +252,13 @@ function resizeColumn(state, { column, phase, width }) {
250
252
  case "end": {
251
253
  const { tableConfig } = state;
252
254
  const isFit = tableConfig.columnLayout === "fit";
253
- let newState = isFit ? {
255
+ const newState = isFit ? {
254
256
  ...state,
255
257
  tableConfig: vuuUtils.applyRuntimeColumnWidthsToConfig(
256
258
  tableConfig,
257
259
  state.columns
258
260
  )
259
261
  } : state;
260
- if (column.pin && !column.pinnedWidth && width) {
261
- newState = adjustPinOffsets(newState, column, width);
262
- }
263
262
  return updateColumnProp(newState, { type, column, resizing, width });
264
263
  }
265
264
  case "resize":
@@ -287,42 +286,20 @@ function setTableSchema(state, { tableSchema }) {
287
286
  return state;
288
287
  }
289
288
  }
290
- function adjustPinOffsets(state, column, width) {
291
- const newColumns = state.columns.slice();
292
- if (column.pin === "left") {
293
- const diff = width - column.width;
294
- const colIndex = newColumns.findIndex((col) => col.name === column.name);
295
- for (let i = colIndex + 1; i < newColumns.length; i++) {
296
- const pinnedColumn = newColumns.at(i);
297
- if (pinnedColumn?.pin === "left" && typeof pinnedColumn?.pinnedOffset === "number") {
298
- newColumns[i] = {
299
- ...newColumns[i],
300
- pinnedOffset: pinnedColumn.pinnedOffset + diff
301
- };
302
- if (pinnedColumn.pinnedWidth) {
303
- newColumns[i] = {
304
- ...newColumns[i],
305
- pinnedWidth: pinnedColumn.pinnedWidth + diff
306
- };
307
- break;
308
- }
309
- } else {
310
- throw Error(
311
- `[useTableModel] adjustPinOffsets, invalid column pin, no endPin following pinned column`
312
- );
313
- }
314
- }
315
- } else if (column.pin === "right") {
316
- throw "whoaaargh";
289
+ function pinColumn(state, action) {
290
+ let { columns } = state;
291
+ const { column, pin } = action;
292
+ const targetColumn = columns.find((col) => col.name === column.name);
293
+ if (targetColumn) {
294
+ columns = vuuUtils.replaceColumn(columns, { ...targetColumn, pin });
295
+ columns = vuuUtils.sortPinnedColumns(columns);
296
+ return {
297
+ ...state,
298
+ columns
299
+ };
317
300
  } else {
318
- throw Error(
319
- `[useTableModel] adjustPinOffsets, invalid param, column is not pinned `
320
- );
301
+ return state;
321
302
  }
322
- return {
323
- ...state,
324
- columns: newColumns
325
- };
326
303
  }
327
304
  function updateColumnProp(state, action) {
328
305
  let { columns, tableConfig } = state;
@@ -1 +1 @@
1
- {"version":3,"file":"useTableModel.js","sources":["../../../packages/vuu-table/src/useTableModel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport {\n DataSource,\n TableSchema,\n WithBaseFilter,\n WithFullConfig,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n ColumnLayout,\n ResizePhase,\n RuntimeColumnDescriptor,\n TableAttributes,\n TableConfig,\n TableHeadings,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n applyFilterToColumns,\n applyGroupByToColumns,\n applyRuntimeColumnWidthsToConfig,\n applySortToColumns,\n applyWidthToColumns,\n assertAllColumnsAreIncludedInSubscription,\n checkConfirmationPending,\n existingSort,\n flattenColumnGroup,\n getCellRenderer,\n getColumnHeaderContentRenderer,\n getColumnHeaderLabelRenderer,\n getColumnLabel,\n getTableHeadings,\n getValueFormatter,\n hasValidationRules,\n isFilteredColumn,\n isGroupColumn,\n isPinned,\n logger,\n removeSort,\n replaceColumn,\n sortPinnedColumns,\n stripFilterFromColumns,\n} from \"@vuu-ui/vuu-utils\";\nimport { Reducer, useReducer } from \"react\";\n\nconst { info } = logger(\"useTableModel\");\n\nconst DEFAULT_COLUMN_WIDTH = 100;\n\nconst columnWithoutDataType = ({ serverDataType }: ColumnDescriptor) =>\n serverDataType === undefined;\n\nconst getDataType = (\n column: ColumnDescriptor,\n tableSchema?: TableSchema,\n): VuuColumnDataType | undefined => {\n const schemaColumn = tableSchema?.columns.find(\n ({ name }) => name === column.name,\n );\n if (schemaColumn) {\n return schemaColumn.serverDataType;\n } else {\n return column.serverDataType;\n }\n};\n\nconst CheckboxColumnDescriptor = (width = 25): ColumnDescriptor => ({\n allowColumnHeaderMenu: false,\n label: \"\",\n name: \"\",\n width,\n resizeable: false,\n sortable: false,\n isSystemColumn: true,\n type: {\n name: \"checkbox\",\n renderer: {\n name: \"checkbox-row-selector-cell\",\n },\n },\n});\n\nconst PinnedCheckboxColumnDescriptor = (width?: number): ColumnDescriptor => ({\n ...CheckboxColumnDescriptor(width),\n pin: \"left\",\n});\n\n/**\n * TableModel represents state used internally to manage Table. It is\n * derived initially from the TableConfig provided by user, along with the\n * data-related config from DataSource.\n */\nexport interface TableModel extends TableAttributes {\n columns: RuntimeColumnDescriptor[];\n headings: TableHeadings;\n}\n\n/**\n * InternalTableModel describes the state managed within the TableModel\n * reducer. It is the same as TableModel but with the addition of a\n * readonly copy of the original TableConfig.\n */\ninterface InternalTableModel extends TableModel {\n availableWidth: number;\n tableConfig: Readonly<TableConfig>;\n}\n\nconst numericTypes = [\"int\", \"long\", \"double\"];\nconst getDefaultAlignment = (serverDataType?: VuuColumnDataType) =>\n serverDataType === undefined\n ? undefined\n : numericTypes.includes(serverDataType)\n ? \"right\"\n : \"left\";\n\nexport interface ColumnActionInit {\n availableWidth: number;\n selectionModel?: TableSelectionModel;\n type: \"init\";\n tableConfig: TableConfig;\n dataSource: DataSource;\n}\n\nexport interface ColumnActionHide {\n type: \"hideColumns\";\n columns: ColumnDescriptor[];\n}\nexport interface ColumnActionRemove {\n type: \"removeColumn\";\n column: ColumnDescriptor;\n}\n\nexport interface ColumnActionShow {\n type: \"showColumns\";\n columns: RuntimeColumnDescriptor[];\n}\nexport interface ColumnActionMove {\n type: \"moveColumn\";\n column: RuntimeColumnDescriptor;\n moveBy?: 1 | -1;\n}\n\nexport interface ColumnActionResize {\n type: \"resizeColumn\";\n column: RuntimeColumnDescriptor;\n phase: ResizePhase;\n width?: number;\n}\n\nexport interface ColumnActionSetTableSchema {\n type: \"setTableSchema\";\n tableSchema: TableSchema;\n}\n\nexport interface ColumnActionUpdate {\n type: \"updateColumn\";\n column: ColumnDescriptor;\n}\n\nexport interface ColumnActionUpdateProp {\n align?: ColumnDescriptor[\"align\"];\n column: ColumnDescriptor;\n hidden?: ColumnDescriptor[\"hidden\"];\n label?: ColumnDescriptor[\"label\"];\n resizing?: RuntimeColumnDescriptor[\"resizing\"];\n type: \"updateColumnProp\";\n width?: ColumnDescriptor[\"width\"];\n}\n\nexport interface ColumnActionTableConfig\n extends WithBaseFilter<WithFullConfig> {\n confirmed?: boolean;\n type: \"tableConfig\";\n}\n\nexport type TableModelAction =\n | ColumnActionHide\n | ColumnActionInit\n | ColumnActionMove\n | ColumnActionResize\n | ColumnActionSetTableSchema\n | ColumnActionShow\n | ColumnActionUpdate\n | ColumnActionUpdateProp\n | ColumnActionTableConfig;\n\ntype TableModelReducer = Reducer<InternalTableModel, TableModelAction>;\n\nexport type TableModelActionDispatch = (action: TableModelAction) => void;\n\nconst tableModelReducer: TableModelReducer = (state, action) => {\n info?.(`TableModelReducer ${action.type}`);\n switch (action.type) {\n case \"init\": {\n if (\n state.tableConfig.columnLayout === \"manual\" &&\n action.tableConfig.columnLayout === \"fit\"\n ) {\n //TODO we're jumping through hoops here when we should just make config a controlled prop\n\n // Manual columnLayout has been assigned because user has resized one or more columns.\n // It happened during current session so tableConfig still reflects original value.\n return init({\n ...action,\n tableConfig: applyRuntimeColumnWidthsToConfig(\n action.tableConfig,\n state.columns,\n ),\n });\n } else {\n return init(action, state);\n }\n }\n case \"moveColumn\":\n return moveColumn(state, action);\n case \"resizeColumn\":\n return resizeColumn(state, action);\n case \"setTableSchema\":\n return setTableSchema(state, action);\n case \"hideColumns\":\n return hideColumns(state, action);\n case \"showColumns\":\n return showColumns(state, action);\n case \"updateColumnProp\":\n return updateColumnProp(state, action);\n case \"tableConfig\":\n return updateTableConfig(state, action);\n default:\n console.log(`unhandled action ${action.type}`);\n return state;\n }\n};\n\nexport interface TableModelHookProps {\n config: TableConfig;\n dataSource: DataSource;\n selectionModel: TableSelectionModel;\n availableWidth: number;\n}\n\nexport const useTableModel = ({\n config: tableConfigProp,\n dataSource,\n selectionModel,\n availableWidth,\n}: TableModelHookProps) => {\n const [state, dispatchTableModelAction] = useReducer(\n tableModelReducer,\n {\n availableWidth,\n tableConfig: tableConfigProp,\n dataSource,\n selectionModel,\n },\n init,\n );\n\n const { columns, headings, tableConfig, ...tableAttributes } = state;\n\n return {\n columns,\n dispatchTableModelAction,\n headings,\n tableAttributes,\n tableConfig,\n };\n};\n\ntype InitialConfig = {\n availableWidth: number;\n columnLayout?: ColumnLayout;\n dataSource: DataSource;\n selectionModel?: TableSelectionModel;\n tableConfig: TableConfig;\n};\n\nfunction init(\n { availableWidth, dataSource, selectionModel, tableConfig }: InitialConfig,\n previousConfig?: InternalTableModel,\n): InternalTableModel {\n const { checkboxColumnWidth = 25, columns, ...tableAttributes } = tableConfig;\n const { config: dataSourceConfig, tableSchema } = dataSource;\n const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(\n tableAttributes,\n tableSchema,\n );\n\n const runtimeColumns: RuntimeColumnDescriptor[] = [];\n let colIndex = 1;\n assertAllColumnsAreIncludedInSubscription(columns, dataSourceConfig.columns);\n for (const column of columns) {\n runtimeColumns.push(\n toRuntimeColumnDescriptor(column, column.hidden ? -1 : colIndex),\n );\n if (!column.hidden) {\n colIndex += 1;\n }\n }\n\n if (selectionModel === \"checkbox\") {\n const somePinnedLeft = runtimeColumns.some((col) => col.pin === \"left\");\n runtimeColumns.splice(\n 0,\n 0,\n toRuntimeColumnDescriptor(\n somePinnedLeft\n ? PinnedCheckboxColumnDescriptor(checkboxColumnWidth)\n : CheckboxColumnDescriptor(checkboxColumnWidth),\n -1,\n ),\n );\n }\n\n const { columnLayout = \"static\", selectionBookendWidth = 4 } = tableConfig;\n const runtimeColumnsWithLayout = applyWidthToColumns(runtimeColumns, {\n availableWidth,\n columnLayout,\n });\n\n const columnsInRenderOrder = runtimeColumnsWithLayout.some(isPinned)\n ? sortPinnedColumns(runtimeColumnsWithLayout, selectionBookendWidth)\n : runtimeColumnsWithLayout;\n\n let state: InternalTableModel = {\n availableWidth,\n columns: columnsInRenderOrder,\n headings: getTableHeadings(columnsInRenderOrder),\n tableConfig,\n ...tableAttributes,\n };\n if (dataSourceConfig) {\n const { columns: _, ...rest } = dataSourceConfig;\n state = updateTableConfig(state, {\n type: \"tableConfig\",\n ...rest,\n confirmed: checkConfirmationPending(previousConfig),\n });\n }\n return state;\n}\n\nconst getLabel = (\n label: string,\n columnFormatHeader?: \"uppercase\" | \"capitalize\",\n): string => {\n if (columnFormatHeader === \"uppercase\") {\n return label.toUpperCase();\n } else if (columnFormatHeader === \"capitalize\") {\n return label[0].toUpperCase() + label.slice(1).toLowerCase();\n }\n return label;\n};\n\nconst columnDescriptorToRuntimeColumDescriptor =\n (tableAttributes: TableAttributes, tableSchema?: TableSchema) =>\n (column: ColumnDescriptor, ariaColIndex: number): RuntimeColumnDescriptor => {\n const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } =\n tableAttributes;\n const serverDataType = getDataType(column, tableSchema);\n const {\n align = getDefaultAlignment(serverDataType),\n name,\n label = getColumnLabel(column),\n source = \"server\",\n width = columnDefaultWidth,\n ...rest\n } = column;\n\n const runtimeColumnWithDefaults: RuntimeColumnDescriptor = {\n ...rest,\n align,\n ariaColIndex,\n CellRenderer: getCellRenderer(column),\n HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),\n HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),\n clientSideEditValidationCheck: hasValidationRules(column.type)\n ? buildValidationChecker(column.type.rules)\n : undefined,\n label: getLabel(label, columnFormatHeader),\n name,\n originalIdx: ariaColIndex,\n serverDataType,\n source,\n valueFormatter: getValueFormatter(column, serverDataType),\n width,\n };\n\n if (isGroupColumn(runtimeColumnWithDefaults)) {\n runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(\n (col) =>\n columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, -1),\n );\n }\n\n return runtimeColumnWithDefaults;\n };\n\nfunction moveColumn(\n state: InternalTableModel,\n // TODO do we ever use this ?\n { column, moveBy }: ColumnActionMove,\n) {\n const { columns } = state;\n if (typeof moveBy === \"number\") {\n const idx = columns.indexOf(column);\n const newColumns = columns.slice();\n const [movedColumns] = newColumns.splice(idx, 1);\n newColumns.splice(idx + moveBy, 0, movedColumns);\n return {\n ...state,\n columns: newColumns,\n };\n }\n return state;\n}\n\nfunction hideColumns(state: InternalTableModel, { columns }: ColumnActionHide) {\n console.log(`[useTableModel] hideColumns ${JSON.stringify(columns)}`);\n if (columns.some((col) => col.hidden !== true)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden !== true) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: true,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\nfunction showColumns(state: InternalTableModel, { columns }: ColumnActionShow) {\n if (columns.some((col) => col.hidden)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: false,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\n\nfunction resizeColumn(\n state: InternalTableModel,\n { column, phase, width }: ColumnActionResize,\n) {\n const type = \"updateColumnProp\";\n const resizing = phase !== \"end\";\n switch (phase) {\n case \"begin\":\n return updateColumnProp(state, { type, column, resizing });\n case \"end\": {\n const { tableConfig } = state;\n const isFit = tableConfig.columnLayout === \"fit\";\n let newState: InternalTableModel = isFit\n ? {\n ...state,\n tableConfig: applyRuntimeColumnWidthsToConfig(\n tableConfig,\n state.columns,\n ),\n }\n : state;\n\n if (column.pin && !column.pinnedWidth && width) {\n // No pinned width means this is not the last column that is pinned left.\n // All left pinned columns following this one must have pinOffset adjusted\n newState = adjustPinOffsets(newState, column, width);\n }\n return updateColumnProp(newState, { type, column, resizing, width });\n }\n case \"resize\":\n return updateColumnProp(state, { type, column, width });\n default:\n throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);\n }\n}\n\nfunction setTableSchema(\n state: InternalTableModel,\n { tableSchema }: ColumnActionSetTableSchema,\n) {\n const { columns } = state;\n if (columns.some(columnWithoutDataType)) {\n const cols = columns.map((column) => {\n const serverDataType = getDataType(column, tableSchema);\n return {\n ...column,\n align: column.align ?? getDefaultAlignment(serverDataType),\n serverDataType,\n };\n });\n\n return {\n ...state,\n columns: cols,\n };\n } else {\n return state;\n }\n}\n\nfunction adjustPinOffsets(\n state: InternalTableModel,\n column: RuntimeColumnDescriptor,\n width: number,\n) {\n const newColumns = state.columns.slice();\n if (column.pin === \"left\") {\n const diff = width - column.width;\n const colIndex = newColumns.findIndex((col) => col.name === column.name);\n for (let i = colIndex + 1; i < newColumns.length; i++) {\n const pinnedColumn = newColumns.at(i);\n if (\n pinnedColumn?.pin === \"left\" &&\n typeof pinnedColumn?.pinnedOffset === \"number\"\n ) {\n newColumns[i] = {\n ...newColumns[i],\n pinnedOffset: pinnedColumn.pinnedOffset + diff,\n };\n if (pinnedColumn.pinnedWidth) {\n // this is the endPin, we're done\n newColumns[i] = {\n ...newColumns[i],\n pinnedWidth: pinnedColumn.pinnedWidth + diff,\n };\n\n break;\n }\n } else {\n throw Error(\n `[useTableModel] adjustPinOffsets, invalid column pin, no endPin following pinned column`,\n );\n }\n }\n } else if (column.pin === \"right\") {\n throw \"whoaaargh\";\n } else {\n throw Error(\n `[useTableModel] adjustPinOffsets, invalid param, column is not pinned `,\n );\n }\n\n return {\n ...state,\n columns: newColumns,\n };\n}\n\nfunction updateColumnProp(\n state: InternalTableModel,\n action: ColumnActionUpdateProp,\n) {\n let { columns, tableConfig } = state;\n const { align, column, hidden, label, resizing, width } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n if (align === \"left\" || align === \"right\") {\n columns = replaceColumn(columns, { ...targetColumn, align });\n }\n if (typeof label === \"string\") {\n columns = replaceColumn(columns, { ...targetColumn, label });\n }\n if (typeof resizing === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, resizing });\n }\n if (typeof hidden === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, hidden });\n }\n if (typeof width === \"number\") {\n columns = replaceColumn(columns, { ...targetColumn, width });\n\n const targetConfigColumn = tableConfig.columns.find(\n (col) => col.name === column.name,\n );\n if (targetConfigColumn) {\n tableConfig = {\n ...tableConfig,\n columns: replaceColumn<ColumnDescriptor>(tableConfig.columns, {\n ...targetConfigColumn,\n width,\n }),\n };\n }\n }\n }\n return {\n ...state,\n columns,\n tableConfig,\n } as InternalTableModel;\n}\n\n// TODO rename to make clear its dataSOurce config\nfunction updateTableConfig(\n state: InternalTableModel,\n {\n confirmed,\n filterSpec,\n groupBy,\n sort,\n }: Omit<ColumnActionTableConfig, \"columns\">,\n) {\n let result = state;\n\n const { availableWidth, columnLayout = \"static\" } = state;\n\n if (groupBy.length > 0) {\n const groupedColumns = applyGroupByToColumns({\n columns: result.columns,\n groupBy,\n confirmed,\n availableWidth,\n });\n const columns = applyWidthToColumns(groupedColumns, {\n availableWidth,\n columnLayout,\n });\n\n result = {\n ...state,\n columns,\n };\n } else if (\n result.columns.length > 0 &&\n isGroupColumn(result.columns[0]) &&\n confirmed\n ) {\n result = {\n ...state,\n columns: flattenColumnGroup(result.columns),\n };\n }\n\n if (sort.sortDefs.length > 0) {\n result = {\n ...state,\n columns: applySortToColumns(result.columns, sort),\n };\n } else if (existingSort(result.columns)) {\n result = {\n ...state,\n columns: removeSort(result.columns),\n };\n }\n\n if (filterSpec.filter.length > 0) {\n result = {\n ...state,\n columns: applyFilterToColumns(result.columns, filterSpec),\n };\n } else if (result.columns.some(isFilteredColumn)) {\n result = {\n ...state,\n columns: stripFilterFromColumns(result.columns),\n };\n }\n\n return result;\n}\n"],"names":["logger","applyRuntimeColumnWidthsToConfig","useReducer","assertAllColumnsAreIncludedInSubscription","applyWidthToColumns","isPinned","sortPinnedColumns","getTableHeadings","checkConfirmationPending","getColumnLabel","getCellRenderer","getColumnHeaderContentRenderer","getColumnHeaderLabelRenderer","hasValidationRules","buildValidationChecker","getValueFormatter","isGroupColumn","replaceColumn","applyGroupByToColumns","flattenColumnGroup","applySortToColumns","existingSort","removeSort","applyFilterToColumns","isFilteredColumn","stripFilterFromColumns"],"mappings":"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"}
1
+ {"version":3,"file":"useTableModel.js","sources":["../../../packages/vuu-table/src/useTableModel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport {\n DataSource,\n TableSchema,\n WithBaseFilter,\n WithFullConfig,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n ColumnLayout,\n PinLocation,\n ResizePhase,\n RuntimeColumnDescriptor,\n TableAttributes,\n TableConfig,\n TableHeadings,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n applyFilterToColumns,\n applyGroupByToColumns,\n applyRuntimeColumnWidthsToConfig,\n applySortToColumns,\n applyWidthToColumns,\n assertAllColumnsAreIncludedInSubscription,\n checkConfirmationPending,\n existingSort,\n flattenColumnGroup,\n getCellRenderer,\n getColumnHeaderContentRenderer,\n getColumnHeaderLabelRenderer,\n getColumnLabel,\n getTableHeadings,\n getValueFormatter,\n hasValidationRules,\n isFilteredColumn,\n isGroupColumn,\n isPinned,\n logger,\n removeSort,\n replaceColumn,\n sortPinnedColumns,\n stripFilterFromColumns,\n} from \"@vuu-ui/vuu-utils\";\nimport { Reducer, useReducer } from \"react\";\n\nconst { info } = logger(\"useTableModel\");\n\nconst DEFAULT_COLUMN_WIDTH = 100;\n\nconst columnWithoutDataType = ({ serverDataType }: ColumnDescriptor) =>\n serverDataType === undefined;\n\nconst getDataType = (\n column: ColumnDescriptor,\n tableSchema?: TableSchema,\n): VuuColumnDataType | undefined => {\n const schemaColumn = tableSchema?.columns.find(\n ({ name }) => name === column.name,\n );\n if (schemaColumn) {\n return schemaColumn.serverDataType;\n } else {\n return column.serverDataType;\n }\n};\n\nconst checkboxColumnDescriptor: ColumnDescriptor = {\n allowColumnHeaderMenu: false,\n label: \"\",\n name: \"\",\n width: 25,\n resizeable: false,\n sortable: false,\n isSystemColumn: true,\n type: {\n name: \"checkbox\",\n renderer: {\n name: \"checkbox-row-selector-cell\",\n },\n },\n};\n\nconst pinnedCheckboxColumnDescriptor: ColumnDescriptor = {\n ...checkboxColumnDescriptor,\n pin: \"left\",\n};\n\n/**\n * TableModel represents state used internally to manage Table. It is\n * derived initially from the TableConfig provided by user, along with the\n * data-related config from DataSource.\n */\nexport interface TableModel extends TableAttributes {\n columns: RuntimeColumnDescriptor[];\n headings: TableHeadings;\n}\n\n/**\n * InternalTableModel describes the state managed within the TableModel\n * reducer. It is the same as TableModel but with the addition of a\n * readonly copy of the original TableConfig.\n */\ninterface InternalTableModel extends TableModel {\n availableWidth: number;\n tableConfig: Readonly<TableConfig>;\n}\n\nconst numericTypes = [\"int\", \"long\", \"double\"];\nconst getDefaultAlignment = (serverDataType?: VuuColumnDataType) =>\n serverDataType === undefined\n ? undefined\n : numericTypes.includes(serverDataType)\n ? \"right\"\n : \"left\";\n\nexport interface ColumnActionInit {\n availableWidth: number;\n selectionModel?: TableSelectionModel;\n type: \"init\";\n tableConfig: TableConfig;\n dataSource: DataSource;\n}\n\nexport interface ColumnActionHide {\n type: \"hideColumns\";\n columns: ColumnDescriptor[];\n}\nexport interface ColumnActionRemove {\n type: \"removeColumn\";\n column: ColumnDescriptor;\n}\n\nexport interface ColumnActionShow {\n type: \"showColumns\";\n columns: RuntimeColumnDescriptor[];\n}\nexport interface ColumnActionMove {\n type: \"moveColumn\";\n column: RuntimeColumnDescriptor;\n moveBy?: 1 | -1;\n}\n\nexport interface ColumnActionPin {\n type: \"pinColumn\";\n column: ColumnDescriptor;\n pin: PinLocation | false;\n}\n\nexport interface ColumnActionResize {\n type: \"resizeColumn\";\n column: RuntimeColumnDescriptor;\n phase: ResizePhase;\n width?: number;\n}\n\nexport interface ColumnActionSetTableSchema {\n type: \"setTableSchema\";\n tableSchema: TableSchema;\n}\n\nexport interface ColumnActionUpdate {\n type: \"updateColumn\";\n column: ColumnDescriptor;\n}\n\nexport interface ColumnActionUpdateProp {\n align?: ColumnDescriptor[\"align\"];\n column: ColumnDescriptor;\n hidden?: ColumnDescriptor[\"hidden\"];\n label?: ColumnDescriptor[\"label\"];\n resizing?: RuntimeColumnDescriptor[\"resizing\"];\n type: \"updateColumnProp\";\n width?: ColumnDescriptor[\"width\"];\n}\n\nexport interface ColumnActionTableConfig\n extends WithBaseFilter<WithFullConfig> {\n confirmed?: boolean;\n type: \"tableConfig\";\n}\n\nexport type TableModelAction =\n | ColumnActionHide\n | ColumnActionInit\n | ColumnActionMove\n | ColumnActionPin\n | ColumnActionResize\n | ColumnActionSetTableSchema\n | ColumnActionShow\n | ColumnActionUpdate\n | ColumnActionUpdateProp\n | ColumnActionTableConfig;\n\ntype TableModelReducer = Reducer<InternalTableModel, TableModelAction>;\n\nexport type TableModelActionDispatch = (action: TableModelAction) => void;\n\nconst tableModelReducer: TableModelReducer = (state, action) => {\n info?.(`TableModelReducer ${action.type}`);\n switch (action.type) {\n case \"init\": {\n if (\n state.tableConfig.columnLayout === \"manual\" &&\n action.tableConfig.columnLayout === \"fit\"\n ) {\n //TODO we're jumping through hoops here when we should just make config a controlled prop\n\n // Manual columnLayout has been assigned because user has resized one or more columns.\n // It happened during current session so tableConfig still reflects original value.\n return init({\n ...action,\n tableConfig: applyRuntimeColumnWidthsToConfig(\n action.tableConfig,\n state.columns,\n ),\n });\n } else {\n return init(action, state);\n }\n }\n case \"moveColumn\":\n return moveColumn(state, action);\n case \"resizeColumn\":\n return resizeColumn(state, action);\n case \"setTableSchema\":\n return setTableSchema(state, action);\n case \"hideColumns\":\n return hideColumns(state, action);\n case \"showColumns\":\n return showColumns(state, action);\n case \"pinColumn\":\n return pinColumn(state, action);\n case \"updateColumnProp\":\n return updateColumnProp(state, action);\n case \"tableConfig\":\n return updateTableConfig(state, action);\n default:\n console.log(`unhandled action ${action.type}`);\n return state;\n }\n};\n\nexport interface TableModelHookProps {\n config: TableConfig;\n dataSource: DataSource;\n selectionModel: TableSelectionModel;\n availableWidth: number;\n}\n\nexport const useTableModel = ({\n config: tableConfigProp,\n dataSource,\n selectionModel,\n availableWidth,\n}: TableModelHookProps) => {\n const [state, dispatchTableModelAction] = useReducer(\n tableModelReducer,\n {\n availableWidth,\n tableConfig: tableConfigProp,\n dataSource,\n selectionModel,\n },\n init,\n );\n\n const { columns, headings, tableConfig, ...tableAttributes } = state;\n\n return {\n columns,\n dispatchTableModelAction,\n headings,\n tableAttributes,\n tableConfig,\n };\n};\n\ntype InitialConfig = {\n availableWidth: number;\n columnLayout?: ColumnLayout;\n dataSource: DataSource;\n selectionModel?: TableSelectionModel;\n tableConfig: TableConfig;\n};\n\nfunction init(\n { availableWidth, dataSource, selectionModel, tableConfig }: InitialConfig,\n previousConfig?: InternalTableModel,\n): InternalTableModel {\n const { columns, ...tableAttributes } = tableConfig;\n const { config: dataSourceConfig, tableSchema } = dataSource;\n const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(\n tableAttributes,\n tableSchema,\n );\n\n const runtimeColumns: RuntimeColumnDescriptor[] = [];\n let colIndex = 1;\n assertAllColumnsAreIncludedInSubscription(columns, dataSourceConfig.columns);\n for (const column of columns) {\n runtimeColumns.push(\n toRuntimeColumnDescriptor(column, column.hidden ? -1 : colIndex),\n );\n if (!column.hidden) {\n colIndex += 1;\n }\n }\n\n if (selectionModel === \"checkbox\") {\n const somePinnedLeft = runtimeColumns.some((col) => col.pin === \"left\");\n runtimeColumns.splice(\n 0,\n 0,\n toRuntimeColumnDescriptor(\n somePinnedLeft\n ? pinnedCheckboxColumnDescriptor\n : checkboxColumnDescriptor,\n -1,\n ),\n );\n }\n\n const { columnLayout = \"static\" } = tableConfig;\n const runtimeColumnsWithLayout = applyWidthToColumns(runtimeColumns, {\n availableWidth,\n columnLayout,\n });\n\n const columnsInRenderOrder = runtimeColumnsWithLayout.some(isPinned)\n ? sortPinnedColumns(runtimeColumnsWithLayout)\n : runtimeColumnsWithLayout;\n\n let state: InternalTableModel = {\n availableWidth,\n columns: columnsInRenderOrder,\n headings: getTableHeadings(columnsInRenderOrder),\n tableConfig,\n ...tableAttributes,\n };\n if (dataSourceConfig) {\n const { columns: _, ...rest } = dataSourceConfig;\n state = updateTableConfig(state, {\n type: \"tableConfig\",\n ...rest,\n confirmed: checkConfirmationPending(previousConfig),\n });\n }\n return state;\n}\n\nconst getLabel = (\n label: string,\n columnFormatHeader?: \"uppercase\" | \"capitalize\",\n): string => {\n if (columnFormatHeader === \"uppercase\") {\n return label.toUpperCase();\n } else if (columnFormatHeader === \"capitalize\") {\n return label[0].toUpperCase() + label.slice(1).toLowerCase();\n }\n return label;\n};\n\nconst columnDescriptorToRuntimeColumDescriptor =\n (tableAttributes: TableAttributes, tableSchema?: TableSchema) =>\n (column: ColumnDescriptor, ariaColIndex: number): RuntimeColumnDescriptor => {\n const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } =\n tableAttributes;\n const serverDataType = getDataType(column, tableSchema);\n const {\n align = getDefaultAlignment(serverDataType),\n name,\n label = getColumnLabel(column),\n source = \"server\",\n width = columnDefaultWidth,\n ...rest\n } = column;\n\n const runtimeColumnWithDefaults: RuntimeColumnDescriptor = {\n ...rest,\n align,\n ariaColIndex,\n CellRenderer: getCellRenderer(column),\n HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),\n HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),\n clientSideEditValidationCheck: hasValidationRules(column.type)\n ? buildValidationChecker(column.type.rules)\n : undefined,\n label: getLabel(label, columnFormatHeader),\n name,\n originalIdx: ariaColIndex,\n serverDataType,\n source,\n valueFormatter: getValueFormatter(column, serverDataType),\n width,\n };\n\n if (isGroupColumn(runtimeColumnWithDefaults)) {\n runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(\n (col) =>\n columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, -1),\n );\n }\n\n return runtimeColumnWithDefaults;\n };\n\nfunction moveColumn(\n state: InternalTableModel,\n // TODO do we ever use this ?\n { column, moveBy }: ColumnActionMove,\n) {\n const { columns } = state;\n if (typeof moveBy === \"number\") {\n const idx = columns.indexOf(column);\n const newColumns = columns.slice();\n const [movedColumns] = newColumns.splice(idx, 1);\n newColumns.splice(idx + moveBy, 0, movedColumns);\n return {\n ...state,\n columns: newColumns,\n };\n }\n return state;\n}\n\nfunction hideColumns(state: InternalTableModel, { columns }: ColumnActionHide) {\n console.log(`[useTableModel] hideColumns ${JSON.stringify(columns)}`);\n if (columns.some((col) => col.hidden !== true)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden !== true) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: true,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\nfunction showColumns(state: InternalTableModel, { columns }: ColumnActionShow) {\n if (columns.some((col) => col.hidden)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: false,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\n\nfunction resizeColumn(\n state: InternalTableModel,\n { column, phase, width }: ColumnActionResize,\n) {\n const type = \"updateColumnProp\";\n const resizing = phase !== \"end\";\n switch (phase) {\n case \"begin\":\n return updateColumnProp(state, { type, column, resizing });\n case \"end\": {\n const { tableConfig } = state;\n const isFit = tableConfig.columnLayout === \"fit\";\n const newState: InternalTableModel = isFit\n ? {\n ...state,\n tableConfig: applyRuntimeColumnWidthsToConfig(\n tableConfig,\n state.columns,\n ),\n }\n : state;\n return updateColumnProp(newState, { type, column, resizing, width });\n }\n case \"resize\":\n return updateColumnProp(state, { type, column, width });\n default:\n throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);\n }\n}\n\nfunction setTableSchema(\n state: InternalTableModel,\n { tableSchema }: ColumnActionSetTableSchema,\n) {\n const { columns } = state;\n if (columns.some(columnWithoutDataType)) {\n const cols = columns.map((column) => {\n const serverDataType = getDataType(column, tableSchema);\n return {\n ...column,\n align: column.align ?? getDefaultAlignment(serverDataType),\n serverDataType,\n };\n });\n\n return {\n ...state,\n columns: cols,\n };\n } else {\n return state;\n }\n}\n\nfunction pinColumn(state: InternalTableModel, action: ColumnActionPin) {\n let { columns } = state;\n const { column, pin } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n columns = replaceColumn(columns, { ...targetColumn, pin });\n columns = sortPinnedColumns(columns);\n return {\n ...state,\n columns,\n };\n } else {\n return state;\n }\n}\nfunction updateColumnProp(\n state: InternalTableModel,\n action: ColumnActionUpdateProp,\n) {\n let { columns, tableConfig } = state;\n const { align, column, hidden, label, resizing, width } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n if (align === \"left\" || align === \"right\") {\n columns = replaceColumn(columns, { ...targetColumn, align });\n }\n if (typeof label === \"string\") {\n columns = replaceColumn(columns, { ...targetColumn, label });\n }\n if (typeof resizing === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, resizing });\n }\n if (typeof hidden === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, hidden });\n }\n if (typeof width === \"number\") {\n columns = replaceColumn(columns, { ...targetColumn, width });\n\n const targetConfigColumn = tableConfig.columns.find(\n (col) => col.name === column.name,\n );\n if (targetConfigColumn) {\n tableConfig = {\n ...tableConfig,\n columns: replaceColumn<ColumnDescriptor>(tableConfig.columns, {\n ...targetConfigColumn,\n width,\n }),\n };\n }\n }\n }\n return {\n ...state,\n columns,\n tableConfig,\n } as InternalTableModel;\n}\n\n// TODO rename to make clear its dataSOurce config\nfunction updateTableConfig(\n state: InternalTableModel,\n {\n confirmed,\n filterSpec,\n groupBy,\n sort,\n }: Omit<ColumnActionTableConfig, \"columns\">,\n) {\n let result = state;\n\n const { availableWidth, columnLayout = \"static\" } = state;\n\n if (groupBy.length > 0) {\n const groupedColumns = applyGroupByToColumns({\n columns: result.columns,\n groupBy,\n confirmed,\n availableWidth,\n });\n const columns = applyWidthToColumns(groupedColumns, {\n availableWidth,\n columnLayout,\n });\n\n result = {\n ...state,\n columns,\n };\n } else if (\n result.columns.length > 0 &&\n isGroupColumn(result.columns[0]) &&\n confirmed\n ) {\n result = {\n ...state,\n columns: flattenColumnGroup(result.columns),\n };\n }\n\n if (sort.sortDefs.length > 0) {\n result = {\n ...state,\n columns: applySortToColumns(result.columns, sort),\n };\n } else if (existingSort(result.columns)) {\n result = {\n ...state,\n columns: removeSort(result.columns),\n };\n }\n\n if (filterSpec.filter.length > 0) {\n result = {\n ...state,\n columns: applyFilterToColumns(result.columns, filterSpec),\n };\n } else if (result.columns.some(isFilteredColumn)) {\n result = {\n ...state,\n columns: stripFilterFromColumns(result.columns),\n };\n }\n\n return result;\n}\n"],"names":["logger","applyRuntimeColumnWidthsToConfig","useReducer","assertAllColumnsAreIncludedInSubscription","applyWidthToColumns","isPinned","sortPinnedColumns","getTableHeadings","checkConfirmationPending","getColumnLabel","getCellRenderer","getColumnHeaderContentRenderer","getColumnHeaderLabelRenderer","hasValidationRules","buildValidationChecker","getValueFormatter","isGroupColumn","replaceColumn","applyGroupByToColumns","flattenColumnGroup","applySortToColumns","existingSort","removeSort","applyFilterToColumns","isFilteredColumn","stripFilterFromColumns"],"mappings":"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"}
package/esm/Row.css.js ADDED
@@ -0,0 +1,4 @@
1
+ var rowCss = ".vuuTableRow {\n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n /* contain-intrinsic-height: var(--row-height);\n content-visibility: auto; */\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n.vuuTableRow-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableRow-even {\n --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n background-color: var(--VuuTableRow-selected-background, var(--salt-selectable-background-selected));\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n";
2
+
3
+ export { rowCss as default };
4
+ //# sourceMappingURL=Row.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Row.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/esm/Row.js CHANGED
@@ -1,13 +1,35 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { isGroupColumn, isJsonGroup, queryClosest, isNotHidden, isJsonColumn, metadataKeys } from '@vuu-ui/vuu-utils';
3
+ import { useComponentCssInjection } from '@salt-ds/styles';
4
+ import { useWindow } from '@salt-ds/window';
3
5
  import cx from 'clsx';
4
- import { memo, useCallback } from 'react';
6
+ import { forwardRef, memo, useCallback } from 'react';
5
7
  import { TableCell } from './table-cell/TableCell.js';
6
8
  import { TableGroupCell } from './table-cell/TableGroupCell.js';
9
+ import rowCss from './Row.css.js';
7
10
  import { VirtualColSpan } from './VirtualColSpan.js';
8
11
 
9
12
  const { COUNT, DEPTH, IDX, IS_EXPANDED, IS_LEAF, SELECTED } = metadataKeys;
10
13
  const classBase = "vuuTableRow";
14
+ const RowProxy = forwardRef(
15
+ function RowProxy2({ height }, forwardedRef) {
16
+ const targetWindow = useWindow();
17
+ useComponentCssInjection({
18
+ testId: "vuu-table-row",
19
+ css: rowCss,
20
+ window: targetWindow
21
+ });
22
+ return /* @__PURE__ */ jsx(
23
+ "div",
24
+ {
25
+ "aria-hidden": true,
26
+ className: cx(classBase, `${classBase}-proxy`),
27
+ ref: forwardedRef,
28
+ style: { height }
29
+ }
30
+ );
31
+ }
32
+ );
11
33
  const Row = memo(
12
34
  ({
13
35
  className: classNameProp,
@@ -28,6 +50,12 @@ const Row = memo(
28
50
  zebraStripes = false,
29
51
  ...htmlAttributes
30
52
  }) => {
53
+ const targetWindow = useWindow();
54
+ useComponentCssInjection({
55
+ testId: "vuu-table-row",
56
+ css: rowCss,
57
+ window: targetWindow
58
+ });
31
59
  const {
32
60
  [COUNT]: childRowCount,
33
61
  [DEPTH]: depth,
@@ -86,7 +114,7 @@ const Row = memo(
86
114
  onClick: handleRowClick,
87
115
  style,
88
116
  children: [
89
- showBookends ? /* @__PURE__ */ jsx("div", { className: "vuuSelectionDecorator vuuStickyLeft", children: /* @__PURE__ */ jsx("div", { className: "vuuTableRowBookend" }) }) : null,
117
+ showBookends ? /* @__PURE__ */ jsx("span", { className: `${classBase}-selectionDecorator vuuStickyLeft` }) : null,
90
118
  /* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
91
119
  columns.filter(isNotHidden).map((column) => {
92
120
  const isGroup = isGroupColumn(column);
@@ -105,7 +133,7 @@ const Row = memo(
105
133
  column.name
106
134
  );
107
135
  }),
108
- showBookends ? /* @__PURE__ */ jsx("div", { className: "vuuSelectionDecorator vuuStickyRight", children: /* @__PURE__ */ jsx("div", { className: "vuuTableRowBookend" }) }) : null
136
+ showBookends ? /* @__PURE__ */ jsx("span", { className: `${classBase}-selectionDecorator vuuStickyRight` }) : null
109
137
  ]
110
138
  }
111
139
  );
@@ -113,5 +141,5 @@ const Row = memo(
113
141
  );
114
142
  Row.displayName = "Row";
115
143
 
116
- export { Row };
144
+ export { Row, RowProxy };
117
145
  //# sourceMappingURL=Row.js.map
package/esm/Row.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Row.js","sources":["../../../packages/vuu-table/src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n isGroupColumn,\n isJsonColumn,\n isJsonGroup,\n isNotHidden,\n metadataKeys,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { MouseEvent, memo, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { COUNT, DEPTH, IDX, IS_EXPANDED, IS_LEAF, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// export const Row = memo(\nexport const Row = memo(\n ({\n className: classNameProp,\n classNameGenerator,\n columnMap,\n columns,\n groupToggleTarget = \"group-column\",\n highlighted,\n row,\n offset,\n onCellEdit,\n onClick,\n onDataEdited,\n onToggleGroup,\n searchPattern,\n showBookends = true,\n virtualColSpan = 0,\n zebraStripes = false,\n ...htmlAttributes\n }: RowProps) => {\n const {\n [COUNT]: childRowCount,\n [DEPTH]: depth,\n [IDX]: rowIndex,\n [IS_EXPANDED]: isExpanded,\n [IS_LEAF]: isLeaf,\n [SELECTED]: isSelected,\n } = row;\n\n const handleRowClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n const rangeSelect = evt.shiftKey;\n const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n onClick?.(evt, row, rangeSelect, keepExistingSelection);\n },\n [onClick, row],\n );\n\n const className = cx(\n classBase,\n classNameProp,\n classNameGenerator?.(row, columnMap),\n {\n [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n [`${classBase}-highlighted`]: highlighted,\n },\n );\n\n const canExpand = isLeaf === false && childRowCount > 0;\n const ariaExpanded = isExpanded ? true : canExpand ? false : undefined;\n const ariaLevel = isLeaf && depth === 1 ? undefined : depth;\n\n // const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n const style = { top: offset };\n\n const handleGroupCellClick = useCallback(\n (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n const toggleIconClicked =\n queryClosest(evt.target, \".vuuToggleIconButton\") !== null;\n if (groupToggleTarget === \"toggle-icon\") {\n if (!toggleIconClicked) {\n return;\n }\n }\n if (toggleIconClicked) {\n // prevent evt bubbling, will suppress selection hook.\n // Clicking the toggle icon directly never triggers row selection\n evt.stopPropagation();\n }\n onToggleGroup?.(row, column);\n }\n },\n [columnMap, groupToggleTarget, onToggleGroup, row],\n );\n\n return (\n <div\n {...htmlAttributes}\n aria-expanded={ariaExpanded}\n aria-selected={isSelected ? \"true\" : undefined}\n aria-level={ariaLevel}\n role=\"row\"\n className={className}\n onClick={handleRowClick}\n style={style}\n >\n {showBookends ? (\n <div className=\"vuuSelectionDecorator vuuStickyLeft\">\n <div className=\"vuuTableRowBookend\" />\n </div>\n ) : null}\n <VirtualColSpan width={virtualColSpan} />\n {columns.filter(isNotHidden).map((column) => {\n const isGroup = isGroupColumn(column);\n const isJsonCell = isJsonColumn(column);\n const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;\n\n return (\n <Cell\n column={column}\n columnMap={columnMap}\n key={column.name}\n onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n onDataEdited={onDataEdited}\n row={row}\n searchPattern={searchPattern}\n />\n );\n })}\n {showBookends ? (\n <div className=\"vuuSelectionDecorator vuuStickyRight\">\n <div className=\"vuuTableRowBookend\" />\n </div>\n ) : null}\n </div>\n );\n },\n);\nRow.displayName = \"Row\";\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Row.js","sources":["../../../packages/vuu-table/src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n isGroupColumn,\n isJsonColumn,\n isJsonGroup,\n isNotHidden,\n metadataKeys,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, forwardRef, memo, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { COUNT, DEPTH, IDX, IS_EXPANDED, IS_LEAF, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n function RowProxy({ height }, forwardedRef) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-row\",\n css: rowCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden\n className={cx(classBase, `${classBase}-proxy`)}\n ref={forwardedRef}\n style={{ height }}\n />\n );\n },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n ({\n className: classNameProp,\n classNameGenerator,\n columnMap,\n columns,\n groupToggleTarget = \"group-column\",\n highlighted,\n row,\n offset,\n onCellEdit,\n onClick,\n onDataEdited,\n onToggleGroup,\n searchPattern,\n showBookends = true,\n virtualColSpan = 0,\n zebraStripes = false,\n ...htmlAttributes\n }: RowProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-row\",\n css: rowCss,\n window: targetWindow,\n });\n\n const {\n [COUNT]: childRowCount,\n [DEPTH]: depth,\n [IDX]: rowIndex,\n [IS_EXPANDED]: isExpanded,\n [IS_LEAF]: isLeaf,\n [SELECTED]: isSelected,\n } = row;\n\n const handleRowClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n const rangeSelect = evt.shiftKey;\n const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n onClick?.(evt, row, rangeSelect, keepExistingSelection);\n },\n [onClick, row],\n );\n\n const className = cx(\n classBase,\n classNameProp,\n classNameGenerator?.(row, columnMap),\n {\n [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n [`${classBase}-highlighted`]: highlighted,\n },\n );\n\n const canExpand = isLeaf === false && childRowCount > 0;\n const ariaExpanded = isExpanded ? true : canExpand ? false : undefined;\n const ariaLevel = isLeaf && depth === 1 ? undefined : depth;\n\n // const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n const style = { top: offset };\n\n const handleGroupCellClick = useCallback(\n (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n const toggleIconClicked =\n queryClosest(evt.target, \".vuuToggleIconButton\") !== null;\n if (groupToggleTarget === \"toggle-icon\") {\n if (!toggleIconClicked) {\n return;\n }\n }\n if (toggleIconClicked) {\n // prevent evt bubbling, will suppress selection hook.\n // Clicking the toggle icon directly never triggers row selection\n evt.stopPropagation();\n }\n onToggleGroup?.(row, column);\n }\n },\n [columnMap, groupToggleTarget, onToggleGroup, row],\n );\n\n return (\n <div\n {...htmlAttributes}\n aria-expanded={ariaExpanded}\n aria-selected={isSelected ? \"true\" : undefined}\n aria-level={ariaLevel}\n role=\"row\"\n className={className}\n onClick={handleRowClick}\n style={style}\n >\n {showBookends ? (\n <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n ) : null}\n <VirtualColSpan width={virtualColSpan} />\n {columns.filter(isNotHidden).map((column) => {\n const isGroup = isGroupColumn(column);\n const isJsonCell = isJsonColumn(column);\n const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;\n\n return (\n <Cell\n column={column}\n columnMap={columnMap}\n key={column.name}\n onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n onDataEdited={onDataEdited}\n row={row}\n searchPattern={searchPattern}\n />\n );\n })}\n {showBookends ? (\n <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n ) : null}\n </div>\n );\n },\n);\nRow.displayName = \"Row\";\n"],"names":["RowProxy"],"mappings":"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"}
package/esm/Table.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --vuu-table-col-header-row-height: var(--salt-size-base, 32px);\n --vuu-table-col-heading-height: 25px;\n --vuu-table-footer-height: 0px;\n --vuu-table-row-height: var(--salt-size-base, 32px);\n --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px); \n\n --table-background: var(--vuuTable-background, var(--salt-container-primary-background));\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n --col-header-row-height: var(\n --col-header-row-height-prop,\n var(--vuu-table-col-header-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n left: 0;\n margin: 0;\n position: absolute;\n top: 0;\n table-layout: fixed;\n width: var(--content-width);\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuPinRight {\n .vuuColumnResizer {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.vuuTableHeaderCell.vuuPinLeft,\n.vuuTableHeaderCell.vuuPinRight {\n z-index: 2;\n}\n\n.vuuTableHeader {\n --row-height: var(--vuu-table-col-header-row-height);\n background-color: var(\n --vuuTableHeader-background,\n var(--table-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableHeader-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));\n position: sticky;\n top: 0;\n white-space: nowrap;\n\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuu-table-col-header-row-height);\n }\n\n .vuuStickyLeft {\n z-index: 1;\n }\n .vuuStickyRight {\n z-index: 0;\n }\n}\n\n.vuuTableHeader:hover {\n --columnResizer-height: var(--vuu-table-col-header-row-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-row-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTableHeader {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.vuuHighlight {\n color: blue;\n}\n\n.DragColumn {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.vuuTable-emptyDisplay {\n animation: fadeIn .8s;\n align-items: center;\n display: flex;\n inset:0;\n justify-content: center;\n position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n visibility: hidden;\n}\n\n.vuuRowProxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableColHeaderRow {\n height: var(--col-header-row-height);\n}\n\n.vuuTableRow {\n --table-row-selected-background: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));\n \n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n\n.vuuTableRow-even {\n --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n background-color: var(--table-row-selected-background);\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n\n\n.vuuSelectionDecorator {\n background: var(--table-background);\n display: inline-block;\n height: var(--row-height);\n position: relative;\n width: var(--table-selection-bookend-width,4px);\n z-index: 2;\n}\n\n.vuuTableRow:not([aria-selected=\"true\"]){\n .vuuTableRowBookend {\n display: none;\n }\n}\n\n.vuuSelectionDecorator.vuuStickyLeft {\n left: 0;\n position: sticky;\n}\n\n.vuuSelectionDecorator.vuuStickyRight {\n right: 0;\n position: sticky;\n}\n\n .vuuTableRowBookend {\n position: absolute;\n top: -1px;\n right:0;\n bottom:0;\n left:0;\n }\n\n.vuuTable-rowSelection-bordered {\n\n .vuuSelectionDecorator {\n\n .vuuTableRowBookend {\n background-color: var(--table-row-selected-background);\n border-color: var(--vuuTableRow-selectionBlock-borderColor);\n border-width: 1px;\n width: var(--table-selection-bookend-width,4px);\n\n &:before {\n content: none !important;\n }\n }\n\n &.vuuStickyLeft {\n .vuuTableRowBookend {\n border-left-style: solid;\n }\n }\n &.vuuStickyRight {\n .vuuTableRowBookend {\n border-right-style: solid;\n }\n }\n }\n\n .vuuTableRow[aria-selected=\"true\"]{\n .vuuSelectionDecorator {\n background-color: var(--table-background);\n border: none;\n }\n\n }\n\n /* non-selected row immediately followed by a selected row */\n .vuuTableRow:not([aria-selected=\"true\"]):has( + .vuuTableRow[aria-selected=\"true\"]) {\n border-bottom-color: transparent;\n }\n\n /* first row in a selection block, including a selection block of one row */\n .vuuTableRow:not([aria-selected=\"true\"]) + .vuuTableRow[aria-selected=\"true\"],\n .vuuTableRow[aria-selected=\"true\"][data-first-row=\"true\"]\n {\n border-radius: none;\n\n &:after {\n background: var(--vuuTableRow-selectionBlock-borderColor);\n content: \"\";\n position: absolute;\n top: 0px;\n left: 4px;\n height: 1px;\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-top-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n .vuuStickyRight .vuuTableRowBookend {\n border-top-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n }\n\n /* Last row in a selection block, including a selection block of one row */\n .vuuTableRow[aria-selected=\"true\"]:has( + .vuuTableRow:not([aria-selected=\"true\"])) {\n border-bottom-color: var(--vuuTableRow-selectionBlock-borderColor);\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n .vuuStickyRight .vuuTableRowBookend {\n border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n }\n\n}";
1
+ var tableCss = ".vuuTable {\n --vuu-table-footer-height: 0px;\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuu-table-col-heading-height: 25px;\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n left: 0;\n margin: 0;\n position: absolute;\n top: 0;\n table-layout: fixed;\n width: var(--content-width);\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTable-col-headings {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--table-background)\n );\n padding: 0 var(--vuuTableRow-selectionDecorator-width, 0);\n position: sticky;\n top: 0;\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n --columnResizer-height: var(--vuu-table-col-header-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--vuuTableColHeadings-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableColHeaders-borderColor,\n var(--salt-separable-secondary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n height: var(--vuu-table-col-header-height);\n white-space: nowrap;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuu-table-col-header-height);\n }\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTable-col-headings {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.vuuHighlight {\n color: blue;\n}\n\n.DragColumn {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.vuuTable-emptyDisplay {\n animation: fadeIn .8s;\n align-items: center;\n display: flex;\n inset:0;\n justify-content: center;\n position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n visibility: hidden;\n}";
2
2
 
3
3
  export { tableCss as default };
4
4
  //# sourceMappingURL=Table.css.js.map
package/esm/Table.js CHANGED
@@ -7,7 +7,7 @@ import { ContextPanelProvider, MeasuredContainer, reduceSizeHeight } from '@vuu-
7
7
  import { lowerCase, useId, metadataKeys } from '@vuu-ui/vuu-utils';
8
8
  import cx from 'clsx';
9
9
  import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
10
- import { Row } from './Row.js';
10
+ import { RowProxy, Row } from './Row.js';
11
11
  import { PaginationControl } from './pagination/PaginationControl.js';
12
12
  import './table-header/HeaderProvider.js';
13
13
  import { TableHeader } from './table-header/TableHeader.js';
@@ -17,17 +17,6 @@ import tableCss from './Table.css.js';
17
17
 
18
18
  const classBase = "vuuTable";
19
19
  const { IDX, RENDER_IDX } = metadataKeys;
20
- const RowProxy = forwardRef(function RowProxy2({ className = "vuuTableRow", height }, forwardedRef) {
21
- return /* @__PURE__ */ jsx(
22
- "div",
23
- {
24
- "aria-hidden": true,
25
- className: cx(className, `vuuRowProxy`),
26
- ref: forwardedRef,
27
- style: { height }
28
- }
29
- );
30
- });
31
20
  const TableCore = ({
32
21
  EmptyDisplay,
33
22
  Row: Row$1 = Row,
@@ -39,7 +28,6 @@ const TableCore = ({
39
28
  autoSelectFirstRow,
40
29
  autoSelectRowKey,
41
30
  availableColumns,
42
- // colHeaderRowHeight,
43
31
  config,
44
32
  containerRef,
45
33
  customHeader,
@@ -66,6 +54,7 @@ const TableCore = ({
66
54
  rowHeight,
67
55
  rowToObject,
68
56
  scrollingApiRef,
57
+ selectionBookendWidth = 0,
69
58
  selectionModel = "extended",
70
59
  showColumnHeaders = true,
71
60
  showColumnHeaderMenus = true,
@@ -133,13 +122,13 @@ const TableCore = ({
133
122
  rowHeight,
134
123
  rowToObject,
135
124
  scrollingApiRef,
125
+ selectionBookendWidth,
136
126
  selectionModel,
137
127
  showColumnHeaders,
138
128
  showColumnHeaderMenus,
139
129
  showPaginationControls,
140
130
  size
141
131
  });
142
- const { selectionBookendWidth = 4 } = config;
143
132
  const contentContainerClassName = cx(`${classBase}-contentContainer`, {
144
133
  [`${classBase}-colLines`]: tableAttributes.columnSeparators,
145
134
  [`${classBase}-rowLines`]: tableAttributes.rowSeparators,
@@ -156,8 +145,7 @@ const TableCore = ({
156
145
  "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
157
146
  "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
158
147
  "--total-header-height": `${headerHeight}px`,
159
- "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`,
160
- "--table-selection-bookend-width": `${selectionBookendWidth}px`
148
+ "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
161
149
  };
162
150
  const headersReady = showColumnHeaders === false || headerHeight > 0;
163
151
  const readyToRenderTableBody = headersReady && data.length > 0;
@@ -212,7 +200,6 @@ const TableCore = ({
212
200
  onRemoveGroupColumn,
213
201
  onResizeColumn,
214
202
  onSortColumn,
215
- showBookends: selectionBookendWidth > 0,
216
203
  showColumnHeaderMenus,
217
204
  tableConfig,
218
205
  tableId: id,
@@ -229,7 +216,6 @@ const TableCore = ({
229
216
  classNameGenerator: rowClassNameGenerator,
230
217
  columnMap,
231
218
  columns: scrollProps.columnsWithinViewport,
232
- "data-first-row": data2[IDX] === 0 ? "true" : void 0,
233
219
  groupToggleTarget,
234
220
  highlighted: highlightedIndex === ariaRowIndex,
235
221
  onClick: onRowClick,
@@ -291,7 +277,6 @@ const Table = forwardRef(function Table2({
291
277
  dataSource,
292
278
  disableFocus,
293
279
  groupToggleTarget,
294
- colHeaderRowHeight: colHeaderRowHeightProp,
295
280
  height,
296
281
  highlightedIndex,
297
282
  id,
@@ -312,10 +297,10 @@ const Table = forwardRef(function Table2({
312
297
  resizeStrategy,
313
298
  rowActionHandlers,
314
299
  rowHeight: rowHeightProp,
315
- rowSelectionBorder,
316
300
  rowToObject,
317
301
  scrollingApiRef,
318
302
  searchPattern = "",
303
+ selectionBookendWidth = 4,
319
304
  selectionModel,
320
305
  showColumnHeaders,
321
306
  showColumnHeaderMenus,
@@ -388,7 +373,6 @@ const Table = forwardRef(function Table2({
388
373
  ...htmlAttributes,
389
374
  className: cx(classBase, classNameProp, {
390
375
  [`${classBase}-pagination`]: showPaginationControls,
391
- [`${classBase}-rowSelection-bordered`]: rowSelectionBorder,
392
376
  [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,
393
377
  [`${classBase}-viewportRowLimit`]: viewportRowLimit
394
378
  }),
@@ -399,8 +383,7 @@ const Table = forwardRef(function Table2({
399
383
  resizeStrategy,
400
384
  style: {
401
385
  ...styleProp,
402
- "--col-header-row-height-prop": typeof colHeaderRowHeightProp === "number" ? `${colHeaderRowHeightProp}px` : void 0,
403
- "--row-height-prop": typeof rowHeightProp === "number" ? `${rowHeightProp}px` : void 0
386
+ "--row-height-prop": rowHeight > 0 ? `${rowHeight}px` : void 0
404
387
  },
405
388
  width,
406
389
  children: [
@@ -444,6 +427,7 @@ const Table = forwardRef(function Table2({
444
427
  rowToObject,
445
428
  scrollingApiRef,
446
429
  lowerCaseSearchPattern: lowerCase(searchPattern),
430
+ selectionBookendWidth,
447
431
  selectionModel,
448
432
  showColumnHeaders,
449
433
  showColumnHeaderMenus,