@carbon/ibm-products 1.27.0 → 1.31.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (136) hide show
  1. package/css/index-full-carbon.css +513 -75
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +942 -23
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +512 -74
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +513 -75
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.js +0 -3
  18. package/es/components/AddSelect/AddSelectBody.js +20 -3
  19. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  20. package/es/components/AddSelect/AddSelectColumn.js +4 -3
  21. package/es/components/AddSelect/AddSelectFilter.js +4 -3
  22. package/es/components/AddSelect/AddSelectList.js +40 -14
  23. package/es/components/Card/Card.js +16 -6
  24. package/es/components/Card/CardFooter.js +3 -1
  25. package/es/components/Card/CardHeader.js +20 -1
  26. package/es/components/DataSpreadsheet/DataSpreadsheet.js +62 -11
  27. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  28. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  29. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  30. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  31. package/es/components/Datagrid/Datagrid/DatagridContent.js +106 -0
  32. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  33. package/es/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  34. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -40
  35. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  36. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  37. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  38. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +63 -0
  39. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  40. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +459 -0
  41. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  42. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  43. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  44. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  45. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +31 -0
  46. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  47. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +197 -0
  48. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  49. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  50. package/es/components/Datagrid/index.js +3 -1
  51. package/es/components/Datagrid/useColumnOrder.js +8 -0
  52. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  53. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  54. package/es/components/Datagrid/useInlineEdit.js +71 -0
  55. package/es/components/Datagrid/useRowSize.js +17 -6
  56. package/es/components/Datagrid/useSelectRows.js +12 -2
  57. package/es/components/Datagrid/useStickyColumn.js +11 -0
  58. package/es/components/Datagrid/utils/getInlineEditColumns.js +121 -0
  59. package/es/components/Datagrid/utils/makeData.js +17 -1
  60. package/es/components/ImportModal/ImportModal.js +2 -2
  61. package/es/components/InlineEdit/InlineEdit.js +4 -2
  62. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  63. package/es/components/index.js +1 -1
  64. package/es/global/js/hooks/useClickOutside.js +1 -1
  65. package/es/global/js/package-settings.js +3 -3
  66. package/es/global/js/utils/rangeWithCallback.js +13 -0
  67. package/es/global/js/utils/uuidv4.spec.js +4 -0
  68. package/lib/components/AddSelect/AddSelect.js +0 -4
  69. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  70. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  71. package/lib/components/AddSelect/AddSelectColumn.js +3 -2
  72. package/lib/components/AddSelect/AddSelectFilter.js +3 -2
  73. package/lib/components/AddSelect/AddSelectList.js +39 -13
  74. package/lib/components/Card/Card.js +16 -6
  75. package/lib/components/Card/CardFooter.js +3 -1
  76. package/lib/components/Card/CardHeader.js +21 -1
  77. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +62 -10
  78. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  79. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  80. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  81. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  82. package/lib/components/Datagrid/Datagrid/DatagridContent.js +138 -0
  83. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  84. package/lib/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  85. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -41
  86. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  87. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  88. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  89. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +79 -0
  90. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  91. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +483 -0
  92. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  93. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  94. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  95. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  96. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +42 -0
  97. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  98. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +204 -0
  99. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  100. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  101. package/lib/components/Datagrid/index.js +17 -1
  102. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  103. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  104. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  105. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  106. package/lib/components/Datagrid/useRowSize.js +18 -13
  107. package/lib/components/Datagrid/useSelectRows.js +12 -2
  108. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  109. package/lib/components/Datagrid/utils/getInlineEditColumns.js +133 -0
  110. package/lib/components/Datagrid/utils/makeData.js +17 -1
  111. package/lib/components/ImportModal/ImportModal.js +2 -2
  112. package/lib/components/InlineEdit/InlineEdit.js +4 -2
  113. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  114. package/lib/components/index.js +12 -0
  115. package/lib/global/js/hooks/useClickOutside.js +1 -1
  116. package/lib/global/js/package-settings.js +3 -3
  117. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  118. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  119. package/package.json +13 -13
  120. package/scss/components/AddSelect/_add-select.scss +126 -28
  121. package/scss/components/Card/_card.scss +1 -0
  122. package/scss/components/Cascade/_cascade.scss +1 -1
  123. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
  124. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +18 -1
  125. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  126. package/scss/components/Datagrid/styles/_datagrid.scss +27 -0
  127. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  128. package/scss/components/Datagrid/styles/_index.scss +1 -0
  129. package/scss/components/Datagrid/styles/_useInlineEdit.scss +211 -0
  130. package/scss/components/Datagrid/styles/_useStickyColumn.scss +24 -2
  131. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +44 -6
  132. package/scss/components/NotificationsPanel/_notifications-panel.scss +5 -6
  133. package/scss/components/ProductiveCard/_productive-card.scss +39 -0
  134. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  135. package/scss/components/SidePanel/_side-panel.scss +4 -6
  136. package/scss/components/_index-released-only.scss +1 -0
package/css/index.css CHANGED
@@ -191,7 +191,7 @@ h1 {
191
191
 
192
192
  h2 {
193
193
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
194
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
194
+ font-weight: var(--cds-productive-heading-05-font-weight, 300);
195
195
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
196
196
  letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
197
197
  }
@@ -11113,8 +11113,7 @@ a.bx--overflow-menu-options__btn::before {
11113
11113
  box-sizing: border-box;
11114
11114
  background-color: var(--cds-ui-01, #f4f4f4);
11115
11115
  color: var(--cds-text-01, #161616);
11116
- transition: transform 240ms;
11117
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
11116
+ transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
11118
11117
  }
11119
11118
  .c4p--side-panel__container.c4p--side-panel__container--xs {
11120
11119
  width: 16rem;
@@ -11414,6 +11413,7 @@ a.bx--overflow-menu-options__btn::before {
11414
11413
  background-color: var(--cds-ui-01, #f4f4f4);
11415
11414
  opacity: var(--c4p--side-panel--subtitle-opacity);
11416
11415
  transform: translateY(var(--c4p--side-panel--title-y-position));
11416
+ word-break: break-word;
11417
11417
  }
11418
11418
  .c4p--side-panel__container .c4p--side-panel__label-text {
11419
11419
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -11523,8 +11523,7 @@ a.bx--overflow-menu-options__btn::before {
11523
11523
  padding: 0 var(--cds-spacing-05, 1rem);
11524
11524
  margin-bottom: var(--cds-spacing-03, 0.5rem);
11525
11525
  background-color: var(--cds-ui-01, #f4f4f4);
11526
- transition: transform 150ms;
11527
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
11526
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11528
11527
  }
11529
11528
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
11530
11529
  min-width: 2rem;
@@ -11650,8 +11649,7 @@ a.bx--overflow-menu-options__btn::before {
11650
11649
  width: 100%;
11651
11650
  height: 100%;
11652
11651
  background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
11653
- transition: background-color 240ms;
11654
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
11652
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
11655
11653
  }
11656
11654
 
11657
11655
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -13378,7 +13376,7 @@ a.bx--side-nav__link--current::before {
13378
13376
 
13379
13377
  .c4p--http-errors .c4p--http-errors__title {
13380
13378
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
13381
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
13379
+ font-weight: var(--cds-productive-heading-05-font-weight, 300);
13382
13380
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
13383
13381
  letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
13384
13382
  margin-bottom: var(--cds-spacing-04, 0.75rem);
@@ -14163,7 +14161,6 @@ a.bx--side-nav__link--current::before {
14163
14161
  }
14164
14162
 
14165
14163
  .c4p--add-select__selections.bx--structured-list {
14166
- border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14167
14164
  margin-bottom: 0;
14168
14165
  }
14169
14166
  .c4p--add-select__selections-wrapper {
@@ -14171,8 +14168,11 @@ a.bx--side-nav__link--current::before {
14171
14168
  }
14172
14169
  .c4p--add-select__selections-cell-wrapper {
14173
14170
  display: flex;
14171
+ height: 3rem;
14174
14172
  align-items: center;
14175
14173
  justify-content: space-between;
14174
+ padding: 0 var(--cds-spacing-05, 1rem);
14175
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
14176
14176
  }
14177
14177
  .c4p--add-select__selections-cell-title {
14178
14178
  display: block;
@@ -14186,17 +14186,20 @@ a.bx--side-nav__link--current::before {
14186
14186
  display: block;
14187
14187
  color: var(--cds-text-02, #525252);
14188
14188
  }
14189
+ .c4p--add-select__selections-cell {
14190
+ display: flex;
14191
+ flex-direction: column;
14192
+ justify-content: center;
14193
+ }
14189
14194
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
14190
14195
  visibility: visible;
14191
14196
  }
14192
14197
  .c4p--add-select__selections-hidden-hover {
14193
14198
  visibility: hidden;
14194
14199
  }
14195
- .c4p--add-select__selections-row-selected {
14196
- background: #e5e5e5;
14197
- }
14198
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
14199
- visibility: visible;
14200
+ .c4p--add-select__selections-row-selectedbx--structured-list-row {
14201
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
14202
+ background-color: var(--cds-selected-ui, #e0e0e0);
14200
14203
  }
14201
14204
  .c4p--add-select__selections-checkbox {
14202
14205
  display: flex;
@@ -14204,7 +14207,7 @@ a.bx--side-nav__link--current::before {
14204
14207
  }
14205
14208
  .c4p--add-select__selections-checkbox-label-wrapper {
14206
14209
  display: flex;
14207
- margin-left: var(--cds-spacing-03, 0.5rem);
14210
+ margin-left: var(--cds-spacing-05, 1rem);
14208
14211
  }
14209
14212
  .c4p--add-select__selections-checkbox-label-text {
14210
14213
  display: flex;
@@ -14222,6 +14225,13 @@ a.bx--side-nav__link--current::before {
14222
14225
  .c4p--add-select__selections-cell-icon {
14223
14226
  margin-right: var(--cds-spacing-03, 0.5rem);
14224
14227
  }
14228
+ .c4p--add-select__selections-row {
14229
+ border-left: 0.125rem solid transparent;
14230
+ }
14231
+ .c4p--add-select__selections-row-meta-selected {
14232
+ border-left: 0.125rem solid var(--cds-interactive-04, #0f62fe);
14233
+ background-color: var(--cds-hover-row, #e5e5e5);
14234
+ }
14225
14235
 
14226
14236
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
14227
14237
  color: var(--cds-interactive-04, #0f62fe);
@@ -14233,15 +14243,31 @@ a.bx--side-nav__link--current::before {
14233
14243
  fill: currentColor;
14234
14244
  }
14235
14245
 
14246
+ .c4p--add-select bx--structured-list--selection .c4p--add-select__selections-row-selectedbx--structured-list-row:hover:not(bx--structured-list-row--header-row):not(bx--structured-list-row--selected) {
14247
+ border-bottom: 1px solid var(--cds-hover-selected-ui, #cacaca);
14248
+ background-color: var(--cds-hover-selected-ui, #cacaca);
14249
+ }
14250
+
14236
14251
  .c4p--add-select__sub-header {
14237
14252
  display: flex;
14238
14253
  align-items: flex-end;
14239
14254
  justify-content: space-between;
14240
14255
  }
14256
+ .c4p--add-select__sub-header-multi {
14257
+ padding: 0 var(--cds-spacing-05, 1rem);
14258
+ }
14259
+
14260
+ .c4p--add-select bx--structured-list-row {
14261
+ border-bottom: 0;
14262
+ }
14263
+
14264
+ .c4p--add-select bx--structured-list--selection bx--structured-list-row:hover:not(bx--structured-list-row--header-row):not(bx--structured-list-row--selected) {
14265
+ border-bottom: 0;
14266
+ }
14241
14267
 
14242
14268
  .c4p--add-select__sidebar-header {
14243
14269
  display: flex;
14244
- padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
14270
+ padding: var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
14245
14271
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
14246
14272
  }
14247
14273
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -14267,7 +14293,7 @@ a.bx--side-nav__link--current::before {
14267
14293
  }
14268
14294
 
14269
14295
  .c4p--add-select__sidebar-body {
14270
- padding: var(--cds-spacing-05, 1rem);
14296
+ padding: 0 var(--cds-spacing-05, 1rem);
14271
14297
  }
14272
14298
 
14273
14299
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -14300,18 +14326,44 @@ a.bx--side-nav__link--current::before {
14300
14326
  .c4p--add-select__columns {
14301
14327
  display: flex;
14302
14328
  flex-direction: row;
14329
+ flex-grow: 1;
14303
14330
  overflow-x: auto;
14304
14331
  }
14332
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
14333
+ margin-left: var(--cds-spacing-03, 0.5rem);
14334
+ }
14335
+ .c4p--add-select__columns .c4p--add-select__selections-rowbx--structured-list-row {
14336
+ border-left: 0;
14337
+ }
14338
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
14339
+ padding: 0;
14340
+ }
14341
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
14342
+ height: auto;
14343
+ padding: 0 var(--cds-spacing-03, 0.5rem);
14344
+ }
14345
+ .c4p--add-select__columns .c4p--add-select__tag-container {
14346
+ padding: 0 var(--cds-spacing-03, 0.5rem);
14347
+ margin-bottom: 0;
14348
+ }
14349
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
14350
+ padding: 0;
14351
+ }
14352
+ .c4p--add-select__columns .c4p--add-select__selectionsbx--structured-list {
14353
+ border-top: 0;
14354
+ }
14305
14355
 
14306
- .c4p--add-select .c4p--add-select__columns .bx--structured-list-td {
14307
- height: 0;
14308
- padding: 0 !important;
14356
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
14357
+ padding: 0 var(--cds-spacing-05, 1rem);
14358
+ }
14359
+
14360
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
14361
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14309
14362
  }
14310
14363
 
14311
14364
  .c4p--add-select__column {
14312
14365
  overflow: auto;
14313
- max-width: 15rem;
14314
- flex: 1 0 15rem;
14366
+ flex: 0 0 20rem;
14315
14367
  padding: var(--cds-spacing-05, 1rem);
14316
14368
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14317
14369
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
@@ -14422,8 +14474,7 @@ button.c4p--add-select__global-filter-toggle--open {
14422
14474
  }
14423
14475
 
14424
14476
  .c4p--add-select .c4p--tearsheet__influencer {
14425
- max-width: 29rem;
14426
- flex: 0 0 50%;
14477
+ flex-basis: 22.5rem;
14427
14478
  }
14428
14479
 
14429
14480
  .c4p--add-select .c4p--tearsheet__header-description {
@@ -14435,6 +14486,10 @@ button.c4p--add-select__global-filter-toggle--open {
14435
14486
  flex-direction: column;
14436
14487
  }
14437
14488
 
14489
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.bx--btn-set.c4p--action-set--max .c4p--action-set__action-button {
14490
+ max-width: 11.25rem;
14491
+ }
14492
+
14438
14493
  .c4p--add-select .c4p--add-select__items-label {
14439
14494
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
14440
14495
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -14446,13 +14501,6 @@ button.c4p--add-select__global-filter-toggle--open {
14446
14501
  padding-right: 0;
14447
14502
  }
14448
14503
 
14449
- .c4p--add-select .bx--structured-list-td {
14450
- height: var(--cds-layout-04, 3rem);
14451
- padding-top: 0;
14452
- padding-bottom: 0;
14453
- vertical-align: middle;
14454
- }
14455
-
14456
14504
  .c4p--add-select .bx--radio-button__appearance {
14457
14505
  margin: 0 var(--cds-spacing-05, 1rem) 0 0;
14458
14506
  }
@@ -14476,6 +14524,33 @@ button.c4p--add-select__global-filter-toggle--open {
14476
14524
  padding-left: var(--cds-spacing-03, 0.5rem);
14477
14525
  }
14478
14526
 
14527
+ .c4p--add-select__multi .c4p--empty-state {
14528
+ max-width: 16rem;
14529
+ margin-top: var(--cds-layout-04, 3rem);
14530
+ }
14531
+
14532
+ .c4p--add-select .bx--accordion__arrow {
14533
+ transform: rotate(0deg);
14534
+ }
14535
+
14536
+ .c4p--add-select .bx--accordion__item--active .bx--accordion__arrow {
14537
+ transform: rotate(90deg);
14538
+ }
14539
+
14540
+ .c4p--add-select bx--accordion--start bx--accordion__arrow {
14541
+ margin: 0 0 0 var(--cds-spacing-05, 1rem);
14542
+ }
14543
+
14544
+ .c4p--add-select bx--accordion--start bx--accordion__title {
14545
+ margin: 0 var(--cds-spacing-05, 1rem) 0 var(--cds-spacing-03, 0.5rem);
14546
+ }
14547
+
14548
+ .c4p--add-select bx--accordion__item--active bx--accordion__content {
14549
+ padding-top: 0;
14550
+ padding-bottom: 0;
14551
+ margin-top: var(--cds-spacing-03, 0.5rem);
14552
+ }
14553
+
14479
14554
  @keyframes fade-in {
14480
14555
  0% {
14481
14556
  opacity: 0;
@@ -14717,7 +14792,7 @@ button.c4p--add-select__global-filter-toggle--open {
14717
14792
  --cds-productive-heading-04-line-height: 1.28572;
14718
14793
  --cds-productive-heading-04-letter-spacing: 0;
14719
14794
  --cds-productive-heading-05-font-size: 2rem;
14720
- --cds-productive-heading-05-font-weight: 400;
14795
+ --cds-productive-heading-05-font-weight: 300;
14721
14796
  --cds-productive-heading-05-line-height: 1.25;
14722
14797
  --cds-productive-heading-05-letter-spacing: 0;
14723
14798
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -14745,7 +14820,7 @@ button.c4p--add-select__global-filter-toggle--open {
14745
14820
  --cds-expressive-heading-04-line-height: 1.28572;
14746
14821
  --cds-expressive-heading-04-letter-spacing: 0;
14747
14822
  --cds-expressive-heading-05-font-size: 2rem;
14748
- --cds-expressive-heading-05-font-weight: 400;
14823
+ --cds-expressive-heading-05-font-weight: 300;
14749
14824
  --cds-expressive-heading-05-line-height: 1.25;
14750
14825
  --cds-expressive-heading-05-letter-spacing: 0;
14751
14826
  --cds-expressive-heading-06-font-size: 2rem;
@@ -14779,7 +14854,7 @@ button.c4p--add-select__global-filter-toggle--open {
14779
14854
  --cds-display-03-line-height: 1.19;
14780
14855
  --cds-display-03-letter-spacing: 0;
14781
14856
  --cds-display-04-font-size: 2.625rem;
14782
- --cds-display-04-font-weight: 600;
14857
+ --cds-display-04-font-weight: 300;
14783
14858
  --cds-display-04-line-height: 1.19;
14784
14859
  --cds-display-04-letter-spacing: 0;
14785
14860
  --cds-legal-01-font-size: 0.75rem;
@@ -14823,7 +14898,7 @@ button.c4p--add-select__global-filter-toggle--open {
14823
14898
  --cds-heading-04-line-height: 1.28572;
14824
14899
  --cds-heading-04-letter-spacing: 0;
14825
14900
  --cds-heading-05-font-size: 2rem;
14826
- --cds-heading-05-font-weight: 400;
14901
+ --cds-heading-05-font-weight: 300;
14827
14902
  --cds-heading-05-line-height: 1.25;
14828
14903
  --cds-heading-05-letter-spacing: 0;
14829
14904
  --cds-heading-06-font-size: 2.625rem;
@@ -14843,7 +14918,7 @@ button.c4p--add-select__global-filter-toggle--open {
14843
14918
  --cds-fluid-heading-04-line-height: 1.28572;
14844
14919
  --cds-fluid-heading-04-letter-spacing: 0;
14845
14920
  --cds-fluid-heading-05-font-size: 2rem;
14846
- --cds-fluid-heading-05-font-weight: 400;
14921
+ --cds-fluid-heading-05-font-weight: 300;
14847
14922
  --cds-fluid-heading-05-line-height: 1.25;
14848
14923
  --cds-fluid-heading-05-letter-spacing: 0;
14849
14924
  --cds-fluid-heading-06-font-size: 2rem;
@@ -14877,7 +14952,7 @@ button.c4p--add-select__global-filter-toggle--open {
14877
14952
  --cds-fluid-display-03-line-height: 1.19;
14878
14953
  --cds-fluid-display-03-letter-spacing: 0;
14879
14954
  --cds-fluid-display-04-font-size: 2.625rem;
14880
- --cds-fluid-display-04-font-weight: 600;
14955
+ --cds-fluid-display-04-font-weight: 300;
14881
14956
  --cds-fluid-display-04-line-height: 1.19;
14882
14957
  --cds-fluid-display-04-letter-spacing: 0;
14883
14958
  --cds-spacing-01: 0.125rem;
@@ -14928,8 +15003,7 @@ button.c4p--add-select__global-filter-toggle--open {
14928
15003
  max-height: 38.5rem;
14929
15004
  background-color: var(--cds-ui-background, #ffffff);
14930
15005
  color: var(--cds-text-01, #161616);
14931
- transition: transform 110ms;
14932
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
15006
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
14933
15007
  }
14934
15008
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
14935
15009
  position: sticky;
@@ -14994,8 +15068,7 @@ button.c4p--add-select__global-filter-toggle--open {
14994
15068
  background-color: var(--cds-ui-background, #ffffff);
14995
15069
  cursor: pointer;
14996
15070
  text-align: left;
14997
- transition: background-color 240ms;
14998
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
15071
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
14999
15072
  }
15000
15073
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
15001
15074
  margin-bottom: var(--cds-spacing-02, 0.25rem);
@@ -15100,8 +15173,7 @@ button.c4p--add-select__global-filter-toggle--open {
15100
15173
  margin: 0 auto;
15101
15174
  background-color: var(--cds-ui-02, #ffffff);
15102
15175
  content: "";
15103
- transition: background-color 240ms;
15104
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
15176
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
15105
15177
  }
15106
15178
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
15107
15179
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -16893,6 +16965,28 @@ button.c4p--add-select__global-filter-toggle--open {
16893
16965
  margin-top: calc(-1 * var(--cds-spacing-02, 0.25rem));
16894
16966
  margin-right: var(--cds-spacing-03, 0.5rem);
16895
16967
  }
16968
+ .c4p--card__productive .c4p--card__actions-header .bx--btn:hover + .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm::before {
16969
+ opacity: 0;
16970
+ }
16971
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm {
16972
+ padding-right: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
16973
+ padding-left: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
16974
+ }
16975
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm::before {
16976
+ position: absolute;
16977
+ left: 0;
16978
+ width: 0.05rem;
16979
+ height: var(--cds-spacing-06, 1.5rem);
16980
+ background-color: var(--cds-hover-ui, #e5e5e5);
16981
+ content: "";
16982
+ opacity: 1;
16983
+ }
16984
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm:hover::before {
16985
+ opacity: 0;
16986
+ }
16987
+ .c4p--card__productive .c4p--card__actions-header-ghost-button--only.bx--btn--ghost.bx--btn--sm::before {
16988
+ opacity: 0;
16989
+ }
16896
16990
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
16897
16991
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
16898
16992
  margin-top: 0;
@@ -16912,10 +17006,6 @@ button.c4p--add-select__global-filter-toggle--open {
16912
17006
  padding-right: var(--cds-spacing-05, 1rem);
16913
17007
  }
16914
17008
 
16915
- .c4p--remove-modal .bx--modal-close {
16916
- display: none;
16917
- }
16918
-
16919
17009
  .c4p--remove-modal__body {
16920
17010
  padding-right: 20%;
16921
17011
  margin-bottom: var(--cds-spacing-05, 1rem);
@@ -17854,7 +17944,7 @@ button.c4p--add-select__global-filter-toggle--open {
17854
17944
  --cds-productive-heading-04-line-height: 1.28572;
17855
17945
  --cds-productive-heading-04-letter-spacing: 0;
17856
17946
  --cds-productive-heading-05-font-size: 2rem;
17857
- --cds-productive-heading-05-font-weight: 400;
17947
+ --cds-productive-heading-05-font-weight: 300;
17858
17948
  --cds-productive-heading-05-line-height: 1.25;
17859
17949
  --cds-productive-heading-05-letter-spacing: 0;
17860
17950
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -17882,7 +17972,7 @@ button.c4p--add-select__global-filter-toggle--open {
17882
17972
  --cds-expressive-heading-04-line-height: 1.28572;
17883
17973
  --cds-expressive-heading-04-letter-spacing: 0;
17884
17974
  --cds-expressive-heading-05-font-size: 2rem;
17885
- --cds-expressive-heading-05-font-weight: 400;
17975
+ --cds-expressive-heading-05-font-weight: 300;
17886
17976
  --cds-expressive-heading-05-line-height: 1.25;
17887
17977
  --cds-expressive-heading-05-letter-spacing: 0;
17888
17978
  --cds-expressive-heading-06-font-size: 2rem;
@@ -17916,7 +18006,7 @@ button.c4p--add-select__global-filter-toggle--open {
17916
18006
  --cds-display-03-line-height: 1.19;
17917
18007
  --cds-display-03-letter-spacing: 0;
17918
18008
  --cds-display-04-font-size: 2.625rem;
17919
- --cds-display-04-font-weight: 600;
18009
+ --cds-display-04-font-weight: 300;
17920
18010
  --cds-display-04-line-height: 1.19;
17921
18011
  --cds-display-04-letter-spacing: 0;
17922
18012
  --cds-legal-01-font-size: 0.75rem;
@@ -17960,7 +18050,7 @@ button.c4p--add-select__global-filter-toggle--open {
17960
18050
  --cds-heading-04-line-height: 1.28572;
17961
18051
  --cds-heading-04-letter-spacing: 0;
17962
18052
  --cds-heading-05-font-size: 2rem;
17963
- --cds-heading-05-font-weight: 400;
18053
+ --cds-heading-05-font-weight: 300;
17964
18054
  --cds-heading-05-line-height: 1.25;
17965
18055
  --cds-heading-05-letter-spacing: 0;
17966
18056
  --cds-heading-06-font-size: 2.625rem;
@@ -17980,7 +18070,7 @@ button.c4p--add-select__global-filter-toggle--open {
17980
18070
  --cds-fluid-heading-04-line-height: 1.28572;
17981
18071
  --cds-fluid-heading-04-letter-spacing: 0;
17982
18072
  --cds-fluid-heading-05-font-size: 2rem;
17983
- --cds-fluid-heading-05-font-weight: 400;
18073
+ --cds-fluid-heading-05-font-weight: 300;
17984
18074
  --cds-fluid-heading-05-line-height: 1.25;
17985
18075
  --cds-fluid-heading-05-letter-spacing: 0;
17986
18076
  --cds-fluid-heading-06-font-size: 2rem;
@@ -18014,7 +18104,7 @@ button.c4p--add-select__global-filter-toggle--open {
18014
18104
  --cds-fluid-display-03-line-height: 1.19;
18015
18105
  --cds-fluid-display-03-letter-spacing: 0;
18016
18106
  --cds-fluid-display-04-font-size: 2.625rem;
18017
- --cds-fluid-display-04-font-weight: 600;
18107
+ --cds-fluid-display-04-font-weight: 300;
18018
18108
  --cds-fluid-display-04-line-height: 1.19;
18019
18109
  --cds-fluid-display-04-letter-spacing: 0;
18020
18110
  --cds-spacing-01: 0.125rem;
@@ -18299,7 +18389,7 @@ button.c4p--add-select__global-filter-toggle--open {
18299
18389
  --cds-productive-heading-04-line-height: 1.28572;
18300
18390
  --cds-productive-heading-04-letter-spacing: 0;
18301
18391
  --cds-productive-heading-05-font-size: 2rem;
18302
- --cds-productive-heading-05-font-weight: 400;
18392
+ --cds-productive-heading-05-font-weight: 300;
18303
18393
  --cds-productive-heading-05-line-height: 1.25;
18304
18394
  --cds-productive-heading-05-letter-spacing: 0;
18305
18395
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -18327,7 +18417,7 @@ button.c4p--add-select__global-filter-toggle--open {
18327
18417
  --cds-expressive-heading-04-line-height: 1.28572;
18328
18418
  --cds-expressive-heading-04-letter-spacing: 0;
18329
18419
  --cds-expressive-heading-05-font-size: 2rem;
18330
- --cds-expressive-heading-05-font-weight: 400;
18420
+ --cds-expressive-heading-05-font-weight: 300;
18331
18421
  --cds-expressive-heading-05-line-height: 1.25;
18332
18422
  --cds-expressive-heading-05-letter-spacing: 0;
18333
18423
  --cds-expressive-heading-06-font-size: 2rem;
@@ -18361,7 +18451,7 @@ button.c4p--add-select__global-filter-toggle--open {
18361
18451
  --cds-display-03-line-height: 1.19;
18362
18452
  --cds-display-03-letter-spacing: 0;
18363
18453
  --cds-display-04-font-size: 2.625rem;
18364
- --cds-display-04-font-weight: 600;
18454
+ --cds-display-04-font-weight: 300;
18365
18455
  --cds-display-04-line-height: 1.19;
18366
18456
  --cds-display-04-letter-spacing: 0;
18367
18457
  --cds-legal-01-font-size: 0.75rem;
@@ -18405,7 +18495,7 @@ button.c4p--add-select__global-filter-toggle--open {
18405
18495
  --cds-heading-04-line-height: 1.28572;
18406
18496
  --cds-heading-04-letter-spacing: 0;
18407
18497
  --cds-heading-05-font-size: 2rem;
18408
- --cds-heading-05-font-weight: 400;
18498
+ --cds-heading-05-font-weight: 300;
18409
18499
  --cds-heading-05-line-height: 1.25;
18410
18500
  --cds-heading-05-letter-spacing: 0;
18411
18501
  --cds-heading-06-font-size: 2.625rem;
@@ -18425,7 +18515,7 @@ button.c4p--add-select__global-filter-toggle--open {
18425
18515
  --cds-fluid-heading-04-line-height: 1.28572;
18426
18516
  --cds-fluid-heading-04-letter-spacing: 0;
18427
18517
  --cds-fluid-heading-05-font-size: 2rem;
18428
- --cds-fluid-heading-05-font-weight: 400;
18518
+ --cds-fluid-heading-05-font-weight: 300;
18429
18519
  --cds-fluid-heading-05-line-height: 1.25;
18430
18520
  --cds-fluid-heading-05-letter-spacing: 0;
18431
18521
  --cds-fluid-heading-06-font-size: 2rem;
@@ -18459,7 +18549,7 @@ button.c4p--add-select__global-filter-toggle--open {
18459
18549
  --cds-fluid-display-03-line-height: 1.19;
18460
18550
  --cds-fluid-display-03-letter-spacing: 0;
18461
18551
  --cds-fluid-display-04-font-size: 2.625rem;
18462
- --cds-fluid-display-04-font-weight: 600;
18552
+ --cds-fluid-display-04-font-weight: 300;
18463
18553
  --cds-fluid-display-04-line-height: 1.19;
18464
18554
  --cds-fluid-display-04-letter-spacing: 0;
18465
18555
  --cds-spacing-01: 0.125rem;
@@ -19223,6 +19313,20 @@ button.c4p--add-select__global-filter-toggle--open {
19223
19313
  .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
19224
19314
  outline: 2px solid var(--cds-inverse-link, #78a9ff);
19225
19315
  }
19316
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__active-cell--highlight,
19317
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__selection-area--element,
19318
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__active-cell--highlight:focus {
19319
+ /* stylelint-disable-next-line carbon/theme-token-use */
19320
+ border-color: #82cfff;
19321
+ }
19322
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__selection-area--element::before {
19323
+ /* stylelint-disable-next-line carbon/theme-token-use */
19324
+ background-color: #00539a;
19325
+ }
19326
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__cell-editor.c4p--data-spreadsheet__cell-editor--active {
19327
+ /* stylelint-disable-next-line carbon/theme-token-use */
19328
+ outline-color: #82cfff;
19329
+ }
19226
19330
  .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
19227
19331
  position: relative;
19228
19332
  }
@@ -19352,7 +19456,7 @@ button.c4p--add-select__global-filter-toggle--open {
19352
19456
  padding-left: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem));
19353
19457
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
19354
19458
  background-color: var(--cds-field-01, #f4f4f4);
19355
- color: var(--cds-text-01, #161616);
19459
+ color: var(--cds-text-02, #525252);
19356
19460
  text-align: left;
19357
19461
  }
19358
19462
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-row-index=header], .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-column-index=header] {
@@ -19459,11 +19563,19 @@ button.c4p--add-select__global-filter-toggle--open {
19459
19563
  align-items: center;
19460
19564
  color: var(--cds-text-01, #161616);
19461
19565
  }
19566
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .c4p--datagrid__head-select-all.c4p--datagrid__checkbox-cell.c4p--datagrid__checkbox-cell-sticky-left {
19567
+ position: sticky;
19568
+ z-index: 1;
19569
+ left: 0;
19570
+ }
19462
19571
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
19463
19572
  align-items: center;
19464
19573
  padding-top: 0;
19465
19574
  padding-bottom: 0;
19466
19575
  }
19576
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell.c4p--datagrid__cell--spacer {
19577
+ padding: 0;
19578
+ }
19467
19579
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.bx--table-column-checkbox,
19468
19580
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.bx--table-column-checkbox {
19469
19581
  /* stylelint-disable-next-line carbon/layout-token-use */
@@ -19475,6 +19587,11 @@ button.c4p--add-select__global-filter-toggle--open {
19475
19587
  align-items: center;
19476
19588
  padding-top: 0;
19477
19589
  }
19590
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.bx--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
19591
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.bx--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
19592
+ position: sticky;
19593
+ left: 0;
19594
+ }
19478
19595
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.bx--table-column-checkbox {
19479
19596
  display: flex;
19480
19597
  height: 100%;
@@ -19670,6 +19787,12 @@ button.c4p--add-select__global-filter-toggle--open {
19670
19787
  .c4p--datagrid__head-hidden-select-all {
19671
19788
  padding-right: var(--cds-spacing-08, 2.5rem);
19672
19789
  }
19790
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
19791
+ position: sticky;
19792
+ z-index: 1;
19793
+ left: 0;
19794
+ background-color: var(--cds-ui-03, #e0e0e0);
19795
+ }
19673
19796
 
19674
19797
  .c4p--datagrid__simple-body {
19675
19798
  position: relative;
@@ -19840,6 +19963,15 @@ button.c4p--add-select__global-filter-toggle--open {
19840
19963
  margin: 0;
19841
19964
  }
19842
19965
 
19966
+ .c4p--datagrid .c4p--button-menu {
19967
+ height: var(--cds-spacing-09, 3rem);
19968
+ }
19969
+
19970
+ .c4p--datagrid .c4p--datagrid__table-grid-active {
19971
+ border: 2px solid var(--cds-inverse-link, #78a9ff);
19972
+ outline: 0;
19973
+ }
19974
+
19843
19975
  /*
19844
19976
  * Licensed Materials - Property of IBM
19845
19977
  * 5724-Q36
@@ -19982,14 +20114,36 @@ button.c4p--add-select__global-filter-toggle--open {
19982
20114
  /* stylelint-disable-next-line declaration-no-important */
19983
20115
  position: sticky !important;
19984
20116
  right: 0;
19985
- box-shadow: -2px 1px 3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
20117
+ display: flex;
20118
+ align-items: center;
20119
+ border-left: 1px solid var(--cds-ui-03, #e0e0e0);
19986
20120
  }
19987
20121
 
19988
20122
  .c4p--datagrid__right-sticky-column-header {
19989
20123
  /* stylelint-disable-next-line declaration-no-important */
19990
20124
  position: sticky !important;
19991
20125
  right: 0;
19992
- box-shadow: -2px 1px 3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
20126
+ }
20127
+
20128
+ .c4p--datagrid__left-sticky-column-cell {
20129
+ /* stylelint-disable-next-line declaration-no-important */
20130
+ position: sticky !important;
20131
+ left: 0;
20132
+ display: flex;
20133
+ align-items: center;
20134
+ border-right: 1px solid var(--cds-ui-03, #e0e0e0);
20135
+ }
20136
+
20137
+ .c4p--datagrid__left-sticky-column-header {
20138
+ /* stylelint-disable-next-line declaration-no-important */
20139
+ position: sticky !important;
20140
+ z-index: 1;
20141
+ left: 0;
20142
+ }
20143
+
20144
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
20145
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
20146
+ left: var(--cds-spacing-08, 2.5rem);
19993
20147
  }
19994
20148
 
19995
20149
  .c4p--datagrid__sticky-noShadow {
@@ -20038,21 +20192,30 @@ button.c4p--add-select__global-filter-toggle--open {
20038
20192
  position: inherit;
20039
20193
  display: flex;
20040
20194
  flex-flow: column;
20041
- /* stylelint-disable-next-line declaration-no-important */
20042
- padding-top: 0 !important;
20195
+ padding: 0;
20196
+ margin: 0;
20043
20197
  }
20044
20198
 
20045
- .c4p--datagrid__customize-columns-checkbox {
20199
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
20200
+ margin-bottom: 0;
20201
+ }
20202
+
20203
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
20046
20204
  display: flex;
20047
20205
  justify-content: center;
20048
- /* stylelint-disable-next-line declaration-no-important */
20049
- margin-bottom: 0 !important;
20050
20206
  }
20051
20207
 
20052
20208
  .c4p--datagrid__customize-columns-modal--actions {
20053
20209
  display: flex;
20210
+ height: var(--cds-spacing-09, 3rem);
20054
20211
  flex-flow: row;
20055
- margin-bottom: var(--cds-spacing-06, 1.5rem);
20212
+ background-color: var(--cds-field-02, #ffffff);
20213
+ }
20214
+
20215
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
20216
+ height: var(--cds-spacing-09, 3rem);
20217
+ padding-left: var(--cds-spacing-08, 2.5rem);
20218
+ border-bottom: none;
20056
20219
  }
20057
20220
 
20058
20221
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -20060,6 +20223,7 @@ button.c4p--add-select__global-filter-toggle--open {
20060
20223
  }
20061
20224
 
20062
20225
  .c4p--datagrid__customize-columns-instructions {
20226
+ padding-left: var(--cds-spacing-05, 1rem);
20063
20227
  margin-bottom: var(--cds-spacing-06, 1.5rem);
20064
20228
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
20065
20229
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -20073,6 +20237,34 @@ button.c4p--add-select__global-filter-toggle--open {
20073
20237
  overflow: auto;
20074
20238
  }
20075
20239
 
20240
+ .c4p--datagrid__customize-columns-select-all {
20241
+ display: flex;
20242
+ height: var(--cds-spacing-09, 3rem);
20243
+ padding-left: var(--cds-spacing-08, 2.5rem);
20244
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20245
+ background-color: var(--cds-layer, #f4f4f4);
20246
+ }
20247
+
20248
+ .c4p--datagrid__customize-columns-select-all:hover {
20249
+ background-color: var(--cds-layer-hover, #e5e5e5);
20250
+ }
20251
+
20252
+ .c4p--datagrid__customize-columns-select-all-selected {
20253
+ display: flex;
20254
+ height: var(--cds-spacing-09, 3rem);
20255
+ padding-left: var(--cds-spacing-08, 2.5rem);
20256
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20257
+ background-color: var(--cds-layer-selected, #e0e0e0);
20258
+ }
20259
+
20260
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
20261
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20262
+ }
20263
+
20264
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .bx--modal-content {
20265
+ margin-bottom: 0;
20266
+ }
20267
+
20076
20268
  /*
20077
20269
  * Licensed Materials - Property of IBM
20078
20270
  * 5724-Q36
@@ -20150,14 +20342,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20150
20342
 
20151
20343
  .c4p--datagrid__draggable-handleHolder {
20152
20344
  display: flex;
20153
- height: var(--cds-spacing-07, 2rem);
20154
- padding-left: var(--cds-spacing-02, 0.25rem);
20155
- margin-bottom: var(--cds-spacing-03, 0.5rem);
20156
- background: var(--cds-ui-02, #ffffff);
20345
+ height: var(--cds-spacing-09, 3rem);
20346
+ padding-left: var(--cds-spacing-05, 1rem);
20347
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20348
+ background-color: var(--cds-layer, #f4f4f4);
20349
+ }
20350
+
20351
+ .c4p--datagrid__draggable-handleHolder:hover {
20352
+ background-color: var(--cds-layer-hover, #e5e5e5);
20353
+ }
20354
+
20355
+ .c4p--datagrid__draggable-handleHolder-selected {
20356
+ display: flex;
20357
+ height: var(--cds-spacing-09, 3rem);
20358
+ padding-left: var(--cds-spacing-05, 1rem);
20359
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20360
+ background-color: var(--cds-layer-selected, #e0e0e0);
20157
20361
  }
20158
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
20362
+
20363
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
20364
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20365
+ }
20366
+
20367
+ .c4p--datagrid__draggable-handleHolder-isOver {
20159
20368
  border: 2px dashed var(--cds-focus, #0f62fe);
20160
- background-color: var(--cds-highlight, #d0e2ff);
20369
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20161
20370
  }
20162
20371
 
20163
20372
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -20165,7 +20374,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20165
20374
  width: 100%;
20166
20375
  }
20167
20376
 
20168
- .c4p--datagrid__draggable-handleHolder--grabbed {
20377
+ .c4p--datagrid__draggable-handleHolder-grabbed {
20169
20378
  background-color: var(--cds-highlight, #d0e2ff);
20170
20379
  color: var(--cds-text-01, #161616);
20171
20380
  }
@@ -20182,6 +20391,235 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20182
20391
  white-space: nowrap;
20183
20392
  }
20184
20393
 
20394
+ /*
20395
+ * Licensed Materials - Property of IBM
20396
+ * 5724-Q36
20397
+ * (c) Copyright IBM Corp. 2021
20398
+ * US Government Users Restricted Rights - Use, duplication or disclosure
20399
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
20400
+ */
20401
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--text-input,
20402
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number input[type=number],
20403
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs,
20404
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .bx--date-picker__input {
20405
+ height: 1.5rem;
20406
+ }
20407
+
20408
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
20409
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
20410
+ height: 1.25rem;
20411
+ }
20412
+
20413
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
20414
+ max-height: none;
20415
+ }
20416
+
20417
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--text-input,
20418
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number input[type=number],
20419
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm,
20420
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .bx--date-picker__input {
20421
+ height: 2rem;
20422
+ }
20423
+
20424
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
20425
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
20426
+ height: 1.75rem;
20427
+ }
20428
+
20429
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
20430
+ max-height: none;
20431
+ }
20432
+
20433
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--text-input,
20434
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number input[type=number],
20435
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md,
20436
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .bx--date-picker__input {
20437
+ height: 2.5rem;
20438
+ }
20439
+
20440
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
20441
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
20442
+ height: 2.25rem;
20443
+ }
20444
+
20445
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
20446
+ max-height: none;
20447
+ }
20448
+
20449
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--text-input,
20450
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number input[type=number],
20451
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg,
20452
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .bx--date-picker__input {
20453
+ height: 3rem;
20454
+ }
20455
+
20456
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
20457
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
20458
+ height: 2.75rem;
20459
+ }
20460
+
20461
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
20462
+ max-height: none;
20463
+ }
20464
+
20465
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--text-input,
20466
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number input[type=number],
20467
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl,
20468
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .bx--date-picker__input {
20469
+ height: 4rem;
20470
+ }
20471
+
20472
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
20473
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
20474
+ height: 3.75rem;
20475
+ }
20476
+
20477
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
20478
+ max-height: none;
20479
+ }
20480
+
20481
+ .c4p--datagrid__inline-edit-cell {
20482
+ display: flex;
20483
+ height: 100%;
20484
+ align-items: center;
20485
+ }
20486
+
20487
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
20488
+ display: flex;
20489
+ align-items: center;
20490
+ }
20491
+
20492
+ .c4p--datagrid__inline-edit--outer-cell-button {
20493
+ width: 100%;
20494
+ height: calc(100% + 2px);
20495
+ }
20496
+
20497
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
20498
+ position: relative;
20499
+ display: flex;
20500
+ width: 100%;
20501
+ height: 100%;
20502
+ align-items: center;
20503
+ justify-content: space-between;
20504
+ padding-left: var(--cds-spacing-05, 1rem);
20505
+ color: var(--cds-text-02, #525252);
20506
+ cursor: pointer;
20507
+ outline: 0;
20508
+ }
20509
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
20510
+ padding-right: var(--cds-spacing-05, 1rem);
20511
+ }
20512
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
20513
+ padding-left: 0;
20514
+ }
20515
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
20516
+ height: var(--cds-spacing-05, 1rem);
20517
+ fill: var(--cds-icon-02, #525252);
20518
+ }
20519
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
20520
+ font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
20521
+ }
20522
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
20523
+ justify-content: flex-start;
20524
+ }
20525
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
20526
+ /* stylelint-disable-next-line */
20527
+ }
20528
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) .c4p--datagrid__inline-edit-button-icon {
20529
+ display: none;
20530
+ }
20531
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols):hover .c4p--datagrid__inline-edit-button-icon {
20532
+ display: block;
20533
+ }
20534
+
20535
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
20536
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20537
+ color: var(--cds-text-01, #161616);
20538
+ }
20539
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
20540
+ fill: var(--cds-icon-01, #161616);
20541
+ }
20542
+
20543
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
20544
+ background-color: var(--cds-active-ui, #c6c6c6);
20545
+ color: var(--cds-text-01, #161616);
20546
+ cursor: text;
20547
+ }
20548
+
20549
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
20550
+ /* stylelint-disable-next-line carbon/theme-token-use */
20551
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
20552
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
20553
+ }
20554
+ @media screen and (prefers-contrast) {
20555
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
20556
+ outline-style: dotted;
20557
+ }
20558
+ }
20559
+
20560
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button--disabled:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
20561
+ color: var(--cds-disabled-02, #c6c6c6);
20562
+ cursor: not-allowed;
20563
+ }
20564
+
20565
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
20566
+ overflow: hidden;
20567
+ padding-right: var(--cds-spacing-05, 1rem);
20568
+ text-overflow: ellipsis;
20569
+ white-space: nowrap;
20570
+ }
20571
+
20572
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label.c4p--datagrid__inline-edit-button-label-with-icon {
20573
+ padding-right: var(--cds-spacing-09, 3rem);
20574
+ }
20575
+
20576
+ .c4p--datagrid__inline-edit--outer-cell-button .bx--text-input,
20577
+ .c4p--datagrid__inline-edit--outer-cell-button .bx--number input[type=number] {
20578
+ height: var(--cds-spacing-09, 3rem);
20579
+ }
20580
+
20581
+ .c4p--datagrid__inline-edit-button-icon {
20582
+ position: absolute;
20583
+ right: var(--cds-spacing-05, 1rem);
20584
+ }
20585
+
20586
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit {
20587
+ position: relative;
20588
+ padding: 0;
20589
+ }
20590
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
20591
+ padding-left: var(--cds-spacing-05, 1rem);
20592
+ }
20593
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit .bx--number input[type=number] {
20594
+ min-width: auto;
20595
+ padding-right: var(--cds-spacing-05, 1rem);
20596
+ }
20597
+
20598
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
20599
+ padding-bottom: var(--cds-spacing-05, 1rem);
20600
+ padding-left: var(--cds-spacing-05, 1rem);
20601
+ }
20602
+
20603
+ .c4p--datagrid__inline-edit--select.bx--dropdown,
20604
+ .c4p--datagrid__inline-edit--date .bx--date-picker__input {
20605
+ width: inherit;
20606
+ height: var(--cds-spacing-09, 3rem);
20607
+ max-height: none;
20608
+ }
20609
+
20610
+ .c4p--datagrid__inline-edit--date .bx--date-picker-container {
20611
+ width: inherit;
20612
+ }
20613
+
20614
+ .c4p--datagrid__inline-edit--date.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
20615
+ overflow: hidden;
20616
+ width: 100%;
20617
+ max-width: none;
20618
+ padding-right: var(--cds-spacing-07, 2rem);
20619
+ text-overflow: ellipsis;
20620
+ white-space: nowrap;
20621
+ }
20622
+
20185
20623
  .c4p--datagrid__datagridWrap {
20186
20624
  display: block;
20187
20625
  width: 100%;