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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (357) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +1294 -331
  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 +789 -171
  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 +1171 -416
  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 +1068 -262
  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 +65 -15
  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 +42 -0
  48. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  49. package/es/components/Datagrid/Datagrid/Datagrid.js +13 -37
  50. package/es/components/Datagrid/Datagrid/DatagridContent.js +159 -0
  51. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
  52. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  53. package/es/components/Datagrid/Datagrid/DatagridRow.js +44 -5
  54. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  55. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  56. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +29 -8
  57. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +31 -9
  58. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  60. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  61. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  62. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  63. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  64. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +424 -0
  65. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +83 -0
  66. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +20 -0
  67. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +22 -0
  68. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +7 -0
  69. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +38 -0
  70. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  71. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  72. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +537 -0
  73. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  74. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  75. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  76. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  77. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  78. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  79. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  80. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  81. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  82. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  83. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  84. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  85. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  86. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  87. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  88. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  89. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  90. package/es/components/Datagrid/index.js +4 -1
  91. package/es/components/Datagrid/useActionsColumn.js +28 -12
  92. package/es/components/Datagrid/useColumnOrder.js +8 -0
  93. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  94. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  95. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  96. package/es/components/Datagrid/useExpandedRow.js +0 -1
  97. package/es/components/Datagrid/useFiltering.js +90 -0
  98. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  99. package/es/components/Datagrid/useInlineEdit.js +71 -0
  100. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  101. package/es/components/Datagrid/useNestedRows.js +16 -4
  102. package/es/components/Datagrid/useParentDimensions.js +3 -1
  103. package/es/components/Datagrid/useRowExpander.js +12 -4
  104. package/es/components/Datagrid/useRowSize.js +17 -6
  105. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  106. package/es/components/Datagrid/useSelectRows.js +12 -2
  107. package/es/components/Datagrid/useSortableColumns.js +1 -1
  108. package/es/components/Datagrid/useStickyColumn.js +11 -0
  109. package/es/components/Datagrid/utils/DatagridActions.js +223 -0
  110. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  111. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  112. package/es/components/Datagrid/utils/getArgTypes.js +94 -0
  113. package/es/components/Datagrid/utils/getInlineEditColumns.js +158 -0
  114. package/es/components/Datagrid/utils/makeData.js +55 -2
  115. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  116. package/es/components/EditUpdateCards/index.js +7 -0
  117. package/es/components/ExportModal/ExportModal.js +1 -1
  118. package/es/components/FilterSummary/FilterSummary.js +54 -0
  119. package/es/components/FilterSummary/index.js +7 -0
  120. package/es/components/ImportModal/ImportModal.js +3 -3
  121. package/es/components/InlineEdit/InlineEdit.js +28 -426
  122. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  123. package/es/components/InlineEditV1/index.js +7 -0
  124. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  125. package/es/components/InlineEditV2/index.js +7 -0
  126. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  127. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  128. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  129. package/es/components/MultiAddSelect/index.js +6 -0
  130. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  131. package/es/components/OptionsTile/OptionsTile.js +29 -13
  132. package/es/components/PageHeader/PageHeader.js +4 -4
  133. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  134. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  135. package/es/components/RemoveModal/RemoveModal.js +20 -3
  136. package/es/components/Saving/Saving.js +1 -1
  137. package/es/components/SidePanel/SidePanel.js +45 -52
  138. package/es/components/SidePanel/motion/variants.js +45 -0
  139. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  140. package/es/components/SingleAddSelect/index.js +6 -0
  141. package/es/components/StatusIcon/StatusIcon.js +1 -1
  142. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  143. package/es/components/WebTerminal/WebTerminal.js +2 -2
  144. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  145. package/es/components/WebTerminal/hooks/index.js +6 -0
  146. package/es/components/WebTerminal/index.js +6 -0
  147. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  148. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  149. package/es/components/WebTerminal/preview-components/index.js +7 -0
  150. package/es/components/index.js +3 -2
  151. package/es/global/js/hooks/index.js +2 -1
  152. package/es/global/js/hooks/useClickOutside.js +1 -1
  153. package/es/global/js/hooks/useControllableState.js +83 -0
  154. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  155. package/es/global/js/package-settings.js +7 -4
  156. package/es/global/js/utils/getBezierValues.js +20 -0
  157. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  158. package/es/global/js/utils/motionConstants.js +45 -0
  159. package/es/global/js/utils/rangeWithCallback.js +13 -0
  160. package/es/global/js/utils/story-helper.js +5 -1
  161. package/es/global/js/utils/uuidv4.spec.js +4 -0
  162. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  163. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  164. package/lib/components/ActionSet/ActionSet.js +7 -3
  165. package/lib/components/AddSelect/AddSelect.js +5 -6
  166. package/lib/components/AddSelect/AddSelectBody.js +67 -30
  167. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  168. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  169. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  170. package/lib/components/AddSelect/AddSelectList.js +65 -30
  171. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  172. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  173. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  174. package/lib/components/AddSelect/add-select-utils.js +9 -2
  175. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  176. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  177. package/lib/components/AddSelect/hooks/usePath.js +9 -1
  178. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  179. package/lib/components/Card/Card.js +16 -6
  180. package/lib/components/Card/CardFooter.js +3 -1
  181. package/lib/components/Card/CardHeader.js +21 -1
  182. package/lib/components/ComboButton/ComboButton.js +3 -3
  183. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  184. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
  185. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  186. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +65 -14
  187. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  188. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  189. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  190. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +53 -0
  191. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  192. package/lib/components/Datagrid/Datagrid/Datagrid.js +16 -44
  193. package/lib/components/Datagrid/Datagrid/DatagridContent.js +193 -0
  194. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
  195. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  196. package/lib/components/Datagrid/Datagrid/DatagridRow.js +45 -5
  197. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  198. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  199. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +32 -8
  200. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +33 -9
  201. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  202. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  203. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  204. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  205. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  206. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  207. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +443 -0
  208. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -0
  209. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +35 -0
  210. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +33 -0
  211. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +15 -0
  212. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +47 -0
  213. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  214. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  215. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +562 -0
  216. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  217. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  218. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  219. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  220. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  221. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  222. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  223. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  224. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  225. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  226. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  227. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  228. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  229. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  230. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  231. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  232. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  233. package/lib/components/Datagrid/index.js +25 -1
  234. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  235. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  236. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  237. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  238. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  239. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  240. package/lib/components/Datagrid/useFiltering.js +94 -0
  241. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  242. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  243. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  244. package/lib/components/Datagrid/useNestedRows.js +17 -4
  245. package/lib/components/Datagrid/useParentDimensions.js +3 -1
  246. package/lib/components/Datagrid/useRowExpander.js +17 -5
  247. package/lib/components/Datagrid/useRowSize.js +18 -13
  248. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  249. package/lib/components/Datagrid/useSelectRows.js +12 -2
  250. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  251. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  252. package/lib/components/Datagrid/utils/DatagridActions.js +248 -0
  253. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  254. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  255. package/lib/components/Datagrid/utils/getArgTypes.js +102 -0
  256. package/lib/components/Datagrid/utils/getInlineEditColumns.js +173 -0
  257. package/lib/components/Datagrid/utils/makeData.js +57 -3
  258. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  259. package/lib/components/EditUpdateCards/index.js +13 -0
  260. package/lib/components/ExportModal/ExportModal.js +3 -3
  261. package/lib/components/FilterSummary/FilterSummary.js +72 -0
  262. package/lib/components/FilterSummary/index.js +15 -0
  263. package/lib/components/ImportModal/ImportModal.js +4 -4
  264. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  265. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  266. package/lib/components/InlineEditV1/index.js +13 -0
  267. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  268. package/lib/components/InlineEditV2/index.js +13 -0
  269. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  270. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  271. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  272. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  273. package/lib/components/OptionsTile/OptionsTile.js +34 -17
  274. package/lib/components/PageHeader/PageHeader.js +5 -5
  275. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  276. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  277. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  278. package/lib/components/Saving/Saving.js +5 -5
  279. package/lib/components/SidePanel/SidePanel.js +48 -53
  280. package/lib/components/SidePanel/motion/variants.js +55 -0
  281. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  282. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  283. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  284. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  285. package/lib/components/WebTerminal/hooks/index.js +6 -0
  286. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  287. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  288. package/lib/components/index.js +21 -1
  289. package/lib/global/js/hooks/index.js +9 -1
  290. package/lib/global/js/hooks/useClickOutside.js +1 -1
  291. package/lib/global/js/hooks/useControllableState.js +94 -0
  292. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  293. package/lib/global/js/package-settings.js +7 -4
  294. package/lib/global/js/utils/getBezierValues.js +29 -0
  295. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  296. package/lib/global/js/utils/motionConstants.js +55 -0
  297. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  298. package/lib/global/js/utils/story-helper.js +5 -1
  299. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  300. package/package.json +18 -16
  301. package/scss/components/ActionSet/_action-set.scss +9 -4
  302. package/scss/components/AddSelect/_add-select.scss +132 -34
  303. package/scss/components/AddSelect/_index.scss +1 -1
  304. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  305. package/scss/components/Card/_card.scss +1 -0
  306. package/scss/components/Cascade/_cascade.scss +1 -1
  307. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  308. package/scss/components/Datagrid/_datagrid.scss +7 -1
  309. package/scss/components/Datagrid/_storybook-styles.scss +29 -5
  310. package/scss/components/Datagrid/styles/_datagrid.scss +105 -18
  311. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  312. package/scss/components/Datagrid/styles/_index.scss +2 -0
  313. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  314. package/scss/components/Datagrid/styles/_useExpandedRow.scss +57 -11
  315. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  316. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  317. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  318. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  319. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  320. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  321. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  322. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  323. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  324. package/scss/components/EditUpdateCards/_index.scss +8 -0
  325. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  326. package/scss/components/FilterSummary/_filter-summary.scss +20 -0
  327. package/scss/components/FilterSummary/_index.scss +10 -0
  328. package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
  329. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  330. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  331. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  332. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  333. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  334. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  335. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  336. package/scss/components/InlineEditV2/_index.scss +10 -0
  337. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  338. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  339. package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
  340. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  341. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  342. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  343. package/scss/components/SidePanel/_side-panel.scss +3 -82
  344. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  345. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  346. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  347. package/scss/components/SingleAddSelect/_index.scss +7 -0
  348. package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
  349. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  350. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  351. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  352. package/scss/components/WebTerminal/_index.scss +7 -0
  353. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  354. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  355. package/scss/components/_index-released-only.scss +2 -1
  356. package/scss/components/_index-with-carbon.scss +3 -1
  357. package/scss/components/_index.scss +4 -1
@@ -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 {
@@ -4226,6 +4077,15 @@
4226
4077
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
4227
4078
  }
4228
4079
 
4080
+ .c4p--filter-summary {
4081
+ display: flex;
4082
+ width: 100%;
4083
+ align-items: center;
4084
+ padding: 0.5rem;
4085
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4086
+ background: var(--cds-layer-01, #f4f4f4);
4087
+ }
4088
+
4229
4089
  .c4p--http-errors .c4p--http-errors__content {
4230
4090
  position: fixed;
4231
4091
  z-index: 2;
@@ -4443,7 +4303,6 @@
4443
4303
 
4444
4304
  /* stylelint-disable max-nesting-depth */
4445
4305
  .c4p--add-select__selections.cds--structured-list {
4446
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4447
4306
  margin-bottom: 0;
4448
4307
  }
4449
4308
  .c4p--add-select__selections-wrapper {
@@ -4451,8 +4310,11 @@
4451
4310
  }
4452
4311
  .c4p--add-select__selections-cell-wrapper {
4453
4312
  display: flex;
4313
+ height: 3rem;
4454
4314
  align-items: center;
4455
4315
  justify-content: space-between;
4316
+ padding: 0 1rem;
4317
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4456
4318
  }
4457
4319
  .c4p--add-select__selections-cell-title {
4458
4320
  display: block;
@@ -4466,17 +4328,21 @@
4466
4328
  display: block;
4467
4329
  color: var(--cds-text-secondary, #525252);
4468
4330
  }
4469
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4331
+ .c4p--add-select__selections-cell {
4332
+ display: flex;
4333
+ flex-direction: column;
4334
+ justify-content: center;
4335
+ }
4336
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
4337
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
4470
4338
  visibility: visible;
4471
4339
  }
4472
4340
  .c4p--add-select__selections-hidden-hover {
4473
4341
  visibility: hidden;
4474
4342
  }
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;
4343
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
4344
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4345
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4480
4346
  }
4481
4347
  .c4p--add-select__selections-checkbox {
4482
4348
  display: flex;
@@ -4484,7 +4350,7 @@
4484
4350
  }
4485
4351
  .c4p--add-select__selections-checkbox-label-wrapper {
4486
4352
  display: flex;
4487
- margin-left: 0.5rem;
4353
+ margin-left: 1rem;
4488
4354
  }
4489
4355
  .c4p--add-select__selections-checkbox-label-text {
4490
4356
  display: flex;
@@ -4502,6 +4368,13 @@
4502
4368
  .c4p--add-select__selections-cell-icon {
4503
4369
  margin-right: 0.5rem;
4504
4370
  }
4371
+ .c4p--add-select__selections-row {
4372
+ border-left: 0.125rem solid transparent;
4373
+ }
4374
+ .c4p--add-select__selections-row-meta--selected {
4375
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4376
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4377
+ }
4505
4378
 
4506
4379
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4507
4380
  color: var(--cds-interactive, #0f62fe);
@@ -4518,10 +4391,21 @@
4518
4391
  align-items: flex-end;
4519
4392
  justify-content: space-between;
4520
4393
  }
4394
+ .c4p--add-select__sub-header-multi {
4395
+ padding: 0 1rem;
4396
+ }
4397
+
4398
+ .c4p--add-select .cds--structured-list-row {
4399
+ border-bottom: 0;
4400
+ }
4401
+
4402
+ .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) {
4403
+ border-bottom: 0;
4404
+ }
4521
4405
 
4522
4406
  .c4p--add-select__sidebar-header {
4523
4407
  display: flex;
4524
- padding: 1.5rem 1rem 0.5rem 1rem;
4408
+ padding: 2rem 1rem 0.5rem 1rem;
4525
4409
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4526
4410
  }
4527
4411
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4547,7 +4431,7 @@
4547
4431
  }
4548
4432
 
4549
4433
  .c4p--add-select__sidebar-body {
4550
- padding: 1rem;
4434
+ padding: 0 1rem;
4551
4435
  }
4552
4436
 
4553
4437
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4580,18 +4464,44 @@
4580
4464
  .c4p--add-select__columns {
4581
4465
  display: flex;
4582
4466
  flex-direction: row;
4467
+ flex-grow: 1;
4583
4468
  overflow-x: auto;
4584
4469
  }
4470
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4471
+ margin-left: 0.5rem;
4472
+ }
4473
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
4474
+ border-left: 0;
4475
+ }
4476
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4477
+ padding: 0;
4478
+ }
4479
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4480
+ height: auto;
4481
+ padding: 0 0.5rem;
4482
+ }
4483
+ .c4p--add-select__columns .c4p--add-select__tags {
4484
+ padding: 0 0.5rem;
4485
+ margin-bottom: 0;
4486
+ }
4487
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4488
+ padding: 0;
4489
+ }
4490
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
4491
+ border-top: 0;
4492
+ }
4585
4493
 
4586
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4587
- height: 0;
4588
- padding: 0 !important;
4494
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4495
+ padding: 0 1rem;
4496
+ }
4497
+
4498
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4499
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4589
4500
  }
4590
4501
 
4591
4502
  .c4p--add-select__column {
4592
4503
  overflow: auto;
4593
- max-width: 15rem;
4594
- flex: 1 0 15rem;
4504
+ flex: 0 0 20rem;
4595
4505
  padding: 1rem;
4596
4506
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4597
4507
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4609,13 +4519,13 @@
4609
4519
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4610
4520
  }
4611
4521
 
4612
- .c4p--add-select__tag-container {
4522
+ .c4p--add-select__tags {
4613
4523
  display: flex;
4614
4524
  align-items: center;
4615
4525
  margin-top: 1rem;
4616
4526
  margin-bottom: 0.5rem;
4617
4527
  }
4618
- .c4p--add-select__tag-container-label {
4528
+ .c4p--add-select__tags-label {
4619
4529
  margin-right: 0.5rem;
4620
4530
  }
4621
4531
 
@@ -4690,13 +4600,6 @@ button.c4p--add-select__global-filter-toggle--open {
4690
4600
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4691
4601
  }
4692
4602
 
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
4603
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4701
4604
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4702
4605
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4704,13 +4607,16 @@ button.c4p--add-select__global-filter-toggle--open {
4704
4607
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4705
4608
  }
4706
4609
 
4707
- .c4p--add-select__tag-container .cds--tag {
4610
+ .c4p--add-select__selections .cds--list-box__menu {
4611
+ left: auto;
4612
+ }
4613
+
4614
+ .c4p--add-select__tags .cds--tag {
4708
4615
  margin: 0;
4709
4616
  }
4710
4617
 
4711
4618
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4712
- max-width: 29rem;
4713
- flex: 0 0 50%;
4619
+ flex-basis: 22.5rem;
4714
4620
  }
4715
4621
 
4716
4622
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4722,6 +4628,10 @@ button.c4p--add-select__global-filter-toggle--open {
4722
4628
  flex-direction: column;
4723
4629
  }
4724
4630
 
4631
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4632
+ max-width: 11.25rem;
4633
+ }
4634
+
4725
4635
  .c4p--add-select .c4p--add-select__items-label {
4726
4636
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4727
4637
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4762,8 +4672,35 @@ button.c4p--add-select__global-filter-toggle--open {
4762
4672
  padding-left: 0.5rem;
4763
4673
  }
4764
4674
 
4765
- .cds--tooltip,
4766
- .cds--overflow-menu-options {
4675
+ .c4p--add-select__multi .c4p--empty-state {
4676
+ max-width: 16rem;
4677
+ margin-top: 3rem;
4678
+ }
4679
+
4680
+ .c4p--add-select .cds--accordion__arrow {
4681
+ transform: rotate(0deg);
4682
+ }
4683
+
4684
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4685
+ transform: rotate(90deg);
4686
+ }
4687
+
4688
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
4689
+ margin: 0 0 0 1rem;
4690
+ }
4691
+
4692
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
4693
+ margin: 0 1rem 0 0.5rem;
4694
+ }
4695
+
4696
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
4697
+ padding-top: 0;
4698
+ padding-bottom: 0;
4699
+ margin-top: 0.5rem;
4700
+ }
4701
+
4702
+ .c4p--add-select .cds--tooltip,
4703
+ .c4p--add-select .cds--overflow-menu-options {
4767
4704
  z-index: 9000;
4768
4705
  }
4769
4706
 
@@ -4908,6 +4845,10 @@ button.c4p--add-select__global-filter-toggle--open {
4908
4845
  --cds-helper-text-01-font-size: 0.75rem;
4909
4846
  --cds-helper-text-01-line-height: 1.33333;
4910
4847
  --cds-helper-text-01-letter-spacing: 0.32px;
4848
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
4849
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
4850
+ --cds-helper-text-02-line-height: 1.28572;
4851
+ --cds-helper-text-02-letter-spacing: 0.16px;
4911
4852
  --cds-body-short-01-font-size: 0.875rem;
4912
4853
  --cds-body-short-01-font-weight: 400;
4913
4854
  --cds-body-short-01-line-height: 1.28572;
@@ -5146,8 +5087,7 @@ button.c4p--add-select__global-filter-toggle--open {
5146
5087
  max-height: 38.5rem;
5147
5088
  background-color: var(--cds-background, #ffffff);
5148
5089
  color: var(--cds-text-primary, #161616);
5149
- transition: transform 110ms;
5150
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5090
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5151
5091
  }
5152
5092
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5153
5093
  position: sticky;
@@ -5221,8 +5161,7 @@ button.c4p--add-select__global-filter-toggle--open {
5221
5161
  background-color: var(--cds-background, #ffffff);
5222
5162
  cursor: pointer;
5223
5163
  text-align: left;
5224
- transition: background-color 240ms;
5225
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5164
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5226
5165
  }
5227
5166
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5228
5167
  margin-bottom: 0.25rem;
@@ -5335,8 +5274,7 @@ button.c4p--add-select__global-filter-toggle--open {
5335
5274
  margin: 0 auto;
5336
5275
  background-color: var(--cds-layer-02, #ffffff);
5337
5276
  content: "";
5338
- transition: background-color 240ms;
5339
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5277
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5340
5278
  }
5341
5279
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5342
5280
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7878,10 +7816,6 @@ button.c4p--add-select__global-filter-toggle--open {
7878
7816
  padding-right: 1rem;
7879
7817
  }
7880
7818
 
7881
- .c4p--remove-modal .cds--modal-close {
7882
- display: none;
7883
- }
7884
-
7885
7819
  .c4p--remove-modal__body {
7886
7820
  padding-right: 20%;
7887
7821
  margin-bottom: 1rem;
@@ -8684,6 +8618,10 @@ button.c4p--add-select__global-filter-toggle--open {
8684
8618
  --cds-helper-text-01-font-size: 0.75rem;
8685
8619
  --cds-helper-text-01-line-height: 1.33333;
8686
8620
  --cds-helper-text-01-letter-spacing: 0.32px;
8621
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8622
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8623
+ --cds-helper-text-02-line-height: 1.28572;
8624
+ --cds-helper-text-02-letter-spacing: 0.16px;
8687
8625
  --cds-body-short-01-font-size: 0.875rem;
8688
8626
  --cds-body-short-01-font-weight: 400;
8689
8627
  --cds-body-short-01-line-height: 1.28572;
@@ -9056,6 +8994,10 @@ button.c4p--add-select__global-filter-toggle--open {
9056
8994
  --cds-helper-text-01-font-size: 0.75rem;
9057
8995
  --cds-helper-text-01-line-height: 1.33333;
9058
8996
  --cds-helper-text-01-letter-spacing: 0.32px;
8997
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8998
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8999
+ --cds-helper-text-02-line-height: 1.28572;
9000
+ --cds-helper-text-02-letter-spacing: 0.16px;
9059
9001
  --cds-body-short-01-font-size: 0.875rem;
9060
9002
  --cds-body-short-01-font-weight: 400;
9061
9003
  --cds-body-short-01-line-height: 1.28572;
@@ -9817,7 +9759,9 @@ button.c4p--add-select__global-filter-toggle--open {
9817
9759
  display: inline-block;
9818
9760
  overflow: hidden;
9819
9761
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9820
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9762
+ max-width: calc(
9763
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9764
+ );
9821
9765
  min-height: var(--c4p--inline-edit--size);
9822
9766
  /* stylelint-disable-next-line carbon/layout-token-use */
9823
9767
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10020,33 +9964,101 @@ button.c4p--add-select__global-filter-toggle--open {
10020
9964
  color: var(--cds-support-error, #da1e28);
10021
9965
  }
10022
9966
 
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 */
9967
+ .c4p--inline-edit-v2 {
9968
+ display: flex;
9969
+ align-items: center;
9970
+ background: transparent;
9971
+ cursor: pointer;
10028
9972
  }
10029
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10030
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
9973
+
9974
+ .c4p--inline-edit-v2-readonly {
9975
+ cursor: not-allowed;
10031
9976
  }
10032
- .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10033
- position: relative;
9977
+
9978
+ .c4p--inline-edit-v2:hover {
9979
+ background: var(--cds-field-01, #f4f4f4);
10034
9980
  }
10035
- .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10036
- border-bottom: 0;
9981
+
9982
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9983
+ visibility: visible;
10037
9984
  }
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);
9985
+
9986
+ .c4p--inline-edit-v2__btn-edit {
9987
+ visibility: hidden;
9988
+ }
9989
+
9990
+ .c4p--inline-edit-v2-focused {
9991
+ background: var(--cds-field-01, #f4f4f4);
9992
+ outline: 2px solid var(--cds-focus, #0f62fe);
9993
+ }
9994
+
9995
+ .c4p--inline-edit-v2__text-input {
9996
+ flex: 1;
9997
+ }
9998
+
9999
+ .c4p--inline-edit-v2__text-input-label {
10000
+ display: none;
10001
+ }
10002
+
10003
+ .c4p--inline-edit-v2__warning-icon {
10004
+ /* stylelint-disable-next-line carbon/layout-token-use */
10005
+ margin-right: 0.4375rem;
10006
+ color: var(--cds-support-error, #da1e28);
10007
+ }
10008
+
10009
+ .c4p--inline-edit-v2__warning-text {
10010
+ font-size: var(--cds-label-01-font-size, 0.75rem);
10011
+ font-weight: var(--cds-label-01-font-weight, 400);
10012
+ line-height: var(--cds-label-01-line-height, 1.33333);
10013
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
10014
+ margin-top: 0.5rem;
10015
+ color: var(--cds-support-error, #da1e28);
10016
+ }
10017
+
10018
+ .c4p--inline-edit-v2__text-input.cds--text-input {
10019
+ border: none;
10020
+ background: transparent;
10021
+ cursor: pointer;
10022
+ outline: none;
10023
+ }
10024
+
10025
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
10026
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
10027
+ cursor: not-allowed;
10028
+ }
10029
+
10030
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
10031
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
10032
+ outline: none;
10033
+ }
10034
+
10035
+ .c4p--data-spreadsheet {
10036
+ --c4p--data-spreadsheet--total-width: 0;
10037
+ display: inline-block;
10038
+ border-spacing: 0;
10039
+ /* stylelint-disable-next-line max-nesting-depth */
10040
+ }
10041
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10042
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
10043
+ }
10044
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10045
+ position: relative;
10046
+ }
10047
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10048
+ border-bottom: 0;
10049
+ }
10050
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
10051
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10052
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
10053
+ font-weight: var(--cds-body-short-01-font-weight, 400);
10054
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
10055
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10056
+ width: 100%;
10057
+ height: 100%;
10058
+ padding: 0 0.5rem;
10059
+ border: 0;
10060
+ margin: 0;
10061
+ color: var(--cds-text-primary, #161616);
10050
10062
  font-family: inherit;
10051
10063
  }
10052
10064
  .c4p--data-spreadsheet .c4p--data-spreadsheet__body--td {
@@ -10308,6 +10320,11 @@ button.c4p--add-select__global-filter-toggle--open {
10308
10320
  align-items: center;
10309
10321
  color: var(--cds-text-primary, #161616);
10310
10322
  }
10323
+ .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 {
10324
+ position: sticky;
10325
+ z-index: 1;
10326
+ left: 0;
10327
+ }
10311
10328
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10312
10329
  align-items: center;
10313
10330
  padding-top: 0;
@@ -10324,6 +10341,11 @@ button.c4p--add-select__global-filter-toggle--open {
10324
10341
  align-items: center;
10325
10342
  padding-top: 0;
10326
10343
  }
10344
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10345
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10346
+ position: sticky;
10347
+ left: 0;
10348
+ }
10327
10349
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10328
10350
  display: flex;
10329
10351
  height: 100%;
@@ -10383,9 +10405,12 @@ button.c4p--add-select__global-filter-toggle--open {
10383
10405
  height: 100%;
10384
10406
  overflow-x: auto;
10385
10407
  }
10386
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10387
- overflow: hidden;
10408
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10409
+ display: flex;
10410
+ overflow: auto;
10388
10411
  max-height: 100%;
10412
+ flex-direction: column;
10413
+ background-color: var(--cds-layer-01, #f4f4f4);
10389
10414
  }
10390
10415
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10391
10416
  display: flex;
@@ -10416,6 +10441,12 @@ button.c4p--add-select__global-filter-toggle--open {
10416
10441
  text-overflow: ellipsis;
10417
10442
  white-space: nowrap;
10418
10443
  }
10444
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
10445
+ display: -webkit-box;
10446
+ -webkit-box-orient: vertical;
10447
+ -webkit-line-clamp: 2;
10448
+ white-space: initial;
10449
+ }
10419
10450
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
10420
10451
  display: flex;
10421
10452
  overflow: hidden;
@@ -10467,10 +10498,6 @@ button.c4p--add-select__global-filter-toggle--open {
10467
10498
  flex: 1 1 auto;
10468
10499
  }
10469
10500
 
10470
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10471
- border-bottom: none;
10472
- }
10473
-
10474
10501
  .c4p--datagrid__resizer {
10475
10502
  position: absolute;
10476
10503
  z-index: 1;
@@ -10510,6 +10537,12 @@ button.c4p--add-select__global-filter-toggle--open {
10510
10537
  .c4p--datagrid__head-hidden-select-all {
10511
10538
  padding-right: 2.5rem;
10512
10539
  }
10540
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10541
+ position: sticky;
10542
+ z-index: 1;
10543
+ left: 0;
10544
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10545
+ }
10513
10546
 
10514
10547
  .c4p--datagrid__simple-body {
10515
10548
  position: relative;
@@ -10533,15 +10566,6 @@ button.c4p--add-select__global-filter-toggle--open {
10533
10566
  min-width: 0 !important;
10534
10567
  }
10535
10568
 
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
10569
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10546
10570
  overflow: auto;
10547
10571
  }
@@ -10603,8 +10627,22 @@ button.c4p--add-select__global-filter-toggle--open {
10603
10627
  max-height: 100%;
10604
10628
  }
10605
10629
 
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);
10630
+ .c4p--datagrid__carbon-row-expanded {
10631
+ position: relative;
10632
+ }
10633
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
10634
+ position: absolute;
10635
+ z-index: 2;
10636
+ /* stylelint-disable-next-line carbon/layout-token-use */
10637
+ top: var(--c4p--datagrid--row-height);
10638
+ /* stylelint-disable-next-line carbon/layout-token-use */
10639
+ left: calc(
10640
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
10641
+ );
10642
+ width: 1px;
10643
+ height: var(--c4p--datagrid--indicator-height);
10644
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
10645
+ content: "";
10608
10646
  }
10609
10647
 
10610
10648
  .c4p--datagrid .cds--data-table-header {
@@ -10651,6 +10689,7 @@ button.c4p--add-select__global-filter-toggle--open {
10651
10689
 
10652
10690
  .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
10653
10691
  position: absolute;
10692
+ top: 0;
10654
10693
  left: 0;
10655
10694
  width: 0.25rem;
10656
10695
  height: 100%;
@@ -10689,10 +10728,70 @@ button.c4p--add-select__global-filter-toggle--open {
10689
10728
  margin: 0;
10690
10729
  }
10691
10730
 
10731
+ .c4p--datagrid .c4p--button-menu {
10732
+ height: 3rem;
10733
+ }
10734
+
10735
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10736
+ display: flex;
10737
+ width: 3rem;
10738
+ height: 3rem;
10739
+ justify-content: center;
10740
+ }
10741
+
10742
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
10743
+ width: 10px;
10744
+ height: 7px;
10745
+ }
10746
+
10747
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
10748
+ background: var(--cds-layer);
10749
+ }
10750
+
10751
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
10752
+ border-radius: 5px;
10753
+ }
10754
+
10755
+ .c4p--datagrid__virtualScrollContainer {
10756
+ width: 100%;
10757
+ }
10758
+
10759
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10760
+ overflow: hidden;
10761
+ height: 100vh;
10762
+ }
10763
+
10764
+ .c4p--datagrid .cds--modal {
10765
+ width: 100%;
10766
+ }
10767
+
10768
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
10769
+ flex-shrink: 0;
10770
+ background-color: var(--cds-interactive, #0f62fe);
10771
+ }
10772
+
10773
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
10774
+ fill: var(--cds-background, #ffffff);
10775
+ }
10776
+
10777
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
10778
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
10779
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
10780
+ background-color: var(--cds-button-primary-hover, #0050e6);
10781
+ }
10782
+
10783
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
10784
+ background-color: transparent;
10785
+ }
10786
+
10787
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
10788
+ position: absolute;
10789
+ }
10790
+
10692
10791
  /*
10693
10792
  * Licensed Materials - Property of IBM
10694
10793
  * 5724-Q36
10695
- * (c) Copyright IBM Corp. 2020 - 2021
10794
+ * (c) Copyright IBM Corp. 2020 - 2022
10696
10795
  * US Government Users Restricted Rights - Use, duplication or disclosure
10697
10796
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10698
10797
  */
@@ -10703,6 +10802,33 @@ button.c4p--add-select__global-filter-toggle--open {
10703
10802
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10704
10803
  }
10705
10804
 
10805
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10806
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10807
+ }
10808
+
10809
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10810
+ transform: rotate(90deg);
10811
+ }
10812
+
10813
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10814
+ border-bottom: none;
10815
+ }
10816
+
10817
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
10818
+ position: relative;
10819
+ }
10820
+
10821
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
10822
+ position: absolute;
10823
+ /* stylelint-disable-next-line carbon/layout-token-use */
10824
+ top: -1px;
10825
+ left: 0;
10826
+ width: 100%;
10827
+ height: 1px;
10828
+ background-color: var(--cds-border-subtle);
10829
+ content: "";
10830
+ }
10831
+
10706
10832
  /*
10707
10833
  * Licensed Materials - Property of IBM
10708
10834
  * 5724-Q36
@@ -10799,233 +10925,814 @@ button.c4p--add-select__global-filter-toggle--open {
10799
10925
  text-align: right;
10800
10926
  }
10801
10927
 
10802
- .c4p--datagrid__right-align-cell-renderer.sortDisabled {
10803
- padding-right: 0;
10928
+ .c4p--datagrid__right-align-cell-renderer.sortDisabled {
10929
+ padding-right: 0;
10930
+ }
10931
+
10932
+ /*
10933
+ * Licensed Materials - Property of IBM
10934
+ * 5724-Q36
10935
+ * (c) Copyright IBM Corp. 2020
10936
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10937
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10938
+ */
10939
+ .c4p--datagrid__center-align-header {
10940
+ width: 100%;
10941
+ text-align: center;
10942
+ }
10943
+
10944
+ .c4p--datagrid__center-align-cell-renderer.sortDisabled {
10945
+ margin-right: auto;
10946
+ margin-left: auto;
10947
+ }
10948
+
10949
+ /*
10950
+ * Licensed Materials - Property of IBM
10951
+ * 5724-Q36
10952
+ * (c) Copyright IBM Corp. 2021
10953
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10954
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10955
+ */
10956
+ .c4p--datagrid__right-sticky-column-cell {
10957
+ /* stylelint-disable-next-line declaration-no-important */
10958
+ position: sticky !important;
10959
+ right: 0;
10960
+ display: flex;
10961
+ align-items: center;
10962
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10963
+ }
10964
+
10965
+ .c4p--datagrid__right-sticky-column-header {
10966
+ /* stylelint-disable-next-line declaration-no-important */
10967
+ position: sticky !important;
10968
+ right: 0;
10969
+ }
10970
+
10971
+ .c4p--datagrid__left-sticky-column-cell {
10972
+ /* stylelint-disable-next-line declaration-no-important */
10973
+ position: sticky !important;
10974
+ left: 0;
10975
+ display: flex;
10976
+ align-items: center;
10977
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10978
+ }
10979
+
10980
+ .c4p--datagrid__left-sticky-column-header {
10981
+ /* stylelint-disable-next-line declaration-no-important */
10982
+ position: sticky !important;
10983
+ z-index: 1;
10984
+ left: 0;
10985
+ }
10986
+
10987
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10988
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10989
+ left: 2.5rem;
10990
+ }
10991
+
10992
+ .c4p--datagrid__sticky-noShadow {
10993
+ box-shadow: none;
10994
+ }
10995
+
10996
+ .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
10997
+ box-shadow: none;
10998
+ }
10999
+
11000
+ .c4p--datagrid__right-sticky-column-offset-scroll {
11001
+ /* stylelint-disable-next-line */
11002
+ right: 6px !important;
11003
+ }
11004
+
11005
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
11006
+ position: sticky;
11007
+ z-index: 1;
11008
+ left: 0;
11009
+ }
11010
+
11011
+ /*
11012
+ * Licensed Materials - Property of IBM
11013
+ * 5724-Q36
11014
+ * (c) Copyright IBM Corp. 2021
11015
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11016
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11017
+ */
11018
+ .c4p--datagrid__actions-column-cell {
11019
+ display: flex;
11020
+ flex-flow: column;
11021
+ justify-content: center;
11022
+ }
11023
+
11024
+ .c4p--datagrid__actions-column-content {
11025
+ display: flex;
11026
+ justify-content: center;
11027
+ }
11028
+
11029
+ .c4p--datagrid__actions-column-loading {
11030
+ margin-bottom: 0.5rem;
11031
+ }
11032
+
11033
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11034
+ cursor: not-allowed;
11035
+ }
11036
+
11037
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11038
+ pointer-events: none;
11039
+ }
11040
+
11041
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11042
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11043
+ }
11044
+
11045
+ /*
11046
+ * Licensed Materials - Property of IBM
11047
+ * 5724-Q36
11048
+ * (c) Copyright IBM Corp. 2021, 2022
11049
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11050
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11051
+ */
11052
+ .c4p--datagrid__customize-columns-modal .cds--modal-content {
11053
+ position: inherit;
11054
+ display: flex;
11055
+ flex-flow: column;
11056
+ padding: 0;
11057
+ margin: 0;
11058
+ }
11059
+
11060
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11061
+ margin-bottom: 0;
11062
+ }
11063
+
11064
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11065
+ display: flex;
11066
+ justify-content: center;
11067
+ }
11068
+
11069
+ .c4p--datagrid__customize-columns-modal--actions {
11070
+ display: flex;
11071
+ height: 3rem;
11072
+ flex-flow: row;
11073
+ background-color: var(--cds-field-02, #ffffff);
11074
+ }
11075
+
11076
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11077
+ height: 3rem;
11078
+ padding-left: 2.5rem;
11079
+ border-bottom: none;
11080
+ }
11081
+
11082
+ .c4p--datagrid__customize-columns-modal--actions > button {
11083
+ margin-left: 1rem;
11084
+ }
11085
+
11086
+ .c4p--datagrid__customize-columns-instructions {
11087
+ padding-left: 1rem;
11088
+ margin-bottom: 1.5rem;
11089
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
11090
+ font-weight: var(--cds-body-long-01-font-weight, 400);
11091
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
11092
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
11093
+ color: var(--cds-text-primary, #161616);
11094
+ }
11095
+
11096
+ .c4p--datagrid__customize-columns-column-list {
11097
+ position: relative;
11098
+ overflow: auto;
11099
+ }
11100
+
11101
+ .c4p--datagrid__customize-columns-select-all {
11102
+ display: flex;
11103
+ height: 3rem;
11104
+ align-items: center;
11105
+ padding-left: 2.5rem;
11106
+ border-bottom: 1px solid var(--cds-layer-active);
11107
+ background-color: var(--cds-layer-01, #f4f4f4);
11108
+ }
11109
+
11110
+ .c4p--datagrid__customize-columns-select-all:hover {
11111
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
11112
+ }
11113
+
11114
+ .c4p--datagrid__customize-columns-select-all-selected {
11115
+ display: flex;
11116
+ height: 3rem;
11117
+ align-items: center;
11118
+ padding-left: 2.5rem;
11119
+ border-bottom: 1px solid var(--cds-layer-active);
11120
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
11121
+ }
11122
+
11123
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
11124
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11125
+ }
11126
+
11127
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11128
+ margin-bottom: 0;
11129
+ }
11130
+
11131
+ /*
11132
+ * Licensed Materials - Property of IBM
11133
+ * 5724-Q36
11134
+ * (c) Copyright IBM Corp. 2021
11135
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11136
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11137
+ */
11138
+ .c4p--datagrid__row-size-dropdown {
11139
+ padding: 1rem;
11140
+ background-color: var(--cds-background, #ffffff);
11141
+ 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));
11142
+ }
11143
+
11144
+ .c4p--datagrid__row-size-button--open {
11145
+ background-color: var(--cds-background, #ffffff);
11146
+ 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));
11147
+ }
11148
+
11149
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11150
+ /* stylelint-disable-next-line carbon/layout-token-use */
11151
+ left: -4px;
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-filter-flyout__container {
11162
+ position: relative;
11163
+ }
11164
+
11165
+ .c4p--datagrid-filter-flyout {
11166
+ position: absolute;
11167
+ top: 3rem;
11168
+ right: 0;
11169
+ display: none;
11170
+ width: 40.125rem;
11171
+ background-color: var(--cds-layer-02, #ffffff);
11172
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
11173
+ }
11174
+
11175
+ .c4p--datagrid-filter-flyout--open {
11176
+ display: grid;
11177
+ }
11178
+
11179
+ .c4p--datagrid-filter-flyout--batch {
11180
+ min-height: 21.625rem;
11181
+ grid-template-rows: 1fr 3rem;
11182
+ }
11183
+
11184
+ .c4p--datagrid-filter-flyout--instant {
11185
+ min-height: 17.625rem;
11186
+ grid-template-rows: 1fr;
11187
+ }
11188
+
11189
+ .c4p--datagrid-filter-flyout__inner-container {
11190
+ padding: 1rem 1rem 3rem 1rem;
11191
+ }
11192
+
11193
+ .c4p--datagrid-filter-flyout__inner-container::before {
11194
+ position: absolute;
11195
+ top: -0.4375rem;
11196
+ right: 1px;
11197
+ display: block;
11198
+ width: 2.875rem;
11199
+ height: 0.9375rem;
11200
+ background-color: var(--cds-layer-02, #ffffff);
11201
+ content: "";
11202
+ }
11203
+
11204
+ .c4p--datagrid-filter-flyout__title {
11205
+ display: block;
11206
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11207
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11208
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11209
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
11210
+ margin-bottom: 1.5rem;
11211
+ }
11212
+
11213
+ .c4p--datagrid-filter-flyout__filters {
11214
+ display: grid;
11215
+ gap: 1rem 2rem;
11216
+ grid-template-columns: 1fr 1fr;
11217
+ }
11218
+
11219
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
11220
+ position: relative;
11221
+ background-color: var(--cds-layer-02, #ffffff);
11222
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
11223
+ }
11224
+
11225
+ .c4p--datagrid-filter-flyout .cds--fieldset {
11226
+ margin-bottom: 0;
11227
+ }
11228
+
11229
+ /*
11230
+ * Licensed Materials - Property of IBM
11231
+ * 5724-Q36
11232
+ * (c) Copyright IBM Corp. 2021
11233
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11234
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11235
+ */
11236
+ th.c4p--datagrid__select-all-toggle-on,
11237
+ td.c4p--datagrid__select-all-toggle-on {
11238
+ /* stylelint-disable-next-line declaration-no-important */
11239
+ width: 4.5rem !important;
11240
+ /* stylelint-disable-next-line declaration-no-important */
11241
+ min-width: initial !important;
11242
+ box-sizing: border-box;
11243
+ flex: 0 0 auto;
11244
+ }
11245
+
11246
+ th.c4p--datagrid__select-all-toggle-on {
11247
+ display: flex;
11248
+ align-items: center;
11249
+ justify-content: center;
11250
+ }
11251
+
11252
+ th.c4p--datagrid__select-all-toggle-on.button {
11253
+ margin-left: 0.125rem;
11254
+ }
11255
+
11256
+ /*
11257
+ * Licensed Materials - Property of IBM
11258
+ * 5724-Q36
11259
+ * (c) Copyright IBM Corp. 2022
11260
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11261
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11262
+ */
11263
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11264
+ position: relative;
11265
+ padding: 1rem 1rem 1.5rem 3rem;
11266
+ }
11267
+
11268
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11269
+ position: absolute;
11270
+ /* stylelint-disable-next-line carbon/layout-token-use */
11271
+ top: -1px;
11272
+ right: 0;
11273
+ width: calc(100% - 3rem);
11274
+ height: 1px;
11275
+ background-color: var(--cds-layer-accent);
11276
+ content: "";
11277
+ }
11278
+
11279
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11280
+ position: absolute;
11281
+ bottom: 0;
11282
+ left: 0;
11283
+ width: 100%;
11284
+ height: 1px;
11285
+ background-color: var(--cds-layer-accent);
11286
+ content: "";
11287
+ }
11288
+
11289
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
11290
+ padding: 0.5rem;
11291
+ padding-right: 0;
11292
+ }
11293
+
11294
+ .c4p--datagrid__row-expander.cds--btn {
11295
+ display: flex;
11296
+ width: 2rem;
11297
+ height: 2rem;
11298
+ min-height: 2rem;
11299
+ justify-content: center;
11300
+ padding: 0;
11301
+ }
11302
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
11303
+ fill: var(--cds-layer-selected-inverse, #161616);
11304
+ }
11305
+
11306
+ /*
11307
+ * Licensed Materials - Property of IBM
11308
+ * 5724-Q36
11309
+ * (c) Copyright IBM Corp. 2022
11310
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11311
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11312
+ */
11313
+ .c4p--datagrid__draggable-handleStyle {
11314
+ display: flex;
11315
+ align-items: center;
11316
+ margin-right: 0.5rem;
11317
+ cursor: grab;
11318
+ }
11319
+
11320
+ .c4p--datagrid__draggable-handleStyle.disabled {
11321
+ pointer-events: none;
11322
+ }
11323
+
11324
+ svg.c4p--datagrid__draggable-handleStyle.disable {
11325
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11326
+ }
11327
+
11328
+ .c4p--datagrid__draggable-handleHolder {
11329
+ display: flex;
11330
+ height: 3rem;
11331
+ padding-left: 1rem;
11332
+ border-bottom: 1px solid var(--cds-layer-active);
11333
+ background-color: var(--cds-layer);
11334
+ }
11335
+
11336
+ .c4p--datagrid__draggable-handleHolder:hover {
11337
+ background-color: var(--cds-layer-hover);
11338
+ }
11339
+
11340
+ .c4p--datagrid__draggable-handleHolder-selected {
11341
+ display: flex;
11342
+ height: 3rem;
11343
+ padding-left: 1rem;
11344
+ border-bottom: 1px solid var(--cds-layer-active);
11345
+ background-color: var(--cds-layer-selected);
11346
+ }
11347
+
11348
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11349
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11350
+ }
11351
+
11352
+ .c4p--datagrid__draggable-handleHolder-isOver {
11353
+ border: 2px dashed var(--cds-focus, #0f62fe);
11354
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11355
+ }
11356
+
11357
+ .c4p--datagrid__draggable-handleHolder-droppable {
11358
+ display: flex;
11359
+ width: 100%;
11360
+ }
11361
+
11362
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11363
+ background-color: var(--cds-highlight, #d0e2ff);
11364
+ color: var(--cds-text-primary, #161616);
11365
+ }
11366
+
11367
+ .c4p--datagrid__shared-ui--assistive-text {
11368
+ position: absolute;
11369
+ overflow: hidden;
11370
+ width: 0;
11371
+ height: 0;
11372
+ padding: 0;
11373
+ border: 0;
11374
+ clip: rect(0 0 0 0);
11375
+ text-transform: none;
11376
+ white-space: nowrap;
11377
+ }
11378
+
11379
+ /*
11380
+ * Licensed Materials - Property of IBM
11381
+ * 5724-Q36
11382
+ * (c) Copyright IBM Corp. 2021
11383
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11384
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11385
+ */
11386
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11387
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11388
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11389
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11390
+ height: 1.5rem;
11391
+ }
11392
+
11393
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11394
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11395
+ height: calc(1.5rem - 0.25rem);
11396
+ }
11397
+
11398
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11399
+ max-height: none;
11400
+ }
11401
+
11402
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11403
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11404
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11405
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11406
+ height: 2rem;
11407
+ }
11408
+
11409
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11410
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11411
+ height: calc(2rem - 0.25rem);
11412
+ }
11413
+
11414
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11415
+ max-height: none;
11416
+ }
11417
+
11418
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11419
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11420
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11421
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11422
+ height: 2.5rem;
11423
+ }
11424
+
11425
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11426
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11427
+ height: calc(2.5rem - 0.25rem);
11428
+ }
11429
+
11430
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11431
+ max-height: none;
11432
+ }
11433
+
11434
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11435
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11436
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11437
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11438
+ height: 3rem;
11439
+ }
11440
+
11441
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11442
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11443
+ height: calc(3rem - 0.25rem);
11444
+ }
11445
+
11446
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11447
+ max-height: none;
11448
+ }
11449
+
11450
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11451
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11452
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11453
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11454
+ height: 4rem;
11455
+ }
11456
+
11457
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11458
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11459
+ height: calc(4rem - 0.25rem);
11460
+ }
11461
+
11462
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11463
+ max-height: none;
11464
+ }
11465
+
11466
+ .c4p--datagrid {
11467
+ --c4p--datagrid--grid-header-height: 0;
11468
+ }
11469
+
11470
+ .c4p--datagrid__inline-edit-cell {
11471
+ display: flex;
11472
+ height: 100%;
11473
+ align-items: center;
11474
+ }
11475
+
11476
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11477
+ display: flex;
11478
+ align-items: center;
11479
+ }
11480
+
11481
+ .c4p--datagrid__inline-edit--outer-cell-button {
11482
+ width: 100%;
11483
+ height: calc(100% + 2px);
11484
+ }
11485
+
11486
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11487
+ position: relative;
11488
+ display: flex;
11489
+ width: 100%;
11490
+ height: 100%;
11491
+ align-items: center;
11492
+ justify-content: space-between;
11493
+ padding-left: 1rem;
11494
+ color: var(--cds-text-secondary, #525252);
11495
+ cursor: pointer;
11496
+ outline: 0;
11497
+ }
11498
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11499
+ height: 1rem;
11500
+ padding-right: 1rem;
11501
+ }
11502
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11503
+ padding-left: 0;
11504
+ cursor: default;
11505
+ }
11506
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11507
+ height: 1rem;
11508
+ fill: var(--cds-icon-secondary, #525252);
11509
+ }
11510
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11511
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11512
+ }
11513
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11514
+ justify-content: flex-start;
11515
+ }
11516
+ .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) {
11517
+ /* stylelint-disable-next-line */
11518
+ }
11519
+ .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 {
11520
+ display: none;
11521
+ }
11522
+ .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 {
11523
+ display: block;
11524
+ }
11525
+
11526
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11527
+ background-color: var(--cds-layer-active);
11528
+ color: var(--cds-text-primary, #161616);
11529
+ }
11530
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11531
+ fill: var(--cds-icon-primary, #161616);
11532
+ }
11533
+
11534
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11535
+ background-color: var(--cds-layer-active);
11536
+ color: var(--cds-text-primary, #161616);
11537
+ cursor: text;
11538
+ }
11539
+
11540
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11541
+ /* stylelint-disable-next-line carbon/theme-token-use */
11542
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11543
+ outline-offset: calc(-1 * 0.125rem);
10804
11544
  }
10805
-
10806
- /*
10807
- * Licensed Materials - Property of IBM
10808
- * 5724-Q36
10809
- * (c) Copyright IBM Corp. 2020
10810
- * US Government Users Restricted Rights - Use, duplication or disclosure
10811
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10812
- */
10813
- .c4p--datagrid__center-align-header {
10814
- width: 100%;
10815
- text-align: center;
11545
+ @media screen and (prefers-contrast) {
11546
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11547
+ outline-style: dotted;
11548
+ }
10816
11549
  }
10817
11550
 
10818
- .c4p--datagrid__center-align-cell-renderer.sortDisabled {
10819
- margin-right: auto;
10820
- margin-left: auto;
11551
+ .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) {
11552
+ color: var(--cds-button-disabled, #c6c6c6);
11553
+ cursor: not-allowed;
10821
11554
  }
10822
11555
 
10823
- /*
10824
- * Licensed Materials - Property of IBM
10825
- * 5724-Q36
10826
- * (c) Copyright IBM Corp. 2021
10827
- * US Government Users Restricted Rights - Use, duplication or disclosure
10828
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10829
- */
10830
- .c4p--datagrid__right-sticky-column-cell {
10831
- /* stylelint-disable-next-line declaration-no-important */
10832
- position: sticky !important;
10833
- right: 0;
10834
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11556
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11557
+ overflow: hidden;
11558
+ padding-right: 1rem;
11559
+ text-overflow: ellipsis;
11560
+ white-space: nowrap;
10835
11561
  }
10836
11562
 
10837
- .c4p--datagrid__right-sticky-column-header {
10838
- /* stylelint-disable-next-line declaration-no-important */
10839
- position: sticky !important;
10840
- right: 0;
10841
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11563
+ .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 {
11564
+ padding-right: 3rem;
10842
11565
  }
10843
11566
 
10844
- .c4p--datagrid__sticky-noShadow {
10845
- box-shadow: none;
11567
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11568
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11569
+ height: 3rem;
10846
11570
  }
10847
11571
 
10848
- .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
10849
- box-shadow: none;
11572
+ .c4p--datagrid__inline-edit-button-icon {
11573
+ position: absolute;
11574
+ right: 1rem;
10850
11575
  }
10851
11576
 
10852
- .c4p--datagrid__right-sticky-column-offset-scroll {
10853
- /* stylelint-disable-next-line */
10854
- right: 6px !important;
11577
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11578
+ position: relative;
11579
+ padding: 0;
10855
11580
  }
10856
-
10857
- /*
10858
- * Licensed Materials - Property of IBM
10859
- * 5724-Q36
10860
- * (c) Copyright IBM Corp. 2021
10861
- * US Government Users Restricted Rights - Use, duplication or disclosure
10862
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10863
- */
10864
- .c4p--datagrid__actions-column-cell {
10865
- display: flex;
10866
- flex-flow: column;
10867
- justify-content: center;
11581
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11582
+ padding-left: 1rem;
10868
11583
  }
10869
-
10870
- .c4p--datagrid__actions-column-content {
10871
- display: flex;
10872
- justify-content: center;
11584
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11585
+ min-width: auto;
11586
+ padding-right: 1rem;
10873
11587
  }
10874
11588
 
10875
- .c4p--datagrid__actions-column-loading {
10876
- margin-bottom: 0.5rem;
11589
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11590
+ padding-bottom: 1rem;
11591
+ padding-left: 1rem;
10877
11592
  }
10878
11593
 
10879
- /*
10880
- * Licensed Materials - Property of IBM
10881
- * 5724-Q36
10882
- * (c) Copyright IBM Corp. 2021, 2022
10883
- * US Government Users Restricted Rights - Use, duplication or disclosure
10884
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10885
- */
10886
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
10887
- position: inherit;
10888
- display: flex;
10889
- flex-flow: column;
10890
- /* stylelint-disable-next-line declaration-no-important */
10891
- padding-top: 0 !important;
11594
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11595
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11596
+ width: inherit;
10892
11597
  }
10893
11598
 
10894
- .c4p--datagrid__customize-columns-checkbox {
10895
- display: flex;
10896
- justify-content: center;
10897
- /* stylelint-disable-next-line declaration-no-important */
10898
- margin-bottom: 0 !important;
11599
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11600
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11601
+ width: 100%;
11602
+ height: 3rem;
11603
+ max-height: none;
10899
11604
  }
10900
11605
 
10901
- .c4p--datagrid__customize-columns-modal--actions {
10902
- display: flex;
10903
- flex-flow: row;
10904
- margin-bottom: 1.5rem;
11606
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11607
+ width: inherit;
10905
11608
  }
10906
11609
 
10907
- .c4p--datagrid__customize-columns-modal--actions > button {
10908
- margin-left: 1rem;
11610
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11611
+ overflow: hidden;
11612
+ width: 100%;
11613
+ max-width: none;
11614
+ padding-right: 2rem;
11615
+ text-overflow: ellipsis;
11616
+ white-space: nowrap;
10909
11617
  }
10910
11618
 
10911
- .c4p--datagrid__customize-columns-instructions {
10912
- margin-bottom: 1.5rem;
10913
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
10914
- font-weight: var(--cds-body-long-01-font-weight, 400);
10915
- line-height: var(--cds-body-long-01-line-height, 1.42857);
10916
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
10917
- color: var(--cds-text-primary, #161616);
11619
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11620
+ border-top-color: var(--cds-layer-hover);
11621
+ background-color: var(--cds-layer-hover);
10918
11622
  }
10919
11623
 
10920
- .c4p--datagrid__customize-columns-column-list {
10921
- position: relative;
10922
- overflow: auto;
11624
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11625
+ position: absolute;
11626
+ z-index: 2;
11627
+ bottom: 0;
11628
+ left: 0;
11629
+ width: 2px;
11630
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11631
+ background-color: var(--cds-link-inverse, #78a9ff);
11632
+ content: "";
10923
11633
  }
10924
11634
 
10925
- /*
10926
- * Licensed Materials - Property of IBM
10927
- * 5724-Q36
10928
- * (c) Copyright IBM Corp. 2021
10929
- * US Government Users Restricted Rights - Use, duplication or disclosure
10930
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10931
- */
10932
- .c4p--datagrid__row-size-dropdown {
11635
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
10933
11636
  position: absolute;
10934
- padding: 1rem;
10935
- background-color: var(--cds-background, #ffffff);
10936
- 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));
11637
+ z-index: 2;
11638
+ right: 0;
11639
+ bottom: 0;
11640
+ width: 2px;
11641
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11642
+ background-color: var(--cds-link-inverse, #78a9ff);
11643
+ content: "";
10937
11644
  }
10938
11645
 
10939
- .c4p--datagrid__row-size-button--open {
10940
- background-color: var(--cds-background, #ffffff);
10941
- 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));
11646
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
11647
+ position: absolute;
11648
+ z-index: 2;
11649
+ top: 0;
11650
+ right: 0;
11651
+ left: 0;
11652
+ width: var(--c4p--datagrid--grid-width);
11653
+ height: 2px;
11654
+ background-color: var(--cds-link-inverse, #78a9ff);
10942
11655
  }
10943
11656
 
10944
- /*
10945
- * Licensed Materials - Property of IBM
10946
- * 5724-Q36
10947
- * (c) Copyright IBM Corp. 2021
10948
- * US Government Users Restricted Rights - Use, duplication or disclosure
10949
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10950
- */
10951
- th.c4p--datagrid__select-all-toggle-on,
10952
- td.c4p--datagrid__select-all-toggle-on {
10953
- /* stylelint-disable-next-line declaration-no-important */
10954
- width: 4.5rem !important;
10955
- /* stylelint-disable-next-line declaration-no-important */
10956
- min-width: initial !important;
10957
- box-sizing: border-box;
10958
- flex: 0 0 auto;
11657
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11658
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11659
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
10959
11660
  }
10960
11661
 
10961
- th.c4p--datagrid__select-all-toggle-on {
10962
- display: flex;
10963
- align-items: center;
10964
- justify-content: center;
11662
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11663
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11664
+ outline-offset: -2px;
10965
11665
  }
10966
11666
 
10967
- th.c4p--datagrid__select-all-toggle-on.button {
10968
- margin-left: 0.125rem;
11667
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11668
+ padding-top: 0.125rem;
10969
11669
  }
10970
11670
 
10971
- .c4p--datagrid__expanded-row-content {
10972
- padding: 1rem 1rem 1.5rem 4rem;
11671
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11672
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11673
+ position: absolute;
11674
+ z-index: 3;
11675
+ top: calc(100% - 0.125rem);
11676
+ width: 100%;
11677
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11678
+ margin: 0;
11679
+ background-color: var(--cds-layer-01, #f4f4f4);
11680
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11681
+ outline-offset: calc(-1 * 0.125rem);
10973
11682
  }
10974
11683
 
10975
- /*
10976
- * Licensed Materials - Property of IBM
10977
- * 5724-Q36
10978
- * (c) Copyright IBM Corp. 2022
10979
- * US Government Users Restricted Rights - Use, duplication or disclosure
10980
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10981
- */
10982
- .c4p--datagrid__draggable-handleStyle {
10983
- display: flex;
10984
- align-items: center;
10985
- margin-right: 0.5rem;
10986
- cursor: grab;
11684
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11685
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
10987
11686
  }
10988
11687
 
10989
- .c4p--datagrid__draggable-handleStyle.disabled {
10990
- pointer-events: none;
11688
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11689
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11690
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11691
+ z-index: 4;
11692
+ top: calc(100% + 0.75rem + 0.125rem);
11693
+ right: 0.5rem;
10991
11694
  }
10992
11695
 
10993
- svg.c4p--datagrid__draggable-handleStyle.disable {
10994
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11696
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11697
+ top: calc(100% + 0.25rem + 0.125rem);
10995
11698
  }
10996
11699
 
10997
- .c4p--datagrid__draggable-handleHolder {
10998
- display: flex;
10999
- height: 2rem;
11000
- padding-left: 0.25rem;
11001
- margin-bottom: 0.5rem;
11002
- background: var(--cds-layer-02, #ffffff);
11700
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11701
+ position: absolute;
11702
+ top: 0;
11703
+ left: 0.125rem;
11704
+ width: calc(100% - (0.125rem * 2));
11705
+ height: 0.125rem;
11706
+ background-color: var(--cds-layer-01, #f4f4f4);
11707
+ content: "";
11003
11708
  }
11004
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11005
- border: 2px dashed var(--cds-focus, #0f62fe);
11006
- background-color: var(--cds-highlight, #d0e2ff);
11709
+
11710
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11711
+ position: absolute;
11712
+ top: 0.125rem;
11713
+ left: 0.5rem;
11714
+ width: calc(100% - (0.5rem * 2));
11715
+ height: 1px;
11716
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11717
+ content: "";
11007
11718
  }
11008
11719
 
11009
- .c4p--datagrid__draggable-handleHolder-droppable {
11010
- display: flex;
11011
- width: 100%;
11720
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11721
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11722
+ }
11723
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11724
+ background-color: transparent;
11012
11725
  }
11013
11726
 
11014
- .c4p--datagrid__draggable-handleHolder--grabbed {
11015
- background-color: var(--cds-highlight, #d0e2ff);
11016
- color: var(--cds-text-primary, #161616);
11727
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11728
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11729
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11730
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11731
+ outline-color: var(--cds-support-error, #da1e28);
11017
11732
  }
11018
11733
 
11019
- .c4p--datagrid__shared-ui--assistive-text {
11020
- position: absolute;
11021
- overflow: hidden;
11022
- width: 0;
11023
- height: 0;
11024
- padding: 0;
11025
- border: 0;
11026
- clip: rect(0 0 0 0);
11027
- text-transform: none;
11028
- white-space: nowrap;
11734
+ .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 {
11735
+ background-color: var(--cds-support-error, #da1e28);
11029
11736
  }
11030
11737
 
11031
11738
  /*
@@ -11035,6 +11742,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11035
11742
  * US Government Users Restricted Rights - Use, duplication or disclosure
11036
11743
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11037
11744
  */
11745
+ /* stylelint-disable max-nesting-depth */
11038
11746
  .c4p--datagrid__datagridWrap {
11039
11747
  display: block;
11040
11748
  width: 100%;
@@ -11042,6 +11750,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11042
11750
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11043
11751
  display: none;
11044
11752
  }
11753
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11754
+ left: 0.125rem;
11755
+ width: 112px;
11756
+ }
11045
11757
 
11046
11758
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11047
11759
  left: 0.125rem;
@@ -11050,7 +11762,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11050
11762
 
11051
11763
  .c4p--datagrid__datagridWrap-simple {
11052
11764
  display: flex;
11053
- overflow: hidden;
11054
11765
  width: 100%;
11055
11766
  height: 100%;
11056
11767
  flex-direction: column;
@@ -12767,6 +13478,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
12767
13478
  appearance: none;
12768
13479
  background: none;
12769
13480
  cursor: pointer;
13481
+ text-align: start;
12770
13482
  width: 100%;
12771
13483
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12772
13484
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -13094,14 +13806,18 @@ a.cds--side-nav__link--current::before {
13094
13806
  font-weight: var(--cds-body-short-01-font-weight, 400);
13095
13807
  line-height: var(--cds-body-short-01-line-height, 1.28572);
13096
13808
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13097
- height: 4rem;
13098
13809
  align-items: center;
13810
+ margin: 0;
13811
+ }
13812
+
13813
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
13814
+ height: 4rem;
13099
13815
  padding-top: 1rem;
13100
13816
  padding-bottom: 2rem;
13101
- margin: 0;
13102
13817
  }
13103
13818
 
13104
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
13819
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
13820
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
13105
13821
  max-width: none;
13106
13822
  }
13107
13823
 
@@ -13162,7 +13878,7 @@ a.cds--side-nav__link--current::before {
13162
13878
  /* stylelint-disable-next-line function-no-unknown */
13163
13879
  z-index: 9000;
13164
13880
  align-items: flex-end;
13165
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13881
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13166
13882
  }
13167
13883
 
13168
13884
  @media (prefers-reduced-motion: reduce) {
@@ -13580,4 +14296,43 @@ a.cds--side-nav__link--current::before {
13580
14296
  margin-bottom: 1rem;
13581
14297
  }
13582
14298
 
14299
+ /* stylelint-disable max-nesting-depth */
14300
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14301
+ /* Used id for overriding the SVG path fill */
14302
+ }
14303
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14304
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14305
+ background-color: #0050e6;
14306
+ }
14307
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14308
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14309
+ box-shadow: none;
14310
+ }
14311
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14312
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14313
+ fill: #ffffff;
14314
+ }
14315
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14316
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14317
+ background-color: transparent;
14318
+ }
14319
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14320
+ background-color: #0f62fe;
14321
+ color: #ffffff;
14322
+ }
14323
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14324
+ animation-duration: 700ms;
14325
+ animation-fill-mode: forwards;
14326
+ animation-iteration-count: infinite;
14327
+ animation-name: rotate;
14328
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14329
+ }
14330
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14331
+ background-color: transparent;
14332
+ }
14333
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14334
+ background-color: #0f62fe;
14335
+ color: #ffffff;
14336
+ }
14337
+
13583
14338
  /*# sourceMappingURL=index-without-carbon.css.map */