@vuu-ui/vuu-table 0.8.34 → 0.8.35

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 (180) hide show
  1. package/package.json +8 -10
  2. package/cjs/Row.css +0 -115
  3. package/cjs/Row.js +0 -115
  4. package/cjs/Row.js.map +0 -1
  5. package/cjs/Table.css +0 -151
  6. package/cjs/Table.js +0 -276
  7. package/cjs/Table.js.map +0 -1
  8. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css +0 -5
  9. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -33
  10. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
  11. package/cjs/cell-renderers/input-cell/InputCell.css +0 -31
  12. package/cjs/cell-renderers/input-cell/InputCell.js +0 -49
  13. package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
  14. package/cjs/cell-renderers/toggle-cell/ToggleCell.css +0 -32
  15. package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -59
  16. package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
  17. package/cjs/column-header-pill/ColumnHeaderPill.css +0 -30
  18. package/cjs/column-header-pill/ColumnHeaderPill.js +0 -44
  19. package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
  20. package/cjs/column-header-pill/GroupColumnPill.css +0 -7
  21. package/cjs/column-header-pill/GroupColumnPill.js +0 -20
  22. package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
  23. package/cjs/column-header-pill/SortIndicator.css +0 -7
  24. package/cjs/column-header-pill/SortIndicator.js +0 -18
  25. package/cjs/column-header-pill/SortIndicator.js.map +0 -1
  26. package/cjs/column-menu/ColumnMenu.css +0 -21
  27. package/cjs/column-menu/ColumnMenu.js +0 -21
  28. package/cjs/column-menu/ColumnMenu.js.map +0 -1
  29. package/cjs/column-resizing/ColumnResizer.css +0 -28
  30. package/cjs/column-resizing/ColumnResizer.js +0 -63
  31. package/cjs/column-resizing/ColumnResizer.js.map +0 -1
  32. package/cjs/column-resizing/useTableColumnResize.js +0 -55
  33. package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
  34. package/cjs/context-menu/buildContextMenuDescriptors.js +0 -214
  35. package/cjs/context-menu/buildContextMenuDescriptors.js.map +0 -1
  36. package/cjs/context-menu/useHandleTableContextMenu.js +0 -81
  37. package/cjs/context-menu/useHandleTableContextMenu.js.map +0 -1
  38. package/cjs/header-cell/GroupHeaderCell.css +0 -65
  39. package/cjs/header-cell/GroupHeaderCell.js +0 -108
  40. package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
  41. package/cjs/header-cell/HeaderCell.css +0 -146
  42. package/cjs/header-cell/HeaderCell.js +0 -100
  43. package/cjs/header-cell/HeaderCell.js.map +0 -1
  44. package/cjs/index.js.map +0 -1
  45. package/cjs/moving-window.js +0 -61
  46. package/cjs/moving-window.js.map +0 -1
  47. package/cjs/table-cell/TableCell.css +0 -41
  48. package/cjs/table-cell/TableCell.js +0 -63
  49. package/cjs/table-cell/TableCell.js.map +0 -1
  50. package/cjs/table-cell/TableGroupCell.css +0 -26
  51. package/cjs/table-cell/TableGroupCell.js +0 -45
  52. package/cjs/table-cell/TableGroupCell.js.map +0 -1
  53. package/cjs/table-config.js +0 -25
  54. package/cjs/table-config.js.map +0 -1
  55. package/cjs/table-dom-utils.js +0 -60
  56. package/cjs/table-dom-utils.js.map +0 -1
  57. package/cjs/table-header/TableHeader.js +0 -87
  58. package/cjs/table-header/TableHeader.js.map +0 -1
  59. package/cjs/table-header/useTableHeader.js +0 -72
  60. package/cjs/table-header/useTableHeader.js.map +0 -1
  61. package/cjs/useCell.js +0 -28
  62. package/cjs/useCell.js.map +0 -1
  63. package/cjs/useCellEditing.js +0 -79
  64. package/cjs/useCellEditing.js.map +0 -1
  65. package/cjs/useControlledTableNavigation.js +0 -43
  66. package/cjs/useControlledTableNavigation.js.map +0 -1
  67. package/cjs/useDataSource.js +0 -104
  68. package/cjs/useDataSource.js.map +0 -1
  69. package/cjs/useInitialValue.js +0 -11
  70. package/cjs/useInitialValue.js.map +0 -1
  71. package/cjs/useKeyboardNavigation.js +0 -304
  72. package/cjs/useKeyboardNavigation.js.map +0 -1
  73. package/cjs/useRowClassNameGenerators.js +0 -34
  74. package/cjs/useRowClassNameGenerators.js.map +0 -1
  75. package/cjs/useRowHeight.js +0 -43
  76. package/cjs/useRowHeight.js.map +0 -1
  77. package/cjs/useSelection.js +0 -64
  78. package/cjs/useSelection.js.map +0 -1
  79. package/cjs/useTable.js +0 -553
  80. package/cjs/useTable.js.map +0 -1
  81. package/cjs/useTableAndColumnSettings.js +0 -128
  82. package/cjs/useTableAndColumnSettings.js.map +0 -1
  83. package/cjs/useTableContextMenu.js +0 -42
  84. package/cjs/useTableContextMenu.js.map +0 -1
  85. package/cjs/useTableModel.js +0 -297
  86. package/cjs/useTableModel.js.map +0 -1
  87. package/cjs/useTableScroll.js +0 -396
  88. package/cjs/useTableScroll.js.map +0 -1
  89. package/cjs/useTableViewport.js +0 -122
  90. package/cjs/useTableViewport.js.map +0 -1
  91. package/esm/Row.css +0 -115
  92. package/esm/Row.js +0 -112
  93. package/esm/Row.js.map +0 -1
  94. package/esm/Table.css +0 -151
  95. package/esm/Table.js +0 -274
  96. package/esm/Table.js.map +0 -1
  97. package/esm/cell-renderers/checkbox-cell/CheckboxCell.css +0 -5
  98. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -31
  99. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
  100. package/esm/cell-renderers/input-cell/InputCell.css +0 -31
  101. package/esm/cell-renderers/input-cell/InputCell.js +0 -47
  102. package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
  103. package/esm/cell-renderers/toggle-cell/ToggleCell.css +0 -32
  104. package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -57
  105. package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
  106. package/esm/column-header-pill/ColumnHeaderPill.css +0 -30
  107. package/esm/column-header-pill/ColumnHeaderPill.js +0 -42
  108. package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
  109. package/esm/column-header-pill/GroupColumnPill.css +0 -7
  110. package/esm/column-header-pill/GroupColumnPill.js +0 -18
  111. package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
  112. package/esm/column-header-pill/SortIndicator.css +0 -7
  113. package/esm/column-header-pill/SortIndicator.js +0 -16
  114. package/esm/column-header-pill/SortIndicator.js.map +0 -1
  115. package/esm/column-menu/ColumnMenu.css +0 -21
  116. package/esm/column-menu/ColumnMenu.js +0 -19
  117. package/esm/column-menu/ColumnMenu.js.map +0 -1
  118. package/esm/column-resizing/ColumnResizer.css +0 -28
  119. package/esm/column-resizing/ColumnResizer.js +0 -61
  120. package/esm/column-resizing/ColumnResizer.js.map +0 -1
  121. package/esm/column-resizing/useTableColumnResize.js +0 -53
  122. package/esm/column-resizing/useTableColumnResize.js.map +0 -1
  123. package/esm/context-menu/buildContextMenuDescriptors.js +0 -212
  124. package/esm/context-menu/buildContextMenuDescriptors.js.map +0 -1
  125. package/esm/context-menu/useHandleTableContextMenu.js +0 -79
  126. package/esm/context-menu/useHandleTableContextMenu.js.map +0 -1
  127. package/esm/header-cell/GroupHeaderCell.css +0 -65
  128. package/esm/header-cell/GroupHeaderCell.js +0 -106
  129. package/esm/header-cell/GroupHeaderCell.js.map +0 -1
  130. package/esm/header-cell/HeaderCell.css +0 -146
  131. package/esm/header-cell/HeaderCell.js +0 -98
  132. package/esm/header-cell/HeaderCell.js.map +0 -1
  133. package/esm/index.js +0 -14
  134. package/esm/index.js.map +0 -1
  135. package/esm/moving-window.js +0 -59
  136. package/esm/moving-window.js.map +0 -1
  137. package/esm/table-cell/TableCell.css +0 -41
  138. package/esm/table-cell/TableCell.js +0 -61
  139. package/esm/table-cell/TableCell.js.map +0 -1
  140. package/esm/table-cell/TableGroupCell.css +0 -26
  141. package/esm/table-cell/TableGroupCell.js +0 -43
  142. package/esm/table-cell/TableGroupCell.js.map +0 -1
  143. package/esm/table-config.js +0 -23
  144. package/esm/table-config.js.map +0 -1
  145. package/esm/table-dom-utils.js +0 -51
  146. package/esm/table-dom-utils.js.map +0 -1
  147. package/esm/table-header/TableHeader.js +0 -85
  148. package/esm/table-header/TableHeader.js.map +0 -1
  149. package/esm/table-header/useTableHeader.js +0 -70
  150. package/esm/table-header/useTableHeader.js.map +0 -1
  151. package/esm/useCell.js +0 -26
  152. package/esm/useCell.js.map +0 -1
  153. package/esm/useCellEditing.js +0 -77
  154. package/esm/useCellEditing.js.map +0 -1
  155. package/esm/useControlledTableNavigation.js +0 -41
  156. package/esm/useControlledTableNavigation.js.map +0 -1
  157. package/esm/useDataSource.js +0 -101
  158. package/esm/useDataSource.js.map +0 -1
  159. package/esm/useInitialValue.js +0 -9
  160. package/esm/useInitialValue.js.map +0 -1
  161. package/esm/useKeyboardNavigation.js +0 -300
  162. package/esm/useKeyboardNavigation.js.map +0 -1
  163. package/esm/useRowClassNameGenerators.js +0 -32
  164. package/esm/useRowClassNameGenerators.js.map +0 -1
  165. package/esm/useRowHeight.js +0 -41
  166. package/esm/useRowHeight.js.map +0 -1
  167. package/esm/useSelection.js +0 -62
  168. package/esm/useSelection.js.map +0 -1
  169. package/esm/useTable.js +0 -551
  170. package/esm/useTable.js.map +0 -1
  171. package/esm/useTableAndColumnSettings.js +0 -126
  172. package/esm/useTableAndColumnSettings.js.map +0 -1
  173. package/esm/useTableContextMenu.js +0 -40
  174. package/esm/useTableContextMenu.js.map +0 -1
  175. package/esm/useTableModel.js +0 -293
  176. package/esm/useTableModel.js.map +0 -1
  177. package/esm/useTableScroll.js +0 -393
  178. package/esm/useTableScroll.js.map +0 -1
  179. package/esm/useTableViewport.js +0 -120
  180. package/esm/useTableViewport.js.map +0 -1
@@ -1,45 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var react = require('react');
6
- var useCell = require('../useCell.js');
7
- var cx = require('clsx');
8
-
9
- const { IS_LEAF } = vuuUtils.metadataKeys;
10
- const classBase = "vuuTableGroupCell";
11
- const TableGroupCell = ({
12
- column,
13
- columnMap,
14
- onClick,
15
- row
16
- }) => {
17
- const { columns } = column;
18
- const [value, offset] = vuuUtils.getGroupValueAndOffset(columns, row, columnMap);
19
- const { className, style } = useCell.useCell(column, classBase);
20
- const handleClick = react.useCallback(
21
- (evt) => {
22
- onClick?.(evt, column);
23
- },
24
- [column, onClick]
25
- );
26
- const isLeaf = row[IS_LEAF];
27
- const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-spacer` }, i));
28
- return /* @__PURE__ */ jsxRuntime.jsxs(
29
- "div",
30
- {
31
- className: cx(className, "vuuTableCell"),
32
- role: "cell",
33
- style,
34
- onClick: isLeaf ? void 0 : handleClick,
35
- children: [
36
- spacers,
37
- isLeaf ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-toggle`, "data-icon": "triangle-right" }),
38
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: value })
39
- ]
40
- }
41
- );
42
- };
43
-
44
- exports.TableGroupCell = TableGroupCell;
45
- //# sourceMappingURL=TableGroupCell.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableGroupCell.js","sources":["../../src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { getGroupValueAndOffset, metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\nimport cx from \"clsx\";\n\nimport \"./TableGroupCell.css\";\n\nconst { IS_LEAF } = metadataKeys;\n\nconst classBase = \"vuuTableGroupCell\";\n\nexport const TableGroupCell = ({\n column,\n columnMap,\n onClick,\n row,\n}: TableCellProps) => {\n const { columns } = column as GroupColumnDescriptor;\n const [value, offset] = getGroupValueAndOffset(columns, row, columnMap);\n const { className, style } = useCell(column, classBase);\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onClick?.(evt, column);\n },\n [column, onClick]\n );\n\n const isLeaf = row[IS_LEAF];\n const spacers = Array(offset)\n .fill(0)\n .map((n, i) => <span className={`${classBase}-spacer`} key={i} />);\n\n return (\n <div\n className={cx(className, \"vuuTableCell\")}\n role=\"cell\"\n style={style}\n onClick={isLeaf ? undefined : handleClick}\n >\n {spacers}\n {isLeaf ? null : (\n <span className={`${classBase}-toggle`} data-icon=\"triangle-right\" />\n )}\n <span>{value}</span>\n </div>\n );\n};\n"],"names":["metadataKeys","getGroupValueAndOffset","useCell","useCallback","jsxs","jsx"],"mappings":";;;;;;;;AAQA,MAAM,EAAE,SAAY,GAAAA,qBAAA,CAAA;AAEpB,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEX,MAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA,CAAA;AACpB,EAAA,MAAM,CAAC,KAAO,EAAA,MAAM,IAAIC,+BAAuB,CAAA,OAAA,EAAS,KAAK,SAAS,CAAA,CAAA;AACtE,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAAC,eAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAoC,KAAA;AACnC,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,MAAA,GAAS,IAAI,OAAO,CAAA,CAAA;AAC1B,EAAA,MAAM,UAAU,KAAM,CAAA,MAAM,EACzB,IAAK,CAAA,CAAC,EACN,GAAI,CAAA,CAAC,CAAG,EAAA,CAAA,oCAAO,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA,EAAA,EAAgB,CAAG,CAAE,CAAA,CAAA;AAEnE,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,cAAc,CAAA;AAAA,MACvC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,SAAS,KAAY,CAAA,GAAA,WAAA;AAAA,MAE7B,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,QACA,MAAA,GAAS,uBACPC,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,WAAA,EAAU,gBAAiB,EAAA,CAAA;AAAA,wBAErEA,cAAA,CAAC,UAAM,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACf,CAAA;AAEJ;;;;"}
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- const updateTableConfig = (config, action) => {
4
- switch (action.type) {
5
- case "col-size":
6
- return {
7
- ...config,
8
- columns: config.columns.map(
9
- (col) => col.name === action.column.name ? { ...col, width: action.width } : col
10
- )
11
- };
12
- case "column-prop":
13
- return {
14
- ...config,
15
- columns: config.columns.map(
16
- (col) => col.name === action.column.name ? { ...col, [action.property]: action.value } : col
17
- )
18
- };
19
- default:
20
- return config;
21
- }
22
- };
23
-
24
- exports.updateTableConfig = updateTableConfig;
25
- //# sourceMappingURL=table-config.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import { ColumnDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\n\nexport type MoveColumnTableConfigAction = {\n type: \"col-move\";\n column: ColumnDescriptor;\n fromIndex: number;\n toIndex: number;\n};\n\nexport type ResizeColumnTableConfigAction = {\n type: \"col-size\";\n column: ColumnDescriptor;\n width: number;\n};\n\nexport type SubscribeColumnTableConfigAction = {\n type: \"subscribed\";\n column: ColumnDescriptor;\n value: boolean;\n};\n\nexport type UpdateColumnPropertyTableConfigAction = {\n type: \"column-prop\";\n column: ColumnDescriptor;\n property: keyof ColumnDescriptor;\n value: boolean | number | string;\n};\n\nexport type TableConfigAction =\n | MoveColumnTableConfigAction\n | ResizeColumnTableConfigAction\n | UpdateColumnPropertyTableConfigAction;\n\nexport const updateTableConfig = (\n config: TableConfig,\n action: TableConfigAction\n): TableConfig => {\n switch (action.type) {\n case \"col-size\":\n return {\n ...config,\n columns: config.columns.map((col) =>\n col.name === action.column.name\n ? { ...col, width: action.width }\n : col\n ),\n };\n case \"column-prop\":\n return {\n ...config,\n columns: config.columns.map((col) =>\n col.name === action.column.name\n ? { ...col, [action.property]: action.value }\n : col\n ),\n };\n\n default:\n return config;\n }\n};\n"],"names":[],"mappings":";;AAiCa,MAAA,iBAAA,GAAoB,CAC/B,MAAA,EACA,MACgB,KAAA;AAChB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,UAAA;AACH,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,OAAA,EAAS,OAAO,OAAQ,CAAA,GAAA;AAAA,UAAI,CAAC,GAAA,KAC3B,GAAI,CAAA,IAAA,KAAS,MAAO,CAAA,MAAA,CAAO,IACvB,GAAA,EAAE,GAAG,GAAA,EAAK,KAAO,EAAA,MAAA,CAAO,OACxB,GAAA,GAAA;AAAA,SACN;AAAA,OACF,CAAA;AAAA,IACF,KAAK,aAAA;AACH,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,OAAA,EAAS,OAAO,OAAQ,CAAA,GAAA;AAAA,UAAI,CAAC,GAC3B,KAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,OAAO,IACvB,GAAA,EAAE,GAAG,GAAA,EAAK,CAAC,MAAO,CAAA,QAAQ,GAAG,MAAA,CAAO,OACpC,GAAA,GAAA;AAAA,SACN;AAAA,OACF,CAAA;AAAA,IAEF;AACE,MAAO,OAAA,MAAA,CAAA;AAAA,GACX;AACF;;;;"}
@@ -1,60 +0,0 @@
1
- 'use strict';
2
-
3
- const headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
4
- const dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [role='cell']:nth-child(${colIdx + 1})`;
5
- const getTableCell = (containerRef, [rowIdx, colIdx]) => {
6
- const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
7
- const cell = containerRef.current?.querySelector(
8
- cssQuery
9
- );
10
- if (cellIsEditable(cell)) {
11
- const focusableContent = cell.querySelector("button");
12
- return focusableContent || cell;
13
- } else {
14
- return cell;
15
- }
16
- };
17
- const cellIsEditable = (cell) => cell?.classList.contains("vuuTableCell-editable");
18
- const cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
19
- function getRowIndex(rowEl) {
20
- if (rowEl) {
21
- const idx = rowEl.ariaRowIndex;
22
- if (idx !== null) {
23
- return parseInt(idx, 10) - 1;
24
- }
25
- }
26
- return -1;
27
- }
28
- const closestRow = (el) => el.closest('[role="row"]');
29
- const closestRowIndex = (el) => getRowIndex(closestRow(el));
30
- const NO_SCROLL_NECESSARY = [void 0, void 0];
31
- const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
32
- if (contentContainer) {
33
- const viewport = contentContainer?.getBoundingClientRect();
34
- const upperBoundary = viewport.top + totalHeaderHeight;
35
- const row = rowEl.getBoundingClientRect();
36
- if (row) {
37
- if (row.bottom > viewport.bottom) {
38
- return ["down", row.bottom - viewport.bottom];
39
- } else if (row.top < upperBoundary) {
40
- return ["up", row.top - upperBoundary];
41
- } else {
42
- return NO_SCROLL_NECESSARY;
43
- }
44
- } else {
45
- throw Error("Whats going on, row not found");
46
- }
47
- } else {
48
- throw Error("Whats going on, scrollbar container not found");
49
- }
50
- };
51
-
52
- exports.cellIsEditable = cellIsEditable;
53
- exports.cellIsTextInput = cellIsTextInput;
54
- exports.closestRowIndex = closestRowIndex;
55
- exports.dataCellQuery = dataCellQuery;
56
- exports.getRowIndex = getRowIndex;
57
- exports.getTableCell = getTableCell;
58
- exports.headerCellQuery = headerCellQuery;
59
- exports.howFarIsRowOutsideViewport = howFarIsRowOutsideViewport;
60
- //# sourceMappingURL=table-dom-utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;\n\nexport const dataCellQuery = (rowIdx: number, colIdx: number) =>\n `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [role='cell']:nth-child(${\n colIdx + 1\n })`;\n\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement>,\n\n [rowIdx, colIdx]: CellPos\n) => {\n const cssQuery =\n rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);\n const cell = containerRef.current?.querySelector(\n cssQuery\n ) as HTMLTableCellElement;\n\n if (cellIsEditable(cell)) {\n // Dropdown gets focus, Input does not\n const focusableContent = cell.querySelector(\"button\") as HTMLElement;\n return focusableContent || cell;\n } else {\n return cell;\n }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport function getRowIndex(rowEl?: HTMLElement) {\n if (rowEl) {\n const idx: string | null = rowEl.ariaRowIndex;\n if (idx !== null) {\n return parseInt(idx, 10) - 1;\n }\n }\n return -1;\n}\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) => getRowIndex(closestRow(el));\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n rowEl: HTMLElement,\n totalHeaderHeight: number,\n contentContainer = rowEl.closest(\".vuuTable-contentContainer\")\n): readonly [ScrollDirection | undefined, number | undefined] => {\n //TODO lots of scope for optimisation here\n if (contentContainer) {\n // TODO take totalHeaderHeight into consideration\n const viewport = contentContainer?.getBoundingClientRect();\n const upperBoundary = viewport.top + totalHeaderHeight;\n const row = rowEl.getBoundingClientRect();\n if (row) {\n if (row.bottom > viewport.bottom) {\n return [\"down\", row.bottom - viewport.bottom];\n } else if (row.top < upperBoundary) {\n return [\"up\", row.top - upperBoundary];\n } else {\n return NO_SCROLL_NECESSARY;\n }\n } else {\n throw Error(\"Whats going on, row not found\");\n }\n } else {\n throw Error(\"Whats going on, scrollbar container not found\");\n }\n};\n"],"names":[],"mappings":";;AAQO,MAAM,eAAkB,GAAA,CAAC,MAC9B,KAAA,CAAA,oDAAA,EAAuD,MAAM,CAAA,CAAA,EAAA;AAElD,MAAA,aAAA,GAAgB,CAAC,MAAgB,EAAA,MAAA,KAC5C,oCAAoC,MAAS,GAAA,CAAC,CAC5C,6BAAA,EAAA,MAAA,GAAS,CACX,CAAA,CAAA,EAAA;AAEK,MAAM,eAAe,CAC1B,YAAA,EAEA,CAAC,MAAA,EAAQ,MAAM,CACZ,KAAA;AACH,EAAM,MAAA,QAAA,GACJ,WAAW,CAAK,CAAA,GAAA,eAAA,CAAgB,MAAM,CAAI,GAAA,aAAA,CAAc,QAAQ,MAAM,CAAA,CAAA;AACxE,EAAM,MAAA,IAAA,GAAO,aAAa,OAAS,EAAA,aAAA;AAAA,IACjC,QAAA;AAAA,GACF,CAAA;AAEA,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AAExB,IAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACpD,IAAA,OAAO,gBAAoB,IAAA,IAAA,CAAA;AAAA,GACtB,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEO,MAAM,iBAAiB,CAAC,IAAA,KAC7B,IAAM,EAAA,SAAA,CAAU,SAAS,uBAAuB,EAAA;AAE3C,MAAM,kBAAkB,CAAC,IAAA,KAC9B,IAAK,CAAA,aAAA,CAAc,oBAAoB,CAAM,KAAA,KAAA;AAExC,SAAS,YAAY,KAAqB,EAAA;AAC/C,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,MAAM,MAAqB,KAAM,CAAA,YAAA,CAAA;AACjC,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAO,OAAA,QAAA,CAAS,GAAK,EAAA,EAAE,CAAI,GAAA,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,CAAA;AAEA,MAAM,UAAa,GAAA,CAAC,EAClB,KAAA,EAAA,CAAG,QAAQ,cAAc,CAAA,CAAA;AAEpB,MAAM,kBAAkB,CAAC,EAAA,KAAoB,WAAY,CAAA,UAAA,CAAW,EAAE,CAAC,EAAA;AAE9E,MAAM,mBAAA,GAAsB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAEpC,MAAA,0BAAA,GAA6B,CACxC,KACA,EAAA,iBAAA,EACA,mBAAmB,KAAM,CAAA,OAAA,CAAQ,4BAA4B,CACE,KAAA;AAE/D,EAAA,IAAI,gBAAkB,EAAA;AAEpB,IAAM,MAAA,QAAA,GAAW,kBAAkB,qBAAsB,EAAA,CAAA;AACzD,IAAM,MAAA,aAAA,GAAgB,SAAS,GAAM,GAAA,iBAAA,CAAA;AACrC,IAAM,MAAA,GAAA,GAAM,MAAM,qBAAsB,EAAA,CAAA;AACxC,IAAA,IAAI,GAAK,EAAA;AACP,MAAI,IAAA,GAAA,CAAI,MAAS,GAAA,QAAA,CAAS,MAAQ,EAAA;AAChC,QAAA,OAAO,CAAC,MAAA,EAAQ,GAAI,CAAA,MAAA,GAAS,SAAS,MAAM,CAAA,CAAA;AAAA,OAC9C,MAAA,IAAW,GAAI,CAAA,GAAA,GAAM,aAAe,EAAA;AAClC,QAAA,OAAO,CAAC,IAAA,EAAM,GAAI,CAAA,GAAA,GAAM,aAAa,CAAA,CAAA;AAAA,OAChC,MAAA;AACL,QAAO,OAAA,mBAAA,CAAA;AAAA,OACT;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,+BAA+B,CAAA,CAAA;AAAA,KAC7C;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,+CAA+C,CAAA,CAAA;AAAA,GAC7D;AACF;;;;;;;;;;;"}
@@ -1,87 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var cx = require('clsx');
6
- var react = require('react');
7
- var GroupHeaderCell = require('../header-cell/GroupHeaderCell.js');
8
- var HeaderCell = require('../header-cell/HeaderCell.js');
9
- var useTableHeader = require('./useTableHeader.js');
10
-
11
- const TableHeader = react.memo(
12
- ({
13
- classBase = "vuuTable",
14
- columns,
15
- headings,
16
- onMoveColumn,
17
- onMoveGroupColumn,
18
- onRemoveGroupColumn,
19
- onResizeColumn,
20
- onSortColumn,
21
- showColumnHeaderMenus,
22
- tableConfig,
23
- tableId,
24
- virtualColSpan = 0
25
- }) => {
26
- const {
27
- draggableColumn,
28
- draggedColumnIndex,
29
- onClick,
30
- onMouseDown,
31
- setContainerRef
32
- } = useTableHeader.useTableHeader({
33
- columns,
34
- onMoveColumn,
35
- onSortColumn,
36
- tableConfig
37
- });
38
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-col-headings`, ref: setContainerRef, children: [
39
- headings.map((colHeaders, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
40
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-col-headers`, role: "row", children: [
41
- virtualColSpan > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
42
- "div",
43
- {
44
- role: "cell",
45
- className: "vuuTableCell",
46
- style: { width: virtualColSpan }
47
- }
48
- ) : null,
49
- columns.filter(vuuUtils.isNotHidden).map(
50
- (col, i) => vuuUtils.isGroupColumn(col) ? /* @__PURE__ */ jsxRuntime.jsx(
51
- GroupHeaderCell.GroupHeaderCell,
52
- {
53
- "aria-colindex": col.index,
54
- column: col,
55
- "data-index": i,
56
- onMoveColumn: onMoveGroupColumn,
57
- onRemoveColumn: onRemoveGroupColumn,
58
- onResize: onResizeColumn
59
- },
60
- col.name
61
- ) : /* @__PURE__ */ jsxRuntime.jsx(
62
- HeaderCell.HeaderCell,
63
- {
64
- "aria-colindex": col.index,
65
- className: cx({
66
- "vuuDraggable-dragAway": i === draggedColumnIndex
67
- }),
68
- column: col,
69
- "data-index": i,
70
- id: `${tableId}-col-${i}`,
71
- onClick,
72
- onMouseDown,
73
- onResize: onResizeColumn,
74
- showMenu: showColumnHeaderMenus
75
- },
76
- col.name
77
- )
78
- ),
79
- draggableColumn
80
- ] })
81
- ] });
82
- }
83
- );
84
- TableHeader.displayName = "TableHeader";
85
-
86
- exports.TableHeader = TableHeader;
87
- //# sourceMappingURL=TableHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n TableColumnResizeHandler,\n TableConfig,\n TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n column: ColumnDescriptor,\n addToExistingSort: boolean,\n sortType?: VuuSortType\n) => void;\n\nexport interface TableHeaderProps {\n classBase?: string;\n columns: RuntimeColumnDescriptor[];\n headings: TableHeadings;\n onResizeColumn: TableColumnResizeHandler;\n onMoveColumn: (columns: ColumnDescriptor[]) => void;\n onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n onSortColumn: ColumnSortHandler;\n showColumnHeaderMenus: boolean;\n tableConfig: TableConfig;\n tableId: string;\n virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n ({\n classBase = \"vuuTable\",\n columns,\n headings,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onSortColumn,\n showColumnHeaderMenus,\n tableConfig,\n tableId,\n virtualColSpan = 0,\n }: TableHeaderProps) => {\n const {\n draggableColumn,\n draggedColumnIndex,\n onClick,\n onMouseDown,\n setContainerRef,\n } = useTableHeader({\n columns,\n onMoveColumn,\n onSortColumn,\n tableConfig,\n });\n\n return (\n <div className={`${classBase}-col-headings`} ref={setContainerRef}>\n {headings.map((colHeaders, i) => (\n <div className=\"vuuTable-heading\" key={i}>\n {colHeaders.map(({ label, width }, j) => (\n <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n {label}\n </div>\n ))}\n </div>\n ))}\n <div className={`${classBase}-col-headers`} role=\"row\">\n {virtualColSpan > 0 ? (\n <div\n role=\"cell\"\n className=\"vuuTableCell\"\n style={{ width: virtualColSpan }}\n />\n ) : null}\n {columns.filter(isNotHidden).map((col, i) =>\n isGroupColumn(col) ? (\n <GroupHeaderCell\n aria-colindex={col.index}\n column={col}\n data-index={i}\n key={col.name}\n onMoveColumn={onMoveGroupColumn}\n onRemoveColumn={onRemoveGroupColumn}\n onResize={onResizeColumn}\n />\n ) : (\n <HeaderCell\n aria-colindex={col.index}\n className={cx({\n \"vuuDraggable-dragAway\": i === draggedColumnIndex,\n })}\n column={col}\n data-index={i}\n id={`${tableId}-col-${i}`}\n key={col.name}\n onClick={onClick}\n onMouseDown={onMouseDown}\n onResize={onResizeColumn}\n showMenu={showColumnHeaderMenus}\n />\n )\n )}\n {draggableColumn}\n </div>\n </div>\n );\n }\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["memo","useTableHeader","jsx","isNotHidden","isGroupColumn","GroupHeaderCell","HeaderCell"],"mappings":"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"}
@@ -1,72 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var react = require('react');
6
-
7
- const useTableHeader = ({
8
- columns,
9
- onMoveColumn,
10
- onSortColumn,
11
- tableConfig
12
- }) => {
13
- const containerRef = react.useRef(null);
14
- const scrollingContainerRef = react.useRef(null);
15
- const setContainerRef = react.useCallback((el) => {
16
- containerRef.current = el;
17
- if (el) {
18
- scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
19
- } else {
20
- scrollingContainerRef.current = null;
21
- }
22
- }, []);
23
- const handleDropColumnHeader = react.useCallback(
24
- ({ fromIndex: moveFrom, toIndex: moveTo }) => {
25
- const column = columns[moveFrom];
26
- const orderedColumns = vuuUtils.moveColumnTo(columns, column, moveTo);
27
- const ofColumn = ({ name }) => (col) => col.name === name;
28
- const targetIndex = orderedColumns.findIndex(ofColumn(column));
29
- const nextColumn = orderedColumns[targetIndex + 1];
30
- const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
31
- if (moveTo > moveFrom && insertPos !== -1) {
32
- onMoveColumn(vuuUtils.moveColumnTo(tableConfig.columns, column, insertPos - 1));
33
- } else {
34
- onMoveColumn(vuuUtils.moveColumnTo(tableConfig.columns, column, insertPos));
35
- }
36
- },
37
- [columns, onMoveColumn, tableConfig.columns]
38
- );
39
- const handleColumnHeaderClick = react.useCallback(
40
- (evt) => {
41
- const headerCell = vuuUtils.queryClosest(evt.target, ".vuuTableHeaderCell");
42
- const colIdx = parseInt(headerCell?.dataset.index ?? "-1");
43
- const column = vuuUtils.visibleColumnAtIndex(columns, colIdx);
44
- const isAdditive = evt.shiftKey;
45
- column && onSortColumn(column, isAdditive);
46
- },
47
- [columns, onSortColumn]
48
- );
49
- const {
50
- onMouseDown: columnHeaderDragMouseDown,
51
- draggable: draggableColumn,
52
- ...dragDropHook
53
- } = vuuUiControls.useDragDrop({
54
- allowDragDrop: true,
55
- containerRef,
56
- draggableClassName: `vuuTable`,
57
- itemQuery: ".vuuTableHeaderCell",
58
- onDrop: handleDropColumnHeader,
59
- orientation: "horizontal",
60
- scrollingContainerRef
61
- });
62
- return {
63
- draggableColumn,
64
- draggedColumnIndex: dragDropHook.draggedItemIndex,
65
- onClick: handleColumnHeaderClick,
66
- onMouseDown: columnHeaderDragMouseDown,
67
- setContainerRef
68
- };
69
- };
70
-
71
- exports.useTableHeader = useTableHeader;
72
- //# sourceMappingURL=useTableHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DropOptions,\n useDragDrop as useDragDrop,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n moveColumnTo,\n queryClosest,\n visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\n\nexport interface TableHeaderHookProps\n extends Pick<\n TableHeaderProps,\n \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n > {\n label?: string;\n onMoveColumn: (columns: ColumnDescriptor[]) => void;\n onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n columns,\n onMoveColumn,\n onSortColumn,\n tableConfig,\n}: TableHeaderHookProps) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n containerRef.current = el;\n if (el) {\n scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n } else {\n scrollingContainerRef.current = null;\n }\n }, []);\n\n const handleDropColumnHeader = useCallback(\n ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n const column = columns[moveFrom];\n // columns are what get rendered, so these are the columns that\n // the drop operation relates to. We must translate these into\n // columns within the table config. Grouping complicates this\n // as the group columns are not present in columns but ARE in\n // config.columns\n const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n const ofColumn =\n ({ name }: ColumnDescriptor) =>\n (col: ColumnDescriptor) =>\n col.name === name;\n\n const targetIndex = orderedColumns.findIndex(ofColumn(column));\n const nextColumn = orderedColumns[targetIndex + 1];\n const insertPos = nextColumn\n ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n : -1;\n\n if (moveTo > moveFrom && insertPos !== -1) {\n onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));\n } else {\n onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n }\n },\n [columns, onMoveColumn, tableConfig.columns]\n );\n\n const handleColumnHeaderClick = useCallback(\n (evt: React.MouseEvent | React.KeyboardEvent) => {\n const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n const column = visibleColumnAtIndex(columns, colIdx);\n const isAdditive = evt.shiftKey;\n column && onSortColumn(column, isAdditive);\n },\n [columns, onSortColumn]\n );\n\n // Drag Drop column headers\n const {\n onMouseDown: columnHeaderDragMouseDown,\n draggable: draggableColumn,\n ...dragDropHook\n } = useDragDrop({\n allowDragDrop: true,\n containerRef,\n draggableClassName: `vuuTable`,\n itemQuery: \".vuuTableHeaderCell\",\n onDrop: handleDropColumnHeader,\n orientation: \"horizontal\",\n scrollingContainerRef,\n });\n\n return {\n draggableColumn,\n draggedColumnIndex: dragDropHook.draggedItemIndex,\n onClick: handleColumnHeaderClick,\n onMouseDown: columnHeaderDragMouseDown,\n setContainerRef,\n };\n};\n"],"names":["useRef","useCallback","moveColumnTo","queryClosest","visibleColumnAtIndex","useDragDrop"],"mappings":"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"}
package/cjs/useCell.js DELETED
@@ -1,28 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
- var cx = require('clsx');
5
- var react = require('react');
6
-
7
- const useCell = (column, classBase, isHeader) => (
8
- // TODO measure perf without the memo, might not be worth the cost
9
- react.useMemo(() => {
10
- const className = cx(classBase, {
11
- vuuPinFloating: column.pin === "floating",
12
- vuuPinLeft: column.pin === "left",
13
- vuuPinRight: column.pin === "right",
14
- vuuEndPin: isHeader && column.endPin,
15
- // [`${classBase}-resizing`]: column.resizing,
16
- [`${classBase}-editable`]: column.editable,
17
- [`${classBase}-right`]: column.align === "right"
18
- });
19
- const style = vuuUtils.getColumnStyle(column);
20
- return {
21
- className,
22
- style
23
- };
24
- }, [column, classBase, isHeader])
25
- );
26
-
27
- exports.useCell = useCell;
28
- //# sourceMappingURL=useCell.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCell.js","sources":["../src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n column: RuntimeColumnDescriptor,\n classBase: string,\n isHeader?: boolean\n) =>\n // TODO measure perf without the memo, might not be worth the cost\n useMemo(() => {\n const className = cx(classBase, {\n vuuPinFloating: column.pin === \"floating\",\n vuuPinLeft: column.pin === \"left\",\n vuuPinRight: column.pin === \"right\",\n vuuEndPin: isHeader && column.endPin,\n // [`${classBase}-resizing`]: column.resizing,\n [`${classBase}-editable`]: column.editable,\n [`${classBase}-right`]: column.align === \"right\",\n });\n\n const style = getColumnStyle(column);\n return {\n className,\n style,\n };\n }, [column, classBase, isHeader]);\n"],"names":["useMemo","getColumnStyle"],"mappings":";;;;;;AAKa,MAAA,OAAA,GAAU,CACrB,MAAA,EACA,SACA,EAAA,QAAA;AAAA;AAAA,EAGAA,cAAQ,MAAM;AACZ,IAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA;AAAA,MAC9B,cAAA,EAAgB,OAAO,GAAQ,KAAA,UAAA;AAAA,MAC/B,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,MAAA;AAAA;AAAA,MAE9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,KAC1C,CAAA,CAAA;AAED,IAAM,MAAA,KAAA,GAAQC,wBAAe,MAAM,CAAA,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAA,EAAW,QAAQ,CAAC,CAAA;AAAA;;;;"}
@@ -1,79 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
- var react = require('react');
5
- var tableDomUtils = require('./table-dom-utils.js');
6
-
7
- const useCellEditing = ({ navigate }) => {
8
- const commitHandler = react.useCallback(() => {
9
- navigate();
10
- }, [navigate]);
11
- const editInput = react.useCallback(
12
- (evt) => {
13
- const cellEl = evt.target;
14
- const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
15
- if (input) {
16
- input.focus();
17
- input.select();
18
- }
19
- },
20
- []
21
- );
22
- const focusInput = react.useCallback(
23
- (evt) => {
24
- const cellEl = evt.target;
25
- const input = cellEl.querySelector("input");
26
- if (input) {
27
- input.focus();
28
- input.select();
29
- }
30
- },
31
- []
32
- );
33
- const handleKeyDown = react.useCallback(
34
- (e) => {
35
- const el = e.target;
36
- if (tableDomUtils.cellIsTextInput(el)) {
37
- if (vuuUtils.isCharacterKey(e.key)) {
38
- editInput(e);
39
- } else if (e.key === "Enter") {
40
- focusInput(e);
41
- }
42
- }
43
- },
44
- [editInput, focusInput]
45
- );
46
- const handleDoubleClick = react.useCallback(
47
- (e) => {
48
- const el = e.target;
49
- if (el.matches("input") || el.querySelector("input")) {
50
- editInput(e);
51
- e.stopPropagation();
52
- }
53
- },
54
- [editInput]
55
- );
56
- const handleBlur = react.useCallback(
57
- (e) => {
58
- const el = e.target;
59
- el.removeEventListener("vuu-commit", commitHandler, true);
60
- },
61
- [commitHandler]
62
- );
63
- const handleFocus = react.useCallback(
64
- (e) => {
65
- const el = e.target;
66
- el.addEventListener("vuu-commit", commitHandler, true);
67
- },
68
- [commitHandler]
69
- );
70
- return {
71
- onBlur: handleBlur,
72
- onDoubleClick: handleDoubleClick,
73
- onFocus: handleFocus,
74
- onKeyDown: handleKeyDown
75
- };
76
- };
77
-
78
- exports.useCellEditing = useCellEditing;
79
- //# sourceMappingURL=useCellEditing.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCellEditing.js","sources":["../src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n KeyboardEvent as ReactKeyboardEvent,\n MouseEvent,\n useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n const commitHandler = useCallback(() => {\n navigate();\n }, [navigate]);\n\n const editInput = useCallback(\n (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n const cellEl = evt.target as HTMLDivElement;\n const input = cellEl.matches(\"input\")\n ? (cellEl as HTMLInputElement)\n : cellEl.querySelector(\"input\");\n\n if (input) {\n input.focus();\n input.select();\n }\n },\n []\n );\n\n const focusInput = useCallback(\n (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n const cellEl = evt.target as HTMLDivElement;\n const input = cellEl.querySelector(\"input\");\n if (input) {\n input.focus();\n input.select();\n }\n },\n []\n );\n\n const handleKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLElement>) => {\n const el = e.target as HTMLElement;\n if (cellIsTextInput(el)) {\n if (isCharacterKey(e.key)) {\n editInput(e);\n } else if (e.key === \"Enter\") {\n focusInput(e);\n }\n }\n },\n [editInput, focusInput]\n );\n\n const handleDoubleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n const el = e.target as HTMLElement;\n if (el.matches(\"input\") || el.querySelector(\"input\")) {\n editInput(e);\n e.stopPropagation();\n }\n },\n [editInput]\n );\n\n const handleBlur = useCallback<FocusEventHandler>(\n (e) => {\n const el = e.target as HTMLElement;\n el.removeEventListener(\"vuu-commit\", commitHandler, true);\n },\n [commitHandler]\n );\n\n const handleFocus = useCallback<FocusEventHandler>(\n (e) => {\n const el = e.target as HTMLElement;\n el.addEventListener(\"vuu-commit\", commitHandler, true);\n },\n [commitHandler]\n );\n\n return {\n onBlur: handleBlur,\n onDoubleClick: handleDoubleClick,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["useCallback","cellIsTextInput","isCharacterKey"],"mappings":"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"}
@@ -1,43 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var react = require('react');
6
-
7
- const useControlledTableNavigation = (initialValue, rowCount) => {
8
- const tableRef = react.useRef(null);
9
- const [highlightedIndexRef, setHighlightedIndex] = vuuUiControls.useStateRef(initialValue);
10
- const handleKeyDown = react.useCallback(
11
- (e) => {
12
- if (e.key === "ArrowDown") {
13
- setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));
14
- } else if (e.key === "ArrowUp") {
15
- setHighlightedIndex((index = -1) => Math.max(0, index - 1));
16
- } else if (e.key === "Enter" || e.key === " ") {
17
- const { current: rowIdx } = highlightedIndexRef;
18
- const rowEl = tableRef.current?.querySelector(
19
- `[aria-rowindex="${rowIdx}"]`
20
- );
21
- if (rowEl) {
22
- vuuUtils.dispatchMouseEvent(rowEl, "click");
23
- }
24
- }
25
- },
26
- [highlightedIndexRef, rowCount, setHighlightedIndex]
27
- );
28
- const handleHighlight = react.useCallback(
29
- (idx) => {
30
- setHighlightedIndex(idx);
31
- },
32
- [setHighlightedIndex]
33
- );
34
- return {
35
- highlightedIndexRef,
36
- onHighlight: handleHighlight,
37
- onKeyDown: handleKeyDown,
38
- tableRef
39
- };
40
- };
41
-
42
- exports.useControlledTableNavigation = useControlledTableNavigation;
43
- //# sourceMappingURL=useControlledTableNavigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (e.key === \"Enter\" || e.key === \" \") {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n const rowEl = tableRef.current?.querySelector(\n `[aria-rowindex=\"${rowIdx}\"]`\n ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n },\n [highlightedIndexRef, rowCount, setHighlightedIndex]\n );\n\n const handleHighlight = useCallback(\n (idx: number) => {\n setHighlightedIndex(idx);\n },\n [setHighlightedIndex]\n );\n\n return {\n highlightedIndexRef,\n onHighlight: handleHighlight,\n onKeyDown: handleKeyDown,\n tableRef,\n };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;;AAIa,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,0BAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,iBACjD,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAA,CAAE,QAAQ,GAAK,EAAA;AAC7C,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,UAC9B,mBAAmB,MAAM,CAAA,EAAA,CAAA;AAAA,SAC3B,CAAA;AACA,QAAA,IAAI,KAAO,EAAA;AACT,UAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,SACnC;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,104 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
- var react = require('react');
5
- var movingWindow = require('./moving-window.js');
6
-
7
- const isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
8
- const useDataSource = ({
9
- dataSource,
10
- onFeatureInvocation,
11
- onSizeChange,
12
- onSubscribed,
13
- range = vuuUtils.NULL_RANGE,
14
- renderBufferSize = 0
15
- }) => {
16
- const [, forceUpdate] = react.useState(null);
17
- const data = react.useRef([]);
18
- const isMounted = react.useRef(true);
19
- const hasUpdated = react.useRef(false);
20
- const rangeRef = react.useRef(range);
21
- const dataWindow = react.useMemo(
22
- () => new movingWindow.MovingWindow(vuuUtils.getFullRange(range, renderBufferSize)),
23
- // eslint-disable-next-line react-hooks/exhaustive-deps
24
- []
25
- );
26
- const setData = react.useCallback(
27
- (updates) => {
28
- for (const row of updates) {
29
- dataWindow.add(row);
30
- }
31
- data.current = dataWindow.data;
32
- if (isMounted.current) {
33
- forceUpdate({});
34
- }
35
- },
36
- [dataWindow]
37
- );
38
- const datasourceMessageHandler = react.useCallback(
39
- (message) => {
40
- if (message.type === "subscribed") {
41
- onSubscribed?.(message);
42
- } else if (message.type === "viewport-update") {
43
- if (typeof message.size === "number") {
44
- onSizeChange?.(message.size);
45
- dataWindow.setRowCount(message.size);
46
- }
47
- if (message.rows) {
48
- setData(message.rows);
49
- } else if (typeof message.size === "number") {
50
- data.current = dataWindow.data;
51
- hasUpdated.current = true;
52
- }
53
- } else if (isVuuFeatureInvocation(message)) {
54
- onFeatureInvocation?.(message);
55
- } else {
56
- console.log(`useDataSource unexpected message ${message.type}`);
57
- }
58
- },
59
- [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
60
- );
61
- const getSelectedRows = react.useCallback(() => {
62
- return dataWindow.getSelectedRows();
63
- }, [dataWindow]);
64
- react.useEffect(() => {
65
- isMounted.current = true;
66
- dataSource.resume?.();
67
- return () => {
68
- isMounted.current = false;
69
- dataSource.suspend?.();
70
- };
71
- }, [dataSource]);
72
- react.useEffect(() => {
73
- if (dataSource.status === "disabled") {
74
- dataSource.enable?.(datasourceMessageHandler);
75
- } else {
76
- dataSource?.subscribe(
77
- { range: vuuUtils.getFullRange(range, renderBufferSize) },
78
- datasourceMessageHandler
79
- );
80
- }
81
- }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
82
- const setRange = react.useCallback(
83
- (range2) => {
84
- if (!vuuUtils.rangesAreSame(range2, rangeRef.current)) {
85
- const fullRange = vuuUtils.getFullRange(range2, renderBufferSize);
86
- dataWindow.setRange(fullRange);
87
- dataSource.range = rangeRef.current = fullRange;
88
- dataSource.emit("range", range2);
89
- }
90
- },
91
- [dataSource, dataWindow, renderBufferSize]
92
- );
93
- return {
94
- data: data.current,
95
- dataRef: data,
96
- getSelectedRows,
97
- range: rangeRef.current,
98
- setRange
99
- };
100
- };
101
-
102
- exports.isVuuFeatureInvocation = isVuuFeatureInvocation;
103
- exports.useDataSource = useDataSource;
104
- //# sourceMappingURL=useDataSource.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDataSource.js","sources":["../src/useDataSource.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceRow,\n DataSourceSubscribedMessage,\n SubscribeCallback,\n VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getFullRange, NULL_RANGE, rangesAreSame } from \"@vuu-ui/vuu-utils\";\nimport { GridAction } from \"@vuu-ui/vuu-table-types\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MovingWindow } from \"./moving-window\";\n\nexport interface DataSourceHookProps {\n dataSource: DataSource;\n onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n onSizeChange: (size: number) => void;\n onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n range?: VuuRange;\n renderBufferSize?: number;\n}\n\nexport const isVuuFeatureInvocation = (\n action: GridAction\n): action is VuuFeatureInvocationMessage =>\n action.type === \"vuu-link-created\" || action.type === \"vuu-link-removed\";\n\nexport const useDataSource = ({\n dataSource,\n onFeatureInvocation,\n onSizeChange,\n onSubscribed,\n range = NULL_RANGE,\n renderBufferSize = 0,\n}: DataSourceHookProps) => {\n const [, forceUpdate] = useState<unknown>(null);\n const data = useRef<DataSourceRow[]>([]);\n const isMounted = useRef(true);\n const hasUpdated = useRef(false);\n const rangeRef = useRef<VuuRange>(range);\n\n const dataWindow = useMemo(\n () => new MovingWindow(getFullRange(range, renderBufferSize)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n const setData = useCallback(\n (updates: DataSourceRow[]) => {\n for (const row of updates) {\n dataWindow.add(row);\n }\n data.current = dataWindow.data;\n if (isMounted.current) {\n // TODO do we ever need to worry about missing updates here ?\n forceUpdate({});\n } else {\n // do nothing\n }\n },\n [dataWindow]\n );\n\n const datasourceMessageHandler: SubscribeCallback = useCallback(\n (message) => {\n if (message.type === \"subscribed\") {\n onSubscribed?.(message);\n } else if (message.type === \"viewport-update\") {\n if (typeof message.size === \"number\") {\n onSizeChange?.(message.size);\n dataWindow.setRowCount(message.size);\n }\n if (message.rows) {\n setData(message.rows);\n } else if (typeof message.size === \"number\") {\n data.current = dataWindow.data;\n hasUpdated.current = true;\n }\n } else if (isVuuFeatureInvocation(message)) {\n onFeatureInvocation?.(message);\n } else {\n console.log(`useDataSource unexpected message ${message.type}`);\n }\n },\n [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]\n );\n\n const getSelectedRows = useCallback(() => {\n return dataWindow.getSelectedRows();\n }, [dataWindow]);\n\n useEffect(() => {\n isMounted.current = true;\n dataSource.resume?.();\n return () => {\n isMounted.current = false;\n dataSource.suspend?.();\n };\n }, [dataSource]);\n\n useEffect(() => {\n if (dataSource.status === \"disabled\") {\n dataSource.enable?.(datasourceMessageHandler);\n } else {\n //TODO could we improve this by using a ref for range ?\n dataSource?.subscribe(\n { range: getFullRange(range, renderBufferSize) },\n datasourceMessageHandler\n );\n }\n }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);\n\n const setRange = useCallback(\n (range: VuuRange) => {\n if (!rangesAreSame(range, rangeRef.current)) {\n const fullRange = getFullRange(range, renderBufferSize);\n dataWindow.setRange(fullRange);\n dataSource.range = rangeRef.current = fullRange;\n // emit a range event omitting the renderBufferSize\n // This isn't great, we're using the dataSource as a conduit to emit a\n // message that has nothing to do with the dataSource itself. CLient\n // is the DataSourceState component.\n dataSource.emit(\"range\", range);\n }\n },\n [dataSource, dataWindow, renderBufferSize]\n );\n\n return {\n data: data.current,\n dataRef: data,\n getSelectedRows,\n range: rangeRef.current,\n setRange,\n };\n};\n"],"names":["NULL_RANGE","useState","useRef","useMemo","MovingWindow","getFullRange","useCallback","useEffect","range","rangesAreSame"],"mappings":"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"}