@carbon/ibm-products 2.0.0-rc.0 → 2.0.0-rc.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (332) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +1223 -325
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +792 -174
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +4 -8
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +1109 -419
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +1024 -274
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -8
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  20. package/es/components/ActionSet/ActionSet.js +7 -3
  21. package/es/components/AddSelect/AddSelect.js +6 -6
  22. package/es/components/AddSelect/AddSelectBody.js +72 -31
  23. package/es/components/AddSelect/AddSelectBreadcrumbs.js +12 -4
  24. package/es/components/AddSelect/AddSelectColumn.js +8 -8
  25. package/es/components/AddSelect/AddSelectFilter.js +10 -7
  26. package/es/components/AddSelect/AddSelectList.js +64 -29
  27. package/es/components/AddSelect/AddSelectMetaPanel.js +7 -1
  28. package/es/components/AddSelect/AddSelectSidebar.js +5 -2
  29. package/es/components/AddSelect/AddSelectSort.js +2 -2
  30. package/es/components/AddSelect/add-select-utils.js +9 -2
  31. package/es/components/AddSelect/hooks/useItemSort.js +6 -0
  32. package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
  33. package/es/components/AddSelect/hooks/usePath.js +15 -1
  34. package/es/components/AddSelect/index.js +1 -1
  35. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  36. package/es/components/Card/Card.js +16 -6
  37. package/es/components/Card/CardFooter.js +3 -1
  38. package/es/components/Card/CardHeader.js +20 -1
  39. package/es/components/ComboButton/ComboButton.js +1 -1
  40. package/es/components/CreateFullPage/CreateFullPage.js +4 -1
  41. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
  42. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  43. package/es/components/DataSpreadsheet/DataSpreadsheet.js +64 -11
  44. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  45. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  46. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  47. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +40 -0
  48. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  49. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  50. package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
  51. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  52. package/es/components/Datagrid/Datagrid/DatagridRow.js +53 -6
  53. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  54. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  55. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +142 -11
  56. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  57. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  58. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  60. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  61. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  62. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  63. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  64. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  65. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +537 -0
  66. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  67. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  68. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  69. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  70. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  71. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  72. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  73. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  74. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  75. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  76. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  77. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  78. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  79. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  80. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  81. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  82. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  83. package/es/components/Datagrid/index.js +3 -1
  84. package/es/components/Datagrid/useActionsColumn.js +53 -12
  85. package/es/components/Datagrid/useColumnOrder.js +8 -0
  86. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  87. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  88. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  89. package/es/components/Datagrid/useExpandedRow.js +0 -1
  90. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  91. package/es/components/Datagrid/useInlineEdit.js +71 -0
  92. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  93. package/es/components/Datagrid/useNestedRows.js +16 -4
  94. package/es/components/Datagrid/useRowExpander.js +12 -4
  95. package/es/components/Datagrid/useRowSize.js +17 -6
  96. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  97. package/es/components/Datagrid/useSelectRows.js +13 -3
  98. package/es/components/Datagrid/useSortableColumns.js +1 -1
  99. package/es/components/Datagrid/useStickyColumn.js +14 -0
  100. package/es/components/Datagrid/utils/DatagridActions.js +236 -0
  101. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  102. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  103. package/es/components/Datagrid/utils/getArgTypes.js +89 -0
  104. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  105. package/es/components/Datagrid/utils/makeData.js +47 -2
  106. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  107. package/es/components/EditUpdateCards/index.js +7 -0
  108. package/es/components/ExportModal/ExportModal.js +1 -1
  109. package/es/components/ImportModal/ImportModal.js +3 -3
  110. package/es/components/InlineEdit/InlineEdit.js +28 -426
  111. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  112. package/es/components/InlineEditV1/index.js +7 -0
  113. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  114. package/es/components/InlineEditV2/index.js +7 -0
  115. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  116. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  117. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  118. package/es/components/MultiAddSelect/index.js +6 -0
  119. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  120. package/es/components/OptionsTile/OptionsTile.js +29 -13
  121. package/es/components/PageHeader/PageHeader.js +4 -4
  122. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  123. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  124. package/es/components/RemoveModal/RemoveModal.js +20 -3
  125. package/es/components/Saving/Saving.js +1 -1
  126. package/es/components/SidePanel/SidePanel.js +45 -52
  127. package/es/components/SidePanel/motion/variants.js +45 -0
  128. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  129. package/es/components/SingleAddSelect/index.js +6 -0
  130. package/es/components/StatusIcon/StatusIcon.js +1 -1
  131. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  132. package/es/components/WebTerminal/WebTerminal.js +2 -2
  133. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  134. package/es/components/WebTerminal/hooks/index.js +6 -0
  135. package/es/components/WebTerminal/index.js +6 -0
  136. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  137. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  138. package/es/components/WebTerminal/preview-components/index.js +7 -0
  139. package/es/components/index.js +3 -2
  140. package/es/global/js/hooks/index.js +2 -1
  141. package/es/global/js/hooks/useClickOutside.js +1 -1
  142. package/es/global/js/hooks/useControllableState.js +83 -0
  143. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  144. package/es/global/js/package-settings.js +7 -4
  145. package/es/global/js/utils/getBezierValues.js +20 -0
  146. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  147. package/es/global/js/utils/motionConstants.js +45 -0
  148. package/es/global/js/utils/rangeWithCallback.js +13 -0
  149. package/es/global/js/utils/story-helper.js +5 -1
  150. package/es/global/js/utils/uuidv4.spec.js +4 -0
  151. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  152. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  153. package/lib/components/ActionSet/ActionSet.js +7 -3
  154. package/lib/components/AddSelect/AddSelect.js +5 -6
  155. package/lib/components/AddSelect/AddSelectBody.js +67 -30
  156. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  157. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  158. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  159. package/lib/components/AddSelect/AddSelectList.js +65 -30
  160. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  161. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  162. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  163. package/lib/components/AddSelect/add-select-utils.js +9 -2
  164. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  165. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  166. package/lib/components/AddSelect/hooks/usePath.js +9 -1
  167. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  168. package/lib/components/Card/Card.js +16 -6
  169. package/lib/components/Card/CardFooter.js +3 -1
  170. package/lib/components/Card/CardHeader.js +21 -1
  171. package/lib/components/ComboButton/ComboButton.js +3 -3
  172. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  173. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
  174. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  175. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +64 -10
  176. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  177. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  178. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  179. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +51 -0
  180. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  181. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  182. package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
  183. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  184. package/lib/components/Datagrid/Datagrid/DatagridRow.js +63 -6
  185. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  186. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  187. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +151 -9
  188. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  189. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  190. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  191. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  192. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  193. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  194. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  195. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  196. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  197. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +562 -0
  198. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  199. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  200. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  201. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  202. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  203. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  204. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  205. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  206. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  207. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  208. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  209. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  210. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  211. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  212. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  213. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  214. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  215. package/lib/components/Datagrid/index.js +17 -1
  216. package/lib/components/Datagrid/useActionsColumn.js +53 -13
  217. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  218. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  219. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  220. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  221. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  222. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  223. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  224. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  225. package/lib/components/Datagrid/useNestedRows.js +17 -4
  226. package/lib/components/Datagrid/useRowExpander.js +17 -5
  227. package/lib/components/Datagrid/useRowSize.js +18 -13
  228. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  229. package/lib/components/Datagrid/useSelectRows.js +13 -3
  230. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  231. package/lib/components/Datagrid/useStickyColumn.js +14 -0
  232. package/lib/components/Datagrid/utils/DatagridActions.js +260 -0
  233. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  234. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  235. package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
  236. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  237. package/lib/components/Datagrid/utils/makeData.js +48 -2
  238. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  239. package/lib/components/EditUpdateCards/index.js +13 -0
  240. package/lib/components/ExportModal/ExportModal.js +3 -3
  241. package/lib/components/ImportModal/ImportModal.js +4 -4
  242. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  243. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  244. package/lib/components/InlineEditV1/index.js +13 -0
  245. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  246. package/lib/components/InlineEditV2/index.js +13 -0
  247. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  248. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  249. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  250. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  251. package/lib/components/OptionsTile/OptionsTile.js +34 -17
  252. package/lib/components/PageHeader/PageHeader.js +5 -5
  253. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  254. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  255. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  256. package/lib/components/Saving/Saving.js +5 -5
  257. package/lib/components/SidePanel/SidePanel.js +48 -53
  258. package/lib/components/SidePanel/motion/variants.js +55 -0
  259. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  260. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  261. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  262. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  263. package/lib/components/WebTerminal/hooks/index.js +6 -0
  264. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  265. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  266. package/lib/components/index.js +21 -1
  267. package/lib/global/js/hooks/index.js +9 -1
  268. package/lib/global/js/hooks/useClickOutside.js +1 -1
  269. package/lib/global/js/hooks/useControllableState.js +94 -0
  270. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  271. package/lib/global/js/package-settings.js +7 -4
  272. package/lib/global/js/utils/getBezierValues.js +29 -0
  273. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  274. package/lib/global/js/utils/motionConstants.js +55 -0
  275. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  276. package/lib/global/js/utils/story-helper.js +5 -1
  277. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  278. package/package.json +18 -16
  279. package/scss/components/AboutModal/_about-modal.scss +2 -1
  280. package/scss/components/ActionSet/_action-set.scss +9 -4
  281. package/scss/components/AddSelect/_add-select.scss +132 -34
  282. package/scss/components/AddSelect/_index.scss +1 -1
  283. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  284. package/scss/components/Card/_card.scss +1 -0
  285. package/scss/components/Cascade/_cascade.scss +1 -1
  286. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  287. package/scss/components/Datagrid/_datagrid.scss +15 -0
  288. package/scss/components/Datagrid/_storybook-styles.scss +17 -5
  289. package/scss/components/Datagrid/styles/_datagrid.scss +129 -20
  290. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  291. package/scss/components/Datagrid/styles/_index.scss +1 -0
  292. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  293. package/scss/components/Datagrid/styles/_useExpandedRow.scss +57 -11
  294. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  295. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  296. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  297. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  298. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  299. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  300. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  301. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  302. package/scss/components/EditUpdateCards/_index.scss +8 -0
  303. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  304. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  305. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  306. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  307. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +5 -3
  308. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  309. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  310. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  311. package/scss/components/InlineEditV2/_index.scss +10 -0
  312. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  313. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  314. package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
  315. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  316. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  317. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  318. package/scss/components/SidePanel/_side-panel.scss +3 -82
  319. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  320. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  321. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  322. package/scss/components/SingleAddSelect/_index.scss +7 -0
  323. package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
  324. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  325. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  326. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  327. package/scss/components/WebTerminal/_index.scss +7 -0
  328. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  329. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  330. package/scss/components/_index-released-only.scss +2 -1
  331. package/scss/components/_index-with-carbon.scss +3 -1
  332. package/scss/components/_index.scss +3 -1
@@ -876,7 +876,7 @@
876
876
  }
877
877
 
878
878
  .c4p--about-modal.c4p--about-modal--with-tabs .cds--modal-content--overflow-indicator {
879
- bottom: calc(3rem +2.5rem);
879
+ bottom: calc(3rem + 2.5rem);
880
880
  }
881
881
 
882
882
  .c4p--about-modal .cds--modal-content--overflow-indicator {
@@ -962,14 +962,17 @@
962
962
  font-weight: var(--cds-body-short-01-font-weight, 400);
963
963
  line-height: var(--cds-body-short-01-line-height, 1.28572);
964
964
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
965
- height: 4rem;
966
965
  align-items: center;
966
+ margin: 0;
967
+ }
968
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
969
+ height: 4rem;
967
970
  padding-top: 1rem;
968
971
  padding-bottom: 2rem;
969
- margin: 0;
970
972
  }
971
973
 
972
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
974
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
975
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
973
976
  max-width: none;
974
977
  }
975
978
 
@@ -2532,7 +2535,7 @@
2532
2535
  @media (prefers-reduced-motion: no-preference) {
2533
2536
  .c4p--cascade__element,
2534
2537
  .c4p--cascade__col {
2535
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2538
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2536
2539
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2537
2540
  animation-fill-mode: forwards;
2538
2541
  opacity: 0;
@@ -2925,26 +2928,6 @@
2925
2928
  margin-bottom: 0;
2926
2929
  }
2927
2930
 
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
2931
  .c4p--side-panel__container {
2949
2932
  --c4p--side-panel--subtitle-opacity: 1;
2950
2933
  --c4p--side-panel--title-container-height: 0;
@@ -2964,8 +2947,6 @@
2964
2947
  box-sizing: border-box;
2965
2948
  background-color: var(--cds-layer-01, #f4f4f4);
2966
2949
  color: var(--cds-text-primary, #161616);
2967
- transition: transform 240ms;
2968
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2969
2950
  }
2970
2951
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2971
2952
  width: 16rem;
@@ -2979,37 +2960,13 @@
2979
2960
  max-width: 100%;
2980
2961
  }
2981
2962
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2982
- width: 16rem;
2983
- max-width: 100%;
2984
2963
  right: 0;
2985
2964
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2986
2965
  }
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
2966
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2998
- width: 16rem;
2999
- max-width: 100%;
3000
2967
  left: 0;
3001
2968
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3002
2969
  }
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
2970
  .c4p--side-panel__container.c4p--side-panel__container--sm {
3014
2971
  width: 20rem;
3015
2972
  max-width: 100%;
@@ -3022,37 +2979,13 @@
3022
2979
  max-width: 100%;
3023
2980
  }
3024
2981
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
3025
- width: 20rem;
3026
- max-width: 100%;
3027
2982
  right: 0;
3028
2983
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3029
2984
  }
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
2985
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
3041
- width: 20rem;
3042
- max-width: 100%;
3043
2986
  left: 0;
3044
2987
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3045
2988
  }
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
2989
  .c4p--side-panel__container.c4p--side-panel__container--md {
3057
2990
  width: 30rem;
3058
2991
  max-width: 100%;
@@ -3065,37 +2998,13 @@
3065
2998
  max-width: 100%;
3066
2999
  }
3067
3000
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
3068
- width: 30rem;
3069
- max-width: 100%;
3070
3001
  right: 0;
3071
3002
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3072
3003
  }
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
3004
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
3084
- width: 30rem;
3085
- max-width: 100%;
3086
3005
  left: 0;
3087
3006
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3088
3007
  }
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
3008
  .c4p--side-panel__container.c4p--side-panel__container--lg {
3100
3009
  width: 40rem;
3101
3010
  max-width: 100%;
@@ -3108,37 +3017,13 @@
3108
3017
  max-width: 100%;
3109
3018
  }
3110
3019
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
3111
- width: 40rem;
3112
- max-width: 100%;
3113
3020
  right: 0;
3114
3021
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3115
3022
  }
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
3023
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
3127
- width: 40rem;
3128
- max-width: 100%;
3129
3024
  left: 0;
3130
3025
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3131
3026
  }
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
3027
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
3143
3028
  width: 75%;
3144
3029
  max-width: 100%;
@@ -3151,37 +3036,13 @@
3151
3036
  max-width: 100%;
3152
3037
  }
3153
3038
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
3154
- width: 75%;
3155
- max-width: 100%;
3156
3039
  right: 0;
3157
3040
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3158
3041
  }
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
3042
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
3170
- width: 75%;
3171
- max-width: 100%;
3172
3043
  left: 0;
3173
3044
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3174
3045
  }
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
3046
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
3186
3047
  /* stylelint-disable-next-line max-nesting-depth */
3187
3048
  }
@@ -3314,10 +3175,7 @@
3314
3175
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
3315
3176
  position: fixed;
3316
3177
  z-index: 2;
3317
- top: calc(
3318
- var(--c4p--side-panel--title-text-height) +
3319
- var(--c4p--side-panel--label-text-height) + 3rem
3320
- );
3178
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3321
3179
  background-color: var(--cds-layer-01, #f4f4f4);
3322
3180
  }
3323
3181
  .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 +3190,6 @@
3332
3190
  }
3333
3191
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
3334
3192
  position: fixed;
3335
- top: 3rem;
3336
3193
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3337
3194
  }
3338
3195
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -3353,10 +3210,7 @@
3353
3210
  }
3354
3211
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
3355
3212
  position: fixed;
3356
- top: calc(
3357
- var(--c4p--side-panel--title-text-height) +
3358
- var(--c4p--side-panel--subtitle-container-height) + 3rem
3359
- );
3213
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
3360
3214
  width: 100%;
3361
3215
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
3362
3216
  }
@@ -3381,8 +3235,7 @@
3381
3235
  padding: 0 1rem;
3382
3236
  margin-bottom: 0.5rem;
3383
3237
  background-color: var(--cds-layer-01, #f4f4f4);
3384
- transition: transform 150ms;
3385
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3238
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3386
3239
  }
3387
3240
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3388
3241
  min-width: 2rem;
@@ -3513,8 +3366,6 @@
3513
3366
  width: 100%;
3514
3367
  height: 100%;
3515
3368
  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
3369
  }
3519
3370
 
3520
3371
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3661,7 +3512,7 @@
3661
3512
  /* stylelint-disable-next-line function-no-unknown */
3662
3513
  z-index: 9000;
3663
3514
  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);
3515
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3665
3516
  }
3666
3517
  @media (prefers-reduced-motion: reduce) {
3667
3518
  .c4p--tearsheet.is-visible {
@@ -4443,7 +4294,6 @@
4443
4294
 
4444
4295
  /* stylelint-disable max-nesting-depth */
4445
4296
  .c4p--add-select__selections.cds--structured-list {
4446
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4447
4297
  margin-bottom: 0;
4448
4298
  }
4449
4299
  .c4p--add-select__selections-wrapper {
@@ -4451,8 +4301,11 @@
4451
4301
  }
4452
4302
  .c4p--add-select__selections-cell-wrapper {
4453
4303
  display: flex;
4304
+ height: 3rem;
4454
4305
  align-items: center;
4455
4306
  justify-content: space-between;
4307
+ padding: 0 1rem;
4308
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4456
4309
  }
4457
4310
  .c4p--add-select__selections-cell-title {
4458
4311
  display: block;
@@ -4466,17 +4319,21 @@
4466
4319
  display: block;
4467
4320
  color: var(--cds-text-secondary, #525252);
4468
4321
  }
4469
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4322
+ .c4p--add-select__selections-cell {
4323
+ display: flex;
4324
+ flex-direction: column;
4325
+ justify-content: center;
4326
+ }
4327
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
4328
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
4470
4329
  visibility: visible;
4471
4330
  }
4472
4331
  .c4p--add-select__selections-hidden-hover {
4473
4332
  visibility: hidden;
4474
4333
  }
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;
4334
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
4335
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4336
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4480
4337
  }
4481
4338
  .c4p--add-select__selections-checkbox {
4482
4339
  display: flex;
@@ -4484,7 +4341,7 @@
4484
4341
  }
4485
4342
  .c4p--add-select__selections-checkbox-label-wrapper {
4486
4343
  display: flex;
4487
- margin-left: 0.5rem;
4344
+ margin-left: 1rem;
4488
4345
  }
4489
4346
  .c4p--add-select__selections-checkbox-label-text {
4490
4347
  display: flex;
@@ -4502,6 +4359,13 @@
4502
4359
  .c4p--add-select__selections-cell-icon {
4503
4360
  margin-right: 0.5rem;
4504
4361
  }
4362
+ .c4p--add-select__selections-row {
4363
+ border-left: 0.125rem solid transparent;
4364
+ }
4365
+ .c4p--add-select__selections-row-meta--selected {
4366
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4367
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4368
+ }
4505
4369
 
4506
4370
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4507
4371
  color: var(--cds-interactive, #0f62fe);
@@ -4518,10 +4382,21 @@
4518
4382
  align-items: flex-end;
4519
4383
  justify-content: space-between;
4520
4384
  }
4385
+ .c4p--add-select__sub-header-multi {
4386
+ padding: 0 1rem;
4387
+ }
4388
+
4389
+ .c4p--add-select .cds--structured-list-row {
4390
+ border-bottom: 0;
4391
+ }
4392
+
4393
+ .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) {
4394
+ border-bottom: 0;
4395
+ }
4521
4396
 
4522
4397
  .c4p--add-select__sidebar-header {
4523
4398
  display: flex;
4524
- padding: 1.5rem 1rem 0.5rem 1rem;
4399
+ padding: 2rem 1rem 0.5rem 1rem;
4525
4400
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4526
4401
  }
4527
4402
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4547,7 +4422,7 @@
4547
4422
  }
4548
4423
 
4549
4424
  .c4p--add-select__sidebar-body {
4550
- padding: 1rem;
4425
+ padding: 0 1rem;
4551
4426
  }
4552
4427
 
4553
4428
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4580,18 +4455,44 @@
4580
4455
  .c4p--add-select__columns {
4581
4456
  display: flex;
4582
4457
  flex-direction: row;
4458
+ flex-grow: 1;
4583
4459
  overflow-x: auto;
4584
4460
  }
4461
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4462
+ margin-left: 0.5rem;
4463
+ }
4464
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
4465
+ border-left: 0;
4466
+ }
4467
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4468
+ padding: 0;
4469
+ }
4470
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4471
+ height: auto;
4472
+ padding: 0 0.5rem;
4473
+ }
4474
+ .c4p--add-select__columns .c4p--add-select__tags {
4475
+ padding: 0 0.5rem;
4476
+ margin-bottom: 0;
4477
+ }
4478
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4479
+ padding: 0;
4480
+ }
4481
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
4482
+ border-top: 0;
4483
+ }
4585
4484
 
4586
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4587
- height: 0;
4588
- padding: 0 !important;
4485
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4486
+ padding: 0 1rem;
4487
+ }
4488
+
4489
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4490
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4589
4491
  }
4590
4492
 
4591
4493
  .c4p--add-select__column {
4592
4494
  overflow: auto;
4593
- max-width: 15rem;
4594
- flex: 1 0 15rem;
4495
+ flex: 0 0 20rem;
4595
4496
  padding: 1rem;
4596
4497
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4597
4498
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4609,13 +4510,13 @@
4609
4510
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4610
4511
  }
4611
4512
 
4612
- .c4p--add-select__tag-container {
4513
+ .c4p--add-select__tags {
4613
4514
  display: flex;
4614
4515
  align-items: center;
4615
4516
  margin-top: 1rem;
4616
4517
  margin-bottom: 0.5rem;
4617
4518
  }
4618
- .c4p--add-select__tag-container-label {
4519
+ .c4p--add-select__tags-label {
4619
4520
  margin-right: 0.5rem;
4620
4521
  }
4621
4522
 
@@ -4690,13 +4591,6 @@ button.c4p--add-select__global-filter-toggle--open {
4690
4591
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4691
4592
  }
4692
4593
 
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
4594
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4701
4595
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4702
4596
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4704,13 +4598,16 @@ button.c4p--add-select__global-filter-toggle--open {
4704
4598
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4705
4599
  }
4706
4600
 
4707
- .c4p--add-select__tag-container .cds--tag {
4601
+ .c4p--add-select__selections .cds--list-box__menu {
4602
+ left: auto;
4603
+ }
4604
+
4605
+ .c4p--add-select__tags .cds--tag {
4708
4606
  margin: 0;
4709
4607
  }
4710
4608
 
4711
4609
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4712
- max-width: 29rem;
4713
- flex: 0 0 50%;
4610
+ flex-basis: 22.5rem;
4714
4611
  }
4715
4612
 
4716
4613
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4722,6 +4619,10 @@ button.c4p--add-select__global-filter-toggle--open {
4722
4619
  flex-direction: column;
4723
4620
  }
4724
4621
 
4622
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4623
+ max-width: 11.25rem;
4624
+ }
4625
+
4725
4626
  .c4p--add-select .c4p--add-select__items-label {
4726
4627
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4727
4628
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4762,8 +4663,35 @@ button.c4p--add-select__global-filter-toggle--open {
4762
4663
  padding-left: 0.5rem;
4763
4664
  }
4764
4665
 
4765
- .cds--tooltip,
4766
- .cds--overflow-menu-options {
4666
+ .c4p--add-select__multi .c4p--empty-state {
4667
+ max-width: 16rem;
4668
+ margin-top: 3rem;
4669
+ }
4670
+
4671
+ .c4p--add-select .cds--accordion__arrow {
4672
+ transform: rotate(0deg);
4673
+ }
4674
+
4675
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4676
+ transform: rotate(90deg);
4677
+ }
4678
+
4679
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
4680
+ margin: 0 0 0 1rem;
4681
+ }
4682
+
4683
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
4684
+ margin: 0 1rem 0 0.5rem;
4685
+ }
4686
+
4687
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
4688
+ padding-top: 0;
4689
+ padding-bottom: 0;
4690
+ margin-top: 0.5rem;
4691
+ }
4692
+
4693
+ .c4p--add-select .cds--tooltip,
4694
+ .c4p--add-select .cds--overflow-menu-options {
4767
4695
  z-index: 9000;
4768
4696
  }
4769
4697
 
@@ -4908,6 +4836,10 @@ button.c4p--add-select__global-filter-toggle--open {
4908
4836
  --cds-helper-text-01-font-size: 0.75rem;
4909
4837
  --cds-helper-text-01-line-height: 1.33333;
4910
4838
  --cds-helper-text-01-letter-spacing: 0.32px;
4839
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
4840
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
4841
+ --cds-helper-text-02-line-height: 1.28572;
4842
+ --cds-helper-text-02-letter-spacing: 0.16px;
4911
4843
  --cds-body-short-01-font-size: 0.875rem;
4912
4844
  --cds-body-short-01-font-weight: 400;
4913
4845
  --cds-body-short-01-line-height: 1.28572;
@@ -5146,8 +5078,7 @@ button.c4p--add-select__global-filter-toggle--open {
5146
5078
  max-height: 38.5rem;
5147
5079
  background-color: var(--cds-background, #ffffff);
5148
5080
  color: var(--cds-text-primary, #161616);
5149
- transition: transform 110ms;
5150
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5081
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5151
5082
  }
5152
5083
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5153
5084
  position: sticky;
@@ -5221,8 +5152,7 @@ button.c4p--add-select__global-filter-toggle--open {
5221
5152
  background-color: var(--cds-background, #ffffff);
5222
5153
  cursor: pointer;
5223
5154
  text-align: left;
5224
- transition: background-color 240ms;
5225
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5155
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5226
5156
  }
5227
5157
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5228
5158
  margin-bottom: 0.25rem;
@@ -5335,8 +5265,7 @@ button.c4p--add-select__global-filter-toggle--open {
5335
5265
  margin: 0 auto;
5336
5266
  background-color: var(--cds-layer-02, #ffffff);
5337
5267
  content: "";
5338
- transition: background-color 240ms;
5339
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5268
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5340
5269
  }
5341
5270
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5342
5271
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7878,10 +7807,6 @@ button.c4p--add-select__global-filter-toggle--open {
7878
7807
  padding-right: 1rem;
7879
7808
  }
7880
7809
 
7881
- .c4p--remove-modal .cds--modal-close {
7882
- display: none;
7883
- }
7884
-
7885
7810
  .c4p--remove-modal__body {
7886
7811
  padding-right: 20%;
7887
7812
  margin-bottom: 1rem;
@@ -8684,6 +8609,10 @@ button.c4p--add-select__global-filter-toggle--open {
8684
8609
  --cds-helper-text-01-font-size: 0.75rem;
8685
8610
  --cds-helper-text-01-line-height: 1.33333;
8686
8611
  --cds-helper-text-01-letter-spacing: 0.32px;
8612
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8613
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8614
+ --cds-helper-text-02-line-height: 1.28572;
8615
+ --cds-helper-text-02-letter-spacing: 0.16px;
8687
8616
  --cds-body-short-01-font-size: 0.875rem;
8688
8617
  --cds-body-short-01-font-weight: 400;
8689
8618
  --cds-body-short-01-line-height: 1.28572;
@@ -9056,6 +8985,10 @@ button.c4p--add-select__global-filter-toggle--open {
9056
8985
  --cds-helper-text-01-font-size: 0.75rem;
9057
8986
  --cds-helper-text-01-line-height: 1.33333;
9058
8987
  --cds-helper-text-01-letter-spacing: 0.32px;
8988
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8989
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8990
+ --cds-helper-text-02-line-height: 1.28572;
8991
+ --cds-helper-text-02-letter-spacing: 0.16px;
9059
8992
  --cds-body-short-01-font-size: 0.875rem;
9060
8993
  --cds-body-short-01-font-weight: 400;
9061
8994
  --cds-body-short-01-line-height: 1.28572;
@@ -9795,7 +9728,7 @@ button.c4p--add-select__global-filter-toggle--open {
9795
9728
  .c4p--inline-edit.c4p--inline-edit--invalid {
9796
9729
  /* stylelint-disable-next-line carbon/theme-token-use */
9797
9730
  outline: 0.125rem solid var(--cds-support-error, #da1e28);
9798
- outline-offset: -0.125rem;
9731
+ outline-offset: calc(-1 * 0.125rem);
9799
9732
  }
9800
9733
  @media screen and (prefers-contrast) {
9801
9734
  .c4p--inline-edit.c4p--inline-edit--invalid {
@@ -9805,7 +9738,7 @@ button.c4p--add-select__global-filter-toggle--open {
9805
9738
  .c4p--inline-edit.c4p--inline-edit--editing {
9806
9739
  /* stylelint-disable-next-line carbon/theme-token-use */
9807
9740
  outline: 0.125rem solid var(--cds-focus, #0f62fe);
9808
- outline-offset: -0.125rem;
9741
+ outline-offset: calc(-1 * 0.125rem);
9809
9742
  background-color: var(--cds-layer-01, #f4f4f4);
9810
9743
  }
9811
9744
  @media screen and (prefers-contrast) {
@@ -9817,7 +9750,9 @@ button.c4p--add-select__global-filter-toggle--open {
9817
9750
  display: inline-block;
9818
9751
  overflow: hidden;
9819
9752
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9820
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9753
+ max-width: calc(
9754
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9755
+ );
9821
9756
  min-height: var(--c4p--inline-edit--size);
9822
9757
  /* stylelint-disable-next-line carbon/layout-token-use */
9823
9758
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10020,37 +9955,105 @@ button.c4p--add-select__global-filter-toggle--open {
10020
9955
  color: var(--cds-support-error, #da1e28);
10021
9956
  }
10022
9957
 
10023
- .c4p--data-spreadsheet {
10024
- --c4p--data-spreadsheet--total-width: 0;
10025
- display: inline-block;
10026
- border-spacing: 0;
10027
- /* stylelint-disable-next-line max-nesting-depth */
9958
+ .c4p--inline-edit-v2 {
9959
+ display: flex;
9960
+ align-items: center;
9961
+ background: transparent;
9962
+ cursor: pointer;
10028
9963
  }
10029
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10030
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
9964
+
9965
+ .c4p--inline-edit-v2-readonly {
9966
+ cursor: not-allowed;
10031
9967
  }
10032
- .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10033
- position: relative;
9968
+
9969
+ .c4p--inline-edit-v2:hover {
9970
+ background: var(--cds-field-01, #f4f4f4);
10034
9971
  }
10035
- .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10036
- border-bottom: 0;
9972
+
9973
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9974
+ visibility: visible;
10037
9975
  }
10038
- .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
10039
- .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10040
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
10041
- font-weight: var(--cds-body-short-01-font-weight, 400);
10042
- line-height: var(--cds-body-short-01-line-height, 1.28572);
10043
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10044
- width: 100%;
10045
- height: 100%;
10046
- padding: 0 0.5rem;
10047
- border: 0;
10048
- margin: 0;
10049
- color: var(--cds-text-primary, #161616);
10050
- font-family: inherit;
9976
+
9977
+ .c4p--inline-edit-v2__btn-edit {
9978
+ visibility: hidden;
10051
9979
  }
10052
- .c4p--data-spreadsheet .c4p--data-spreadsheet__body--td {
10053
- color: var(--cds-text-secondary, #525252);
9980
+
9981
+ .c4p--inline-edit-v2-focused {
9982
+ background: var(--cds-field-01, #f4f4f4);
9983
+ outline: 2px solid var(--cds-focus, #0f62fe);
9984
+ }
9985
+
9986
+ .c4p--inline-edit-v2__text-input {
9987
+ flex: 1;
9988
+ }
9989
+
9990
+ .c4p--inline-edit-v2__text-input-label {
9991
+ display: none;
9992
+ }
9993
+
9994
+ .c4p--inline-edit-v2__warning-icon {
9995
+ /* stylelint-disable-next-line carbon/layout-token-use */
9996
+ margin-right: 0.4375rem;
9997
+ color: var(--cds-support-error, #da1e28);
9998
+ }
9999
+
10000
+ .c4p--inline-edit-v2__warning-text {
10001
+ font-size: var(--cds-label-01-font-size, 0.75rem);
10002
+ font-weight: var(--cds-label-01-font-weight, 400);
10003
+ line-height: var(--cds-label-01-line-height, 1.33333);
10004
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
10005
+ margin-top: 0.5rem;
10006
+ color: var(--cds-support-error, #da1e28);
10007
+ }
10008
+
10009
+ .c4p--inline-edit-v2__text-input.cds--text-input {
10010
+ border: none;
10011
+ background: transparent;
10012
+ cursor: pointer;
10013
+ outline: none;
10014
+ }
10015
+
10016
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
10017
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
10018
+ cursor: not-allowed;
10019
+ }
10020
+
10021
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
10022
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
10023
+ outline: none;
10024
+ }
10025
+
10026
+ .c4p--data-spreadsheet {
10027
+ --c4p--data-spreadsheet--total-width: 0;
10028
+ display: inline-block;
10029
+ border-spacing: 0;
10030
+ /* stylelint-disable-next-line max-nesting-depth */
10031
+ }
10032
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10033
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
10034
+ }
10035
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10036
+ position: relative;
10037
+ }
10038
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10039
+ border-bottom: 0;
10040
+ }
10041
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
10042
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10043
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
10044
+ font-weight: var(--cds-body-short-01-font-weight, 400);
10045
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
10046
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10047
+ width: 100%;
10048
+ height: 100%;
10049
+ padding: 0 0.5rem;
10050
+ border: 0;
10051
+ margin: 0;
10052
+ color: var(--cds-text-primary, #161616);
10053
+ font-family: inherit;
10054
+ }
10055
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__body--td {
10056
+ color: var(--cds-text-secondary, #525252);
10054
10057
  }
10055
10058
  .c4p--data-spreadsheet [role="'columnheader'"]:last-child,
10056
10059
  .c4p--data-spreadsheet [role="'gridcell'"]:last-child {
@@ -10308,6 +10311,11 @@ button.c4p--add-select__global-filter-toggle--open {
10308
10311
  align-items: center;
10309
10312
  color: var(--cds-text-primary, #161616);
10310
10313
  }
10314
+ .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 {
10315
+ position: sticky;
10316
+ z-index: 1;
10317
+ left: 0;
10318
+ }
10311
10319
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10312
10320
  align-items: center;
10313
10321
  padding-top: 0;
@@ -10324,6 +10332,11 @@ button.c4p--add-select__global-filter-toggle--open {
10324
10332
  align-items: center;
10325
10333
  padding-top: 0;
10326
10334
  }
10335
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10336
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10337
+ position: sticky;
10338
+ left: 0;
10339
+ }
10327
10340
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10328
10341
  display: flex;
10329
10342
  height: 100%;
@@ -10383,9 +10396,12 @@ button.c4p--add-select__global-filter-toggle--open {
10383
10396
  height: 100%;
10384
10397
  overflow-x: auto;
10385
10398
  }
10386
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10387
- overflow: hidden;
10399
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10400
+ display: flex;
10401
+ overflow: auto;
10388
10402
  max-height: 100%;
10403
+ flex-direction: column;
10404
+ background-color: var(--cds-layer-01, #f4f4f4);
10389
10405
  }
10390
10406
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10391
10407
  display: flex;
@@ -10416,6 +10432,12 @@ button.c4p--add-select__global-filter-toggle--open {
10416
10432
  text-overflow: ellipsis;
10417
10433
  white-space: nowrap;
10418
10434
  }
10435
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
10436
+ display: -webkit-box;
10437
+ -webkit-box-orient: vertical;
10438
+ -webkit-line-clamp: 2;
10439
+ white-space: initial;
10440
+ }
10419
10441
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
10420
10442
  display: flex;
10421
10443
  overflow: hidden;
@@ -10467,10 +10489,6 @@ button.c4p--add-select__global-filter-toggle--open {
10467
10489
  flex: 1 1 auto;
10468
10490
  }
10469
10491
 
10470
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10471
- border-bottom: none;
10472
- }
10473
-
10474
10492
  .c4p--datagrid__resizer {
10475
10493
  position: absolute;
10476
10494
  z-index: 1;
@@ -10510,6 +10528,12 @@ button.c4p--add-select__global-filter-toggle--open {
10510
10528
  .c4p--datagrid__head-hidden-select-all {
10511
10529
  padding-right: 2.5rem;
10512
10530
  }
10531
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10532
+ position: sticky;
10533
+ z-index: 1;
10534
+ left: 0;
10535
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10536
+ }
10513
10537
 
10514
10538
  .c4p--datagrid__simple-body {
10515
10539
  position: relative;
@@ -10533,15 +10557,6 @@ button.c4p--add-select__global-filter-toggle--open {
10533
10557
  min-width: 0 !important;
10534
10558
  }
10535
10559
 
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
10560
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10546
10561
  overflow: auto;
10547
10562
  }
@@ -10603,8 +10618,22 @@ button.c4p--add-select__global-filter-toggle--open {
10603
10618
  max-height: 100%;
10604
10619
  }
10605
10620
 
10606
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
10607
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
10621
+ .c4p--datagrid__carbon-row-expanded {
10622
+ position: relative;
10623
+ }
10624
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
10625
+ position: absolute;
10626
+ z-index: 2;
10627
+ /* stylelint-disable-next-line carbon/layout-token-use */
10628
+ top: var(--c4p--datagrid--row-height);
10629
+ /* stylelint-disable-next-line carbon/layout-token-use */
10630
+ left: calc(
10631
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
10632
+ );
10633
+ width: 1px;
10634
+ height: var(--c4p--datagrid--indicator-height);
10635
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
10636
+ content: "";
10608
10637
  }
10609
10638
 
10610
10639
  .c4p--datagrid .cds--data-table-header {
@@ -10645,11 +10674,11 @@ button.c4p--add-select__global-filter-toggle--open {
10645
10674
  transform: translateY(-50%);
10646
10675
  }
10647
10676
 
10648
- .c4p--datagrid .cds--data-table--selected {
10677
+ .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row) {
10649
10678
  position: relative;
10650
10679
  }
10651
10680
 
10652
- .c4p--datagrid .cds--data-table--selected::before {
10681
+ .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
10653
10682
  position: absolute;
10654
10683
  left: 0;
10655
10684
  width: 0.25rem;
@@ -10658,10 +10687,84 @@ button.c4p--add-select__global-filter-toggle--open {
10658
10687
  content: "";
10659
10688
  }
10660
10689
 
10690
+ .c4p--datagrid__table-toolbar .cds--batch-summary__para {
10691
+ white-space: nowrap;
10692
+ }
10693
+
10694
+ .c4p--datagrid__table-toolbar .cds--batch-actions .cds--batch-actions--active {
10695
+ overflow-x: hidden;
10696
+ }
10697
+
10698
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu {
10699
+ display: flex;
10700
+ min-width: 2.5rem;
10701
+ justify-content: center;
10702
+ margin-right: 0.75rem;
10703
+ }
10704
+
10705
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu {
10706
+ min-width: calc(6rem + 0.5rem);
10707
+ }
10708
+
10709
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu .c4p--button-menu__trigger {
10710
+ display: flex;
10711
+ width: 100%;
10712
+ min-width: 3rem;
10713
+ justify-content: center;
10714
+ padding: 0;
10715
+ margin: 0;
10716
+ }
10717
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu .c4p--button-menu__trigger .cds--btn__icon {
10718
+ margin: 0;
10719
+ }
10720
+
10721
+ .c4p--datagrid .c4p--button-menu {
10722
+ height: 3rem;
10723
+ }
10724
+
10725
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10726
+ display: flex;
10727
+ width: 3rem;
10728
+ height: 3rem;
10729
+ justify-content: center;
10730
+ }
10731
+
10732
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10733
+ overflow: hidden;
10734
+ height: 100vh;
10735
+ }
10736
+
10737
+ .c4p--datagrid .cds--modal {
10738
+ width: 100%;
10739
+ }
10740
+
10741
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
10742
+ flex-shrink: 0;
10743
+ background-color: var(--cds-interactive, #0f62fe);
10744
+ }
10745
+
10746
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
10747
+ fill: var(--cds-background, #ffffff);
10748
+ }
10749
+
10750
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
10751
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
10752
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
10753
+ background-color: var(--cds-button-primary-hover, #0050e6);
10754
+ }
10755
+
10756
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
10757
+ background-color: transparent;
10758
+ }
10759
+
10760
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
10761
+ position: absolute;
10762
+ }
10763
+
10661
10764
  /*
10662
10765
  * Licensed Materials - Property of IBM
10663
10766
  * 5724-Q36
10664
- * (c) Copyright IBM Corp. 2020 - 2021
10767
+ * (c) Copyright IBM Corp. 2020 - 2022
10665
10768
  * US Government Users Restricted Rights - Use, duplication or disclosure
10666
10769
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10667
10770
  */
@@ -10672,6 +10775,33 @@ button.c4p--add-select__global-filter-toggle--open {
10672
10775
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10673
10776
  }
10674
10777
 
10778
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10779
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10780
+ }
10781
+
10782
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10783
+ transform: rotate(90deg);
10784
+ }
10785
+
10786
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10787
+ border-bottom: none;
10788
+ }
10789
+
10790
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
10791
+ position: relative;
10792
+ }
10793
+
10794
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
10795
+ position: absolute;
10796
+ /* stylelint-disable-next-line carbon/layout-token-use */
10797
+ top: -1px;
10798
+ left: 0;
10799
+ width: 100%;
10800
+ height: 1px;
10801
+ background-color: var(--cds-border-subtle);
10802
+ content: "";
10803
+ }
10804
+
10675
10805
  /*
10676
10806
  * Licensed Materials - Property of IBM
10677
10807
  * 5724-Q36
@@ -10772,229 +10902,735 @@ button.c4p--add-select__global-filter-toggle--open {
10772
10902
  padding-right: 0;
10773
10903
  }
10774
10904
 
10775
- /*
10776
- * Licensed Materials - Property of IBM
10777
- * 5724-Q36
10778
- * (c) Copyright IBM Corp. 2020
10779
- * US Government Users Restricted Rights - Use, duplication or disclosure
10780
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10781
- */
10782
- .c4p--datagrid__center-align-header {
10783
- width: 100%;
10784
- text-align: center;
10905
+ /*
10906
+ * Licensed Materials - Property of IBM
10907
+ * 5724-Q36
10908
+ * (c) Copyright IBM Corp. 2020
10909
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10910
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10911
+ */
10912
+ .c4p--datagrid__center-align-header {
10913
+ width: 100%;
10914
+ text-align: center;
10915
+ }
10916
+
10917
+ .c4p--datagrid__center-align-cell-renderer.sortDisabled {
10918
+ margin-right: auto;
10919
+ margin-left: auto;
10920
+ }
10921
+
10922
+ /*
10923
+ * Licensed Materials - Property of IBM
10924
+ * 5724-Q36
10925
+ * (c) Copyright IBM Corp. 2021
10926
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10927
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10928
+ */
10929
+ .c4p--datagrid__right-sticky-column-cell {
10930
+ /* stylelint-disable-next-line declaration-no-important */
10931
+ position: sticky !important;
10932
+ right: 0;
10933
+ display: flex;
10934
+ align-items: center;
10935
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10936
+ }
10937
+
10938
+ .c4p--datagrid__right-sticky-column-header {
10939
+ /* stylelint-disable-next-line declaration-no-important */
10940
+ position: sticky !important;
10941
+ right: 0;
10942
+ }
10943
+
10944
+ .c4p--datagrid__left-sticky-column-cell {
10945
+ /* stylelint-disable-next-line declaration-no-important */
10946
+ position: sticky !important;
10947
+ left: 0;
10948
+ display: flex;
10949
+ align-items: center;
10950
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10951
+ }
10952
+
10953
+ .c4p--datagrid__left-sticky-column-header {
10954
+ /* stylelint-disable-next-line declaration-no-important */
10955
+ position: sticky !important;
10956
+ z-index: 1;
10957
+ left: 0;
10958
+ }
10959
+
10960
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10961
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10962
+ left: 2.5rem;
10963
+ }
10964
+
10965
+ .c4p--datagrid__sticky-noShadow {
10966
+ box-shadow: none;
10967
+ }
10968
+
10969
+ .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
10970
+ box-shadow: none;
10971
+ }
10972
+
10973
+ .c4p--datagrid__right-sticky-column-offset-scroll {
10974
+ /* stylelint-disable-next-line */
10975
+ right: 6px !important;
10976
+ }
10977
+
10978
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10979
+ position: sticky;
10980
+ z-index: 1;
10981
+ left: 0;
10982
+ }
10983
+
10984
+ /*
10985
+ * Licensed Materials - Property of IBM
10986
+ * 5724-Q36
10987
+ * (c) Copyright IBM Corp. 2021
10988
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10989
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10990
+ */
10991
+ .c4p--datagrid__actions-column-cell {
10992
+ display: flex;
10993
+ flex-flow: column;
10994
+ justify-content: center;
10995
+ }
10996
+
10997
+ .c4p--datagrid__actions-column-content {
10998
+ display: flex;
10999
+ justify-content: center;
11000
+ }
11001
+
11002
+ .c4p--datagrid__actions-column-loading {
11003
+ margin-bottom: 0.5rem;
11004
+ }
11005
+
11006
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11007
+ cursor: not-allowed;
11008
+ }
11009
+
11010
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11011
+ pointer-events: none;
11012
+ }
11013
+
11014
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11015
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11016
+ }
11017
+
11018
+ /*
11019
+ * Licensed Materials - Property of IBM
11020
+ * 5724-Q36
11021
+ * (c) Copyright IBM Corp. 2021, 2022
11022
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11023
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11024
+ */
11025
+ .c4p--datagrid__customize-columns-modal .cds--modal-content {
11026
+ position: inherit;
11027
+ display: flex;
11028
+ flex-flow: column;
11029
+ padding: 0;
11030
+ margin: 0;
11031
+ }
11032
+
11033
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11034
+ margin-bottom: 0;
11035
+ }
11036
+
11037
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11038
+ display: flex;
11039
+ justify-content: center;
11040
+ }
11041
+
11042
+ .c4p--datagrid__customize-columns-modal--actions {
11043
+ display: flex;
11044
+ height: 3rem;
11045
+ flex-flow: row;
11046
+ background-color: var(--cds-field-02, #ffffff);
11047
+ }
11048
+
11049
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11050
+ height: 3rem;
11051
+ padding-left: 2.5rem;
11052
+ border-bottom: none;
11053
+ }
11054
+
11055
+ .c4p--datagrid__customize-columns-modal--actions > button {
11056
+ margin-left: 1rem;
11057
+ }
11058
+
11059
+ .c4p--datagrid__customize-columns-instructions {
11060
+ padding-left: 1rem;
11061
+ margin-bottom: 1.5rem;
11062
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
11063
+ font-weight: var(--cds-body-long-01-font-weight, 400);
11064
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
11065
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
11066
+ color: var(--cds-text-primary, #161616);
11067
+ }
11068
+
11069
+ .c4p--datagrid__customize-columns-column-list {
11070
+ position: relative;
11071
+ overflow: auto;
11072
+ }
11073
+
11074
+ .c4p--datagrid__customize-columns-select-all {
11075
+ display: flex;
11076
+ height: 3rem;
11077
+ align-items: center;
11078
+ padding-left: 2.5rem;
11079
+ border-bottom: 1px solid var(--cds-layer-active);
11080
+ background-color: var(--cds-layer-01, #f4f4f4);
11081
+ }
11082
+
11083
+ .c4p--datagrid__customize-columns-select-all:hover {
11084
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
11085
+ }
11086
+
11087
+ .c4p--datagrid__customize-columns-select-all-selected {
11088
+ display: flex;
11089
+ height: 3rem;
11090
+ align-items: center;
11091
+ padding-left: 2.5rem;
11092
+ border-bottom: 1px solid var(--cds-layer-active);
11093
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
11094
+ }
11095
+
11096
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
11097
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11098
+ }
11099
+
11100
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11101
+ margin-bottom: 0;
11102
+ }
11103
+
11104
+ /*
11105
+ * Licensed Materials - Property of IBM
11106
+ * 5724-Q36
11107
+ * (c) Copyright IBM Corp. 2021
11108
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11109
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11110
+ */
11111
+ .c4p--datagrid__row-size-dropdown {
11112
+ padding: 1rem;
11113
+ background-color: var(--cds-background, #ffffff);
11114
+ 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));
11115
+ }
11116
+
11117
+ .c4p--datagrid__row-size-button--open {
11118
+ background-color: var(--cds-background, #ffffff);
11119
+ 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));
11120
+ }
11121
+
11122
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11123
+ /* stylelint-disable-next-line carbon/layout-token-use */
11124
+ left: -4px;
11125
+ }
11126
+
11127
+ /*
11128
+ * Licensed Materials - Property of IBM
11129
+ * 5724-Q36
11130
+ * (c) Copyright IBM Corp. 2021
11131
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11132
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11133
+ */
11134
+ th.c4p--datagrid__select-all-toggle-on,
11135
+ td.c4p--datagrid__select-all-toggle-on {
11136
+ /* stylelint-disable-next-line declaration-no-important */
11137
+ width: 4.5rem !important;
11138
+ /* stylelint-disable-next-line declaration-no-important */
11139
+ min-width: initial !important;
11140
+ box-sizing: border-box;
11141
+ flex: 0 0 auto;
11142
+ }
11143
+
11144
+ th.c4p--datagrid__select-all-toggle-on {
11145
+ display: flex;
11146
+ align-items: center;
11147
+ justify-content: center;
11148
+ }
11149
+
11150
+ th.c4p--datagrid__select-all-toggle-on.button {
11151
+ margin-left: 0.125rem;
11152
+ }
11153
+
11154
+ /*
11155
+ * Licensed Materials - Property of IBM
11156
+ * 5724-Q36
11157
+ * (c) Copyright IBM Corp. 2022
11158
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11159
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11160
+ */
11161
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11162
+ position: relative;
11163
+ padding: 1rem 1rem 1.5rem 3rem;
11164
+ }
11165
+
11166
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11167
+ position: absolute;
11168
+ /* stylelint-disable-next-line carbon/layout-token-use */
11169
+ top: -1px;
11170
+ right: 0;
11171
+ width: calc(100% - 3rem);
11172
+ height: 1px;
11173
+ background-color: var(--cds-layer-accent);
11174
+ content: "";
11175
+ }
11176
+
11177
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11178
+ position: absolute;
11179
+ bottom: 0;
11180
+ left: 0;
11181
+ width: 100%;
11182
+ height: 1px;
11183
+ background-color: var(--cds-layer-accent);
11184
+ content: "";
11185
+ }
11186
+
11187
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
11188
+ padding: 0.5rem;
11189
+ padding-right: 0;
11190
+ }
11191
+
11192
+ .c4p--datagrid__row-expander.cds--btn {
11193
+ display: flex;
11194
+ width: 2rem;
11195
+ height: 2rem;
11196
+ min-height: 2rem;
11197
+ justify-content: center;
11198
+ padding: 0;
11199
+ }
11200
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
11201
+ fill: var(--cds-layer-selected-inverse, #161616);
11202
+ }
11203
+
11204
+ /*
11205
+ * Licensed Materials - Property of IBM
11206
+ * 5724-Q36
11207
+ * (c) Copyright IBM Corp. 2022
11208
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11209
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11210
+ */
11211
+ .c4p--datagrid__draggable-handleStyle {
11212
+ display: flex;
11213
+ align-items: center;
11214
+ margin-right: 0.5rem;
11215
+ cursor: grab;
11216
+ }
11217
+
11218
+ .c4p--datagrid__draggable-handleStyle.disabled {
11219
+ pointer-events: none;
11220
+ }
11221
+
11222
+ svg.c4p--datagrid__draggable-handleStyle.disable {
11223
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11224
+ }
11225
+
11226
+ .c4p--datagrid__draggable-handleHolder {
11227
+ display: flex;
11228
+ height: 3rem;
11229
+ padding-left: 1rem;
11230
+ border-bottom: 1px solid var(--cds-layer-active);
11231
+ background-color: var(--cds-layer);
11232
+ }
11233
+
11234
+ .c4p--datagrid__draggable-handleHolder:hover {
11235
+ background-color: var(--cds-layer-hover);
11236
+ }
11237
+
11238
+ .c4p--datagrid__draggable-handleHolder-selected {
11239
+ display: flex;
11240
+ height: 3rem;
11241
+ padding-left: 1rem;
11242
+ border-bottom: 1px solid var(--cds-layer-active);
11243
+ background-color: var(--cds-layer-selected);
11244
+ }
11245
+
11246
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11247
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11248
+ }
11249
+
11250
+ .c4p--datagrid__draggable-handleHolder-isOver {
11251
+ border: 2px dashed var(--cds-focus, #0f62fe);
11252
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11253
+ }
11254
+
11255
+ .c4p--datagrid__draggable-handleHolder-droppable {
11256
+ display: flex;
11257
+ width: 100%;
11258
+ }
11259
+
11260
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11261
+ background-color: var(--cds-highlight, #d0e2ff);
11262
+ color: var(--cds-text-primary, #161616);
11263
+ }
11264
+
11265
+ .c4p--datagrid__shared-ui--assistive-text {
11266
+ position: absolute;
11267
+ overflow: hidden;
11268
+ width: 0;
11269
+ height: 0;
11270
+ padding: 0;
11271
+ border: 0;
11272
+ clip: rect(0 0 0 0);
11273
+ text-transform: none;
11274
+ white-space: nowrap;
11275
+ }
11276
+
11277
+ /*
11278
+ * Licensed Materials - Property of IBM
11279
+ * 5724-Q36
11280
+ * (c) Copyright IBM Corp. 2021
11281
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11282
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11283
+ */
11284
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11285
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11286
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11287
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11288
+ height: 1.5rem;
11289
+ }
11290
+
11291
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11292
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11293
+ height: calc(1.5rem - 0.25rem);
11294
+ }
11295
+
11296
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11297
+ max-height: none;
11298
+ }
11299
+
11300
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11301
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11302
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11303
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11304
+ height: 2rem;
11305
+ }
11306
+
11307
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11308
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11309
+ height: calc(2rem - 0.25rem);
11310
+ }
11311
+
11312
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11313
+ max-height: none;
11314
+ }
11315
+
11316
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11317
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11318
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11319
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11320
+ height: 2.5rem;
11321
+ }
11322
+
11323
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11324
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11325
+ height: calc(2.5rem - 0.25rem);
11326
+ }
11327
+
11328
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11329
+ max-height: none;
11330
+ }
11331
+
11332
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11333
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11334
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11335
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11336
+ height: 3rem;
11337
+ }
11338
+
11339
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11340
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11341
+ height: calc(3rem - 0.25rem);
11342
+ }
11343
+
11344
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11345
+ max-height: none;
11346
+ }
11347
+
11348
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11349
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11350
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11351
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11352
+ height: 4rem;
11353
+ }
11354
+
11355
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11356
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11357
+ height: calc(4rem - 0.25rem);
11358
+ }
11359
+
11360
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11361
+ max-height: none;
11362
+ }
11363
+
11364
+ .c4p--datagrid {
11365
+ --c4p--datagrid--grid-header-height: 0;
11366
+ }
11367
+
11368
+ .c4p--datagrid__inline-edit-cell {
11369
+ display: flex;
11370
+ height: 100%;
11371
+ align-items: center;
11372
+ }
11373
+
11374
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11375
+ display: flex;
11376
+ align-items: center;
11377
+ }
11378
+
11379
+ .c4p--datagrid__inline-edit--outer-cell-button {
11380
+ width: 100%;
11381
+ height: calc(100% + 2px);
11382
+ }
11383
+
11384
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11385
+ position: relative;
11386
+ display: flex;
11387
+ width: 100%;
11388
+ height: 100%;
11389
+ align-items: center;
11390
+ justify-content: space-between;
11391
+ padding-left: 1rem;
11392
+ color: var(--cds-text-secondary, #525252);
11393
+ cursor: pointer;
11394
+ outline: 0;
11395
+ }
11396
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11397
+ height: 1rem;
11398
+ padding-right: 1rem;
11399
+ }
11400
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11401
+ padding-left: 0;
11402
+ cursor: default;
11403
+ }
11404
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11405
+ height: 1rem;
11406
+ fill: var(--cds-icon-secondary, #525252);
11407
+ }
11408
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11409
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11410
+ }
11411
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11412
+ justify-content: flex-start;
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) {
11415
+ /* stylelint-disable-next-line */
11416
+ }
11417
+ .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 {
11418
+ display: none;
11419
+ }
11420
+ .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 {
11421
+ display: block;
11422
+ }
11423
+
11424
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11425
+ background-color: var(--cds-layer-active);
11426
+ color: var(--cds-text-primary, #161616);
11427
+ }
11428
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11429
+ fill: var(--cds-icon-primary, #161616);
11430
+ }
11431
+
11432
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11433
+ background-color: var(--cds-layer-active);
11434
+ color: var(--cds-text-primary, #161616);
11435
+ cursor: text;
10785
11436
  }
10786
11437
 
10787
- .c4p--datagrid__center-align-cell-renderer.sortDisabled {
10788
- margin-right: auto;
10789
- margin-left: auto;
11438
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11439
+ /* stylelint-disable-next-line carbon/theme-token-use */
11440
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11441
+ outline-offset: calc(-1 * 0.125rem);
10790
11442
  }
10791
-
10792
- /*
10793
- * Licensed Materials - Property of IBM
10794
- * 5724-Q36
10795
- * (c) Copyright IBM Corp. 2021
10796
- * US Government Users Restricted Rights - Use, duplication or disclosure
10797
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10798
- */
10799
- .c4p--datagrid__right-sticky-column-cell {
10800
- /* stylelint-disable-next-line declaration-no-important */
10801
- position: sticky !important;
10802
- right: 0;
10803
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11443
+ @media screen and (prefers-contrast) {
11444
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11445
+ outline-style: dotted;
11446
+ }
10804
11447
  }
10805
11448
 
10806
- .c4p--datagrid__right-sticky-column-header {
10807
- /* stylelint-disable-next-line declaration-no-important */
10808
- position: sticky !important;
10809
- right: 0;
10810
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11449
+ .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) {
11450
+ color: var(--cds-button-disabled, #c6c6c6);
11451
+ cursor: not-allowed;
10811
11452
  }
10812
11453
 
10813
- .c4p--datagrid__sticky-noShadow {
10814
- box-shadow: none;
11454
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11455
+ overflow: hidden;
11456
+ padding-right: 1rem;
11457
+ text-overflow: ellipsis;
11458
+ white-space: nowrap;
10815
11459
  }
10816
11460
 
10817
- .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
10818
- box-shadow: none;
11461
+ .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 {
11462
+ padding-right: 3rem;
10819
11463
  }
10820
11464
 
10821
- .c4p--datagrid__right-sticky-column-offset-scroll {
10822
- /* stylelint-disable-next-line */
10823
- right: 6px !important;
11465
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11466
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11467
+ height: 3rem;
10824
11468
  }
10825
11469
 
10826
- /*
10827
- * Licensed Materials - Property of IBM
10828
- * 5724-Q36
10829
- * (c) Copyright IBM Corp. 2021
10830
- * US Government Users Restricted Rights - Use, duplication or disclosure
10831
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10832
- */
10833
- .c4p--datagrid__actions-column-cell {
10834
- display: flex;
10835
- flex-flow: column;
10836
- justify-content: center;
11470
+ .c4p--datagrid__inline-edit-button-icon {
11471
+ position: absolute;
11472
+ right: 1rem;
10837
11473
  }
10838
11474
 
10839
- .c4p--datagrid__actions-column-content {
10840
- display: flex;
10841
- justify-content: center;
11475
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11476
+ position: relative;
11477
+ padding: 0;
11478
+ }
11479
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11480
+ padding-left: 1rem;
11481
+ }
11482
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11483
+ min-width: auto;
11484
+ padding-right: 1rem;
10842
11485
  }
10843
11486
 
10844
- .c4p--datagrid__actions-column-loading {
10845
- margin-bottom: 0.5rem;
11487
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11488
+ padding-bottom: 1rem;
11489
+ padding-left: 1rem;
10846
11490
  }
10847
11491
 
10848
- /*
10849
- * Licensed Materials - Property of IBM
10850
- * 5724-Q36
10851
- * (c) Copyright IBM Corp. 2021, 2022
10852
- * US Government Users Restricted Rights - Use, duplication or disclosure
10853
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10854
- */
10855
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
10856
- position: inherit;
10857
- display: flex;
10858
- flex-flow: column;
10859
- /* stylelint-disable-next-line declaration-no-important */
10860
- padding-top: 0 !important;
11492
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11493
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11494
+ width: inherit;
10861
11495
  }
10862
11496
 
10863
- .c4p--datagrid__customize-columns-checkbox {
10864
- display: flex;
10865
- justify-content: center;
10866
- /* stylelint-disable-next-line declaration-no-important */
10867
- margin-bottom: 0 !important;
11497
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11498
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11499
+ width: 100%;
11500
+ height: 3rem;
11501
+ max-height: none;
10868
11502
  }
10869
11503
 
10870
- .c4p--datagrid__customize-columns-modal--actions {
10871
- display: flex;
10872
- flex-flow: row;
10873
- margin-bottom: 1.5rem;
11504
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11505
+ width: inherit;
10874
11506
  }
10875
11507
 
10876
- .c4p--datagrid__customize-columns-modal--actions > button {
10877
- margin-left: 1rem;
11508
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11509
+ overflow: hidden;
11510
+ width: 100%;
11511
+ max-width: none;
11512
+ padding-right: 2rem;
11513
+ text-overflow: ellipsis;
11514
+ white-space: nowrap;
10878
11515
  }
10879
11516
 
10880
- .c4p--datagrid__customize-columns-instructions {
10881
- margin-bottom: 1.5rem;
10882
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
10883
- font-weight: var(--cds-body-long-01-font-weight, 400);
10884
- line-height: var(--cds-body-long-01-line-height, 1.42857);
10885
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
10886
- color: var(--cds-text-primary, #161616);
11517
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11518
+ border-top-color: var(--cds-layer-hover);
11519
+ background-color: var(--cds-layer-hover);
10887
11520
  }
10888
11521
 
10889
- .c4p--datagrid__customize-columns-column-list {
10890
- position: relative;
10891
- overflow: auto;
11522
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11523
+ position: absolute;
11524
+ z-index: 2;
11525
+ bottom: 0;
11526
+ left: 0;
11527
+ width: 2px;
11528
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11529
+ background-color: var(--cds-link-inverse, #78a9ff);
11530
+ content: "";
10892
11531
  }
10893
11532
 
10894
- /*
10895
- * Licensed Materials - Property of IBM
10896
- * 5724-Q36
10897
- * (c) Copyright IBM Corp. 2021
10898
- * US Government Users Restricted Rights - Use, duplication or disclosure
10899
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10900
- */
10901
- .c4p--datagrid__row-size-dropdown {
11533
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
10902
11534
  position: absolute;
10903
- padding: 1rem;
10904
- background-color: var(--cds-background, #ffffff);
10905
- 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));
11535
+ z-index: 2;
11536
+ right: 0;
11537
+ bottom: 0;
11538
+ width: 2px;
11539
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11540
+ background-color: var(--cds-link-inverse, #78a9ff);
11541
+ content: "";
10906
11542
  }
10907
11543
 
10908
- .c4p--datagrid__row-size-button--open {
10909
- background-color: var(--cds-background, #ffffff);
10910
- 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));
11544
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
11545
+ position: absolute;
11546
+ z-index: 2;
11547
+ top: 0;
11548
+ right: 0;
11549
+ left: 0;
11550
+ width: var(--c4p--datagrid--grid-width);
11551
+ height: 2px;
11552
+ background-color: var(--cds-link-inverse, #78a9ff);
10911
11553
  }
10912
11554
 
10913
- /*
10914
- * Licensed Materials - Property of IBM
10915
- * 5724-Q36
10916
- * (c) Copyright IBM Corp. 2021
10917
- * US Government Users Restricted Rights - Use, duplication or disclosure
10918
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10919
- */
10920
- th.c4p--datagrid__select-all-toggle-on,
10921
- td.c4p--datagrid__select-all-toggle-on {
10922
- /* stylelint-disable-next-line declaration-no-important */
10923
- width: 4.5rem !important;
10924
- /* stylelint-disable-next-line declaration-no-important */
10925
- min-width: initial !important;
10926
- box-sizing: border-box;
10927
- flex: 0 0 auto;
11555
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11556
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11557
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
10928
11558
  }
10929
11559
 
10930
- th.c4p--datagrid__select-all-toggle-on {
10931
- display: flex;
10932
- align-items: center;
10933
- justify-content: center;
11560
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11561
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11562
+ outline-offset: -2px;
10934
11563
  }
10935
11564
 
10936
- th.c4p--datagrid__select-all-toggle-on.button {
10937
- margin-left: 0.125rem;
11565
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11566
+ padding-top: 0.125rem;
10938
11567
  }
10939
11568
 
10940
- .c4p--datagrid__expanded-row-content {
10941
- padding: 1rem 1rem 1.5rem 4rem;
11569
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11570
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11571
+ position: absolute;
11572
+ z-index: 3;
11573
+ top: calc(100% - 0.125rem);
11574
+ width: 100%;
11575
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11576
+ margin: 0;
11577
+ background-color: var(--cds-layer-01, #f4f4f4);
11578
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11579
+ outline-offset: calc(-1 * 0.125rem);
10942
11580
  }
10943
11581
 
10944
- /*
10945
- * Licensed Materials - Property of IBM
10946
- * 5724-Q36
10947
- * (c) Copyright IBM Corp. 2022
10948
- * US Government Users Restricted Rights - Use, duplication or disclosure
10949
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10950
- */
10951
- .c4p--datagrid__draggable-handleStyle {
10952
- display: flex;
10953
- align-items: center;
10954
- margin-right: 0.5rem;
10955
- cursor: grab;
11582
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11583
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
10956
11584
  }
10957
11585
 
10958
- .c4p--datagrid__draggable-handleStyle.disabled {
10959
- pointer-events: none;
11586
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11587
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11588
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11589
+ z-index: 4;
11590
+ top: calc(100% + 0.75rem + 0.125rem);
11591
+ right: 0.5rem;
10960
11592
  }
10961
11593
 
10962
- svg.c4p--datagrid__draggable-handleStyle.disable {
10963
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11594
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11595
+ top: calc(100% + 0.25rem + 0.125rem);
10964
11596
  }
10965
11597
 
10966
- .c4p--datagrid__draggable-handleHolder {
10967
- display: flex;
10968
- height: 2rem;
10969
- padding-left: 0.25rem;
10970
- margin-bottom: 0.5rem;
10971
- background: var(--cds-layer-02, #ffffff);
11598
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11599
+ position: absolute;
11600
+ top: 0;
11601
+ left: 0.125rem;
11602
+ width: calc(100% - (0.125rem * 2));
11603
+ height: 0.125rem;
11604
+ background-color: var(--cds-layer-01, #f4f4f4);
11605
+ content: "";
10972
11606
  }
10973
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
10974
- border: 2px dashed var(--cds-focus, #0f62fe);
10975
- background-color: var(--cds-highlight, #d0e2ff);
11607
+
11608
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11609
+ position: absolute;
11610
+ top: 0.125rem;
11611
+ left: 0.5rem;
11612
+ width: calc(100% - (0.5rem * 2));
11613
+ height: 1px;
11614
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11615
+ content: "";
10976
11616
  }
10977
11617
 
10978
- .c4p--datagrid__draggable-handleHolder-droppable {
10979
- display: flex;
10980
- width: 100%;
11618
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11619
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11620
+ }
11621
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11622
+ background-color: transparent;
10981
11623
  }
10982
11624
 
10983
- .c4p--datagrid__draggable-handleHolder--grabbed {
10984
- background-color: var(--cds-highlight, #d0e2ff);
10985
- color: var(--cds-text-primary, #161616);
11625
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11626
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11627
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11628
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11629
+ outline-color: var(--cds-support-error, #da1e28);
10986
11630
  }
10987
11631
 
10988
- .c4p--datagrid__shared-ui--assistive-text {
10989
- position: absolute;
10990
- overflow: hidden;
10991
- width: 0;
10992
- height: 0;
10993
- padding: 0;
10994
- border: 0;
10995
- clip: rect(0 0 0 0);
10996
- text-transform: none;
10997
- white-space: nowrap;
11632
+ .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 {
11633
+ background-color: var(--cds-support-error, #da1e28);
10998
11634
  }
10999
11635
 
11000
11636
  /*
@@ -11004,6 +11640,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11004
11640
  * US Government Users Restricted Rights - Use, duplication or disclosure
11005
11641
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11006
11642
  */
11643
+ /* stylelint-disable max-nesting-depth */
11007
11644
  .c4p--datagrid__datagridWrap {
11008
11645
  display: block;
11009
11646
  width: 100%;
@@ -11011,6 +11648,15 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11011
11648
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11012
11649
  display: none;
11013
11650
  }
11651
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11652
+ left: 0.125rem;
11653
+ width: 112px;
11654
+ }
11655
+
11656
+ .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11657
+ left: 0.125rem;
11658
+ width: 112px;
11659
+ }
11014
11660
 
11015
11661
  .c4p--datagrid__datagridWrap-simple {
11016
11662
  display: flex;
@@ -12731,6 +13377,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
12731
13377
  appearance: none;
12732
13378
  background: none;
12733
13379
  cursor: pointer;
13380
+ text-align: start;
12734
13381
  width: 100%;
12735
13382
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12736
13383
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -13058,14 +13705,18 @@ a.cds--side-nav__link--current::before {
13058
13705
  font-weight: var(--cds-body-short-01-font-weight, 400);
13059
13706
  line-height: var(--cds-body-short-01-line-height, 1.28572);
13060
13707
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13061
- height: 4rem;
13062
13708
  align-items: center;
13709
+ margin: 0;
13710
+ }
13711
+
13712
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
13713
+ height: 4rem;
13063
13714
  padding-top: 1rem;
13064
13715
  padding-bottom: 2rem;
13065
- margin: 0;
13066
13716
  }
13067
13717
 
13068
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
13718
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
13719
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
13069
13720
  max-width: none;
13070
13721
  }
13071
13722
 
@@ -13126,7 +13777,7 @@ a.cds--side-nav__link--current::before {
13126
13777
  /* stylelint-disable-next-line function-no-unknown */
13127
13778
  z-index: 9000;
13128
13779
  align-items: flex-end;
13129
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13780
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13130
13781
  }
13131
13782
 
13132
13783
  @media (prefers-reduced-motion: reduce) {
@@ -13544,4 +14195,43 @@ a.cds--side-nav__link--current::before {
13544
14195
  margin-bottom: 1rem;
13545
14196
  }
13546
14197
 
14198
+ /* stylelint-disable max-nesting-depth */
14199
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14200
+ /* Used id for overriding the SVG path fill */
14201
+ }
14202
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14203
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14204
+ background-color: #0050e6;
14205
+ }
14206
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14207
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14208
+ box-shadow: none;
14209
+ }
14210
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14211
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14212
+ fill: #ffffff;
14213
+ }
14214
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14215
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14216
+ background-color: transparent;
14217
+ }
14218
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14219
+ background-color: #0f62fe;
14220
+ color: #ffffff;
14221
+ }
14222
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14223
+ animation-duration: 700ms;
14224
+ animation-fill-mode: forwards;
14225
+ animation-iteration-count: infinite;
14226
+ animation-name: rotate;
14227
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14228
+ }
14229
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14230
+ background-color: transparent;
14231
+ }
14232
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14233
+ background-color: #0f62fe;
14234
+ color: #ffffff;
14235
+ }
14236
+
13547
14237
  /*# sourceMappingURL=index-without-carbon.css.map */