@azrico/reactgrid 1.6.7 → 1.6.10

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 (11) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/config/theme-extras.css +120 -111
  3. package/dist/src/hooks/useGridEvents.js +0 -8
  4. package/dist/src/themes/azgrid-theme.css +120 -111
  5. package/dist/src/types/types.d.ts +1 -1
  6. package/dist/src/views/DataGrid.js +2 -1
  7. package/package.json +62 -67
  8. package/src/hooks/useGridEvents.ts +0 -9
  9. package/src/themes/azgrid-theme.css +120 -111
  10. package/src/types/types.ts +1 -1
  11. package/src/views/DataGrid.tsx +1 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. See [standa
4
4
 
5
5
  ### Unreleased
6
6
 
7
+ * Fix rows stopping 3px short of the grid's right and bottom edges. The grid's native scroller is now hidden (`scrollbar-width: none`) in the base theme stylesheet; `scrollbar-color` made Chrome use a 15px standard scrollbar that overflowed the 12px offset. The custom scrollbars are unaffected.
7
8
  * Make closing the row context menu with Escape opt-in through `escapeClosesContextMenu` (default `false`).
8
9
  * Keep the right-clicked row highlighted with the theme's hover colours while its context menu is open, preserving caller row classes and clearing the highlight on close. Correct row hover rules to use hover tokens instead of empty-state tokens.
9
10
  * Add `dontAutoCloseContextMenu` to keep the row context menu open on outside clicks, and `hideContextMenu` to hide it while leaving the browser's context menu available.
package/config/theme-extras.css CHANGED
@@ -1,111 +1,120 @@
1
- /* Keep the menu row in its hover state while the pointer is in the portaled menu.
2
- * Match the strongest selected-row :hover selectors, including their cells. */
3
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
4
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
5
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
6
- background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
7
- color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
8
- }
9
-
10
- /* Additional surfaces and typography not assigned colours by Inovua. */
11
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
12
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
13
- }
14
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
15
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
16
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
17
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
18
- }
19
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
20
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
21
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
22
- }
23
- .azgrid.InovuaReactDataGrid {
24
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
25
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
26
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
27
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
28
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
29
- }
30
- .azgrid .InovuaReactDataGrid__column-header__content,
31
- .azgrid .InovuaReactDataGrid__header-group__title {
32
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
33
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
34
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
35
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
36
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
37
- }
38
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
39
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
40
- }
41
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
42
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
43
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
44
- }
45
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
46
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
47
- }
48
- .azgrid .InovuaReactDataGrid__empty-wrapper {
49
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
50
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
51
- }
52
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
53
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
54
- }
55
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
56
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
57
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
58
- }
59
- .azgrid-scope input,
60
- .azgrid-scope select,
61
- .azgrid-scope .azgrid-searcharea {
62
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
63
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
64
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
65
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
66
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
67
- }
68
- .azgrid-scope input::placeholder {
69
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
70
- }
71
- .azgrid-scope input:focus-visible,
72
- .azgrid-scope select:focus-visible {
73
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
74
- }
75
- .azgrid-scope .inovua-react-pagination-toolbar input,
76
- .azgrid-scope .inovua-react-pagination-toolbar select {
77
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
78
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
79
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
80
- }
81
- .azgrid-scope .inovua-react-toolkit-text-input,
82
- .azgrid-scope .inovua-react-toolkit-combo-box,
83
- .azgrid-scope .inovua-react-toolkit-menu {
84
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
85
- }
86
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
87
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
88
- * Two classes exceed @azrico/controls' single-class menu rules. */
89
- .azgrid-context-menu.azrico-controls-contextmenu {
90
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
91
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
92
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
93
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
94
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
95
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
96
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
97
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
98
- }
99
- .azgrid-scope, .azgrid-scope * {
100
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
101
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
102
- }
103
- .azgrid-scope ::-webkit-scrollbar-track {
104
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
105
- }
106
- .azgrid-scope ::-webkit-scrollbar-thumb {
107
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
108
- }
109
- .azgrid .InovuaReactDataGrid__row.deleted:after {
110
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
111
- }
1
+ /* Keep the menu row in its hover state while the pointer is in the portaled menu.
2
+ * Match the strongest selected-row :hover selectors, including their cells. */
3
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
4
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
5
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
6
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
7
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
8
+ }
9
+
10
+ /* Additional surfaces and typography not assigned colours by Inovua. */
11
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
12
+ background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
13
+ }
14
+ .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
15
+ .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
16
+ background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
17
+ color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
18
+ }
19
+ .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
20
+ .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
21
+ fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
22
+ }
23
+ .azgrid.InovuaReactDataGrid {
24
+ background: var(--azgrid-bg, var(--azgrid-preset-bg));
25
+ color: var(--azgrid-fg, var(--azgrid-preset-fg));
26
+ border-color: var(--azgrid-border, var(--azgrid-preset-border));
27
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
28
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
29
+ }
30
+ .azgrid .InovuaReactDataGrid__column-header__content,
31
+ .azgrid .InovuaReactDataGrid__header-group__title {
32
+ color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
33
+ font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
34
+ font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
35
+ text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
36
+ letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
37
+ }
38
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
39
+ border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
40
+ }
41
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
42
+ /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
43
+ border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
44
+ }
45
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
46
+ padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
47
+ }
48
+ .azgrid .InovuaReactDataGrid__empty-wrapper {
49
+ background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
50
+ color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
51
+ }
52
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
53
+ background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
54
+ }
55
+ .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
56
+ .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
57
+ box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
58
+ }
59
+ .azgrid-scope input,
60
+ .azgrid-scope select,
61
+ .azgrid-scope .azgrid-searcharea {
62
+ color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
63
+ background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
64
+ border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
65
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
66
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
67
+ }
68
+ .azgrid-scope input::placeholder {
69
+ color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
70
+ }
71
+ .azgrid-scope input:focus-visible,
72
+ .azgrid-scope select:focus-visible {
73
+ outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
74
+ }
75
+ .azgrid-scope .inovua-react-pagination-toolbar input,
76
+ .azgrid-scope .inovua-react-pagination-toolbar select {
77
+ background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
78
+ color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
79
+ border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
80
+ }
81
+ .azgrid-scope .inovua-react-toolkit-text-input,
82
+ .azgrid-scope .inovua-react-toolkit-combo-box,
83
+ .azgrid-scope .inovua-react-toolkit-menu {
84
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
85
+ }
86
+ /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
87
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
88
+ * Two classes exceed @azrico/controls' single-class menu rules. */
89
+ .azgrid-context-menu.azrico-controls-contextmenu {
90
+ --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
91
+ --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
92
+ --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
93
+ --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
94
+ --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
95
+ --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
96
+ --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
97
+ border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
98
+ }
99
+ .azgrid-scope, .azgrid-scope * {
100
+ accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
101
+ scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
102
+ }
103
+ .azgrid-scope ::-webkit-scrollbar-track {
104
+ background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
105
+ }
106
+ .azgrid-scope ::-webkit-scrollbar-thumb {
107
+ background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
108
+ }
109
+ /* The grid draws its own scrollbars and pushes the native one out of view by a
110
+ fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
111
+ scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
112
+ .azgrid-scope .inovua-react-scroll-container__wrapper > div {
113
+ scrollbar-width: none;
114
+ }
115
+ .azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
116
+ display: none;
117
+ }
118
+ .azgrid .InovuaReactDataGrid__row.deleted:after {
119
+ border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
120
+ }
package/dist/src/hooks/useGridEvents.js CHANGED
@@ -80,14 +80,6 @@ function useGridEvents(grid, props) {
80
80
  _react.default.useEffect(() => {
81
81
  if (props.hideContextMenu || !props.contextMenuItems) update_menuRow(null, null);
82
82
  }, [props.hideContextMenu, props.contextMenuItems, update_menuRow]);
83
- _react.default.useEffect(() => {
84
- if (!menuAnchorEl || !props.escapeClosesContextMenu) return;
85
- const onKeyDown = event => {
86
- if (event.key === 'Escape') update_menuRow(null, null);
87
- };
88
- document.addEventListener('keydown', onKeyDown);
89
- return () => document.removeEventListener('keydown', onKeyDown);
90
- }, [menuAnchorEl, props.escapeClosesContextMenu, update_menuRow]);
91
83
  const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
92
84
  if (latestProps.current.hideContextMenu || event.defaultPrevented || !rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
93
85
  update_menuRow(null, null);
package/dist/src/themes/azgrid-theme.css CHANGED
@@ -1934,114 +1934,123 @@
1934
1934
  fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1935
1935
  }
1936
1936
 
1937
- /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
- * Match the strongest selected-row :hover selectors, including their cells. */
1939
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
- background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
- color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
- }
1945
-
1946
- /* Additional surfaces and typography not assigned colours by Inovua. */
1947
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
- }
1950
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
- }
1955
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
- }
1959
- .azgrid.InovuaReactDataGrid {
1960
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
- }
1966
- .azgrid .InovuaReactDataGrid__column-header__content,
1967
- .azgrid .InovuaReactDataGrid__header-group__title {
1968
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
- }
1974
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
- }
1977
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
- }
1981
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
- }
1984
- .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
- }
1988
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
- }
1991
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
- }
1995
- .azgrid-scope input,
1996
- .azgrid-scope select,
1997
- .azgrid-scope .azgrid-searcharea {
1998
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
- }
2004
- .azgrid-scope input::placeholder {
2005
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
- }
2007
- .azgrid-scope input:focus-visible,
2008
- .azgrid-scope select:focus-visible {
2009
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
- }
2011
- .azgrid-scope .inovua-react-pagination-toolbar input,
2012
- .azgrid-scope .inovua-react-pagination-toolbar select {
2013
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
- }
2017
- .azgrid-scope .inovua-react-toolkit-text-input,
2018
- .azgrid-scope .inovua-react-toolkit-combo-box,
2019
- .azgrid-scope .inovua-react-toolkit-menu {
2020
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
- }
2022
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
- * Two classes exceed @azrico/controls' single-class menu rules. */
2025
- .azgrid-context-menu.azrico-controls-contextmenu {
2026
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
- }
2035
- .azgrid-scope, .azgrid-scope * {
2036
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
- }
2039
- .azgrid-scope ::-webkit-scrollbar-track {
2040
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
- }
2042
- .azgrid-scope ::-webkit-scrollbar-thumb {
2043
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
- }
2045
- .azgrid .InovuaReactDataGrid__row.deleted:after {
2046
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2047
- }
1937
+ /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
+ * Match the strongest selected-row :hover selectors, including their cells. */
1939
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
+ }
1945
+
1946
+ /* Additional surfaces and typography not assigned colours by Inovua. */
1947
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
+ background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
+ }
1950
+ .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
+ .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
+ background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
+ color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
+ }
1955
+ .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
+ .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
+ fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
+ }
1959
+ .azgrid.InovuaReactDataGrid {
1960
+ background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
+ color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
+ border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
+ }
1966
+ .azgrid .InovuaReactDataGrid__column-header__content,
1967
+ .azgrid .InovuaReactDataGrid__header-group__title {
1968
+ color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
+ font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
+ font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
+ text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
+ letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
+ }
1974
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
+ border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
+ }
1977
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
+ /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
+ border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
+ }
1981
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
+ padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
+ }
1984
+ .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
+ background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
+ color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
+ }
1988
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
+ background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
+ }
1991
+ .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
+ .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
+ box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
+ }
1995
+ .azgrid-scope input,
1996
+ .azgrid-scope select,
1997
+ .azgrid-scope .azgrid-searcharea {
1998
+ color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
+ background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
+ border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
+ }
2004
+ .azgrid-scope input::placeholder {
2005
+ color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
+ }
2007
+ .azgrid-scope input:focus-visible,
2008
+ .azgrid-scope select:focus-visible {
2009
+ outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
+ }
2011
+ .azgrid-scope .inovua-react-pagination-toolbar input,
2012
+ .azgrid-scope .inovua-react-pagination-toolbar select {
2013
+ background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
+ color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
+ border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
+ }
2017
+ .azgrid-scope .inovua-react-toolkit-text-input,
2018
+ .azgrid-scope .inovua-react-toolkit-combo-box,
2019
+ .azgrid-scope .inovua-react-toolkit-menu {
2020
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
+ }
2022
+ /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
+ * Two classes exceed @azrico/controls' single-class menu rules. */
2025
+ .azgrid-context-menu.azrico-controls-contextmenu {
2026
+ --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
+ --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
+ --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
+ --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
+ --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
+ --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
+ --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
+ border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
+ }
2035
+ .azgrid-scope, .azgrid-scope * {
2036
+ accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
+ scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
+ }
2039
+ .azgrid-scope ::-webkit-scrollbar-track {
2040
+ background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
+ }
2042
+ .azgrid-scope ::-webkit-scrollbar-thumb {
2043
+ background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
+ }
2045
+ /* The grid draws its own scrollbars and pushes the native one out of view by a
2046
+ fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
2047
+ scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
2048
+ .azgrid-scope .inovua-react-scroll-container__wrapper > div {
2049
+ scrollbar-width: none;
2050
+ }
2051
+ .azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
2052
+ display: none;
2053
+ }
2054
+ .azgrid .InovuaReactDataGrid__row.deleted:after {
2055
+ border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2056
+ }
package/dist/src/types/types.d.ts CHANGED
@@ -67,7 +67,7 @@ export type AzGridProps = {
67
67
  gridRef?: React.MutableRefObject<TypeComputedProps>;
68
68
  gridOptions?: AzGridOptions;
69
69
  columns?: LooseColumnDefinition[];
70
- columnExtensions?: Partial<LooseColumnDefinition>;
70
+ columnExtensions?: LooseColumnDefinition[];
71
71
  editableColumns?: string[];
72
72
  leftColumns?: string[];
73
73
  rightColumns?: string[];
package/dist/src/views/DataGrid.js CHANGED
@@ -121,7 +121,7 @@ function AzGrid(props) {
121
121
  * @returns
122
122
  */
123
123
  function DataGridEventsWrapper(props) {
124
- var _props$theme, _props$static_gridOpt, _props$dontAutoCloseC;
124
+ var _props$theme, _props$static_gridOpt, _props$dontAutoCloseC, _props$escapeClosesCo;
125
125
  const themeClass = `azgrid-theme-${(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : props.dark ? 'dark' : 'light'}`;
126
126
  /* -------------------------------------------------------------------------- */
127
127
  const {
@@ -195,6 +195,7 @@ function DataGridEventsWrapper(props) {
195
195
  menuRow: menuRow,
196
196
  close: update_menuRow,
197
197
  dontAutoClose: (_props$dontAutoCloseC = props.dontAutoCloseContextMenu) !== null && _props$dontAutoCloseC !== void 0 ? _props$dontAutoCloseC : false,
198
+ escapeClosesContextMenu: (_props$escapeClosesCo = props.escapeClosesContextMenu) !== null && _props$escapeClosesCo !== void 0 ? _props$escapeClosesCo : false,
198
199
  menu_items: props.contextMenuItems
199
200
  }), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
200
201
  ...props,
package/package.json CHANGED
@@ -1,68 +1,63 @@
1
- {
2
- "name": "@azrico/reactgrid",
3
- "version": "1.6.7",
4
- "main": "dist/index.js",
5
- "description": "React Datagrid",
6
- "author": "Azrideus <MehrdadTavangar@gmail.com>",
7
- "homepage": ".",
8
- "scripts": {
9
- "start": "react-scripts start",
10
- "build": "tsc && yarn cp_themes && babel dist --out-dir dist",
11
- "test": "rem",
12
- "check:theme": "node config/check-theme.cjs",
13
- "theme:generate": "node config/generate-theme.cjs",
14
- "cp_themes": "copyfiles ./src/themes/* ./dist/"
15
- },
16
- "config-overrides-path": "../../config/config-overrides.js",
17
- "devDependencies": {
18
- "@babel/cli": "^7.13.14",
19
- "@babel/core": "^7.13.15",
20
- "@babel/eslint-parser": "^7.12.17",
21
- "@babel/node": "^7.13.13",
22
- "@babel/plugin-proposal-class-properties": "^7.12.13",
23
- "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
24
- "@babel/preset-env": "^7.13.15",
25
- "@babel/preset-typescript": "^7.14.5",
26
- "@mui/material": "*",
27
- "@types/react": "^18.0.25",
28
- "@types/react-dom": "^18.0.8",
29
- "react-dom": "^18.2.0",
30
- "react-scripts": "^5.0.1",
31
- "typescript": "^4.8.4"
32
- },
33
- "dependencies": {
34
- "@azrico/controls": "1.6.1",
35
- "@azrico/object": "^1.4.97",
36
- "@emotion/react": "^11.9.3",
37
- "@emotion/styled": "^11.9.3",
38
- "@inovua/reactdatagrid-enterprise": "^5.10.2",
39
- "clsx": "^2.0.0",
40
- "lodash.debounce": "^4.0.8",
41
- "react": "^18.2.0",
42
- "react-use-size": "^3.0.1"
43
- },
44
- "peerDependencies": {
45
- "@azrico/controls": ">=1.6.1",
46
- "@azrico/object": ">=1.4.97",
47
- "@emotion/react": ">=11.9.3",
48
- "@emotion/styled": ">=11.9.3",
49
- "@inovua/reactdatagrid-enterprise": ">=5.10.2",
50
- "@mui/material": ">=5.0.0 <8.0.0",
51
- "clsx": ">=1.2.1",
52
- "react": ">=18.2.0",
53
- "react-use-size": ">=3.0.1"
54
- },
55
- "browserslist": {
56
- "production": [
57
- ">0.2%",
58
- "not dead",
59
- "not op_mini all"
60
- ],
61
- "development": [
62
- "last 1 chrome version",
63
- "last 1 firefox version",
64
- "last 1 safari version"
65
- ]
66
- },
67
- "packageManager": "yarn@4.10.2"
1
+ {
2
+ "name": "@azrico/reactgrid",
3
+ "version": "1.6.10",
4
+ "main": "dist/index.js",
5
+ "description": "React Datagrid",
6
+ "author": "Azrideus <MehrdadTavangar@gmail.com>",
7
+ "homepage": ".",
8
+ "scripts": {
9
+ "start": "react-scripts start",
10
+ "build": "tsc && yarn cp_themes && babel dist --out-dir dist",
11
+ "test": "rem",
12
+ "check:theme": "node config/check-theme.cjs",
13
+ "theme:generate": "node config/generate-theme.cjs",
14
+ "cp_themes": "copyfiles ./src/themes/* ./dist/"
15
+ },
16
+ "config-overrides-path": "../../config/config-overrides.js",
17
+ "devDependencies": {
18
+ "@babel/cli": "^7.13.14",
19
+ "@babel/core": "^7.13.15",
20
+ "@babel/eslint-parser": "^7.12.17",
21
+ "@babel/node": "^7.13.13",
22
+ "@babel/plugin-proposal-class-properties": "^7.12.13",
23
+ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
24
+ "@babel/preset-env": "^7.13.15",
25
+ "@babel/preset-typescript": "^7.14.5",
26
+ "@types/react": "^18.0.25",
27
+ "@types/react-dom": "^18.0.8",
28
+ "react-dom": "^18.2.0",
29
+ "react-scripts": "^5.0.1",
30
+ "typescript": "^4.8.4"
31
+ },
32
+ "dependencies": {
33
+ "@azrico/controls": "1.6.4",
34
+ "@azrico/object": "^1.4.97",
35
+ "@floating-ui/react": "^0.27.16",
36
+ "@inovua/reactdatagrid-enterprise": "^5.10.2",
37
+ "clsx": "^2.0.0",
38
+ "lodash.debounce": "^4.0.8",
39
+ "react": "^18.2.0",
40
+ "react-use-size": "^3.0.1"
41
+ },
42
+ "peerDependencies": {
43
+ "@azrico/controls": ">=1.6.4",
44
+ "@azrico/object": ">=1.4.97",
45
+ "@inovua/reactdatagrid-enterprise": ">=5.10.2",
46
+ "clsx": ">=1.2.1",
47
+ "react": ">=18.2.0",
48
+ "react-use-size": ">=3.0.1"
49
+ },
50
+ "browserslist": {
51
+ "production": [
52
+ ">0.2%",
53
+ "not dead",
54
+ "not op_mini all"
55
+ ],
56
+ "development": [
57
+ "last 1 chrome version",
58
+ "last 1 firefox version",
59
+ "last 1 safari version"
60
+ ]
61
+ },
62
+ "packageManager": "yarn@4.10.2"
68
63
  }
package/src/hooks/useGridEvents.ts CHANGED
@@ -78,15 +78,6 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
78
78
  if (props.hideContextMenu || !props.contextMenuItems) update_menuRow(null, null);
79
79
  }, [props.hideContextMenu, props.contextMenuItems, update_menuRow]);
80
80
 
81
- React.useEffect(() => {
82
- if (!menuAnchorEl || !props.escapeClosesContextMenu) return;
83
- const onKeyDown = (event: KeyboardEvent) => {
84
- if (event.key === 'Escape') update_menuRow(null, null);
85
- };
86
- document.addEventListener('keydown', onKeyDown);
87
- return () => document.removeEventListener('keydown', onKeyDown);
88
- }, [menuAnchorEl, props.escapeClosesContextMenu, update_menuRow]);
89
-
90
81
  const onRowContextMenu = React.useCallback((rowProps, event) => {
91
82
  if (
92
83
  latestProps.current.hideContextMenu ||
package/src/themes/azgrid-theme.css CHANGED
@@ -1934,114 +1934,123 @@
1934
1934
  fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1935
1935
  }
1936
1936
 
1937
- /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
- * Match the strongest selected-row :hover selectors, including their cells. */
1939
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
- background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
- color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
- }
1945
-
1946
- /* Additional surfaces and typography not assigned colours by Inovua. */
1947
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
- }
1950
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
- }
1955
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
- }
1959
- .azgrid.InovuaReactDataGrid {
1960
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
- }
1966
- .azgrid .InovuaReactDataGrid__column-header__content,
1967
- .azgrid .InovuaReactDataGrid__header-group__title {
1968
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
- }
1974
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
- }
1977
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
- }
1981
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
- }
1984
- .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
- }
1988
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
- }
1991
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
- }
1995
- .azgrid-scope input,
1996
- .azgrid-scope select,
1997
- .azgrid-scope .azgrid-searcharea {
1998
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
- }
2004
- .azgrid-scope input::placeholder {
2005
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
- }
2007
- .azgrid-scope input:focus-visible,
2008
- .azgrid-scope select:focus-visible {
2009
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
- }
2011
- .azgrid-scope .inovua-react-pagination-toolbar input,
2012
- .azgrid-scope .inovua-react-pagination-toolbar select {
2013
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
- }
2017
- .azgrid-scope .inovua-react-toolkit-text-input,
2018
- .azgrid-scope .inovua-react-toolkit-combo-box,
2019
- .azgrid-scope .inovua-react-toolkit-menu {
2020
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
- }
2022
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
- * Two classes exceed @azrico/controls' single-class menu rules. */
2025
- .azgrid-context-menu.azrico-controls-contextmenu {
2026
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
- }
2035
- .azgrid-scope, .azgrid-scope * {
2036
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
- }
2039
- .azgrid-scope ::-webkit-scrollbar-track {
2040
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
- }
2042
- .azgrid-scope ::-webkit-scrollbar-thumb {
2043
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
- }
2045
- .azgrid .InovuaReactDataGrid__row.deleted:after {
2046
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2047
- }
1937
+ /* Keep the menu row in its hover state while the pointer is in the portaled menu.
1938
+ * Match the strongest selected-row :hover selectors, including their cells. */
1939
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
1940
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
1941
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
1942
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1943
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1944
+ }
1945
+
1946
+ /* Additional surfaces and typography not assigned colours by Inovua. */
1947
+ .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1948
+ background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1949
+ }
1950
+ .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1951
+ .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1952
+ background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1953
+ color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1954
+ }
1955
+ .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1956
+ .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1957
+ fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1958
+ }
1959
+ .azgrid.InovuaReactDataGrid {
1960
+ background: var(--azgrid-bg, var(--azgrid-preset-bg));
1961
+ color: var(--azgrid-fg, var(--azgrid-preset-fg));
1962
+ border-color: var(--azgrid-border, var(--azgrid-preset-border));
1963
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1964
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1965
+ }
1966
+ .azgrid .InovuaReactDataGrid__column-header__content,
1967
+ .azgrid .InovuaReactDataGrid__header-group__title {
1968
+ color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1969
+ font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1970
+ font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1971
+ text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1972
+ letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1973
+ }
1974
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1975
+ border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1976
+ }
1977
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1978
+ /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1979
+ border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1980
+ }
1981
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1982
+ padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1983
+ }
1984
+ .azgrid .InovuaReactDataGrid__empty-wrapper {
1985
+ background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1986
+ color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1987
+ }
1988
+ .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1989
+ background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1990
+ }
1991
+ .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1992
+ .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1993
+ box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1994
+ }
1995
+ .azgrid-scope input,
1996
+ .azgrid-scope select,
1997
+ .azgrid-scope .azgrid-searcharea {
1998
+ color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1999
+ background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
2000
+ border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
2001
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2002
+ font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2003
+ }
2004
+ .azgrid-scope input::placeholder {
2005
+ color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
2006
+ }
2007
+ .azgrid-scope input:focus-visible,
2008
+ .azgrid-scope select:focus-visible {
2009
+ outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2010
+ }
2011
+ .azgrid-scope .inovua-react-pagination-toolbar input,
2012
+ .azgrid-scope .inovua-react-pagination-toolbar select {
2013
+ background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2014
+ color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2015
+ border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2016
+ }
2017
+ .azgrid-scope .inovua-react-toolkit-text-input,
2018
+ .azgrid-scope .inovua-react-toolkit-combo-box,
2019
+ .azgrid-scope .inovua-react-toolkit-menu {
2020
+ border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2021
+ }
2022
+ /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2023
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2024
+ * Two classes exceed @azrico/controls' single-class menu rules. */
2025
+ .azgrid-context-menu.azrico-controls-contextmenu {
2026
+ --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2027
+ --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2028
+ --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2029
+ --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2030
+ --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2031
+ --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2032
+ --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2033
+ border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2034
+ }
2035
+ .azgrid-scope, .azgrid-scope * {
2036
+ accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2037
+ scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2038
+ }
2039
+ .azgrid-scope ::-webkit-scrollbar-track {
2040
+ background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2041
+ }
2042
+ .azgrid-scope ::-webkit-scrollbar-thumb {
2043
+ background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2044
+ }
2045
+ /* The grid draws its own scrollbars and pushes the native one out of view by a
2046
+ fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
2047
+ scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
2048
+ .azgrid-scope .inovua-react-scroll-container__wrapper > div {
2049
+ scrollbar-width: none;
2050
+ }
2051
+ .azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
2052
+ display: none;
2053
+ }
2054
+ .azgrid .InovuaReactDataGrid__row.deleted:after {
2055
+ border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2056
+ }
package/src/types/types.ts CHANGED
@@ -87,7 +87,7 @@ export type AzGridProps = {
87
87
  gridOptions?: AzGridOptions;
88
88
 
89
89
  columns?: LooseColumnDefinition[];
90
- columnExtensions?: Partial<LooseColumnDefinition>;
90
+ columnExtensions?: LooseColumnDefinition[];
91
91
 
92
92
  editableColumns?: string[];
93
93
  leftColumns?: string[];
package/src/views/DataGrid.tsx CHANGED
@@ -247,6 +247,7 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
247
247
  menuRow={menuRow}
248
248
  close={update_menuRow}
249
249
  dontAutoClose={props.dontAutoCloseContextMenu ?? false}
250
+ escapeClosesContextMenu={props.escapeClosesContextMenu ?? false}
250
251
  menu_items={props.contextMenuItems as any}
251
252
  />
252
253
  )}