@syncfusion/ej2-react-grids 20.4.53 → 21.1.35

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 (57) hide show
  1. package/CHANGELOG.md +35 -137
  2. package/diConfig.json +1 -0
  3. package/dist/ej2-react-grids.min.js +2 -2
  4. package/dist/ej2-react-grids.umd.min.js +2 -2
  5. package/dist/ej2-react-grids.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-react-grids.es2015.js +2 -0
  7. package/dist/es6/ej2-react-grids.es2015.js.map +1 -1
  8. package/package.json +9 -9
  9. package/src/grid/grid.component.d.ts +1 -0
  10. package/src/grid/grid.component.js +1 -0
  11. package/src/pager/pager.component.d.ts +1 -0
  12. package/src/pager/pager.component.js +1 -0
  13. package/styles/bootstrap-dark.css +57 -21
  14. package/styles/bootstrap.css +57 -21
  15. package/styles/bootstrap4.css +57 -21
  16. package/styles/bootstrap5-dark.css +59 -23
  17. package/styles/bootstrap5.css +59 -23
  18. package/styles/excel-filter/bootstrap-dark.css +9 -0
  19. package/styles/excel-filter/bootstrap.css +9 -0
  20. package/styles/excel-filter/bootstrap4.css +9 -0
  21. package/styles/excel-filter/bootstrap5-dark.css +9 -0
  22. package/styles/excel-filter/bootstrap5.css +9 -0
  23. package/styles/excel-filter/fabric-dark.css +9 -0
  24. package/styles/excel-filter/fabric.css +9 -0
  25. package/styles/excel-filter/fluent-dark.css +11 -2
  26. package/styles/excel-filter/fluent.css +11 -2
  27. package/styles/excel-filter/highcontrast-light.css +9 -0
  28. package/styles/excel-filter/highcontrast.css +9 -0
  29. package/styles/excel-filter/material-dark.css +9 -0
  30. package/styles/excel-filter/material.css +9 -0
  31. package/styles/excel-filter/tailwind-dark.css +9 -0
  32. package/styles/excel-filter/tailwind.css +9 -0
  33. package/styles/fabric-dark.css +55 -19
  34. package/styles/fabric.css +55 -19
  35. package/styles/fluent-dark.css +85 -33
  36. package/styles/fluent.css +85 -33
  37. package/styles/grid/bootstrap-dark.css +48 -21
  38. package/styles/grid/bootstrap.css +48 -21
  39. package/styles/grid/bootstrap4.css +48 -21
  40. package/styles/grid/bootstrap5-dark.css +50 -23
  41. package/styles/grid/bootstrap5.css +50 -23
  42. package/styles/grid/fabric-dark.css +46 -19
  43. package/styles/grid/fabric.css +46 -19
  44. package/styles/grid/fluent-dark.css +74 -31
  45. package/styles/grid/fluent.css +74 -31
  46. package/styles/grid/highcontrast-light.css +45 -18
  47. package/styles/grid/highcontrast.css +44 -17
  48. package/styles/grid/material-dark.css +50 -23
  49. package/styles/grid/material.css +50 -23
  50. package/styles/grid/tailwind-dark.css +49 -22
  51. package/styles/grid/tailwind.css +49 -22
  52. package/styles/highcontrast-light.css +54 -18
  53. package/styles/highcontrast.css +53 -17
  54. package/styles/material-dark.css +59 -23
  55. package/styles/material.css +59 -23
  56. package/styles/tailwind-dark.css +58 -22
  57. package/styles/tailwind.css +58 -22
@@ -487,6 +487,15 @@
487
487
  padding-top: 8px;
488
488
  }
489
489
 
490
+ .e-excel-menu.e-contextmenu.e-menu-parent {
491
+ max-height: 227px;
492
+ overflow-y: auto;
493
+ }
494
+
495
+ .e-bigger .e-excel-menu.e-contextmenu.e-menu-parent {
496
+ max-height: 355px;
497
+ }
498
+
490
499
  /*! Excel-Filter theme */
491
500
  .e-excelfilter .e-footer-content {
492
501
  border-color: rgba(55, 65, 81, 0.12);
@@ -826,8 +835,8 @@ li.e-separator.e-menu-item.e-excel-separator {
826
835
  min-width: 38px;
827
836
  padding: 7px 6px 7px 0;
828
837
  }
829
- .e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons,
830
- .e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn .e-icons {
838
+ .e-bigger .e-grid .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons,
839
+ .e-grid.e-bigger .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
831
840
  font-size: 16px;
832
841
  }
833
842
  .e-bigger .e-grid .e-flmenu-valuediv,
@@ -867,8 +876,8 @@ li.e-separator.e-menu-item.e-excel-separator {
867
876
  .e-grid.e-bigger .e-icon-grightarrow {
868
877
  font-size: 16px;
869
878
  }
870
- .e-bigger .e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn,
871
- .e-grid.e-bigger .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
879
+ .e-bigger .e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn,
880
+ .e-grid.e-bigger .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
872
881
  font-size: 22px;
873
882
  }
874
883
  .e-bigger .e-grid .e-gridheader tr th:last-child,
@@ -981,6 +990,10 @@ li.e-separator.e-menu-item.e-excel-separator {
981
990
  .e-grid.e-bigger .e-gridheader .e-fltr-icon .e-sortfilterdiv {
982
991
  margin: -15px 23px -15px 6px;
983
992
  }
993
+ .e-bigger .e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv,
994
+ .e-grid.e-bigger.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
995
+ padding: 0 0.45em 0 0.4em;
996
+ }
984
997
  .e-bigger .e-grid .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
985
998
  .e-bigger .e-grid .e-wrap .e-sortfilterdiv,
986
999
  .e-grid.e-bigger .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2206,6 +2219,9 @@ li.e-separator.e-menu-item.e-excel-separator {
2206
2219
  .e-grid .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
2207
2220
  padding: 0 20px 0 5px;
2208
2221
  }
2222
+ .e-grid.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
2223
+ padding: 0 0.5em 0 0.45em;
2224
+ }
2209
2225
  .e-grid .e-filtermenudiv {
2210
2226
  float: right;
2211
2227
  margin: -13px -3px -13px 4px;
@@ -2272,10 +2288,10 @@ li.e-separator.e-menu-item.e-excel-separator {
2272
2288
  margin: -13px 4px -13px -5px;
2273
2289
  }
2274
2290
  .e-grid.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
2275
- margin: 3px 2px 0 10px;
2291
+ margin: 5px 2px 0 15px;
2276
2292
  }
2277
2293
  .e-grid.e-wrap .e-gridheader .e-sortnumber {
2278
- margin: 3px 5px 0 2px;
2294
+ margin: 6px 5px 0 2px;
2279
2295
  }
2280
2296
  .e-grid.e-wrap .e-gridheader .e-sortfilterdiv {
2281
2297
  margin: -9px 10px;
@@ -2292,7 +2308,7 @@ li.e-separator.e-menu-item.e-excel-separator {
2292
2308
  padding: 3px;
2293
2309
  }
2294
2310
  .e-grid.e-wrap .e-columnmenu {
2295
- margin: -19px -20px -20px -20px;
2311
+ line-height: 1px;
2296
2312
  }
2297
2313
  .e-grid.e-rtl .e-columnmenu {
2298
2314
  left: 23px;
@@ -2301,7 +2317,7 @@ li.e-separator.e-menu-item.e-excel-separator {
2301
2317
  margin: -13px 4px -13px -18px;
2302
2318
  }
2303
2319
  .e-grid.e-wrap.e-rtl .e-columnmenu {
2304
- margin: -17px -13px -23px -25px;
2320
+ line-height: 1px;
2305
2321
  }
2306
2322
  .e-grid [class^=e-] {
2307
2323
  box-sizing: border-box;
@@ -2325,6 +2341,15 @@ li.e-separator.e-menu-item.e-excel-separator {
2325
2341
  border-top-width: 1px;
2326
2342
  padding: 0.3em;
2327
2343
  }
2344
+ .e-grid th.e-detailcell .e-rowcell,
2345
+ .e-grid th.e-detailcell .e-gridpager {
2346
+ text-align: left;
2347
+ }
2348
+ .e-grid.e-rtl th.e-detailcell .e-rowcell, .e-grid.e-rtl th.e-detailcell .e-gridpager,
2349
+ .e-grid th.e-detailcell .e-rtl .e-rowcell,
2350
+ .e-grid th.e-detailcell .e-rtl .e-gridpager {
2351
+ text-align: right;
2352
+ }
2328
2353
  .e-grid.e-verticallines .e-rowcell, .e-grid.e-verticallines .e-filterbarcell {
2329
2354
  border-width: 0 0 0 1px;
2330
2355
  }
@@ -2810,9 +2835,8 @@ li.e-separator.e-menu-item.e-excel-separator {
2810
2835
  -ms-user-select: none;
2811
2836
  user-select: none;
2812
2837
  }
2813
- .e-grid .e-toolbar .e-btn-icon.e-icons.e-columnchooser-btn {
2838
+ .e-grid .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
2814
2839
  font-size: 18px;
2815
- line-height: 3;
2816
2840
  }
2817
2841
  .e-grid .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
2818
2842
  margin-top: 1px;
@@ -3210,6 +3234,11 @@ li.e-separator.e-menu-item.e-excel-separator {
3210
3234
  .e-grid.e-rtl .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
3211
3235
  margin: -5px -5px -5px -5px;
3212
3236
  }
3237
+ .e-grid.e-rtl.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv, .e-grid.e-rtl .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
3238
+ height: auto;
3239
+ margin-bottom: 2px;
3240
+ margin-top: 0;
3241
+ }
3213
3242
  .e-grid.e-rtl .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
3214
3243
  margin: -5px -5px -5px -5px;
3215
3244
  }
@@ -3411,7 +3440,7 @@ li.e-separator.e-menu-item.e-excel-separator {
3411
3440
  margin: -13px 4px -13px -3px;
3412
3441
  padding: 3px;
3413
3442
  }
3414
- .e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv {
3443
+ .e-grid.e-wrap .e-rowcell, .e-grid.e-wrap .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
3415
3444
  height: Auto;
3416
3445
  line-height: 21px;
3417
3446
  overflow-wrap: break-word;
@@ -3422,19 +3451,19 @@ li.e-separator.e-menu-item.e-excel-separator {
3422
3451
  .e-grid.e-wrap .e-stackedheader .e-columnheader .e-stackedheadercelldiv, .e-grid.e-wrap .e-stackedheader .e-columnheader .e-headercelldiv {
3423
3452
  max-height: 36px;
3424
3453
  }
3425
- .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv {
3454
+ .e-grid.e-wrap .e-columnheader .e-headercelldiv, .e-grid.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
3426
3455
  margin-bottom: 2px;
3427
3456
  margin-top: 0;
3428
3457
  }
3429
- .e-grid.e-wrap .e-columnheader .e-filtermenudiv {
3430
- line-height: 18px;
3458
+ .e-grid.e-wrap .e-columnheader .e-filtermenudiv, .e-grid.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
3459
+ line-height: 1px;
3431
3460
  }
3432
- .e-grid .e-columnheader.e-wrap .e-filtermenudiv {
3433
- line-height: 18px;
3461
+ .e-grid .e-columnheader.e-wrap .e-filtermenudiv, .e-grid .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
3462
+ line-height: 1px;
3434
3463
  }
3435
- .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
3464
+ .e-grid .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv, .e-grid .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-gridcontent.e-wrap .e-rowcell, .e-grid .e-frozenhdrcont.e-wrap .e-rowcell {
3436
3465
  height: Auto;
3437
- line-height: 18px;
3466
+ line-height: 21px;
3438
3467
  overflow-wrap: break-word;
3439
3468
  text-overflow: clip;
3440
3469
  white-space: normal;
@@ -3451,10 +3480,10 @@ li.e-separator.e-menu-item.e-excel-separator {
3451
3480
  margin: -21px -5px;
3452
3481
  }
3453
3482
  .e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
3454
- margin: -14px 20px -29px 0;
3483
+ margin: -20px 20px -29px 14px;
3455
3484
  }
3456
3485
  .e-grid .e-columnheader.e-wrap .e-fltr-icon.e-rightalign .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon.e-rightalign .e-sortfilterdiv {
3457
- margin: -14px 0;
3486
+ margin: -20px 14px;
3458
3487
  }
3459
3488
  .e-grid .e-columnheader.e-wrap .e-icon-group::before, .e-grid.e-wrap .e-columnheader .e-icon-group::before {
3460
3489
  display: inline-block;
@@ -4210,6 +4239,13 @@ li.e-separator.e-menu-item.e-excel-separator {
4210
4239
  float: left;
4211
4240
  }
4212
4241
 
4242
+ /* stylelint-disable */
4243
+ .e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
4244
+ .e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
4245
+ max-height: 232px !important;
4246
+ }
4247
+
4248
+ /* stylelint-enable */
4213
4249
  /*! Grid theme */
4214
4250
  .e-grid {
4215
4251
  border-color: #e5e7eb;
@@ -4397,11 +4433,11 @@ li.e-separator.e-menu-item.e-excel-separator {
4397
4433
  .e-grid.e-rtl .e-frozenheader.e-frozen-right-header > .e-table, .e-grid.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
4398
4434
  border-right-color: #e5e7eb;
4399
4435
  }
4400
- .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
4436
+ .e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
4401
4437
  background-color: #f3f4f6;
4402
4438
  color: #111827;
4403
4439
  }
4404
- .e-grid tr[role=row]:hover .e-rowdragdrop {
4440
+ .e-grid .e-row:hover .e-rowdragdrop {
4405
4441
  cursor: move;
4406
4442
  }
4407
4443
  .e-grid .e-sortnumber {