@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.1

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 (288) hide show
  1. package/package.json +12 -14
  2. package/types/VirtualColSpan.d.ts +2 -2
  3. package/types/cell-renderers/toggle-cell/ToggleCell.d.ts +1 -1
  4. package/types/useTable.d.ts +3 -3
  5. package/cjs/CellFocusState.js +0 -45
  6. package/cjs/CellFocusState.js.map +0 -1
  7. package/cjs/Row.js +0 -116
  8. package/cjs/Row.js.map +0 -1
  9. package/cjs/Table.css.js +0 -6
  10. package/cjs/Table.css.js.map +0 -1
  11. package/cjs/Table.js +0 -455
  12. package/cjs/Table.js.map +0 -1
  13. package/cjs/VirtualColSpan.js +0 -19
  14. package/cjs/VirtualColSpan.js.map +0 -1
  15. package/cjs/applyHighlighting.js +0 -33
  16. package/cjs/applyHighlighting.js.map +0 -1
  17. package/cjs/bulk-edit/BulkEditPanel.css.js +0 -6
  18. package/cjs/bulk-edit/BulkEditPanel.css.js.map +0 -1
  19. package/cjs/bulk-edit/BulkEditPanel.js +0 -107
  20. package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
  21. package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -6
  22. package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
  23. package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js +0 -80
  24. package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
  25. package/cjs/bulk-edit/InsertNewRowEditor.css.js +0 -6
  26. package/cjs/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
  27. package/cjs/bulk-edit/InsertNewRowEditor.js +0 -80
  28. package/cjs/bulk-edit/InsertNewRowEditor.js.map +0 -1
  29. package/cjs/bulk-edit/useBulkEditPanel.js +0 -70
  30. package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
  31. package/cjs/bulk-edit/useColumnCascadingEditor.js +0 -143
  32. package/cjs/bulk-edit/useColumnCascadingEditor.js.map +0 -1
  33. package/cjs/cell-block/CellBlock.css.js +0 -6
  34. package/cjs/cell-block/CellBlock.css.js.map +0 -1
  35. package/cjs/cell-block/CellBlock.js +0 -45
  36. package/cjs/cell-block/CellBlock.js.map +0 -1
  37. package/cjs/cell-block/cellblock-utils.js +0 -125
  38. package/cjs/cell-block/cellblock-utils.js.map +0 -1
  39. package/cjs/cell-block/useCellBlockSelection.js +0 -257
  40. package/cjs/cell-block/useCellBlockSelection.js.map +0 -1
  41. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -6
  42. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
  43. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -67
  44. package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
  45. package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -6
  46. package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
  47. package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -51
  48. package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
  49. package/cjs/cell-renderers/input-cell/InputCell.css.js +0 -6
  50. package/cjs/cell-renderers/input-cell/InputCell.css.js.map +0 -1
  51. package/cjs/cell-renderers/input-cell/InputCell.js +0 -63
  52. package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
  53. package/cjs/cell-renderers/input-cell/useInputCell.js +0 -211
  54. package/cjs/cell-renderers/input-cell/useInputCell.js.map +0 -1
  55. package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +0 -6
  56. package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
  57. package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -66
  58. package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
  59. package/cjs/column-header-pill/ColumnHeaderPill.css.js +0 -6
  60. package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
  61. package/cjs/column-header-pill/ColumnHeaderPill.js +0 -53
  62. package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
  63. package/cjs/column-header-pill/GroupColumnPill.css.js +0 -6
  64. package/cjs/column-header-pill/GroupColumnPill.css.js.map +0 -1
  65. package/cjs/column-header-pill/GroupColumnPill.js +0 -29
  66. package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
  67. package/cjs/column-header-pill/SortIndicator.css.js +0 -6
  68. package/cjs/column-header-pill/SortIndicator.css.js.map +0 -1
  69. package/cjs/column-header-pill/SortIndicator.js +0 -27
  70. package/cjs/column-header-pill/SortIndicator.js.map +0 -1
  71. package/cjs/column-resizing/ColumnResizer.css.js +0 -6
  72. package/cjs/column-resizing/ColumnResizer.css.js.map +0 -1
  73. package/cjs/column-resizing/ColumnResizer.js +0 -82
  74. package/cjs/column-resizing/ColumnResizer.js.map +0 -1
  75. package/cjs/column-resizing/useTableColumnResize.js +0 -55
  76. package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
  77. package/cjs/data-row/DataRow.js +0 -262
  78. package/cjs/data-row/DataRow.js.map +0 -1
  79. package/cjs/header-cell/GroupHeaderCell.css.js +0 -6
  80. package/cjs/header-cell/GroupHeaderCell.css.js.map +0 -1
  81. package/cjs/header-cell/GroupHeaderCell.js +0 -127
  82. package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
  83. package/cjs/header-cell/HeaderCell.css.js +0 -6
  84. package/cjs/header-cell/HeaderCell.css.js.map +0 -1
  85. package/cjs/header-cell/HeaderCell.js +0 -139
  86. package/cjs/header-cell/HeaderCell.js.map +0 -1
  87. package/cjs/index.js +0 -64
  88. package/cjs/index.js.map +0 -1
  89. package/cjs/pagination/PaginationControl.css.js +0 -6
  90. package/cjs/pagination/PaginationControl.css.js.map +0 -1
  91. package/cjs/pagination/PaginationControl.js +0 -38
  92. package/cjs/pagination/PaginationControl.js.map +0 -1
  93. package/cjs/pagination/usePagination.js +0 -36
  94. package/cjs/pagination/usePagination.js.map +0 -1
  95. package/cjs/table-cell/TableCell.css.js +0 -6
  96. package/cjs/table-cell/TableCell.css.js.map +0 -1
  97. package/cjs/table-cell/TableCell.js +0 -75
  98. package/cjs/table-cell/TableCell.js.map +0 -1
  99. package/cjs/table-cell/TableGroupCell.css.js +0 -6
  100. package/cjs/table-cell/TableGroupCell.css.js.map +0 -1
  101. package/cjs/table-cell/TableGroupCell.js +0 -65
  102. package/cjs/table-cell/TableGroupCell.js.map +0 -1
  103. package/cjs/table-config/useTableConfig.js +0 -67
  104. package/cjs/table-config/useTableConfig.js.map +0 -1
  105. package/cjs/table-config.js +0 -35
  106. package/cjs/table-config.js.map +0 -1
  107. package/cjs/table-data-source/DataRowMovingWindow.js +0 -99
  108. package/cjs/table-data-source/DataRowMovingWindow.js.map +0 -1
  109. package/cjs/table-data-source/useDataSource.js +0 -236
  110. package/cjs/table-data-source/useDataSource.js.map +0 -1
  111. package/cjs/table-dom-utils.js +0 -206
  112. package/cjs/table-dom-utils.js.map +0 -1
  113. package/cjs/table-header/HeaderProvider.js +0 -18
  114. package/cjs/table-header/HeaderProvider.js.map +0 -1
  115. package/cjs/table-header/TableHeader.js +0 -180
  116. package/cjs/table-header/TableHeader.js.map +0 -1
  117. package/cjs/table-header/useTableHeader.js +0 -87
  118. package/cjs/table-header/useTableHeader.js.map +0 -1
  119. package/cjs/useCell.js +0 -26
  120. package/cjs/useCell.js.map +0 -1
  121. package/cjs/useCellEditing.js +0 -77
  122. package/cjs/useCellEditing.js.map +0 -1
  123. package/cjs/useCellFocus.js +0 -119
  124. package/cjs/useCellFocus.js.map +0 -1
  125. package/cjs/useControlledTableNavigation.js +0 -46
  126. package/cjs/useControlledTableNavigation.js.map +0 -1
  127. package/cjs/useEditableCell.js +0 -27
  128. package/cjs/useEditableCell.js.map +0 -1
  129. package/cjs/useKeyboardNavigation.js +0 -323
  130. package/cjs/useKeyboardNavigation.js.map +0 -1
  131. package/cjs/useMeasuredHeight.js +0 -51
  132. package/cjs/useMeasuredHeight.js.map +0 -1
  133. package/cjs/useRowClassNameGenerators.js +0 -34
  134. package/cjs/useRowClassNameGenerators.js.map +0 -1
  135. package/cjs/useSelection.js +0 -130
  136. package/cjs/useSelection.js.map +0 -1
  137. package/cjs/useTable.js +0 -742
  138. package/cjs/useTable.js.map +0 -1
  139. package/cjs/useTableContextMenu.js +0 -76
  140. package/cjs/useTableContextMenu.js.map +0 -1
  141. package/cjs/useTableModel.js +0 -421
  142. package/cjs/useTableModel.js.map +0 -1
  143. package/cjs/useTableScroll.js +0 -464
  144. package/cjs/useTableScroll.js.map +0 -1
  145. package/cjs/useTableViewport.js +0 -137
  146. package/cjs/useTableViewport.js.map +0 -1
  147. package/esm/CellFocusState.js +0 -43
  148. package/esm/CellFocusState.js.map +0 -1
  149. package/esm/Row.js +0 -114
  150. package/esm/Row.js.map +0 -1
  151. package/esm/Table.css.js +0 -4
  152. package/esm/Table.css.js.map +0 -1
  153. package/esm/Table.js +0 -453
  154. package/esm/Table.js.map +0 -1
  155. package/esm/VirtualColSpan.js +0 -17
  156. package/esm/VirtualColSpan.js.map +0 -1
  157. package/esm/applyHighlighting.js +0 -31
  158. package/esm/applyHighlighting.js.map +0 -1
  159. package/esm/bulk-edit/BulkEditPanel.css.js +0 -4
  160. package/esm/bulk-edit/BulkEditPanel.css.js.map +0 -1
  161. package/esm/bulk-edit/BulkEditPanel.js +0 -105
  162. package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
  163. package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -4
  164. package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
  165. package/esm/bulk-edit/ColumnCascadingUpdateEditor.js +0 -78
  166. package/esm/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
  167. package/esm/bulk-edit/InsertNewRowEditor.css.js +0 -4
  168. package/esm/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
  169. package/esm/bulk-edit/InsertNewRowEditor.js +0 -78
  170. package/esm/bulk-edit/InsertNewRowEditor.js.map +0 -1
  171. package/esm/bulk-edit/useBulkEditPanel.js +0 -68
  172. package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
  173. package/esm/bulk-edit/useColumnCascadingEditor.js +0 -141
  174. package/esm/bulk-edit/useColumnCascadingEditor.js.map +0 -1
  175. package/esm/cell-block/CellBlock.css.js +0 -4
  176. package/esm/cell-block/CellBlock.css.js.map +0 -1
  177. package/esm/cell-block/CellBlock.js +0 -43
  178. package/esm/cell-block/CellBlock.js.map +0 -1
  179. package/esm/cell-block/cellblock-utils.js +0 -116
  180. package/esm/cell-block/cellblock-utils.js.map +0 -1
  181. package/esm/cell-block/useCellBlockSelection.js +0 -255
  182. package/esm/cell-block/useCellBlockSelection.js.map +0 -1
  183. package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -4
  184. package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
  185. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -65
  186. package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
  187. package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -4
  188. package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
  189. package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -49
  190. package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
  191. package/esm/cell-renderers/input-cell/InputCell.css.js +0 -4
  192. package/esm/cell-renderers/input-cell/InputCell.css.js.map +0 -1
  193. package/esm/cell-renderers/input-cell/InputCell.js +0 -61
  194. package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
  195. package/esm/cell-renderers/input-cell/useInputCell.js +0 -209
  196. package/esm/cell-renderers/input-cell/useInputCell.js.map +0 -1
  197. package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +0 -4
  198. package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
  199. package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -64
  200. package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
  201. package/esm/column-header-pill/ColumnHeaderPill.css.js +0 -4
  202. package/esm/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
  203. package/esm/column-header-pill/ColumnHeaderPill.js +0 -51
  204. package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
  205. package/esm/column-header-pill/GroupColumnPill.css.js +0 -4
  206. package/esm/column-header-pill/GroupColumnPill.css.js.map +0 -1
  207. package/esm/column-header-pill/GroupColumnPill.js +0 -27
  208. package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
  209. package/esm/column-header-pill/SortIndicator.css.js +0 -4
  210. package/esm/column-header-pill/SortIndicator.css.js.map +0 -1
  211. package/esm/column-header-pill/SortIndicator.js +0 -25
  212. package/esm/column-header-pill/SortIndicator.js.map +0 -1
  213. package/esm/column-resizing/ColumnResizer.css.js +0 -4
  214. package/esm/column-resizing/ColumnResizer.css.js.map +0 -1
  215. package/esm/column-resizing/ColumnResizer.js +0 -80
  216. package/esm/column-resizing/ColumnResizer.js.map +0 -1
  217. package/esm/column-resizing/useTableColumnResize.js +0 -53
  218. package/esm/column-resizing/useTableColumnResize.js.map +0 -1
  219. package/esm/data-row/DataRow.js +0 -260
  220. package/esm/data-row/DataRow.js.map +0 -1
  221. package/esm/header-cell/GroupHeaderCell.css.js +0 -4
  222. package/esm/header-cell/GroupHeaderCell.css.js.map +0 -1
  223. package/esm/header-cell/GroupHeaderCell.js +0 -125
  224. package/esm/header-cell/GroupHeaderCell.js.map +0 -1
  225. package/esm/header-cell/HeaderCell.css.js +0 -4
  226. package/esm/header-cell/HeaderCell.css.js.map +0 -1
  227. package/esm/header-cell/HeaderCell.js +0 -137
  228. package/esm/header-cell/HeaderCell.js.map +0 -1
  229. package/esm/index.js +0 -27
  230. package/esm/index.js.map +0 -1
  231. package/esm/pagination/PaginationControl.css.js +0 -4
  232. package/esm/pagination/PaginationControl.css.js.map +0 -1
  233. package/esm/pagination/PaginationControl.js +0 -36
  234. package/esm/pagination/PaginationControl.js.map +0 -1
  235. package/esm/pagination/usePagination.js +0 -34
  236. package/esm/pagination/usePagination.js.map +0 -1
  237. package/esm/table-cell/TableCell.css.js +0 -4
  238. package/esm/table-cell/TableCell.css.js.map +0 -1
  239. package/esm/table-cell/TableCell.js +0 -73
  240. package/esm/table-cell/TableCell.js.map +0 -1
  241. package/esm/table-cell/TableGroupCell.css.js +0 -4
  242. package/esm/table-cell/TableGroupCell.css.js.map +0 -1
  243. package/esm/table-cell/TableGroupCell.js +0 -63
  244. package/esm/table-cell/TableGroupCell.js.map +0 -1
  245. package/esm/table-config/useTableConfig.js +0 -65
  246. package/esm/table-config/useTableConfig.js.map +0 -1
  247. package/esm/table-config.js +0 -33
  248. package/esm/table-config.js.map +0 -1
  249. package/esm/table-data-source/DataRowMovingWindow.js +0 -97
  250. package/esm/table-data-source/DataRowMovingWindow.js.map +0 -1
  251. package/esm/table-data-source/useDataSource.js +0 -234
  252. package/esm/table-data-source/useDataSource.js.map +0 -1
  253. package/esm/table-dom-utils.js +0 -188
  254. package/esm/table-dom-utils.js.map +0 -1
  255. package/esm/table-header/HeaderProvider.js +0 -15
  256. package/esm/table-header/HeaderProvider.js.map +0 -1
  257. package/esm/table-header/TableHeader.js +0 -178
  258. package/esm/table-header/TableHeader.js.map +0 -1
  259. package/esm/table-header/useTableHeader.js +0 -85
  260. package/esm/table-header/useTableHeader.js.map +0 -1
  261. package/esm/useCell.js +0 -24
  262. package/esm/useCell.js.map +0 -1
  263. package/esm/useCellEditing.js +0 -75
  264. package/esm/useCellEditing.js.map +0 -1
  265. package/esm/useCellFocus.js +0 -117
  266. package/esm/useCellFocus.js.map +0 -1
  267. package/esm/useControlledTableNavigation.js +0 -43
  268. package/esm/useControlledTableNavigation.js.map +0 -1
  269. package/esm/useEditableCell.js +0 -25
  270. package/esm/useEditableCell.js.map +0 -1
  271. package/esm/useKeyboardNavigation.js +0 -319
  272. package/esm/useKeyboardNavigation.js.map +0 -1
  273. package/esm/useMeasuredHeight.js +0 -49
  274. package/esm/useMeasuredHeight.js.map +0 -1
  275. package/esm/useRowClassNameGenerators.js +0 -32
  276. package/esm/useRowClassNameGenerators.js.map +0 -1
  277. package/esm/useSelection.js +0 -128
  278. package/esm/useSelection.js.map +0 -1
  279. package/esm/useTable.js +0 -740
  280. package/esm/useTable.js.map +0 -1
  281. package/esm/useTableContextMenu.js +0 -73
  282. package/esm/useTableContextMenu.js.map +0 -1
  283. package/esm/useTableModel.js +0 -419
  284. package/esm/useTableModel.js.map +0 -1
  285. package/esm/useTableScroll.js +0 -461
  286. package/esm/useTableScroll.js.map +0 -1
  287. package/esm/useTableViewport.js +0 -135
  288. package/esm/useTableViewport.js.map +0 -1
@@ -1,105 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { useComponentCssInjection } from '@salt-ds/styles';
3
- import { useWindow } from '@salt-ds/window';
4
- import cx from 'clsx';
5
- import { useMemo } from 'react';
6
- import { Table } from '../Table.js';
7
- import { ColumnCascadingUpdateEditor } from './ColumnCascadingUpdateEditor.js';
8
- import { InsertNewRowEditor } from './InsertNewRowEditor.js';
9
- import { useBulkEditPanel } from './useBulkEditPanel.js';
10
- import bulkEditPanelCss from './BulkEditPanel.css.js';
11
-
12
- const classBase = "vuuBulkEditPanel";
13
- const BulkEditPanel = ({
14
- className,
15
- columns,
16
- sessionDs,
17
- showColumnCascadingUpdateEditor = false,
18
- showInsertNewRowEditor = false,
19
- parentDs,
20
- style,
21
- width = 600,
22
- ...htmlAttributes
23
- }) => {
24
- const targetWindow = useWindow();
25
- useComponentCssInjection({
26
- testId: "vuu-checkbox-cell",
27
- css: bulkEditPanelCss,
28
- window: targetWindow
29
- });
30
- const { onBulkChange, onRowChange, tableConfig } = useBulkEditPanel({
31
- columns,
32
- sessionDs
33
- });
34
- const bulkEditRow = useMemo(() => {
35
- if (showColumnCascadingUpdateEditor && showInsertNewRowEditor) {
36
- return [
37
- /* @__PURE__ */ jsx(
38
- InsertNewRowEditor,
39
- {
40
- onBulkChange,
41
- onRowChange
42
- },
43
- 1
44
- ),
45
- /* @__PURE__ */ jsx(
46
- ColumnCascadingUpdateEditor,
47
- {
48
- onBulkChange,
49
- onRowChange
50
- },
51
- 2
52
- )
53
- ];
54
- } else if (showColumnCascadingUpdateEditor) {
55
- return /* @__PURE__ */ jsx(
56
- ColumnCascadingUpdateEditor,
57
- {
58
- onBulkChange,
59
- onRowChange
60
- }
61
- );
62
- } else if (showInsertNewRowEditor) {
63
- return /* @__PURE__ */ jsx(
64
- ColumnCascadingUpdateEditor,
65
- {
66
- onBulkChange,
67
- onRowChange
68
- }
69
- );
70
- }
71
- }, [
72
- onBulkChange,
73
- onRowChange,
74
- showColumnCascadingUpdateEditor,
75
- showInsertNewRowEditor
76
- ]);
77
- return /* @__PURE__ */ jsxs(
78
- "div",
79
- {
80
- ...htmlAttributes,
81
- className: cx(classBase, className),
82
- style: { ...style, display: "flex", flexDirection: "column" },
83
- children: [
84
- /* @__PURE__ */ jsx("div", { className: `${classBase}-toolbar` }),
85
- /* @__PURE__ */ jsx("div", { className: `${classBase}-table`, children: /* @__PURE__ */ jsx(
86
- Table,
87
- {
88
- allowDragColumnHeader: false,
89
- config: tableConfig,
90
- customHeader: bulkEditRow,
91
- dataSource: sessionDs,
92
- height: 380,
93
- width,
94
- showColumnHeaderMenus: false,
95
- selectionModel: "none",
96
- maxViewportRowLimit: 10
97
- }
98
- ) })
99
- ]
100
- }
101
- );
102
- };
103
-
104
- export { BulkEditPanel };
105
- //# sourceMappingURL=BulkEditPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BulkEditPanel.js","sources":["../../../../packages/vuu-table/src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { ColumnCascadingUpdateEditor } from \"./ColumnCascadingUpdateEditor\";\nimport { InsertNewRowEditor } from \"./InsertNewRowEditor\";\nimport { useBulkEditPanel } from \"./useBulkEditPanel\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n columns?: ColumnDescriptor[];\n showColumnCascadingUpdateEditor?: boolean;\n showInsertNewRowEditor?: boolean;\n /**\n * The session dataSource. This is where the edits will be processed until final\n * confirmation, at which point edits will be applied to parent dataSource and\n * the session table torn down.\n */\n sessionDs: DataSource;\n response?: RpcResponse;\n mainTableName?: string;\n /**\n * The parent dataSource. This is where the edits will be applied once confirmed\n */\n parentDs: DataSource;\n width?: number;\n}\n\nexport const BulkEditPanel = ({\n className,\n columns,\n sessionDs,\n showColumnCascadingUpdateEditor = false,\n showInsertNewRowEditor = false,\n parentDs,\n style,\n width = 600,\n ...htmlAttributes\n}: BulkEditPanelProps): ReactElement => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-cell\",\n css: bulkEditPanelCss,\n window: targetWindow,\n });\n\n const { onBulkChange, onRowChange, tableConfig } = useBulkEditPanel({\n columns,\n sessionDs,\n });\n\n const bulkEditRow = useMemo(() => {\n if (showColumnCascadingUpdateEditor && showInsertNewRowEditor) {\n return [\n <InsertNewRowEditor\n key={1}\n onBulkChange={onBulkChange}\n onRowChange={onRowChange}\n />,\n <ColumnCascadingUpdateEditor\n key={2}\n onBulkChange={onBulkChange}\n onRowChange={onRowChange}\n />,\n ];\n } else if (showColumnCascadingUpdateEditor) {\n return (\n <ColumnCascadingUpdateEditor\n onBulkChange={onBulkChange}\n onRowChange={onRowChange}\n />\n );\n } else if (showInsertNewRowEditor) {\n return (\n <ColumnCascadingUpdateEditor\n onBulkChange={onBulkChange}\n onRowChange={onRowChange}\n />\n );\n }\n }, [\n onBulkChange,\n onRowChange,\n showColumnCascadingUpdateEditor,\n showInsertNewRowEditor,\n ]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n style={{ ...style, display: \"flex\", flexDirection: \"column\" }}\n >\n <div className={`${classBase}-toolbar`} />\n <div className={`${classBase}-table`}>\n <Table\n allowDragColumnHeader={false}\n config={tableConfig}\n customHeader={bulkEditRow}\n dataSource={sessionDs}\n height={380}\n width={width}\n showColumnHeaderMenus={false}\n selectionModel=\"none\"\n maxViewportRowLimit={10}\n />\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,kBAAA;AAqBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,+BAAkC,GAAA,KAAA;AAAA,EAClC,sBAAyB,GAAA,KAAA;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACR,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAa,EAAA,WAAA,KAAgB,gBAAiB,CAAA;AAAA,IAClE,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,mCAAmC,sBAAwB,EAAA;AAC7D,MAAO,OAAA;AAAA,wBACL,GAAA;AAAA,UAAC,kBAAA;AAAA,UAAA;AAAA,YAEC,YAAA;AAAA,YACA;AAAA,WAAA;AAAA,UAFK;AAAA,SAGP;AAAA,wBACA,GAAA;AAAA,UAAC,2BAAA;AAAA,UAAA;AAAA,YAEC,YAAA;AAAA,YACA;AAAA,WAAA;AAAA,UAFK;AAAA;AAGP,OACF;AAAA,eACS,+BAAiC,EAAA;AAC1C,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,YAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,eAEO,sBAAwB,EAAA;AACjC,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,YAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA;AAEJ,GACC,EAAA;AAAA,IACD,YAAA;AAAA,IACA,WAAA;AAAA,IACA,+BAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAO,EAAE,GAAG,OAAO,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAY,EAAA,SAAA;AAAA,YACZ,MAAQ,EAAA,GAAA;AAAA,YACR,KAAA;AAAA,YACA,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var bulkEditRowCss = ".vuuBulkEditRow {\n --filter-borderColor: var(--salt-separable-secondary-borderColor);\n --filter-color: var(--salt-content-primary-foreground-disabled);\n --filter-padding: 1px 1px 1px 0;\n --item-content-height: 22px;\n height: var(--salt-size-base);\n\n .vuuBulkEditRowCell:has(input:focus) {\n --filter-borderColor: transparent;\n --item-content-height: 20px;\n\n outline-width: 2px;\n outline-offset: -2px;\n outline-style: dotted;\n outline-color: var(--salt-focused-outlineColor);\n\n /* the padding ensures the outline is not clipped */\n --filter-padding: 0 2px;\n /* prevents shift when we apply the padding */\n --saltInput-paddingLeft: 2px;\n\n .saltInput-input {\n outline: none;\n }\n .saltInput-focused {\n border: none;\n outline: none;\n }\n\n .saltComboBox-focused {\n outline: none;\n }\n }\n\n .vuuBulkEditRowCell:focus {\n --filter-borderColor: transparent;\n --item-content-height: 20px;\n /* the padding ensures the outline is not clipped */\n --filter-padding: 0 2px;\n /* prevents shift when we apply the padding */\n --saltInput-paddingLeft: 2px;\n }\n\n .vuuBulkEditRowCell {\n --saltInput-minHeight: var(--item-content-height);\n --saltPillInput-minHeight: var(--item-content-height);\n\n align-items: center;\n display: inline-flex;\n height: 100%;\n padding: var(--filter-padding);\n\n .vuuTypeaheadInput {\n border-style: solid;\n border-color: var(--filter-borderColor);\n border-width: 1px;\n border-radius: 0;\n height: var(--item-content-height);\n input::placeholder {\n color: var(--filter-color);\n }\n }\n\n\n .saltInput-primary.vuuInput {\n border-style: solid;\n border-color: var(--filter-borderColor);\n border-width: 1px;\n border-radius: 0;\n height: var(--item-content-height);\n min-height: var(--item-content-height);\n input::placeholder {\n color: var(--filter-color);\n }\n }\n }\n\n .vuuBulkEditRow-virtualColSpan {\n display: inline-block;\n }\n}\n\n.vuuBulkEditRow:focus-within {\n --filter-borderColor: var(--salt-separable-primary-borderColor);\n --filter-color: var(--salt-content-primary-foreground);\n}\n";
2
-
3
- export { bulkEditRowCss as default };
4
- //# sourceMappingURL=ColumnCascadingUpdateEditor.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnCascadingUpdateEditor.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,78 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useComponentCssInjection } from '@salt-ds/styles';
3
- import { useWindow } from '@salt-ds/window';
4
- import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
5
- import { isNotHidden } from '@vuu-ui/vuu-utils';
6
- import cx from 'clsx';
7
- import { VirtualColSpan } from '../VirtualColSpan.js';
8
- import { useHeaderProps } from '../table-header/HeaderProvider.js';
9
- import '../table-header/TableHeader.js';
10
- import { useBulkEditRow } from './useColumnCascadingEditor.js';
11
- import bulkEditRowCss from './ColumnCascadingUpdateEditor.css.js';
12
-
13
- const classBase = "vuuBulkEditRow";
14
- const ColumnCascadingUpdateEditor = ({
15
- ariaRole,
16
- onBulkChange,
17
- onRowChange,
18
- ...htmlAttributes
19
- }) => {
20
- const targetWindow = useWindow();
21
- useComponentCssInjection({
22
- testId: "vuu-bulk-edit-row",
23
- css: bulkEditRowCss,
24
- window: targetWindow
25
- });
26
- const { columns, virtualColSpan = 0 } = useHeaderProps();
27
- const {
28
- errorMessages,
29
- formFieldsContainerRef,
30
- InputProps,
31
- onCommit,
32
- onFocus,
33
- onKeyDown
34
- } = useBulkEditRow({
35
- descriptors: columns,
36
- onBulkChange,
37
- onRowChange
38
- });
39
- return /* @__PURE__ */ jsxs(
40
- "div",
41
- {
42
- ...htmlAttributes,
43
- className: classBase,
44
- onFocus,
45
- onKeyDown,
46
- ref: formFieldsContainerRef,
47
- role: ariaRole,
48
- children: [
49
- /* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
50
- columns.filter(isNotHidden).map((column, i) => {
51
- const errorMessage = errorMessages[column.name];
52
- return /* @__PURE__ */ jsx(
53
- "div",
54
- {
55
- "aria-colindex": i + 1,
56
- className: cx(`${classBase}Cell`, "vuuTableCell", {
57
- "vuuTableCell-right": column.align === "right"
58
- }),
59
- "data-field": column.name,
60
- role: "cell",
61
- style: { width: column.width },
62
- children: column.editable ? getDataItemEditControl({
63
- InputProps,
64
- dataDescriptor: column,
65
- errorMessage,
66
- onCommit
67
- }) : null
68
- },
69
- column.name
70
- );
71
- })
72
- ]
73
- }
74
- );
75
- };
76
-
77
- export { ColumnCascadingUpdateEditor };
78
- //# sourceMappingURL=ColumnCascadingUpdateEditor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnCascadingUpdateEditor.js","sources":["../../../../packages/vuu-table/src/bulk-edit/ColumnCascadingUpdateEditor.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps, ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport { useBulkEditRow } from \"./useColumnCascadingEditor\";\n\nimport bulkEditRowCss from \"./ColumnCascadingUpdateEditor.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: VuuRowDataItemType,\n) => void;\nexport interface ColumnCascadingUpdateEditorProps\n extends Partial<BaseRowProps>,\n Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n onBulkChange: EditValueChangeHandler;\n onRowChange: (isValid: boolean) => void;\n}\n\nexport const ColumnCascadingUpdateEditor = ({\n ariaRole,\n onBulkChange,\n onRowChange,\n ...htmlAttributes\n}: ColumnCascadingUpdateEditorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const {\n errorMessages,\n formFieldsContainerRef,\n InputProps,\n onCommit,\n onFocus,\n onKeyDown,\n } = useBulkEditRow({\n descriptors: columns,\n onBulkChange,\n onRowChange,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={classBase}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={formFieldsContainerRef}\n role={ariaRole}\n >\n <VirtualColSpan width={virtualColSpan} />\n {columns.filter(isNotHidden).map((column, i) => {\n const errorMessage = errorMessages[column.name];\n return (\n <div\n aria-colindex={i + 1}\n className={cx(`${classBase}Cell`, \"vuuTableCell\", {\n \"vuuTableCell-right\": column.align === \"right\",\n })}\n data-field={column.name}\n key={column.name}\n role=\"cell\"\n style={{ width: column.width }}\n >\n {column.editable\n ? getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n errorMessage,\n onCommit,\n })\n : null}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,gBAAA;AAaX,MAAM,8BAA8B,CAAC;AAAA,EAC1C,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA;AAEvD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACE,cAAe,CAAA;AAAA,IACjB,WAAa,EAAA,OAAA;AAAA,IACb,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,SAAA;AAAA,MACX,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAK,EAAA,sBAAA;AAAA,MACL,IAAM,EAAA,QAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,QACtC,QAAQ,MAAO,CAAA,WAAW,EAAE,GAAI,CAAA,CAAC,QAAQ,CAAM,KAAA;AAC9C,UAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,UACE,uBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,iBAAe,CAAI,GAAA,CAAA;AAAA,cACnB,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,QAAQ,cAAgB,EAAA;AAAA,gBAChD,oBAAA,EAAsB,OAAO,KAAU,KAAA;AAAA,eACxC,CAAA;AAAA,cACD,cAAY,MAAO,CAAA,IAAA;AAAA,cAEnB,IAAK,EAAA,MAAA;AAAA,cACL,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,cAE5B,QAAA,EAAA,MAAA,CAAO,WACJ,sBAAuB,CAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,cAAgB,EAAA,MAAA;AAAA,gBAChB,YAAA;AAAA,gBACA;AAAA,eACD,CACD,GAAA;AAAA,aAAA;AAAA,YAXC,MAAO,CAAA;AAAA,WAYd;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var bulkEditRowCss = ".vuuBulkEditRow {\n --filter-borderColor: var(--salt-separable-secondary-borderColor);\n --filter-color: var(--salt-content-primary-foreground-disabled);\n --filter-padding: 1px 1px 1px 0;\n --item-content-height: 22px;\n height: var(--salt-size-base);\n\n .vuuBulkEditRowCell:has(input:focus) {\n --filter-borderColor: transparent;\n --item-content-height: 20px;\n\n outline-width: 2px;\n outline-offset: -2px;\n outline-style: dotted;\n outline-color: var(--salt-focused-outlineColor);\n\n /* the padding ensures the outline is not clipped */\n --filter-padding: 0 2px;\n /* prevents shift when we apply the padding */\n --saltInput-paddingLeft: 2px;\n\n .saltInput-input {\n outline: none;\n }\n .saltInput-focused {\n border: none;\n outline: none;\n }\n\n .saltComboBox-focused {\n outline: none;\n }\n }\n\n .vuuBulkEditRowCell:focus {\n --filter-borderColor: transparent;\n --item-content-height: 20px;\n /* the padding ensures the outline is not clipped */\n --filter-padding: 0 2px;\n /* prevents shift when we apply the padding */\n --saltInput-paddingLeft: 2px;\n }\n\n .vuuBulkEditRowCell {\n --saltInput-minHeight: var(--item-content-height);\n --saltPillInput-minHeight: var(--item-content-height);\n\n align-items: center;\n display: inline-flex;\n height: 100%;\n padding: var(--filter-padding);\n\n .vuuTypeaheadInput {\n border-style: solid;\n border-color: var(--filter-borderColor);\n border-width: 1px;\n border-radius: 0;\n height: var(--item-content-height);\n input::placeholder {\n color: var(--filter-color);\n }\n }\n\n\n .saltInput-primary.vuuInput {\n border-style: solid;\n border-color: var(--filter-borderColor);\n border-width: 1px;\n border-radius: 0;\n height: var(--item-content-height);\n min-height: var(--item-content-height);\n input::placeholder {\n color: var(--filter-color);\n }\n }\n }\n\n .vuuBulkEditRow-virtualColSpan {\n display: inline-block;\n }\n}\n\n.vuuBulkEditRow:focus-within {\n --filter-borderColor: var(--salt-separable-primary-borderColor);\n --filter-color: var(--salt-content-primary-foreground);\n}\n";
2
-
3
- export { bulkEditRowCss as default };
4
- //# sourceMappingURL=InsertNewRowEditor.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InsertNewRowEditor.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,78 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useComponentCssInjection } from '@salt-ds/styles';
3
- import { useWindow } from '@salt-ds/window';
4
- import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
5
- import cx from 'clsx';
6
- import { VirtualColSpan } from '../VirtualColSpan.js';
7
- import { useHeaderProps } from '../table-header/HeaderProvider.js';
8
- import '../table-header/TableHeader.js';
9
- import { useBulkEditRow } from './useColumnCascadingEditor.js';
10
- import { isNotHidden } from '@vuu-ui/vuu-utils';
11
- import bulkEditRowCss from './InsertNewRowEditor.css.js';
12
-
13
- const classBase = "vuuBulkEditRow";
14
- const InsertNewRowEditor = ({
15
- ariaRole,
16
- onBulkChange,
17
- onRowChange,
18
- ...htmlAttributes
19
- }) => {
20
- const targetWindow = useWindow();
21
- useComponentCssInjection({
22
- testId: "vuu-bulk-edit-row",
23
- css: bulkEditRowCss,
24
- window: targetWindow
25
- });
26
- const { columns, virtualColSpan = 0 } = useHeaderProps();
27
- const {
28
- errorMessages,
29
- formFieldsContainerRef,
30
- InputProps,
31
- onCommit,
32
- onFocus,
33
- onKeyDown
34
- } = useBulkEditRow({
35
- descriptors: columns,
36
- onBulkChange,
37
- onRowChange
38
- });
39
- return /* @__PURE__ */ jsxs(
40
- "div",
41
- {
42
- ...htmlAttributes,
43
- className: classBase,
44
- onFocus,
45
- onKeyDown,
46
- ref: formFieldsContainerRef,
47
- role: ariaRole,
48
- children: [
49
- /* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
50
- columns.filter(isNotHidden).map((column, i) => {
51
- const errorMessage = errorMessages[column.name];
52
- return /* @__PURE__ */ jsx(
53
- "div",
54
- {
55
- "aria-colindex": i + 1,
56
- className: cx(`${classBase}Cell`, "vuuTableCell", {
57
- "vuuTableCell-right": column.align === "right"
58
- }),
59
- "data-field": column.name,
60
- role: "cell",
61
- style: { width: column.width },
62
- children: column.editable ? getDataItemEditControl({
63
- InputProps,
64
- dataDescriptor: column,
65
- errorMessage,
66
- onCommit
67
- }) : null
68
- },
69
- column.name
70
- );
71
- })
72
- ]
73
- }
74
- );
75
- };
76
-
77
- export { InsertNewRowEditor };
78
- //# sourceMappingURL=InsertNewRowEditor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InsertNewRowEditor.js","sources":["../../../../packages/vuu-table/src/bulk-edit/InsertNewRowEditor.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps, ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport { useBulkEditRow } from \"./useColumnCascadingEditor\";\nimport { isNotHidden } from \"@vuu-ui/vuu-utils\";\n\nimport bulkEditRowCss from \"./InsertNewRowEditor.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: VuuRowDataItemType,\n) => void;\nexport interface BulkEditProps\n extends Partial<BaseRowProps>,\n Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n onBulkChange: EditValueChangeHandler;\n onRowChange: (isValid: boolean) => void;\n}\n\nexport const InsertNewRowEditor = ({\n ariaRole,\n onBulkChange,\n onRowChange,\n ...htmlAttributes\n}: BulkEditProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const {\n errorMessages,\n formFieldsContainerRef,\n InputProps,\n onCommit,\n onFocus,\n onKeyDown,\n } = useBulkEditRow({\n descriptors: columns,\n onBulkChange,\n onRowChange,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={classBase}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={formFieldsContainerRef}\n role={ariaRole}\n >\n <VirtualColSpan width={virtualColSpan} />\n {columns.filter(isNotHidden).map((column, i) => {\n const errorMessage = errorMessages[column.name];\n return (\n <div\n aria-colindex={i + 1}\n className={cx(`${classBase}Cell`, \"vuuTableCell\", {\n \"vuuTableCell-right\": column.align === \"right\",\n })}\n data-field={column.name}\n key={column.name}\n role=\"cell\"\n style={{ width: column.width }}\n >\n {column.editable\n ? getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n errorMessage,\n onCommit,\n })\n : null}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,gBAAA;AAaX,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA;AAEvD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACE,cAAe,CAAA;AAAA,IACjB,WAAa,EAAA,OAAA;AAAA,IACb,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,SAAA;AAAA,MACX,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAK,EAAA,sBAAA;AAAA,MACL,IAAM,EAAA,QAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,QACtC,QAAQ,MAAO,CAAA,WAAW,EAAE,GAAI,CAAA,CAAC,QAAQ,CAAM,KAAA;AAC9C,UAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,UACE,uBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,iBAAe,CAAI,GAAA,CAAA;AAAA,cACnB,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,QAAQ,cAAgB,EAAA;AAAA,gBAChD,oBAAA,EAAsB,OAAO,KAAU,KAAA;AAAA,eACxC,CAAA;AAAA,cACD,cAAY,MAAO,CAAA,IAAA;AAAA,cAEnB,IAAK,EAAA,MAAA;AAAA,cACL,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,cAE5B,QAAA,EAAA,MAAA,CAAO,WACJ,sBAAuB,CAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,cAAgB,EAAA,MAAA;AAAA,gBAChB,YAAA;AAAA,gBACA;AAAA,eACD,CACD,GAAA;AAAA,aAAA;AAAA,YAXC,MAAO,CAAA;AAAA,WAYd;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
@@ -1,68 +0,0 @@
1
- import { buildValidationChecker } from '@vuu-ui/vuu-data-react';
2
- import { isTypeDescriptor, hasValidationRules } from '@vuu-ui/vuu-utils';
3
- import { useState, useMemo, useCallback } from 'react';
4
-
5
- const addRenderer = (colType, rendererName) => {
6
- return {
7
- name: colType.name,
8
- rules: colType.rules,
9
- formatting: colType.formatting,
10
- renderer: { name: rendererName }
11
- };
12
- };
13
- const useBulkEditPanel = ({
14
- columns,
15
- sessionDs: dataSource
16
- }) => {
17
- const [rowState, setRowState] = useState(true);
18
- const tableConfig = useMemo(() => {
19
- return {
20
- columns: columns ? columns.map((col) => {
21
- return {
22
- editable: col.editableBulk === "bulk",
23
- hidden: col.editableBulk === false,
24
- name: col.name,
25
- serverDataType: col.serverDataType ?? "string",
26
- type: isTypeDescriptor(col.type) ? addRenderer(col.type, "input-cell") : "string",
27
- clientSideEditValidationCheck: hasValidationRules(col.type) ? buildValidationChecker(col.type.rules) : void 0,
28
- width: 120
29
- };
30
- }) : dataSource.columns.map((name) => ({
31
- editable: true,
32
- name,
33
- serverDataType: "string"
34
- })),
35
- columnLayout: "fit",
36
- columnDefaultWidth: 100,
37
- rowSeparators: true
38
- };
39
- }, [columns, dataSource.columns]);
40
- const handleRowChange = useCallback(
41
- (isValid) => {
42
- if (isValid !== rowState) {
43
- setRowState(isValid);
44
- }
45
- },
46
- [rowState]
47
- );
48
- const handleBulkChange = useCallback(
49
- async (column, value) => {
50
- const response = await dataSource.rpcRequest?.({
51
- params: { column: column.name, value },
52
- rpcName: "VP_BULK_EDIT_COLUMN_CELLS_RPC",
53
- type: "RPC_REQUEST"
54
- });
55
- console.log({ response });
56
- },
57
- [dataSource]
58
- );
59
- return {
60
- tableConfig,
61
- onBulkChange: handleBulkChange,
62
- // onDataEdited: handleDataEdited,
63
- onRowChange: handleRowChange
64
- };
65
- };
66
-
67
- export { useBulkEditPanel };
68
- //# sourceMappingURL=useBulkEditPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useBulkEditPanel.js","sources":["../../../../packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRpcServiceRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport { DataValueTypeDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { hasValidationRules, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { BulkEditPanelProps } from \"./BulkEditPanel\";\nimport { EditValueChangeHandler } from \"./useColumnCascadingEditor\";\n\nconst addRenderer = (\n colType: DataValueTypeDescriptor,\n rendererName: string,\n): DataValueTypeDescriptor => {\n return {\n name: colType.name,\n rules: colType.rules,\n formatting: colType.formatting,\n renderer: { name: rendererName },\n };\n};\n\nexport type BulkEditPanelHookProps = Pick<\n BulkEditPanelProps,\n \"columns\" | \"sessionDs\"\n>;\n\nexport const useBulkEditPanel = ({\n columns,\n sessionDs: dataSource,\n}: BulkEditPanelHookProps) => {\n const [rowState, setRowState] = useState(true);\n\n const tableConfig: TableConfig = useMemo(() => {\n return {\n columns: columns\n ? columns.map((col) => {\n return {\n editable: col.editableBulk === \"bulk\",\n hidden: col.editableBulk === false,\n name: col.name,\n serverDataType: col.serverDataType ?? \"string\",\n type: isTypeDescriptor(col.type)\n ? addRenderer(col.type, \"input-cell\")\n : \"string\",\n clientSideEditValidationCheck: hasValidationRules(col.type)\n ? buildValidationChecker(col.type.rules)\n : undefined,\n width: 120,\n };\n })\n : dataSource.columns.map((name) => ({\n editable: true,\n name,\n serverDataType: \"string\",\n })),\n columnLayout: \"fit\",\n columnDefaultWidth: 100,\n rowSeparators: true,\n };\n }, [columns, dataSource.columns]);\n\n const handleRowChange = useCallback(\n (isValid: boolean) => {\n if (isValid !== rowState) {\n setRowState(isValid);\n }\n },\n [rowState],\n );\n\n const handleBulkChange: EditValueChangeHandler = useCallback(\n async (column, value) => {\n const response = await dataSource.rpcRequest?.({\n params: { column: column.name, value },\n rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n type: \"RPC_REQUEST\",\n } as Omit<VuuRpcServiceRequest, \"context\">);\n console.log({ response });\n },\n [dataSource],\n );\n\n return {\n tableConfig,\n onBulkChange: handleBulkChange,\n // onDataEdited: handleDataEdited,\n onRowChange: handleRowChange,\n };\n};\n"],"names":[],"mappings":";;;;AAQA,MAAM,WAAA,GAAc,CAClB,OAAA,EACA,YAC4B,KAAA;AAC5B,EAAO,OAAA;AAAA,IACL,MAAM,OAAQ,CAAA,IAAA;AAAA,IACd,OAAO,OAAQ,CAAA,KAAA;AAAA,IACf,YAAY,OAAQ,CAAA,UAAA;AAAA,IACpB,QAAA,EAAU,EAAE,IAAA,EAAM,YAAa;AAAA,GACjC;AACF,CAAA;AAOO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAA;AAAA,EACA,SAAW,EAAA;AACb,CAA8B,KAAA;AAC5B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,IAAI,CAAA;AAE7C,EAAM,MAAA,WAAA,GAA2B,QAAQ,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,OAAA,GACL,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnB,QAAO,OAAA;AAAA,UACL,QAAA,EAAU,IAAI,YAAiB,KAAA,MAAA;AAAA,UAC/B,MAAA,EAAQ,IAAI,YAAiB,KAAA,KAAA;AAAA,UAC7B,MAAM,GAAI,CAAA,IAAA;AAAA,UACV,cAAA,EAAgB,IAAI,cAAkB,IAAA,QAAA;AAAA,UACtC,IAAA,EAAM,iBAAiB,GAAI,CAAA,IAAI,IAC3B,WAAY,CAAA,GAAA,CAAI,IAAM,EAAA,YAAY,CAClC,GAAA,QAAA;AAAA,UACJ,6BAAA,EAA+B,mBAAmB,GAAI,CAAA,IAAI,IACtD,sBAAuB,CAAA,GAAA,CAAI,IAAK,CAAA,KAAK,CACrC,GAAA,KAAA,CAAA;AAAA,UACJ,KAAO,EAAA;AAAA,SACT;AAAA,OACD,CACD,GAAA,UAAA,CAAW,OAAQ,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,QAChC,QAAU,EAAA,IAAA;AAAA,QACV,IAAA;AAAA,QACA,cAAgB,EAAA;AAAA,OAChB,CAAA,CAAA;AAAA,MACN,YAAc,EAAA,KAAA;AAAA,MACd,kBAAoB,EAAA,GAAA;AAAA,MACpB,aAAe,EAAA;AAAA,KACjB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,UAAA,CAAW,OAAO,CAAC,CAAA;AAEhC,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,OAAqB,KAAA;AACpB,MAAA,IAAI,YAAY,QAAU,EAAA;AACxB,QAAA,WAAA,CAAY,OAAO,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAA2C,GAAA,WAAA;AAAA,IAC/C,OAAO,QAAQ,KAAU,KAAA;AACvB,MAAM,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,UAAa,GAAA;AAAA,QAC7C,MAAQ,EAAA,EAAE,MAAQ,EAAA,MAAA,CAAO,MAAM,KAAM,EAAA;AAAA,QACrC,OAAS,EAAA,+BAAA;AAAA,QACT,IAAM,EAAA;AAAA,OACkC,CAAA;AAC1C,MAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,QAAA,EAAU,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA;AAAA,IAEd,WAAa,EAAA;AAAA,GACf;AACF;;;;"}
@@ -1,141 +0,0 @@
1
- import { getEditValidationRules, buildValidationChecker } from '@vuu-ui/vuu-data-react';
2
- import { queryClosest, getTypedValue } from '@vuu-ui/vuu-utils';
3
- import { useRef, useState, useCallback, useMemo } from 'react';
4
- import { useEditableCell } from '../useEditableCell.js';
5
-
6
- const getValidationChecker = (descriptor, editPhase) => {
7
- const rules = getEditValidationRules(descriptor, editPhase);
8
- return buildValidationChecker(rules);
9
- };
10
- const nextValidationState = (state, dataDescriptor, value) => {
11
- const check = getValidationChecker(dataDescriptor, "change");
12
- const result = check(value, "change");
13
- const { name } = dataDescriptor;
14
- const { ok: wasOk, messages: existingMessages } = state;
15
- if (result.ok) {
16
- if (!wasOk) {
17
- const fieldsInError = Object.keys(existingMessages);
18
- if (fieldsInError.includes(name)) {
19
- if (fieldsInError.length === 1) {
20
- return { ok: true, messages: {} };
21
- } else {
22
- const messages = { ...existingMessages };
23
- delete messages[name];
24
- return { ok: false, messages };
25
- }
26
- }
27
- }
28
- } else {
29
- return {
30
- ok: false,
31
- messages: {
32
- ...existingMessages,
33
- [name]: result.messages.join("\n")
34
- }
35
- };
36
- }
37
- return state;
38
- };
39
- function find(descriptors, fieldname) {
40
- const d = descriptors.find(({ name }) => name === fieldname);
41
- if (d) {
42
- return d;
43
- }
44
- throw Error(`DataValueDescriptor not found for field ${fieldname}`);
45
- }
46
- const getField = (target) => {
47
- const fieldElement = queryClosest(target, "[data-field]");
48
- if (fieldElement) {
49
- return fieldElement.dataset.field;
50
- } else {
51
- throw Error("no field ");
52
- }
53
- };
54
- const useBulkEditRow = ({
55
- descriptors,
56
- onBulkChange,
57
- onRowChange
58
- }) => {
59
- const formFieldsContainerRef = useRef(null);
60
- const focusedFieldRef = useRef("");
61
- const [, forceUpdate] = useState({});
62
- const validationStateRef = useRef({
63
- ok: true,
64
- messages: {}
65
- });
66
- const bulkRowValidationState = useCallback(
67
- (state) => {
68
- validationStateRef.current = state;
69
- onRowChange(state.ok);
70
- forceUpdate({});
71
- },
72
- [onRowChange]
73
- );
74
- const handleFocus = useCallback((evt) => {
75
- if (formFieldsContainerRef.current?.contains(evt.target)) {
76
- const fieldName = getField(evt.target);
77
- if (fieldName) {
78
- if (fieldName) {
79
- focusedFieldRef.current = fieldName;
80
- }
81
- }
82
- }
83
- }, []);
84
- const handleChange = useCallback(
85
- (evt) => {
86
- const { current: fieldName } = focusedFieldRef;
87
- if (fieldName) {
88
- const input = queryClosest(evt.target, "input", true);
89
- const dataDescriptor = find(descriptors, fieldName);
90
- const value = input.value;
91
- const { current: state } = validationStateRef;
92
- const newState = nextValidationState(state, dataDescriptor, value);
93
- if (newState !== state) {
94
- bulkRowValidationState(newState);
95
- }
96
- }
97
- },
98
- [descriptors, bulkRowValidationState]
99
- );
100
- const {
101
- current: { messages: errorMessages }
102
- } = validationStateRef;
103
- const handleCommit = useCallback(
104
- (evt, value) => {
105
- if (typeof value === "string" && value.trim() !== "") {
106
- const columnName = focusedFieldRef.current;
107
- if (columnName) {
108
- const column = descriptors.find((c) => c.name === columnName);
109
- if (column && errorMessages[columnName] === void 0) {
110
- const { serverDataType = "string" } = column;
111
- const typedValue = getTypedValue(value, serverDataType, true);
112
- onBulkChange(column, typedValue);
113
- }
114
- }
115
- }
116
- },
117
- [descriptors, errorMessages, onBulkChange]
118
- );
119
- const InputProps2 = useMemo(
120
- () => ({
121
- inputProps: {
122
- placeholder: "Enter value"
123
- },
124
- onChange: handleChange,
125
- variant: "primary"
126
- }),
127
- [handleChange]
128
- );
129
- const onKeyDown = useEditableCell();
130
- return {
131
- errorMessages,
132
- formFieldsContainerRef,
133
- InputProps: InputProps2,
134
- onCommit: handleCommit,
135
- onFocus: handleFocus,
136
- onKeyDown
137
- };
138
- };
139
-
140
- export { useBulkEditRow };
141
- //# sourceMappingURL=useColumnCascadingEditor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useColumnCascadingEditor.js","sources":["../../../../packages/vuu-table/src/bulk-edit/useColumnCascadingEditor.tsx"],"sourcesContent":["import {\n buildValidationChecker,\n getEditValidationRules,\n} from \"@vuu-ui/vuu-data-react\";\nimport { DataValueDescriptor, EditPhase } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, getTypedValue, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport {\n FocusEventHandler,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useEditableCell } from \"../useEditableCell\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: VuuRowDataItemType,\n) => void;\n\nexport interface EditableBulkHookProps {\n descriptors: DataValueDescriptor[];\n onBulkChange: EditValueChangeHandler;\n onRowChange: (isValid: boolean) => void;\n}\ntype ValidationState = {\n ok: boolean;\n messages: Record<string, string>;\n};\n\nconst getValidationChecker = (\n descriptor: DataValueDescriptor,\n editPhase: EditPhase | \"*\",\n) => {\n const rules = getEditValidationRules(descriptor, editPhase);\n return buildValidationChecker(rules);\n};\n\nconst nextValidationState = (\n state: ValidationState,\n dataDescriptor: DataValueDescriptor,\n value: VuuRowDataItemType,\n): ValidationState => {\n const check = getValidationChecker(dataDescriptor, \"change\");\n const result = check(value, \"change\");\n const { name } = dataDescriptor;\n\n const { ok: wasOk, messages: existingMessages } = state;\n\n if (result.ok) {\n if (!wasOk) {\n // if this field was the only one in error, the overall state\n // will now be ok, but not if there is still one or more other\n // field still in error.\n const fieldsInError = Object.keys(existingMessages);\n if (fieldsInError.includes(name)) {\n if (fieldsInError.length === 1) {\n return { ok: true, messages: {} };\n } else {\n const messages = { ...existingMessages };\n delete messages[name];\n return { ok: false, messages };\n }\n }\n }\n } else {\n return {\n ok: false,\n messages: {\n ...existingMessages,\n [name]: result.messages.join(\"\\n\"),\n },\n };\n }\n\n return state;\n};\n\nfunction find(descriptors: DataValueDescriptor[], fieldname: string) {\n const d = descriptors.find(({ name }) => name === fieldname);\n if (d) {\n return d;\n }\n throw Error(`DataValueDescriptor not found for field ${fieldname}`);\n}\n\nconst getField = (target: EventTarget | HTMLElement) => {\n const fieldElement = queryClosest(target, \"[data-field]\");\n if (fieldElement) {\n return fieldElement.dataset.field as string;\n } else {\n throw Error(\"no field \");\n }\n};\n\nexport const useBulkEditRow = ({\n descriptors,\n onBulkChange,\n onRowChange,\n}: EditableBulkHookProps) => {\n const formFieldsContainerRef = useRef<HTMLDivElement>(null);\n const focusedFieldRef = useRef(\"\");\n const [, forceUpdate] = useState({});\n const validationStateRef = useRef<ValidationState>({\n ok: true,\n messages: {},\n });\n\n const bulkRowValidationState = useCallback(\n (state: ValidationState) => {\n validationStateRef.current = state;\n onRowChange(state.ok);\n forceUpdate({});\n },\n [onRowChange],\n );\n\n const handleFocus = useCallback<FocusEventHandler>((evt) => {\n // Ignore focus on popup Calendars, Lists etc\n if (formFieldsContainerRef.current?.contains(evt.target)) {\n const fieldName = getField(evt.target);\n if (fieldName) {\n if (fieldName) {\n focusedFieldRef.current = fieldName;\n }\n }\n }\n }, []);\n\n const handleChange = useCallback(\n (evt: SyntheticEvent<HTMLInputElement>) => {\n const { current: fieldName } = focusedFieldRef;\n if (fieldName) {\n const input = queryClosest<HTMLInputElement>(evt.target, \"input\", true);\n const dataDescriptor = find(descriptors, fieldName);\n const value = input.value as string;\n const { current: state } = validationStateRef;\n const newState = nextValidationState(state, dataDescriptor, value);\n if (newState !== state) {\n bulkRowValidationState(newState);\n }\n }\n },\n [descriptors, bulkRowValidationState],\n );\n\n const {\n current: { messages: errorMessages },\n } = validationStateRef;\n\n const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n (evt, value) => {\n if (typeof value === \"string\" && value.trim() !== \"\") {\n const columnName = focusedFieldRef.current;\n if (columnName) {\n const column = descriptors.find((c) => c.name === columnName);\n if (column && errorMessages[columnName] === undefined) {\n const { serverDataType = \"string\" } = column;\n const typedValue = getTypedValue(value, serverDataType, true);\n onBulkChange(column, typedValue);\n }\n }\n }\n },\n [descriptors, errorMessages, onBulkChange],\n );\n\n const InputProps = useMemo<Partial<InputProps>>(\n () => ({\n inputProps: {\n placeholder: \"Enter value\",\n },\n onChange: handleChange,\n variant: \"primary\",\n }),\n [handleChange],\n );\n\n const onKeyDown = useEditableCell();\n\n return {\n errorMessages,\n formFieldsContainerRef,\n InputProps,\n onCommit: handleCommit,\n onFocus: handleFocus,\n onKeyDown,\n };\n};\n"],"names":["InputProps"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var cellBlockCss = ".vuuCellBlock {\n background-color: #00bdff;\n opacity: 0.3;\n border: solid blue 1px;\n position: absolute;\n\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n\n &.cellblock-direction-n {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-end top);\n }\n\n &.cellblock-direction-ne {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-end right);\n top: anchor(--cellblock-end top);\n }\n\n &.cellblock-direction-e {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-end right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-se {\n bottom: anchor(--cellblock-end bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-end right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-s {\n bottom: anchor(--cellblock-end bottom);\n left: anchor(--cellblock-start left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-sw {\n bottom: anchor(--cellblock-end bottom);\n left: anchor(--cellblock-end left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-w {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-end left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-start top);\n }\n\n &.cellblock-direction-nw {\n bottom: anchor(--cellblock-start bottom);\n left: anchor(--cellblock-end left);\n right: anchor(--cellblock-start right);\n top: anchor(--cellblock-end top);\n }\n}\n\n.vuu-cellblock-start {\n anchor-name: --cellblock-start;\n}\n\n.vuuTable.vuu-cellblock-select-in-progress-keyboard {\n .vuuTableCell:focus {\n anchor-name: --cellblock-end;\n }\n .vuuCellBlock {\n pointer-events: none;\n }\n}\n.vuuTable.vuu-cellblock-select-in-progress-mouse {\n .vuuCellBlock {\n pointer-events: none;\n }\n}\n.vuu-cellblock-end {\n anchor-name: --cellblock-end;\n}\n";
2
-
3
- export { cellBlockCss as default };
4
- //# sourceMappingURL=CellBlock.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CellBlock.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,43 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useCallback } from 'react';
3
- import cx from 'clsx';
4
- import { useComponentCssInjection } from '@salt-ds/styles';
5
- import { useWindow } from '@salt-ds/window';
6
- import cellBlockCss from './CellBlock.css.js';
7
-
8
- const classBase = "vuuCellBlock";
9
- const CellBlock = forwardRef(
10
- function CellBlock2({ className, onCopy, ...htmlAttributes }, forwardedRef) {
11
- const targetWindow = useWindow();
12
- useComponentCssInjection({
13
- testId: "vuu-cell-block",
14
- css: cellBlockCss,
15
- window: targetWindow
16
- });
17
- const handleKeyDown = useCallback(
18
- async (evt) => {
19
- if (evt.metaKey && evt.key === "c") {
20
- onCopy?.();
21
- }
22
- },
23
- [onCopy]
24
- );
25
- const onContextMenu = useCallback(() => {
26
- console.log("on cvontext menu");
27
- }, []);
28
- return /* @__PURE__ */ jsx(
29
- "div",
30
- {
31
- ...htmlAttributes,
32
- className: cx(classBase, className),
33
- ref: forwardedRef,
34
- onContextMenu,
35
- onKeyDown: handleKeyDown,
36
- tabIndex: 0
37
- }
38
- );
39
- }
40
- );
41
-
42
- export { CellBlock };
43
- //# sourceMappingURL=CellBlock.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CellBlock.js","sources":["../../../../packages/vuu-table/src/cell-block/CellBlock.tsx"],"sourcesContent":["import {\n HTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n forwardRef,\n useCallback,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cellBlockCss from \"./CellBlock.css\";\n\nconst classBase = \"vuuCellBlock\";\n\nexport interface CellBlockProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onCopy\"> {\n debugName?: string;\n onCopy?: () => void;\n}\n\nexport const CellBlock = forwardRef<HTMLDivElement, CellBlockProps>(\n function CellBlock({ className, onCopy, ...htmlAttributes }, forwardedRef) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-cell-block\",\n css: cellBlockCss,\n window: targetWindow,\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n async (evt) => {\n if (evt.metaKey && evt.key === \"c\") {\n onCopy?.();\n }\n },\n [onCopy],\n );\n\n const onContextMenu = useCallback<MouseEventHandler>(() => {\n console.log(\"on cvontext menu\");\n }, []);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n onContextMenu={onContextMenu}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n />\n );\n },\n);\n"],"names":["CellBlock"],"mappings":";;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAQX,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,WAAU,EAAE,SAAA,EAAW,QAAQ,GAAG,cAAA,IAAkB,YAAc,EAAA;AACzE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAA,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAA,IAAI,GAAI,CAAA,OAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,UAAS,MAAA,IAAA;AAAA;AACX,OACF;AAAA,MACA,CAAC,MAAM;AAAA,KACT;AAEA,IAAM,MAAA,aAAA,GAAgB,YAA+B,MAAM;AACzD,MAAA,OAAA,CAAQ,IAAI,kBAAkB,CAAA;AAAA,KAChC,EAAG,EAAE,CAAA;AAEL,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QACL,aAAA;AAAA,QACA,SAAW,EAAA,aAAA;AAAA,QACX,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA;AAGN;;;;"}