@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (256) hide show
  1. package/css/index-full-carbon.css +946 -327
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -8
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +785 -168
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -8
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +720 -232
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -8
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +742 -244
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -8
  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 +22 -5
  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/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  32. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  33. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  34. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  35. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  36. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  37. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  38. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  39. package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
  40. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  41. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  43. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  44. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  45. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  46. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  50. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  51. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  61. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  62. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  63. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  64. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  70. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  71. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  72. package/es/components/Datagrid/index.js +3 -1
  73. package/es/components/Datagrid/useActionsColumn.js +28 -12
  74. package/es/components/Datagrid/useColumnOrder.js +8 -0
  75. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  76. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  77. package/es/components/Datagrid/useExpandedRow.js +0 -1
  78. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  79. package/es/components/Datagrid/useInlineEdit.js +71 -0
  80. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  81. package/es/components/Datagrid/useNestedRows.js +2 -2
  82. package/es/components/Datagrid/useRowExpander.js +1 -1
  83. package/es/components/Datagrid/useRowSize.js +17 -6
  84. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  85. package/es/components/Datagrid/useSelectRows.js +12 -2
  86. package/es/components/Datagrid/useSortableColumns.js +1 -1
  87. package/es/components/Datagrid/useStickyColumn.js +11 -0
  88. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  89. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  90. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  91. package/es/components/Datagrid/utils/getArgTypes.js +89 -0
  92. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  93. package/es/components/Datagrid/utils/makeData.js +46 -1
  94. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  95. package/es/components/EditUpdateCards/index.js +7 -0
  96. package/es/components/ExportModal/ExportModal.js +1 -1
  97. package/es/components/ImportModal/ImportModal.js +3 -3
  98. package/es/components/InlineEdit/InlineEdit.js +11 -9
  99. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  100. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  101. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  102. package/es/components/OptionsTile/OptionsTile.js +1 -1
  103. package/es/components/PageHeader/PageHeader.js +1 -1
  104. package/es/components/PageHeader/PageHeaderTitle.js +3 -1
  105. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  106. package/es/components/Saving/Saving.js +1 -1
  107. package/es/components/SidePanel/SidePanel.js +45 -52
  108. package/es/components/SidePanel/motion/variants.js +45 -0
  109. package/es/components/StatusIcon/StatusIcon.js +1 -1
  110. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  111. package/es/components/WebTerminal/WebTerminal.js +1 -1
  112. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  113. package/es/components/index.js +3 -2
  114. package/es/global/js/hooks/useClickOutside.js +1 -1
  115. package/es/global/js/package-settings.js +5 -4
  116. package/es/global/js/utils/getBezierValues.js +20 -0
  117. package/es/global/js/utils/motionConstants.js +45 -0
  118. package/es/global/js/utils/rangeWithCallback.js +13 -0
  119. package/es/global/js/utils/story-helper.js +5 -1
  120. package/es/global/js/utils/uuidv4.spec.js +4 -0
  121. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  122. package/lib/components/AddSelect/AddSelect.js +0 -4
  123. package/lib/components/AddSelect/AddSelectBody.js +22 -5
  124. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  125. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  126. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  127. package/lib/components/AddSelect/AddSelectList.js +62 -28
  128. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  129. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  130. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  131. package/lib/components/Card/Card.js +16 -6
  132. package/lib/components/Card/CardFooter.js +3 -1
  133. package/lib/components/Card/CardHeader.js +21 -1
  134. package/lib/components/ComboButton/ComboButton.js +3 -3
  135. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  136. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  137. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  138. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  139. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  140. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  141. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  142. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  143. package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
  144. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  145. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  146. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  147. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  148. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  149. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  150. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  151. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  152. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  153. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  154. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  155. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  156. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  157. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  158. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  159. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  160. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  161. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  162. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  163. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  164. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  165. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  166. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  167. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  168. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  169. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  170. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  171. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  172. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  173. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  174. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  175. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  176. package/lib/components/Datagrid/index.js +17 -1
  177. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  178. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  179. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  180. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  181. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  182. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  183. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  184. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  185. package/lib/components/Datagrid/useNestedRows.js +3 -3
  186. package/lib/components/Datagrid/useRowExpander.js +3 -3
  187. package/lib/components/Datagrid/useRowSize.js +18 -13
  188. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  189. package/lib/components/Datagrid/useSelectRows.js +12 -2
  190. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  191. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  192. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  193. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  194. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  195. package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
  196. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  197. package/lib/components/Datagrid/utils/makeData.js +47 -1
  198. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  199. package/lib/components/EditUpdateCards/index.js +13 -0
  200. package/lib/components/ExportModal/ExportModal.js +3 -3
  201. package/lib/components/ImportModal/ImportModal.js +4 -4
  202. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  203. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  204. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  205. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  206. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  207. package/lib/components/PageHeader/PageHeader.js +2 -2
  208. package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
  209. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  210. package/lib/components/Saving/Saving.js +5 -5
  211. package/lib/components/SidePanel/SidePanel.js +48 -53
  212. package/lib/components/SidePanel/motion/variants.js +55 -0
  213. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  214. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  215. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  216. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  217. package/lib/components/index.js +21 -1
  218. package/lib/global/js/hooks/useClickOutside.js +1 -1
  219. package/lib/global/js/package-settings.js +5 -4
  220. package/lib/global/js/utils/getBezierValues.js +29 -0
  221. package/lib/global/js/utils/motionConstants.js +55 -0
  222. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  223. package/lib/global/js/utils/story-helper.js +5 -1
  224. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  225. package/package.json +18 -16
  226. package/scss/components/AddSelect/_add-select.scss +129 -30
  227. package/scss/components/Card/_card.scss +1 -0
  228. package/scss/components/Cascade/_cascade.scss +1 -1
  229. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  230. package/scss/components/Datagrid/_datagrid.scss +7 -0
  231. package/scss/components/Datagrid/_storybook-styles.scss +12 -5
  232. package/scss/components/Datagrid/styles/_datagrid.scss +31 -15
  233. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  234. package/scss/components/Datagrid/styles/_index.scss +1 -0
  235. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  236. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  237. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  238. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  239. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  240. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  241. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  242. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  243. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  244. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  245. package/scss/components/EditUpdateCards/_index.scss +8 -0
  246. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  247. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  248. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  249. package/scss/components/PageHeader/_page-header.scss +4 -0
  250. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  251. package/scss/components/SidePanel/_side-panel.scss +3 -82
  252. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  253. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  254. package/scss/components/_index-released-only.scss +1 -0
  255. package/scss/components/_index-with-carbon.scss +1 -0
  256. package/scss/components/_index.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;
@@ -2925,26 +2925,6 @@
2925
2925
  margin-bottom: 0;
2926
2926
  }
2927
2927
 
2928
- @keyframes side-panel-exit-left {
2929
- 0% {
2930
- opacity: 1;
2931
- transform: translateX(0);
2932
- }
2933
- 100% {
2934
- opacity: 0;
2935
- transform: translateX(calc(-1 * 30rem));
2936
- }
2937
- }
2938
- @keyframes side-panel-exit-right {
2939
- 0% {
2940
- opacity: 1;
2941
- transform: translateX(0);
2942
- }
2943
- 100% {
2944
- opacity: 0;
2945
- transform: translateX(30rem);
2946
- }
2947
- }
2948
2928
  .c4p--side-panel__container {
2949
2929
  --c4p--side-panel--subtitle-opacity: 1;
2950
2930
  --c4p--side-panel--title-container-height: 0;
@@ -2964,8 +2944,6 @@
2964
2944
  box-sizing: border-box;
2965
2945
  background-color: var(--cds-layer-01, #f4f4f4);
2966
2946
  color: var(--cds-text-primary, #161616);
2967
- transition: transform 240ms;
2968
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2969
2947
  }
2970
2948
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2971
2949
  width: 16rem;
@@ -2979,37 +2957,13 @@
2979
2957
  max-width: 100%;
2980
2958
  }
2981
2959
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2982
- width: 16rem;
2983
- max-width: 100%;
2984
2960
  right: 0;
2985
2961
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2986
2962
  }
2987
- @keyframes side-panel-entrance-right {
2988
- 0% {
2989
- opacity: 0;
2990
- transform: translateX(16rem);
2991
- }
2992
- 100% {
2993
- opacity: 1;
2994
- transform: translateX(0);
2995
- }
2996
- }
2997
2963
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2998
- width: 16rem;
2999
- max-width: 100%;
3000
2964
  left: 0;
3001
2965
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3002
2966
  }
3003
- @keyframes side-panel-entrance-left {
3004
- 0% {
3005
- opacity: 0;
3006
- transform: translateX(-16rem);
3007
- }
3008
- 100% {
3009
- opacity: 1;
3010
- transform: translateX(0);
3011
- }
3012
- }
3013
2967
  .c4p--side-panel__container.c4p--side-panel__container--sm {
3014
2968
  width: 20rem;
3015
2969
  max-width: 100%;
@@ -3022,37 +2976,13 @@
3022
2976
  max-width: 100%;
3023
2977
  }
3024
2978
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
3025
- width: 20rem;
3026
- max-width: 100%;
3027
2979
  right: 0;
3028
2980
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3029
2981
  }
3030
- @keyframes side-panel-entrance-right {
3031
- 0% {
3032
- opacity: 0;
3033
- transform: translateX(20rem);
3034
- }
3035
- 100% {
3036
- opacity: 1;
3037
- transform: translateX(0);
3038
- }
3039
- }
3040
2982
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
3041
- width: 20rem;
3042
- max-width: 100%;
3043
2983
  left: 0;
3044
2984
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3045
2985
  }
3046
- @keyframes side-panel-entrance-left {
3047
- 0% {
3048
- opacity: 0;
3049
- transform: translateX(-20rem);
3050
- }
3051
- 100% {
3052
- opacity: 1;
3053
- transform: translateX(0);
3054
- }
3055
- }
3056
2986
  .c4p--side-panel__container.c4p--side-panel__container--md {
3057
2987
  width: 30rem;
3058
2988
  max-width: 100%;
@@ -3065,37 +2995,13 @@
3065
2995
  max-width: 100%;
3066
2996
  }
3067
2997
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
3068
- width: 30rem;
3069
- max-width: 100%;
3070
2998
  right: 0;
3071
2999
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3072
3000
  }
3073
- @keyframes side-panel-entrance-right {
3074
- 0% {
3075
- opacity: 0;
3076
- transform: translateX(30rem);
3077
- }
3078
- 100% {
3079
- opacity: 1;
3080
- transform: translateX(0);
3081
- }
3082
- }
3083
3001
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
3084
- width: 30rem;
3085
- max-width: 100%;
3086
3002
  left: 0;
3087
3003
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3088
3004
  }
3089
- @keyframes side-panel-entrance-left {
3090
- 0% {
3091
- opacity: 0;
3092
- transform: translateX(-30rem);
3093
- }
3094
- 100% {
3095
- opacity: 1;
3096
- transform: translateX(0);
3097
- }
3098
- }
3099
3005
  .c4p--side-panel__container.c4p--side-panel__container--lg {
3100
3006
  width: 40rem;
3101
3007
  max-width: 100%;
@@ -3108,37 +3014,13 @@
3108
3014
  max-width: 100%;
3109
3015
  }
3110
3016
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
3111
- width: 40rem;
3112
- max-width: 100%;
3113
3017
  right: 0;
3114
3018
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3115
3019
  }
3116
- @keyframes side-panel-entrance-right {
3117
- 0% {
3118
- opacity: 0;
3119
- transform: translateX(40rem);
3120
- }
3121
- 100% {
3122
- opacity: 1;
3123
- transform: translateX(0);
3124
- }
3125
- }
3126
3020
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
3127
- width: 40rem;
3128
- max-width: 100%;
3129
3021
  left: 0;
3130
3022
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3131
3023
  }
3132
- @keyframes side-panel-entrance-left {
3133
- 0% {
3134
- opacity: 0;
3135
- transform: translateX(-40rem);
3136
- }
3137
- 100% {
3138
- opacity: 1;
3139
- transform: translateX(0);
3140
- }
3141
- }
3142
3024
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
3143
3025
  width: 75%;
3144
3026
  max-width: 100%;
@@ -3151,37 +3033,13 @@
3151
3033
  max-width: 100%;
3152
3034
  }
3153
3035
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
3154
- width: 75%;
3155
- max-width: 100%;
3156
3036
  right: 0;
3157
3037
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3158
3038
  }
3159
- @keyframes side-panel-entrance-right {
3160
- 0% {
3161
- opacity: 0;
3162
- transform: translateX(75%);
3163
- }
3164
- 100% {
3165
- opacity: 1;
3166
- transform: translateX(0);
3167
- }
3168
- }
3169
3039
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
3170
- width: 75%;
3171
- max-width: 100%;
3172
3040
  left: 0;
3173
3041
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3174
3042
  }
3175
- @keyframes side-panel-entrance-left {
3176
- 0% {
3177
- opacity: 0;
3178
- transform: translateX(-75%);
3179
- }
3180
- 100% {
3181
- opacity: 1;
3182
- transform: translateX(0);
3183
- }
3184
- }
3185
3043
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
3186
3044
  /* stylelint-disable-next-line max-nesting-depth */
3187
3045
  }
@@ -3314,10 +3172,7 @@
3314
3172
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
3315
3173
  position: fixed;
3316
3174
  z-index: 2;
3317
- top: calc(
3318
- var(--c4p--side-panel--title-text-height) +
3319
- var(--c4p--side-panel--label-text-height) + 3rem
3320
- );
3175
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3321
3176
  background-color: var(--cds-layer-01, #f4f4f4);
3322
3177
  }
3323
3178
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -3332,7 +3187,6 @@
3332
3187
  }
3333
3188
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
3334
3189
  position: fixed;
3335
- top: 3rem;
3336
3190
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3337
3191
  }
3338
3192
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -3353,10 +3207,7 @@
3353
3207
  }
3354
3208
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
3355
3209
  position: fixed;
3356
- top: calc(
3357
- var(--c4p--side-panel--title-text-height) +
3358
- var(--c4p--side-panel--subtitle-container-height) + 3rem
3359
- );
3210
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
3360
3211
  width: 100%;
3361
3212
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
3362
3213
  }
@@ -3381,8 +3232,7 @@
3381
3232
  padding: 0 1rem;
3382
3233
  margin-bottom: 0.5rem;
3383
3234
  background-color: var(--cds-layer-01, #f4f4f4);
3384
- transition: transform 150ms;
3385
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3235
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3386
3236
  }
3387
3237
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3388
3238
  min-width: 2rem;
@@ -3513,8 +3363,6 @@
3513
3363
  width: 100%;
3514
3364
  height: 100%;
3515
3365
  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);
3518
3366
  }
3519
3367
 
3520
3368
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3661,7 +3509,7 @@
3661
3509
  /* stylelint-disable-next-line function-no-unknown */
3662
3510
  z-index: 9000;
3663
3511
  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);
3512
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3665
3513
  }
3666
3514
  @media (prefers-reduced-motion: reduce) {
3667
3515
  .c4p--tearsheet.is-visible {
@@ -4443,7 +4291,6 @@
4443
4291
 
4444
4292
  /* stylelint-disable max-nesting-depth */
4445
4293
  .c4p--add-select__selections.cds--structured-list {
4446
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4447
4294
  margin-bottom: 0;
4448
4295
  }
4449
4296
  .c4p--add-select__selections-wrapper {
@@ -4451,8 +4298,11 @@
4451
4298
  }
4452
4299
  .c4p--add-select__selections-cell-wrapper {
4453
4300
  display: flex;
4301
+ height: 3rem;
4454
4302
  align-items: center;
4455
4303
  justify-content: space-between;
4304
+ padding: 0 1rem;
4305
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4456
4306
  }
4457
4307
  .c4p--add-select__selections-cell-title {
4458
4308
  display: block;
@@ -4466,17 +4316,20 @@
4466
4316
  display: block;
4467
4317
  color: var(--cds-text-secondary, #525252);
4468
4318
  }
4319
+ .c4p--add-select__selections-cell {
4320
+ display: flex;
4321
+ flex-direction: column;
4322
+ justify-content: center;
4323
+ }
4469
4324
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4470
4325
  visibility: visible;
4471
4326
  }
4472
4327
  .c4p--add-select__selections-hidden-hover {
4473
4328
  visibility: hidden;
4474
4329
  }
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;
4330
+ .c4p--add-select__selections-row-selectedcds--structured-list-row {
4331
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4332
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4480
4333
  }
4481
4334
  .c4p--add-select__selections-checkbox {
4482
4335
  display: flex;
@@ -4484,7 +4337,7 @@
4484
4337
  }
4485
4338
  .c4p--add-select__selections-checkbox-label-wrapper {
4486
4339
  display: flex;
4487
- margin-left: 0.5rem;
4340
+ margin-left: 1rem;
4488
4341
  }
4489
4342
  .c4p--add-select__selections-checkbox-label-text {
4490
4343
  display: flex;
@@ -4502,6 +4355,13 @@
4502
4355
  .c4p--add-select__selections-cell-icon {
4503
4356
  margin-right: 0.5rem;
4504
4357
  }
4358
+ .c4p--add-select__selections-row {
4359
+ border-left: 0.125rem solid transparent;
4360
+ }
4361
+ .c4p--add-select__selections-row-meta-selected {
4362
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4363
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4364
+ }
4505
4365
 
4506
4366
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4507
4367
  color: var(--cds-interactive, #0f62fe);
@@ -4513,15 +4373,31 @@
4513
4373
  fill: currentColor;
4514
4374
  }
4515
4375
 
4376
+ .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) {
4377
+ border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
4378
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4379
+ }
4380
+
4516
4381
  .c4p--add-select__sub-header {
4517
4382
  display: flex;
4518
4383
  align-items: flex-end;
4519
4384
  justify-content: space-between;
4520
4385
  }
4386
+ .c4p--add-select__sub-header-multi {
4387
+ padding: 0 1rem;
4388
+ }
4389
+
4390
+ .c4p--add-select cds--structured-list-row {
4391
+ border-bottom: 0;
4392
+ }
4393
+
4394
+ .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) {
4395
+ border-bottom: 0;
4396
+ }
4521
4397
 
4522
4398
  .c4p--add-select__sidebar-header {
4523
4399
  display: flex;
4524
- padding: 1.5rem 1rem 0.5rem 1rem;
4400
+ padding: 2rem 1rem 0.5rem 1rem;
4525
4401
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4526
4402
  }
4527
4403
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4547,7 +4423,7 @@
4547
4423
  }
4548
4424
 
4549
4425
  .c4p--add-select__sidebar-body {
4550
- padding: 1rem;
4426
+ padding: 0 1rem;
4551
4427
  }
4552
4428
 
4553
4429
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4580,18 +4456,44 @@
4580
4456
  .c4p--add-select__columns {
4581
4457
  display: flex;
4582
4458
  flex-direction: row;
4459
+ flex-grow: 1;
4583
4460
  overflow-x: auto;
4584
4461
  }
4462
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4463
+ margin-left: 0.5rem;
4464
+ }
4465
+ .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
4466
+ border-left: 0;
4467
+ }
4468
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4469
+ padding: 0;
4470
+ }
4471
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4472
+ height: auto;
4473
+ padding: 0 0.5rem;
4474
+ }
4475
+ .c4p--add-select__columns .c4p--add-select__tag-container {
4476
+ padding: 0 0.5rem;
4477
+ margin-bottom: 0;
4478
+ }
4479
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4480
+ padding: 0;
4481
+ }
4482
+ .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
4483
+ border-top: 0;
4484
+ }
4585
4485
 
4586
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4587
- height: 0;
4588
- padding: 0 !important;
4486
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4487
+ padding: 0 1rem;
4488
+ }
4489
+
4490
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4491
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4589
4492
  }
4590
4493
 
4591
4494
  .c4p--add-select__column {
4592
4495
  overflow: auto;
4593
- max-width: 15rem;
4594
- flex: 1 0 15rem;
4496
+ flex: 0 0 20rem;
4595
4497
  padding: 1rem;
4596
4498
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4597
4499
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4690,13 +4592,6 @@ button.c4p--add-select__global-filter-toggle--open {
4690
4592
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4691
4593
  }
4692
4594
 
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
4595
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4701
4596
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4702
4597
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4709,8 +4604,7 @@ button.c4p--add-select__global-filter-toggle--open {
4709
4604
  }
4710
4605
 
4711
4606
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4712
- max-width: 29rem;
4713
- flex: 0 0 50%;
4607
+ flex-basis: 22.5rem;
4714
4608
  }
4715
4609
 
4716
4610
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4722,6 +4616,10 @@ button.c4p--add-select__global-filter-toggle--open {
4722
4616
  flex-direction: column;
4723
4617
  }
4724
4618
 
4619
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4620
+ max-width: 11.25rem;
4621
+ }
4622
+
4725
4623
  .c4p--add-select .c4p--add-select__items-label {
4726
4624
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4727
4625
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4762,8 +4660,35 @@ button.c4p--add-select__global-filter-toggle--open {
4762
4660
  padding-left: 0.5rem;
4763
4661
  }
4764
4662
 
4765
- .cds--tooltip,
4766
- .cds--overflow-menu-options {
4663
+ .c4p--add-select__multi .c4p--empty-state {
4664
+ max-width: 16rem;
4665
+ margin-top: 3rem;
4666
+ }
4667
+
4668
+ .c4p--add-select .cds--accordion__arrow {
4669
+ transform: rotate(0deg);
4670
+ }
4671
+
4672
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4673
+ transform: rotate(90deg);
4674
+ }
4675
+
4676
+ .c4p--add-select cds--accordion--start cds--accordion__arrow {
4677
+ margin: 0 0 0 1rem;
4678
+ }
4679
+
4680
+ .c4p--add-select cds--accordion--start cds--accordion__title {
4681
+ margin: 0 1rem 0 0.5rem;
4682
+ }
4683
+
4684
+ .c4p--add-select cds--accordion__item--active cds--accordion__content {
4685
+ padding-top: 0;
4686
+ padding-bottom: 0;
4687
+ margin-top: 0.5rem;
4688
+ }
4689
+
4690
+ .c4p--add-select .cds--tooltip,
4691
+ .c4p--add-select .cds--overflow-menu-options {
4767
4692
  z-index: 9000;
4768
4693
  }
4769
4694
 
@@ -5150,8 +5075,7 @@ button.c4p--add-select__global-filter-toggle--open {
5150
5075
  max-height: 38.5rem;
5151
5076
  background-color: var(--cds-background, #ffffff);
5152
5077
  color: var(--cds-text-primary, #161616);
5153
- transition: transform 110ms;
5154
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5078
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5155
5079
  }
5156
5080
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5157
5081
  position: sticky;
@@ -5225,8 +5149,7 @@ button.c4p--add-select__global-filter-toggle--open {
5225
5149
  background-color: var(--cds-background, #ffffff);
5226
5150
  cursor: pointer;
5227
5151
  text-align: left;
5228
- transition: background-color 240ms;
5229
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5152
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5230
5153
  }
5231
5154
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5232
5155
  margin-bottom: 0.25rem;
@@ -5339,8 +5262,7 @@ button.c4p--add-select__global-filter-toggle--open {
5339
5262
  margin: 0 auto;
5340
5263
  background-color: var(--cds-layer-02, #ffffff);
5341
5264
  content: "";
5342
- transition: background-color 240ms;
5343
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5265
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5344
5266
  }
5345
5267
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5346
5268
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7652,6 +7574,12 @@ button.c4p--add-select__global-filter-toggle--open {
7652
7574
  transform: translateY(-2px);
7653
7575
  vertical-align: middle;
7654
7576
  }
7577
+ .c4p--page-header .c4p--page-header__title-wrapper {
7578
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
7579
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
7580
+ line-height: var(--cds-productive-heading-04-line-height, 1.28572);
7581
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
7582
+ }
7655
7583
  .c4p--page-header .c4p--page-header__page-actions {
7656
7584
  flex: 0 0 100%;
7657
7585
  margin-top: 1rem;
@@ -7882,10 +7810,6 @@ button.c4p--add-select__global-filter-toggle--open {
7882
7810
  padding-right: 1rem;
7883
7811
  }
7884
7812
 
7885
- .c4p--remove-modal .cds--modal-close {
7886
- display: none;
7887
- }
7888
-
7889
7813
  .c4p--remove-modal__body {
7890
7814
  padding-right: 20%;
7891
7815
  margin-bottom: 1rem;
@@ -9829,7 +9753,9 @@ button.c4p--add-select__global-filter-toggle--open {
9829
9753
  display: inline-block;
9830
9754
  overflow: hidden;
9831
9755
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9832
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9756
+ max-width: calc(
9757
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9758
+ );
9833
9759
  min-height: var(--c4p--inline-edit--size);
9834
9760
  /* stylelint-disable-next-line carbon/layout-token-use */
9835
9761
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10320,6 +10246,11 @@ button.c4p--add-select__global-filter-toggle--open {
10320
10246
  align-items: center;
10321
10247
  color: var(--cds-text-primary, #161616);
10322
10248
  }
10249
+ .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 {
10250
+ position: sticky;
10251
+ z-index: 1;
10252
+ left: 0;
10253
+ }
10323
10254
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10324
10255
  align-items: center;
10325
10256
  padding-top: 0;
@@ -10336,6 +10267,11 @@ button.c4p--add-select__global-filter-toggle--open {
10336
10267
  align-items: center;
10337
10268
  padding-top: 0;
10338
10269
  }
10270
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10271
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10272
+ position: sticky;
10273
+ left: 0;
10274
+ }
10339
10275
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10340
10276
  display: flex;
10341
10277
  height: 100%;
@@ -10395,9 +10331,12 @@ button.c4p--add-select__global-filter-toggle--open {
10395
10331
  height: 100%;
10396
10332
  overflow-x: auto;
10397
10333
  }
10398
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10399
- overflow: hidden;
10334
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10335
+ display: flex;
10336
+ overflow: auto;
10400
10337
  max-height: 100%;
10338
+ flex-direction: column;
10339
+ background-color: var(--cds-layer-01, #f4f4f4);
10401
10340
  }
10402
10341
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10403
10342
  display: flex;
@@ -10485,10 +10424,6 @@ button.c4p--add-select__global-filter-toggle--open {
10485
10424
  flex: 1 1 auto;
10486
10425
  }
10487
10426
 
10488
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10489
- border-bottom: none;
10490
- }
10491
-
10492
10427
  .c4p--datagrid__resizer {
10493
10428
  position: absolute;
10494
10429
  z-index: 1;
@@ -10528,6 +10463,12 @@ button.c4p--add-select__global-filter-toggle--open {
10528
10463
  .c4p--datagrid__head-hidden-select-all {
10529
10464
  padding-right: 2.5rem;
10530
10465
  }
10466
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10467
+ position: sticky;
10468
+ z-index: 1;
10469
+ left: 0;
10470
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10471
+ }
10531
10472
 
10532
10473
  .c4p--datagrid__simple-body {
10533
10474
  position: relative;
@@ -10551,15 +10492,6 @@ button.c4p--add-select__global-filter-toggle--open {
10551
10492
  min-width: 0 !important;
10552
10493
  }
10553
10494
 
10554
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10555
- width: 6px;
10556
- background-color: var(--cds-background, #ffffff);
10557
- }
10558
-
10559
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10560
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10561
- }
10562
-
10563
10495
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10564
10496
  overflow: auto;
10565
10497
  }
@@ -10707,10 +10639,21 @@ button.c4p--add-select__global-filter-toggle--open {
10707
10639
  margin: 0;
10708
10640
  }
10709
10641
 
10642
+ .c4p--datagrid .c4p--button-menu {
10643
+ height: 3rem;
10644
+ }
10645
+
10646
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10647
+ display: flex;
10648
+ width: 3rem;
10649
+ height: 3rem;
10650
+ justify-content: center;
10651
+ }
10652
+
10710
10653
  /*
10711
10654
  * Licensed Materials - Property of IBM
10712
10655
  * 5724-Q36
10713
- * (c) Copyright IBM Corp. 2020 - 2021
10656
+ * (c) Copyright IBM Corp. 2020 - 2022
10714
10657
  * US Government Users Restricted Rights - Use, duplication or disclosure
10715
10658
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10716
10659
  */
@@ -10721,10 +10664,22 @@ button.c4p--add-select__global-filter-toggle--open {
10721
10664
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10722
10665
  }
10723
10666
 
10724
- /*
10725
- * Licensed Materials - Property of IBM
10726
- * 5724-Q36
10727
- * (c) Copyright IBM Corp. 2020
10667
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10668
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10669
+ }
10670
+
10671
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10672
+ transform: rotate(90deg);
10673
+ }
10674
+
10675
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10676
+ border-bottom: none;
10677
+ }
10678
+
10679
+ /*
10680
+ * Licensed Materials - Property of IBM
10681
+ * 5724-Q36
10682
+ * (c) Copyright IBM Corp. 2020
10728
10683
  * US Government Users Restricted Rights - Use, duplication or disclosure
10729
10684
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10730
10685
  */
@@ -10849,14 +10804,36 @@ button.c4p--add-select__global-filter-toggle--open {
10849
10804
  /* stylelint-disable-next-line declaration-no-important */
10850
10805
  position: sticky !important;
10851
10806
  right: 0;
10852
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10807
+ display: flex;
10808
+ align-items: center;
10809
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10853
10810
  }
10854
10811
 
10855
10812
  .c4p--datagrid__right-sticky-column-header {
10856
10813
  /* stylelint-disable-next-line declaration-no-important */
10857
10814
  position: sticky !important;
10858
10815
  right: 0;
10859
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10816
+ }
10817
+
10818
+ .c4p--datagrid__left-sticky-column-cell {
10819
+ /* stylelint-disable-next-line declaration-no-important */
10820
+ position: sticky !important;
10821
+ left: 0;
10822
+ display: flex;
10823
+ align-items: center;
10824
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10825
+ }
10826
+
10827
+ .c4p--datagrid__left-sticky-column-header {
10828
+ /* stylelint-disable-next-line declaration-no-important */
10829
+ position: sticky !important;
10830
+ z-index: 1;
10831
+ left: 0;
10832
+ }
10833
+
10834
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10835
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10836
+ left: 2.5rem;
10860
10837
  }
10861
10838
 
10862
10839
  .c4p--datagrid__sticky-noShadow {
@@ -10872,6 +10849,12 @@ button.c4p--add-select__global-filter-toggle--open {
10872
10849
  right: 6px !important;
10873
10850
  }
10874
10851
 
10852
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10853
+ position: sticky;
10854
+ z-index: 1;
10855
+ left: 0;
10856
+ }
10857
+
10875
10858
  /*
10876
10859
  * Licensed Materials - Property of IBM
10877
10860
  * 5724-Q36
@@ -10894,6 +10877,18 @@ button.c4p--add-select__global-filter-toggle--open {
10894
10877
  margin-bottom: 0.5rem;
10895
10878
  }
10896
10879
 
10880
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
10881
+ cursor: not-allowed;
10882
+ }
10883
+
10884
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
10885
+ pointer-events: none;
10886
+ }
10887
+
10888
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
10889
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
10890
+ }
10891
+
10897
10892
  /*
10898
10893
  * Licensed Materials - Property of IBM
10899
10894
  * 5724-Q36
@@ -10905,21 +10900,30 @@ button.c4p--add-select__global-filter-toggle--open {
10905
10900
  position: inherit;
10906
10901
  display: flex;
10907
10902
  flex-flow: column;
10908
- /* stylelint-disable-next-line declaration-no-important */
10909
- padding-top: 0 !important;
10903
+ padding: 0;
10904
+ margin: 0;
10910
10905
  }
10911
10906
 
10912
- .c4p--datagrid__customize-columns-checkbox {
10907
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10908
+ margin-bottom: 0;
10909
+ }
10910
+
10911
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10913
10912
  display: flex;
10914
10913
  justify-content: center;
10915
- /* stylelint-disable-next-line declaration-no-important */
10916
- margin-bottom: 0 !important;
10917
10914
  }
10918
10915
 
10919
10916
  .c4p--datagrid__customize-columns-modal--actions {
10920
10917
  display: flex;
10918
+ height: 3rem;
10921
10919
  flex-flow: row;
10922
- margin-bottom: 1.5rem;
10920
+ background-color: var(--cds-field-02, #ffffff);
10921
+ }
10922
+
10923
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
10924
+ height: 3rem;
10925
+ padding-left: 2.5rem;
10926
+ border-bottom: none;
10923
10927
  }
10924
10928
 
10925
10929
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -10927,6 +10931,7 @@ button.c4p--add-select__global-filter-toggle--open {
10927
10931
  }
10928
10932
 
10929
10933
  .c4p--datagrid__customize-columns-instructions {
10934
+ padding-left: 1rem;
10930
10935
  margin-bottom: 1.5rem;
10931
10936
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
10932
10937
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -10940,6 +10945,36 @@ button.c4p--add-select__global-filter-toggle--open {
10940
10945
  overflow: auto;
10941
10946
  }
10942
10947
 
10948
+ .c4p--datagrid__customize-columns-select-all {
10949
+ display: flex;
10950
+ height: 3rem;
10951
+ align-items: center;
10952
+ padding-left: 2.5rem;
10953
+ border-bottom: 1px solid var(--cds-layer-active);
10954
+ background-color: var(--cds-layer-01, #f4f4f4);
10955
+ }
10956
+
10957
+ .c4p--datagrid__customize-columns-select-all:hover {
10958
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
10959
+ }
10960
+
10961
+ .c4p--datagrid__customize-columns-select-all-selected {
10962
+ display: flex;
10963
+ height: 3rem;
10964
+ align-items: center;
10965
+ padding-left: 2.5rem;
10966
+ border-bottom: 1px solid var(--cds-layer-active);
10967
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
10968
+ }
10969
+
10970
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
10971
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
10972
+ }
10973
+
10974
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
10975
+ margin-bottom: 0;
10976
+ }
10977
+
10943
10978
  /*
10944
10979
  * Licensed Materials - Property of IBM
10945
10980
  * 5724-Q36
@@ -10948,7 +10983,6 @@ button.c4p--add-select__global-filter-toggle--open {
10948
10983
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10949
10984
  */
10950
10985
  .c4p--datagrid__row-size-dropdown {
10951
- position: absolute;
10952
10986
  padding: 1rem;
10953
10987
  background-color: var(--cds-background, #ffffff);
10954
10988
  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));
@@ -10959,6 +10993,11 @@ button.c4p--add-select__global-filter-toggle--open {
10959
10993
  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));
10960
10994
  }
10961
10995
 
10996
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
10997
+ /* stylelint-disable-next-line carbon/layout-token-use */
10998
+ left: -4px;
10999
+ }
11000
+
10962
11001
  /*
10963
11002
  * Licensed Materials - Property of IBM
10964
11003
  * 5724-Q36
@@ -10986,8 +11025,37 @@ th.c4p--datagrid__select-all-toggle-on.button {
10986
11025
  margin-left: 0.125rem;
10987
11026
  }
10988
11027
 
10989
- .c4p--datagrid__expanded-row-content {
10990
- padding: 1rem 1rem 1.5rem 4rem;
11028
+ /*
11029
+ * Licensed Materials - Property of IBM
11030
+ * 5724-Q36
11031
+ * (c) Copyright IBM Corp. 2022
11032
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11033
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11034
+ */
11035
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11036
+ position: relative;
11037
+ padding: 1rem 1rem 1.5rem 3rem;
11038
+ }
11039
+
11040
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11041
+ position: absolute;
11042
+ /* stylelint-disable-next-line carbon/layout-token-use */
11043
+ top: -1px;
11044
+ right: 0;
11045
+ width: calc(100% - 3rem);
11046
+ height: 1px;
11047
+ background-color: var(--cds-layer-accent);
11048
+ content: "";
11049
+ }
11050
+
11051
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11052
+ position: absolute;
11053
+ bottom: 0;
11054
+ left: 0;
11055
+ width: 100%;
11056
+ height: 1px;
11057
+ background-color: var(--cds-layer-accent);
11058
+ content: "";
10991
11059
  }
10992
11060
 
10993
11061
  /*
@@ -11014,14 +11082,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11014
11082
 
11015
11083
  .c4p--datagrid__draggable-handleHolder {
11016
11084
  display: flex;
11017
- height: 2rem;
11018
- padding-left: 0.25rem;
11019
- margin-bottom: 0.5rem;
11020
- background: var(--cds-layer-02, #ffffff);
11085
+ height: 3rem;
11086
+ padding-left: 1rem;
11087
+ border-bottom: 1px solid var(--cds-layer-active);
11088
+ background-color: var(--cds-layer);
11089
+ }
11090
+
11091
+ .c4p--datagrid__draggable-handleHolder:hover {
11092
+ background-color: var(--cds-layer-hover);
11093
+ }
11094
+
11095
+ .c4p--datagrid__draggable-handleHolder-selected {
11096
+ display: flex;
11097
+ height: 3rem;
11098
+ padding-left: 1rem;
11099
+ border-bottom: 1px solid var(--cds-layer-active);
11100
+ background-color: var(--cds-layer-selected);
11101
+ }
11102
+
11103
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11104
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11021
11105
  }
11022
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11106
+
11107
+ .c4p--datagrid__draggable-handleHolder-isOver {
11023
11108
  border: 2px dashed var(--cds-focus, #0f62fe);
11024
- background-color: var(--cds-highlight, #d0e2ff);
11109
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11025
11110
  }
11026
11111
 
11027
11112
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -11029,7 +11114,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11029
11114
  width: 100%;
11030
11115
  }
11031
11116
 
11032
- .c4p--datagrid__draggable-handleHolder--grabbed {
11117
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11033
11118
  background-color: var(--cds-highlight, #d0e2ff);
11034
11119
  color: var(--cds-text-primary, #161616);
11035
11120
  }
@@ -11046,6 +11131,365 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11046
11131
  white-space: nowrap;
11047
11132
  }
11048
11133
 
11134
+ /*
11135
+ * Licensed Materials - Property of IBM
11136
+ * 5724-Q36
11137
+ * (c) Copyright IBM Corp. 2021
11138
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11139
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11140
+ */
11141
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11142
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11143
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11144
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11145
+ height: 1.5rem;
11146
+ }
11147
+
11148
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11149
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11150
+ height: calc(1.5rem - 0.25rem);
11151
+ }
11152
+
11153
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11154
+ max-height: none;
11155
+ }
11156
+
11157
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11158
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11159
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11160
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11161
+ height: 2rem;
11162
+ }
11163
+
11164
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11165
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11166
+ height: calc(2rem - 0.25rem);
11167
+ }
11168
+
11169
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11170
+ max-height: none;
11171
+ }
11172
+
11173
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11174
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11175
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11176
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11177
+ height: 2.5rem;
11178
+ }
11179
+
11180
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11181
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11182
+ height: calc(2.5rem - 0.25rem);
11183
+ }
11184
+
11185
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11186
+ max-height: none;
11187
+ }
11188
+
11189
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11190
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11191
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11192
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11193
+ height: 3rem;
11194
+ }
11195
+
11196
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11197
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11198
+ height: calc(3rem - 0.25rem);
11199
+ }
11200
+
11201
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11202
+ max-height: none;
11203
+ }
11204
+
11205
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11206
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11207
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11208
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11209
+ height: 4rem;
11210
+ }
11211
+
11212
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11213
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11214
+ height: calc(4rem - 0.25rem);
11215
+ }
11216
+
11217
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11218
+ max-height: none;
11219
+ }
11220
+
11221
+ .c4p--datagrid {
11222
+ --c4p--datagrid--grid-header-height: 0;
11223
+ }
11224
+
11225
+ .c4p--datagrid__inline-edit-cell {
11226
+ display: flex;
11227
+ height: 100%;
11228
+ align-items: center;
11229
+ }
11230
+
11231
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11232
+ display: flex;
11233
+ align-items: center;
11234
+ }
11235
+
11236
+ .c4p--datagrid__inline-edit--outer-cell-button {
11237
+ width: 100%;
11238
+ height: calc(100% + 2px);
11239
+ }
11240
+
11241
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11242
+ position: relative;
11243
+ display: flex;
11244
+ width: 100%;
11245
+ height: 100%;
11246
+ align-items: center;
11247
+ justify-content: space-between;
11248
+ padding-left: 1rem;
11249
+ color: var(--cds-text-secondary, #525252);
11250
+ cursor: pointer;
11251
+ outline: 0;
11252
+ }
11253
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11254
+ height: 1rem;
11255
+ padding-right: 1rem;
11256
+ }
11257
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11258
+ padding-left: 0;
11259
+ cursor: default;
11260
+ }
11261
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11262
+ height: 1rem;
11263
+ fill: var(--cds-icon-secondary, #525252);
11264
+ }
11265
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11266
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11267
+ }
11268
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11269
+ justify-content: flex-start;
11270
+ }
11271
+ .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) {
11272
+ /* stylelint-disable-next-line */
11273
+ }
11274
+ .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 {
11275
+ display: none;
11276
+ }
11277
+ .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 {
11278
+ display: block;
11279
+ }
11280
+
11281
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11282
+ background-color: var(--cds-layer-active);
11283
+ color: var(--cds-text-primary, #161616);
11284
+ }
11285
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11286
+ fill: var(--cds-icon-primary, #161616);
11287
+ }
11288
+
11289
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11290
+ background-color: var(--cds-layer-active);
11291
+ color: var(--cds-text-primary, #161616);
11292
+ cursor: text;
11293
+ }
11294
+
11295
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11296
+ /* stylelint-disable-next-line carbon/theme-token-use */
11297
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11298
+ outline-offset: calc(-1 * 0.125rem);
11299
+ }
11300
+ @media screen and (prefers-contrast) {
11301
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11302
+ outline-style: dotted;
11303
+ }
11304
+ }
11305
+
11306
+ .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) {
11307
+ color: var(--cds-button-disabled, #c6c6c6);
11308
+ cursor: not-allowed;
11309
+ }
11310
+
11311
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11312
+ overflow: hidden;
11313
+ padding-right: 1rem;
11314
+ text-overflow: ellipsis;
11315
+ white-space: nowrap;
11316
+ }
11317
+
11318
+ .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 {
11319
+ padding-right: 3rem;
11320
+ }
11321
+
11322
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11323
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11324
+ height: 3rem;
11325
+ }
11326
+
11327
+ .c4p--datagrid__inline-edit-button-icon {
11328
+ position: absolute;
11329
+ right: 1rem;
11330
+ }
11331
+
11332
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11333
+ position: relative;
11334
+ padding: 0;
11335
+ }
11336
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11337
+ padding-left: 1rem;
11338
+ }
11339
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11340
+ min-width: auto;
11341
+ padding-right: 1rem;
11342
+ }
11343
+
11344
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11345
+ padding-bottom: 1rem;
11346
+ padding-left: 1rem;
11347
+ }
11348
+
11349
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11350
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11351
+ width: inherit;
11352
+ }
11353
+
11354
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11355
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11356
+ width: 100%;
11357
+ height: 3rem;
11358
+ max-height: none;
11359
+ }
11360
+
11361
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11362
+ width: inherit;
11363
+ }
11364
+
11365
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11366
+ overflow: hidden;
11367
+ width: 100%;
11368
+ max-width: none;
11369
+ padding-right: 2rem;
11370
+ text-overflow: ellipsis;
11371
+ white-space: nowrap;
11372
+ }
11373
+
11374
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11375
+ border-top-color: var(--cds-layer-hover);
11376
+ background-color: var(--cds-layer-hover);
11377
+ }
11378
+
11379
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11380
+ position: absolute;
11381
+ z-index: 2;
11382
+ bottom: 0;
11383
+ left: 0;
11384
+ width: 2px;
11385
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11386
+ background-color: var(--cds-link-inverse, #78a9ff);
11387
+ content: "";
11388
+ }
11389
+
11390
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11391
+ position: absolute;
11392
+ z-index: 2;
11393
+ right: 0;
11394
+ bottom: 0;
11395
+ width: 2px;
11396
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11397
+ background-color: var(--cds-link-inverse, #78a9ff);
11398
+ content: "";
11399
+ }
11400
+
11401
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
11402
+ position: absolute;
11403
+ z-index: 2;
11404
+ top: 0;
11405
+ right: 0;
11406
+ left: 0;
11407
+ width: var(--c4p--datagrid--grid-width);
11408
+ height: 2px;
11409
+ background-color: var(--cds-link-inverse, #78a9ff);
11410
+ }
11411
+
11412
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11413
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11414
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
11415
+ }
11416
+
11417
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11418
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11419
+ outline-offset: -2px;
11420
+ }
11421
+
11422
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11423
+ padding-top: 0.125rem;
11424
+ }
11425
+
11426
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11427
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11428
+ position: absolute;
11429
+ z-index: 3;
11430
+ top: calc(100% - 0.125rem);
11431
+ width: 100%;
11432
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11433
+ margin: 0;
11434
+ background-color: var(--cds-layer-01, #f4f4f4);
11435
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11436
+ outline-offset: calc(-1 * 0.125rem);
11437
+ }
11438
+
11439
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11440
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11441
+ }
11442
+
11443
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11444
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11445
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11446
+ z-index: 4;
11447
+ top: calc(100% + 0.75rem + 0.125rem);
11448
+ right: 0.5rem;
11449
+ }
11450
+
11451
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11452
+ top: calc(100% + 0.25rem + 0.125rem);
11453
+ }
11454
+
11455
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11456
+ position: absolute;
11457
+ top: 0;
11458
+ left: 0.125rem;
11459
+ width: calc(100% - (0.125rem * 2));
11460
+ height: 0.125rem;
11461
+ background-color: var(--cds-layer-01, #f4f4f4);
11462
+ content: "";
11463
+ }
11464
+
11465
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11466
+ position: absolute;
11467
+ top: 0.125rem;
11468
+ left: 0.5rem;
11469
+ width: calc(100% - (0.5rem * 2));
11470
+ height: 1px;
11471
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11472
+ content: "";
11473
+ }
11474
+
11475
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11476
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11477
+ }
11478
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11479
+ background-color: transparent;
11480
+ }
11481
+
11482
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11483
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11484
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11485
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11486
+ outline-color: var(--cds-support-error, #da1e28);
11487
+ }
11488
+
11489
+ .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 {
11490
+ background-color: var(--cds-support-error, #da1e28);
11491
+ }
11492
+
11049
11493
  /*
11050
11494
  * Licensed Materials - Property of IBM
11051
11495
  * 5724-Q36
@@ -11053,6 +11497,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11053
11497
  * US Government Users Restricted Rights - Use, duplication or disclosure
11054
11498
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11055
11499
  */
11500
+ /* stylelint-disable max-nesting-depth */
11056
11501
  .c4p--datagrid__datagridWrap {
11057
11502
  display: block;
11058
11503
  width: 100%;
@@ -11060,6 +11505,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11060
11505
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11061
11506
  display: none;
11062
11507
  }
11508
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11509
+ left: 0.125rem;
11510
+ width: 112px;
11511
+ }
11063
11512
 
11064
11513
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11065
11514
  left: 0.125rem;
@@ -13181,7 +13630,7 @@ a.cds--side-nav__link--current::before {
13181
13630
  /* stylelint-disable-next-line function-no-unknown */
13182
13631
  z-index: 9000;
13183
13632
  align-items: flex-end;
13184
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13633
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13185
13634
  }
13186
13635
 
13187
13636
  @media (prefers-reduced-motion: reduce) {
@@ -13599,4 +14048,43 @@ a.cds--side-nav__link--current::before {
13599
14048
  margin-bottom: 1rem;
13600
14049
  }
13601
14050
 
14051
+ /* stylelint-disable max-nesting-depth */
14052
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14053
+ /* Used id for overriding the SVG path fill */
14054
+ }
14055
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14056
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14057
+ background-color: #0050e6;
14058
+ }
14059
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14060
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14061
+ box-shadow: none;
14062
+ }
14063
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14064
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14065
+ fill: #ffffff;
14066
+ }
14067
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14068
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14069
+ background-color: transparent;
14070
+ }
14071
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14072
+ background-color: #0f62fe;
14073
+ color: #ffffff;
14074
+ }
14075
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14076
+ animation-duration: 700ms;
14077
+ animation-fill-mode: forwards;
14078
+ animation-iteration-count: infinite;
14079
+ animation-name: rotate;
14080
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14081
+ }
14082
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14083
+ background-color: transparent;
14084
+ }
14085
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14086
+ background-color: #0f62fe;
14087
+ color: #ffffff;
14088
+ }
14089
+
13602
14090
  /*# sourceMappingURL=index-without-carbon.css.map */