@azrico/reactgrid 1.6.6 → 1.6.9

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 (14) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/__tests__/context-menu.test.js +67 -1
  3. package/config/check-theme.cjs +23 -0
  4. package/config/generate-theme.cjs +2 -0
  5. package/config/theme-extras.css +120 -102
  6. package/dist/src/hooks/useGridEvents.js +2 -2
  7. package/dist/src/themes/azgrid-theme.css +140 -122
  8. package/dist/src/types/types.d.ts +2 -0
  9. package/dist/src/views/DataGrid.js +7 -2
  10. package/package.json +62 -67
  11. package/src/hooks/useGridEvents.ts +2 -2
  12. package/src/themes/azgrid-theme.css +140 -122
  13. package/src/types/types.ts +2 -0
  14. package/src/views/DataGrid.tsx +18 -1
package/dist/src/themes/azgrid-theme.css CHANGED
@@ -1452,65 +1452,65 @@
1452
1452
  }
1453
1453
 
1454
1454
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover {
1455
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1456
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1455
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1456
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1457
1457
  }
1458
1458
 
1459
1459
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
1460
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1460
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1461
1461
  }
1462
1462
 
1463
1463
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
1464
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1465
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1464
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1465
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1466
1466
  }
1467
1467
 
1468
1468
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover {
1469
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1470
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1469
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1470
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1471
1471
  }
1472
1472
 
1473
1473
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
1474
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1474
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1475
1475
  }
1476
1476
 
1477
1477
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--even:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
1478
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1479
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1478
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1479
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1480
1480
  }
1481
1481
 
1482
1482
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover,
1483
1483
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover {
1484
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1485
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1484
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1485
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1486
1486
  }
1487
1487
 
1488
1488
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column,
1489
1489
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
1490
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1490
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1491
1491
  }
1492
1492
 
1493
1493
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over,
1494
1494
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
1495
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1496
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1495
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1496
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1497
1497
  }
1498
1498
 
1499
1499
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover,
1500
1500
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover {
1501
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1502
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1501
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1502
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1503
1503
  }
1504
1504
 
1505
1505
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column,
1506
1506
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__row-index-column {
1507
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1507
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1508
1508
  }
1509
1509
 
1510
1510
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--no-zebra:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over,
1511
1511
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row--odd:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected .InovuaReactDataGrid__row-hover-target:hover .InovuaReactDataGrid__cell--over {
1512
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1513
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1512
+ background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
1513
+ color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1514
1514
  }
1515
1515
 
1516
1516
  .azgrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--focused .InovuaReactDataGrid__row--active>.InovuaReactDataGrid__row-active-borders-wrapper>.InovuaReactDataGrid__row-active-borders:before,
@@ -1934,105 +1934,123 @@
1934
1934
  fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
1935
1935
  }
1936
1936
 
1937
- /* Additional surfaces and typography not assigned colours by Inovua. */
1938
- .azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
1939
- background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
1940
- }
1941
- .azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
1942
- .azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
1943
- background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
1944
- color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1945
- }
1946
- .azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
1947
- .azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
1948
- fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
1949
- }
1950
- .azgrid.InovuaReactDataGrid {
1951
- background: var(--azgrid-bg, var(--azgrid-preset-bg));
1952
- color: var(--azgrid-fg, var(--azgrid-preset-fg));
1953
- border-color: var(--azgrid-border, var(--azgrid-preset-border));
1954
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1955
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1956
- }
1957
- .azgrid .InovuaReactDataGrid__column-header__content,
1958
- .azgrid .InovuaReactDataGrid__header-group__title {
1959
- color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
1960
- font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
1961
- font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
1962
- text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
1963
- letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
1964
- }
1965
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
1966
- border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
1967
- }
1968
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
1969
- /* Inovua's first-row border-top is !important. Keep the same border API on this row. */
1970
- border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
1971
- }
1972
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
1973
- padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
1974
- }
1975
- .azgrid .InovuaReactDataGrid__empty-wrapper {
1976
- background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
1977
- color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
1978
- }
1979
- .azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
1980
- background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
1981
- }
1982
- .azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
1983
- .azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
1984
- box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
1985
- }
1986
- .azgrid-scope input,
1987
- .azgrid-scope select,
1988
- .azgrid-scope .azgrid-searcharea {
1989
- color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
1990
- background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
1991
- border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
1992
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
1993
- font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
1994
- }
1995
- .azgrid-scope input::placeholder {
1996
- color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
1997
- }
1998
- .azgrid-scope input:focus-visible,
1999
- .azgrid-scope select:focus-visible {
2000
- outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
2001
- }
2002
- .azgrid-scope .inovua-react-pagination-toolbar input,
2003
- .azgrid-scope .inovua-react-pagination-toolbar select {
2004
- background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
2005
- color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
2006
- border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
2007
- }
2008
- .azgrid-scope .inovua-react-toolkit-text-input,
2009
- .azgrid-scope .inovua-react-toolkit-combo-box,
2010
- .azgrid-scope .inovua-react-toolkit-menu {
2011
- border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2012
- }
2013
- /* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
2014
- * unscoped and read the tokens from the theme class DataGrid puts on the menu.
2015
- * Two classes exceed @azrico/controls' single-class menu rules. */
2016
- .azgrid-context-menu.azrico-controls-contextmenu {
2017
- --azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
2018
- --azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
2019
- --azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
2020
- --azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
2021
- --azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
2022
- --azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
2023
- --azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
2024
- border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
2025
- }
2026
- .azgrid-scope, .azgrid-scope * {
2027
- accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
2028
- scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2029
- }
2030
- .azgrid-scope ::-webkit-scrollbar-track {
2031
- background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
2032
- }
2033
- .azgrid-scope ::-webkit-scrollbar-thumb {
2034
- background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
2035
- }
2036
- .azgrid .InovuaReactDataGrid__row.deleted:after {
2037
- border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
2038
- }
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
@@ -75,6 +75,8 @@ export type AzGridProps = {
75
75
  contextMenuItems?: ConvertableToMenuItem;
76
76
  /** Keep the context menu open when clicking outside (default false). */
77
77
  dontAutoCloseContextMenu?: boolean;
78
+ /** Close the context menu on Escape (default false). */
79
+ escapeClosesContextMenu?: boolean;
78
80
  /** Hide the grid context menu and leave the browser's context menu available. */
79
81
  hideContextMenu?: boolean;
80
82
  /** Extra classes on the row context menu, which is portaled to <body> */
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$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 {
@@ -133,6 +133,9 @@ function DataGridEventsWrapper(props) {
133
133
  menuAnchorEl,
134
134
  menuRow
135
135
  } = (0, _useGridEvents.useGridEvents)(props.gridRef.current, props);
136
+ const menuRowId = menuAnchorEl && !props.hideContextMenu && props.contextMenuItems ? (0, _func_grid.get_row_id)(menuRow) : undefined;
137
+ const consumerRowClassName = (_props$static_gridOpt = props.static_gridOptions) === null || _props$static_gridOpt === void 0 ? void 0 : _props$static_gridOpt.rowClassName;
138
+ const rowClassName = _react.default.useCallback(rowProps => (0, _clsx.default)(typeof consumerRowClassName === 'function' ? consumerRowClassName(rowProps) : consumerRowClassName, menuRowId != null && (0, _func_grid.get_row_id)(rowProps.data) === menuRowId && 'azgrid-row--menu-open'), [consumerRowClassName, menuRowId]);
136
139
  /* -------------------------------------------------------------------------- */
137
140
  /**
138
141
  * Merge click events into grid options
@@ -146,6 +149,7 @@ function DataGridEventsWrapper(props) {
146
149
  // internal row attributes first, consumer's onRenderRow last so it can override them
147
150
  const consumerOnRenderRow = opts.onRenderRow;
148
151
  const renderProps = {
152
+ rowClassName,
149
153
  onRenderRow: consumerOnRenderRow ? rowProps => {
150
154
  onRenderRow(rowProps);
151
155
  consumerOnRenderRow(rowProps);
@@ -180,7 +184,7 @@ function DataGridEventsWrapper(props) {
180
184
  ...renderProps,
181
185
  ...a11yProps
182
186
  };
183
- }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask]);
187
+ }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask, rowClassName]);
184
188
  /* -------------------------------------------------------------------------- */
185
189
  // The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
186
190
  return _react.default.createElement("div", {
@@ -191,6 +195,7 @@ function DataGridEventsWrapper(props) {
191
195
  menuRow: menuRow,
192
196
  close: update_menuRow,
193
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,
194
199
  menu_items: props.contextMenuItems
195
200
  }), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
196
201
  ...props,
package/package.json CHANGED
@@ -1,68 +1,63 @@
1
- {
2
- "name": "@azrico/reactgrid",
3
- "version": "1.6.6",
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.9",
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
@@ -75,8 +75,8 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
75
75
 
76
76
  /* ------------------------------- ContextMenu ------------------------------ */
77
77
  React.useEffect(() => {
78
- if (props.hideContextMenu) update_menuRow(null, null);
79
- }, [props.hideContextMenu, update_menuRow]);
78
+ if (props.hideContextMenu || !props.contextMenuItems) update_menuRow(null, null);
79
+ }, [props.hideContextMenu, props.contextMenuItems, update_menuRow]);
80
80
 
81
81
  const onRowContextMenu = React.useCallback((rowProps, event) => {
82
82
  if (