@indico-data/design-system 2.59.2 → 2.60.1

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 (29) hide show
  1. package/lib/components/tanstackTable/TankstackTable.types.d.ts +1 -0
  2. package/lib/components/tanstackTable/TanstackTable.d.ts +1 -1
  3. package/lib/index.css +93 -62
  4. package/lib/index.d.ts +2 -1
  5. package/lib/index.esm.css +93 -62
  6. package/lib/index.esm.js +2 -1
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +2 -1
  9. package/lib/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/badge/styles/Badge.scss +1 -1
  12. package/src/components/button/styles/_variables.scss +18 -18
  13. package/src/components/forms/form/styles/Form.scss +3 -3
  14. package/src/components/forms/select/styles/Select.scss +2 -2
  15. package/src/components/menu/styles/_variables.scss +2 -2
  16. package/src/components/skeleton/styles/Skeleton.scss +7 -7
  17. package/src/components/stepper/styles/Stepper.scss +30 -9
  18. package/src/components/table/Table.mdx +1 -1
  19. package/src/components/table/Table.stories.tsx +1 -1
  20. package/src/components/table/styles/Table.scss +0 -9
  21. package/src/components/tanstackTable/TankstackTable.types.ts +1 -0
  22. package/src/components/tanstackTable/TanstackTable.stories.tsx +54 -0
  23. package/src/components/tanstackTable/TanstackTable.tsx +3 -2
  24. package/src/components/tanstackTable/components/ActionBar/ActionBar.scss +1 -1
  25. package/src/components/tanstackTable/styles/_variables.scss +14 -9
  26. package/src/components/tanstackTable/styles/table.scss +23 -4
  27. package/src/components/toast/styles/Toast.scss +8 -6
  28. package/src/styles/globals.scss +2 -2
  29. package/src/styles/variables/_borders.scss +1 -1
package/lib/index.esm.css CHANGED
@@ -370,7 +370,7 @@
370
370
  }
371
371
 
372
372
  :root [data-theme=light] {
373
- --pf-border-color: var(--pf-gray-color-300);
373
+ --pf-border-color: var(--pf-gray-color-800);
374
374
  --pf-border-color-light: var(--pf-gray-color-100);
375
375
  --pf-horizontal-line-color: var(--pf-gray-color-200);
376
376
  }
@@ -474,9 +474,9 @@
474
474
  :root [data-theme=light] {
475
475
  --pf-white-color: #ffffff;
476
476
  --pf-black-color: #000000;
477
- --pf-background-color-light: var(--pf-gray-color-100);
477
+ --pf-background-color-light: var(--pf-gray-color-900);
478
478
  --pf-background-color: var(--pf-white-color);
479
- --pf-background-color-dark: var(--pf-gray-color-300);
479
+ --pf-background-color-dark: var(--pf-gray-color-100);
480
480
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
481
481
  --pf-background-color-secondary: var(--pf-secondary-color-500);
482
482
  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
@@ -563,33 +563,33 @@ a:hover,
563
563
  }
564
564
 
565
565
  :root [data-theme=light] {
566
- --pf-button-solid-background-color: var(--pf-primary-color);
566
+ --pf-button-solid-background-color: var(--pf-secondary-color-400);
567
567
  --pf-button-solid-color: var(--pf-white-color);
568
- --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
569
- --pf-button-solid-focus-background-color: var(--pf-primary-color);
568
+ --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
569
+ --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
570
570
  --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
571
- --pf-button-solid-disabled-color: var(--pf-gray-color-100);
572
- --pf-button-outline-color: var(--pf-primary-color);
573
- --pf-button-outline-border-color: var(--pf-primary-color);
574
- --pf-button-outline-hover-color: var(--pf-primary-color-400);
571
+ --pf-button-solid-disabled-color: var(--pf-gray-color-800);
572
+ --pf-button-outline-color: var(--pf-secondary-color-400);
573
+ --pf-button-outline-border-color: var(--pf-secondary-color-400);
574
+ --pf-button-outline-hover-color: var(--pf-secondary-color-500);
575
575
  --pf-button-outline-disabled-color: var(--pf-primary-color-300);
576
- --pf-button-link-color: var(--pf-primary-color);
577
- --pf-button-link-hover-color: var(--pf-primary-color-400);
576
+ --pf-button-link-color: var(--pf-secondary-color-400);
577
+ --pf-button-link-hover-color: var(--pf-secondary-color-500);
578
578
  --pf-button-link-disabled-color: var(--pf-primary-color-300);
579
- --pf-button-action-color: var(--pf-primary-color);
580
- --pf-button-action-border-color: var(--pf-primary-color);
581
- --pf-button-action-hover-background-color: var(--pf-primary-color-200);
582
- --pf-button-action-hover-border-color: var(--pf-primary-color-400);
583
- --pf-button-action-hover-color: var(--pf-primary-color);
584
- --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
579
+ --pf-button-action-color: var(--pf-secondary-color-400);
580
+ --pf-button-action-border-color: var(--pf-secondary-color-400);
581
+ --pf-button-action-hover-background-color: var(--pf-secondary-color-500);
582
+ --pf-button-action-hover-border-color: var(--pf-secondary-color-500);
583
+ --pf-button-action-hover-color: var(--pf-white-color);
584
+ --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
585
585
  --pf-button-action-disabled-color: var(--pf-primary-color-300);
586
- --pf-button-destructive-background-color: var(--pf-error-color);
586
+ --pf-button-destructive-background-color: var(--pf-red-color-400);
587
587
  --pf-button-destructive-color: var(--pf-white-color);
588
- --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
588
+ --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
589
589
  --pf-button-destructive-hover-color: var(--pf-white-color);
590
590
  --pf-button-destructive-focus-background-color: var(--pf-red-color);
591
591
  --pf-button-destructive-focus-color: var(--pf-white-color);
592
- --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
592
+ --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
593
593
  --pf-button-destructive-disabled-color: var(--pf-white-color);
594
594
  --pf-button-soft-color: var(--pf-primary-color-300);
595
595
  --pf-button-soft-border-color: var(--pf-primary-color-300);
@@ -1045,13 +1045,6 @@ a:hover,
1045
1045
  background-color: var(--pf-table-highlighted-color) !important;
1046
1046
  }
1047
1047
 
1048
- .table__pagination {
1049
- padding-bottom: var(--pf-padding-4);
1050
- padding-top: var(--pf-padding-4);
1051
- background-color: var(--pf-table-pagination-background-color);
1052
- padding-left: var(--pf-padding-4);
1053
- }
1054
-
1055
1048
  .input {
1056
1049
  padding: 10px;
1057
1050
  }
@@ -1389,11 +1382,11 @@ form {
1389
1382
  --pf-form-input-color: var(--pf-gray-color);
1390
1383
  --pf-form-input-placeholder-color: var(--pf-gray-color-300);
1391
1384
  --pf-form-input-help-color: var(--pf-gray-color-400);
1392
- --pf-form-input-hover-background-color: var(--pf-gray-color-100);
1393
- --pf-form-input-focus-background-color: var(--pf-gray-color-100);
1385
+ --pf-form-input-hover-background-color: var(--pf-gray-color-900);
1386
+ --pf-form-input-focus-background-color: var(--pf-gray-color-950);
1394
1387
  --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
1395
1388
  --pf-form-input-focus-outline-color: var(--pf-primary-color);
1396
- --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
1389
+ --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
1397
1390
  --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
1398
1391
  --pf-form-input-disabled-color: var(--pf-gray-color-400);
1399
1392
  }
@@ -1555,9 +1548,9 @@ form {
1555
1548
 
1556
1549
  :root [data-theme=light] {
1557
1550
  --pf-select-indicator-color: var(--pf-gray-color);
1558
- --pf-select-option-selected-color: var(--pf-primary-color-100);
1551
+ --pf-select-option-selected-color: var(--pf-gray-color-950);
1559
1552
  --pf-select-option-color: var(--pf-gray-color);
1560
- --pf-select-option-hover-color: var(--pf-primary-color-100);
1553
+ --pf-select-option-hover-color: var(--pf-gray-color-900);
1561
1554
  }
1562
1555
 
1563
1556
  :root [data-theme=dark],
@@ -1727,21 +1720,21 @@ form {
1727
1720
  margin-left: var(--pf-margin-2);
1728
1721
  }
1729
1722
 
1730
- :root,
1731
- :root [data-theme=light],
1732
- :root [data-theme=dark] {
1733
- --pf-skeleton-color-one: var(--pf-gray-color-200);
1734
- --pf-skeleton-color-two: var(--pf-gray-color-100);
1723
+ :root [data-theme=light] {
1724
+ --pf-skeleton-color-one: var(--pf-gray-color-800);
1725
+ --pf-skeleton-color-two: var(--pf-gray-color-950);
1726
+ --pf-skeleton-background-color: var(--pf-gray-color-700);
1735
1727
  }
1736
1728
 
1737
1729
  :root [data-theme=dark] {
1738
1730
  --pf-skeleton-color-one: var(--pf-primary-color-500);
1739
1731
  --pf-skeleton-color-two: var(--pf-primary-color-400);
1732
+ --pf-skeleton-background-color: var(--pf-gray-color-900);
1740
1733
  }
1741
1734
 
1742
1735
  .skeleton {
1743
1736
  border-radius: var(--pf-rounded);
1744
- background-color: var(--pf-gray-color-100);
1737
+ background-color: var(--pf-skeleton-background-color);
1745
1738
  opacity: 0.7;
1746
1739
  animation: skeleton-loading 1s linear infinite alternate;
1747
1740
  display: flex;
@@ -1810,10 +1803,10 @@ form {
1810
1803
  }
1811
1804
 
1812
1805
  :root [data-theme=light] {
1813
- --pf-menu-item-hover-color: var(--pf-primary-color-100);
1806
+ --pf-menu-item-hover-color: var(--pf-gray-color-950);
1814
1807
  --pf-menu-item-background-color: var(--pf-white-color);
1815
1808
  --pf-menu-item-color: var(--pf-gray-color);
1816
- --pf-menu-item-focus-color: var(--pf-primary-color-300);
1809
+ --pf-menu-item-focus-color: var(--pf-gray-color-900);
1817
1810
  }
1818
1811
 
1819
1812
  :root [data-theme=dark],
@@ -1957,7 +1950,7 @@ form {
1957
1950
  }
1958
1951
 
1959
1952
  :root [data-theme=light] {
1960
- --pf-badge-background-color: var(--pf-white-color);
1953
+ --pf-badge-background-color: var(--pf-primary-color-950);
1961
1954
  --pf-badge-border-color: var(--pf-border-color);
1962
1955
  }
1963
1956
 
@@ -2121,22 +2114,25 @@ form {
2121
2114
 
2122
2115
  :root [data-theme=light] {
2123
2116
  --pf-tanstack-table-background-color: var(--pf-white-color);
2124
- --pf-tanstack-table-font-color: var(--pf-gray-color);
2125
- --pf-tanstack-table-border-color: var(--pf-gray-color-200);
2126
- --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
2127
- --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
2117
+ --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
2118
+ --pf-tanstack-table-font-color: var(--pf-gray-color-300);
2119
+ --pf-tanstack-table-border-color: var(--pf-gray-color-700);
2120
+ --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
2121
+ --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
2128
2122
  --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
2129
- --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
2130
- --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
2131
- --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
2132
- --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
2133
- 0 8px 16px rgba(0, 0, 0, 0.2);
2123
+ --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
2124
+ --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
2125
+ --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
2126
+ --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
2127
+ 0 4px 8px rgba(0, 0, 0, 0.1);
2134
2128
  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
2129
+ --pf-tanstack-table-pagination-background-color: var(--pf-gray-color-900);
2135
2130
  }
2136
2131
 
2137
2132
  :root [data-theme=dark],
2138
2133
  :root {
2139
2134
  --pf-tanstack-table-background-color: var(--pf-primary-color-800);
2135
+ --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
2140
2136
  --pf-tanstack-table-font-color: var(--pf-white-color);
2141
2137
  --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
2142
2138
  --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
@@ -2175,7 +2171,7 @@ form {
2175
2171
  left: 50%;
2176
2172
  transform: translateX(-50%);
2177
2173
  z-index: 90;
2178
- box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
2174
+ box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.45);
2179
2175
  }
2180
2176
  .tanstack-table__action-bar__container {
2181
2177
  display: flex;
@@ -2269,6 +2265,9 @@ form {
2269
2265
  border-radius: var(--pf-rounded-lg);
2270
2266
  width: 100%;
2271
2267
  }
2268
+ .tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
2269
+ background-color: var(--pf-tanstack-table-stripe-color);
2270
+ }
2272
2271
  .tanstack-table .is-loading {
2273
2272
  border: var(--pf-border-thin) solid var(--pf-border-color);
2274
2273
  height: 350px;
@@ -2289,7 +2288,7 @@ form {
2289
2288
  }
2290
2289
  .tanstack-table__thead__th {
2291
2290
  color: var(--pf-tanstack-table-font-color);
2292
- background: var(--pf-tanstack-table-background-color);
2291
+ background: var(--pf-tanstack-table-header-background-color);
2293
2292
  font-size: var(--pf-tanstack-table-font-size);
2294
2293
  font-weight: var(--pf-font-weight-medium);
2295
2294
  box-sizing: border-box;
@@ -2323,14 +2322,14 @@ form {
2323
2322
  border-right: none;
2324
2323
  }
2325
2324
  .tanstack-table__tbody__tr.is-selected td {
2326
- background: var(--pf-tanstack-table-checked-color);
2325
+ background: var(--pf-tanstack-table-checked-color) !important;
2327
2326
  }
2328
2327
  .tanstack-table__tbody__tr.show-hover:hover td {
2329
- background-color: var(--pf-tanstack-table-hover-color);
2328
+ background-color: var(--pf-tanstack-table-hover-color) !important;
2330
2329
  cursor: pointer;
2331
2330
  }
2332
2331
  .tanstack-table__tbody__tr.is-clicked td {
2333
- background-color: var(--pf-tanstack-table-clicked-color);
2332
+ background-color: var(--pf-tanstack-table-clicked-color) !important;
2334
2333
  }
2335
2334
  .tanstack-table__tbody__td {
2336
2335
  font-size: var(--pf-font-size-base);
@@ -2381,6 +2380,13 @@ form {
2381
2380
  display: block;
2382
2381
  }
2383
2382
 
2383
+ .table__pagination {
2384
+ padding-bottom: var(--pf-padding-4);
2385
+ padding-top: var(--pf-padding-4);
2386
+ background-color: var(--pf-tanstack-table-pagination-background-color);
2387
+ padding-left: var(--pf-padding-4);
2388
+ }
2389
+
2384
2390
  :root [data-theme=light] {
2385
2391
  --pf-pill-primary-background-color: var(--pf-primary-color);
2386
2392
  --pf-pill-primary-font-color: var(--pf-white-color);
@@ -2658,13 +2664,14 @@ form {
2658
2664
  width: 100%;
2659
2665
  }
2660
2666
 
2661
- :root,
2662
- :root [data-theme=light],
2663
- :root [data-theme=dark] {
2664
- --toastify-color-dark: var(--pf-background-color-light);
2665
- --toastify-color-progress-dark: var(--pf-primary-color-400);
2667
+ :root [data-theme=light] {
2668
+ --toastify-color-dark: var(--pf-white-color);
2669
+ --toastify-color-progress-dark: var(--pf-primary-color-200);
2666
2670
  --toastify-icon-color-success: var(--pf-success-color);
2667
2671
  --toastify-color-progress-bgo: 0.2;
2672
+ --toastify-text-color-dark: var(
2673
+ --pf-gray-color-600
2674
+ );
2668
2675
  }
2669
2676
 
2670
2677
  :root [data-theme=dark] {
@@ -2672,6 +2679,25 @@ form {
2672
2679
  --toastify-color-progress-dark: var(--pf-primary-color-400);
2673
2680
  --toastify-icon-color-success: var(--pf-success-color);
2674
2681
  --toastify-color-progress-bgo: 0.2;
2682
+ --toastify-text-color-dark: var(--pf-font-color);
2683
+ }
2684
+
2685
+ :root [data-theme=light] {
2686
+ --pf-stepper-background-color: var(--pf-gray-color-900);
2687
+ --pf-stepper-legend-background-color: var(--pf-gray-color-950);
2688
+ --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
2689
+ --pf-stepper-legend-circle-text-color: var(--pf-white-color);
2690
+ --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
2691
+ --pf-stepper-legend-step-text-color: var(--pf-white-color);
2692
+ --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
2693
+ --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
2694
+ --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
2695
+ --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
2696
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
2697
+ --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
2698
+ --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
2699
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
2700
+ --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
2675
2701
  }
2676
2702
 
2677
2703
  :root [data-theme=dark] {
@@ -2684,10 +2710,11 @@ form {
2684
2710
  --pf-stepper-legend-step-disabled-text-color: var(--pf-tertiary-color-450);
2685
2711
  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
2686
2712
  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
2713
+ --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
2687
2714
  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
2688
2715
  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
2689
2716
  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
2690
- --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
2717
+ --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
2691
2718
  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
2692
2719
  }
2693
2720
 
@@ -2744,6 +2771,7 @@ form {
2744
2771
  }
2745
2772
  .stepper .stepper-legend-circle.current {
2746
2773
  background-color: var(--pf-stepper-legend-circle-current-background-color);
2774
+ color: var(--pf-stepper-legend-circle-current-text-color);
2747
2775
  }
2748
2776
  .stepper .stepper-legend-line {
2749
2777
  width: 1px;
@@ -2764,6 +2792,9 @@ form {
2764
2792
  margin-left: var(--pf-margin-2);
2765
2793
  color: var(--pf-stepper-legend-step-text-color);
2766
2794
  }
2795
+ .stepper .stepper-legend-step--completed-step .btn {
2796
+ color: var(--pf-stepper-legend-step-completed-text-color);
2797
+ }
2767
2798
  .stepper .stepper-legend-step--current-step .btn {
2768
2799
  color: var(--pf-stepper-legend-step-current-text-color);
2769
2800
  text-decoration: underline;
package/lib/index.esm.js CHANGED
@@ -41312,7 +41312,7 @@ const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, })
41312
41312
  };
41313
41313
 
41314
41314
  function TanstackTable(_a) {
41315
- var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], actionBarClassName } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "actionBarClassName"]);
41315
+ var { columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage = 1000, onChangePage, totalEntriesText, TableActions, error, enableRowSelection = true, clearFilters, hasFilters, showPagination = true, isLoading = false, defaultPinnedColumns, onRowClick, activeRows = [], isStriped = true, actionBarClassName } = _a, rest = __rest(_a, ["columns", "data", "className", "currentPage", "rowCount", "rowsPerPage", "onChangePage", "totalEntriesText", "TableActions", "error", "enableRowSelection", "clearFilters", "hasFilters", "showPagination", "isLoading", "defaultPinnedColumns", "onRowClick", "activeRows", "isStriped", "actionBarClassName"]);
41316
41316
  const { columns, defaultData, windowWidth, rowSelection, // This refers to the checkboxes.
41317
41317
  setRowSelection, formattedColumns, setFormattedColumns, } = useTanstackTable({
41318
41318
  defaultColumns,
@@ -41356,6 +41356,7 @@ function TanstackTable(_a) {
41356
41356
  };
41357
41357
  return (jsxs("div", { className: "tanstack-table__outer-container", children: [jsxs("div", { className: "tanstack-table__container", children: [jsxs("table", { className: classNames('tanstack-table', className, {
41358
41358
  'is-Loading': isLoading,
41359
+ 'is-striped': isStriped,
41359
41360
  }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
41360
41361
  }
41361
41362