@vuu-ui/vuu-table 0.13.6 → 0.13.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +5236 -61
- package/cjs/index.js.map +1 -1
- package/esm/index.js +5205 -26
- package/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/types/Table.d.ts +0 -1
- package/types/column-resizing/ColumnResizer.d.ts +6 -1
- package/types/column-resizing/useTableColumnResize.d.ts +3 -3
- package/types/header-cell/GroupHeaderCell.d.ts +2 -1
- package/types/header-cell/HeaderCell.d.ts +1 -1
- package/types/table-dom-utils.d.ts +1 -0
- package/types/table-header/TableHeader.d.ts +2 -2
- package/types/table-header/useTableHeader.d.ts +11 -7
- package/types/useTable.d.ts +2 -2
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.css.js +0 -6
- package/cjs/Row.css.js.map +0 -1
- package/cjs/Row.js +0 -151
- package/cjs/Row.js.map +0 -1
- package/cjs/Table.css.js +0 -6
- package/cjs/Table.css.js.map +0 -1
- package/cjs/Table.js +0 -433
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/bulk-edit/BulkEditDialog.js +0 -57
- package/cjs/bulk-edit/BulkEditDialog.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.css.js +0 -6
- package/cjs/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.js +0 -72
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.css.js +0 -6
- package/cjs/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.js +0 -81
- package/cjs/bulk-edit/BulkEditRow.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -101
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditRow.js +0 -144
- package/cjs/bulk-edit/useBulkEditRow.js.map +0 -1
- package/cjs/cell-block/CellBlock.css.js +0 -6
- package/cjs/cell-block/CellBlock.css.js.map +0 -1
- package/cjs/cell-block/CellBlock.js +0 -45
- package/cjs/cell-block/CellBlock.js.map +0 -1
- package/cjs/cell-block/cellblock-utils.js +0 -125
- package/cjs/cell-block/cellblock-utils.js.map +0 -1
- package/cjs/cell-block/useCellBlockSelection.js +0 -254
- package/cjs/cell-block/useCellBlockSelection.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -68
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -33
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.css.js +0 -6
- package/cjs/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +0 -52
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +0 -6
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -67
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css.js +0 -6
- package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js +0 -53
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.css.js +0 -6
- package/cjs/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.js +0 -29
- package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.css.js +0 -6
- package/cjs/column-header-pill/SortIndicator.css.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.js +0 -27
- package/cjs/column-header-pill/SortIndicator.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.css.js +0 -6
- package/cjs/column-resizing/ColumnResizer.css.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.js +0 -72
- package/cjs/column-resizing/ColumnResizer.js.map +0 -1
- package/cjs/column-resizing/useTableColumnResize.js +0 -55
- package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.css.js +0 -6
- package/cjs/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.js +0 -127
- package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
- package/cjs/header-cell/HeaderCell.css.js +0 -6
- package/cjs/header-cell/HeaderCell.css.js.map +0 -1
- package/cjs/header-cell/HeaderCell.js +0 -107
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/pagination/PaginationControl.css.js +0 -6
- package/cjs/pagination/PaginationControl.css.js.map +0 -1
- package/cjs/pagination/PaginationControl.js +0 -38
- package/cjs/pagination/PaginationControl.js.map +0 -1
- package/cjs/pagination/usePagination.js +0 -36
- package/cjs/pagination/usePagination.js.map +0 -1
- package/cjs/table-cell/TableCell.css.js +0 -6
- package/cjs/table-cell/TableCell.css.js.map +0 -1
- package/cjs/table-cell/TableCell.js +0 -95
- package/cjs/table-cell/TableCell.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.css.js +0 -6
- package/cjs/table-cell/TableGroupCell.css.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.js +0 -66
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -198
- package/cjs/table-dom-utils.js.map +0 -1
- package/cjs/table-header/HeaderProvider.js +0 -18
- package/cjs/table-header/HeaderProvider.js.map +0 -1
- package/cjs/table-header/TableHeader.js +0 -154
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -87
- package/cjs/table-header/useTableHeader.js.map +0 -1
- package/cjs/useCell.js +0 -28
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -79
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -115
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useDataSource.js +0 -146
- package/cjs/useDataSource.js.map +0 -1
- package/cjs/useEditableCell.js +0 -32
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useHighlighting.js +0 -33
- package/cjs/useHighlighting.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -318
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -41
- package/cjs/useMeasuredHeight.js.map +0 -1
- package/cjs/useRowClassNameGenerators.js +0 -34
- package/cjs/useRowClassNameGenerators.js.map +0 -1
- package/cjs/useSelection.js +0 -74
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -714
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -59
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -383
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -446
- package/cjs/useTableScroll.js.map +0 -1
- package/cjs/useTableViewport.js +0 -137
- package/cjs/useTableViewport.js.map +0 -1
- package/esm/CellFocusState.js +0 -43
- package/esm/CellFocusState.js.map +0 -1
- package/esm/Row.css.js +0 -4
- package/esm/Row.css.js.map +0 -1
- package/esm/Row.js +0 -148
- package/esm/Row.js.map +0 -1
- package/esm/Table.css.js +0 -4
- package/esm/Table.css.js.map +0 -1
- package/esm/Table.js +0 -431
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/bulk-edit/BulkEditDialog.js +0 -55
- package/esm/bulk-edit/BulkEditDialog.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.css.js +0 -4
- package/esm/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.js +0 -70
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.css.js +0 -4
- package/esm/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.js +0 -79
- package/esm/bulk-edit/BulkEditRow.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -99
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useBulkEditRow.js +0 -142
- package/esm/bulk-edit/useBulkEditRow.js.map +0 -1
- package/esm/cell-block/CellBlock.css.js +0 -4
- package/esm/cell-block/CellBlock.css.js.map +0 -1
- package/esm/cell-block/CellBlock.js +0 -43
- package/esm/cell-block/CellBlock.js.map +0 -1
- package/esm/cell-block/cellblock-utils.js +0 -116
- package/esm/cell-block/cellblock-utils.js.map +0 -1
- package/esm/cell-block/useCellBlockSelection.js +0 -252
- package/esm/cell-block/useCellBlockSelection.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -66
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -31
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.css.js +0 -4
- package/esm/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.js +0 -50
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +0 -4
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -65
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.css.js +0 -4
- package/esm/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.js +0 -51
- package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.css.js +0 -4
- package/esm/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.js +0 -27
- package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.css.js +0 -4
- package/esm/column-header-pill/SortIndicator.css.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.js +0 -25
- package/esm/column-header-pill/SortIndicator.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.css.js +0 -4
- package/esm/column-resizing/ColumnResizer.css.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.js +0 -70
- package/esm/column-resizing/ColumnResizer.js.map +0 -1
- package/esm/column-resizing/useTableColumnResize.js +0 -53
- package/esm/column-resizing/useTableColumnResize.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.css.js +0 -4
- package/esm/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.js +0 -125
- package/esm/header-cell/GroupHeaderCell.js.map +0 -1
- package/esm/header-cell/HeaderCell.css.js +0 -4
- package/esm/header-cell/HeaderCell.css.js.map +0 -1
- package/esm/header-cell/HeaderCell.js +0 -105
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/pagination/PaginationControl.css.js +0 -4
- package/esm/pagination/PaginationControl.css.js.map +0 -1
- package/esm/pagination/PaginationControl.js +0 -36
- package/esm/pagination/PaginationControl.js.map +0 -1
- package/esm/pagination/usePagination.js +0 -34
- package/esm/pagination/usePagination.js.map +0 -1
- package/esm/table-cell/TableCell.css.js +0 -4
- package/esm/table-cell/TableCell.css.js.map +0 -1
- package/esm/table-cell/TableCell.js +0 -93
- package/esm/table-cell/TableCell.js.map +0 -1
- package/esm/table-cell/TableGroupCell.css.js +0 -4
- package/esm/table-cell/TableGroupCell.css.js.map +0 -1
- package/esm/table-cell/TableGroupCell.js +0 -64
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-dom-utils.js +0 -181
- package/esm/table-dom-utils.js.map +0 -1
- package/esm/table-header/HeaderProvider.js +0 -15
- package/esm/table-header/HeaderProvider.js.map +0 -1
- package/esm/table-header/TableHeader.js +0 -152
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -85
- package/esm/table-header/useTableHeader.js.map +0 -1
- package/esm/useCell.js +0 -26
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -77
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -113
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useDataSource.js +0 -144
- package/esm/useDataSource.js.map +0 -1
- package/esm/useEditableCell.js +0 -30
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useHighlighting.js +0 -31
- package/esm/useHighlighting.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -314
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -39
- package/esm/useMeasuredHeight.js.map +0 -1
- package/esm/useRowClassNameGenerators.js +0 -32
- package/esm/useRowClassNameGenerators.js.map +0 -1
- package/esm/useSelection.js +0 -72
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -712
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -56
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -381
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -443
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
|
@@ -1,318 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var tableDomUtils = require('./table-dom-utils.js');
|
|
7
|
-
|
|
8
|
-
const rowNavigationKeys = /* @__PURE__ */ new Set([
|
|
9
|
-
"Home",
|
|
10
|
-
"End",
|
|
11
|
-
"PageUp",
|
|
12
|
-
"PageDown",
|
|
13
|
-
"ArrowDown",
|
|
14
|
-
"ArrowUp"
|
|
15
|
-
]);
|
|
16
|
-
const CellLocator = ".vuuTableCell,.vuuTableHeaderCell,.vuuTableGroupHeaderCell";
|
|
17
|
-
const CellControlLocator = ".vuuColumnMenu,.vuuColumnHeaderPill";
|
|
18
|
-
const cellNavigationKeys = new Set(rowNavigationKeys);
|
|
19
|
-
cellNavigationKeys.add("ArrowLeft");
|
|
20
|
-
cellNavigationKeys.add("ArrowRight");
|
|
21
|
-
const isNavigationKey = (key, navigationStyle) => {
|
|
22
|
-
switch (navigationStyle) {
|
|
23
|
-
case "cell":
|
|
24
|
-
case "tree":
|
|
25
|
-
return cellNavigationKeys.has(key);
|
|
26
|
-
case "row":
|
|
27
|
-
return rowNavigationKeys.has(key);
|
|
28
|
-
default:
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
const focusControlWithinCell = (e, el) => {
|
|
33
|
-
if (e.shiftKey && e.key.match(/Arrow(Left|Right)/)) {
|
|
34
|
-
if (el?.classList.contains("vuuTableHeaderCell")) {
|
|
35
|
-
const menuButton = el?.querySelector(".vuuColumnMenu");
|
|
36
|
-
if (menuButton) {
|
|
37
|
-
menuButton.focus();
|
|
38
|
-
return true;
|
|
39
|
-
}
|
|
40
|
-
} else if (el?.classList.contains("vuuTableGroupHeaderCell")) {
|
|
41
|
-
const headerPill = el?.querySelector(
|
|
42
|
-
".vuuColumnHeaderPill"
|
|
43
|
-
);
|
|
44
|
-
if (headerPill) {
|
|
45
|
-
headerPill.focus();
|
|
46
|
-
return true;
|
|
47
|
-
}
|
|
48
|
-
} else if (el?.classList.contains("vuuColumnHeaderPill")) {
|
|
49
|
-
const nextPill = el.parentElement?.nextElementSibling?.firstChild;
|
|
50
|
-
if (nextPill?.classList.contains("vuuColumnHeaderPill")) {
|
|
51
|
-
nextPill.focus();
|
|
52
|
-
return true;
|
|
53
|
-
} else {
|
|
54
|
-
const removeButton = vuuUtils.queryClosest(
|
|
55
|
-
el,
|
|
56
|
-
".vuuTableGroupHeaderCell",
|
|
57
|
-
true
|
|
58
|
-
).querySelector(".vuuTableGroupHeaderCell-removeAll");
|
|
59
|
-
if (removeButton) {
|
|
60
|
-
removeButton.focus();
|
|
61
|
-
return true;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
return false;
|
|
67
|
-
};
|
|
68
|
-
const PageKeys = ["Home", "End", "PageUp", "PageDown"];
|
|
69
|
-
const isPagingKey = (key) => PageKeys.includes(key);
|
|
70
|
-
const useKeyboardNavigation = ({
|
|
71
|
-
cellFocusStateRef,
|
|
72
|
-
columnCount = 0,
|
|
73
|
-
containerRef,
|
|
74
|
-
defaultHighlightedIndex,
|
|
75
|
-
disableHighlightOnFocus,
|
|
76
|
-
focusCell,
|
|
77
|
-
headerCount,
|
|
78
|
-
highlightedIndex: highlightedIndexProp,
|
|
79
|
-
navigationStyle,
|
|
80
|
-
requestScroll,
|
|
81
|
-
onHighlight,
|
|
82
|
-
onToggleGroup,
|
|
83
|
-
rowCount = 0,
|
|
84
|
-
viewportRowCount
|
|
85
|
-
}) => {
|
|
86
|
-
const highlightedIndexRef = react.useRef(void 0);
|
|
87
|
-
const [highlightedIndex, setHighlightedIdx] = core.useControlled({
|
|
88
|
-
controlled: highlightedIndexProp,
|
|
89
|
-
default: defaultHighlightedIndex,
|
|
90
|
-
name: "UseKeyboardNavigation"
|
|
91
|
-
});
|
|
92
|
-
highlightedIndexRef.current = highlightedIndex;
|
|
93
|
-
const maxRowIndex = rowCount + headerCount;
|
|
94
|
-
const setHighlightedIndex = react.useCallback(
|
|
95
|
-
(idx) => {
|
|
96
|
-
onHighlight?.(idx);
|
|
97
|
-
setHighlightedIdx(idx);
|
|
98
|
-
highlightedIndexRef.current = idx;
|
|
99
|
-
},
|
|
100
|
-
[onHighlight, setHighlightedIdx]
|
|
101
|
-
);
|
|
102
|
-
const setActiveCell = react.useCallback(
|
|
103
|
-
(rowIdx, colIdx, fromKeyboard = false) => {
|
|
104
|
-
const pos = [rowIdx, colIdx];
|
|
105
|
-
if (navigationStyle === "row") {
|
|
106
|
-
setHighlightedIdx(rowIdx);
|
|
107
|
-
} else {
|
|
108
|
-
focusCell(pos, fromKeyboard);
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
[focusCell, navigationStyle, setHighlightedIdx]
|
|
112
|
-
);
|
|
113
|
-
const nextPageItemIdx = react.useCallback(
|
|
114
|
-
(key, [rowIdx, colIdx]) => new Promise((resolve) => {
|
|
115
|
-
let newRowIdx = rowIdx;
|
|
116
|
-
const { current: focusState } = cellFocusStateRef;
|
|
117
|
-
switch (key) {
|
|
118
|
-
case "PageDown": {
|
|
119
|
-
newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
|
|
120
|
-
if (newRowIdx !== rowIdx) {
|
|
121
|
-
focusState.cellPos = [newRowIdx, colIdx];
|
|
122
|
-
requestScroll?.({ type: "scroll-page", direction: "down" });
|
|
123
|
-
}
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
case "PageUp": {
|
|
127
|
-
newRowIdx = Math.max(0, rowIdx - viewportRowCount);
|
|
128
|
-
if (newRowIdx !== rowIdx) {
|
|
129
|
-
focusState.cellPos = [newRowIdx, colIdx];
|
|
130
|
-
requestScroll?.({ type: "scroll-page", direction: "up" });
|
|
131
|
-
}
|
|
132
|
-
break;
|
|
133
|
-
}
|
|
134
|
-
case "Home": {
|
|
135
|
-
newRowIdx = headerCount + 1;
|
|
136
|
-
if (newRowIdx !== rowIdx) {
|
|
137
|
-
focusState.cellPos = [newRowIdx, colIdx];
|
|
138
|
-
requestScroll?.({ type: "scroll-end", direction: "home" });
|
|
139
|
-
}
|
|
140
|
-
break;
|
|
141
|
-
}
|
|
142
|
-
case "End": {
|
|
143
|
-
newRowIdx = rowCount + headerCount;
|
|
144
|
-
if (newRowIdx !== rowIdx) {
|
|
145
|
-
focusState.cellPos = [newRowIdx, colIdx];
|
|
146
|
-
requestScroll?.({ type: "scroll-end", direction: "end" });
|
|
147
|
-
}
|
|
148
|
-
break;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
setTimeout(() => {
|
|
152
|
-
resolve([newRowIdx, colIdx]);
|
|
153
|
-
}, 35);
|
|
154
|
-
}),
|
|
155
|
-
[cellFocusStateRef, headerCount, requestScroll, rowCount, viewportRowCount]
|
|
156
|
-
);
|
|
157
|
-
const handleFocus = react.useCallback(() => {
|
|
158
|
-
if (disableHighlightOnFocus !== true) {
|
|
159
|
-
if (containerRef.current?.contains(document.activeElement)) {
|
|
160
|
-
const focusedCell = tableDomUtils.getFocusedCell(document.activeElement);
|
|
161
|
-
if (focusedCell) {
|
|
162
|
-
cellFocusStateRef.current.cell = focusedCell;
|
|
163
|
-
if (navigationStyle === "row") {
|
|
164
|
-
setHighlightedIdx(cellFocusStateRef.current.cellPos?.[0]);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}, [
|
|
170
|
-
disableHighlightOnFocus,
|
|
171
|
-
containerRef,
|
|
172
|
-
cellFocusStateRef,
|
|
173
|
-
navigationStyle,
|
|
174
|
-
setHighlightedIdx
|
|
175
|
-
]);
|
|
176
|
-
const navigateChildItems = react.useCallback(
|
|
177
|
-
async (navigationStyle2 = "cell", key, shiftKey = false) => {
|
|
178
|
-
const { cellPos } = cellFocusStateRef.current;
|
|
179
|
-
if (cellPos === void 0) {
|
|
180
|
-
throw Error("navigateChildItems called before cellPos is set");
|
|
181
|
-
}
|
|
182
|
-
const [rowIdx, colIdx] = cellPos;
|
|
183
|
-
let nextRowIdx = -1, nextColIdx = -1;
|
|
184
|
-
if (isPagingKey(key)) {
|
|
185
|
-
[nextRowIdx, nextColIdx] = await nextPageItemIdx(key, cellPos);
|
|
186
|
-
} else {
|
|
187
|
-
const treeNodeOperation = tableDomUtils.getTreeNodeOperation(
|
|
188
|
-
containerRef,
|
|
189
|
-
navigationStyle2,
|
|
190
|
-
cellPos,
|
|
191
|
-
key,
|
|
192
|
-
shiftKey
|
|
193
|
-
);
|
|
194
|
-
if (treeNodeOperation === "expand" || treeNodeOperation === "collapse") {
|
|
195
|
-
onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);
|
|
196
|
-
} else if (treeNodeOperation === "level-up") {
|
|
197
|
-
[nextRowIdx, nextColIdx] = tableDomUtils.getLevelUp(containerRef, cellPos);
|
|
198
|
-
} else {
|
|
199
|
-
[nextRowIdx, nextColIdx] = tableDomUtils.getNextCellPos(
|
|
200
|
-
key,
|
|
201
|
-
cellPos,
|
|
202
|
-
columnCount,
|
|
203
|
-
maxRowIndex
|
|
204
|
-
);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
|
|
208
|
-
setActiveCell(nextRowIdx, nextColIdx, true);
|
|
209
|
-
setHighlightedIndex(nextRowIdx);
|
|
210
|
-
}
|
|
211
|
-
},
|
|
212
|
-
[
|
|
213
|
-
cellFocusStateRef,
|
|
214
|
-
nextPageItemIdx,
|
|
215
|
-
containerRef,
|
|
216
|
-
onToggleGroup,
|
|
217
|
-
headerCount,
|
|
218
|
-
columnCount,
|
|
219
|
-
maxRowIndex,
|
|
220
|
-
setActiveCell,
|
|
221
|
-
setHighlightedIndex
|
|
222
|
-
]
|
|
223
|
-
);
|
|
224
|
-
const scrollRowIntoViewIfNecessary = react.useCallback(
|
|
225
|
-
(rowIndex) => {
|
|
226
|
-
requestScroll?.({ type: "scroll-row", rowIndex });
|
|
227
|
-
},
|
|
228
|
-
[requestScroll]
|
|
229
|
-
);
|
|
230
|
-
const moveHighlightedRow = react.useCallback(
|
|
231
|
-
async (key) => {
|
|
232
|
-
const { current: highlighted } = highlightedIndexRef;
|
|
233
|
-
const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted ?? -1, 0]) : tableDomUtils.getNextCellPos(key, [highlighted ?? -1, 0], columnCount, maxRowIndex);
|
|
234
|
-
if (nextRowIdx !== highlighted) {
|
|
235
|
-
setHighlightedIndex(nextRowIdx);
|
|
236
|
-
scrollRowIntoViewIfNecessary(nextRowIdx);
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
[
|
|
240
|
-
columnCount,
|
|
241
|
-
maxRowIndex,
|
|
242
|
-
nextPageItemIdx,
|
|
243
|
-
scrollRowIntoViewIfNecessary,
|
|
244
|
-
setHighlightedIndex
|
|
245
|
-
]
|
|
246
|
-
);
|
|
247
|
-
react.useEffect(() => {
|
|
248
|
-
if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
|
|
249
|
-
requestAnimationFrame(() => {
|
|
250
|
-
scrollRowIntoViewIfNecessary(highlightedIndexProp);
|
|
251
|
-
});
|
|
252
|
-
}
|
|
253
|
-
}, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
|
|
254
|
-
const handleKeyDown = react.useCallback(
|
|
255
|
-
(e) => {
|
|
256
|
-
const cell = vuuUtils.queryClosest(
|
|
257
|
-
e.target,
|
|
258
|
-
`${CellLocator},${CellControlLocator}`
|
|
259
|
-
);
|
|
260
|
-
if (tableDomUtils.cellDropdownShowing(cell)) {
|
|
261
|
-
return;
|
|
262
|
-
}
|
|
263
|
-
if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
|
|
264
|
-
e.preventDefault();
|
|
265
|
-
e.stopPropagation();
|
|
266
|
-
if (navigationStyle === "row") {
|
|
267
|
-
moveHighlightedRow(e.key);
|
|
268
|
-
} else if (navigationStyle !== "none") {
|
|
269
|
-
if (!focusControlWithinCell(e, cell)) {
|
|
270
|
-
navigateChildItems(navigationStyle, e.key, e.shiftKey);
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
},
|
|
275
|
-
[rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
|
|
276
|
-
);
|
|
277
|
-
const handleClick = react.useCallback(
|
|
278
|
-
// Might not be a cell e.g the Settings button
|
|
279
|
-
(evt) => {
|
|
280
|
-
const target = vuuUtils.queryClosest(evt.target, CellLocator);
|
|
281
|
-
const focusedCell = tableDomUtils.getFocusedCell(target);
|
|
282
|
-
if (focusedCell) {
|
|
283
|
-
const [rowIdx, colIdx] = tableDomUtils.getAriaCellPos(focusedCell);
|
|
284
|
-
setActiveCell(rowIdx, colIdx);
|
|
285
|
-
}
|
|
286
|
-
},
|
|
287
|
-
[setActiveCell]
|
|
288
|
-
);
|
|
289
|
-
const handleMouseLeave = react.useCallback(() => {
|
|
290
|
-
setHighlightedIndex(-1);
|
|
291
|
-
}, [setHighlightedIndex]);
|
|
292
|
-
const handleMouseMove = react.useCallback(
|
|
293
|
-
(evt) => {
|
|
294
|
-
const rowIdx = tableDomUtils.closestRowIndex(evt.target);
|
|
295
|
-
if (rowIdx !== -1 && rowIdx !== highlightedIndexRef.current) {
|
|
296
|
-
setHighlightedIndex(rowIdx);
|
|
297
|
-
}
|
|
298
|
-
},
|
|
299
|
-
[setHighlightedIndex]
|
|
300
|
-
);
|
|
301
|
-
const navigateCell = react.useCallback(() => {
|
|
302
|
-
navigateChildItems("cell", "ArrowDown");
|
|
303
|
-
}, [navigateChildItems]);
|
|
304
|
-
return {
|
|
305
|
-
highlightedIndexRef,
|
|
306
|
-
navigateCell,
|
|
307
|
-
onClick: handleClick,
|
|
308
|
-
onFocus: handleFocus,
|
|
309
|
-
onKeyDown: handleKeyDown,
|
|
310
|
-
onMouseLeave: navigationStyle === "row" ? handleMouseLeave : void 0,
|
|
311
|
-
onMouseMove: navigationStyle === "row" ? handleMouseMove : void 0
|
|
312
|
-
};
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
exports.isNavigationKey = isNavigationKey;
|
|
316
|
-
exports.isPagingKey = isPagingKey;
|
|
317
|
-
exports.useKeyboardNavigation = useKeyboardNavigation;
|
|
318
|
-
//# sourceMappingURL=useKeyboardNavigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { PageKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n KeyboardEvent,\n MouseEvent,\n MutableRefObject,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n NavigationKey,\n cellDropdownShowing,\n closestRowIndex,\n getAriaCellPos,\n getFocusedCell,\n getNextCellPos,\n getTreeNodeOperation,\n getLevelUp as getLevelUp,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { FocusCell } from \"./useCellFocus\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport { CellFocusState } from \"./CellFocusState\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n \"Home\",\n \"End\",\n \"PageUp\",\n \"PageDown\",\n \"ArrowDown\",\n \"ArrowUp\",\n]);\n\nconst CellLocator =\n \".vuuTableCell,.vuuTableHeaderCell,.vuuTableGroupHeaderCell\";\n\nconst CellControlLocator = \".vuuColumnMenu,.vuuColumnHeaderPill\";\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n key: string,\n navigationStyle: TableNavigationStyle,\n): key is NavigationKey => {\n switch (navigationStyle) {\n case \"cell\":\n case \"tree\":\n return cellNavigationKeys.has(key as NavigationKey);\n case \"row\":\n return rowNavigationKeys.has(key as NavigationKey);\n default:\n return false;\n }\n};\n\nconst focusControlWithinCell = (e: KeyboardEvent, el: HTMLElement | null) => {\n if (e.shiftKey && e.key.match(/Arrow(Left|Right)/)) {\n if (el?.classList.contains(\"vuuTableHeaderCell\")) {\n const menuButton = el?.querySelector<HTMLButtonElement>(\".vuuColumnMenu\");\n if (menuButton) {\n menuButton.focus();\n return true;\n }\n } else if (el?.classList.contains(\"vuuTableGroupHeaderCell\")) {\n const headerPill = el?.querySelector<HTMLButtonElement>(\n \".vuuColumnHeaderPill\",\n );\n if (headerPill) {\n headerPill.focus();\n return true;\n }\n } else if (el?.classList.contains(\"vuuColumnHeaderPill\")) {\n const nextPill = el.parentElement?.nextElementSibling\n ?.firstChild as HTMLElement;\n if (nextPill?.classList.contains(\"vuuColumnHeaderPill\")) {\n nextPill.focus();\n return true;\n } else {\n const removeButton = queryClosest(\n el,\n \".vuuTableGroupHeaderCell\",\n true,\n ).querySelector(\".vuuTableGroupHeaderCell-removeAll\") as HTMLElement;\n if (removeButton) {\n removeButton.focus();\n return true;\n }\n }\n }\n }\n return false;\n};\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n PageKeys.includes(key);\n\nexport type GroupToggleHandler = (\n treeNodeOperation: \"expand\" | \"collapse\",\n rowIndex: number,\n) => void;\n\nexport interface NavigationHookProps {\n cellFocusStateRef: MutableRefObject<CellFocusState>;\n containerRef: RefObject<HTMLElement | null>;\n columnCount?: number;\n headerCount: number;\n defaultHighlightedIndex?: number;\n disableFocus?: boolean;\n disableHighlightOnFocus?: boolean;\n focusCell: FocusCell;\n highlightedIndex?: number;\n label?: string;\n navigationStyle: TableNavigationStyle;\n viewportRange: VuuRange;\n onHighlight?: (idx: number) => void;\n onToggleGroup: GroupToggleHandler;\n requestScroll?: ScrollRequestHandler;\n restoreLastFocus?: boolean;\n rowCount?: number;\n selected?: unknown;\n viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n cellFocusStateRef,\n columnCount = 0,\n containerRef,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n focusCell,\n headerCount,\n highlightedIndex: highlightedIndexProp,\n navigationStyle,\n requestScroll,\n onHighlight,\n onToggleGroup,\n rowCount = 0,\n viewportRowCount,\n}: NavigationHookProps) => {\n // Keep this in sync with state value. This can be used by functions that need\n // to reference highlightedIndex at call time but do not need to be regenerated\n // every time it changes (i.e keep highlightedIndex out of their dependency\n // arrays, as it can update frequently)\n const highlightedIndexRef = useRef<number | undefined>(undefined);\n\n const [highlightedIndex, setHighlightedIdx] = useControlled({\n controlled: highlightedIndexProp,\n default: defaultHighlightedIndex,\n name: \"UseKeyboardNavigation\",\n });\n highlightedIndexRef.current = highlightedIndex;\n\n // We use aria row index for tracking rows\n const maxRowIndex = rowCount + headerCount;\n\n const setHighlightedIndex = useCallback(\n (idx: number) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n highlightedIndexRef.current = idx;\n },\n [onHighlight, setHighlightedIdx],\n );\n\n const setActiveCell = useCallback(\n (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n const pos: CellPos = [rowIdx, colIdx];\n if (navigationStyle === \"row\") {\n setHighlightedIdx(rowIdx);\n } else {\n focusCell(pos, fromKeyboard);\n }\n },\n [focusCell, navigationStyle, setHighlightedIdx],\n );\n\n const nextPageItemIdx = useCallback(\n (\n key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n [rowIdx, colIdx]: CellPos,\n ): Promise<CellPos> =>\n new Promise((resolve) => {\n let newRowIdx = rowIdx;\n const { current: focusState } = cellFocusStateRef;\n switch (key) {\n case \"PageDown\": {\n newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n if (newRowIdx !== rowIdx) {\n focusState.cellPos = [newRowIdx, colIdx];\n requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n }\n break;\n }\n case \"PageUp\": {\n newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n if (newRowIdx !== rowIdx) {\n focusState.cellPos = [newRowIdx, colIdx];\n requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n }\n break;\n }\n case \"Home\": {\n newRowIdx = headerCount + 1;\n if (newRowIdx !== rowIdx) {\n focusState.cellPos = [newRowIdx, colIdx];\n requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n }\n break;\n }\n case \"End\": {\n newRowIdx = rowCount + headerCount;\n if (newRowIdx !== rowIdx) {\n focusState.cellPos = [newRowIdx, colIdx];\n requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n }\n break;\n }\n }\n // Introduce a delay to allow the scroll operation to complete,\n // which will trigger a range reset and rerender of rows. We\n // might need to tweak how this works. If we introduce too big\n // a delay, we risk seeing the newly rendered rows, with the focus\n // still on the old cell, which will be apparent as a brief flash\n // of the old cell focus before switching to correct cell. If we were\n // to change the way re assign keys such that we can guarantee that\n // when we page down, rows in same position get same keys, then same\n // cell would be focussed in new page as previous and issue would not\n // arise.\n setTimeout(() => {\n resolve([newRowIdx, colIdx]);\n }, 35);\n }),\n [cellFocusStateRef, headerCount, requestScroll, rowCount, viewportRowCount],\n );\n\n const handleFocus = useCallback(() => {\n if (disableHighlightOnFocus !== true) {\n if (containerRef.current?.contains(document.activeElement)) {\n // IF focus arrives via keyboard, a cell will have received focus,\n // we handle that here. If focus arrives via click on a cell with\n // no tabindex (i.e all cells except one) we leave that to the\n // click handler.\n const focusedCell = getFocusedCell(document.activeElement);\n if (focusedCell) {\n cellFocusStateRef.current.cell = focusedCell;\n if (navigationStyle === \"row\") {\n setHighlightedIdx(cellFocusStateRef.current.cellPos?.[0]);\n }\n }\n }\n }\n }, [\n disableHighlightOnFocus,\n containerRef,\n cellFocusStateRef,\n navigationStyle,\n setHighlightedIdx,\n ]);\n\n const navigateChildItems = useCallback(\n async (\n navigationStyle: \"cell\" | \"tree\" = \"cell\",\n key: NavigationKey,\n shiftKey = false,\n ): Promise<undefined> => {\n const { cellPos } = cellFocusStateRef.current;\n if (cellPos === undefined) {\n throw Error(\"navigateChildItems called before cellPos is set\");\n }\n const [rowIdx, colIdx] = cellPos;\n let nextRowIdx = -1,\n nextColIdx = -1;\n\n if (isPagingKey(key)) {\n [nextRowIdx, nextColIdx] = await nextPageItemIdx(key, cellPos);\n } else {\n const treeNodeOperation = getTreeNodeOperation(\n containerRef,\n navigationStyle,\n cellPos,\n key,\n shiftKey,\n );\n if (\n treeNodeOperation === \"expand\" ||\n treeNodeOperation === \"collapse\"\n ) {\n onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);\n } else if (treeNodeOperation === \"level-up\") {\n [nextRowIdx, nextColIdx] = getLevelUp(containerRef, cellPos);\n } else {\n [nextRowIdx, nextColIdx] = getNextCellPos(\n key,\n cellPos,\n columnCount,\n maxRowIndex,\n );\n }\n }\n\n if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n setActiveCell(nextRowIdx, nextColIdx, true);\n setHighlightedIndex(nextRowIdx);\n }\n },\n [\n cellFocusStateRef,\n nextPageItemIdx,\n containerRef,\n onToggleGroup,\n headerCount,\n columnCount,\n maxRowIndex,\n setActiveCell,\n setHighlightedIndex,\n ],\n );\n\n const scrollRowIntoViewIfNecessary = useCallback(\n (rowIndex: number) => {\n requestScroll?.({ type: \"scroll-row\", rowIndex });\n },\n [requestScroll],\n );\n\n const moveHighlightedRow = useCallback(\n async (key: NavigationKey) => {\n const { current: highlighted } = highlightedIndexRef;\n const [nextRowIdx] = isPagingKey(key)\n ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n : getNextCellPos(key, [highlighted ?? -1, 0], columnCount, maxRowIndex);\n if (nextRowIdx !== highlighted) {\n setHighlightedIndex(nextRowIdx);\n // TO(DO make this a scroll request)\n scrollRowIntoViewIfNecessary(nextRowIdx);\n }\n },\n [\n columnCount,\n maxRowIndex,\n nextPageItemIdx,\n scrollRowIntoViewIfNecessary,\n setHighlightedIndex,\n ],\n );\n\n useEffect(() => {\n if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n requestAnimationFrame(() => {\n // deferred call, ensuring table has fully rendered\n scrollRowIntoViewIfNecessary(highlightedIndexProp);\n });\n }\n }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n const cell = queryClosest<HTMLDivElement>(\n e.target,\n `${CellLocator},${CellControlLocator}`,\n );\n if (cellDropdownShowing(cell)) {\n return;\n }\n if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n e.preventDefault();\n e.stopPropagation();\n if (navigationStyle === \"row\") {\n moveHighlightedRow(e.key);\n } else if (navigationStyle !== \"none\") {\n if (!focusControlWithinCell(e, cell)) {\n navigateChildItems(navigationStyle, e.key, e.shiftKey);\n }\n }\n }\n },\n [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems],\n );\n\n const handleClick = useCallback(\n // Might not be a cell e.g the Settings button\n (evt: MouseEvent) => {\n const target = queryClosest<HTMLDivElement>(evt.target, CellLocator);\n const focusedCell = getFocusedCell(target);\n if (focusedCell) {\n const [rowIdx, colIdx] = getAriaCellPos(focusedCell);\n setActiveCell(rowIdx, colIdx);\n }\n },\n [setActiveCell],\n );\n\n const handleMouseLeave = useCallback(() => {\n setHighlightedIndex(-1);\n }, [setHighlightedIndex]);\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n const rowIdx = closestRowIndex(evt.target as HTMLElement);\n if (rowIdx !== -1 && rowIdx !== highlightedIndexRef.current) {\n setHighlightedIndex(rowIdx);\n }\n },\n [setHighlightedIndex],\n );\n\n /**\n * used when editing cells\n */\n const navigateCell = useCallback(() => {\n navigateChildItems(\"cell\", \"ArrowDown\");\n }, [navigateChildItems]);\n\n return {\n highlightedIndexRef,\n navigateCell,\n onClick: handleClick,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined,\n };\n};\n"],"names":["queryClosest","useRef","useControlled","useCallback","getFocusedCell","navigationStyle","getTreeNodeOperation","getLevelUp","getNextCellPos","useEffect","cellDropdownShowing","getAriaCellPos","closestRowIndex"],"mappings":"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"}
|
package/cjs/useMeasuredHeight.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const useMeasuredHeight = ({
|
|
7
|
-
onHeightMeasured,
|
|
8
|
-
height: heightProp = 0
|
|
9
|
-
}) => {
|
|
10
|
-
const [measuredHeight, setMeasuredHeight] = react.useState(heightProp);
|
|
11
|
-
const resizeObserver = react.useMemo(() => {
|
|
12
|
-
return new ResizeObserver((entries) => {
|
|
13
|
-
for (const entry of entries) {
|
|
14
|
-
const [{ blockSize: measuredSize }] = entry.borderBoxSize;
|
|
15
|
-
const newHeight = Math.round(measuredSize);
|
|
16
|
-
if (vuuUtils.isValidNumber(newHeight)) {
|
|
17
|
-
setMeasuredHeight(newHeight);
|
|
18
|
-
onHeightMeasured?.(newHeight);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}, [onHeightMeasured]);
|
|
23
|
-
const measuredRef = react.useCallback(
|
|
24
|
-
(el) => {
|
|
25
|
-
if (el) {
|
|
26
|
-
if (heightProp === 0) {
|
|
27
|
-
const { height } = el.getBoundingClientRect();
|
|
28
|
-
resizeObserver.observe(el);
|
|
29
|
-
setMeasuredHeight(Math.round(height));
|
|
30
|
-
}
|
|
31
|
-
} else {
|
|
32
|
-
resizeObserver.disconnect();
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
[resizeObserver, heightProp]
|
|
36
|
-
);
|
|
37
|
-
return { measuredHeight, measuredRef };
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
exports.useMeasuredHeight = useMeasuredHeight;
|
|
41
|
-
//# sourceMappingURL=useMeasuredHeight.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMeasuredHeight.js","sources":["../src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useState } from \"react\";\n\ninterface MeasuredHeightHookProps {\n onHeightMeasured?: (height: number) => void;\n height?: number;\n}\n\nexport const useMeasuredHeight = ({\n onHeightMeasured,\n height: heightProp = 0,\n}: MeasuredHeightHookProps) => {\n const [measuredHeight, setMeasuredHeight] = useState(heightProp);\n\n const resizeObserver = useMemo(() => {\n return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const [{ blockSize: measuredSize }] = entry.borderBoxSize;\n const newHeight = Math.round(measuredSize);\n if (isValidNumber(newHeight)) {\n setMeasuredHeight(newHeight);\n onHeightMeasured?.(newHeight);\n }\n }\n });\n }, [onHeightMeasured]);\n\n const measuredRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el) {\n if (heightProp === 0) {\n const { height } = el.getBoundingClientRect();\n resizeObserver.observe(el);\n // avoids tiny sub-pixel discrepancies\n setMeasuredHeight(Math.round(height));\n }\n } else {\n resizeObserver.disconnect();\n }\n },\n [resizeObserver, heightProp],\n );\n return { measuredHeight, measuredRef };\n};\n"],"names":["useState","useMemo","isValidNumber","useCallback"],"mappings":";;;;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,UAAU,CAAA;AAE/D,EAAM,MAAA,cAAA,GAAiBC,cAAQ,MAAM;AACnC,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,CAAC,EAAE,SAAA,EAAW,YAAa,EAAC,IAAI,KAAM,CAAA,aAAA;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AACzC,QAAI,IAAAC,sBAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,UAAA,iBAAA,CAAkB,SAAS,CAAA;AAC3B,UAAA,gBAAA,GAAmB,SAAS,CAAA;AAAA;AAC9B;AACF,KACD,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,eAAe,CAAG,EAAA;AACpB,UAAA,MAAM,EAAE,MAAA,EAAW,GAAA,EAAA,CAAG,qBAAsB,EAAA;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA;AAEzB,UAAkB,iBAAA,CAAA,IAAA,CAAK,KAAM,CAAA,MAAM,CAAC,CAAA;AAAA;AACtC,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA;AAAA;AAC5B,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,GAC7B;AACA,EAAO,OAAA,EAAE,gBAAgB,WAAY,EAAA;AACvC;;;;"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const createClassNameGenerator = (ids) => {
|
|
7
|
-
const functions = [];
|
|
8
|
-
ids?.forEach((id) => {
|
|
9
|
-
const fn = vuuUtils.getRowClassNameGenerator(id);
|
|
10
|
-
if (fn) {
|
|
11
|
-
functions.push(fn.fn);
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
return (row, columnMap) => {
|
|
15
|
-
const classNames = [];
|
|
16
|
-
functions?.forEach((fn) => {
|
|
17
|
-
const className = fn(row, columnMap);
|
|
18
|
-
if (className) {
|
|
19
|
-
classNames.push(className);
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
return classNames.join(" ");
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
const useRowClassNameGenerators = ({
|
|
26
|
-
rowClassNameGenerators
|
|
27
|
-
}) => {
|
|
28
|
-
return react.useMemo(() => {
|
|
29
|
-
return createClassNameGenerator(rowClassNameGenerators);
|
|
30
|
-
}, [rowClassNameGenerators]);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
exports.useRowClassNameGenerators = useRowClassNameGenerators;
|
|
34
|
-
//# sourceMappingURL=useRowClassNameGenerators.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRowClassNameGenerators.js","sources":["../src/useRowClassNameGenerators.ts"],"sourcesContent":["import { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {\n getRowClassNameGenerator,\n RowClassNameGenerator,\n} from \"@vuu-ui/vuu-utils\";\nimport { useMemo } from \"react\";\n\nconst createClassNameGenerator = (\n ids?: string[],\n): RowClassNameGenerator | undefined => {\n const functions: RowClassNameGenerator[] = [];\n ids?.forEach((id) => {\n const fn = getRowClassNameGenerator(id);\n if (fn) {\n functions.push(fn.fn);\n }\n });\n return (row, columnMap) => {\n const classNames: string[] = [];\n functions?.forEach((fn) => {\n const className = fn(row, columnMap);\n if (className) {\n classNames.push(className);\n }\n });\n return classNames.join(\" \");\n };\n};\n\nexport const useRowClassNameGenerators = ({\n rowClassNameGenerators,\n}: TableConfig) => {\n return useMemo<RowClassNameGenerator | undefined>(() => {\n return createClassNameGenerator(rowClassNameGenerators);\n }, [rowClassNameGenerators]);\n};\n"],"names":["getRowClassNameGenerator","useMemo"],"mappings":";;;;;AAOA,MAAM,wBAAA,GAA2B,CAC/B,GACsC,KAAA;AACtC,EAAA,MAAM,YAAqC,EAAC;AAC5C,EAAK,GAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACnB,IAAM,MAAA,EAAA,GAAKA,kCAAyB,EAAE,CAAA;AACtC,IAAA,IAAI,EAAI,EAAA;AACN,MAAU,SAAA,CAAA,IAAA,CAAK,GAAG,EAAE,CAAA;AAAA;AACtB,GACD,CAAA;AACD,EAAO,OAAA,CAAC,KAAK,SAAc,KAAA;AACzB,IAAA,MAAM,aAAuB,EAAC;AAC9B,IAAW,SAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACzB,MAAM,MAAA,SAAA,GAAY,EAAG,CAAA,GAAA,EAAK,SAAS,CAAA;AACnC,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,UAAA,CAAW,KAAK,SAAS,CAAA;AAAA;AAC3B,KACD,CAAA;AACD,IAAO,OAAA,UAAA,CAAW,KAAK,GAAG,CAAA;AAAA,GAC5B;AACF,CAAA;AAEO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,CAAmB,KAAA;AACjB,EAAA,OAAOC,cAA2C,MAAM;AACtD,IAAA,OAAO,yBAAyB,sBAAsB,CAAA;AAAA,GACxD,EAAG,CAAC,sBAAsB,CAAC,CAAA;AAC7B;;;;"}
|
package/cjs/useSelection.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var tableDomUtils = require('./table-dom-utils.js');
|
|
6
|
-
|
|
7
|
-
const { IDX } = vuuUtils.metadataKeys;
|
|
8
|
-
const NO_SELECTION = [];
|
|
9
|
-
const defaultSelectionKeys = ["Enter", " "];
|
|
10
|
-
const useSelection = ({
|
|
11
|
-
containerRef,
|
|
12
|
-
defaultSelectedIndexValues = NO_SELECTION,
|
|
13
|
-
highlightedIndexRef,
|
|
14
|
-
selectionKeys = defaultSelectionKeys,
|
|
15
|
-
selectionModel,
|
|
16
|
-
onSelect,
|
|
17
|
-
onSelectionChange
|
|
18
|
-
}) => {
|
|
19
|
-
const lastActiveRef = react.useRef(-1);
|
|
20
|
-
const selectedRef = react.useRef(defaultSelectedIndexValues);
|
|
21
|
-
const isSelectionEvent = react.useCallback(
|
|
22
|
-
(evt) => selectionKeys.includes(evt.key),
|
|
23
|
-
[selectionKeys]
|
|
24
|
-
);
|
|
25
|
-
const handleRowClick = react.useCallback(
|
|
26
|
-
(e, row, rangeSelect, keepExistingSelection) => {
|
|
27
|
-
const { [IDX]: idx } = row;
|
|
28
|
-
const { current: active } = lastActiveRef;
|
|
29
|
-
const { current: selected } = selectedRef;
|
|
30
|
-
const selectOperation = vuuUtils.isRowSelected(row) ? vuuUtils.deselectItem : vuuUtils.selectItem;
|
|
31
|
-
if (selectionModel === "checkbox") {
|
|
32
|
-
const cell = vuuUtils.queryClosest(e.target, ".vuuTableCell");
|
|
33
|
-
if (!cell?.querySelector(".vuuCheckboxRowSelector")) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
const newSelected = selectOperation(
|
|
38
|
-
selectionModel,
|
|
39
|
-
selected,
|
|
40
|
-
idx,
|
|
41
|
-
rangeSelect,
|
|
42
|
-
keepExistingSelection,
|
|
43
|
-
active
|
|
44
|
-
);
|
|
45
|
-
selectedRef.current = newSelected;
|
|
46
|
-
lastActiveRef.current = idx;
|
|
47
|
-
onSelect?.(selectOperation === vuuUtils.selectItem ? row : null);
|
|
48
|
-
onSelectionChange?.(newSelected);
|
|
49
|
-
},
|
|
50
|
-
[onSelect, onSelectionChange, selectionModel]
|
|
51
|
-
);
|
|
52
|
-
const handleKeyDown = react.useCallback(
|
|
53
|
-
(e) => {
|
|
54
|
-
if (isSelectionEvent(e)) {
|
|
55
|
-
const { current: rowIndex } = highlightedIndexRef;
|
|
56
|
-
const { current: container } = containerRef;
|
|
57
|
-
if (rowIndex !== void 0 && rowIndex !== -1 && container) {
|
|
58
|
-
const rowEl = tableDomUtils.getRowElementByAriaIndex(container, rowIndex);
|
|
59
|
-
if (rowEl) {
|
|
60
|
-
vuuUtils.dispatchMouseEvent(rowEl, "click");
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
[containerRef, highlightedIndexRef, isSelectionEvent]
|
|
66
|
-
);
|
|
67
|
-
return {
|
|
68
|
-
onKeyDown: handleKeyDown,
|
|
69
|
-
onRowClick: handleRowClick
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
exports.useSelection = useSelection;
|
|
74
|
-
//# sourceMappingURL=useSelection.js.map
|
package/cjs/useSelection.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSelection.js","sources":["../src/useSelection.ts"],"sourcesContent":["import {\n TableRowClickHandlerInternal,\n TableRowSelectHandlerInternal,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n deselectItem,\n dispatchMouseEvent,\n isRowSelected,\n metadataKeys,\n queryClosest,\n selectItem,\n} from \"@vuu-ui/vuu-utils\";\nimport { Selection } from \"@vuu-ui/vuu-data-types\";\nimport {\n KeyboardEvent,\n KeyboardEventHandler,\n RefObject,\n useCallback,\n useRef,\n} from \"react\";\nimport { getRowElementByAriaIndex } from \"./table-dom-utils\";\nimport { TableProps } from \"./Table\";\n\nconst { IDX } = metadataKeys;\n\nconst NO_SELECTION: Selection = [];\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps\n extends Pick<TableProps, \"defaultSelectedIndexValues\" | \"onSelectionChange\"> {\n containerRef: RefObject<HTMLElement | null>;\n highlightedIndexRef: RefObject<number | undefined>;\n selectionKeys?: string[];\n selectionModel: TableSelectionModel;\n onSelect?: TableRowSelectHandlerInternal;\n}\n\nexport const useSelection = ({\n containerRef,\n defaultSelectedIndexValues = NO_SELECTION,\n highlightedIndexRef,\n selectionKeys = defaultSelectionKeys,\n selectionModel,\n onSelect,\n onSelectionChange,\n}: SelectionHookProps) => {\n selectionModel === \"extended\" || selectionModel === \"checkbox\";\n const lastActiveRef = useRef(-1);\n const selectedRef = useRef<Selection>(defaultSelectedIndexValues);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const handleRowClick = useCallback<TableRowClickHandlerInternal>(\n (e, row, rangeSelect, keepExistingSelection) => {\n const { [IDX]: idx } = row;\n const { current: active } = lastActiveRef;\n const { current: selected } = selectedRef;\n\n const selectOperation = isRowSelected(row) ? deselectItem : selectItem;\n\n if (selectionModel === \"checkbox\") {\n const cell = queryClosest(e.target, \".vuuTableCell\");\n if (!cell?.querySelector(\".vuuCheckboxRowSelector\")) {\n return;\n }\n }\n\n const newSelected = selectOperation(\n selectionModel,\n selected,\n idx,\n rangeSelect,\n keepExistingSelection,\n active,\n );\n\n selectedRef.current = newSelected;\n lastActiveRef.current = idx;\n\n onSelect?.(selectOperation === selectItem ? row : null);\n onSelectionChange?.(newSelected);\n },\n [onSelect, onSelectionChange, selectionModel],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n (e) => {\n if (isSelectionEvent(e)) {\n const { current: rowIndex } = highlightedIndexRef;\n const { current: container } = containerRef;\n if (rowIndex !== undefined && rowIndex !== -1 && container) {\n const rowEl = getRowElementByAriaIndex(container, rowIndex);\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [containerRef, highlightedIndexRef, isSelectionEvent],\n );\n\n return {\n onKeyDown: handleKeyDown,\n onRowClick: handleRowClick,\n };\n};\n"],"names":["metadataKeys","useRef","useCallback","isRowSelected","deselectItem","selectItem","queryClosest","getRowElementByAriaIndex","dispatchMouseEvent"],"mappings":";;;;;;AAwBA,MAAM,EAAE,KAAQ,GAAAA,qBAAA;AAEhB,MAAM,eAA0B,EAAC;AAEjC,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAWnC,MAAM,eAAe,CAAC;AAAA,EAC3B,YAAA;AAAA,EACA,0BAA6B,GAAA,YAAA;AAAA,EAC7B,mBAAA;AAAA,EACA,aAAgB,GAAA,oBAAA;AAAA,EAChB,cAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA0B,KAAA;AAExB,EAAM,MAAA,aAAA,GAAgBC,aAAO,CAAE,CAAA,CAAA;AAC/B,EAAM,MAAA,WAAA,GAAcA,aAAkB,0BAA0B,CAAA;AAEhE,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAoC,aAAc,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACnE,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,CAAA,EAAG,GAAK,EAAA,WAAA,EAAa,qBAA0B,KAAA;AAC9C,MAAA,MAAM,EAAE,CAAC,GAAG,GAAG,KAAQ,GAAA,GAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,aAAA;AAC5B,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAE9B,MAAA,MAAM,eAAkB,GAAAC,sBAAA,CAAc,GAAG,CAAA,GAAIC,qBAAe,GAAAC,mBAAA;AAE5D,MAAA,IAAI,mBAAmB,UAAY,EAAA;AACjC,QAAA,MAAM,IAAO,GAAAC,qBAAA,CAAa,CAAE,CAAA,MAAA,EAAQ,eAAe,CAAA;AACnD,QAAA,IAAI,CAAC,IAAA,EAAM,aAAc,CAAA,yBAAyB,CAAG,EAAA;AACnD,UAAA;AAAA;AACF;AAGF,MAAA,MAAM,WAAc,GAAA,eAAA;AAAA,QAClB,cAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA,qBAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,WAAA,CAAY,OAAU,GAAA,WAAA;AACtB,MAAA,aAAA,CAAc,OAAU,GAAA,GAAA;AAExB,MAAW,QAAA,GAAA,eAAA,KAAoBD,mBAAa,GAAA,GAAA,GAAM,IAAI,CAAA;AACtD,MAAA,iBAAA,GAAoB,WAAW,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAU,EAAA,iBAAA,EAAmB,cAAc;AAAA,GAC9C;AAEA,EAAA,MAAM,aAAgB,GAAAH,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,gBAAA,CAAiB,CAAC,CAAG,EAAA;AACvB,QAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,mBAAA;AAC9B,QAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA;AAC/B,QAAA,IAAI,QAAa,KAAA,KAAA,CAAA,IAAa,QAAa,KAAA,CAAA,CAAA,IAAM,SAAW,EAAA;AAC1D,UAAM,MAAA,KAAA,GAAQK,sCAAyB,CAAA,SAAA,EAAW,QAAQ,CAAA;AAC1D,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA;AAAA;AACnC;AACF;AACF,KACF;AAAA,IACA,CAAC,YAAc,EAAA,mBAAA,EAAqB,gBAAgB;AAAA,GACtD;AAEA,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,GACd;AACF;;;;"}
|