@vuu-ui/vuu-table 0.8.94 → 0.8.96

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 (108) hide show
  1. package/cjs/Row.css.js +1 -1
  2. package/cjs/Row.js +1 -1
  3. package/cjs/Row.js.map +1 -1
  4. package/cjs/Table.css.js +1 -1
  5. package/cjs/Table.js +113 -31
  6. package/cjs/Table.js.map +1 -1
  7. package/cjs/cell-block/CellBlock.css.js +6 -0
  8. package/cjs/cell-block/CellBlock.css.js.map +1 -0
  9. package/cjs/cell-block/CellBlock.js +41 -0
  10. package/cjs/cell-block/CellBlock.js.map +1 -0
  11. package/cjs/cell-block/cellblock-utils.js +140 -0
  12. package/cjs/cell-block/cellblock-utils.js.map +1 -0
  13. package/cjs/cell-block/useCellBlockSelection.js +232 -0
  14. package/cjs/cell-block/useCellBlockSelection.js.map +1 -0
  15. package/cjs/index.js +5 -0
  16. package/cjs/index.js.map +1 -1
  17. package/cjs/moving-window.js +21 -9
  18. package/cjs/moving-window.js.map +1 -1
  19. package/cjs/pagination/PaginationControl.css.js +6 -0
  20. package/cjs/pagination/PaginationControl.css.js.map +1 -0
  21. package/cjs/pagination/PaginationControl.js +38 -0
  22. package/cjs/pagination/PaginationControl.js.map +1 -0
  23. package/cjs/pagination/usePagination.js +38 -0
  24. package/cjs/pagination/usePagination.js.map +1 -0
  25. package/cjs/table-dom-utils.js +67 -10
  26. package/cjs/table-dom-utils.js.map +1 -1
  27. package/cjs/table-header/useTableHeader.js +1 -1
  28. package/cjs/table-header/useTableHeader.js.map +1 -1
  29. package/cjs/useCellFocus.js +56 -0
  30. package/cjs/useCellFocus.js.map +1 -0
  31. package/cjs/useControlledTableNavigation.js +3 -1
  32. package/cjs/useControlledTableNavigation.js.map +1 -1
  33. package/cjs/useDataSource.js +13 -0
  34. package/cjs/useDataSource.js.map +1 -1
  35. package/cjs/useKeyboardNavigation.js +8 -82
  36. package/cjs/useKeyboardNavigation.js.map +1 -1
  37. package/cjs/useMeasuredHeight.js +5 -5
  38. package/cjs/useMeasuredHeight.js.map +1 -1
  39. package/cjs/useTable.js +63 -16
  40. package/cjs/useTable.js.map +1 -1
  41. package/cjs/useTableContextMenu.js +2 -1
  42. package/cjs/useTableContextMenu.js.map +1 -1
  43. package/cjs/useTableScroll.js.map +1 -1
  44. package/cjs/useTableViewport.js +31 -13
  45. package/cjs/useTableViewport.js.map +1 -1
  46. package/esm/Row.css.js +1 -1
  47. package/esm/Row.js +1 -1
  48. package/esm/Row.js.map +1 -1
  49. package/esm/Table.css.js +1 -1
  50. package/esm/Table.js +115 -33
  51. package/esm/Table.js.map +1 -1
  52. package/esm/cell-block/CellBlock.css.js +4 -0
  53. package/esm/cell-block/CellBlock.css.js.map +1 -0
  54. package/esm/cell-block/CellBlock.js +39 -0
  55. package/esm/cell-block/CellBlock.js.map +1 -0
  56. package/esm/cell-block/cellblock-utils.js +131 -0
  57. package/esm/cell-block/cellblock-utils.js.map +1 -0
  58. package/esm/cell-block/useCellBlockSelection.js +230 -0
  59. package/esm/cell-block/useCellBlockSelection.js.map +1 -0
  60. package/esm/index.js +2 -1
  61. package/esm/index.js.map +1 -1
  62. package/esm/moving-window.js +21 -9
  63. package/esm/moving-window.js.map +1 -1
  64. package/esm/pagination/PaginationControl.css.js +4 -0
  65. package/esm/pagination/PaginationControl.css.js.map +1 -0
  66. package/esm/pagination/PaginationControl.js +36 -0
  67. package/esm/pagination/PaginationControl.js.map +1 -0
  68. package/esm/pagination/usePagination.js +36 -0
  69. package/esm/pagination/usePagination.js.map +1 -0
  70. package/esm/table-dom-utils.js +64 -10
  71. package/esm/table-dom-utils.js.map +1 -1
  72. package/esm/table-header/useTableHeader.js +1 -1
  73. package/esm/table-header/useTableHeader.js.map +1 -1
  74. package/esm/useCellFocus.js +54 -0
  75. package/esm/useCellFocus.js.map +1 -0
  76. package/esm/useControlledTableNavigation.js +3 -2
  77. package/esm/useControlledTableNavigation.js.map +1 -1
  78. package/esm/useDataSource.js +13 -0
  79. package/esm/useDataSource.js.map +1 -1
  80. package/esm/useKeyboardNavigation.js +8 -82
  81. package/esm/useKeyboardNavigation.js.map +1 -1
  82. package/esm/useMeasuredHeight.js +5 -5
  83. package/esm/useMeasuredHeight.js.map +1 -1
  84. package/esm/useTable.js +63 -16
  85. package/esm/useTable.js.map +1 -1
  86. package/esm/useTableContextMenu.js +2 -1
  87. package/esm/useTableContextMenu.js.map +1 -1
  88. package/esm/useTableScroll.js.map +1 -1
  89. package/esm/useTableViewport.js +31 -13
  90. package/esm/useTableViewport.js.map +1 -1
  91. package/package.json +9 -9
  92. package/types/Table.d.ts +40 -0
  93. package/types/cell-block/CellBlock.d.ts +6 -0
  94. package/types/cell-block/cellblock-utils.d.ts +37 -0
  95. package/types/cell-block/useCellBlockSelection.d.ts +16 -0
  96. package/types/index.d.ts +1 -0
  97. package/types/moving-window.d.ts +3 -1
  98. package/types/pagination/PaginationControl.d.ts +6 -0
  99. package/types/pagination/index.d.ts +1 -0
  100. package/types/pagination/usePagination.d.ts +9 -0
  101. package/types/table-dom-utils.d.ts +6 -1
  102. package/types/useCellFocus.d.ts +13 -0
  103. package/types/useControlledTableNavigation.d.ts +1 -0
  104. package/types/useKeyboardNavigation.d.ts +5 -5
  105. package/types/useMeasuredHeight.d.ts +2 -2
  106. package/types/useTable.d.ts +13 -11
  107. package/types/useTableScroll.d.ts +1 -0
  108. package/types/useTableViewport.d.ts +3 -2
@@ -0,0 +1,230 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { queryClosest, isArrowKey } from '@vuu-ui/vuu-utils';
3
+ import { useState, useRef, useCallback } from 'react';
4
+ import { getTableCell, getTableCellPos, getNextCellPos } from '../table-dom-utils.js';
5
+ import { CellBlock } from './CellBlock.js';
6
+ import { refState, getTextFromCells, setElementBox, outsideBox, updateCellBlockClassName, getTableCellBlock, isNullCellBox } from './cellblock-utils.js';
7
+
8
+ const clone = (posTuple) => posTuple.slice();
9
+ const NullHandler = () => console.error("no handler installed");
10
+ const mouseHandlers = {
11
+ mouseMove: NullHandler,
12
+ mouseMovePreDrag: NullHandler,
13
+ mouseUp: NullHandler,
14
+ mouseUpPreDrag: NullHandler
15
+ };
16
+ const mouseType = (name) => name.startsWith("mouseMove") ? "mousemove" : "mouseup";
17
+ const DRAG_THRESHOLD = 5;
18
+ const useCellBlockSelection = ({
19
+ allowCellBlockSelection,
20
+ columnCount = 0,
21
+ containerRef,
22
+ focusCell,
23
+ onSelectCellBlock,
24
+ rowCount = 0
25
+ }) => {
26
+ const [cellBlock, setCellBlock] = useState(null);
27
+ const stateRef = useRef(refState);
28
+ const handlersRef = useRef(mouseHandlers);
29
+ const handleCopy = useCallback(async () => {
30
+ const { startCell, endCell } = stateRef.current;
31
+ if (startCell && endCell) {
32
+ const tsvText = getTextFromCells(startCell, endCell);
33
+ const type = "text/plain";
34
+ const blob = new Blob([tsvText], { type });
35
+ const data = [new ClipboardItem({ [type]: blob })];
36
+ await navigator.clipboard.write(data);
37
+ }
38
+ }, []);
39
+ const cellBlockRef = useCallback((el) => {
40
+ stateRef.current.cellBlock = el;
41
+ }, []);
42
+ const createCellBlock = useCallback(
43
+ (method = "mouse") => {
44
+ const { startBox, startCell } = stateRef.current;
45
+ if (startCell) {
46
+ const table = queryClosest(startCell, ".vuuTable");
47
+ if (table) {
48
+ table.classList.add(`vuu-cellblock-select-in-progress-${method}`);
49
+ }
50
+ setElementBox(startCell, startBox);
51
+ startCell.classList.add("vuu-cellblock-start");
52
+ setCellBlock(/* @__PURE__ */ jsx(CellBlock, { onCopy: handleCopy, ref: cellBlockRef }));
53
+ }
54
+ },
55
+ [cellBlockRef, handleCopy]
56
+ );
57
+ const initializeStateRef = useCallback(() => {
58
+ const { cellBlock: cellBlock2, cellBlockClassName, startCell, endCell } = stateRef.current;
59
+ if (startCell) {
60
+ startCell.classList.remove("vuu-cellblock-start");
61
+ }
62
+ if (endCell) {
63
+ endCell.classList.remove("vuu-cellblock-end");
64
+ }
65
+ if (cellBlock2?.classList.contains(cellBlockClassName)) {
66
+ cellBlock2.classList.remove(cellBlockClassName);
67
+ }
68
+ const { endBox, startBox } = refState;
69
+ stateRef.current = {
70
+ ...refState,
71
+ cellBlock: cellBlock2,
72
+ endBox: { ...endBox },
73
+ endPos: [-1, -1],
74
+ startBox: { ...startBox },
75
+ startPos: [-1, -1]
76
+ };
77
+ }, []);
78
+ const addMouseListener = useCallback(
79
+ (mouseOperation, handler) => {
80
+ window.addEventListener(mouseType(mouseOperation), handler);
81
+ handlersRef.current[mouseOperation] = handler;
82
+ },
83
+ []
84
+ );
85
+ const removeMouseListener = useCallback((name) => {
86
+ window.removeEventListener(mouseType(name), handlersRef.current[name]);
87
+ }, []);
88
+ handlersRef.current.mouseMove = useCallback((evt) => {
89
+ const { clientX: x, clientY: y } = evt;
90
+ const { endBox, startBox } = stateRef.current;
91
+ if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {
92
+ const cell = queryClosest(
93
+ evt.target,
94
+ ".vuuTableCell, .vuuCellBlock"
95
+ );
96
+ if (cell?.classList.contains("vuuTableCell")) {
97
+ setElementBox(cell, endBox);
98
+ stateRef.current.endCell = cell;
99
+ updateCellBlockClassName(stateRef.current);
100
+ }
101
+ }
102
+ }, []);
103
+ handlersRef.current.mouseUp = useCallback(
104
+ (evt) => {
105
+ removeMouseListener("mouseMove");
106
+ removeMouseListener("mouseUp");
107
+ const { cellBlock: cellBlock2, endCell, startCell } = stateRef.current;
108
+ const table = queryClosest(evt.target, ".vuuTable");
109
+ endCell?.classList.add("vuu-cellblock-end");
110
+ if (table) {
111
+ table.classList.remove("vuu-cellblock-select-in-progress-mouse");
112
+ }
113
+ if (startCell && endCell) {
114
+ const tableCellBlock = getTableCellBlock(startCell, endCell);
115
+ onSelectCellBlock?.(tableCellBlock);
116
+ }
117
+ if (cellBlock2) {
118
+ cellBlock2.focus();
119
+ }
120
+ },
121
+ [onSelectCellBlock, removeMouseListener]
122
+ );
123
+ handlersRef.current.mouseMovePreDrag = useCallback(
124
+ (evt) => {
125
+ const { current: state } = stateRef;
126
+ const { mouseStartX, mouseStartY } = state;
127
+ const x = state.mousePosX = evt.clientX;
128
+ const y = state.mousePosY = evt.clientY;
129
+ const distance = Math.max(
130
+ Math.abs(x - mouseStartX),
131
+ Math.abs(y - mouseStartY)
132
+ );
133
+ if (distance > DRAG_THRESHOLD) {
134
+ createCellBlock("mouse");
135
+ const { mouseMove, mouseUp } = handlersRef.current;
136
+ removeMouseListener("mouseMovePreDrag");
137
+ removeMouseListener("mouseUpPreDrag");
138
+ addMouseListener("mouseMove", mouseMove);
139
+ addMouseListener("mouseUp", mouseUp);
140
+ }
141
+ },
142
+ [addMouseListener, createCellBlock, removeMouseListener]
143
+ );
144
+ handlersRef.current.mouseUpPreDrag = useCallback(() => {
145
+ removeMouseListener("mouseMovePreDrag");
146
+ removeMouseListener("mouseUpPreDrag");
147
+ }, [removeMouseListener]);
148
+ const handleMouseDown = useCallback(
149
+ (evt) => {
150
+ initializeStateRef();
151
+ const { current: state } = stateRef;
152
+ const cell = queryClosest(evt.target, ".vuuTableCell");
153
+ if (cell) {
154
+ state.startCell = cell;
155
+ state.mouseStartX = evt.clientX;
156
+ state.mouseStartY = evt.clientY;
157
+ const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;
158
+ addMouseListener("mouseMovePreDrag", mouseMovePreDrag);
159
+ addMouseListener("mouseUpPreDrag", mouseUpPreDrag);
160
+ }
161
+ },
162
+ [addMouseListener, initializeStateRef]
163
+ );
164
+ const nativeKeyDownHandlerRef = useRef(NullHandler);
165
+ const handleNativeKeyUp = useCallback((evt) => {
166
+ if (evt.key === "Shift") {
167
+ const { endCell } = stateRef.current;
168
+ const table = queryClosest(evt.target, ".vuuTable");
169
+ endCell?.classList.add("vuu-cellblock-end");
170
+ if (table) {
171
+ table.classList.remove("vuu-cellblock-select-in-progress-keyboard");
172
+ }
173
+ window.removeEventListener("keydown", nativeKeyDownHandlerRef.current, {
174
+ capture: true
175
+ });
176
+ window.removeEventListener("keyup", handleNativeKeyUp, {
177
+ capture: true
178
+ });
179
+ }
180
+ }, []);
181
+ const handleNativeKeyDown = nativeKeyDownHandlerRef.current = useCallback(
182
+ ({ key }) => {
183
+ if (isArrowKey(key)) {
184
+ const { endBox, endPos, startBox } = stateRef.current;
185
+ if (isNullCellBox(startBox)) {
186
+ createCellBlock("keyboard");
187
+ }
188
+ const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);
189
+ stateRef.current.endPos = nextCell;
190
+ focusCell(nextCell);
191
+ const cell = getTableCell(containerRef, nextCell);
192
+ stateRef.current.endCell = cell;
193
+ setElementBox(cell, endBox);
194
+ updateCellBlockClassName(stateRef.current);
195
+ }
196
+ },
197
+ [columnCount, containerRef, createCellBlock, focusCell, rowCount]
198
+ );
199
+ const handleKeyDown = useCallback(
200
+ (evt) => {
201
+ if (evt.key === "Shift") {
202
+ initializeStateRef();
203
+ const cell = queryClosest(evt.target, ".vuuTableCell");
204
+ if (cell) {
205
+ const startPos = getTableCellPos(cell);
206
+ stateRef.current.startPos = startPos;
207
+ stateRef.current.endPos = clone(startPos);
208
+ const { current: state } = stateRef;
209
+ state.startCell = cell;
210
+ window.addEventListener("keydown", handleNativeKeyDown, {
211
+ capture: true
212
+ });
213
+ window.addEventListener("keyup", handleNativeKeyUp, {
214
+ capture: true
215
+ });
216
+ evt.preventDefault();
217
+ }
218
+ }
219
+ },
220
+ [handleNativeKeyDown, handleNativeKeyUp, initializeStateRef]
221
+ );
222
+ return {
223
+ cellBlock,
224
+ onKeyDown: allowCellBlockSelection ? handleKeyDown : void 0,
225
+ onMouseDown: allowCellBlockSelection ? handleMouseDown : void 0
226
+ };
227
+ };
228
+
229
+ export { useCellBlockSelection };
230
+ //# sourceMappingURL=useCellBlockSelection.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCellBlockSelection.js","sources":["../../src/cell-block/useCellBlockSelection.tsx"],"sourcesContent":["import { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n RefCallback,\n RefObject,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n getNextCellPos,\n getTableCell,\n getTableCellPos,\n} from \"../table-dom-utils\";\nimport { FocusCell } from \"../useCellFocus\";\nimport { CellBlock } from \"./CellBlock\";\nimport {\n PosTuple,\n RefState,\n TableCellBlock,\n getTableCellBlock,\n getTextFromCells,\n isNullCellBox,\n outsideBox,\n refState,\n setElementBox,\n updateCellBlockClassName,\n} from \"./cellblock-utils\";\n\nconst clone = (posTuple: PosTuple) => posTuple.slice() as PosTuple;\n\ntype NativeKeyboardHandler = (evt: KeyboardEvent) => void;\ntype NativeMouseHandler = (evt: MouseEvent) => void;\ntype MouseHandlers = {\n mouseMove: NativeMouseHandler;\n mouseMovePreDrag: NativeMouseHandler;\n mouseUp: NativeMouseHandler;\n mouseUpPreDrag: NativeMouseHandler;\n};\n\nconst NullHandler = () => console.error(\"no handler installed\");\nconst mouseHandlers: MouseHandlers = {\n mouseMove: NullHandler,\n mouseMovePreDrag: NullHandler,\n mouseUp: NullHandler,\n mouseUpPreDrag: NullHandler,\n};\n\ntype MouseOperation = keyof typeof mouseHandlers;\n\nconst mouseType = (name: string) =>\n name.startsWith(\"mouseMove\") ? \"mousemove\" : \"mouseup\";\n\nconst DRAG_THRESHOLD = 5;\n\nexport interface CellblockSelectionHookProps {\n allowCellBlockSelection?: boolean;\n columnCount?: number;\n containerRef: RefObject<HTMLElement>;\n focusCell: FocusCell;\n onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n rowCount?: number;\n}\n\nexport const useCellBlockSelection = ({\n allowCellBlockSelection,\n columnCount = 0,\n containerRef,\n focusCell,\n onSelectCellBlock,\n rowCount = 0,\n}: CellblockSelectionHookProps) => {\n const [cellBlock, setCellBlock] = useState<ReactElement | null>(null);\n const stateRef = useRef<RefState>(refState);\n const handlersRef = useRef<MouseHandlers>(mouseHandlers);\n\n const handleCopy = useCallback(async () => {\n const { startCell, endCell } = stateRef.current;\n if (startCell && endCell) {\n const tsvText = getTextFromCells(startCell, endCell);\n const type = \"text/plain\";\n const blob = new Blob([tsvText], { type });\n const data = [new ClipboardItem({ [type]: blob })];\n await navigator.clipboard.write(data);\n }\n }, []);\n\n const cellBlockRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n stateRef.current.cellBlock = el;\n }, []);\n\n const createCellBlock = useCallback(\n (method: \"mouse\" | \"keyboard\" = \"mouse\") => {\n const { startBox, startCell } = stateRef.current;\n if (startCell) {\n const table = queryClosest<HTMLDivElement>(startCell, \".vuuTable\");\n if (table) {\n table.classList.add(`vuu-cellblock-select-in-progress-${method}`);\n }\n setElementBox(startCell, startBox);\n startCell.classList.add(\"vuu-cellblock-start\");\n setCellBlock(<CellBlock onCopy={handleCopy} ref={cellBlockRef} />);\n }\n },\n [cellBlockRef, handleCopy],\n );\n\n const initializeStateRef = useCallback(() => {\n const { cellBlock, cellBlockClassName, startCell, endCell } =\n stateRef.current;\n if (startCell) {\n startCell.classList.remove(\"vuu-cellblock-start\");\n }\n if (endCell) {\n endCell.classList.remove(\"vuu-cellblock-end\");\n }\n if (cellBlock?.classList.contains(cellBlockClassName)) {\n cellBlock.classList.remove(cellBlockClassName);\n }\n\n const { endBox, startBox } = refState;\n\n stateRef.current = {\n ...refState,\n cellBlock,\n endBox: { ...endBox },\n endPos: [-1, -1],\n startBox: { ...startBox },\n startPos: [-1, -1],\n };\n }, []);\n\n const addMouseListener = useCallback(\n (mouseOperation: MouseOperation, handler: NativeMouseHandler) => {\n window.addEventListener(mouseType(mouseOperation), handler);\n handlersRef.current[mouseOperation] = handler;\n },\n [],\n );\n\n const removeMouseListener = useCallback((name: MouseOperation) => {\n window.removeEventListener(mouseType(name), handlersRef.current[name]);\n }, []);\n\n handlersRef.current.mouseMove = useCallback((evt: MouseEvent) => {\n const { clientX: x, clientY: y } = evt;\n const { endBox, startBox } = stateRef.current;\n if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {\n const cell = queryClosest<HTMLDivElement>(\n evt.target,\n \".vuuTableCell, .vuuCellBlock\",\n );\n if (cell?.classList.contains(\"vuuTableCell\")) {\n setElementBox(cell, endBox);\n stateRef.current.endCell = cell;\n updateCellBlockClassName(stateRef.current);\n }\n }\n }, []);\n\n handlersRef.current.mouseUp = useCallback(\n (evt: MouseEvent) => {\n removeMouseListener(\"mouseMove\");\n removeMouseListener(\"mouseUp\");\n\n const { cellBlock, endCell, startCell } = stateRef.current;\n\n const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n endCell?.classList.add(\"vuu-cellblock-end\");\n if (table) {\n table.classList.remove(\"vuu-cellblock-select-in-progress-mouse\");\n }\n\n if (startCell && endCell) {\n const tableCellBlock = getTableCellBlock(startCell, endCell);\n onSelectCellBlock?.(tableCellBlock);\n }\n\n if (cellBlock) {\n cellBlock.focus();\n }\n },\n [onSelectCellBlock, removeMouseListener],\n );\n\n handlersRef.current.mouseMovePreDrag = useCallback(\n (evt: MouseEvent) => {\n const { current: state } = stateRef;\n const { mouseStartX, mouseStartY } = state;\n\n const x = (state.mousePosX = evt.clientX);\n const y = (state.mousePosY = evt.clientY);\n\n const distance = Math.max(\n Math.abs(x - mouseStartX),\n Math.abs(y - mouseStartY),\n );\n\n if (distance > DRAG_THRESHOLD) {\n createCellBlock(\"mouse\");\n\n const { mouseMove, mouseUp } = handlersRef.current;\n removeMouseListener(\"mouseMovePreDrag\");\n removeMouseListener(\"mouseUpPreDrag\");\n addMouseListener(\"mouseMove\", mouseMove);\n addMouseListener(\"mouseUp\", mouseUp);\n }\n },\n [addMouseListener, createCellBlock, removeMouseListener],\n );\n\n handlersRef.current.mouseUpPreDrag = useCallback(() => {\n removeMouseListener(\"mouseMovePreDrag\");\n removeMouseListener(\"mouseUpPreDrag\");\n }, [removeMouseListener]);\n\n const handleMouseDown = useCallback<MouseEventHandler>(\n (evt) => {\n initializeStateRef();\n const { current: state } = stateRef;\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n state.startCell = cell;\n state.mouseStartX = evt.clientX;\n state.mouseStartY = evt.clientY;\n\n const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;\n addMouseListener(\"mouseMovePreDrag\", mouseMovePreDrag);\n addMouseListener(\"mouseUpPreDrag\", mouseUpPreDrag);\n }\n },\n [addMouseListener, initializeStateRef],\n );\n\n const nativeKeyDownHandlerRef = useRef<NativeKeyboardHandler>(NullHandler);\n\n const handleNativeKeyUp = useCallback((evt: KeyboardEvent) => {\n if (evt.key === \"Shift\") {\n const { endCell } = stateRef.current;\n const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n endCell?.classList.add(\"vuu-cellblock-end\");\n if (table) {\n table.classList.remove(\"vuu-cellblock-select-in-progress-keyboard\");\n }\n\n window.removeEventListener(\"keydown\", nativeKeyDownHandlerRef.current, {\n capture: true,\n });\n window.removeEventListener(\"keyup\", handleNativeKeyUp, {\n capture: true,\n });\n }\n }, []);\n const handleNativeKeyDown = (nativeKeyDownHandlerRef.current = useCallback(\n ({ key }: KeyboardEvent) => {\n if (isArrowKey(key)) {\n const { endBox, endPos, startBox } = stateRef.current;\n if (isNullCellBox(startBox)) {\n createCellBlock(\"keyboard\");\n }\n const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);\n stateRef.current.endPos = nextCell;\n focusCell(nextCell);\n const cell = getTableCell(containerRef, nextCell);\n stateRef.current.endCell = cell as HTMLDivElement;\n setElementBox(cell, endBox);\n updateCellBlockClassName(stateRef.current);\n }\n },\n [columnCount, containerRef, createCellBlock, focusCell, rowCount],\n ));\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (evt) => {\n if (evt.key === \"Shift\") {\n initializeStateRef();\n const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n if (cell) {\n const startPos = getTableCellPos(cell);\n stateRef.current.startPos = startPos;\n stateRef.current.endPos = clone(startPos);\n const { current: state } = stateRef;\n state.startCell = cell;\n\n window.addEventListener(\"keydown\", handleNativeKeyDown, {\n capture: true,\n });\n window.addEventListener(\"keyup\", handleNativeKeyUp, {\n capture: true,\n });\n\n evt.preventDefault();\n }\n }\n },\n [handleNativeKeyDown, handleNativeKeyUp, initializeStateRef],\n );\n\n return {\n cellBlock,\n onKeyDown: allowCellBlockSelection ? handleKeyDown : undefined,\n onMouseDown: allowCellBlockSelection ? handleMouseDown : undefined,\n };\n};\n"],"names":["cellBlock"],"mappings":";;;;;;;AA+BA,MAAM,KAAQ,GAAA,CAAC,QAAuB,KAAA,QAAA,CAAS,KAAM,EAAA,CAAA;AAWrD,MAAM,WAAc,GAAA,MAAM,OAAQ,CAAA,KAAA,CAAM,sBAAsB,CAAA,CAAA;AAC9D,MAAM,aAA+B,GAAA;AAAA,EACnC,SAAW,EAAA,WAAA;AAAA,EACX,gBAAkB,EAAA,WAAA;AAAA,EAClB,OAAS,EAAA,WAAA;AAAA,EACT,cAAgB,EAAA,WAAA;AAClB,CAAA,CAAA;AAIA,MAAM,YAAY,CAAC,IAAA,KACjB,KAAK,UAAW,CAAA,WAAW,IAAI,WAAc,GAAA,SAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,CAAA,CAAA;AAWhB,MAAM,wBAAwB,CAAC;AAAA,EACpC,uBAAA;AAAA,EACA,WAAc,GAAA,CAAA;AAAA,EACd,YAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAW,GAAA,CAAA;AACb,CAAmC,KAAA;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA8B,IAAI,CAAA,CAAA;AACpE,EAAM,MAAA,QAAA,GAAW,OAAiB,QAAQ,CAAA,CAAA;AAC1C,EAAM,MAAA,WAAA,GAAc,OAAsB,aAAa,CAAA,CAAA;AAEvD,EAAM,MAAA,UAAA,GAAa,YAAY,YAAY;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,OAAQ,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AACxC,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAM,MAAA,OAAA,GAAU,gBAAiB,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AACnD,MAAA,MAAM,IAAO,GAAA,YAAA,CAAA;AACb,MAAM,MAAA,IAAA,GAAO,IAAI,IAAK,CAAA,CAAC,OAAO,CAAG,EAAA,EAAE,MAAM,CAAA,CAAA;AACzC,MAAM,MAAA,IAAA,GAAO,CAAC,IAAI,aAAc,CAAA,EAAE,CAAC,IAAI,GAAG,IAAK,EAAC,CAAC,CAAA,CAAA;AACjD,MAAM,MAAA,SAAA,CAAU,SAAU,CAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AAAA,KACtC;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,YAAA,GAAe,WAAyC,CAAA,CAAC,EAAO,KAAA;AACpE,IAAA,QAAA,CAAS,QAAQ,SAAY,GAAA,EAAA,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,SAA+B,OAAY,KAAA;AAC1C,MAAA,MAAM,EAAE,QAAA,EAAU,SAAU,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AACzC,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,YAA6B,CAAA,SAAA,EAAW,WAAW,CAAA,CAAA;AACjE,QAAA,IAAI,KAAO,EAAA;AACT,UAAA,KAAA,CAAM,SAAU,CAAA,GAAA,CAAI,CAAoC,iCAAA,EAAA,MAAM,CAAE,CAAA,CAAA,CAAA;AAAA,SAClE;AACA,QAAA,aAAA,CAAc,WAAW,QAAQ,CAAA,CAAA;AACjC,QAAU,SAAA,CAAA,SAAA,CAAU,IAAI,qBAAqB,CAAA,CAAA;AAC7C,QAAA,YAAA,qBAAc,SAAU,EAAA,EAAA,MAAA,EAAQ,UAAY,EAAA,GAAA,EAAK,cAAc,CAAE,CAAA,CAAA;AAAA,OACnE;AAAA,KACF;AAAA,IACA,CAAC,cAAc,UAAU,CAAA;AAAA,GAC3B,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAA,MAAM,EAAE,SAAAA,EAAAA,UAAAA,EAAW,oBAAoB,SAAW,EAAA,OAAA,KAChD,QAAS,CAAA,OAAA,CAAA;AACX,IAAA,IAAI,SAAW,EAAA;AACb,MAAU,SAAA,CAAA,SAAA,CAAU,OAAO,qBAAqB,CAAA,CAAA;AAAA,KAClD;AACA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,SAAA,CAAU,OAAO,mBAAmB,CAAA,CAAA;AAAA,KAC9C;AACA,IAAA,IAAIA,UAAW,EAAA,SAAA,CAAU,QAAS,CAAA,kBAAkB,CAAG,EAAA;AACrD,MAAAA,UAAAA,CAAU,SAAU,CAAA,MAAA,CAAO,kBAAkB,CAAA,CAAA;AAAA,KAC/C;AAEA,IAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AAE7B,IAAA,QAAA,CAAS,OAAU,GAAA;AAAA,MACjB,GAAG,QAAA;AAAA,MACH,SAAAA,EAAAA,UAAAA;AAAA,MACA,MAAA,EAAQ,EAAE,GAAG,MAAO,EAAA;AAAA,MACpB,MAAA,EAAQ,CAAC,CAAA,CAAA,EAAI,CAAE,CAAA,CAAA;AAAA,MACf,QAAA,EAAU,EAAE,GAAG,QAAS,EAAA;AAAA,MACxB,QAAA,EAAU,CAAC,CAAA,CAAA,EAAI,CAAE,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,gBAAgC,OAAgC,KAAA;AAC/D,MAAA,MAAA,CAAO,gBAAiB,CAAA,SAAA,CAAU,cAAc,CAAA,EAAG,OAAO,CAAA,CAAA;AAC1D,MAAY,WAAA,CAAA,OAAA,CAAQ,cAAc,CAAI,GAAA,OAAA,CAAA;AAAA,KACxC;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,WAAY,CAAA,CAAC,IAAyB,KAAA;AAChE,IAAA,MAAA,CAAO,oBAAoB,SAAU,CAAA,IAAI,GAAG,WAAY,CAAA,OAAA,CAAQ,IAAI,CAAC,CAAA,CAAA;AAAA,GACvE,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,WAAA,CAAY,OAAQ,CAAA,SAAA,GAAY,WAAY,CAAA,CAAC,GAAoB,KAAA;AAC/D,IAAA,MAAM,EAAE,OAAA,EAAS,CAAG,EAAA,OAAA,EAAS,GAAM,GAAA,GAAA,CAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAS,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AACtC,IAAI,IAAA,UAAA,CAAW,UAAU,CAAG,EAAA,CAAC,KAAK,UAAW,CAAA,MAAA,EAAQ,CAAG,EAAA,CAAC,CAAG,EAAA;AAC1D,MAAA,MAAM,IAAO,GAAA,YAAA;AAAA,QACX,GAAI,CAAA,MAAA;AAAA,QACJ,8BAAA;AAAA,OACF,CAAA;AACA,MAAA,IAAI,IAAM,EAAA,SAAA,CAAU,QAAS,CAAA,cAAc,CAAG,EAAA;AAC5C,QAAA,aAAA,CAAc,MAAM,MAAM,CAAA,CAAA;AAC1B,QAAA,QAAA,CAAS,QAAQ,OAAU,GAAA,IAAA,CAAA;AAC3B,QAAA,wBAAA,CAAyB,SAAS,OAAO,CAAA,CAAA;AAAA,OAC3C;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,WAAA,CAAY,QAAQ,OAAU,GAAA,WAAA;AAAA,IAC5B,CAAC,GAAoB,KAAA;AACnB,MAAA,mBAAA,CAAoB,WAAW,CAAA,CAAA;AAC/B,MAAA,mBAAA,CAAoB,SAAS,CAAA,CAAA;AAE7B,MAAA,MAAM,EAAE,SAAAA,EAAAA,UAAAA,EAAW,OAAS,EAAA,SAAA,KAAc,QAAS,CAAA,OAAA,CAAA;AAEnD,MAAA,MAAM,KAAQ,GAAA,YAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,WAAW,CAAA,CAAA;AAClE,MAAS,OAAA,EAAA,SAAA,CAAU,IAAI,mBAAmB,CAAA,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,KAAA,CAAA,SAAA,CAAU,OAAO,wCAAwC,CAAA,CAAA;AAAA,OACjE;AAEA,MAAA,IAAI,aAAa,OAAS,EAAA;AACxB,QAAM,MAAA,cAAA,GAAiB,iBAAkB,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AAC3D,QAAA,iBAAA,GAAoB,cAAc,CAAA,CAAA;AAAA,OACpC;AAEA,MAAA,IAAIA,UAAW,EAAA;AACb,QAAAA,WAAU,KAAM,EAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,mBAAmB,CAAA;AAAA,GACzC,CAAA;AAEA,EAAA,WAAA,CAAY,QAAQ,gBAAmB,GAAA,WAAA;AAAA,IACrC,CAAC,GAAoB,KAAA;AACnB,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,MAAM,MAAA,EAAE,WAAa,EAAA,WAAA,EAAgB,GAAA,KAAA,CAAA;AAErC,MAAM,MAAA,CAAA,GAAK,KAAM,CAAA,SAAA,GAAY,GAAI,CAAA,OAAA,CAAA;AACjC,MAAM,MAAA,CAAA,GAAK,KAAM,CAAA,SAAA,GAAY,GAAI,CAAA,OAAA,CAAA;AAEjC,MAAA,MAAM,WAAW,IAAK,CAAA,GAAA;AAAA,QACpB,IAAA,CAAK,GAAI,CAAA,CAAA,GAAI,WAAW,CAAA;AAAA,QACxB,IAAA,CAAK,GAAI,CAAA,CAAA,GAAI,WAAW,CAAA;AAAA,OAC1B,CAAA;AAEA,MAAA,IAAI,WAAW,cAAgB,EAAA;AAC7B,QAAA,eAAA,CAAgB,OAAO,CAAA,CAAA;AAEvB,QAAA,MAAM,EAAE,SAAA,EAAW,OAAQ,EAAA,GAAI,WAAY,CAAA,OAAA,CAAA;AAC3C,QAAA,mBAAA,CAAoB,kBAAkB,CAAA,CAAA;AACtC,QAAA,mBAAA,CAAoB,gBAAgB,CAAA,CAAA;AACpC,QAAA,gBAAA,CAAiB,aAAa,SAAS,CAAA,CAAA;AACvC,QAAA,gBAAA,CAAiB,WAAW,OAAO,CAAA,CAAA;AAAA,OACrC;AAAA,KACF;AAAA,IACA,CAAC,gBAAkB,EAAA,eAAA,EAAiB,mBAAmB,CAAA;AAAA,GACzD,CAAA;AAEA,EAAY,WAAA,CAAA,OAAA,CAAQ,cAAiB,GAAA,WAAA,CAAY,MAAM;AACrD,IAAA,mBAAA,CAAoB,kBAAkB,CAAA,CAAA;AACtC,IAAA,mBAAA,CAAoB,gBAAgB,CAAA,CAAA;AAAA,GACtC,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,GAAQ,KAAA;AACP,MAAmB,kBAAA,EAAA,CAAA;AACnB,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,MAAA,MAAM,IAAO,GAAA,YAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,eAAe,CAAA,CAAA;AACrE,MAAA,IAAI,IAAM,EAAA;AACR,QAAA,KAAA,CAAM,SAAY,GAAA,IAAA,CAAA;AAClB,QAAA,KAAA,CAAM,cAAc,GAAI,CAAA,OAAA,CAAA;AACxB,QAAA,KAAA,CAAM,cAAc,GAAI,CAAA,OAAA,CAAA;AAExB,QAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,WAAY,CAAA,OAAA,CAAA;AACzD,QAAA,gBAAA,CAAiB,oBAAoB,gBAAgB,CAAA,CAAA;AACrD,QAAA,gBAAA,CAAiB,kBAAkB,cAAc,CAAA,CAAA;AAAA,OACnD;AAAA,KACF;AAAA,IACA,CAAC,kBAAkB,kBAAkB,CAAA;AAAA,GACvC,CAAA;AAEA,EAAM,MAAA,uBAAA,GAA0B,OAA8B,WAAW,CAAA,CAAA;AAEzE,EAAM,MAAA,iBAAA,GAAoB,WAAY,CAAA,CAAC,GAAuB,KAAA;AAC5D,IAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,MAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AAC7B,MAAA,MAAM,KAAQ,GAAA,YAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,WAAW,CAAA,CAAA;AAClE,MAAS,OAAA,EAAA,SAAA,CAAU,IAAI,mBAAmB,CAAA,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,KAAA,CAAA,SAAA,CAAU,OAAO,2CAA2C,CAAA,CAAA;AAAA,OACpE;AAEA,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,uBAAA,CAAwB,OAAS,EAAA;AAAA,QACrE,OAAS,EAAA,IAAA;AAAA,OACV,CAAA,CAAA;AACD,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAS,iBAAmB,EAAA;AAAA,QACrD,OAAS,EAAA,IAAA;AAAA,OACV,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AACL,EAAM,MAAA,mBAAA,GAAuB,wBAAwB,OAAU,GAAA,WAAA;AAAA,IAC7D,CAAC,EAAE,GAAA,EAAyB,KAAA;AAC1B,MAAI,IAAA,UAAA,CAAW,GAAG,CAAG,EAAA;AACnB,QAAA,MAAM,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,KAAa,QAAS,CAAA,OAAA,CAAA;AAC9C,QAAI,IAAA,aAAA,CAAc,QAAQ,CAAG,EAAA;AAC3B,UAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAAA,SAC5B;AACA,QAAA,MAAM,QAAW,GAAA,cAAA,CAAe,GAAK,EAAA,MAAA,EAAQ,aAAa,QAAQ,CAAA,CAAA;AAClE,QAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,QAAA,CAAA;AAC1B,QAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAClB,QAAM,MAAA,IAAA,GAAO,YAAa,CAAA,YAAA,EAAc,QAAQ,CAAA,CAAA;AAChD,QAAA,QAAA,CAAS,QAAQ,OAAU,GAAA,IAAA,CAAA;AAC3B,QAAA,aAAA,CAAc,MAAM,MAAM,CAAA,CAAA;AAC1B,QAAA,wBAAA,CAAyB,SAAS,OAAO,CAAA,CAAA;AAAA,OAC3C;AAAA,KACF;AAAA,IACA,CAAC,WAAA,EAAa,YAAc,EAAA,eAAA,EAAiB,WAAW,QAAQ,CAAA;AAAA,GAClE,CAAA;AACA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAmB,kBAAA,EAAA,CAAA;AACnB,QAAA,MAAM,IAAO,GAAA,YAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,eAAe,CAAA,CAAA;AACrE,QAAA,IAAI,IAAM,EAAA;AACR,UAAM,MAAA,QAAA,GAAW,gBAAgB,IAAI,CAAA,CAAA;AACrC,UAAA,QAAA,CAAS,QAAQ,QAAW,GAAA,QAAA,CAAA;AAC5B,UAAS,QAAA,CAAA,OAAA,CAAQ,MAAS,GAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AACxC,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,UAAA,KAAA,CAAM,SAAY,GAAA,IAAA,CAAA;AAElB,UAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,mBAAqB,EAAA;AAAA,YACtD,OAAS,EAAA,IAAA;AAAA,WACV,CAAA,CAAA;AACD,UAAO,MAAA,CAAA,gBAAA,CAAiB,SAAS,iBAAmB,EAAA;AAAA,YAClD,OAAS,EAAA,IAAA;AAAA,WACV,CAAA,CAAA;AAED,UAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AAAA,SACrB;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,iBAAA,EAAmB,kBAAkB,CAAA;AAAA,GAC7D,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,SAAA,EAAW,0BAA0B,aAAgB,GAAA,KAAA,CAAA;AAAA,IACrD,WAAA,EAAa,0BAA0B,eAAkB,GAAA,KAAA,CAAA;AAAA,GAC3D,CAAA;AACF;;;;"}
package/esm/index.js CHANGED
@@ -11,7 +11,8 @@ export { TableGroupCell } from './table-cell/TableGroupCell.js';
11
11
  export { updateTableConfig } from './table-config.js';
12
12
  export { HeaderProvider, useHeaderProps } from './table-header/HeaderProvider.js';
13
13
  export { TableHeader } from './table-header/TableHeader.js';
14
- export { useControlledTableNavigation } from './useControlledTableNavigation.js';
14
+ export { isRowSelectionKey, useControlledTableNavigation } from './useControlledTableNavigation.js';
15
+ export { isNavigationKey, isPagingKey, useKeyboardNavigation } from './useKeyboardNavigation.js';
15
16
  export { isShowColumnSettings, isShowTableSettings, useTableModel } from './useTableModel.js';
16
17
  export { noScrolling, useTableScroll } from './useTableScroll.js';
17
18
  export { useTableViewport } from './useTableViewport.js';
package/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
@@ -1,28 +1,36 @@
1
1
  import { WindowRange, isRowSelectedLast, metadataKeys } from '@vuu-ui/vuu-utils';
2
2
 
3
3
  var __defProp = Object.defineProperty;
4
+ var __typeError = (msg) => {
5
+ throw TypeError(msg);
6
+ };
4
7
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
5
8
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
9
+ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
10
+ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
11
+ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
12
+ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
13
+ var _range;
6
14
  const { SELECTED } = metadataKeys;
7
15
  class MovingWindow {
8
16
  constructor({ from, to }) {
9
17
  __publicField(this, "data");
10
18
  __publicField(this, "rowCount", 0);
11
- __publicField(this, "range");
19
+ __privateAdd(this, _range);
12
20
  __publicField(this, "setRowCount", (rowCount) => {
13
21
  if (rowCount < this.data.length) {
14
22
  this.data.length = rowCount;
15
23
  }
16
24
  this.rowCount = rowCount;
17
25
  });
18
- this.range = new WindowRange(from, to);
26
+ __privateSet(this, _range, new WindowRange(from, to));
19
27
  this.data = new Array(Math.max(0, to - from));
20
28
  this.rowCount = 0;
21
29
  }
22
30
  add(data) {
23
31
  const [index] = data;
24
32
  if (this.isWithinRange(index)) {
25
- const internalIndex = index - this.range.from;
33
+ const internalIndex = index - __privateGet(this, _range).from;
26
34
  this.data[internalIndex] = data;
27
35
  if (data[SELECTED]) {
28
36
  const previousRow = this.data[internalIndex - 1];
@@ -34,14 +42,14 @@ class MovingWindow {
34
42
  }
35
43
  }
36
44
  getAtIndex(index) {
37
- return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
45
+ return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
38
46
  }
39
47
  isWithinRange(index) {
40
- return this.range.isWithin(index);
48
+ return __privateGet(this, _range).isWithin(index);
41
49
  }
42
50
  setRange({ from, to }) {
43
- if (from !== this.range.from || to !== this.range.to) {
44
- const [overlapFrom, overlapTo] = this.range.overlap(from, to);
51
+ if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
52
+ const [overlapFrom, overlapTo] = __privateGet(this, _range).overlap(from, to);
45
53
  const newData = new Array(Math.max(0, to - from));
46
54
  for (let i = overlapFrom; i < overlapTo; i++) {
47
55
  const data = this.getAtIndex(i);
@@ -51,14 +59,18 @@ class MovingWindow {
51
59
  }
52
60
  }
53
61
  this.data = newData;
54
- this.range.from = from;
55
- this.range.to = to;
62
+ __privateGet(this, _range).from = from;
63
+ __privateGet(this, _range).to = to;
56
64
  }
57
65
  }
58
66
  getSelectedRows() {
59
67
  return this.data.filter((row) => row[SELECTED] !== 0);
60
68
  }
69
+ get range() {
70
+ return __privateGet(this, _range);
71
+ }
61
72
  }
73
+ _range = new WeakMap();
62
74
 
63
75
  export { MovingWindow };
64
76
  //# sourceMappingURL=moving-window.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n private range: WindowRange;\n\n constructor({ from, to }: VuuRange) {\n this.range = new WindowRange(from, to);\n //internal data is always 0 based, we add range.from to determine an offset\n this.data = new Array(Math.max(0, to - from));\n this.rowCount = 0;\n }\n\n setRowCount = (rowCount: number) => {\n if (rowCount < this.data.length) {\n this.data.length = rowCount;\n }\n\n this.rowCount = rowCount;\n };\n\n add(data: DataSourceRow) {\n const [index] = data;\n if (this.isWithinRange(index)) {\n const internalIndex = index - this.range.from;\n this.data[internalIndex] = data;\n\n // Hack until we can deal with this more elegantly. When we have a block\n // select operation, first row is selected (and updated via server), then\n // remaining rows are selected when we select the block-end row. We get an\n // update for all rows except first. Because we're extending the select status\n // on the client, we have to adjust the first row selected (its still selected\n // but is no longer the 'last selected row in block')\n // Maybe answer is to apply ALL the selection status code here, not in Viewport\n if (data[SELECTED]) {\n const previousRow = this.data[internalIndex - 1];\n if (isRowSelectedLast(previousRow)) {\n this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n this.data[internalIndex - 1][SELECTED] -= 4;\n }\n }\n }\n }\n\n getAtIndex(index: number) {\n return this.range.isWithin(index) &&\n this.data[index - this.range.from] != null\n ? this.data[index - this.range.from]\n : undefined;\n }\n\n isWithinRange(index: number) {\n return this.range.isWithin(index);\n }\n\n setRange({ from, to }: VuuRange) {\n if (from !== this.range.from || to !== this.range.to) {\n const [overlapFrom, overlapTo] = this.range.overlap(from, to);\n const newData = new Array(Math.max(0, to - from));\n for (let i = overlapFrom; i < overlapTo; i++) {\n const data = this.getAtIndex(i);\n if (data) {\n const index = i - from;\n newData[index] = data;\n }\n }\n this.data = newData;\n this.range.from = from;\n this.range.to = to;\n }\n }\n\n getSelectedRows() {\n return this.data.filter((row) => row[SELECTED] !== 0);\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n #range: WindowRange;\n\n constructor({ from, to }: VuuRange) {\n this.#range = new WindowRange(from, to);\n //internal data is always 0 based, we add range.from to determine an offset\n this.data = new Array(Math.max(0, to - from));\n this.rowCount = 0;\n }\n\n setRowCount = (rowCount: number) => {\n if (rowCount < this.data.length) {\n this.data.length = rowCount;\n }\n\n this.rowCount = rowCount;\n };\n\n add(data: DataSourceRow) {\n const [index] = data;\n if (this.isWithinRange(index)) {\n const internalIndex = index - this.#range.from;\n this.data[internalIndex] = data;\n\n // Hack until we can deal with this more elegantly. When we have a block\n // select operation, first row is selected (and updated via server), then\n // remaining rows are selected when we select the block-end row. We get an\n // update for all rows except first. Because we're extending the select status\n // on the client, we have to adjust the first row selected (its still selected\n // but is no longer the 'last selected row in block')\n // Maybe answer is to apply ALL the selection status code here, not in Viewport\n if (data[SELECTED]) {\n const previousRow = this.data[internalIndex - 1];\n if (isRowSelectedLast(previousRow)) {\n this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n this.data[internalIndex - 1][SELECTED] -= 4;\n }\n }\n }\n }\n\n getAtIndex(index: number) {\n return this.#range.isWithin(index) &&\n this.data[index - this.#range.from] != null\n ? this.data[index - this.#range.from]\n : undefined;\n }\n\n isWithinRange(index: number) {\n return this.#range.isWithin(index);\n }\n\n setRange({ from, to }: VuuRange) {\n if (from !== this.#range.from || to !== this.#range.to) {\n const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n const newData = new Array(Math.max(0, to - from));\n for (let i = overlapFrom; i < overlapTo; i++) {\n const data = this.getAtIndex(i);\n if (data) {\n const index = i - from;\n newData[index] = data;\n }\n }\n this.data = newData;\n this.#range.from = from;\n this.#range.to = to;\n }\n }\n\n getSelectedRows() {\n return this.data.filter((row) => row[SELECTED] !== 0);\n }\n\n get range() {\n return this.#range;\n }\n}\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ var paginationControlCss = ".vuuPaginationControl {\n padding: 0 var(--salt-spacing-100);\n .saltButton {\n .saltIcon {\n display: block !important;\n }\n }\n}\n";
2
+
3
+ export { paginationControlCss as default };
4
+ //# sourceMappingURL=PaginationControl.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PaginationControl.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,36 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { useComponentCssInjection } from '@salt-ds/styles';
3
+ import { useWindow } from '@salt-ds/window';
4
+ import { Pagination, GoToInput, Paginator } from '@salt-ds/core';
5
+ import cx from 'clsx';
6
+ import { usePagination } from './usePagination.js';
7
+ import paginationControlCss from './PaginationControl.css.js';
8
+ import { forwardRef } from 'react';
9
+
10
+ const classBase = "vuuPaginationControl";
11
+ const PaginationControl = forwardRef(function PaginationControl2({ className, dataSource, ...htmlAttributes }, forwardedRef) {
12
+ const targetWindow = useWindow();
13
+ useComponentCssInjection({
14
+ testId: "vuu-table",
15
+ css: paginationControlCss,
16
+ window: targetWindow
17
+ });
18
+ const { onPageChange, pageCount } = usePagination({
19
+ dataSource
20
+ });
21
+ return /* @__PURE__ */ jsx(
22
+ "div",
23
+ {
24
+ ...htmlAttributes,
25
+ className: cx(classBase, className),
26
+ ref: forwardedRef,
27
+ children: /* @__PURE__ */ jsxs(Pagination, { count: pageCount, onPageChange, children: [
28
+ /* @__PURE__ */ jsx(GoToInput, {}),
29
+ /* @__PURE__ */ jsx(Paginator, {})
30
+ ] })
31
+ }
32
+ );
33
+ });
34
+
35
+ export { PaginationControl };
36
+ //# sourceMappingURL=PaginationControl.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n extends HtmlHTMLAttributes<HTMLDivElement> {\n dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n HTMLDivElement,\n PaginationControlProps\n>(function PaginationControl(\n { className, dataSource, ...htmlAttributes },\n forwardedRef,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: paginationControlCss,\n window: targetWindow,\n });\n\n const { onPageChange, pageCount } = usePagination({\n dataSource,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n >\n <Pagination count={pageCount} onPageChange={onPageChange}>\n <GoToInput />\n <Paginator />\n </Pagination>\n </div>\n );\n});\n"],"names":["PaginationControl"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAOL,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAA,IAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,4BACV,SAAU,EAAA,EAAA,CAAA;AAAA,OACb,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,36 @@
1
+ import { useState, useMemo, useCallback } from 'react';
2
+
3
+ const getPageCount = (dataSource) => {
4
+ const { range, size } = dataSource;
5
+ const pageSize = range.to - range.from;
6
+ if (pageSize > 0) {
7
+ return Math.ceil(size / pageSize);
8
+ } else {
9
+ return 0;
10
+ }
11
+ };
12
+ const usePagination = ({ dataSource }) => {
13
+ const [pageCount, setPageCount] = useState(getPageCount(dataSource));
14
+ useMemo(() => {
15
+ dataSource.on("page-count", (n) => setPageCount(n));
16
+ }, [dataSource]);
17
+ const handlePageChange = useCallback(
18
+ (_evt, page) => {
19
+ const { range } = dataSource;
20
+ const pageSize = range.to - range.from;
21
+ const firstRow = pageSize * (page - 1);
22
+ console.log(
23
+ `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`
24
+ );
25
+ dataSource.range = { from: firstRow, to: firstRow + pageSize };
26
+ },
27
+ [dataSource]
28
+ );
29
+ return {
30
+ onPageChange: handlePageChange,
31
+ pageCount
32
+ };
33
+ };
34
+
35
+ export { usePagination };
36
+ //# sourceMappingURL=usePagination.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n const { range, size } = dataSource;\n const pageSize = range.to - range.from;\n if (pageSize > 0) {\n return Math.ceil(size / pageSize);\n } else {\n return 0;\n }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n useMemo(() => {\n dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n }, [dataSource]);\n\n const handlePageChange = useCallback(\n (_evt: SyntheticEvent, page: number) => {\n const { range } = dataSource;\n const pageSize = range.to - range.from;\n const firstRow = pageSize * (page - 1);\n console.log(\n `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n );\n dataSource.range = { from: firstRow, to: firstRow + pageSize };\n },\n [dataSource],\n );\n\n return {\n onPageChange: handlePageChange,\n pageCount,\n };\n};\n"],"names":[],"mappings":";;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA,CAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAI,QAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA,CAAA;AAE3E,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA,CAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA,CAAA;AACpC,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,UAAA,EAAa,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,UAAU,EAAI,EAAA,QAAA,GAAW,QAAS,EAAC,CAAC,CAAA,CAAA;AAAA,OAC1E,CAAA;AACA,MAAA,UAAA,CAAW,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,EAAA,EAAI,WAAW,QAAS,EAAA,CAAA;AAAA,KAC/D;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,5 +1,6 @@
1
- const headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
2
- const dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [role='cell']:nth-child(${colIdx + 1})`;
1
+ const NULL_CELL_POS = [-1, -1];
2
+ const headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx + 1}']`;
3
+ const dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [aria-colindex='${colIdx + 1}']`;
3
4
  const getTableCell = (containerRef, [rowIdx, colIdx]) => {
4
5
  const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
5
6
  const cell = containerRef.current?.querySelector(
@@ -20,17 +21,70 @@ const cellDropdownShowing = (cell) => {
20
21
  return false;
21
22
  };
22
23
  const cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
23
- function getRowIndex(rowEl) {
24
- if (rowEl) {
25
- const idx = rowEl.ariaRowIndex;
26
- if (idx !== null) {
27
- return parseInt(idx, 10) - 1;
24
+ const getIndexFromRowElement = (rowElement) => {
25
+ const rowIndex = rowElement?.ariaRowIndex;
26
+ if (rowIndex != null) {
27
+ const index = parseInt(rowIndex) - 1;
28
+ if (!isNaN(index)) {
29
+ return index;
28
30
  }
29
31
  }
30
32
  return -1;
31
- }
33
+ };
34
+ const getIndexFromCellElement = (cellElement) => {
35
+ const colIndex = cellElement?.ariaColIndex;
36
+ if (colIndex != null) {
37
+ const index = parseInt(colIndex) - 1;
38
+ if (!isNaN(index)) {
39
+ return index;
40
+ }
41
+ }
42
+ return -1;
43
+ };
44
+ const getTableCellPos = (tableCell) => {
45
+ const colIdx = getIndexFromCellElement(tableCell);
46
+ if (tableCell.role === "columnHeader") {
47
+ return [-1, colIdx];
48
+ } else {
49
+ const focusedRow = tableCell.closest("[role='row']");
50
+ if (focusedRow) {
51
+ return [getIndexFromRowElement(focusedRow), colIdx];
52
+ }
53
+ }
54
+ return NULL_CELL_POS;
55
+ };
32
56
  const closestRow = (el) => el.closest('[role="row"]');
33
- const closestRowIndex = (el) => getRowIndex(closestRow(el));
57
+ const closestRowIndex = (el) => getIndexFromRowElement(closestRow(el));
58
+ function getNextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
59
+ if (key === "ArrowUp") {
60
+ if (rowIdx > -1) {
61
+ return [rowIdx - 1, colIdx];
62
+ } else {
63
+ return [rowIdx, colIdx];
64
+ }
65
+ } else if (key === "ArrowDown") {
66
+ if (rowIdx === -1) {
67
+ return [0, colIdx];
68
+ } else if (rowIdx === rowCount - 1) {
69
+ return [rowIdx, colIdx];
70
+ } else {
71
+ return [rowIdx + 1, colIdx];
72
+ }
73
+ } else if (key === "ArrowRight") {
74
+ if (colIdx < columnCount - 1) {
75
+ return [rowIdx, colIdx + 1];
76
+ } else {
77
+ return [rowIdx, colIdx];
78
+ }
79
+ } else if (key === "ArrowLeft") {
80
+ if (colIdx > 0) {
81
+ return [rowIdx, colIdx - 1];
82
+ } else {
83
+ return [rowIdx, colIdx];
84
+ }
85
+ }
86
+ return [rowIdx, colIdx];
87
+ }
34
88
  const NO_SCROLL_NECESSARY = [void 0, void 0];
35
89
  const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
36
90
  if (contentContainer) {
@@ -53,5 +107,5 @@ const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer =
53
107
  }
54
108
  };
55
109
 
56
- export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getRowIndex, getTableCell, headerCellQuery, howFarIsRowOutsideViewport };
110
+ export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getIndexFromCellElement, getIndexFromRowElement, getNextCellPos, getTableCell, getTableCellPos, headerCellQuery, howFarIsRowOutsideViewport };
57
111
  //# sourceMappingURL=table-dom-utils.js.map
@@ -1 +1 @@
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 cellDropdownShowing = (cell: HTMLDivElement | null) => {\n if (cellIsEditable(cell)) {\n return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n }\n return false;\n};\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":"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"}
1
+ {"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx + 1}']`;\n\nexport const dataCellQuery = (rowIdx: number, colIdx: number) =>\n `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [aria-colindex='${colIdx + 1}']`;\n\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement>,\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 cellDropdownShowing = (cell: HTMLDivElement | null) => {\n if (cellIsEditable(cell)) {\n return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n }\n return false;\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getIndexFromRowElement = (rowElement: HTMLElement | null) => {\n const rowIndex = rowElement?.ariaRowIndex;\n if (rowIndex != null) {\n const index = parseInt(rowIndex) - 1;\n if (!isNaN(index)) {\n return index;\n }\n }\n return -1;\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) => {\n const colIndex = cellElement?.ariaColIndex;\n if (colIndex != null) {\n const index = parseInt(colIndex) - 1;\n if (!isNaN(index)) {\n return index;\n }\n }\n return -1;\n};\n\nexport const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n const colIdx = getIndexFromCellElement(tableCell);\n if (tableCell.role === \"columnHeader\") {\n return [-1, colIdx];\n } else {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n if (focusedRow) {\n return [getIndexFromRowElement(focusedRow), colIdx];\n }\n }\n return NULL_CELL_POS;\n};\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n getIndexFromRowElement(closestRow(el));\n\nexport function getNextCellPos(\n key: ArrowKey,\n [rowIdx, colIdx]: CellPos,\n columnCount: number,\n rowCount: number,\n): CellPos {\n if (key === \"ArrowUp\") {\n if (rowIdx > -1) {\n return [rowIdx - 1, colIdx];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowDown\") {\n if (rowIdx === -1) {\n return [0, colIdx];\n } else if (rowIdx === rowCount - 1) {\n return [rowIdx, colIdx];\n } else {\n return [rowIdx + 1, colIdx];\n }\n } else if (key === \"ArrowRight\") {\n if (colIdx < columnCount - 1) {\n return [rowIdx, colIdx + 1];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowLeft\") {\n if (colIdx > 0) {\n return [rowIdx, colIdx - 1];\n } else {\n return [rowIdx, colIdx];\n }\n }\n return [rowIdx, colIdx];\n}\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":"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"}
@@ -14,7 +14,7 @@ const useTableHeader = ({
14
14
  }) => {
15
15
  const containerRef = useRef(null);
16
16
  const scrollingContainerRef = useRef(null);
17
- const { rowRef } = useMeasuredHeight({
17
+ const { measuredRef: rowRef } = useMeasuredHeight({
18
18
  onHeightMeasured
19
19
  });
20
20
  const setContainerRef = useCallback((el) => {