@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (241) hide show
  1. package/css/index-full-carbon.css +952 -143
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +783 -19
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +678 -77
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +757 -92
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  18. package/es/components/AddSelect/AddSelect.js +0 -3
  19. package/es/components/AddSelect/AddSelectBody.js +20 -3
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  21. package/es/components/AddSelect/AddSelectColumn.js +5 -5
  22. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  23. package/es/components/AddSelect/AddSelectList.js +61 -27
  24. package/es/components/AddSelect/AddSelectMetaPanel.js +1 -1
  25. package/es/components/AddSelect/AddSelectSort.js +1 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  27. package/es/components/Card/Card.js +16 -6
  28. package/es/components/Card/CardFooter.js +3 -1
  29. package/es/components/Card/CardHeader.js +20 -1
  30. package/es/components/ComboButton/ComboButton.js +1 -1
  31. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  32. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  33. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  34. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  35. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  36. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  37. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  38. package/es/components/Datagrid/Datagrid/DatagridContent.js +149 -0
  39. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  40. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  41. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  43. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  44. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  45. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  46. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -1
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  50. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  51. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  61. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  62. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  63. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  64. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  70. package/es/components/Datagrid/index.js +3 -1
  71. package/es/components/Datagrid/useActionsColumn.js +28 -12
  72. package/es/components/Datagrid/useColumnOrder.js +8 -0
  73. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  74. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  75. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  76. package/es/components/Datagrid/useExpandedRow.js +0 -1
  77. package/es/components/Datagrid/useInlineEdit.js +71 -0
  78. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  79. package/es/components/Datagrid/useNestedRows.js +2 -2
  80. package/es/components/Datagrid/useRowExpander.js +1 -1
  81. package/es/components/Datagrid/useRowSize.js +17 -6
  82. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  83. package/es/components/Datagrid/useSelectRows.js +12 -2
  84. package/es/components/Datagrid/useSortableColumns.js +1 -1
  85. package/es/components/Datagrid/useStickyColumn.js +11 -0
  86. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  87. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  88. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  89. package/es/components/Datagrid/utils/getArgTypes.js +85 -0
  90. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  91. package/es/components/Datagrid/utils/makeData.js +47 -2
  92. package/es/components/ExportModal/ExportModal.js +1 -1
  93. package/es/components/ImportModal/ImportModal.js +3 -3
  94. package/es/components/InlineEdit/InlineEdit.js +11 -9
  95. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  96. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  97. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  98. package/es/components/OptionsTile/OptionsTile.js +1 -1
  99. package/es/components/PageHeader/PageHeader.js +1 -1
  100. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  101. package/es/components/Saving/Saving.js +1 -1
  102. package/es/components/SidePanel/SidePanel.js +1 -1
  103. package/es/components/StatusIcon/StatusIcon.js +1 -1
  104. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  105. package/es/components/WebTerminal/WebTerminal.js +2 -2
  106. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  107. package/es/components/WebTerminal/hooks/index.js +6 -0
  108. package/es/components/WebTerminal/index.js +6 -0
  109. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  110. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  111. package/es/components/WebTerminal/preview-components/index.js +7 -0
  112. package/es/components/index.js +1 -1
  113. package/es/global/js/hooks/useClickOutside.js +1 -1
  114. package/es/global/js/package-settings.js +3 -3
  115. package/es/global/js/utils/rangeWithCallback.js +13 -0
  116. package/es/global/js/utils/story-helper.js +5 -1
  117. package/es/global/js/utils/uuidv4.spec.js +4 -0
  118. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  119. package/lib/components/AddSelect/AddSelect.js +0 -4
  120. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  121. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  122. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  123. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  124. package/lib/components/AddSelect/AddSelectList.js +62 -28
  125. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  126. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  127. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  128. package/lib/components/Card/Card.js +16 -6
  129. package/lib/components/Card/CardFooter.js +3 -1
  130. package/lib/components/Card/CardHeader.js +21 -1
  131. package/lib/components/ComboButton/ComboButton.js +3 -3
  132. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  133. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  134. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  135. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  136. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  137. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  138. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  139. package/lib/components/Datagrid/Datagrid/DatagridContent.js +183 -0
  140. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  141. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  142. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  143. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  144. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  145. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  146. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  147. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +2 -2
  148. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  149. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  150. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  151. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  152. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  153. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  154. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  155. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  156. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  157. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  158. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  159. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  160. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  161. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  162. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  163. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  164. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  165. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  166. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  167. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  168. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  169. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  170. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  171. package/lib/components/Datagrid/index.js +17 -1
  172. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  173. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  174. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  175. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  176. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  177. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  178. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  179. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  180. package/lib/components/Datagrid/useNestedRows.js +3 -3
  181. package/lib/components/Datagrid/useRowExpander.js +3 -3
  182. package/lib/components/Datagrid/useRowSize.js +18 -13
  183. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  184. package/lib/components/Datagrid/useSelectRows.js +12 -2
  185. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  186. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  187. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  188. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  189. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  190. package/lib/components/Datagrid/utils/getArgTypes.js +93 -0
  191. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  192. package/lib/components/Datagrid/utils/makeData.js +48 -2
  193. package/lib/components/ExportModal/ExportModal.js +3 -3
  194. package/lib/components/ImportModal/ImportModal.js +4 -4
  195. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  196. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  197. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  198. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  199. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  200. package/lib/components/PageHeader/PageHeader.js +2 -2
  201. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  202. package/lib/components/Saving/Saving.js +5 -5
  203. package/lib/components/SidePanel/SidePanel.js +3 -3
  204. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  205. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  206. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  207. package/lib/components/WebTerminal/hooks/index.js +6 -0
  208. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  209. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  210. package/lib/components/index.js +12 -0
  211. package/lib/global/js/hooks/useClickOutside.js +1 -1
  212. package/lib/global/js/package-settings.js +3 -3
  213. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  214. package/lib/global/js/utils/story-helper.js +5 -1
  215. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  216. package/package.json +15 -15
  217. package/scss/components/AddSelect/_add-select.scss +127 -28
  218. package/scss/components/Card/_card.scss +1 -0
  219. package/scss/components/Cascade/_cascade.scss +1 -1
  220. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  221. package/scss/components/Datagrid/_datagrid.scss +7 -0
  222. package/scss/components/Datagrid/_storybook-styles.scss +8 -5
  223. package/scss/components/Datagrid/styles/_datagrid.scss +38 -14
  224. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  225. package/scss/components/Datagrid/styles/_index.scss +1 -0
  226. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  227. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  228. package/scss/components/Datagrid/styles/_useInlineEdit.scss +404 -0
  229. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  230. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  231. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +45 -6
  232. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  233. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  234. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  235. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  236. package/scss/components/SidePanel/_side-panel.scss +3 -6
  237. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  238. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  239. package/scss/components/WebTerminal/_index.scss +7 -0
  240. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  241. package/scss/components/_index-released-only.scss +1 -0
@@ -2532,7 +2532,7 @@
2532
2532
  @media (prefers-reduced-motion: no-preference) {
2533
2533
  .c4p--cascade__element,
2534
2534
  .c4p--cascade__col {
2535
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2535
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2536
2536
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2537
2537
  animation-fill-mode: forwards;
2538
2538
  opacity: 0;
@@ -2964,8 +2964,7 @@
2964
2964
  box-sizing: border-box;
2965
2965
  background-color: var(--cds-layer-01, #f4f4f4);
2966
2966
  color: var(--cds-text-primary, #161616);
2967
- transition: transform 240ms;
2968
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2967
+ transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
2969
2968
  }
2970
2969
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2971
2970
  width: 16rem;
@@ -3381,8 +3380,7 @@
3381
3380
  padding: 0 1rem;
3382
3381
  margin-bottom: 0.5rem;
3383
3382
  background-color: var(--cds-layer-01, #f4f4f4);
3384
- transition: transform 150ms;
3385
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3383
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3386
3384
  }
3387
3385
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3388
3386
  min-width: 2rem;
@@ -3513,8 +3511,7 @@
3513
3511
  width: 100%;
3514
3512
  height: 100%;
3515
3513
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
3516
- transition: background-color 240ms;
3517
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3514
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3518
3515
  }
3519
3516
 
3520
3517
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3661,7 +3658,7 @@
3661
3658
  /* stylelint-disable-next-line function-no-unknown */
3662
3659
  z-index: 9000;
3663
3660
  align-items: flex-end;
3664
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3661
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3665
3662
  }
3666
3663
  @media (prefers-reduced-motion: reduce) {
3667
3664
  .c4p--tearsheet.is-visible {
@@ -4443,7 +4440,6 @@
4443
4440
 
4444
4441
  /* stylelint-disable max-nesting-depth */
4445
4442
  .c4p--add-select__selections.cds--structured-list {
4446
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4447
4443
  margin-bottom: 0;
4448
4444
  }
4449
4445
  .c4p--add-select__selections-wrapper {
@@ -4451,8 +4447,11 @@
4451
4447
  }
4452
4448
  .c4p--add-select__selections-cell-wrapper {
4453
4449
  display: flex;
4450
+ height: 3rem;
4454
4451
  align-items: center;
4455
4452
  justify-content: space-between;
4453
+ padding: 0 1rem;
4454
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4456
4455
  }
4457
4456
  .c4p--add-select__selections-cell-title {
4458
4457
  display: block;
@@ -4466,17 +4465,20 @@
4466
4465
  display: block;
4467
4466
  color: var(--cds-text-secondary, #525252);
4468
4467
  }
4468
+ .c4p--add-select__selections-cell {
4469
+ display: flex;
4470
+ flex-direction: column;
4471
+ justify-content: center;
4472
+ }
4469
4473
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4470
4474
  visibility: visible;
4471
4475
  }
4472
4476
  .c4p--add-select__selections-hidden-hover {
4473
4477
  visibility: hidden;
4474
4478
  }
4475
- .c4p--add-select__selections-row-selected {
4476
- background: #e5e5e5;
4477
- }
4478
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
4479
- visibility: visible;
4479
+ .c4p--add-select__selections-row-selectedcds--structured-list-row {
4480
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4481
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4480
4482
  }
4481
4483
  .c4p--add-select__selections-checkbox {
4482
4484
  display: flex;
@@ -4484,7 +4486,7 @@
4484
4486
  }
4485
4487
  .c4p--add-select__selections-checkbox-label-wrapper {
4486
4488
  display: flex;
4487
- margin-left: 0.5rem;
4489
+ margin-left: 1rem;
4488
4490
  }
4489
4491
  .c4p--add-select__selections-checkbox-label-text {
4490
4492
  display: flex;
@@ -4502,6 +4504,13 @@
4502
4504
  .c4p--add-select__selections-cell-icon {
4503
4505
  margin-right: 0.5rem;
4504
4506
  }
4507
+ .c4p--add-select__selections-row {
4508
+ border-left: 0.125rem solid transparent;
4509
+ }
4510
+ .c4p--add-select__selections-row-meta-selected {
4511
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4512
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4513
+ }
4505
4514
 
4506
4515
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4507
4516
  color: var(--cds-interactive, #0f62fe);
@@ -4513,15 +4522,31 @@
4513
4522
  fill: currentColor;
4514
4523
  }
4515
4524
 
4525
+ .c4p--add-select cds--structured-list--selection .c4p--add-select__selections-row-selectedcds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4526
+ border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
4527
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4528
+ }
4529
+
4516
4530
  .c4p--add-select__sub-header {
4517
4531
  display: flex;
4518
4532
  align-items: flex-end;
4519
4533
  justify-content: space-between;
4520
4534
  }
4535
+ .c4p--add-select__sub-header-multi {
4536
+ padding: 0 1rem;
4537
+ }
4538
+
4539
+ .c4p--add-select cds--structured-list-row {
4540
+ border-bottom: 0;
4541
+ }
4542
+
4543
+ .c4p--add-select cds--structured-list--selection cds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4544
+ border-bottom: 0;
4545
+ }
4521
4546
 
4522
4547
  .c4p--add-select__sidebar-header {
4523
4548
  display: flex;
4524
- padding: 1.5rem 1rem 0.5rem 1rem;
4549
+ padding: 2rem 1rem 0.5rem 1rem;
4525
4550
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4526
4551
  }
4527
4552
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4547,7 +4572,7 @@
4547
4572
  }
4548
4573
 
4549
4574
  .c4p--add-select__sidebar-body {
4550
- padding: 1rem;
4575
+ padding: 0 1rem;
4551
4576
  }
4552
4577
 
4553
4578
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4580,18 +4605,44 @@
4580
4605
  .c4p--add-select__columns {
4581
4606
  display: flex;
4582
4607
  flex-direction: row;
4608
+ flex-grow: 1;
4583
4609
  overflow-x: auto;
4584
4610
  }
4611
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4612
+ margin-left: 0.5rem;
4613
+ }
4614
+ .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
4615
+ border-left: 0;
4616
+ }
4617
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4618
+ padding: 0;
4619
+ }
4620
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4621
+ height: auto;
4622
+ padding: 0 0.5rem;
4623
+ }
4624
+ .c4p--add-select__columns .c4p--add-select__tag-container {
4625
+ padding: 0 0.5rem;
4626
+ margin-bottom: 0;
4627
+ }
4628
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4629
+ padding: 0;
4630
+ }
4631
+ .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
4632
+ border-top: 0;
4633
+ }
4585
4634
 
4586
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4587
- height: 0;
4588
- padding: 0 !important;
4635
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4636
+ padding: 0 1rem;
4637
+ }
4638
+
4639
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4640
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4589
4641
  }
4590
4642
 
4591
4643
  .c4p--add-select__column {
4592
4644
  overflow: auto;
4593
- max-width: 15rem;
4594
- flex: 1 0 15rem;
4645
+ flex: 0 0 20rem;
4595
4646
  padding: 1rem;
4596
4647
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4597
4648
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4690,13 +4741,6 @@ button.c4p--add-select__global-filter-toggle--open {
4690
4741
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4691
4742
  }
4692
4743
 
4693
- .c4p--add-select .cds--structured-list-td {
4694
- height: 3rem;
4695
- padding-top: 0;
4696
- padding-bottom: 0;
4697
- vertical-align: middle;
4698
- }
4699
-
4700
4744
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4701
4745
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4702
4746
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4709,8 +4753,7 @@ button.c4p--add-select__global-filter-toggle--open {
4709
4753
  }
4710
4754
 
4711
4755
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4712
- max-width: 29rem;
4713
- flex: 0 0 50%;
4756
+ flex-basis: 22.5rem;
4714
4757
  }
4715
4758
 
4716
4759
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4722,6 +4765,10 @@ button.c4p--add-select__global-filter-toggle--open {
4722
4765
  flex-direction: column;
4723
4766
  }
4724
4767
 
4768
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4769
+ max-width: 11.25rem;
4770
+ }
4771
+
4725
4772
  .c4p--add-select .c4p--add-select__items-label {
4726
4773
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4727
4774
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4762,6 +4809,33 @@ button.c4p--add-select__global-filter-toggle--open {
4762
4809
  padding-left: 0.5rem;
4763
4810
  }
4764
4811
 
4812
+ .c4p--add-select__multi .c4p--empty-state {
4813
+ max-width: 16rem;
4814
+ margin-top: 3rem;
4815
+ }
4816
+
4817
+ .c4p--add-select .cds--accordion__arrow {
4818
+ transform: rotate(0deg);
4819
+ }
4820
+
4821
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4822
+ transform: rotate(90deg);
4823
+ }
4824
+
4825
+ .c4p--add-select cds--accordion--start cds--accordion__arrow {
4826
+ margin: 0 0 0 1rem;
4827
+ }
4828
+
4829
+ .c4p--add-select cds--accordion--start cds--accordion__title {
4830
+ margin: 0 1rem 0 0.5rem;
4831
+ }
4832
+
4833
+ .c4p--add-select cds--accordion__item--active cds--accordion__content {
4834
+ padding-top: 0;
4835
+ padding-bottom: 0;
4836
+ margin-top: 0.5rem;
4837
+ }
4838
+
4765
4839
  .cds--tooltip,
4766
4840
  .cds--overflow-menu-options {
4767
4841
  z-index: 9000;
@@ -4908,6 +4982,10 @@ button.c4p--add-select__global-filter-toggle--open {
4908
4982
  --cds-helper-text-01-font-size: 0.75rem;
4909
4983
  --cds-helper-text-01-line-height: 1.33333;
4910
4984
  --cds-helper-text-01-letter-spacing: 0.32px;
4985
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
4986
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
4987
+ --cds-helper-text-02-line-height: 1.28572;
4988
+ --cds-helper-text-02-letter-spacing: 0.16px;
4911
4989
  --cds-body-short-01-font-size: 0.875rem;
4912
4990
  --cds-body-short-01-font-weight: 400;
4913
4991
  --cds-body-short-01-line-height: 1.28572;
@@ -5146,8 +5224,7 @@ button.c4p--add-select__global-filter-toggle--open {
5146
5224
  max-height: 38.5rem;
5147
5225
  background-color: var(--cds-background, #ffffff);
5148
5226
  color: var(--cds-text-primary, #161616);
5149
- transition: transform 110ms;
5150
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5227
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5151
5228
  }
5152
5229
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5153
5230
  position: sticky;
@@ -5221,8 +5298,7 @@ button.c4p--add-select__global-filter-toggle--open {
5221
5298
  background-color: var(--cds-background, #ffffff);
5222
5299
  cursor: pointer;
5223
5300
  text-align: left;
5224
- transition: background-color 240ms;
5225
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5301
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5226
5302
  }
5227
5303
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5228
5304
  margin-bottom: 0.25rem;
@@ -5335,8 +5411,7 @@ button.c4p--add-select__global-filter-toggle--open {
5335
5411
  margin: 0 auto;
5336
5412
  background-color: var(--cds-layer-02, #ffffff);
5337
5413
  content: "";
5338
- transition: background-color 240ms;
5339
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5414
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5340
5415
  }
5341
5416
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5342
5417
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7878,10 +7953,6 @@ button.c4p--add-select__global-filter-toggle--open {
7878
7953
  padding-right: 1rem;
7879
7954
  }
7880
7955
 
7881
- .c4p--remove-modal .cds--modal-close {
7882
- display: none;
7883
- }
7884
-
7885
7956
  .c4p--remove-modal__body {
7886
7957
  padding-right: 20%;
7887
7958
  margin-bottom: 1rem;
@@ -8684,6 +8755,10 @@ button.c4p--add-select__global-filter-toggle--open {
8684
8755
  --cds-helper-text-01-font-size: 0.75rem;
8685
8756
  --cds-helper-text-01-line-height: 1.33333;
8686
8757
  --cds-helper-text-01-letter-spacing: 0.32px;
8758
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8759
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8760
+ --cds-helper-text-02-line-height: 1.28572;
8761
+ --cds-helper-text-02-letter-spacing: 0.16px;
8687
8762
  --cds-body-short-01-font-size: 0.875rem;
8688
8763
  --cds-body-short-01-font-weight: 400;
8689
8764
  --cds-body-short-01-line-height: 1.28572;
@@ -9056,6 +9131,10 @@ button.c4p--add-select__global-filter-toggle--open {
9056
9131
  --cds-helper-text-01-font-size: 0.75rem;
9057
9132
  --cds-helper-text-01-line-height: 1.33333;
9058
9133
  --cds-helper-text-01-letter-spacing: 0.32px;
9134
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
9135
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
9136
+ --cds-helper-text-02-line-height: 1.28572;
9137
+ --cds-helper-text-02-letter-spacing: 0.16px;
9059
9138
  --cds-body-short-01-font-size: 0.875rem;
9060
9139
  --cds-body-short-01-font-weight: 400;
9061
9140
  --cds-body-short-01-line-height: 1.28572;
@@ -9817,7 +9896,9 @@ button.c4p--add-select__global-filter-toggle--open {
9817
9896
  display: inline-block;
9818
9897
  overflow: hidden;
9819
9898
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9820
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9899
+ max-width: calc(
9900
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9901
+ );
9821
9902
  min-height: var(--c4p--inline-edit--size);
9822
9903
  /* stylelint-disable-next-line carbon/layout-token-use */
9823
9904
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10308,6 +10389,11 @@ button.c4p--add-select__global-filter-toggle--open {
10308
10389
  align-items: center;
10309
10390
  color: var(--cds-text-primary, #161616);
10310
10391
  }
10392
+ .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 {
10393
+ position: sticky;
10394
+ z-index: 1;
10395
+ left: 0;
10396
+ }
10311
10397
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10312
10398
  align-items: center;
10313
10399
  padding-top: 0;
@@ -10324,6 +10410,11 @@ button.c4p--add-select__global-filter-toggle--open {
10324
10410
  align-items: center;
10325
10411
  padding-top: 0;
10326
10412
  }
10413
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10414
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10415
+ position: sticky;
10416
+ left: 0;
10417
+ }
10327
10418
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10328
10419
  display: flex;
10329
10420
  height: 100%;
@@ -10383,9 +10474,12 @@ button.c4p--add-select__global-filter-toggle--open {
10383
10474
  height: 100%;
10384
10475
  overflow-x: auto;
10385
10476
  }
10386
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10387
- overflow: hidden;
10477
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10478
+ display: flex;
10479
+ overflow: auto;
10388
10480
  max-height: 100%;
10481
+ flex-direction: column;
10482
+ background-color: var(--cds-layer-01, #f4f4f4);
10389
10483
  }
10390
10484
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10391
10485
  display: flex;
@@ -10416,6 +10510,12 @@ button.c4p--add-select__global-filter-toggle--open {
10416
10510
  text-overflow: ellipsis;
10417
10511
  white-space: nowrap;
10418
10512
  }
10513
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
10514
+ display: -webkit-box;
10515
+ -webkit-box-orient: vertical;
10516
+ -webkit-line-clamp: 2;
10517
+ white-space: initial;
10518
+ }
10419
10519
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
10420
10520
  display: flex;
10421
10521
  overflow: hidden;
@@ -10467,10 +10567,6 @@ button.c4p--add-select__global-filter-toggle--open {
10467
10567
  flex: 1 1 auto;
10468
10568
  }
10469
10569
 
10470
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10471
- border-bottom: none;
10472
- }
10473
-
10474
10570
  .c4p--datagrid__resizer {
10475
10571
  position: absolute;
10476
10572
  z-index: 1;
@@ -10510,6 +10606,12 @@ button.c4p--add-select__global-filter-toggle--open {
10510
10606
  .c4p--datagrid__head-hidden-select-all {
10511
10607
  padding-right: 2.5rem;
10512
10608
  }
10609
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10610
+ position: sticky;
10611
+ z-index: 1;
10612
+ left: 0;
10613
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10614
+ }
10513
10615
 
10514
10616
  .c4p--datagrid__simple-body {
10515
10617
  position: relative;
@@ -10533,15 +10635,6 @@ button.c4p--add-select__global-filter-toggle--open {
10533
10635
  min-width: 0 !important;
10534
10636
  }
10535
10637
 
10536
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10537
- width: 6px;
10538
- background-color: var(--cds-background, #ffffff);
10539
- }
10540
-
10541
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10542
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10543
- }
10544
-
10545
10638
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10546
10639
  overflow: auto;
10547
10640
  }
@@ -10689,10 +10782,21 @@ button.c4p--add-select__global-filter-toggle--open {
10689
10782
  margin: 0;
10690
10783
  }
10691
10784
 
10785
+ .c4p--datagrid .c4p--button-menu {
10786
+ height: 3rem;
10787
+ }
10788
+
10789
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10790
+ display: flex;
10791
+ width: 3rem;
10792
+ height: 3rem;
10793
+ justify-content: center;
10794
+ }
10795
+
10692
10796
  /*
10693
10797
  * Licensed Materials - Property of IBM
10694
10798
  * 5724-Q36
10695
- * (c) Copyright IBM Corp. 2020 - 2021
10799
+ * (c) Copyright IBM Corp. 2020 - 2022
10696
10800
  * US Government Users Restricted Rights - Use, duplication or disclosure
10697
10801
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10698
10802
  */
@@ -10703,6 +10807,18 @@ button.c4p--add-select__global-filter-toggle--open {
10703
10807
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10704
10808
  }
10705
10809
 
10810
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10811
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10812
+ }
10813
+
10814
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10815
+ transform: rotate(90deg);
10816
+ }
10817
+
10818
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10819
+ border-bottom: none;
10820
+ }
10821
+
10706
10822
  /*
10707
10823
  * Licensed Materials - Property of IBM
10708
10824
  * 5724-Q36
@@ -10831,14 +10947,36 @@ button.c4p--add-select__global-filter-toggle--open {
10831
10947
  /* stylelint-disable-next-line declaration-no-important */
10832
10948
  position: sticky !important;
10833
10949
  right: 0;
10834
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10950
+ display: flex;
10951
+ align-items: center;
10952
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10835
10953
  }
10836
10954
 
10837
10955
  .c4p--datagrid__right-sticky-column-header {
10838
10956
  /* stylelint-disable-next-line declaration-no-important */
10839
10957
  position: sticky !important;
10840
10958
  right: 0;
10841
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10959
+ }
10960
+
10961
+ .c4p--datagrid__left-sticky-column-cell {
10962
+ /* stylelint-disable-next-line declaration-no-important */
10963
+ position: sticky !important;
10964
+ left: 0;
10965
+ display: flex;
10966
+ align-items: center;
10967
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10968
+ }
10969
+
10970
+ .c4p--datagrid__left-sticky-column-header {
10971
+ /* stylelint-disable-next-line declaration-no-important */
10972
+ position: sticky !important;
10973
+ z-index: 1;
10974
+ left: 0;
10975
+ }
10976
+
10977
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10978
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10979
+ left: 2.5rem;
10842
10980
  }
10843
10981
 
10844
10982
  .c4p--datagrid__sticky-noShadow {
@@ -10854,6 +10992,12 @@ button.c4p--add-select__global-filter-toggle--open {
10854
10992
  right: 6px !important;
10855
10993
  }
10856
10994
 
10995
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10996
+ position: sticky;
10997
+ z-index: 1;
10998
+ left: 0;
10999
+ }
11000
+
10857
11001
  /*
10858
11002
  * Licensed Materials - Property of IBM
10859
11003
  * 5724-Q36
@@ -10876,6 +11020,18 @@ button.c4p--add-select__global-filter-toggle--open {
10876
11020
  margin-bottom: 0.5rem;
10877
11021
  }
10878
11022
 
11023
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11024
+ cursor: not-allowed;
11025
+ }
11026
+
11027
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11028
+ pointer-events: none;
11029
+ }
11030
+
11031
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11032
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11033
+ }
11034
+
10879
11035
  /*
10880
11036
  * Licensed Materials - Property of IBM
10881
11037
  * 5724-Q36
@@ -10887,21 +11043,30 @@ button.c4p--add-select__global-filter-toggle--open {
10887
11043
  position: inherit;
10888
11044
  display: flex;
10889
11045
  flex-flow: column;
10890
- /* stylelint-disable-next-line declaration-no-important */
10891
- padding-top: 0 !important;
11046
+ padding: 0;
11047
+ margin: 0;
11048
+ }
11049
+
11050
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11051
+ margin-bottom: 0;
10892
11052
  }
10893
11053
 
10894
- .c4p--datagrid__customize-columns-checkbox {
11054
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10895
11055
  display: flex;
10896
11056
  justify-content: center;
10897
- /* stylelint-disable-next-line declaration-no-important */
10898
- margin-bottom: 0 !important;
10899
11057
  }
10900
11058
 
10901
11059
  .c4p--datagrid__customize-columns-modal--actions {
10902
11060
  display: flex;
11061
+ height: 3rem;
10903
11062
  flex-flow: row;
10904
- margin-bottom: 1.5rem;
11063
+ background-color: var(--cds-field-02, #ffffff);
11064
+ }
11065
+
11066
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11067
+ height: 3rem;
11068
+ padding-left: 2.5rem;
11069
+ border-bottom: none;
10905
11070
  }
10906
11071
 
10907
11072
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -10909,6 +11074,7 @@ button.c4p--add-select__global-filter-toggle--open {
10909
11074
  }
10910
11075
 
10911
11076
  .c4p--datagrid__customize-columns-instructions {
11077
+ padding-left: 1rem;
10912
11078
  margin-bottom: 1.5rem;
10913
11079
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
10914
11080
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -10922,6 +11088,34 @@ button.c4p--add-select__global-filter-toggle--open {
10922
11088
  overflow: auto;
10923
11089
  }
10924
11090
 
11091
+ .c4p--datagrid__customize-columns-select-all {
11092
+ display: flex;
11093
+ height: 3rem;
11094
+ padding-left: 2.5rem;
11095
+ border-bottom: 1px solid var(--cds-layer-active);
11096
+ background-color: var(--cds-layer-01, #f4f4f4);
11097
+ }
11098
+
11099
+ .c4p--datagrid__customize-columns-select-all:hover {
11100
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
11101
+ }
11102
+
11103
+ .c4p--datagrid__customize-columns-select-all-selected {
11104
+ display: flex;
11105
+ height: 3rem;
11106
+ padding-left: 2.5rem;
11107
+ border-bottom: 1px solid var(--cds-layer-active);
11108
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
11109
+ }
11110
+
11111
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
11112
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11113
+ }
11114
+
11115
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11116
+ margin-bottom: 0;
11117
+ }
11118
+
10925
11119
  /*
10926
11120
  * Licensed Materials - Property of IBM
10927
11121
  * 5724-Q36
@@ -10930,7 +11124,6 @@ button.c4p--add-select__global-filter-toggle--open {
10930
11124
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10931
11125
  */
10932
11126
  .c4p--datagrid__row-size-dropdown {
10933
- position: absolute;
10934
11127
  padding: 1rem;
10935
11128
  background-color: var(--cds-background, #ffffff);
10936
11129
  box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
@@ -10941,6 +11134,11 @@ button.c4p--add-select__global-filter-toggle--open {
10941
11134
  box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10942
11135
  }
10943
11136
 
11137
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11138
+ /* stylelint-disable-next-line carbon/layout-token-use */
11139
+ left: -4px;
11140
+ }
11141
+
10944
11142
  /*
10945
11143
  * Licensed Materials - Property of IBM
10946
11144
  * 5724-Q36
@@ -10968,8 +11166,37 @@ th.c4p--datagrid__select-all-toggle-on.button {
10968
11166
  margin-left: 0.125rem;
10969
11167
  }
10970
11168
 
10971
- .c4p--datagrid__expanded-row-content {
10972
- padding: 1rem 1rem 1.5rem 4rem;
11169
+ /*
11170
+ * Licensed Materials - Property of IBM
11171
+ * 5724-Q36
11172
+ * (c) Copyright IBM Corp. 2022
11173
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11174
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11175
+ */
11176
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11177
+ position: relative;
11178
+ padding: 1rem 1rem 1.5rem 3rem;
11179
+ }
11180
+
11181
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11182
+ position: absolute;
11183
+ /* stylelint-disable-next-line carbon/layout-token-use */
11184
+ top: -1px;
11185
+ right: 0;
11186
+ width: calc(100% - 3rem);
11187
+ height: 1px;
11188
+ background-color: var(--cds-layer-accent);
11189
+ content: "";
11190
+ }
11191
+
11192
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11193
+ position: absolute;
11194
+ bottom: 0;
11195
+ left: 0;
11196
+ width: 100%;
11197
+ height: 1px;
11198
+ background-color: var(--cds-layer-accent);
11199
+ content: "";
10973
11200
  }
10974
11201
 
10975
11202
  /*
@@ -10996,14 +11223,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
10996
11223
 
10997
11224
  .c4p--datagrid__draggable-handleHolder {
10998
11225
  display: flex;
10999
- height: 2rem;
11000
- padding-left: 0.25rem;
11001
- margin-bottom: 0.5rem;
11002
- background: var(--cds-layer-02, #ffffff);
11226
+ height: 3rem;
11227
+ padding-left: 1rem;
11228
+ border-bottom: 1px solid var(--cds-layer-active);
11229
+ background-color: var(--cds-layer);
11230
+ }
11231
+
11232
+ .c4p--datagrid__draggable-handleHolder:hover {
11233
+ background-color: var(--cds-layer-hover);
11234
+ }
11235
+
11236
+ .c4p--datagrid__draggable-handleHolder-selected {
11237
+ display: flex;
11238
+ height: 3rem;
11239
+ padding-left: 1rem;
11240
+ border-bottom: 1px solid var(--cds-layer-active);
11241
+ background-color: var(--cds-layer-selected);
11242
+ }
11243
+
11244
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11245
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11003
11246
  }
11004
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11247
+
11248
+ .c4p--datagrid__draggable-handleHolder-isOver {
11005
11249
  border: 2px dashed var(--cds-focus, #0f62fe);
11006
- background-color: var(--cds-highlight, #d0e2ff);
11250
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11007
11251
  }
11008
11252
 
11009
11253
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -11011,7 +11255,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11011
11255
  width: 100%;
11012
11256
  }
11013
11257
 
11014
- .c4p--datagrid__draggable-handleHolder--grabbed {
11258
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11015
11259
  background-color: var(--cds-highlight, #d0e2ff);
11016
11260
  color: var(--cds-text-primary, #161616);
11017
11261
  }
@@ -11028,6 +11272,357 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11028
11272
  white-space: nowrap;
11029
11273
  }
11030
11274
 
11275
+ /*
11276
+ * Licensed Materials - Property of IBM
11277
+ * 5724-Q36
11278
+ * (c) Copyright IBM Corp. 2021
11279
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11280
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11281
+ */
11282
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11283
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11284
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11285
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11286
+ height: 1.5rem;
11287
+ }
11288
+
11289
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11290
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11291
+ height: calc(1.5rem - 0.25rem);
11292
+ }
11293
+
11294
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11295
+ max-height: none;
11296
+ }
11297
+
11298
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11299
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11300
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11301
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11302
+ height: 2rem;
11303
+ }
11304
+
11305
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11306
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11307
+ height: calc(2rem - 0.25rem);
11308
+ }
11309
+
11310
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11311
+ max-height: none;
11312
+ }
11313
+
11314
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11315
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11316
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11317
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11318
+ height: 2.5rem;
11319
+ }
11320
+
11321
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11322
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11323
+ height: calc(2.5rem - 0.25rem);
11324
+ }
11325
+
11326
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11327
+ max-height: none;
11328
+ }
11329
+
11330
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11331
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11332
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11333
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11334
+ height: 3rem;
11335
+ }
11336
+
11337
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11338
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11339
+ height: calc(3rem - 0.25rem);
11340
+ }
11341
+
11342
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11343
+ max-height: none;
11344
+ }
11345
+
11346
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11347
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11348
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11349
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11350
+ height: 4rem;
11351
+ }
11352
+
11353
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11354
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11355
+ height: calc(4rem - 0.25rem);
11356
+ }
11357
+
11358
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11359
+ max-height: none;
11360
+ }
11361
+
11362
+ .c4p--datagrid__inline-edit-cell {
11363
+ display: flex;
11364
+ height: 100%;
11365
+ align-items: center;
11366
+ }
11367
+
11368
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11369
+ display: flex;
11370
+ align-items: center;
11371
+ }
11372
+
11373
+ .c4p--datagrid__inline-edit--outer-cell-button {
11374
+ width: 100%;
11375
+ height: calc(100% + 2px);
11376
+ }
11377
+
11378
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11379
+ position: relative;
11380
+ display: flex;
11381
+ width: 100%;
11382
+ height: 100%;
11383
+ align-items: center;
11384
+ justify-content: space-between;
11385
+ padding-left: 1rem;
11386
+ color: var(--cds-text-secondary, #525252);
11387
+ cursor: pointer;
11388
+ outline: 0;
11389
+ }
11390
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11391
+ height: 1rem;
11392
+ padding-right: 1rem;
11393
+ }
11394
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11395
+ padding-left: 0;
11396
+ cursor: default;
11397
+ }
11398
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11399
+ height: 1rem;
11400
+ fill: var(--cds-icon-secondary, #525252);
11401
+ }
11402
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11403
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11404
+ }
11405
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11406
+ justify-content: flex-start;
11407
+ }
11408
+ .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) {
11409
+ /* stylelint-disable-next-line */
11410
+ }
11411
+ .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 {
11412
+ display: none;
11413
+ }
11414
+ .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 {
11415
+ display: block;
11416
+ }
11417
+
11418
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11419
+ background-color: var(--cds-layer-active);
11420
+ color: var(--cds-text-primary, #161616);
11421
+ }
11422
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11423
+ fill: var(--cds-icon-primary, #161616);
11424
+ }
11425
+
11426
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11427
+ background-color: var(--cds-layer-active);
11428
+ color: var(--cds-text-primary, #161616);
11429
+ cursor: text;
11430
+ }
11431
+
11432
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11433
+ /* stylelint-disable-next-line carbon/theme-token-use */
11434
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11435
+ outline-offset: calc(-1 * 0.125rem);
11436
+ }
11437
+ @media screen and (prefers-contrast) {
11438
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11439
+ outline-style: dotted;
11440
+ }
11441
+ }
11442
+
11443
+ .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) {
11444
+ color: var(--cds-button-disabled, #c6c6c6);
11445
+ cursor: not-allowed;
11446
+ }
11447
+
11448
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11449
+ overflow: hidden;
11450
+ padding-right: 1rem;
11451
+ text-overflow: ellipsis;
11452
+ white-space: nowrap;
11453
+ }
11454
+
11455
+ .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 {
11456
+ padding-right: 3rem;
11457
+ }
11458
+
11459
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11460
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11461
+ height: 3rem;
11462
+ }
11463
+
11464
+ .c4p--datagrid__inline-edit-button-icon {
11465
+ position: absolute;
11466
+ right: 1rem;
11467
+ }
11468
+
11469
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11470
+ position: relative;
11471
+ padding: 0;
11472
+ }
11473
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11474
+ padding-left: 1rem;
11475
+ }
11476
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11477
+ min-width: auto;
11478
+ padding-right: 1rem;
11479
+ }
11480
+
11481
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11482
+ padding-bottom: 1rem;
11483
+ padding-left: 1rem;
11484
+ }
11485
+
11486
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11487
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11488
+ width: inherit;
11489
+ }
11490
+
11491
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11492
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11493
+ width: 100%;
11494
+ height: 3rem;
11495
+ max-height: none;
11496
+ }
11497
+
11498
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11499
+ width: inherit;
11500
+ }
11501
+
11502
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11503
+ overflow: hidden;
11504
+ width: 100%;
11505
+ max-width: none;
11506
+ padding-right: 2rem;
11507
+ text-overflow: ellipsis;
11508
+ white-space: nowrap;
11509
+ }
11510
+
11511
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11512
+ border-top-color: var(--cds-layer-hover);
11513
+ background-color: var(--cds-layer-hover);
11514
+ }
11515
+
11516
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11517
+ position: absolute;
11518
+ z-index: 2;
11519
+ bottom: 0;
11520
+ left: 0;
11521
+ width: 2px;
11522
+ height: calc(100% - 50px);
11523
+ background-color: var(--cds-link-inverse, #78a9ff);
11524
+ content: "";
11525
+ }
11526
+
11527
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11528
+ position: absolute;
11529
+ z-index: 2;
11530
+ right: 0;
11531
+ bottom: 0;
11532
+ width: 2px;
11533
+ height: calc(100% - 50px);
11534
+ background-color: var(--cds-link-inverse, #78a9ff);
11535
+ content: "";
11536
+ }
11537
+
11538
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-grid-active thead::before {
11539
+ position: absolute;
11540
+ z-index: 2;
11541
+ top: 0;
11542
+ right: 0;
11543
+ left: 0;
11544
+ width: var(--c4p--datagrid--grid-width);
11545
+ height: 2px;
11546
+ background-color: var(--cds-link-inverse, #78a9ff);
11547
+ }
11548
+
11549
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11550
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11551
+ height: calc(100% - 2px);
11552
+ }
11553
+
11554
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11555
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11556
+ outline-offset: -2px;
11557
+ }
11558
+
11559
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11560
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11561
+ position: absolute;
11562
+ z-index: 3;
11563
+ top: calc(100% - 0.125rem);
11564
+ width: 100%;
11565
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11566
+ margin: 0;
11567
+ background-color: var(--cds-layer-01, #f4f4f4);
11568
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11569
+ outline-offset: calc(-1 * 0.125rem);
11570
+ }
11571
+
11572
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11573
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11574
+ }
11575
+
11576
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11577
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11578
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11579
+ z-index: 4;
11580
+ top: calc(100% + 0.75rem + 0.125rem);
11581
+ right: 0.5rem;
11582
+ }
11583
+
11584
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11585
+ top: calc(100% + 0.25rem + 0.125rem);
11586
+ }
11587
+
11588
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11589
+ position: absolute;
11590
+ top: 0;
11591
+ left: 0.125rem;
11592
+ width: calc(100% - (0.125rem * 2));
11593
+ height: 0.125rem;
11594
+ background-color: var(--cds-layer-01, #f4f4f4);
11595
+ content: "";
11596
+ }
11597
+
11598
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11599
+ position: absolute;
11600
+ top: 0.125rem;
11601
+ left: 0.5rem;
11602
+ width: calc(100% - (0.5rem * 2));
11603
+ height: 1px;
11604
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11605
+ content: "";
11606
+ }
11607
+
11608
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11609
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11610
+ }
11611
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11612
+ background-color: transparent;
11613
+ }
11614
+
11615
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11616
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11617
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11618
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11619
+ outline-color: var(--cds-support-error, #da1e28);
11620
+ }
11621
+
11622
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
11623
+ background-color: var(--cds-support-error, #da1e28);
11624
+ }
11625
+
11031
11626
  /*
11032
11627
  * Licensed Materials - Property of IBM
11033
11628
  * 5724-Q36
@@ -11035,6 +11630,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11035
11630
  * US Government Users Restricted Rights - Use, duplication or disclosure
11036
11631
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11037
11632
  */
11633
+ /* stylelint-disable max-nesting-depth */
11038
11634
  .c4p--datagrid__datagridWrap {
11039
11635
  display: block;
11040
11636
  width: 100%;
@@ -11042,6 +11638,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11042
11638
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11043
11639
  display: none;
11044
11640
  }
11641
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11642
+ left: 0.125rem;
11643
+ width: 112px;
11644
+ }
11045
11645
 
11046
11646
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11047
11647
  left: 0.125rem;
@@ -12767,6 +13367,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
12767
13367
  appearance: none;
12768
13368
  background: none;
12769
13369
  cursor: pointer;
13370
+ text-align: start;
12770
13371
  width: 100%;
12771
13372
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12772
13373
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -13162,7 +13763,7 @@ a.cds--side-nav__link--current::before {
13162
13763
  /* stylelint-disable-next-line function-no-unknown */
13163
13764
  z-index: 9000;
13164
13765
  align-items: flex-end;
13165
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13766
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13166
13767
  }
13167
13768
 
13168
13769
  @media (prefers-reduced-motion: reduce) {