@carbon/ibm-products 1.25.1 → 1.31.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (157) hide show
  1. package/css/index-full-carbon.css +562 -88
  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 +561 -87
  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 +562 -88
  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/DatagridToolbar.js +139 -11
  34. package/es/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  35. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -40
  36. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  37. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  38. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  39. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +63 -0
  40. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  41. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +459 -0
  42. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  43. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  44. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  45. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  46. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +31 -0
  47. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  48. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +197 -0
  49. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  50. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  51. package/es/components/Datagrid/index.js +3 -1
  52. package/es/components/Datagrid/useActionsColumn.js +31 -6
  53. package/es/components/Datagrid/useColumnOrder.js +8 -0
  54. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  55. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  56. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  57. package/es/components/Datagrid/useInlineEdit.js +71 -0
  58. package/es/components/Datagrid/useRowSize.js +17 -6
  59. package/es/components/Datagrid/useSelectRows.js +14 -4
  60. package/es/components/Datagrid/useStickyColumn.js +14 -0
  61. package/es/components/Datagrid/utils/getInlineEditColumns.js +121 -0
  62. package/es/components/Datagrid/utils/makeData.js +18 -2
  63. package/es/components/ImportModal/ImportModal.js +2 -2
  64. package/es/components/InlineEdit/InlineEdit.js +4 -2
  65. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  66. package/es/components/WebTerminal/WebTerminal.js +1 -1
  67. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  68. package/es/components/WebTerminal/hooks/index.js +6 -0
  69. package/es/components/WebTerminal/index.js +6 -0
  70. package/es/components/WebTerminal/preview-components/Navigation.js +6 -0
  71. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  72. package/es/components/WebTerminal/preview-components/index.js +7 -0
  73. package/es/components/index.js +1 -1
  74. package/es/global/js/hooks/useClickOutside.js +1 -1
  75. package/es/global/js/package-settings.js +3 -3
  76. package/es/global/js/utils/rangeWithCallback.js +13 -0
  77. package/es/global/js/utils/uuidv4.spec.js +4 -0
  78. package/lib/components/AddSelect/AddSelect.js +0 -4
  79. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  80. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  81. package/lib/components/AddSelect/AddSelectColumn.js +3 -2
  82. package/lib/components/AddSelect/AddSelectFilter.js +3 -2
  83. package/lib/components/AddSelect/AddSelectList.js +39 -13
  84. package/lib/components/Card/Card.js +16 -6
  85. package/lib/components/Card/CardFooter.js +3 -1
  86. package/lib/components/Card/CardHeader.js +21 -1
  87. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +62 -10
  88. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  89. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  90. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  91. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  92. package/lib/components/Datagrid/Datagrid/DatagridContent.js +138 -0
  93. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  94. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +148 -9
  95. package/lib/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  96. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -41
  97. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  98. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  99. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  100. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +79 -0
  101. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  102. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +483 -0
  103. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  104. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  105. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  106. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  107. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +42 -0
  108. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  109. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +204 -0
  110. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  111. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  112. package/lib/components/Datagrid/index.js +17 -1
  113. package/lib/components/Datagrid/useActionsColumn.js +31 -6
  114. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  115. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  116. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  117. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  118. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  119. package/lib/components/Datagrid/useRowSize.js +18 -13
  120. package/lib/components/Datagrid/useSelectRows.js +13 -3
  121. package/lib/components/Datagrid/useStickyColumn.js +14 -0
  122. package/lib/components/Datagrid/utils/getInlineEditColumns.js +133 -0
  123. package/lib/components/Datagrid/utils/makeData.js +18 -2
  124. package/lib/components/ImportModal/ImportModal.js +2 -2
  125. package/lib/components/InlineEdit/InlineEdit.js +4 -2
  126. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  127. package/lib/components/WebTerminal/hooks/index.js +6 -0
  128. package/lib/components/WebTerminal/preview-components/Navigation.js +6 -0
  129. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  130. package/lib/components/index.js +12 -0
  131. package/lib/global/js/hooks/useClickOutside.js +1 -1
  132. package/lib/global/js/package-settings.js +3 -3
  133. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  134. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  135. package/package.json +13 -13
  136. package/scss/components/AddSelect/_add-select.scss +126 -28
  137. package/scss/components/Card/_card.scss +1 -0
  138. package/scss/components/Cascade/_cascade.scss +1 -1
  139. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
  140. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +18 -1
  141. package/scss/components/Datagrid/_datagrid.scss +5 -0
  142. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  143. package/scss/components/Datagrid/styles/_datagrid.scss +81 -12
  144. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  145. package/scss/components/Datagrid/styles/_index.scss +1 -0
  146. package/scss/components/Datagrid/styles/_useInlineEdit.scss +211 -0
  147. package/scss/components/Datagrid/styles/_useStickyColumn.scss +24 -2
  148. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +44 -6
  149. package/scss/components/InlineEdit/_inline-edit.scss +1 -1
  150. package/scss/components/NotificationsPanel/_notifications-panel.scss +5 -6
  151. package/scss/components/ProductiveCard/_productive-card.scss +39 -0
  152. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  153. package/scss/components/SidePanel/_side-panel.scss +4 -6
  154. package/scss/components/WebTerminal/_index.scss +7 -0
  155. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  156. package/scss/components/WebTerminal/_web-terminal.scss +13 -0
  157. package/scss/components/_index-released-only.scss +1 -0
@@ -839,8 +839,7 @@
839
839
  box-sizing: border-box;
840
840
  background-color: var(--cds-ui-01, #f4f4f4);
841
841
  color: var(--cds-text-01, #161616);
842
- transition: transform 240ms;
843
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
842
+ transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
844
843
  }
845
844
  .c4p--side-panel__container.c4p--side-panel__container--xs {
846
845
  width: 16rem;
@@ -1140,6 +1139,7 @@
1140
1139
  background-color: var(--cds-ui-01, #f4f4f4);
1141
1140
  opacity: var(--c4p--side-panel--subtitle-opacity);
1142
1141
  transform: translateY(var(--c4p--side-panel--title-y-position));
1142
+ word-break: break-word;
1143
1143
  }
1144
1144
  .c4p--side-panel__container .c4p--side-panel__label-text {
1145
1145
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -1249,8 +1249,7 @@
1249
1249
  padding: 0 var(--cds-spacing-05, 1rem);
1250
1250
  margin-bottom: var(--cds-spacing-03, 0.5rem);
1251
1251
  background-color: var(--cds-ui-01, #f4f4f4);
1252
- transition: transform 150ms;
1253
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
1252
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
1254
1253
  }
1255
1254
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
1256
1255
  min-width: 2rem;
@@ -1376,8 +1375,7 @@
1376
1375
  width: 100%;
1377
1376
  height: 100%;
1378
1377
  background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
1379
- transition: background-color 240ms;
1380
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
1378
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
1381
1379
  }
1382
1380
 
1383
1381
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -2212,7 +2210,7 @@
2212
2210
 
2213
2211
  .c4p--http-errors .c4p--http-errors__title {
2214
2212
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
2215
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
2213
+ font-weight: var(--cds-productive-heading-05-font-weight, 300);
2216
2214
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
2217
2215
  letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
2218
2216
  margin-bottom: var(--cds-spacing-04, 0.75rem);
@@ -2426,7 +2424,6 @@
2426
2424
  }
2427
2425
 
2428
2426
  .c4p--add-select__selections.bx--structured-list {
2429
- border-top: 1px solid var(--cds-ui-03, #e0e0e0);
2430
2427
  margin-bottom: 0;
2431
2428
  }
2432
2429
  .c4p--add-select__selections-wrapper {
@@ -2434,8 +2431,11 @@
2434
2431
  }
2435
2432
  .c4p--add-select__selections-cell-wrapper {
2436
2433
  display: flex;
2434
+ height: 3rem;
2437
2435
  align-items: center;
2438
2436
  justify-content: space-between;
2437
+ padding: 0 var(--cds-spacing-05, 1rem);
2438
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
2439
2439
  }
2440
2440
  .c4p--add-select__selections-cell-title {
2441
2441
  display: block;
@@ -2449,17 +2449,20 @@
2449
2449
  display: block;
2450
2450
  color: var(--cds-text-02, #525252);
2451
2451
  }
2452
+ .c4p--add-select__selections-cell {
2453
+ display: flex;
2454
+ flex-direction: column;
2455
+ justify-content: center;
2456
+ }
2452
2457
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
2453
2458
  visibility: visible;
2454
2459
  }
2455
2460
  .c4p--add-select__selections-hidden-hover {
2456
2461
  visibility: hidden;
2457
2462
  }
2458
- .c4p--add-select__selections-row-selected {
2459
- background: #e5e5e5;
2460
- }
2461
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
2462
- visibility: visible;
2463
+ .c4p--add-select__selections-row-selectedbx--structured-list-row {
2464
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
2465
+ background-color: var(--cds-selected-ui, #e0e0e0);
2463
2466
  }
2464
2467
  .c4p--add-select__selections-checkbox {
2465
2468
  display: flex;
@@ -2467,7 +2470,7 @@
2467
2470
  }
2468
2471
  .c4p--add-select__selections-checkbox-label-wrapper {
2469
2472
  display: flex;
2470
- margin-left: var(--cds-spacing-03, 0.5rem);
2473
+ margin-left: var(--cds-spacing-05, 1rem);
2471
2474
  }
2472
2475
  .c4p--add-select__selections-checkbox-label-text {
2473
2476
  display: flex;
@@ -2485,6 +2488,13 @@
2485
2488
  .c4p--add-select__selections-cell-icon {
2486
2489
  margin-right: var(--cds-spacing-03, 0.5rem);
2487
2490
  }
2491
+ .c4p--add-select__selections-row {
2492
+ border-left: 0.125rem solid transparent;
2493
+ }
2494
+ .c4p--add-select__selections-row-meta-selected {
2495
+ border-left: 0.125rem solid var(--cds-interactive-04, #0f62fe);
2496
+ background-color: var(--cds-hover-row, #e5e5e5);
2497
+ }
2488
2498
 
2489
2499
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
2490
2500
  color: var(--cds-interactive-04, #0f62fe);
@@ -2496,15 +2506,31 @@
2496
2506
  fill: currentColor;
2497
2507
  }
2498
2508
 
2509
+ .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) {
2510
+ border-bottom: 1px solid var(--cds-hover-selected-ui, #cacaca);
2511
+ background-color: var(--cds-hover-selected-ui, #cacaca);
2512
+ }
2513
+
2499
2514
  .c4p--add-select__sub-header {
2500
2515
  display: flex;
2501
2516
  align-items: flex-end;
2502
2517
  justify-content: space-between;
2503
2518
  }
2519
+ .c4p--add-select__sub-header-multi {
2520
+ padding: 0 var(--cds-spacing-05, 1rem);
2521
+ }
2522
+
2523
+ .c4p--add-select bx--structured-list-row {
2524
+ border-bottom: 0;
2525
+ }
2526
+
2527
+ .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) {
2528
+ border-bottom: 0;
2529
+ }
2504
2530
 
2505
2531
  .c4p--add-select__sidebar-header {
2506
2532
  display: flex;
2507
- padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
2533
+ padding: var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
2508
2534
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
2509
2535
  }
2510
2536
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -2530,7 +2556,7 @@
2530
2556
  }
2531
2557
 
2532
2558
  .c4p--add-select__sidebar-body {
2533
- padding: var(--cds-spacing-05, 1rem);
2559
+ padding: 0 var(--cds-spacing-05, 1rem);
2534
2560
  }
2535
2561
 
2536
2562
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -2563,18 +2589,44 @@
2563
2589
  .c4p--add-select__columns {
2564
2590
  display: flex;
2565
2591
  flex-direction: row;
2592
+ flex-grow: 1;
2566
2593
  overflow-x: auto;
2567
2594
  }
2595
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
2596
+ margin-left: var(--cds-spacing-03, 0.5rem);
2597
+ }
2598
+ .c4p--add-select__columns .c4p--add-select__selections-rowbx--structured-list-row {
2599
+ border-left: 0;
2600
+ }
2601
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
2602
+ padding: 0;
2603
+ }
2604
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
2605
+ height: auto;
2606
+ padding: 0 var(--cds-spacing-03, 0.5rem);
2607
+ }
2608
+ .c4p--add-select__columns .c4p--add-select__tag-container {
2609
+ padding: 0 var(--cds-spacing-03, 0.5rem);
2610
+ margin-bottom: 0;
2611
+ }
2612
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
2613
+ padding: 0;
2614
+ }
2615
+ .c4p--add-select__columns .c4p--add-select__selectionsbx--structured-list {
2616
+ border-top: 0;
2617
+ }
2568
2618
 
2569
- .c4p--add-select .c4p--add-select__columns .bx--structured-list-td {
2570
- height: 0;
2571
- padding: 0 !important;
2619
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
2620
+ padding: 0 var(--cds-spacing-05, 1rem);
2621
+ }
2622
+
2623
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
2624
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
2572
2625
  }
2573
2626
 
2574
2627
  .c4p--add-select__column {
2575
2628
  overflow: auto;
2576
- max-width: 15rem;
2577
- flex: 1 0 15rem;
2629
+ flex: 0 0 20rem;
2578
2630
  padding: var(--cds-spacing-05, 1rem);
2579
2631
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
2580
2632
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
@@ -2685,8 +2737,7 @@ button.c4p--add-select__global-filter-toggle--open {
2685
2737
  }
2686
2738
 
2687
2739
  .c4p--add-select .c4p--tearsheet__influencer {
2688
- max-width: 29rem;
2689
- flex: 0 0 50%;
2740
+ flex-basis: 22.5rem;
2690
2741
  }
2691
2742
 
2692
2743
  .c4p--add-select .c4p--tearsheet__header-description {
@@ -2698,6 +2749,10 @@ button.c4p--add-select__global-filter-toggle--open {
2698
2749
  flex-direction: column;
2699
2750
  }
2700
2751
 
2752
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.bx--btn-set.c4p--action-set--max .c4p--action-set__action-button {
2753
+ max-width: 11.25rem;
2754
+ }
2755
+
2701
2756
  .c4p--add-select .c4p--add-select__items-label {
2702
2757
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
2703
2758
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -2709,13 +2764,6 @@ button.c4p--add-select__global-filter-toggle--open {
2709
2764
  padding-right: 0;
2710
2765
  }
2711
2766
 
2712
- .c4p--add-select .bx--structured-list-td {
2713
- height: var(--cds-layout-04, 3rem);
2714
- padding-top: 0;
2715
- padding-bottom: 0;
2716
- vertical-align: middle;
2717
- }
2718
-
2719
2767
  .c4p--add-select .bx--radio-button__appearance {
2720
2768
  margin: 0 var(--cds-spacing-05, 1rem) 0 0;
2721
2769
  }
@@ -2739,6 +2787,33 @@ button.c4p--add-select__global-filter-toggle--open {
2739
2787
  padding-left: var(--cds-spacing-03, 0.5rem);
2740
2788
  }
2741
2789
 
2790
+ .c4p--add-select__multi .c4p--empty-state {
2791
+ max-width: 16rem;
2792
+ margin-top: var(--cds-layout-04, 3rem);
2793
+ }
2794
+
2795
+ .c4p--add-select .bx--accordion__arrow {
2796
+ transform: rotate(0deg);
2797
+ }
2798
+
2799
+ .c4p--add-select .bx--accordion__item--active .bx--accordion__arrow {
2800
+ transform: rotate(90deg);
2801
+ }
2802
+
2803
+ .c4p--add-select bx--accordion--start bx--accordion__arrow {
2804
+ margin: 0 0 0 var(--cds-spacing-05, 1rem);
2805
+ }
2806
+
2807
+ .c4p--add-select bx--accordion--start bx--accordion__title {
2808
+ margin: 0 var(--cds-spacing-05, 1rem) 0 var(--cds-spacing-03, 0.5rem);
2809
+ }
2810
+
2811
+ .c4p--add-select bx--accordion__item--active bx--accordion__content {
2812
+ padding-top: 0;
2813
+ padding-bottom: 0;
2814
+ margin-top: var(--cds-spacing-03, 0.5rem);
2815
+ }
2816
+
2742
2817
  @keyframes fade-in {
2743
2818
  0% {
2744
2819
  opacity: 0;
@@ -2980,7 +3055,7 @@ button.c4p--add-select__global-filter-toggle--open {
2980
3055
  --cds-productive-heading-04-line-height: 1.28572;
2981
3056
  --cds-productive-heading-04-letter-spacing: 0;
2982
3057
  --cds-productive-heading-05-font-size: 2rem;
2983
- --cds-productive-heading-05-font-weight: 400;
3058
+ --cds-productive-heading-05-font-weight: 300;
2984
3059
  --cds-productive-heading-05-line-height: 1.25;
2985
3060
  --cds-productive-heading-05-letter-spacing: 0;
2986
3061
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -3008,7 +3083,7 @@ button.c4p--add-select__global-filter-toggle--open {
3008
3083
  --cds-expressive-heading-04-line-height: 1.28572;
3009
3084
  --cds-expressive-heading-04-letter-spacing: 0;
3010
3085
  --cds-expressive-heading-05-font-size: 2rem;
3011
- --cds-expressive-heading-05-font-weight: 400;
3086
+ --cds-expressive-heading-05-font-weight: 300;
3012
3087
  --cds-expressive-heading-05-line-height: 1.25;
3013
3088
  --cds-expressive-heading-05-letter-spacing: 0;
3014
3089
  --cds-expressive-heading-06-font-size: 2rem;
@@ -3042,7 +3117,7 @@ button.c4p--add-select__global-filter-toggle--open {
3042
3117
  --cds-display-03-line-height: 1.19;
3043
3118
  --cds-display-03-letter-spacing: 0;
3044
3119
  --cds-display-04-font-size: 2.625rem;
3045
- --cds-display-04-font-weight: 600;
3120
+ --cds-display-04-font-weight: 300;
3046
3121
  --cds-display-04-line-height: 1.19;
3047
3122
  --cds-display-04-letter-spacing: 0;
3048
3123
  --cds-legal-01-font-size: 0.75rem;
@@ -3086,7 +3161,7 @@ button.c4p--add-select__global-filter-toggle--open {
3086
3161
  --cds-heading-04-line-height: 1.28572;
3087
3162
  --cds-heading-04-letter-spacing: 0;
3088
3163
  --cds-heading-05-font-size: 2rem;
3089
- --cds-heading-05-font-weight: 400;
3164
+ --cds-heading-05-font-weight: 300;
3090
3165
  --cds-heading-05-line-height: 1.25;
3091
3166
  --cds-heading-05-letter-spacing: 0;
3092
3167
  --cds-heading-06-font-size: 2.625rem;
@@ -3106,7 +3181,7 @@ button.c4p--add-select__global-filter-toggle--open {
3106
3181
  --cds-fluid-heading-04-line-height: 1.28572;
3107
3182
  --cds-fluid-heading-04-letter-spacing: 0;
3108
3183
  --cds-fluid-heading-05-font-size: 2rem;
3109
- --cds-fluid-heading-05-font-weight: 400;
3184
+ --cds-fluid-heading-05-font-weight: 300;
3110
3185
  --cds-fluid-heading-05-line-height: 1.25;
3111
3186
  --cds-fluid-heading-05-letter-spacing: 0;
3112
3187
  --cds-fluid-heading-06-font-size: 2rem;
@@ -3140,7 +3215,7 @@ button.c4p--add-select__global-filter-toggle--open {
3140
3215
  --cds-fluid-display-03-line-height: 1.19;
3141
3216
  --cds-fluid-display-03-letter-spacing: 0;
3142
3217
  --cds-fluid-display-04-font-size: 2.625rem;
3143
- --cds-fluid-display-04-font-weight: 600;
3218
+ --cds-fluid-display-04-font-weight: 300;
3144
3219
  --cds-fluid-display-04-line-height: 1.19;
3145
3220
  --cds-fluid-display-04-letter-spacing: 0;
3146
3221
  --cds-spacing-01: 0.125rem;
@@ -3191,8 +3266,7 @@ button.c4p--add-select__global-filter-toggle--open {
3191
3266
  max-height: 38.5rem;
3192
3267
  background-color: var(--cds-ui-background, #ffffff);
3193
3268
  color: var(--cds-text-01, #161616);
3194
- transition: transform 110ms;
3195
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3269
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3196
3270
  }
3197
3271
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
3198
3272
  position: sticky;
@@ -3257,8 +3331,7 @@ button.c4p--add-select__global-filter-toggle--open {
3257
3331
  background-color: var(--cds-ui-background, #ffffff);
3258
3332
  cursor: pointer;
3259
3333
  text-align: left;
3260
- transition: background-color 240ms;
3261
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3334
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3262
3335
  }
3263
3336
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
3264
3337
  margin-bottom: var(--cds-spacing-02, 0.25rem);
@@ -3363,8 +3436,7 @@ button.c4p--add-select__global-filter-toggle--open {
3363
3436
  margin: 0 auto;
3364
3437
  background-color: var(--cds-ui-02, #ffffff);
3365
3438
  content: "";
3366
- transition: background-color 240ms;
3367
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3439
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3368
3440
  }
3369
3441
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
3370
3442
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -4204,6 +4276,28 @@ button.c4p--add-select__global-filter-toggle--open {
4204
4276
  margin-top: calc(-1 * var(--cds-spacing-02, 0.25rem));
4205
4277
  margin-right: var(--cds-spacing-03, 0.5rem);
4206
4278
  }
4279
+ .c4p--card__productive .c4p--card__actions-header .bx--btn:hover + .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm::before {
4280
+ opacity: 0;
4281
+ }
4282
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm {
4283
+ padding-right: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
4284
+ padding-left: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
4285
+ }
4286
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm::before {
4287
+ position: absolute;
4288
+ left: 0;
4289
+ width: 0.05rem;
4290
+ height: var(--cds-spacing-06, 1.5rem);
4291
+ background-color: var(--cds-hover-ui, #e5e5e5);
4292
+ content: "";
4293
+ opacity: 1;
4294
+ }
4295
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm:hover::before {
4296
+ opacity: 0;
4297
+ }
4298
+ .c4p--card__productive .c4p--card__actions-header-ghost-button--only.bx--btn--ghost.bx--btn--sm::before {
4299
+ opacity: 0;
4300
+ }
4207
4301
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
4208
4302
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
4209
4303
  margin-top: 0;
@@ -4223,10 +4317,6 @@ button.c4p--add-select__global-filter-toggle--open {
4223
4317
  padding-right: var(--cds-spacing-05, 1rem);
4224
4318
  }
4225
4319
 
4226
- .c4p--remove-modal .bx--modal-close {
4227
- display: none;
4228
- }
4229
-
4230
4320
  .c4p--remove-modal__body {
4231
4321
  padding-right: 20%;
4232
4322
  margin-bottom: var(--cds-spacing-05, 1rem);
@@ -5165,7 +5255,7 @@ button.c4p--add-select__global-filter-toggle--open {
5165
5255
  --cds-productive-heading-04-line-height: 1.28572;
5166
5256
  --cds-productive-heading-04-letter-spacing: 0;
5167
5257
  --cds-productive-heading-05-font-size: 2rem;
5168
- --cds-productive-heading-05-font-weight: 400;
5258
+ --cds-productive-heading-05-font-weight: 300;
5169
5259
  --cds-productive-heading-05-line-height: 1.25;
5170
5260
  --cds-productive-heading-05-letter-spacing: 0;
5171
5261
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -5193,7 +5283,7 @@ button.c4p--add-select__global-filter-toggle--open {
5193
5283
  --cds-expressive-heading-04-line-height: 1.28572;
5194
5284
  --cds-expressive-heading-04-letter-spacing: 0;
5195
5285
  --cds-expressive-heading-05-font-size: 2rem;
5196
- --cds-expressive-heading-05-font-weight: 400;
5286
+ --cds-expressive-heading-05-font-weight: 300;
5197
5287
  --cds-expressive-heading-05-line-height: 1.25;
5198
5288
  --cds-expressive-heading-05-letter-spacing: 0;
5199
5289
  --cds-expressive-heading-06-font-size: 2rem;
@@ -5227,7 +5317,7 @@ button.c4p--add-select__global-filter-toggle--open {
5227
5317
  --cds-display-03-line-height: 1.19;
5228
5318
  --cds-display-03-letter-spacing: 0;
5229
5319
  --cds-display-04-font-size: 2.625rem;
5230
- --cds-display-04-font-weight: 600;
5320
+ --cds-display-04-font-weight: 300;
5231
5321
  --cds-display-04-line-height: 1.19;
5232
5322
  --cds-display-04-letter-spacing: 0;
5233
5323
  --cds-legal-01-font-size: 0.75rem;
@@ -5271,7 +5361,7 @@ button.c4p--add-select__global-filter-toggle--open {
5271
5361
  --cds-heading-04-line-height: 1.28572;
5272
5362
  --cds-heading-04-letter-spacing: 0;
5273
5363
  --cds-heading-05-font-size: 2rem;
5274
- --cds-heading-05-font-weight: 400;
5364
+ --cds-heading-05-font-weight: 300;
5275
5365
  --cds-heading-05-line-height: 1.25;
5276
5366
  --cds-heading-05-letter-spacing: 0;
5277
5367
  --cds-heading-06-font-size: 2.625rem;
@@ -5291,7 +5381,7 @@ button.c4p--add-select__global-filter-toggle--open {
5291
5381
  --cds-fluid-heading-04-line-height: 1.28572;
5292
5382
  --cds-fluid-heading-04-letter-spacing: 0;
5293
5383
  --cds-fluid-heading-05-font-size: 2rem;
5294
- --cds-fluid-heading-05-font-weight: 400;
5384
+ --cds-fluid-heading-05-font-weight: 300;
5295
5385
  --cds-fluid-heading-05-line-height: 1.25;
5296
5386
  --cds-fluid-heading-05-letter-spacing: 0;
5297
5387
  --cds-fluid-heading-06-font-size: 2rem;
@@ -5325,7 +5415,7 @@ button.c4p--add-select__global-filter-toggle--open {
5325
5415
  --cds-fluid-display-03-line-height: 1.19;
5326
5416
  --cds-fluid-display-03-letter-spacing: 0;
5327
5417
  --cds-fluid-display-04-font-size: 2.625rem;
5328
- --cds-fluid-display-04-font-weight: 600;
5418
+ --cds-fluid-display-04-font-weight: 300;
5329
5419
  --cds-fluid-display-04-line-height: 1.19;
5330
5420
  --cds-fluid-display-04-letter-spacing: 0;
5331
5421
  --cds-spacing-01: 0.125rem;
@@ -5610,7 +5700,7 @@ button.c4p--add-select__global-filter-toggle--open {
5610
5700
  --cds-productive-heading-04-line-height: 1.28572;
5611
5701
  --cds-productive-heading-04-letter-spacing: 0;
5612
5702
  --cds-productive-heading-05-font-size: 2rem;
5613
- --cds-productive-heading-05-font-weight: 400;
5703
+ --cds-productive-heading-05-font-weight: 300;
5614
5704
  --cds-productive-heading-05-line-height: 1.25;
5615
5705
  --cds-productive-heading-05-letter-spacing: 0;
5616
5706
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -5638,7 +5728,7 @@ button.c4p--add-select__global-filter-toggle--open {
5638
5728
  --cds-expressive-heading-04-line-height: 1.28572;
5639
5729
  --cds-expressive-heading-04-letter-spacing: 0;
5640
5730
  --cds-expressive-heading-05-font-size: 2rem;
5641
- --cds-expressive-heading-05-font-weight: 400;
5731
+ --cds-expressive-heading-05-font-weight: 300;
5642
5732
  --cds-expressive-heading-05-line-height: 1.25;
5643
5733
  --cds-expressive-heading-05-letter-spacing: 0;
5644
5734
  --cds-expressive-heading-06-font-size: 2rem;
@@ -5672,7 +5762,7 @@ button.c4p--add-select__global-filter-toggle--open {
5672
5762
  --cds-display-03-line-height: 1.19;
5673
5763
  --cds-display-03-letter-spacing: 0;
5674
5764
  --cds-display-04-font-size: 2.625rem;
5675
- --cds-display-04-font-weight: 600;
5765
+ --cds-display-04-font-weight: 300;
5676
5766
  --cds-display-04-line-height: 1.19;
5677
5767
  --cds-display-04-letter-spacing: 0;
5678
5768
  --cds-legal-01-font-size: 0.75rem;
@@ -5716,7 +5806,7 @@ button.c4p--add-select__global-filter-toggle--open {
5716
5806
  --cds-heading-04-line-height: 1.28572;
5717
5807
  --cds-heading-04-letter-spacing: 0;
5718
5808
  --cds-heading-05-font-size: 2rem;
5719
- --cds-heading-05-font-weight: 400;
5809
+ --cds-heading-05-font-weight: 300;
5720
5810
  --cds-heading-05-line-height: 1.25;
5721
5811
  --cds-heading-05-letter-spacing: 0;
5722
5812
  --cds-heading-06-font-size: 2.625rem;
@@ -5736,7 +5826,7 @@ button.c4p--add-select__global-filter-toggle--open {
5736
5826
  --cds-fluid-heading-04-line-height: 1.28572;
5737
5827
  --cds-fluid-heading-04-letter-spacing: 0;
5738
5828
  --cds-fluid-heading-05-font-size: 2rem;
5739
- --cds-fluid-heading-05-font-weight: 400;
5829
+ --cds-fluid-heading-05-font-weight: 300;
5740
5830
  --cds-fluid-heading-05-line-height: 1.25;
5741
5831
  --cds-fluid-heading-05-letter-spacing: 0;
5742
5832
  --cds-fluid-heading-06-font-size: 2rem;
@@ -5770,7 +5860,7 @@ button.c4p--add-select__global-filter-toggle--open {
5770
5860
  --cds-fluid-display-03-line-height: 1.19;
5771
5861
  --cds-fluid-display-03-letter-spacing: 0;
5772
5862
  --cds-fluid-display-04-font-size: 2.625rem;
5773
- --cds-fluid-display-04-font-weight: 600;
5863
+ --cds-fluid-display-04-font-weight: 300;
5774
5864
  --cds-fluid-display-04-line-height: 1.19;
5775
5865
  --cds-fluid-display-04-letter-spacing: 0;
5776
5866
  --cds-spacing-01: 0.125rem;
@@ -6534,6 +6624,20 @@ button.c4p--add-select__global-filter-toggle--open {
6534
6624
  .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
6535
6625
  outline: 2px solid var(--cds-inverse-link, #78a9ff);
6536
6626
  }
6627
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__active-cell--highlight,
6628
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__selection-area--element,
6629
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__active-cell--highlight:focus {
6630
+ /* stylelint-disable-next-line carbon/theme-token-use */
6631
+ border-color: #82cfff;
6632
+ }
6633
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__selection-area--element::before {
6634
+ /* stylelint-disable-next-line carbon/theme-token-use */
6635
+ background-color: #00539a;
6636
+ }
6637
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__cell-editor.c4p--data-spreadsheet__cell-editor--active {
6638
+ /* stylelint-disable-next-line carbon/theme-token-use */
6639
+ outline-color: #82cfff;
6640
+ }
6537
6641
  .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
6538
6642
  position: relative;
6539
6643
  }
@@ -6663,7 +6767,7 @@ button.c4p--add-select__global-filter-toggle--open {
6663
6767
  padding-left: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem));
6664
6768
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
6665
6769
  background-color: var(--cds-field-01, #f4f4f4);
6666
- color: var(--cds-text-01, #161616);
6770
+ color: var(--cds-text-02, #525252);
6667
6771
  text-align: left;
6668
6772
  }
6669
6773
  .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] {
@@ -6770,11 +6874,19 @@ button.c4p--add-select__global-filter-toggle--open {
6770
6874
  align-items: center;
6771
6875
  color: var(--cds-text-01, #161616);
6772
6876
  }
6877
+ .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 {
6878
+ position: sticky;
6879
+ z-index: 1;
6880
+ left: 0;
6881
+ }
6773
6882
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
6774
6883
  align-items: center;
6775
6884
  padding-top: 0;
6776
6885
  padding-bottom: 0;
6777
6886
  }
6887
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell.c4p--datagrid__cell--spacer {
6888
+ padding: 0;
6889
+ }
6778
6890
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.bx--table-column-checkbox,
6779
6891
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.bx--table-column-checkbox {
6780
6892
  /* stylelint-disable-next-line carbon/layout-token-use */
@@ -6786,6 +6898,11 @@ button.c4p--add-select__global-filter-toggle--open {
6786
6898
  align-items: center;
6787
6899
  padding-top: 0;
6788
6900
  }
6901
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.bx--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
6902
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.bx--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
6903
+ position: sticky;
6904
+ left: 0;
6905
+ }
6789
6906
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.bx--table-column-checkbox {
6790
6907
  display: flex;
6791
6908
  height: 100%;
@@ -6845,9 +6962,12 @@ button.c4p--add-select__global-filter-toggle--open {
6845
6962
  height: 100%;
6846
6963
  overflow-x: auto;
6847
6964
  }
6848
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
6849
- overflow: hidden;
6965
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
6966
+ display: flex;
6967
+ overflow: auto;
6850
6968
  max-height: 100%;
6969
+ flex-direction: column;
6970
+ background-color: var(--cds-ui-01, #f4f4f4);
6851
6971
  }
6852
6972
  .c4p--datagrid__grid-container .c4p--datagrid__head {
6853
6973
  display: flex;
@@ -6878,6 +6998,12 @@ button.c4p--add-select__global-filter-toggle--open {
6878
6998
  text-overflow: ellipsis;
6879
6999
  white-space: nowrap;
6880
7000
  }
7001
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
7002
+ display: -webkit-box;
7003
+ -webkit-box-orient: vertical;
7004
+ -webkit-line-clamp: 2;
7005
+ white-space: initial;
7006
+ }
6881
7007
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
6882
7008
  display: flex;
6883
7009
  overflow: hidden;
@@ -6972,6 +7098,12 @@ button.c4p--add-select__global-filter-toggle--open {
6972
7098
  .c4p--datagrid__head-hidden-select-all {
6973
7099
  padding-right: var(--cds-spacing-08, 2.5rem);
6974
7100
  }
7101
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
7102
+ position: sticky;
7103
+ z-index: 1;
7104
+ left: 0;
7105
+ background-color: var(--cds-ui-03, #e0e0e0);
7106
+ }
6975
7107
 
6976
7108
  .c4p--datagrid__simple-body {
6977
7109
  position: relative;
@@ -6995,15 +7127,6 @@ button.c4p--add-select__global-filter-toggle--open {
6995
7127
  min-width: 0 !important;
6996
7128
  }
6997
7129
 
6998
- .c4p--datagrid__table-simple::-webkit-scrollbar {
6999
- width: 6px;
7000
- background-color: var(--cds-ui-background, #ffffff);
7001
- }
7002
-
7003
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
7004
- background-color: var(--cds-text-03, #a8a8a8);
7005
- }
7006
-
7007
7130
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
7008
7131
  overflow: auto;
7009
7132
  }
@@ -7107,11 +7230,11 @@ button.c4p--add-select__global-filter-toggle--open {
7107
7230
  transform: translateY(-50%);
7108
7231
  }
7109
7232
 
7110
- .c4p--datagrid .bx--data-table--selected {
7233
+ .c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row) {
7111
7234
  position: relative;
7112
7235
  }
7113
7236
 
7114
- .c4p--datagrid .bx--data-table--selected::before {
7237
+ .c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row)::before {
7115
7238
  position: absolute;
7116
7239
  left: 0;
7117
7240
  width: var(--cds-spacing-02, 0.25rem);
@@ -7120,6 +7243,46 @@ button.c4p--add-select__global-filter-toggle--open {
7120
7243
  content: "";
7121
7244
  }
7122
7245
 
7246
+ .c4p--datagrid__table-toolbar .bx--batch-summary__para {
7247
+ white-space: nowrap;
7248
+ }
7249
+
7250
+ .c4p--datagrid__table-toolbar .bx--batch-actions .bx--batch-actions--active {
7251
+ overflow-x: hidden;
7252
+ }
7253
+
7254
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu {
7255
+ display: flex;
7256
+ min-width: var(--cds-spacing-08, 2.5rem);
7257
+ justify-content: center;
7258
+ margin-right: var(--cds-spacing-04, 0.75rem);
7259
+ }
7260
+
7261
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu {
7262
+ min-width: calc(var(--cds-spacing-12, 6rem) + var(--cds-spacing-03, 0.5rem));
7263
+ }
7264
+
7265
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu .c4p--button-menu__trigger {
7266
+ display: flex;
7267
+ width: 100%;
7268
+ min-width: var(--cds-spacing-09, 3rem);
7269
+ justify-content: center;
7270
+ padding: 0;
7271
+ margin: 0;
7272
+ }
7273
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu .c4p--button-menu__trigger .bx--btn__icon {
7274
+ margin: 0;
7275
+ }
7276
+
7277
+ .c4p--datagrid .c4p--button-menu {
7278
+ height: var(--cds-spacing-09, 3rem);
7279
+ }
7280
+
7281
+ .c4p--datagrid .c4p--datagrid__table-grid-active {
7282
+ border: 2px solid var(--cds-inverse-link, #78a9ff);
7283
+ outline: 0;
7284
+ }
7285
+
7123
7286
  /*
7124
7287
  * Licensed Materials - Property of IBM
7125
7288
  * 5724-Q36
@@ -7262,14 +7425,36 @@ button.c4p--add-select__global-filter-toggle--open {
7262
7425
  /* stylelint-disable-next-line declaration-no-important */
7263
7426
  position: sticky !important;
7264
7427
  right: 0;
7265
- box-shadow: -2px 1px 3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
7428
+ display: flex;
7429
+ align-items: center;
7430
+ border-left: 1px solid var(--cds-ui-03, #e0e0e0);
7266
7431
  }
7267
7432
 
7268
7433
  .c4p--datagrid__right-sticky-column-header {
7269
7434
  /* stylelint-disable-next-line declaration-no-important */
7270
7435
  position: sticky !important;
7271
7436
  right: 0;
7272
- box-shadow: -2px 1px 3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
7437
+ }
7438
+
7439
+ .c4p--datagrid__left-sticky-column-cell {
7440
+ /* stylelint-disable-next-line declaration-no-important */
7441
+ position: sticky !important;
7442
+ left: 0;
7443
+ display: flex;
7444
+ align-items: center;
7445
+ border-right: 1px solid var(--cds-ui-03, #e0e0e0);
7446
+ }
7447
+
7448
+ .c4p--datagrid__left-sticky-column-header {
7449
+ /* stylelint-disable-next-line declaration-no-important */
7450
+ position: sticky !important;
7451
+ z-index: 1;
7452
+ left: 0;
7453
+ }
7454
+
7455
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
7456
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
7457
+ left: var(--cds-spacing-08, 2.5rem);
7273
7458
  }
7274
7459
 
7275
7460
  .c4p--datagrid__sticky-noShadow {
@@ -7318,21 +7503,30 @@ button.c4p--add-select__global-filter-toggle--open {
7318
7503
  position: inherit;
7319
7504
  display: flex;
7320
7505
  flex-flow: column;
7321
- /* stylelint-disable-next-line declaration-no-important */
7322
- padding-top: 0 !important;
7506
+ padding: 0;
7507
+ margin: 0;
7508
+ }
7509
+
7510
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
7511
+ margin-bottom: 0;
7323
7512
  }
7324
7513
 
7325
- .c4p--datagrid__customize-columns-checkbox {
7514
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
7326
7515
  display: flex;
7327
7516
  justify-content: center;
7328
- /* stylelint-disable-next-line declaration-no-important */
7329
- margin-bottom: 0 !important;
7330
7517
  }
7331
7518
 
7332
7519
  .c4p--datagrid__customize-columns-modal--actions {
7333
7520
  display: flex;
7521
+ height: var(--cds-spacing-09, 3rem);
7334
7522
  flex-flow: row;
7335
- margin-bottom: var(--cds-spacing-06, 1.5rem);
7523
+ background-color: var(--cds-field-02, #ffffff);
7524
+ }
7525
+
7526
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
7527
+ height: var(--cds-spacing-09, 3rem);
7528
+ padding-left: var(--cds-spacing-08, 2.5rem);
7529
+ border-bottom: none;
7336
7530
  }
7337
7531
 
7338
7532
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -7340,6 +7534,7 @@ button.c4p--add-select__global-filter-toggle--open {
7340
7534
  }
7341
7535
 
7342
7536
  .c4p--datagrid__customize-columns-instructions {
7537
+ padding-left: var(--cds-spacing-05, 1rem);
7343
7538
  margin-bottom: var(--cds-spacing-06, 1.5rem);
7344
7539
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
7345
7540
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -7353,6 +7548,34 @@ button.c4p--add-select__global-filter-toggle--open {
7353
7548
  overflow: auto;
7354
7549
  }
7355
7550
 
7551
+ .c4p--datagrid__customize-columns-select-all {
7552
+ display: flex;
7553
+ height: var(--cds-spacing-09, 3rem);
7554
+ padding-left: var(--cds-spacing-08, 2.5rem);
7555
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
7556
+ background-color: var(--cds-layer, #f4f4f4);
7557
+ }
7558
+
7559
+ .c4p--datagrid__customize-columns-select-all:hover {
7560
+ background-color: var(--cds-layer-hover, #e5e5e5);
7561
+ }
7562
+
7563
+ .c4p--datagrid__customize-columns-select-all-selected {
7564
+ display: flex;
7565
+ height: var(--cds-spacing-09, 3rem);
7566
+ padding-left: var(--cds-spacing-08, 2.5rem);
7567
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
7568
+ background-color: var(--cds-layer-selected, #e0e0e0);
7569
+ }
7570
+
7571
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
7572
+ background-color: var(--cds-hover-selected-ui, #cacaca);
7573
+ }
7574
+
7575
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .bx--modal-content {
7576
+ margin-bottom: 0;
7577
+ }
7578
+
7356
7579
  /*
7357
7580
  * Licensed Materials - Property of IBM
7358
7581
  * 5724-Q36
@@ -7430,14 +7653,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
7430
7653
 
7431
7654
  .c4p--datagrid__draggable-handleHolder {
7432
7655
  display: flex;
7433
- height: var(--cds-spacing-07, 2rem);
7434
- padding-left: var(--cds-spacing-02, 0.25rem);
7435
- margin-bottom: var(--cds-spacing-03, 0.5rem);
7436
- background: var(--cds-ui-02, #ffffff);
7656
+ height: var(--cds-spacing-09, 3rem);
7657
+ padding-left: var(--cds-spacing-05, 1rem);
7658
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
7659
+ background-color: var(--cds-layer, #f4f4f4);
7660
+ }
7661
+
7662
+ .c4p--datagrid__draggable-handleHolder:hover {
7663
+ background-color: var(--cds-layer-hover, #e5e5e5);
7437
7664
  }
7438
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
7665
+
7666
+ .c4p--datagrid__draggable-handleHolder-selected {
7667
+ display: flex;
7668
+ height: var(--cds-spacing-09, 3rem);
7669
+ padding-left: var(--cds-spacing-05, 1rem);
7670
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
7671
+ background-color: var(--cds-layer-selected, #e0e0e0);
7672
+ }
7673
+
7674
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
7675
+ background-color: var(--cds-hover-selected-ui, #cacaca);
7676
+ }
7677
+
7678
+ .c4p--datagrid__draggable-handleHolder-isOver {
7439
7679
  border: 2px dashed var(--cds-focus, #0f62fe);
7440
- background-color: var(--cds-highlight, #d0e2ff);
7680
+ background-color: var(--cds-hover-selected-ui, #cacaca);
7441
7681
  }
7442
7682
 
7443
7683
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -7445,7 +7685,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
7445
7685
  width: 100%;
7446
7686
  }
7447
7687
 
7448
- .c4p--datagrid__draggable-handleHolder--grabbed {
7688
+ .c4p--datagrid__draggable-handleHolder-grabbed {
7449
7689
  background-color: var(--cds-highlight, #d0e2ff);
7450
7690
  color: var(--cds-text-01, #161616);
7451
7691
  }
@@ -7462,6 +7702,235 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
7462
7702
  white-space: nowrap;
7463
7703
  }
7464
7704
 
7705
+ /*
7706
+ * Licensed Materials - Property of IBM
7707
+ * 5724-Q36
7708
+ * (c) Copyright IBM Corp. 2021
7709
+ * US Government Users Restricted Rights - Use, duplication or disclosure
7710
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
7711
+ */
7712
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--text-input,
7713
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number input[type=number],
7714
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs,
7715
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .bx--date-picker__input {
7716
+ height: 1.5rem;
7717
+ }
7718
+
7719
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
7720
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
7721
+ height: 1.25rem;
7722
+ }
7723
+
7724
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
7725
+ max-height: none;
7726
+ }
7727
+
7728
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--text-input,
7729
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number input[type=number],
7730
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm,
7731
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .bx--date-picker__input {
7732
+ height: 2rem;
7733
+ }
7734
+
7735
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
7736
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
7737
+ height: 1.75rem;
7738
+ }
7739
+
7740
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
7741
+ max-height: none;
7742
+ }
7743
+
7744
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--text-input,
7745
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number input[type=number],
7746
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md,
7747
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .bx--date-picker__input {
7748
+ height: 2.5rem;
7749
+ }
7750
+
7751
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
7752
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
7753
+ height: 2.25rem;
7754
+ }
7755
+
7756
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
7757
+ max-height: none;
7758
+ }
7759
+
7760
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--text-input,
7761
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number input[type=number],
7762
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg,
7763
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .bx--date-picker__input {
7764
+ height: 3rem;
7765
+ }
7766
+
7767
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
7768
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
7769
+ height: 2.75rem;
7770
+ }
7771
+
7772
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
7773
+ max-height: none;
7774
+ }
7775
+
7776
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--text-input,
7777
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number input[type=number],
7778
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl,
7779
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .bx--date-picker__input {
7780
+ height: 4rem;
7781
+ }
7782
+
7783
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
7784
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
7785
+ height: 3.75rem;
7786
+ }
7787
+
7788
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
7789
+ max-height: none;
7790
+ }
7791
+
7792
+ .c4p--datagrid__inline-edit-cell {
7793
+ display: flex;
7794
+ height: 100%;
7795
+ align-items: center;
7796
+ }
7797
+
7798
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
7799
+ display: flex;
7800
+ align-items: center;
7801
+ }
7802
+
7803
+ .c4p--datagrid__inline-edit--outer-cell-button {
7804
+ width: 100%;
7805
+ height: calc(100% + 2px);
7806
+ }
7807
+
7808
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
7809
+ position: relative;
7810
+ display: flex;
7811
+ width: 100%;
7812
+ height: 100%;
7813
+ align-items: center;
7814
+ justify-content: space-between;
7815
+ padding-left: var(--cds-spacing-05, 1rem);
7816
+ color: var(--cds-text-02, #525252);
7817
+ cursor: pointer;
7818
+ outline: 0;
7819
+ }
7820
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
7821
+ padding-right: var(--cds-spacing-05, 1rem);
7822
+ }
7823
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
7824
+ padding-left: 0;
7825
+ }
7826
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
7827
+ height: var(--cds-spacing-05, 1rem);
7828
+ fill: var(--cds-icon-02, #525252);
7829
+ }
7830
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
7831
+ font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
7832
+ }
7833
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
7834
+ justify-content: flex-start;
7835
+ }
7836
+ .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) {
7837
+ /* stylelint-disable-next-line */
7838
+ }
7839
+ .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 {
7840
+ display: none;
7841
+ }
7842
+ .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 {
7843
+ display: block;
7844
+ }
7845
+
7846
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
7847
+ background-color: var(--cds-hover-selected-ui, #cacaca);
7848
+ color: var(--cds-text-01, #161616);
7849
+ }
7850
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
7851
+ fill: var(--cds-icon-01, #161616);
7852
+ }
7853
+
7854
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
7855
+ background-color: var(--cds-active-ui, #c6c6c6);
7856
+ color: var(--cds-text-01, #161616);
7857
+ cursor: text;
7858
+ }
7859
+
7860
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
7861
+ /* stylelint-disable-next-line carbon/theme-token-use */
7862
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
7863
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
7864
+ }
7865
+ @media screen and (prefers-contrast) {
7866
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
7867
+ outline-style: dotted;
7868
+ }
7869
+ }
7870
+
7871
+ .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) {
7872
+ color: var(--cds-disabled-02, #c6c6c6);
7873
+ cursor: not-allowed;
7874
+ }
7875
+
7876
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
7877
+ overflow: hidden;
7878
+ padding-right: var(--cds-spacing-05, 1rem);
7879
+ text-overflow: ellipsis;
7880
+ white-space: nowrap;
7881
+ }
7882
+
7883
+ .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 {
7884
+ padding-right: var(--cds-spacing-09, 3rem);
7885
+ }
7886
+
7887
+ .c4p--datagrid__inline-edit--outer-cell-button .bx--text-input,
7888
+ .c4p--datagrid__inline-edit--outer-cell-button .bx--number input[type=number] {
7889
+ height: var(--cds-spacing-09, 3rem);
7890
+ }
7891
+
7892
+ .c4p--datagrid__inline-edit-button-icon {
7893
+ position: absolute;
7894
+ right: var(--cds-spacing-05, 1rem);
7895
+ }
7896
+
7897
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit {
7898
+ position: relative;
7899
+ padding: 0;
7900
+ }
7901
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
7902
+ padding-left: var(--cds-spacing-05, 1rem);
7903
+ }
7904
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit .bx--number input[type=number] {
7905
+ min-width: auto;
7906
+ padding-right: var(--cds-spacing-05, 1rem);
7907
+ }
7908
+
7909
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
7910
+ padding-bottom: var(--cds-spacing-05, 1rem);
7911
+ padding-left: var(--cds-spacing-05, 1rem);
7912
+ }
7913
+
7914
+ .c4p--datagrid__inline-edit--select.bx--dropdown,
7915
+ .c4p--datagrid__inline-edit--date .bx--date-picker__input {
7916
+ width: inherit;
7917
+ height: var(--cds-spacing-09, 3rem);
7918
+ max-height: none;
7919
+ }
7920
+
7921
+ .c4p--datagrid__inline-edit--date .bx--date-picker-container {
7922
+ width: inherit;
7923
+ }
7924
+
7925
+ .c4p--datagrid__inline-edit--date.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
7926
+ overflow: hidden;
7927
+ width: 100%;
7928
+ max-width: none;
7929
+ padding-right: var(--cds-spacing-07, 2rem);
7930
+ text-overflow: ellipsis;
7931
+ white-space: nowrap;
7932
+ }
7933
+
7465
7934
  .c4p--datagrid__datagridWrap {
7466
7935
  display: block;
7467
7936
  width: 100%;
@@ -7482,6 +7951,11 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
7482
7951
  overflow-x: unset;
7483
7952
  }
7484
7953
 
7954
+ .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
7955
+ left: var(--cds-spacing-01, 0.125rem);
7956
+ width: 112px;
7957
+ }
7958
+
7485
7959
  @keyframes rotate {
7486
7960
  0% {
7487
7961
  transform: rotate(0deg);