@carbon/ibm-products 1.17.0 → 1.18.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. package/README.md +30 -27
  2. package/css/components/Datagrid/styles/datagrid.css +24 -4
  3. package/css/components/Datagrid/styles/datagrid.css.map +1 -1
  4. package/css/components/Datagrid/styles/index.css +24 -4
  5. package/css/components/Datagrid/styles/index.css.map +1 -1
  6. package/css/index-full-carbon.css +215 -90
  7. package/css/index-full-carbon.css.map +1 -1
  8. package/css/index-full-carbon.min.css +4 -4
  9. package/css/index-full-carbon.min.css.map +1 -1
  10. package/css/index-without-carbon.css +98 -24
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +2 -2
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +124 -55
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +4 -4
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/AddSelect/AddSelect.js +57 -8
  19. package/es/components/AddSelect/AddSelectColumn.js +31 -73
  20. package/es/components/AddSelect/AddSelectFilter.js +2 -2
  21. package/es/components/AddSelect/AddSelectList.js +32 -6
  22. package/es/components/AddSelect/AddSelectMetaPanel.js +54 -0
  23. package/es/components/AddSelect/AddSelectSidebar.js +19 -1
  24. package/es/components/AddSelect/AddSelectSort.js +61 -0
  25. package/es/components/AddSelect/add-select-utils.js +21 -0
  26. package/es/components/AddSelect/hooks/useItemSort.js +20 -0
  27. package/es/components/DataSpreadsheet/DataSpreadsheet.js +29 -15
  28. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +89 -46
  29. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +70 -6
  30. package/es/components/DataSpreadsheet/hooks/index.js +3 -1
  31. package/es/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +15 -14
  32. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +64 -0
  33. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +155 -0
  34. package/es/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -3
  35. package/es/components/DataSpreadsheet/utils/getCellSize.js +10 -10
  36. package/es/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +8 -2
  37. package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +1 -1
  38. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +35 -0
  39. package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
  40. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +22 -3
  41. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +3 -3
  42. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
  43. package/es/components/ExportModal/ExportModal.js +1 -1
  44. package/lib/components/AddSelect/AddSelect.js +58 -8
  45. package/lib/components/AddSelect/AddSelectColumn.js +32 -71
  46. package/lib/components/AddSelect/AddSelectFilter.js +2 -2
  47. package/lib/components/AddSelect/AddSelectList.js +30 -4
  48. package/lib/components/AddSelect/AddSelectMetaPanel.js +77 -0
  49. package/lib/components/AddSelect/AddSelectSidebar.js +20 -1
  50. package/lib/components/AddSelect/AddSelectSort.js +79 -0
  51. package/lib/components/AddSelect/add-select-utils.js +29 -2
  52. package/lib/components/AddSelect/hooks/useItemSort.js +33 -0
  53. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +28 -14
  54. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +90 -45
  55. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +72 -6
  56. package/lib/components/DataSpreadsheet/hooks/index.js +17 -1
  57. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js +14 -14
  58. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +78 -0
  59. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +163 -0
  60. package/lib/components/DataSpreadsheet/utils/createCellSelectionArea.js +3 -3
  61. package/lib/components/DataSpreadsheet/utils/getCellSize.js +4 -4
  62. package/lib/components/DataSpreadsheet/utils/getSpreadsheetWidth.js +8 -2
  63. package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +1 -1
  64. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +46 -0
  65. package/lib/components/Datagrid/Datagrid/Datagrid.js +1 -1
  66. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +24 -3
  67. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +3 -3
  68. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
  69. package/lib/components/ExportModal/ExportModal.js +1 -1
  70. package/package.json +13 -12
  71. package/scss/components/AddSelect/_add-select.scss +45 -5
  72. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +28 -14
  73. package/scss/components/Datagrid/_storybook-styles.scss +5 -0
  74. package/scss/components/Datagrid/styles/datagrid.scss +43 -5
@@ -983,20 +983,20 @@ em {
983
983
  }
984
984
 
985
985
  /* stylelint-disable */
986
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
986
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
987
987
  .bx--snippet__icon {
988
988
  fill: ButtonText;
989
989
  }
990
990
  }
991
991
 
992
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
992
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
993
993
  .bx--snippet--inline:focus {
994
994
  color: Highlight;
995
995
  outline: 1px solid Highlight;
996
996
  }
997
997
  }
998
998
 
999
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
999
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
1000
1000
  .bx--snippet--single,
1001
1001
  .bx--snippet--multi {
1002
1002
  outline: 1px solid transparent;
@@ -2729,14 +2729,14 @@ em {
2729
2729
  box-shadow: none;
2730
2730
  }
2731
2731
 
2732
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
2732
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
2733
2733
  .bx--btn:focus {
2734
2734
  color: Highlight;
2735
2735
  outline: 1px solid Highlight;
2736
2736
  }
2737
2737
  }
2738
2738
 
2739
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
2739
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
2740
2740
  .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon path:not([data-icon-path]):not([fill=none]),
2741
2741
  .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon {
2742
2742
  fill: ButtonText;
@@ -3265,13 +3265,13 @@ em {
3265
3265
  }
3266
3266
 
3267
3267
  /* stylelint-disable */
3268
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3268
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
3269
3269
  .bx--modal-close__icon {
3270
3270
  fill: ButtonText;
3271
3271
  }
3272
3272
  }
3273
3273
 
3274
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3274
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
3275
3275
  .bx--modal-close:focus {
3276
3276
  color: Highlight;
3277
3277
  outline: 1px solid Highlight;
@@ -4058,7 +4058,7 @@ fieldset[disabled] .bx--form__helper-text {
4058
4058
  background: transparent;
4059
4059
  }
4060
4060
 
4061
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4061
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
4062
4062
  .bx--text-input--password__visibility,
4063
4063
  .bx--btn.bx--btn--icon-only.bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg,
4064
4064
  .bx--btn.bx--btn--icon-only.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:hover svg {
@@ -5190,14 +5190,14 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
5190
5190
  white-space: nowrap;
5191
5191
  }
5192
5192
 
5193
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
5193
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5194
5194
  .bx--tabs--scrollable__nav-item .bx--tabs__nav-item--selected .bx--tabs--scrollable__nav-item--selected {
5195
5195
  color: Highlight;
5196
5196
  outline: 1px solid Highlight;
5197
5197
  }
5198
5198
  }
5199
5199
 
5200
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
5200
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5201
5201
  .bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link {
5202
5202
  color: GrayText;
5203
5203
  fill: GrayText;
@@ -7723,7 +7723,7 @@ a.bx--overflow-menu-options__btn::before {
7723
7723
  }
7724
7724
 
7725
7725
  /* stylelint-disable */
7726
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
7726
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7727
7727
  .bx--overflow-menu:focus,
7728
7728
  .bx--overflow-menu-options__btn:focus {
7729
7729
  color: Highlight;
@@ -7731,7 +7731,7 @@ a.bx--overflow-menu-options__btn::before {
7731
7731
  }
7732
7732
  }
7733
7733
 
7734
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
7734
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7735
7735
  .bx--overflow-menu svg {
7736
7736
  fill: ButtonText;
7737
7737
  }
@@ -9952,7 +9952,7 @@ a.bx--overflow-menu-options__btn::before {
9952
9952
  }
9953
9953
 
9954
9954
  /* stylelint-disable */
9955
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
9955
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9956
9956
  .bx--tooltip__trigger svg,
9957
9957
  .bx--tooltip__trigger:hover svg,
9958
9958
  .bx--tooltip__trigger:focus svg {
@@ -9960,20 +9960,20 @@ a.bx--overflow-menu-options__btn::before {
9960
9960
  }
9961
9961
  }
9962
9962
 
9963
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
9963
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9964
9964
  .bx--tooltip__trigger:focus svg {
9965
9965
  color: Highlight;
9966
9966
  outline: 1px solid Highlight;
9967
9967
  }
9968
9968
  }
9969
9969
 
9970
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
9970
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9971
9971
  .bx--tooltip {
9972
9972
  outline: 1px solid transparent;
9973
9973
  }
9974
9974
  }
9975
9975
 
9976
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
9976
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
9977
9977
  .bx--assistive-text {
9978
9978
  outline: 1px solid transparent;
9979
9979
  }
@@ -12484,7 +12484,7 @@ a.bx--side-nav__link--current::before {
12484
12484
  fill: #525252;
12485
12485
  }
12486
12486
 
12487
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
12487
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
12488
12488
  .bx--side-nav__icon > svg,
12489
12489
  .bx--side-nav a.bx--header__menu-item:hover .bx--header__menu-arrow,
12490
12490
  .bx--side-nav a.bx--header__menu-item:focus .bx--header__menu-arrow,
@@ -13184,14 +13184,9 @@ a.bx--side-nav__link--current::before {
13184
13184
  content: "";
13185
13185
  transform: scale(0.5);
13186
13186
  }
13187
- @media screen and (-ms-high-contrast: active) {
13188
- .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
13189
- background-color: WindowText;
13190
- }
13191
- }
13192
- @media screen and (prefers-contrast) {
13187
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
13193
13188
  .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
13194
- border: 2px solid WindowText;
13189
+ fill: ButtonText;
13195
13190
  }
13196
13191
  }
13197
13192
 
@@ -13899,13 +13894,13 @@ a.bx--side-nav__link--current::before {
13899
13894
  }
13900
13895
 
13901
13896
  /* stylelint-disable */
13902
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
13897
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
13903
13898
  .bx--file__selected-file {
13904
13899
  outline: 1px solid transparent;
13905
13900
  }
13906
13901
  }
13907
13902
 
13908
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
13903
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
13909
13904
  .bx--file__state-container .bx--file-close svg path {
13910
13905
  fill: ButtonText;
13911
13906
  }
@@ -14256,7 +14251,7 @@ a.bx--side-nav__link--current::before {
14256
14251
  display: none;
14257
14252
  }
14258
14253
 
14259
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
14254
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
14260
14255
  .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
14261
14256
  fill: ButtonText;
14262
14257
  }
@@ -14296,16 +14291,16 @@ a.bx--side-nav__link--current::before {
14296
14291
  display: block;
14297
14292
  color: var(--cds-text-02, #525252);
14298
14293
  }
14299
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-dropdown {
14294
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
14300
14295
  visibility: visible;
14301
14296
  }
14302
- .c4p--add-select__selections-dropdown {
14297
+ .c4p--add-select__selections-hidden-hover {
14303
14298
  visibility: hidden;
14304
14299
  }
14305
14300
  .c4p--add-select__selections-row-selected {
14306
14301
  background: #e5e5e5;
14307
14302
  }
14308
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-dropdown {
14303
+ .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
14309
14304
  visibility: visible;
14310
14305
  }
14311
14306
  .c4p--add-select__selections-checkbox {
@@ -14333,6 +14328,12 @@ a.bx--side-nav__link--current::before {
14333
14328
  margin-right: var(--cds-spacing-03, 0.5rem);
14334
14329
  }
14335
14330
 
14331
+ .c4p--add-select__sub-header {
14332
+ display: flex;
14333
+ align-items: flex-end;
14334
+ justify-content: space-between;
14335
+ }
14336
+
14336
14337
  .c4p--add-select__sidebar-header {
14337
14338
  display: flex;
14338
14339
  padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
@@ -14397,7 +14398,8 @@ a.bx--side-nav__link--current::before {
14397
14398
  overflow-x: auto;
14398
14399
  }
14399
14400
 
14400
- .c4p--add-select__columns .c4p--add-select__selections-cell {
14401
+ .c4p--add-select .c4p--add-select__columns .bx--structured-list-td {
14402
+ height: 0;
14401
14403
  padding: 0 !important;
14402
14404
  }
14403
14405
 
@@ -14471,6 +14473,40 @@ button.c4p--add-select__global-filter-toggle {
14471
14473
  background: var(--cds-field-01, #f4f4f4);
14472
14474
  }
14473
14475
 
14476
+ .c4p--add-select__meta-panel {
14477
+ padding: var(--cds-spacing-05, 1rem);
14478
+ }
14479
+ .c4p--add-select__meta-panel-header {
14480
+ display: flex;
14481
+ align-items: center;
14482
+ justify-content: space-between;
14483
+ margin-bottom: var(--cds-spacing-05, 1rem);
14484
+ }
14485
+ .c4p--add-select__meta-panel-entry {
14486
+ margin-bottom: var(--cds-spacing-05, 1rem);
14487
+ }
14488
+
14489
+ .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-title {
14490
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
14491
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
14492
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
14493
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
14494
+ }
14495
+
14496
+ .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-title {
14497
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
14498
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
14499
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
14500
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
14501
+ }
14502
+
14503
+ .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
14504
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
14505
+ font-weight: var(--cds-body-short-01-font-weight, 400);
14506
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
14507
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14508
+ }
14509
+
14474
14510
  .c4p--add-select__tag-container .bx--tag {
14475
14511
  margin: 0;
14476
14512
  }
@@ -14501,7 +14537,9 @@ button.c4p--add-select__global-filter-toggle {
14501
14537
  }
14502
14538
 
14503
14539
  .c4p--add-select .bx--structured-list-td {
14504
- padding-bottom: var(--cds-spacing-05, 1rem);
14540
+ height: 4rem;
14541
+ padding: var(--cds-spacing-05, 1rem);
14542
+ vertical-align: middle;
14505
14543
  }
14506
14544
 
14507
14545
  .c4p--add-select .bx--radio-button__appearance {
@@ -15735,20 +15773,20 @@ button.c4p--add-select__global-filter-toggle {
15735
15773
  }
15736
15774
 
15737
15775
  /* stylelint-disable */
15738
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
15776
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15739
15777
  .bx--tag {
15740
15778
  outline: 1px solid transparent;
15741
15779
  }
15742
15780
  }
15743
15781
 
15744
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
15782
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15745
15783
  .bx--tag__close-icon svg,
15746
15784
  .bx--tag__custom-icon svg {
15747
15785
  fill: ButtonText;
15748
15786
  }
15749
15787
  }
15750
15788
 
15751
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
15789
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15752
15790
  .bx--tag__close-icon:focus {
15753
15791
  color: Highlight;
15754
15792
  outline: 1px solid Highlight;
@@ -16251,7 +16289,7 @@ button.c4p--add-select__global-filter-toggle {
16251
16289
  fill: var(--cds-icon-02, #525252);
16252
16290
  }
16253
16291
 
16254
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
16292
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
16255
16293
  .bx--search-close svg,
16256
16294
  .bx--search-magnifier-icon {
16257
16295
  fill: ButtonText;
@@ -19305,8 +19343,8 @@ button.c4p--add-select__global-filter-toggle {
19305
19343
  }
19306
19344
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
19307
19345
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td {
19308
- border-right: 1px solid var(--cds-text-03, #a8a8a8);
19309
- border-bottom: 1px solid var(--cds-text-03, #a8a8a8);
19346
+ border-right: 1px solid var(--cds-active-ui, #c6c6c6);
19347
+ border-bottom: 1px solid var(--cds-active-ui, #c6c6c6);
19310
19348
  height: 100%;
19311
19349
  background-color: var(--cds-ui-03, #e0e0e0);
19312
19350
  cursor: pointer;
@@ -19417,17 +19455,6 @@ button.c4p--add-select__global-filter-toggle {
19417
19455
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
19418
19456
  outline: 0;
19419
19457
  }
19420
- .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight.c4p--data-spreadsheet__active-cell--with-selection::before {
19421
- position: absolute;
19422
- top: 0;
19423
- left: 0;
19424
- display: block;
19425
- width: 100%;
19426
- height: 100%;
19427
- background-color: var(--cds-interactive-01, #0f62fe);
19428
- content: "";
19429
- opacity: 0.25;
19430
- }
19431
19458
  .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element {
19432
19459
  position: absolute;
19433
19460
  z-index: 2;
@@ -19445,19 +19472,41 @@ button.c4p--add-select__global-filter-toggle {
19445
19472
  content: "";
19446
19473
  opacity: 0.2;
19447
19474
  }
19475
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element.c4p--data-spreadsheet__selection-area--element-cloned {
19476
+ z-index: 4;
19477
+ }
19478
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element.c4p--data-spreadsheet__selection-area--element-cloned::before {
19479
+ background-color: var(--cds-ui-05, #161616);
19480
+ opacity: 0.25;
19481
+ }
19482
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__reorder-indicator-line {
19483
+ position: absolute;
19484
+ z-index: 4;
19485
+ width: var(--cds-spacing-01, 0.125rem);
19486
+ background-color: var(--cds-interactive-01, #0f62fe);
19487
+ }
19448
19488
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--active-header,
19449
19489
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--active-header.c4p--data-spreadsheet__td {
19490
+ border-right: 1px solid var(--cds-text-03, #a8a8a8);
19491
+ border-bottom: 1px solid var(--cds-text-03, #a8a8a8);
19450
19492
  background-color: var(--cds-hover-selected-ui, #cacaca);
19451
19493
  }
19452
19494
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header,
19453
19495
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td {
19454
19496
  background-color: var(--cds-inverse-02, #393939);
19455
- color: var(--cds-text-04, #ffffff);
19497
+ color: var(--cds-inverse-01, #ffffff);
19456
19498
  }
19457
- .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
19499
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:focus, .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
19500
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:focus,
19458
19501
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:hover {
19459
19502
  background-color: var(--cds-inverse-02, #393939);
19460
19503
  }
19504
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header.c4p--data-spreadsheet__th {
19505
+ cursor: grab;
19506
+ }
19507
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header-reorder-active.c4p--data-spreadsheet__th {
19508
+ cursor: grabbing;
19509
+ }
19461
19510
  .c4p--data-spreadsheet .c4p--data-spreadsheet__list--container {
19462
19511
  overscroll-behavior: none;
19463
19512
  }
@@ -19579,10 +19628,6 @@ button.c4p--add-select__global-filter-toggle {
19579
19628
  width: 1%;
19580
19629
  align-items: center;
19581
19630
  }
19582
- .c4p--datagrid__grid-container .c4p--datagrid__empty-state-body {
19583
- display: flex;
19584
- width: 100%;
19585
- }
19586
19631
  .c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar {
19587
19632
  scrollbar-width: thin;
19588
19633
  }
@@ -19631,6 +19676,30 @@ button.c4p--add-select__global-filter-toggle {
19631
19676
  padding-right: var(--cds-spacing-06, 1.5rem) !important;
19632
19677
  }
19633
19678
 
19679
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
19680
+ display: table;
19681
+ height: 100%;
19682
+ }
19683
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple .c4p--empty-state {
19684
+ max-width: 280px;
19685
+ }
19686
+
19687
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover {
19688
+ background: transparent;
19689
+ }
19690
+
19691
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover td {
19692
+ background: transparent;
19693
+ }
19694
+
19695
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple td {
19696
+ padding: var(--cds-spacing-11, 5rem);
19697
+ }
19698
+
19699
+ .c4p--datagrid__empty-state .c4p--datagrid__grid-container {
19700
+ flex: 1 1 auto;
19701
+ }
19702
+
19634
19703
  .c4p--datagrid__resizer {
19635
19704
  position: absolute;
19636
19705
  z-index: 1;
@@ -21871,7 +21940,7 @@ li.bx--accordion__item--disabled:last-of-type {
21871
21940
  margin-bottom: 0;
21872
21941
  }
21873
21942
 
21874
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
21943
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
21875
21944
  .bx--accordion__arrow,
21876
21945
  .bx--accordion__item--active .bx--accordion__arrow {
21877
21946
  fill: ButtonText;
@@ -22778,7 +22847,7 @@ li.bx--accordion__item--disabled:last-of-type {
22778
22847
  background-color: inherit;
22779
22848
  }
22780
22849
 
22781
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
22850
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
22782
22851
  .bx--list-box__field,
22783
22852
  .bx--list-box__menu,
22784
22853
  .bx--multi-select .bx--tag--filter {
@@ -22786,7 +22855,7 @@ li.bx--accordion__item--disabled:last-of-type {
22786
22855
  }
22787
22856
  }
22788
22857
 
22789
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
22858
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
22790
22859
  .bx--list-box__field:focus,
22791
22860
  .bx--multi-select .bx--tag__close-icon:focus,
22792
22861
  .bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option {
@@ -22795,7 +22864,7 @@ li.bx--accordion__item--disabled:last-of-type {
22795
22864
  }
22796
22865
  }
22797
22866
 
22798
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
22867
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
22799
22868
  .bx--list-box__menu-icon > svg,
22800
22869
  .bx--list-box__selection > svg,
22801
22870
  .bx--list-box__selection--multi > svg {
@@ -23008,7 +23077,7 @@ li.bx--accordion__item--disabled:last-of-type {
23008
23077
  fill: var(--cds-icon-inverse, #ffffff);
23009
23078
  }
23010
23079
 
23011
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
23080
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
23012
23081
  .bx--content-switcher-btn:focus {
23013
23082
  color: Highlight;
23014
23083
  outline: 1px solid Highlight;
@@ -24323,7 +24392,7 @@ tr.bx--data-table--selected:last-of-type td {
24323
24392
  margin: -0.1875rem 0;
24324
24393
  }
24325
24394
 
24326
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
24395
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24327
24396
  .bx--data-table-content {
24328
24397
  outline: 1px solid transparent;
24329
24398
  }
@@ -24609,14 +24678,14 @@ tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-c
24609
24678
  background: var(--cds-layer-selected, #e0e0e0);
24610
24679
  }
24611
24680
 
24612
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
24681
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24613
24682
  .bx--table-expand__button:focus .bx--table-expand__svg {
24614
24683
  color: Highlight;
24615
24684
  outline: 1px solid Highlight;
24616
24685
  }
24617
24686
  }
24618
24687
 
24619
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
24688
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24620
24689
  .bx--table-expand__svg {
24621
24690
  fill: ButtonText;
24622
24691
  }
@@ -24794,7 +24863,7 @@ th .bx--table-sort__flex {
24794
24863
  margin-top: 0.8125rem;
24795
24864
  }
24796
24865
 
24797
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
24866
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
24798
24867
  .bx--table-sort__icon,
24799
24868
  .bx--table-sort__icon-unsorted {
24800
24869
  fill: ButtonText;
@@ -25506,14 +25575,14 @@ th .bx--table-sort__flex {
25506
25575
  cursor: pointer;
25507
25576
  }
25508
25577
 
25509
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
25578
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25510
25579
  .flatpickr-prev-month,
25511
25580
  .flatpickr-next-month {
25512
25581
  fill: ButtonText;
25513
25582
  }
25514
25583
  }
25515
25584
 
25516
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
25585
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25517
25586
  .flatpickr-day.selected {
25518
25587
  color: Highlight;
25519
25588
  outline: 1px solid Highlight;
@@ -25521,14 +25590,14 @@ th .bx--table-sort__flex {
25521
25590
  }
25522
25591
  }
25523
25592
 
25524
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
25593
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25525
25594
  .flatpickr-day.today,
25526
25595
  .flatpickr-day.inRange {
25527
25596
  color: Highlight;
25528
25597
  }
25529
25598
  }
25530
25599
 
25531
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
25600
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25532
25601
  .flatpickr-calendar {
25533
25602
  outline: 1px solid transparent;
25534
25603
  }
@@ -25755,7 +25824,7 @@ th .bx--table-sort__flex {
25755
25824
  }
25756
25825
  }
25757
25826
 
25758
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
25827
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
25759
25828
  .bx--date-picker__icon {
25760
25829
  fill: ButtonText;
25761
25830
  }
@@ -26208,19 +26277,19 @@ button.bx--dropdown-text:focus {
26208
26277
  }
26209
26278
  }
26210
26279
 
26211
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
26280
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26212
26281
  .bx--dropdown .bx--list-box__field {
26213
26282
  outline: 1px solid transparent;
26214
26283
  }
26215
26284
  }
26216
26285
 
26217
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
26286
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26218
26287
  .bx--list-box__menu-item__option {
26219
26288
  outline: none;
26220
26289
  }
26221
26290
  }
26222
26291
 
26223
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
26292
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26224
26293
  .bx--list-box__menu-item__selected-icon {
26225
26294
  fill: ButtonText;
26226
26295
  }
@@ -26921,13 +26990,13 @@ button.bx--dropdown-text:focus {
26921
26990
  }
26922
26991
 
26923
26992
  /* stylelint-disable */
26924
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
26993
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26925
26994
  .bx--inline-notification {
26926
26995
  outline: 1px solid transparent;
26927
26996
  }
26928
26997
  }
26929
26998
 
26930
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
26999
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26931
27000
  .bx--inline-notification__close-button:focus,
26932
27001
  .bx--btn.bx--btn--ghost.bx--inline-notification__action-button:focus {
26933
27002
  color: Highlight;
@@ -26935,7 +27004,7 @@ button.bx--dropdown-text:focus {
26935
27004
  }
26936
27005
  }
26937
27006
 
26938
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27007
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
26939
27008
  .bx--inline-notification__icon {
26940
27009
  fill: ButtonText;
26941
27010
  }
@@ -27182,20 +27251,20 @@ button.bx--dropdown-text:focus {
27182
27251
  }
27183
27252
 
27184
27253
  /* stylelint-disable */
27185
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27254
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27186
27255
  .bx--toast-notification {
27187
27256
  outline: 1px solid transparent;
27188
27257
  }
27189
27258
  }
27190
27259
 
27191
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27260
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27192
27261
  .bx--toast-notification__close-button:focus {
27193
27262
  color: Highlight;
27194
27263
  outline: 1px solid Highlight;
27195
27264
  }
27196
27265
  }
27197
27266
 
27198
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27267
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27199
27268
  .bx--toast-notification__icon {
27200
27269
  fill: ButtonText;
27201
27270
  }
@@ -27608,7 +27677,7 @@ button.bx--dropdown-text:focus {
27608
27677
  }
27609
27678
 
27610
27679
  /* stylelint-disable */
27611
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27680
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27612
27681
  .bx--number__control-btn:hover,
27613
27682
  .bx--number__control-btn:focus {
27614
27683
  color: Highlight;
@@ -27616,13 +27685,13 @@ button.bx--dropdown-text:focus {
27616
27685
  }
27617
27686
  }
27618
27687
 
27619
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27688
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27620
27689
  .bx--number__control-btn {
27621
27690
  outline: 1px solid transparent;
27622
27691
  }
27623
27692
  }
27624
27693
 
27625
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
27694
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27626
27695
  .bx--number__control-btn svg {
27627
27696
  fill: ButtonText;
27628
27697
  }
@@ -28053,7 +28122,7 @@ optgroup.bx--select-optgroup:disabled,
28053
28122
  display: none;
28054
28123
  }
28055
28124
 
28056
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
28125
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28057
28126
  .bx--select__arrow {
28058
28127
  fill: ButtonText;
28059
28128
  }
@@ -28274,7 +28343,7 @@ span.bx--pagination__text {
28274
28343
  margin-bottom: 0;
28275
28344
  }
28276
28345
 
28277
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
28346
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28278
28347
  .bx--pagination__button,
28279
28348
  .bx--btn--ghost.bx--pagination__button {
28280
28349
  outline: 1px solid transparent;
@@ -28286,14 +28355,23 @@ span.bx--pagination__text {
28286
28355
  font-weight: var(--cds-body-short-01-font-weight, 400);
28287
28356
  line-height: var(--cds-body-short-01-line-height, 1.28572);
28288
28357
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
28289
- display: block;
28358
+ display: flex;
28359
+ min-width: 3rem;
28360
+ justify-content: space-between;
28290
28361
  margin-bottom: var(--cds-spacing-03, 0.5rem);
28291
28362
  color: var(--cds-text-primary, #161616);
28292
28363
  }
28293
28364
 
28365
+ .bx--progress-bar__label-text {
28366
+ overflow: hidden;
28367
+ text-overflow: ellipsis;
28368
+ white-space: nowrap;
28369
+ }
28370
+
28294
28371
  .bx--progress-bar__track {
28295
28372
  position: relative;
28296
28373
  width: 100%;
28374
+ min-width: 3rem;
28297
28375
  height: 0.5rem;
28298
28376
  background-color: var(--cds-layer, #f4f4f4);
28299
28377
  }
@@ -28310,7 +28388,8 @@ span.bx--pagination__text {
28310
28388
  display: block;
28311
28389
  width: 100%;
28312
28390
  height: 100%;
28313
- background-color: var(--cds-interactive, #0f62fe);
28391
+ background-color: currentColor;
28392
+ color: var(--cds-interactive, #0f62fe);
28314
28393
  transform: scaleX(0);
28315
28394
  transform-origin: 0 center /*rtl:100% center*/;
28316
28395
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -28336,10 +28415,52 @@ span.bx--pagination__text {
28336
28415
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
28337
28416
  line-height: var(--cds-helper-text-01-line-height, 1.33333);
28338
28417
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
28339
- margin-top: var(--cds-spacing-02, 0.25rem);
28418
+ margin-top: var(--cds-spacing-03, 0.5rem);
28340
28419
  color: var(--cds-text-secondary, #525252);
28341
28420
  }
28342
28421
 
28422
+ .bx--progress-bar__status-icon {
28423
+ flex-shrink: 0;
28424
+ margin-left: var(--cds-spacing-05, 1rem);
28425
+ }
28426
+
28427
+ .bx--progress-bar--finished .bx--progress-bar__bar,
28428
+ .bx--progress-bar--finished .bx--progress-bar__status-icon {
28429
+ color: var(--cds-support-success, #198038);
28430
+ }
28431
+
28432
+ .bx--progress-bar--error .bx--progress-bar__bar,
28433
+ .bx--progress-bar--error .bx--progress-bar__status-icon,
28434
+ .bx--progress-bar--error .bx--progress-bar__helper-text {
28435
+ color: var(--cds-support-error, #da1e28);
28436
+ }
28437
+
28438
+ .bx--progress-bar--finished .bx--progress-bar__bar,
28439
+ .bx--progress-bar--error .bx--progress-bar__bar {
28440
+ transform: scaleX(1);
28441
+ }
28442
+
28443
+ .bx--progress-bar--finished.bx--progress-bar--inline .bx--progress-bar__track,
28444
+ .bx--progress-bar--error.bx--progress-bar--inline .bx--progress-bar__track {
28445
+ position: absolute;
28446
+ overflow: hidden;
28447
+ width: 1px;
28448
+ height: 1px;
28449
+ padding: 0;
28450
+ border: 0;
28451
+ margin: -1px;
28452
+ clip: rect(0, 0, 0, 0);
28453
+ visibility: inherit;
28454
+ white-space: nowrap;
28455
+ }
28456
+
28457
+ .bx--progress-bar--finished.bx--progress-bar--inline .bx--progress-bar__label,
28458
+ .bx--progress-bar--error.bx--progress-bar--inline .bx--progress-bar__label {
28459
+ flex-shrink: 1;
28460
+ justify-content: flex-start;
28461
+ margin-right: 0;
28462
+ }
28463
+
28343
28464
  @keyframes progress-bar-indeterminate {
28344
28465
  0% {
28345
28466
  background-position-x: 25%;
@@ -28354,11 +28475,15 @@ span.bx--pagination__text {
28354
28475
  }
28355
28476
 
28356
28477
  .bx--progress-bar--inline .bx--progress-bar__label {
28357
- flex-shrink: 0;
28358
28478
  margin-right: var(--cds-spacing-05, 1rem);
28359
28479
  margin-bottom: 0;
28360
28480
  }
28361
28481
 
28482
+ .bx--progress-bar--inline .bx--progress-bar__track {
28483
+ flex-basis: 0;
28484
+ flex-grow: 1;
28485
+ }
28486
+
28362
28487
  .bx--progress-bar--inline .bx--progress-bar__helper-text {
28363
28488
  position: absolute;
28364
28489
  overflow: hidden;
@@ -28645,20 +28770,20 @@ span.bx--pagination__text {
28645
28770
  }
28646
28771
 
28647
28772
  /* stylelint-disable */
28648
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
28773
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28649
28774
  .bx--slider__thumb {
28650
28775
  outline: 1px solid transparent;
28651
28776
  }
28652
28777
  }
28653
28778
 
28654
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
28779
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28655
28780
  .bx--slider__thumb:focus {
28656
28781
  color: Highlight;
28657
28782
  outline: 1px solid Highlight;
28658
28783
  }
28659
28784
  }
28660
28785
 
28661
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
28786
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28662
28787
  .bx--slider__track {
28663
28788
  outline: 1px solid transparent;
28664
28789
  }