@gooddata/sdk-ui-pivot 11.42.0-alpha.4 → 11.42.0-alpha.5
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/esm/next/constants/agGridDefaultProps.d.ts.map +1 -1
- package/esm/next/constants/agGridDefaultProps.js +54 -0
- package/esm/next/hooks/useFocusManagementProps.d.ts +10 -7
- package/esm/next/hooks/useFocusManagementProps.d.ts.map +1 -1
- package/esm/next/hooks/useFocusManagementProps.js +11 -62
- package/package.json +13 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agGridDefaultProps.d.ts","sourceRoot":"","sources":["../../../src/next/constants/agGridDefaultProps.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"agGridDefaultProps.d.ts","sourceRoot":"","sources":["../../../src/next/constants/agGridDefaultProps.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAkEtD;;;GAGG;AACH,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAuFxD;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAenC,CAAC"}
|
|
@@ -2,6 +2,56 @@
|
|
|
2
2
|
import { merge } from "lodash-es";
|
|
3
3
|
import { LoadingComponent } from "@gooddata/sdk-ui";
|
|
4
4
|
import { HEADER_CELL_CLASSNAME } from "../features/styling/bem.js";
|
|
5
|
+
/**
|
|
6
|
+
* AG Grid's suppressKeyboardEvent lets us control which keyboard events AG Grid processes
|
|
7
|
+
* vs which ones should bubble up to the browser.
|
|
8
|
+
*
|
|
9
|
+
* Returning true = suppress AG Grid's handling, let our custom handler process it.
|
|
10
|
+
* Returning false = let AG Grid handle the event.
|
|
11
|
+
*
|
|
12
|
+
* This is a column-level (ColDef) property, so it lives on defaultColDef. It is a static
|
|
13
|
+
* function kept on the stable default props on purpose: deriving it inside a hook would
|
|
14
|
+
* change the defaultColDef reference whenever the hook re-runs, making AG Grid re-apply
|
|
15
|
+
* column defaults and discard the growToFit column sizing applied on the initial render.
|
|
16
|
+
*/
|
|
17
|
+
function suppressKeyboardEvent(params) {
|
|
18
|
+
const { event } = params;
|
|
19
|
+
const { key } = event;
|
|
20
|
+
// Prevent Space key from scrolling the page
|
|
21
|
+
if (key === " " || key === "Space") {
|
|
22
|
+
event.preventDefault();
|
|
23
|
+
}
|
|
24
|
+
// Suppress Tab - handled in onCellKeyDown (useInteractionProps.ts)
|
|
25
|
+
if (key === "Tab") {
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
// Suppress custom navigation keys - handled in onCellKeyDown (useInteractionProps.ts):
|
|
29
|
+
// - Home/End (custom row navigation)
|
|
30
|
+
// - Ctrl+Home/End (jump to first/last cell in grid)
|
|
31
|
+
const isCustomNavigationKey = key === "Home" || key === "End";
|
|
32
|
+
if (isCustomNavigationKey) {
|
|
33
|
+
return true;
|
|
34
|
+
}
|
|
35
|
+
// Let AG Grid handle standard navigation keys:
|
|
36
|
+
const isStandardNavigationKey = key === "ArrowUp" ||
|
|
37
|
+
key === "ArrowDown" ||
|
|
38
|
+
key === "ArrowLeft" ||
|
|
39
|
+
key === "ArrowRight" ||
|
|
40
|
+
key === "PageUp" ||
|
|
41
|
+
key === "PageDown";
|
|
42
|
+
return !isStandardNavigationKey;
|
|
43
|
+
}
|
|
44
|
+
function suppressHeaderKeyboardEvent(params) {
|
|
45
|
+
const { event } = params;
|
|
46
|
+
const { key } = event;
|
|
47
|
+
// Prevent Space key from scrolling the page
|
|
48
|
+
// The actual Space key handling for actions is done in header components via useEffect
|
|
49
|
+
if (key === " " || key === "Space") {
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
}
|
|
52
|
+
// Let AG Grid handle all events normally
|
|
53
|
+
return false;
|
|
54
|
+
}
|
|
5
55
|
/**
|
|
6
56
|
* Separator used to generate colId for pivoted values (by joining local identifiers and header values of the pivoting path to the value).
|
|
7
57
|
* @internal
|
|
@@ -35,6 +85,10 @@ const NAVIGATION_PROPS = {
|
|
|
35
85
|
processRowPostCreate: (params) => {
|
|
36
86
|
params.eRow.setAttribute("tabindex", "-1");
|
|
37
87
|
},
|
|
88
|
+
defaultColDef: {
|
|
89
|
+
suppressKeyboardEvent,
|
|
90
|
+
suppressHeaderKeyboardEvent,
|
|
91
|
+
},
|
|
38
92
|
};
|
|
39
93
|
const PAGINATION_PROPS = {
|
|
40
94
|
paginationPageSizeSelector: false,
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { type AgGridProps } from "../types/agGrid.js";
|
|
2
2
|
/**
|
|
3
|
-
* Hook that provides AG Grid props for
|
|
3
|
+
* Hook that provides AG Grid props for focus management.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* -
|
|
10
|
-
*
|
|
5
|
+
* Keyboard navigation behavior (Tab/Arrow/Home/End/Page handling) is driven by the
|
|
6
|
+
* static suppressKeyboardEvent / suppressHeaderKeyboardEvent callbacks living on
|
|
7
|
+
* defaultColDef in AG_GRID_DEFAULT_PROPS - they are column-level (ColDef) properties,
|
|
8
|
+
* not grid options, and keeping them on the stable default props avoids changing the
|
|
9
|
+
* defaultColDef reference on re-renders (which would make AG Grid re-apply column
|
|
10
|
+
* defaults and discard the growToFit column sizing applied on the initial render).
|
|
11
|
+
*
|
|
12
|
+
* This hook only wires the header-focus handler, which depends on the grid api and is
|
|
13
|
+
* therefore not static:
|
|
11
14
|
* - Header focus: Clears body cell selection when focus moves to header
|
|
12
15
|
*
|
|
13
16
|
* @alpha
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusManagementProps.d.ts","sourceRoot":"","sources":["../../../src/next/hooks/useFocusManagementProps.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useFocusManagementProps.d.ts","sourceRoot":"","sources":["../../../src/next/hooks/useFocusManagementProps.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAItD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,IAAI,CAAC,gBAAgB,EAAE,WAAW,KAAK,WAAW,CAqBxF"}
|
|
@@ -3,85 +3,34 @@ import { useCallback } from "react";
|
|
|
3
3
|
import { UnexpectedSdkError } from "@gooddata/sdk-ui";
|
|
4
4
|
import { useClearCellSelection } from "./useClearCellSelection.js";
|
|
5
5
|
/**
|
|
6
|
-
* Hook that provides AG Grid props for
|
|
6
|
+
* Hook that provides AG Grid props for focus management.
|
|
7
7
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* -
|
|
13
|
-
*
|
|
8
|
+
* Keyboard navigation behavior (Tab/Arrow/Home/End/Page handling) is driven by the
|
|
9
|
+
* static suppressKeyboardEvent / suppressHeaderKeyboardEvent callbacks living on
|
|
10
|
+
* defaultColDef in AG_GRID_DEFAULT_PROPS - they are column-level (ColDef) properties,
|
|
11
|
+
* not grid options, and keeping them on the stable default props avoids changing the
|
|
12
|
+
* defaultColDef reference on re-renders (which would make AG Grid re-apply column
|
|
13
|
+
* defaults and discard the growToFit column sizing applied on the initial render).
|
|
14
|
+
*
|
|
15
|
+
* This hook only wires the header-focus handler, which depends on the grid api and is
|
|
16
|
+
* therefore not static:
|
|
14
17
|
* - Header focus: Clears body cell selection when focus moves to header
|
|
15
18
|
*
|
|
16
19
|
* @alpha
|
|
17
20
|
*/
|
|
18
21
|
export function useFocusManagementProps() {
|
|
19
22
|
const clearCellSelection = useClearCellSelection();
|
|
20
|
-
/**
|
|
21
|
-
* AG Grid's suppressKeyboardEvent allows us to control which keyboard events
|
|
22
|
-
* AG Grid processes vs which ones should bubble up to the browser.
|
|
23
|
-
*
|
|
24
|
-
* Returning true = suppress AG Grid's handling, let custom handler process it
|
|
25
|
-
* Returning false = let AG Grid handle the event
|
|
26
|
-
*/
|
|
27
|
-
const suppressKeyboardEvent = useCallback((params) => {
|
|
28
|
-
const { event } = params;
|
|
29
|
-
const { key } = event;
|
|
30
|
-
// Prevent Space key from scrolling the page
|
|
31
|
-
if (key === " " || key === "Space") {
|
|
32
|
-
event.preventDefault();
|
|
33
|
-
}
|
|
34
|
-
// Suppress Tab - handled in onCellKeyDown (useInteractionProps.ts)
|
|
35
|
-
if (key === "Tab") {
|
|
36
|
-
return true;
|
|
37
|
-
}
|
|
38
|
-
// Suppress custom navigation keys - handled in onCellKeyDown (useInteractionProps.ts):
|
|
39
|
-
// - Home/End (custom row navigation)
|
|
40
|
-
// - Ctrl+Home/End (jump to first/last cell in grid)
|
|
41
|
-
const isCustomNavigationKey = key === "Home" || key === "End";
|
|
42
|
-
if (isCustomNavigationKey) {
|
|
43
|
-
return true;
|
|
44
|
-
}
|
|
45
|
-
// Let AG Grid handle standard navigation keys:
|
|
46
|
-
const isStandardNavigationKey = key === "ArrowUp" ||
|
|
47
|
-
key === "ArrowDown" ||
|
|
48
|
-
key === "ArrowLeft" ||
|
|
49
|
-
key === "ArrowRight" ||
|
|
50
|
-
key === "PageUp" ||
|
|
51
|
-
key === "PageDown";
|
|
52
|
-
return !isStandardNavigationKey;
|
|
53
|
-
}, []);
|
|
54
|
-
const suppressHeaderKeyboardEvent = useCallback((params) => {
|
|
55
|
-
const { event } = params;
|
|
56
|
-
const { key } = event;
|
|
57
|
-
// Prevent Space key from scrolling the page
|
|
58
|
-
// The actual Space key handling for actions is done in header components via useEffect
|
|
59
|
-
if (key === " " || key === "Space") {
|
|
60
|
-
event.preventDefault();
|
|
61
|
-
}
|
|
62
|
-
// Let AG Grid handle all events normally
|
|
63
|
-
return false;
|
|
64
|
-
}, []);
|
|
65
23
|
const onHeaderFocused = useCallback(() => {
|
|
66
24
|
// Clear body cell selection when header receives focus
|
|
67
25
|
clearCellSelection();
|
|
68
26
|
}, [clearCellSelection]);
|
|
69
27
|
return useCallback((agGridReactProps) => {
|
|
70
|
-
if ("suppressKeyboardEvent" in agGridReactProps && agGridReactProps.suppressKeyboardEvent) {
|
|
71
|
-
throw new UnexpectedSdkError("suppressKeyboardEvent is already set");
|
|
72
|
-
}
|
|
73
|
-
if ("suppressHeaderKeyboardEvent" in agGridReactProps &&
|
|
74
|
-
agGridReactProps.suppressHeaderKeyboardEvent) {
|
|
75
|
-
throw new UnexpectedSdkError("suppressHeaderKeyboardEvent is already set");
|
|
76
|
-
}
|
|
77
28
|
if (agGridReactProps.onHeaderFocused) {
|
|
78
29
|
throw new UnexpectedSdkError("onHeaderFocused is already set");
|
|
79
30
|
}
|
|
80
31
|
return {
|
|
81
32
|
...agGridReactProps,
|
|
82
|
-
suppressKeyboardEvent,
|
|
83
|
-
suppressHeaderKeyboardEvent,
|
|
84
33
|
onHeaderFocused,
|
|
85
34
|
};
|
|
86
|
-
}, [
|
|
35
|
+
}, [onHeaderFocused]);
|
|
87
36
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gooddata/sdk-ui-pivot",
|
|
3
|
-
"version": "11.42.0-alpha.
|
|
3
|
+
"version": "11.42.0-alpha.5",
|
|
4
4
|
"description": "GoodData.UI SDK - Pivot Table",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "GoodData Corporation",
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"ts-invariant": "0.10.3",
|
|
44
44
|
"tslib": "2.8.1",
|
|
45
45
|
"uuid": "11.1.1",
|
|
46
|
-
"@gooddata/sdk-backend-spi": "11.42.0-alpha.
|
|
47
|
-
"@gooddata/sdk-
|
|
48
|
-
"@gooddata/sdk-
|
|
49
|
-
"@gooddata/sdk-ui-
|
|
50
|
-
"@gooddata/sdk-ui-
|
|
51
|
-
"@gooddata/sdk-ui-vis-commons": "11.42.0-alpha.
|
|
46
|
+
"@gooddata/sdk-backend-spi": "11.42.0-alpha.5",
|
|
47
|
+
"@gooddata/sdk-ui": "11.42.0-alpha.5",
|
|
48
|
+
"@gooddata/sdk-model": "11.42.0-alpha.5",
|
|
49
|
+
"@gooddata/sdk-ui-theme-provider": "11.42.0-alpha.5",
|
|
50
|
+
"@gooddata/sdk-ui-kit": "11.42.0-alpha.5",
|
|
51
|
+
"@gooddata/sdk-ui-vis-commons": "11.42.0-alpha.5"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@microsoft/api-documenter": "^7.17.0",
|
|
@@ -90,12 +90,12 @@
|
|
|
90
90
|
"typescript": "5.9.3",
|
|
91
91
|
"vitest": "4.1.8",
|
|
92
92
|
"vitest-dom": "0.1.1",
|
|
93
|
-
"@gooddata/eslint-config": "11.42.0-alpha.
|
|
94
|
-
"@gooddata/oxlint-config": "11.42.0-alpha.
|
|
95
|
-
"@gooddata/reference-workspace": "11.42.0-alpha.
|
|
96
|
-
"@gooddata/sdk-backend-base": "11.42.0-alpha.
|
|
97
|
-
"@gooddata/
|
|
98
|
-
"@gooddata/
|
|
93
|
+
"@gooddata/eslint-config": "11.42.0-alpha.5",
|
|
94
|
+
"@gooddata/oxlint-config": "11.42.0-alpha.5",
|
|
95
|
+
"@gooddata/reference-workspace": "11.42.0-alpha.5",
|
|
96
|
+
"@gooddata/sdk-backend-base": "11.42.0-alpha.5",
|
|
97
|
+
"@gooddata/stylelint-config": "11.42.0-alpha.5",
|
|
98
|
+
"@gooddata/sdk-backend-mockingbird": "11.42.0-alpha.5"
|
|
99
99
|
},
|
|
100
100
|
"peerDependencies": {
|
|
101
101
|
"react": "^18.0.0 || ^19.0.0",
|