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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (383) hide show
  1. package/README.md +19 -2
  2. package/css/index-full-carbon.css +1376 -403
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +8 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +1413 -385
  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 +1295 -453
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +8 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +1170 -333
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +8 -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 +73 -32
  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 +23 -2
  34. package/es/components/AddSelect/index.js +1 -1
  35. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  36. package/es/components/ButtonMenu/ButtonMenu.js +4 -3
  37. package/es/components/Card/Card.js +16 -6
  38. package/es/components/Card/CardFooter.js +3 -1
  39. package/es/components/Card/CardHeader.js +20 -1
  40. package/es/components/ComboButton/ComboButton.js +1 -1
  41. package/es/components/CreateFullPage/CreateFullPage.js +13 -3
  42. package/es/components/CreateTearsheet/CreateTearsheet.js +17 -3
  43. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  44. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  45. package/es/components/DataSpreadsheet/DataSpreadsheet.js +65 -15
  46. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  47. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  48. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  49. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  50. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  51. package/es/components/Datagrid/Datagrid/Datagrid.js +16 -40
  52. package/es/components/Datagrid/Datagrid/DatagridContent.js +194 -0
  53. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +18 -8
  54. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  55. package/es/components/Datagrid/Datagrid/DatagridHead.js +1 -2
  56. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -4
  57. package/es/components/Datagrid/Datagrid/DatagridRow.js +44 -7
  58. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -5
  59. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  60. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -2
  61. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +14 -10
  62. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +32 -11
  63. package/es/components/Datagrid/Datagrid/DraggableElement.js +12 -4
  64. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +11 -54
  65. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +15 -14
  66. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +63 -31
  67. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +193 -0
  68. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +56 -0
  69. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -1
  70. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +256 -0
  71. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +270 -0
  72. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +91 -0
  73. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +28 -0
  74. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +10 -0
  75. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +310 -0
  76. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +25 -0
  77. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +38 -0
  78. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +25 -0
  79. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +9 -0
  80. package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
  81. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +72 -0
  82. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  83. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  84. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +541 -0
  85. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  86. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  87. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  88. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  89. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  90. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  91. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +262 -0
  92. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  93. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  94. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  95. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -1
  96. package/es/components/Datagrid/index.js +4 -1
  97. package/es/components/Datagrid/useActionsColumn.js +28 -12
  98. package/es/components/Datagrid/useColumnOrder.js +8 -0
  99. package/es/components/Datagrid/useCustomizeColumns.js +13 -8
  100. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  101. package/es/components/Datagrid/useExpandedRow.js +0 -1
  102. package/es/components/Datagrid/useFiltering.js +99 -0
  103. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  104. package/es/components/Datagrid/useInlineEdit.js +71 -0
  105. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  106. package/es/components/Datagrid/useNestedRows.js +16 -4
  107. package/es/components/Datagrid/useParentDimensions.js +3 -1
  108. package/es/components/Datagrid/useRowExpander.js +12 -4
  109. package/es/components/Datagrid/useRowSize.js +17 -6
  110. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  111. package/es/components/Datagrid/useSelectRows.js +13 -4
  112. package/es/components/Datagrid/useSortableColumns.js +15 -9
  113. package/es/components/Datagrid/useStickyColumn.js +11 -0
  114. package/es/components/Datagrid/utils/DatagridActions.js +249 -0
  115. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  116. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  117. package/es/components/Datagrid/utils/getArgTypes.js +94 -0
  118. package/es/components/Datagrid/utils/getInlineEditColumns.js +159 -0
  119. package/es/components/Datagrid/utils/makeData.js +54 -1
  120. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  121. package/es/components/EditUpdateCards/index.js +7 -0
  122. package/es/components/ExportModal/ExportModal.js +1 -1
  123. package/es/components/FilterSummary/FilterSummary.js +54 -0
  124. package/es/components/FilterSummary/index.js +7 -0
  125. package/es/components/ImportModal/ImportModal.js +3 -3
  126. package/es/components/InlineEdit/InlineEdit.js +28 -426
  127. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  128. package/es/components/InlineEditV1/index.js +7 -0
  129. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  130. package/es/components/InlineEditV2/index.js +7 -0
  131. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  132. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  133. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  134. package/es/components/MultiAddSelect/index.js +6 -0
  135. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  136. package/es/components/OptionsTile/OptionsTile.js +32 -16
  137. package/es/components/PageHeader/PageHeader.js +4 -4
  138. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  139. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  140. package/es/components/RemoveModal/RemoveModal.js +20 -3
  141. package/es/components/Saving/Saving.js +1 -1
  142. package/es/components/SidePanel/SidePanel.js +45 -52
  143. package/es/components/SidePanel/motion/variants.js +45 -0
  144. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  145. package/es/components/SingleAddSelect/index.js +6 -0
  146. package/es/components/StatusIcon/StatusIcon.js +1 -1
  147. package/es/components/Tearsheet/Tearsheet.js +5 -0
  148. package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
  149. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  150. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  151. package/es/components/WebTerminal/WebTerminal.js +1 -1
  152. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  153. package/es/components/index.js +4 -3
  154. package/es/global/js/hooks/index.js +2 -1
  155. package/es/global/js/hooks/useClickOutside.js +1 -1
  156. package/es/global/js/hooks/useControllableState.js +83 -0
  157. package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
  158. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  159. package/es/global/js/package-settings.js +9 -6
  160. package/es/global/js/utils/getBezierValues.js +20 -0
  161. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  162. package/es/global/js/utils/motionConstants.js +45 -0
  163. package/es/global/js/utils/rangeWithCallback.js +13 -0
  164. package/es/global/js/utils/story-helper.js +5 -1
  165. package/es/global/js/utils/uuidv4.spec.js +4 -0
  166. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  167. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  168. package/lib/components/ActionSet/ActionSet.js +7 -3
  169. package/lib/components/AddSelect/AddSelect.js +5 -6
  170. package/lib/components/AddSelect/AddSelectBody.js +68 -31
  171. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  172. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  173. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  174. package/lib/components/AddSelect/AddSelectList.js +65 -30
  175. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  176. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  177. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  178. package/lib/components/AddSelect/add-select-utils.js +9 -2
  179. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  180. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  181. package/lib/components/AddSelect/hooks/usePath.js +16 -1
  182. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  183. package/lib/components/ButtonMenu/ButtonMenu.js +4 -3
  184. package/lib/components/Card/Card.js +16 -6
  185. package/lib/components/Card/CardFooter.js +3 -1
  186. package/lib/components/Card/CardHeader.js +21 -1
  187. package/lib/components/ComboButton/ComboButton.js +3 -3
  188. package/lib/components/CreateFullPage/CreateFullPage.js +13 -3
  189. package/lib/components/CreateTearsheet/CreateTearsheet.js +18 -3
  190. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  191. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  192. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +65 -14
  193. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  194. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  195. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  196. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +53 -0
  197. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  198. package/lib/components/Datagrid/Datagrid/Datagrid.js +19 -47
  199. package/lib/components/Datagrid/Datagrid/DatagridContent.js +230 -0
  200. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +19 -9
  201. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  202. package/lib/components/Datagrid/Datagrid/DatagridHead.js +1 -3
  203. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -5
  204. package/lib/components/Datagrid/Datagrid/DatagridRow.js +46 -8
  205. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +14 -6
  206. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  207. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -2
  208. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +14 -10
  209. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +33 -10
  210. package/lib/components/Datagrid/Datagrid/DraggableElement.js +12 -4
  211. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +11 -49
  212. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -8
  213. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +76 -46
  214. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +85 -48
  215. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +32 -36
  216. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
  217. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +284 -0
  218. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +301 -0
  219. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +112 -0
  220. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +47 -0
  221. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +39 -0
  222. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +325 -0
  223. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +37 -0
  224. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +50 -0
  225. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +35 -0
  226. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +37 -0
  227. package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +67 -0
  228. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +82 -0
  229. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  230. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  231. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +566 -0
  232. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  233. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  234. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  235. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  236. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  237. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  238. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +271 -0
  239. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  240. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  241. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  242. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -8
  243. package/lib/components/Datagrid/index.js +25 -1
  244. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  245. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  246. package/lib/components/Datagrid/useCustomizeColumns.js +12 -7
  247. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  248. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  249. package/lib/components/Datagrid/useFiltering.js +105 -0
  250. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  251. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  252. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  253. package/lib/components/Datagrid/useNestedRows.js +17 -4
  254. package/lib/components/Datagrid/useParentDimensions.js +3 -1
  255. package/lib/components/Datagrid/useRowExpander.js +17 -5
  256. package/lib/components/Datagrid/useRowSize.js +18 -13
  257. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  258. package/lib/components/Datagrid/useSelectRows.js +13 -4
  259. package/lib/components/Datagrid/useSortableColumns.js +16 -7
  260. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  261. package/lib/components/Datagrid/utils/DatagridActions.js +275 -0
  262. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  263. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  264. package/lib/components/Datagrid/utils/getArgTypes.js +102 -0
  265. package/lib/components/Datagrid/utils/getInlineEditColumns.js +174 -0
  266. package/lib/components/Datagrid/utils/makeData.js +56 -2
  267. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  268. package/lib/components/EditUpdateCards/index.js +13 -0
  269. package/lib/components/ExportModal/ExportModal.js +3 -3
  270. package/lib/components/FilterSummary/FilterSummary.js +72 -0
  271. package/lib/components/FilterSummary/index.js +15 -0
  272. package/lib/components/ImportModal/ImportModal.js +4 -4
  273. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  274. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  275. package/lib/components/InlineEditV1/index.js +13 -0
  276. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  277. package/lib/components/InlineEditV2/index.js +13 -0
  278. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  279. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  280. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  281. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  282. package/lib/components/OptionsTile/OptionsTile.js +36 -19
  283. package/lib/components/PageHeader/PageHeader.js +5 -5
  284. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  285. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  286. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  287. package/lib/components/Saving/Saving.js +5 -5
  288. package/lib/components/SidePanel/SidePanel.js +48 -53
  289. package/lib/components/SidePanel/motion/variants.js +55 -0
  290. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  291. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  292. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  293. package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
  294. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  295. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  296. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  297. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  298. package/lib/components/index.js +33 -1
  299. package/lib/global/js/hooks/index.js +9 -1
  300. package/lib/global/js/hooks/useClickOutside.js +1 -1
  301. package/lib/global/js/hooks/useControllableState.js +94 -0
  302. package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
  303. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  304. package/lib/global/js/package-settings.js +9 -6
  305. package/lib/global/js/utils/getBezierValues.js +29 -0
  306. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  307. package/lib/global/js/utils/motionConstants.js +55 -0
  308. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  309. package/lib/global/js/utils/story-helper.js +5 -1
  310. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  311. package/package.json +18 -16
  312. package/scss/components/ActionSet/_action-set.scss +9 -4
  313. package/scss/components/AddSelect/_add-select.scss +132 -34
  314. package/scss/components/AddSelect/_index.scss +1 -1
  315. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  316. package/scss/components/Card/_card.scss +1 -0
  317. package/scss/components/Cascade/_cascade.scss +1 -1
  318. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  319. package/scss/components/Datagrid/_datagrid.scss +7 -1
  320. package/scss/components/Datagrid/_storybook-styles.scss +29 -5
  321. package/scss/components/Datagrid/styles/_datagrid.scss +133 -41
  322. package/scss/components/Datagrid/styles/_draggableElement.scss +50 -18
  323. package/scss/components/Datagrid/styles/_index.scss +10 -8
  324. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  325. package/scss/components/Datagrid/styles/_useExpandedRow.scss +56 -10
  326. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  327. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  328. package/scss/components/Datagrid/styles/_useSortableColumns.scss +35 -16
  329. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  330. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +69 -0
  331. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  332. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
  333. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +12 -4
  334. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  335. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  336. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  337. package/scss/components/EditUpdateCards/_index.scss +8 -0
  338. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  339. package/scss/components/FilterSummary/_filter-summary.scss +21 -0
  340. package/scss/components/FilterSummary/_index.scss +10 -0
  341. package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
  342. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  343. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  344. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  345. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  346. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  347. package/scss/components/InlineEditV2/_index.scss +10 -0
  348. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  349. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  350. package/scss/components/MultiAddSelect/_multi-add-select.scss +8 -1
  351. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  352. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  353. package/scss/components/OptionsTile/_options-tile.scss +10 -3
  354. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  355. package/scss/components/SidePanel/_side-panel.scss +3 -82
  356. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  357. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  358. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  359. package/scss/components/SingleAddSelect/_index.scss +7 -0
  360. package/scss/components/SingleAddSelect/_single-add-select.scss +8 -1
  361. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  362. package/scss/components/Tearsheet/_tearsheet.scss +4 -2
  363. package/scss/components/_index-released-only-with-carbon.scss +3 -1
  364. package/scss/components/_index-released-only.scss +4 -1
  365. package/scss/components/_index-with-carbon.scss +3 -1
  366. package/scss/components/_index.scss +4 -1
  367. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -157
  368. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -62
  369. package/es/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js +0 -6
  370. package/lib/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js +0 -13
  371. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -52
  372. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  373. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  374. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  375. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  376. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  377. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  378. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  379. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  380. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  381. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  382. /package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  383. /package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
@@ -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 {
@@ -3768,6 +3619,7 @@
3768
3619
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3769
3620
  -webkit-box-orient: vertical;
3770
3621
  -webkit-line-clamp: 2;
3622
+ word-break: break-word;
3771
3623
  }
3772
3624
  @media (min-width: 42rem) {
3773
3625
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4226,6 +4078,16 @@
4226
4078
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
4227
4079
  }
4228
4080
 
4081
+ .c4p--filter-summary {
4082
+ display: flex;
4083
+ width: 100%;
4084
+ height: rem(48px);
4085
+ align-items: center;
4086
+ padding: 0.5rem;
4087
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4088
+ background: var(--cds-layer-01, #f4f4f4);
4089
+ }
4090
+
4229
4091
  .c4p--http-errors .c4p--http-errors__content {
4230
4092
  position: fixed;
4231
4093
  z-index: 2;
@@ -4443,7 +4305,6 @@
4443
4305
 
4444
4306
  /* stylelint-disable max-nesting-depth */
4445
4307
  .c4p--add-select__selections.cds--structured-list {
4446
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4447
4308
  margin-bottom: 0;
4448
4309
  }
4449
4310
  .c4p--add-select__selections-wrapper {
@@ -4451,8 +4312,11 @@
4451
4312
  }
4452
4313
  .c4p--add-select__selections-cell-wrapper {
4453
4314
  display: flex;
4315
+ height: 3rem;
4454
4316
  align-items: center;
4455
4317
  justify-content: space-between;
4318
+ padding: 0 1rem;
4319
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4456
4320
  }
4457
4321
  .c4p--add-select__selections-cell-title {
4458
4322
  display: block;
@@ -4466,17 +4330,21 @@
4466
4330
  display: block;
4467
4331
  color: var(--cds-text-secondary, #525252);
4468
4332
  }
4469
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4333
+ .c4p--add-select__selections-cell {
4334
+ display: flex;
4335
+ flex-direction: column;
4336
+ justify-content: center;
4337
+ }
4338
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
4339
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
4470
4340
  visibility: visible;
4471
4341
  }
4472
4342
  .c4p--add-select__selections-hidden-hover {
4473
4343
  visibility: hidden;
4474
4344
  }
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;
4345
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
4346
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4347
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4480
4348
  }
4481
4349
  .c4p--add-select__selections-checkbox {
4482
4350
  display: flex;
@@ -4484,7 +4352,7 @@
4484
4352
  }
4485
4353
  .c4p--add-select__selections-checkbox-label-wrapper {
4486
4354
  display: flex;
4487
- margin-left: 0.5rem;
4355
+ margin-left: 1rem;
4488
4356
  }
4489
4357
  .c4p--add-select__selections-checkbox-label-text {
4490
4358
  display: flex;
@@ -4502,6 +4370,13 @@
4502
4370
  .c4p--add-select__selections-cell-icon {
4503
4371
  margin-right: 0.5rem;
4504
4372
  }
4373
+ .c4p--add-select__selections-row {
4374
+ border-left: 0.125rem solid transparent;
4375
+ }
4376
+ .c4p--add-select__selections-row-meta--selected {
4377
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4378
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4379
+ }
4505
4380
 
4506
4381
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4507
4382
  color: var(--cds-interactive, #0f62fe);
@@ -4518,10 +4393,21 @@
4518
4393
  align-items: flex-end;
4519
4394
  justify-content: space-between;
4520
4395
  }
4396
+ .c4p--add-select__sub-header-multi {
4397
+ padding: 0 1rem;
4398
+ }
4399
+
4400
+ .c4p--add-select .cds--structured-list-row {
4401
+ border-bottom: 0;
4402
+ }
4403
+
4404
+ .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) {
4405
+ border-bottom: 0;
4406
+ }
4521
4407
 
4522
4408
  .c4p--add-select__sidebar-header {
4523
4409
  display: flex;
4524
- padding: 1.5rem 1rem 0.5rem 1rem;
4410
+ padding: 2rem 1rem 0.5rem 1rem;
4525
4411
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4526
4412
  }
4527
4413
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4547,7 +4433,7 @@
4547
4433
  }
4548
4434
 
4549
4435
  .c4p--add-select__sidebar-body {
4550
- padding: 1rem;
4436
+ padding: 0 1rem;
4551
4437
  }
4552
4438
 
4553
4439
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4580,18 +4466,44 @@
4580
4466
  .c4p--add-select__columns {
4581
4467
  display: flex;
4582
4468
  flex-direction: row;
4469
+ flex-grow: 1;
4583
4470
  overflow-x: auto;
4584
4471
  }
4472
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4473
+ margin-left: 0.5rem;
4474
+ }
4475
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
4476
+ border-left: 0;
4477
+ }
4478
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4479
+ padding: 0;
4480
+ }
4481
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4482
+ height: auto;
4483
+ padding: 0 0.5rem;
4484
+ }
4485
+ .c4p--add-select__columns .c4p--add-select__tags {
4486
+ padding: 0 0.5rem;
4487
+ margin-bottom: 0;
4488
+ }
4489
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4490
+ padding: 0;
4491
+ }
4492
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
4493
+ border-top: 0;
4494
+ }
4585
4495
 
4586
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4587
- height: 0;
4588
- padding: 0 !important;
4496
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4497
+ padding: 0 1rem;
4498
+ }
4499
+
4500
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4501
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4589
4502
  }
4590
4503
 
4591
4504
  .c4p--add-select__column {
4592
4505
  overflow: auto;
4593
- max-width: 15rem;
4594
- flex: 1 0 15rem;
4506
+ flex: 0 0 20rem;
4595
4507
  padding: 1rem;
4596
4508
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4597
4509
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4609,13 +4521,13 @@
4609
4521
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4610
4522
  }
4611
4523
 
4612
- .c4p--add-select__tag-container {
4524
+ .c4p--add-select__tags {
4613
4525
  display: flex;
4614
4526
  align-items: center;
4615
4527
  margin-top: 1rem;
4616
4528
  margin-bottom: 0.5rem;
4617
4529
  }
4618
- .c4p--add-select__tag-container-label {
4530
+ .c4p--add-select__tags-label {
4619
4531
  margin-right: 0.5rem;
4620
4532
  }
4621
4533
 
@@ -4690,13 +4602,6 @@ button.c4p--add-select__global-filter-toggle--open {
4690
4602
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4691
4603
  }
4692
4604
 
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
4605
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4701
4606
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4702
4607
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4704,13 +4609,16 @@ button.c4p--add-select__global-filter-toggle--open {
4704
4609
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4705
4610
  }
4706
4611
 
4707
- .c4p--add-select__tag-container .cds--tag {
4612
+ .c4p--add-select__selections .cds--list-box__menu {
4613
+ left: auto;
4614
+ }
4615
+
4616
+ .c4p--add-select__tags .cds--tag {
4708
4617
  margin: 0;
4709
4618
  }
4710
4619
 
4711
4620
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4712
- max-width: 29rem;
4713
- flex: 0 0 50%;
4621
+ flex-basis: 22.5rem;
4714
4622
  }
4715
4623
 
4716
4624
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4722,6 +4630,10 @@ button.c4p--add-select__global-filter-toggle--open {
4722
4630
  flex-direction: column;
4723
4631
  }
4724
4632
 
4633
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4634
+ max-width: 11.25rem;
4635
+ }
4636
+
4725
4637
  .c4p--add-select .c4p--add-select__items-label {
4726
4638
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4727
4639
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4762,8 +4674,35 @@ button.c4p--add-select__global-filter-toggle--open {
4762
4674
  padding-left: 0.5rem;
4763
4675
  }
4764
4676
 
4765
- .cds--tooltip,
4766
- .cds--overflow-menu-options {
4677
+ .c4p--add-select__multi .c4p--empty-state {
4678
+ max-width: 16rem;
4679
+ margin-top: 3rem;
4680
+ }
4681
+
4682
+ .c4p--add-select .cds--accordion__arrow {
4683
+ transform: rotate(0deg);
4684
+ }
4685
+
4686
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4687
+ transform: rotate(90deg);
4688
+ }
4689
+
4690
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
4691
+ margin: 0 0 0 1rem;
4692
+ }
4693
+
4694
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
4695
+ margin: 0 1rem 0 0.5rem;
4696
+ }
4697
+
4698
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
4699
+ padding-top: 0;
4700
+ padding-bottom: 0;
4701
+ margin-top: 0.5rem;
4702
+ }
4703
+
4704
+ .c4p--add-select .cds--tooltip,
4705
+ .c4p--add-select .cds--overflow-menu-options {
4767
4706
  z-index: 9000;
4768
4707
  }
4769
4708
 
@@ -5150,8 +5089,7 @@ button.c4p--add-select__global-filter-toggle--open {
5150
5089
  max-height: 38.5rem;
5151
5090
  background-color: var(--cds-background, #ffffff);
5152
5091
  color: var(--cds-text-primary, #161616);
5153
- transition: transform 110ms;
5154
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5092
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5155
5093
  }
5156
5094
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5157
5095
  position: sticky;
@@ -5225,8 +5163,7 @@ button.c4p--add-select__global-filter-toggle--open {
5225
5163
  background-color: var(--cds-background, #ffffff);
5226
5164
  cursor: pointer;
5227
5165
  text-align: left;
5228
- transition: background-color 240ms;
5229
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5166
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5230
5167
  }
5231
5168
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5232
5169
  margin-bottom: 0.25rem;
@@ -5339,8 +5276,7 @@ button.c4p--add-select__global-filter-toggle--open {
5339
5276
  margin: 0 auto;
5340
5277
  background-color: var(--cds-layer-02, #ffffff);
5341
5278
  content: "";
5342
- transition: background-color 240ms;
5343
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5279
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5344
5280
  }
5345
5281
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5346
5282
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7882,10 +7818,6 @@ button.c4p--add-select__global-filter-toggle--open {
7882
7818
  padding-right: 1rem;
7883
7819
  }
7884
7820
 
7885
- .c4p--remove-modal .cds--modal-close {
7886
- display: none;
7887
- }
7888
-
7889
7821
  .c4p--remove-modal__body {
7890
7822
  padding-right: 20%;
7891
7823
  margin-bottom: 1rem;
@@ -9570,12 +9502,19 @@ button.c4p--add-select__global-filter-toggle--open {
9570
9502
  }
9571
9503
 
9572
9504
  .c4p--options-tile {
9573
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
9574
- background-color: var(--cds-layer-01, #f4f4f4);
9505
+ position: relative;
9506
+ border-bottom: 1px solid var(--cds-border-subtle);
9507
+ background-color: var(--cds-layer);
9575
9508
  }
9576
9509
 
9577
9510
  .c4p--options-tile__toggle-container {
9578
- position: relative;
9511
+ position: absolute;
9512
+ top: 0;
9513
+ right: 0;
9514
+ bottom: 0;
9515
+ width: calc(
9516
+ 1rem + 2rem + 1rem
9517
+ );
9579
9518
  }
9580
9519
 
9581
9520
  .c4p--options-tile__toggle {
@@ -9829,7 +9768,9 @@ button.c4p--add-select__global-filter-toggle--open {
9829
9768
  display: inline-block;
9830
9769
  overflow: hidden;
9831
9770
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9832
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9771
+ max-width: calc(
9772
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9773
+ );
9833
9774
  min-height: var(--c4p--inline-edit--size);
9834
9775
  /* stylelint-disable-next-line carbon/layout-token-use */
9835
9776
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10032,24 +9973,92 @@ button.c4p--add-select__global-filter-toggle--open {
10032
9973
  color: var(--cds-support-error, #da1e28);
10033
9974
  }
10034
9975
 
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 */
9976
+ .c4p--inline-edit-v2 {
9977
+ display: flex;
9978
+ align-items: center;
9979
+ background: transparent;
9980
+ cursor: pointer;
10040
9981
  }
10041
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10042
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
9982
+
9983
+ .c4p--inline-edit-v2-readonly {
9984
+ cursor: not-allowed;
10043
9985
  }
10044
- .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10045
- position: relative;
9986
+
9987
+ .c4p--inline-edit-v2:hover {
9988
+ background: var(--cds-field-01, #f4f4f4);
10046
9989
  }
10047
- .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10048
- border-bottom: 0;
9990
+
9991
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9992
+ visibility: visible;
10049
9993
  }
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);
9994
+
9995
+ .c4p--inline-edit-v2__btn-edit {
9996
+ visibility: hidden;
9997
+ }
9998
+
9999
+ .c4p--inline-edit-v2-focused {
10000
+ background: var(--cds-field-01, #f4f4f4);
10001
+ outline: 2px solid var(--cds-focus, #0f62fe);
10002
+ }
10003
+
10004
+ .c4p--inline-edit-v2__text-input {
10005
+ flex: 1;
10006
+ }
10007
+
10008
+ .c4p--inline-edit-v2__text-input-label {
10009
+ display: none;
10010
+ }
10011
+
10012
+ .c4p--inline-edit-v2__warning-icon {
10013
+ /* stylelint-disable-next-line carbon/layout-token-use */
10014
+ margin-right: 0.4375rem;
10015
+ color: var(--cds-support-error, #da1e28);
10016
+ }
10017
+
10018
+ .c4p--inline-edit-v2__warning-text {
10019
+ font-size: var(--cds-label-01-font-size, 0.75rem);
10020
+ font-weight: var(--cds-label-01-font-weight, 400);
10021
+ line-height: var(--cds-label-01-line-height, 1.33333);
10022
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
10023
+ margin-top: 0.5rem;
10024
+ color: var(--cds-support-error, #da1e28);
10025
+ }
10026
+
10027
+ .c4p--inline-edit-v2__text-input.cds--text-input {
10028
+ border: none;
10029
+ background: transparent;
10030
+ cursor: pointer;
10031
+ outline: none;
10032
+ }
10033
+
10034
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
10035
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
10036
+ cursor: not-allowed;
10037
+ }
10038
+
10039
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
10040
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
10041
+ outline: none;
10042
+ }
10043
+
10044
+ .c4p--data-spreadsheet {
10045
+ --c4p--data-spreadsheet--total-width: 0;
10046
+ display: inline-block;
10047
+ border-spacing: 0;
10048
+ /* stylelint-disable-next-line max-nesting-depth */
10049
+ }
10050
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10051
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
10052
+ }
10053
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10054
+ position: relative;
10055
+ }
10056
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10057
+ border-bottom: 0;
10058
+ }
10059
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
10060
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10061
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
10053
10062
  font-weight: var(--cds-body-short-01-font-weight, 400);
10054
10063
  line-height: var(--cds-body-short-01-line-height, 1.28572);
10055
10064
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
@@ -10320,6 +10329,11 @@ button.c4p--add-select__global-filter-toggle--open {
10320
10329
  align-items: center;
10321
10330
  color: var(--cds-text-primary, #161616);
10322
10331
  }
10332
+ .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 {
10333
+ position: sticky;
10334
+ z-index: 1;
10335
+ left: 0;
10336
+ }
10323
10337
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10324
10338
  align-items: center;
10325
10339
  padding-top: 0;
@@ -10336,6 +10350,11 @@ button.c4p--add-select__global-filter-toggle--open {
10336
10350
  align-items: center;
10337
10351
  padding-top: 0;
10338
10352
  }
10353
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10354
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10355
+ position: sticky;
10356
+ left: 0;
10357
+ }
10339
10358
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10340
10359
  display: flex;
10341
10360
  height: 100%;
@@ -10395,9 +10414,12 @@ button.c4p--add-select__global-filter-toggle--open {
10395
10414
  height: 100%;
10396
10415
  overflow-x: auto;
10397
10416
  }
10398
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10399
- overflow: hidden;
10417
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10418
+ display: flex;
10419
+ overflow: auto;
10400
10420
  max-height: 100%;
10421
+ flex-direction: column;
10422
+ background-color: var(--cds-layer-01, #f4f4f4);
10401
10423
  }
10402
10424
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10403
10425
  display: flex;
@@ -10485,10 +10507,6 @@ button.c4p--add-select__global-filter-toggle--open {
10485
10507
  flex: 1 1 auto;
10486
10508
  }
10487
10509
 
10488
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10489
- border-bottom: none;
10490
- }
10491
-
10492
10510
  .c4p--datagrid__resizer {
10493
10511
  position: absolute;
10494
10512
  z-index: 1;
@@ -10528,6 +10546,12 @@ button.c4p--add-select__global-filter-toggle--open {
10528
10546
  .c4p--datagrid__head-hidden-select-all {
10529
10547
  padding-right: 2.5rem;
10530
10548
  }
10549
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10550
+ position: sticky;
10551
+ z-index: 1;
10552
+ left: 0;
10553
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10554
+ }
10531
10555
 
10532
10556
  .c4p--datagrid__simple-body {
10533
10557
  position: relative;
@@ -10551,15 +10575,6 @@ button.c4p--add-select__global-filter-toggle--open {
10551
10575
  min-width: 0 !important;
10552
10576
  }
10553
10577
 
10554
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10555
- width: 6px;
10556
- background-color: var(--cds-background, #ffffff);
10557
- }
10558
-
10559
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10560
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10561
- }
10562
-
10563
10578
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10564
10579
  overflow: auto;
10565
10580
  }
@@ -10578,39 +10593,35 @@ button.c4p--add-select__global-filter-toggle--open {
10578
10593
  flex-direction: row;
10579
10594
  }
10580
10595
 
10581
- .c4p--datagrid__datagridLeftPanel {
10582
- display: flex;
10583
- width: 388px;
10584
- background-color: var(--cds-layer-01, #f4f4f4);
10585
- }
10586
-
10587
- .c4p--datagrid__leftPanel-position {
10588
- display: inherit;
10596
+ .c4p--datagrid__table-container-inner {
10597
+ overflow: hidden;
10598
+ flex: 1;
10589
10599
  }
10590
10600
 
10591
10601
  .c4p--datagrid__datagridWithPanel {
10592
10602
  position: relative;
10593
10603
  display: flex;
10594
- width: 100%;
10595
10604
  height: 100%;
10596
10605
  flex-direction: column;
10597
10606
  }
10598
10607
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
10599
10608
  display: flex;
10600
- overflow: hidden;
10609
+ overflow: visible;
10601
10610
  flex-direction: column;
10602
10611
  }
10603
10612
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
10604
10613
  width: 100%;
10605
10614
  }
10606
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
10607
- flex: 0 0 auto;
10615
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
10616
+ display: flex;
10617
+ overflow: visible;
10618
+ background-color: var(--cds-layer-01, #f4f4f4);
10608
10619
  }
10609
- .c4p--datagrid__datagridWithPanel .cds--data-table-content {
10610
- flex: 1 1 0%;
10620
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
10621
+ border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
10611
10622
  }
10612
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
10613
- overflow: hidden;
10623
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
10624
+ height: 100%;
10614
10625
  }
10615
10626
 
10616
10627
  .c4p--datagrid__table-container {
@@ -10619,10 +10630,25 @@ button.c4p--add-select__global-filter-toggle--open {
10619
10630
  overflow: auto;
10620
10631
  width: 100%;
10621
10632
  max-height: 100%;
10633
+ overflow-y: auto;
10622
10634
  }
10623
10635
 
10624
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
10625
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
10636
+ .c4p--datagrid__carbon-row-expanded {
10637
+ position: relative;
10638
+ }
10639
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
10640
+ position: absolute;
10641
+ z-index: 2;
10642
+ /* stylelint-disable-next-line carbon/layout-token-use */
10643
+ top: var(--c4p--datagrid--row-height);
10644
+ /* stylelint-disable-next-line carbon/layout-token-use */
10645
+ left: calc(
10646
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
10647
+ );
10648
+ width: 1px;
10649
+ height: var(--c4p--datagrid--indicator-height);
10650
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
10651
+ content: "";
10626
10652
  }
10627
10653
 
10628
10654
  .c4p--datagrid .cds--data-table-header {
@@ -10638,7 +10664,9 @@ button.c4p--add-select__global-filter-toggle--open {
10638
10664
  padding-bottom: 1rem;
10639
10665
  }
10640
10666
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
10641
- flex: 0 0 auto;
10667
+ display: flex;
10668
+ flex: 1 0 auto;
10669
+ align-items: flex-end;
10642
10670
  }
10643
10671
  .c4p--datagrid__dense-header .cds--table-toolbar {
10644
10672
  background: transparent;
@@ -10646,9 +10674,6 @@ button.c4p--add-select__global-filter-toggle--open {
10646
10674
  .c4p--datagrid__dense-header .cds__table-container {
10647
10675
  flex: 1 1 100%;
10648
10676
  }
10649
- .c4p--datagrid__dense-header .cds--table-toolbar {
10650
- padding-top: 2rem;
10651
- }
10652
10677
  .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
10653
10678
  position: relative;
10654
10679
  }
@@ -10669,6 +10694,7 @@ button.c4p--add-select__global-filter-toggle--open {
10669
10694
 
10670
10695
  .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
10671
10696
  position: absolute;
10697
+ top: 0;
10672
10698
  left: 0;
10673
10699
  width: 0.25rem;
10674
10700
  height: 100%;
@@ -10707,10 +10733,84 @@ button.c4p--add-select__global-filter-toggle--open {
10707
10733
  margin: 0;
10708
10734
  }
10709
10735
 
10736
+ .c4p--datagrid .c4p--button-menu {
10737
+ height: 3rem;
10738
+ }
10739
+
10740
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10741
+ display: flex;
10742
+ width: 3rem;
10743
+ height: 3rem;
10744
+ justify-content: center;
10745
+ }
10746
+
10747
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
10748
+ flex: 0 0 auto;
10749
+ margin-right: 0.5rem;
10750
+ }
10751
+
10752
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
10753
+ width: 10px;
10754
+ height: 7px;
10755
+ }
10756
+
10757
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
10758
+ background: var(--cds-layer);
10759
+ }
10760
+
10761
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
10762
+ border-radius: 5px;
10763
+ }
10764
+
10765
+ .c4p--datagrid__virtualScrollContainer {
10766
+ width: 100%;
10767
+ }
10768
+
10769
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10770
+ overflow: hidden;
10771
+ height: 100vh;
10772
+ }
10773
+
10774
+ .c4p--datagrid .cds--modal {
10775
+ width: 100%;
10776
+ }
10777
+
10778
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
10779
+ flex-shrink: 0;
10780
+ background-color: var(--cds-interactive, #0f62fe);
10781
+ }
10782
+
10783
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
10784
+ fill: var(--cds-background, #ffffff);
10785
+ }
10786
+
10787
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
10788
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
10789
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
10790
+ background-color: var(--cds-button-primary-hover, #0050e6);
10791
+ }
10792
+
10793
+ .c4p--datagrid__toolbar-options.c4p--datagrid__toolbar-options {
10794
+ background-color: var(--cds-layer-02, #ffffff);
10795
+ }
10796
+
10797
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
10798
+ background-color: transparent;
10799
+ }
10800
+
10801
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
10802
+ position: absolute;
10803
+ }
10804
+
10805
+ .c4p--datagrid__table-toolbar--sm .c4p--filter-summary,
10806
+ .c4p--datagrid__table-toolbar--xs .c4p--filter-summary {
10807
+ padding: 0 0.5rem;
10808
+ }
10809
+
10710
10810
  /*
10711
10811
  * Licensed Materials - Property of IBM
10712
10812
  * 5724-Q36
10713
- * (c) Copyright IBM Corp. 2020 - 2021
10813
+ * (c) Copyright IBM Corp. 2020 - 2022
10714
10814
  * US Government Users Restricted Rights - Use, duplication or disclosure
10715
10815
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10716
10816
  */
@@ -10721,6 +10821,33 @@ button.c4p--add-select__global-filter-toggle--open {
10721
10821
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10722
10822
  }
10723
10823
 
10824
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10825
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10826
+ }
10827
+
10828
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10829
+ transform: rotate(90deg);
10830
+ }
10831
+
10832
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10833
+ border-bottom: none;
10834
+ }
10835
+
10836
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
10837
+ position: relative;
10838
+ }
10839
+
10840
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
10841
+ position: absolute;
10842
+ /* stylelint-disable-next-line carbon/layout-token-use */
10843
+ top: -1px;
10844
+ left: 0;
10845
+ width: 100%;
10846
+ height: 1px;
10847
+ background-color: var(--cds-border-subtle);
10848
+ content: "";
10849
+ }
10850
+
10724
10851
  /*
10725
10852
  * Licensed Materials - Property of IBM
10726
10853
  * 5724-Q36
@@ -10745,13 +10872,12 @@ button.c4p--add-select__global-filter-toggle--open {
10745
10872
  background-color: var(--cds-layer-accent-01, #e0e0e0);
10746
10873
  }
10747
10874
 
10748
- /*
10749
- * Licensed Materials - Property of IBM
10750
- * 5724-Q36
10751
- * (c) Copyright IBM Corp. 2020
10752
- * US Government Users Restricted Rights - Use, duplication or disclosure
10753
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10754
- */
10875
+ /**
10876
+ * Copyright IBM Corp. 2020, 2023
10877
+ *
10878
+ * This source code is licensed under the Apache-2.0 license found in the
10879
+ * LICENSE file in the root directory of this source tree.
10880
+ */
10755
10881
  .c4p--datagrid__sortableColumn .cds--table-header-label .header-title {
10756
10882
  display: inline-block;
10757
10883
  width: auto;
@@ -10761,36 +10887,43 @@ button.c4p--add-select__global-filter-toggle--open {
10761
10887
  width: 100%;
10762
10888
  height: 100%;
10763
10889
  }
10764
- .c4p--datagrid__sortableColumn .cds--table-header-label button:focus,
10765
- .c4p--datagrid__sortableColumn .cds--table-header-label button:active,
10890
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus,
10891
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active,
10766
10892
  .c4p--datagrid__sortableColumn .cds--table-header-label button:focus svg {
10767
10893
  /* stylelint-disable-next-line declaration-no-important */
10768
10894
  background: none !important;
10769
10895
  /* stylelint-disable-next-line declaration-no-important */
10770
10896
  color: var(--cds-text-primary, #161616) !important;
10771
- /* stylelint-disable-next-line declaration-no-important */
10772
- outline: none !important;
10773
10897
  }
10774
- .c4p--datagrid__sortableColumn .cds--table-header-label button {
10898
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus + .c4p--datagrid__resizer,
10899
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active + .c4p--datagrid__resizer {
10900
+ z-index: -1;
10901
+ }
10902
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort {
10775
10903
  width: 100%;
10776
10904
  min-width: 100%;
10777
- min-height: 0;
10778
- padding: 0;
10905
+ padding: 0 1rem;
10779
10906
  border: none;
10780
10907
  /* stylelint-disable-next-line declaration-no-important */
10781
10908
  background: none !important;
10782
- box-shadow: none;
10783
10909
  /* stylelint-disable-next-line declaration-no-important */
10784
10910
  color: var(--cds-text-primary, #161616) !important;
10785
10911
  font: inherit;
10786
10912
  }
10787
- .c4p--datagrid__sortableColumn .cds--table-header-label button svg {
10913
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort svg {
10788
10914
  fill: var(--cds-text-primary, #161616);
10915
+ opacity: 0;
10789
10916
  visibility: hidden;
10790
10917
  }
10918
+ .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
10919
+ width: calc(100% + 2rem);
10920
+ margin: 0 calc(-1 * 1rem);
10921
+ }
10791
10922
 
10792
10923
  .c4p--datagrid__sortableColumn:hover .cds--table-header-label svg,
10924
+ .c4p--datagrid__sortableColumn:focus-within .cds--table-header-label svg,
10793
10925
  .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label svg {
10926
+ opacity: 1;
10794
10927
  visibility: visible;
10795
10928
  }
10796
10929
 
@@ -10817,242 +10950,904 @@ button.c4p--add-select__global-filter-toggle--open {
10817
10950
  text-align: right;
10818
10951
  }
10819
10952
 
10820
- .c4p--datagrid__right-align-cell-renderer.sortDisabled {
10821
- padding-right: 0;
10953
+ .c4p--datagrid__right-align-cell-renderer.sortDisabled {
10954
+ padding-right: 0;
10955
+ }
10956
+
10957
+ /*
10958
+ * Licensed Materials - Property of IBM
10959
+ * 5724-Q36
10960
+ * (c) Copyright IBM Corp. 2020
10961
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10962
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10963
+ */
10964
+ .c4p--datagrid__center-align-header {
10965
+ width: 100%;
10966
+ text-align: center;
10967
+ }
10968
+
10969
+ .c4p--datagrid__center-align-cell-renderer.sortDisabled {
10970
+ margin-right: auto;
10971
+ margin-left: auto;
10972
+ }
10973
+
10974
+ /*
10975
+ * Licensed Materials - Property of IBM
10976
+ * 5724-Q36
10977
+ * (c) Copyright IBM Corp. 2021
10978
+ * US Government Users Restricted Rights - Use, duplication or disclosure
10979
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
10980
+ */
10981
+ .c4p--datagrid__right-sticky-column-cell {
10982
+ /* stylelint-disable-next-line declaration-no-important */
10983
+ position: sticky !important;
10984
+ right: 0;
10985
+ display: flex;
10986
+ align-items: center;
10987
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10988
+ }
10989
+
10990
+ .c4p--datagrid__right-sticky-column-header {
10991
+ /* stylelint-disable-next-line declaration-no-important */
10992
+ position: sticky !important;
10993
+ right: 0;
10994
+ }
10995
+
10996
+ .c4p--datagrid__left-sticky-column-cell {
10997
+ /* stylelint-disable-next-line declaration-no-important */
10998
+ position: sticky !important;
10999
+ left: 0;
11000
+ display: flex;
11001
+ align-items: center;
11002
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11003
+ }
11004
+
11005
+ .c4p--datagrid__left-sticky-column-header {
11006
+ /* stylelint-disable-next-line declaration-no-important */
11007
+ position: sticky !important;
11008
+ z-index: 1;
11009
+ left: 0;
11010
+ }
11011
+
11012
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
11013
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
11014
+ left: 2.5rem;
11015
+ }
11016
+
11017
+ .c4p--datagrid__sticky-noShadow {
11018
+ box-shadow: none;
11019
+ }
11020
+
11021
+ .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
11022
+ box-shadow: none;
11023
+ }
11024
+
11025
+ .c4p--datagrid__right-sticky-column-offset-scroll {
11026
+ /* stylelint-disable-next-line */
11027
+ right: 6px !important;
11028
+ }
11029
+
11030
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
11031
+ position: sticky;
11032
+ z-index: 1;
11033
+ left: 0;
11034
+ }
11035
+
11036
+ /*
11037
+ * Licensed Materials - Property of IBM
11038
+ * 5724-Q36
11039
+ * (c) Copyright IBM Corp. 2021
11040
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11041
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11042
+ */
11043
+ .c4p--datagrid__actions-column-cell {
11044
+ display: flex;
11045
+ flex-flow: column;
11046
+ justify-content: center;
11047
+ }
11048
+
11049
+ .c4p--datagrid__actions-column-content {
11050
+ display: flex;
11051
+ justify-content: center;
11052
+ }
11053
+
11054
+ .c4p--datagrid__actions-column-loading {
11055
+ margin-bottom: 0.5rem;
11056
+ }
11057
+
11058
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11059
+ cursor: not-allowed;
11060
+ }
11061
+
11062
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11063
+ pointer-events: none;
11064
+ }
11065
+
11066
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11067
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11068
+ }
11069
+
11070
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
11071
+ display: flex;
11072
+ flex-flow: column;
11073
+ }
11074
+
11075
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
11076
+ height: 3rem;
11077
+ padding-left: 3rem;
11078
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
11079
+ }
11080
+
11081
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11082
+ display: flex;
11083
+ justify-content: center;
11084
+ padding-left: 0.25rem;
11085
+ }
11086
+
11087
+ .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
11088
+ margin-bottom: 0;
11089
+ }
11090
+
11091
+ .c4p--datagrid__customize-columns-column-list {
11092
+ position: relative;
11093
+ overflow: auto;
11094
+ }
11095
+
11096
+ .c4p--datagrid__customize-columns-select-all,
11097
+ .c4p--datagrid__customize-columns-select-all--selected {
11098
+ position: sticky;
11099
+ z-index: 1;
11100
+ top: 0;
11101
+ display: flex;
11102
+ height: 3rem;
11103
+ padding-left: 2.5rem;
11104
+ border-bottom: 1px solid var(--cds-layer-active);
11105
+ background-color: var(--cds-layer);
11106
+ }
11107
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
11108
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
11109
+ font-weight: 600;
11110
+ }
11111
+
11112
+ .c4p--datagrid__customize-columns-select-all:hover {
11113
+ background-color: var(--cds-layer-hover);
11114
+ }
11115
+
11116
+ .c4p--datagrid__customize-columns-select-all--selected {
11117
+ background-color: var(--cds-layer-selected);
11118
+ }
11119
+
11120
+ /*
11121
+ * Licensed Materials - Property of IBM
11122
+ * 5724-Q36
11123
+ * (c) Copyright IBM Corp. 2021
11124
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11125
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11126
+ */
11127
+ .c4p--datagrid__row-size-dropdown {
11128
+ padding: 1rem;
11129
+ background-color: var(--cds-layer-02, #ffffff);
11130
+ 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));
11131
+ }
11132
+
11133
+ .cds--btn--ghost.c4p--datagrid__row-size-button--open {
11134
+ background-color: var(--cds-layer-02, #ffffff);
11135
+ 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));
11136
+ }
11137
+
11138
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11139
+ /* stylelint-disable-next-line carbon/layout-token-use */
11140
+ left: -4px;
11141
+ }
11142
+
11143
+ /*
11144
+ * Licensed Materials - Property of IBM
11145
+ * 5724-Q36
11146
+ * (c) Copyright IBM Corp. 2022
11147
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11148
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11149
+ */
11150
+ .c4p--datagrid-filter-flyout__container {
11151
+ position: relative;
11152
+ }
11153
+
11154
+ .c4p--datagrid-filter-flyout {
11155
+ position: absolute;
11156
+ top: 3rem;
11157
+ right: 0;
11158
+ display: none;
11159
+ width: 40.125rem;
11160
+ background-color: var(--cds-layer-02, #ffffff);
11161
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
11162
+ }
11163
+
11164
+ .c4p--datagrid-filter-flyout--open {
11165
+ display: grid;
11166
+ }
11167
+
11168
+ .c4p--datagrid-filter-flyout--batch {
11169
+ min-height: 21.625rem;
11170
+ grid-template-rows: 1fr 3rem;
11171
+ }
11172
+
11173
+ .c4p--datagrid-filter-flyout--instant {
11174
+ min-height: 17.625rem;
11175
+ grid-template-rows: 1fr;
11176
+ }
11177
+
11178
+ .c4p--datagrid-filter-flyout__inner-container {
11179
+ padding: 1rem 1rem 3rem 1rem;
11180
+ }
11181
+
11182
+ .c4p--datagrid-filter-flyout__inner-container::before {
11183
+ position: absolute;
11184
+ top: -0.4375rem;
11185
+ right: 1px;
11186
+ display: block;
11187
+ width: 2.875rem;
11188
+ height: 0.9375rem;
11189
+ background-color: var(--cds-layer-02, #ffffff);
11190
+ content: "";
11191
+ }
11192
+
11193
+ .c4p--datagrid-filter-flyout__title {
11194
+ display: block;
11195
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11196
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11197
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11198
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
11199
+ margin-bottom: 1.5rem;
11200
+ }
11201
+
11202
+ .c4p--datagrid-filter-flyout__filters {
11203
+ display: grid;
11204
+ gap: 1rem 2rem;
11205
+ grid-template-columns: 1fr 1fr;
11206
+ }
11207
+
11208
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
11209
+ position: relative;
11210
+ background-color: var(--cds-layer-02, #ffffff);
11211
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
11212
+ }
11213
+
11214
+ .c4p--datagrid-filter-flyout .cds--fieldset {
11215
+ margin-bottom: 0;
11216
+ }
11217
+
11218
+ /*
11219
+ * Licensed Materials - Property of IBM
11220
+ * 5724-Q36
11221
+ * (c) Copyright IBM Corp. 2022
11222
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11223
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11224
+ */
11225
+ .c4p--datagrid-filter-panel__container {
11226
+ position: relative;
11227
+ width: rem(320px);
11228
+ height: clamp(var(--filter-panel-min-height), 100%, 100vh);
11229
+ border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
11230
+ background-color: var(--cds-layer-01, #f4f4f4);
11231
+ }
11232
+
11233
+ .c4p--datagrid-filter-panel--open {
11234
+ border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
11235
+ }
11236
+
11237
+ .c4p--datagrid-filter-panel__container::before {
11238
+ position: absolute;
11239
+ top: -1px;
11240
+ left: 0;
11241
+ display: block;
11242
+ width: rem(47px);
11243
+ height: 1px;
11244
+ background-color: var(--cds-layer-01, #f4f4f4);
11245
+ content: "";
11246
+ }
11247
+
11248
+ .c4p--datagrid-filter-panel__inner-container {
11249
+ position: relative;
11250
+ z-index: 0;
11251
+ overflow: auto;
11252
+ padding: 0 1rem;
11253
+ overscroll-behavior: contain;
11254
+ }
11255
+
11256
+ .c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
11257
+ padding-bottom: 5rem;
11258
+ }
11259
+
11260
+ .c4p--datagrid-filter-panel {
11261
+ position: sticky;
11262
+ top: 0;
11263
+ }
11264
+
11265
+ .c4p--datagrid-filter-panel__heading {
11266
+ display: flex;
11267
+ justify-content: space-between;
11268
+ padding-left: 1rem;
11269
+ border-bottom: 1px solid transparent;
11270
+ }
11271
+
11272
+ .c4p--datagrid-filter-panel__heading--with-divider {
11273
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11274
+ }
11275
+
11276
+ .c4p--datagrid-filter-panel__title {
11277
+ padding: 1rem 0;
11278
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
11279
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
11280
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
11281
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
11282
+ }
11283
+
11284
+ .c4p--datagrid-filter-panel__search {
11285
+ padding: 0 1rem 1.5rem;
11286
+ }
11287
+
11288
+ .c4p--datagrid-filter-panel__category-title {
11289
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11290
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11291
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11292
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
11293
+ margin-bottom: 1rem;
11294
+ color: var(--cds-text-secondary, #525252);
11295
+ }
11296
+
11297
+ .c4p--datagrid-filter-panel__category {
11298
+ padding-bottom: 1.5rem;
11299
+ }
11300
+
11301
+ .c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
11302
+ margin-bottom: 1rem;
11303
+ }
11304
+
11305
+ .c4p--datagrid-filter-panel__action-set {
11306
+ position: sticky;
11307
+ z-index: 1;
11308
+ bottom: 0;
11309
+ height: rem(64px);
11310
+ margin-top: auto;
11311
+ }
11312
+
11313
+ .c4p--datagrid-filter-panel__container .cds--accordion__title {
11314
+ margin: 0;
11315
+ }
11316
+
11317
+ .c4p--datagrid-filter-panel__container .cds--accordion__arrow {
11318
+ margin: 0.125rem 0 0;
11319
+ }
11320
+
11321
+ .c4p--datagrid-filter-panel__container .cds--accordion__content {
11322
+ padding-right: 0;
11323
+ padding-left: 0;
11324
+ }
11325
+
11326
+ .c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
11327
+ margin-bottom: 1rem;
11328
+ }
11329
+
11330
+ .cds--btn.c4p--datagrid-filter-panel-open-button {
11331
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11332
+ border-bottom: none;
11333
+ }
11334
+
11335
+ /*
11336
+ * Licensed Materials - Property of IBM
11337
+ * 5724-Q36
11338
+ * (c) Copyright IBM Corp. 2021
11339
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11340
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11341
+ */
11342
+ th.c4p--datagrid__select-all-toggle-on,
11343
+ td.c4p--datagrid__select-all-toggle-on {
11344
+ /* stylelint-disable-next-line declaration-no-important */
11345
+ width: 4.5rem !important;
11346
+ /* stylelint-disable-next-line declaration-no-important */
11347
+ min-width: initial !important;
11348
+ box-sizing: border-box;
11349
+ flex: 0 0 auto;
11350
+ }
11351
+
11352
+ th.c4p--datagrid__select-all-toggle-on {
11353
+ display: flex;
11354
+ align-items: center;
11355
+ justify-content: center;
11356
+ }
11357
+
11358
+ th.c4p--datagrid__select-all-toggle-on.button {
11359
+ margin-left: 0.125rem;
11360
+ }
11361
+
11362
+ /*
11363
+ * Licensed Materials - Property of IBM
11364
+ * 5724-Q36
11365
+ * (c) Copyright IBM Corp. 2022
11366
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11367
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11368
+ */
11369
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11370
+ position: relative;
11371
+ padding: 1rem 1rem 1.5rem 4rem;
11372
+ }
11373
+
11374
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11375
+ position: absolute;
11376
+ /* stylelint-disable-next-line carbon/layout-token-use */
11377
+ top: -1px;
11378
+ right: 0;
11379
+ width: calc(100% - 3rem);
11380
+ height: 1px;
11381
+ background-color: var(--cds-layer-accent);
11382
+ content: "";
11383
+ }
11384
+
11385
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11386
+ position: absolute;
11387
+ bottom: 0;
11388
+ left: 0;
11389
+ width: 100%;
11390
+ height: 1px;
11391
+ background-color: var(--cds-layer-accent);
11392
+ content: "";
11393
+ }
11394
+
11395
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
11396
+ padding: 0.5rem;
11397
+ padding-right: 0;
11398
+ }
11399
+
11400
+ .c4p--datagrid__row-expander.cds--btn {
11401
+ display: flex;
11402
+ width: 2rem;
11403
+ height: 2rem;
11404
+ min-height: 2rem;
11405
+ justify-content: center;
11406
+ padding: 0;
11407
+ }
11408
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
11409
+ fill: var(--cds-layer-selected-inverse, #161616);
11410
+ }
11411
+
11412
+ .c4p--datagrid__draggable-handleStyle {
11413
+ display: flex;
11414
+ align-items: center;
11415
+ margin-right: 0.5rem;
11416
+ cursor: grab;
11417
+ }
11418
+
11419
+ .c4p--datagrid__draggable-handleStyle.disabled {
11420
+ pointer-events: none;
11421
+ }
11422
+
11423
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
11424
+ fill: var(--cds-icon-on-color-disabled, #8d8d8d);
11425
+ }
11426
+
11427
+ .c4p--datagrid__draggable-handleHolder {
11428
+ display: flex;
11429
+ height: 3rem;
11430
+ border-bottom: 1px solid var(--cds-layer-active);
11431
+ background-color: var(--cds-layer);
11432
+ }
11433
+
11434
+ .c4p--datagrid__draggable-handleHolder:hover {
11435
+ background-color: var(--cds-layer-hover);
11436
+ }
11437
+
11438
+ .c4p--datagrid__draggable-handleHolder-selected {
11439
+ display: flex;
11440
+ height: 3rem;
11441
+ border-bottom: 1px solid var(--cds-layer-active);
11442
+ background-color: var(--cds-layer-selected);
11443
+ }
11444
+
11445
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11446
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11447
+ }
11448
+
11449
+ .c4p--datagrid__draggable-handleHolder-isOver {
11450
+ border: 2px dashed var(--cds-focus, #0f62fe);
11451
+ /* stylelint-disable-next-line carbon/theme-token-use */
11452
+ background-color: #edf5ff;
11453
+ }
11454
+
11455
+ .c4p--datagrid__draggable-handleHolder-droppable {
11456
+ display: flex;
11457
+ width: 100%;
11458
+ align-items: center;
11459
+ padding-left: 1rem;
11460
+ /* stylelint-disable-next-line carbon/type-token-use */
11461
+ line-height: 1;
11462
+ transition-property: opacity;
11463
+ }
11464
+
11465
+ .c4p--datagrid__draggable-handleHolder-droppable.c4p--datagrid__draggable-handleHolder-droppable--origin {
11466
+ opacity: 0.5;
11467
+ transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
11468
+ }
11469
+
11470
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11471
+ background-color: var(--cds-highlight, #d0e2ff);
11472
+ color: var(--cds-text-primary, #161616);
11473
+ }
11474
+
11475
+ .c4p--datagrid__draggable-handleHolder--sticky {
11476
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
11477
+ }
11478
+
11479
+ .c4p--datagrid__shared-ui--assistive-text {
11480
+ position: absolute;
11481
+ overflow: hidden;
11482
+ width: 0;
11483
+ height: 0;
11484
+ padding: 0;
11485
+ border: 0;
11486
+ clip: rect(0 0 0 0);
11487
+ text-transform: none;
11488
+ white-space: nowrap;
11489
+ }
11490
+
11491
+ /*
11492
+ * Licensed Materials - Property of IBM
11493
+ * 5724-Q36
11494
+ * (c) Copyright IBM Corp. 2021
11495
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11496
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11497
+ */
11498
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11499
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11500
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11501
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11502
+ height: 1.5rem;
11503
+ }
11504
+
11505
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11506
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11507
+ height: calc(1.5rem - 0.25rem);
11508
+ }
11509
+
11510
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11511
+ max-height: none;
11512
+ }
11513
+
11514
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11515
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11516
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11517
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11518
+ height: 2rem;
11519
+ }
11520
+
11521
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11522
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11523
+ height: calc(2rem - 0.25rem);
11524
+ }
11525
+
11526
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11527
+ max-height: none;
11528
+ }
11529
+
11530
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11531
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11532
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11533
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11534
+ height: 2.5rem;
11535
+ }
11536
+
11537
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11538
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11539
+ height: calc(2.5rem - 0.25rem);
11540
+ }
11541
+
11542
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11543
+ max-height: none;
11544
+ }
11545
+
11546
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11547
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11548
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11549
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11550
+ height: 3rem;
11551
+ }
11552
+
11553
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11554
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11555
+ height: calc(3rem - 0.25rem);
11556
+ }
11557
+
11558
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11559
+ max-height: none;
11560
+ }
11561
+
11562
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11563
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11564
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11565
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11566
+ height: 4rem;
11567
+ }
11568
+
11569
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11570
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11571
+ height: calc(4rem - 0.25rem);
11572
+ }
11573
+
11574
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11575
+ max-height: none;
11576
+ }
11577
+
11578
+ .c4p--datagrid {
11579
+ --c4p--datagrid--grid-header-height: 0;
11580
+ }
11581
+
11582
+ .c4p--datagrid__inline-edit-cell {
11583
+ display: flex;
11584
+ height: 100%;
11585
+ align-items: center;
11586
+ }
11587
+
11588
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11589
+ display: flex;
11590
+ align-items: center;
11591
+ }
11592
+
11593
+ .c4p--datagrid__inline-edit--outer-cell-button {
11594
+ width: 100%;
11595
+ height: calc(100% + 2px);
11596
+ }
11597
+
11598
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11599
+ position: relative;
11600
+ display: flex;
11601
+ width: 100%;
11602
+ height: 100%;
11603
+ align-items: center;
11604
+ justify-content: space-between;
11605
+ padding-left: 1rem;
11606
+ color: var(--cds-text-secondary, #525252);
11607
+ cursor: pointer;
11608
+ outline: 0;
11609
+ }
11610
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11611
+ height: 1rem;
11612
+ padding-right: 1rem;
11613
+ }
11614
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11615
+ padding-left: 0;
11616
+ cursor: default;
11617
+ }
11618
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11619
+ height: 1rem;
11620
+ fill: var(--cds-icon-secondary, #525252);
11621
+ }
11622
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11623
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11624
+ }
11625
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11626
+ justify-content: flex-start;
11627
+ }
11628
+ .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) {
11629
+ /* stylelint-disable-next-line */
11630
+ }
11631
+ .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 {
11632
+ display: none;
11633
+ }
11634
+ .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 {
11635
+ display: block;
11636
+ }
11637
+
11638
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11639
+ background-color: var(--cds-layer-active);
11640
+ color: var(--cds-text-primary, #161616);
11641
+ }
11642
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11643
+ fill: var(--cds-icon-primary, #161616);
11644
+ }
11645
+
11646
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11647
+ background-color: var(--cds-layer-active);
11648
+ color: var(--cds-text-primary, #161616);
11649
+ cursor: text;
11650
+ }
11651
+
11652
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11653
+ /* stylelint-disable-next-line carbon/theme-token-use */
11654
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11655
+ outline-offset: calc(-1 * 0.125rem);
10822
11656
  }
10823
-
10824
- /*
10825
- * Licensed Materials - Property of IBM
10826
- * 5724-Q36
10827
- * (c) Copyright IBM Corp. 2020
10828
- * US Government Users Restricted Rights - Use, duplication or disclosure
10829
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10830
- */
10831
- .c4p--datagrid__center-align-header {
10832
- width: 100%;
10833
- text-align: center;
11657
+ @media screen and (prefers-contrast) {
11658
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11659
+ outline-style: dotted;
11660
+ }
10834
11661
  }
10835
11662
 
10836
- .c4p--datagrid__center-align-cell-renderer.sortDisabled {
10837
- margin-right: auto;
10838
- margin-left: auto;
11663
+ .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) {
11664
+ color: var(--cds-button-disabled, #c6c6c6);
11665
+ cursor: not-allowed;
10839
11666
  }
10840
11667
 
10841
- /*
10842
- * Licensed Materials - Property of IBM
10843
- * 5724-Q36
10844
- * (c) Copyright IBM Corp. 2021
10845
- * US Government Users Restricted Rights - Use, duplication or disclosure
10846
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10847
- */
10848
- .c4p--datagrid__right-sticky-column-cell {
10849
- /* stylelint-disable-next-line declaration-no-important */
10850
- position: sticky !important;
10851
- right: 0;
10852
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11668
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11669
+ overflow: hidden;
11670
+ padding-right: 1rem;
11671
+ text-overflow: ellipsis;
11672
+ white-space: nowrap;
10853
11673
  }
10854
11674
 
10855
- .c4p--datagrid__right-sticky-column-header {
10856
- /* stylelint-disable-next-line declaration-no-important */
10857
- position: sticky !important;
10858
- right: 0;
10859
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
11675
+ .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 {
11676
+ padding-right: 3rem;
10860
11677
  }
10861
11678
 
10862
- .c4p--datagrid__sticky-noShadow {
10863
- box-shadow: none;
11679
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11680
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11681
+ height: 3rem;
10864
11682
  }
10865
11683
 
10866
- .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
10867
- box-shadow: none;
11684
+ .c4p--datagrid__inline-edit-button-icon {
11685
+ position: absolute;
11686
+ right: 1rem;
10868
11687
  }
10869
11688
 
10870
- .c4p--datagrid__right-sticky-column-offset-scroll {
10871
- /* stylelint-disable-next-line */
10872
- right: 6px !important;
11689
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11690
+ position: relative;
11691
+ padding: 0;
10873
11692
  }
10874
-
10875
- /*
10876
- * Licensed Materials - Property of IBM
10877
- * 5724-Q36
10878
- * (c) Copyright IBM Corp. 2021
10879
- * US Government Users Restricted Rights - Use, duplication or disclosure
10880
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10881
- */
10882
- .c4p--datagrid__actions-column-cell {
10883
- display: flex;
10884
- flex-flow: column;
10885
- justify-content: center;
11693
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11694
+ padding-left: 1rem;
10886
11695
  }
10887
-
10888
- .c4p--datagrid__actions-column-content {
10889
- display: flex;
10890
- justify-content: center;
11696
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11697
+ min-width: auto;
11698
+ padding-right: 1rem;
10891
11699
  }
10892
11700
 
10893
- .c4p--datagrid__actions-column-loading {
10894
- margin-bottom: 0.5rem;
11701
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11702
+ padding-bottom: 1rem;
11703
+ padding-left: 1rem;
10895
11704
  }
10896
11705
 
10897
- /*
10898
- * Licensed Materials - Property of IBM
10899
- * 5724-Q36
10900
- * (c) Copyright IBM Corp. 2021, 2022
10901
- * US Government Users Restricted Rights - Use, duplication or disclosure
10902
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10903
- */
10904
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
10905
- position: inherit;
10906
- display: flex;
10907
- flex-flow: column;
10908
- /* stylelint-disable-next-line declaration-no-important */
10909
- padding-top: 0 !important;
11706
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11707
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11708
+ width: inherit;
10910
11709
  }
10911
11710
 
10912
- .c4p--datagrid__customize-columns-checkbox {
10913
- display: flex;
10914
- justify-content: center;
10915
- /* stylelint-disable-next-line declaration-no-important */
10916
- margin-bottom: 0 !important;
11711
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11712
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11713
+ width: 100%;
11714
+ height: 3rem;
11715
+ max-height: none;
10917
11716
  }
10918
11717
 
10919
- .c4p--datagrid__customize-columns-modal--actions {
10920
- display: flex;
10921
- flex-flow: row;
10922
- margin-bottom: 1.5rem;
11718
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11719
+ width: inherit;
10923
11720
  }
10924
11721
 
10925
- .c4p--datagrid__customize-columns-modal--actions > button {
10926
- margin-left: 1rem;
11722
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11723
+ overflow: hidden;
11724
+ width: 100%;
11725
+ max-width: none;
11726
+ padding-right: 2rem;
11727
+ text-overflow: ellipsis;
11728
+ white-space: nowrap;
10927
11729
  }
10928
11730
 
10929
- .c4p--datagrid__customize-columns-instructions {
10930
- margin-bottom: 1.5rem;
10931
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
10932
- font-weight: var(--cds-body-long-01-font-weight, 400);
10933
- line-height: var(--cds-body-long-01-line-height, 1.42857);
10934
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
10935
- color: var(--cds-text-primary, #161616);
11731
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11732
+ border-top-color: var(--cds-layer-hover);
11733
+ background-color: var(--cds-layer-hover);
10936
11734
  }
10937
11735
 
10938
- .c4p--datagrid__customize-columns-column-list {
10939
- position: relative;
10940
- overflow: auto;
11736
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11737
+ position: absolute;
11738
+ z-index: 2;
11739
+ bottom: 0;
11740
+ left: 0;
11741
+ width: 2px;
11742
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11743
+ background-color: var(--cds-link-inverse, #78a9ff);
11744
+ content: "";
10941
11745
  }
10942
11746
 
10943
- /*
10944
- * Licensed Materials - Property of IBM
10945
- * 5724-Q36
10946
- * (c) Copyright IBM Corp. 2021
10947
- * US Government Users Restricted Rights - Use, duplication or disclosure
10948
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10949
- */
10950
- .c4p--datagrid__row-size-dropdown {
11747
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
10951
11748
  position: absolute;
10952
- padding: 1rem;
10953
- background-color: var(--cds-background, #ffffff);
10954
- 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));
11749
+ z-index: 2;
11750
+ right: 0;
11751
+ bottom: 0;
11752
+ width: 2px;
11753
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11754
+ background-color: var(--cds-link-inverse, #78a9ff);
11755
+ content: "";
10955
11756
  }
10956
11757
 
10957
- .c4p--datagrid__row-size-button--open {
10958
- background-color: var(--cds-background, #ffffff);
10959
- 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));
11758
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
11759
+ position: absolute;
11760
+ z-index: 2;
11761
+ top: 0;
11762
+ right: 0;
11763
+ left: 0;
11764
+ width: var(--c4p--datagrid--grid-width);
11765
+ height: 2px;
11766
+ background-color: var(--cds-link-inverse, #78a9ff);
10960
11767
  }
10961
11768
 
10962
- /*
10963
- * Licensed Materials - Property of IBM
10964
- * 5724-Q36
10965
- * (c) Copyright IBM Corp. 2021
10966
- * US Government Users Restricted Rights - Use, duplication or disclosure
10967
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10968
- */
10969
- th.c4p--datagrid__select-all-toggle-on,
10970
- td.c4p--datagrid__select-all-toggle-on {
10971
- /* stylelint-disable-next-line declaration-no-important */
10972
- width: 4.5rem !important;
10973
- /* stylelint-disable-next-line declaration-no-important */
10974
- min-width: initial !important;
10975
- box-sizing: border-box;
10976
- flex: 0 0 auto;
11769
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11770
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11771
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
10977
11772
  }
10978
11773
 
10979
- th.c4p--datagrid__select-all-toggle-on {
10980
- display: flex;
10981
- align-items: center;
10982
- justify-content: center;
11774
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11775
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11776
+ outline-offset: -2px;
10983
11777
  }
10984
11778
 
10985
- th.c4p--datagrid__select-all-toggle-on.button {
10986
- margin-left: 0.125rem;
11779
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11780
+ padding-top: 0.125rem;
10987
11781
  }
10988
11782
 
10989
- .c4p--datagrid__expanded-row-content {
10990
- padding: 1rem 1rem 1.5rem 4rem;
11783
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11784
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11785
+ position: absolute;
11786
+ z-index: 3;
11787
+ top: calc(100% - 0.125rem);
11788
+ width: 100%;
11789
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11790
+ margin: 0;
11791
+ background-color: var(--cds-layer-01, #f4f4f4);
11792
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11793
+ outline-offset: calc(-1 * 0.125rem);
10991
11794
  }
10992
11795
 
10993
- /*
10994
- * Licensed Materials - Property of IBM
10995
- * 5724-Q36
10996
- * (c) Copyright IBM Corp. 2022
10997
- * US Government Users Restricted Rights - Use, duplication or disclosure
10998
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10999
- */
11000
- .c4p--datagrid__draggable-handleStyle {
11001
- display: flex;
11002
- align-items: center;
11003
- margin-right: 0.5rem;
11004
- cursor: grab;
11796
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11797
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11005
11798
  }
11006
11799
 
11007
- .c4p--datagrid__draggable-handleStyle.disabled {
11008
- pointer-events: none;
11800
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11801
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11802
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11803
+ z-index: 4;
11804
+ top: calc(100% + 0.75rem + 0.125rem);
11805
+ right: 0.5rem;
11009
11806
  }
11010
11807
 
11011
- svg.c4p--datagrid__draggable-handleStyle.disable {
11012
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11808
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11809
+ top: calc(100% + 0.25rem + 0.125rem);
11013
11810
  }
11014
11811
 
11015
- .c4p--datagrid__draggable-handleHolder {
11016
- display: flex;
11017
- height: 2rem;
11018
- padding-left: 0.25rem;
11019
- margin-bottom: 0.5rem;
11020
- background: var(--cds-layer-02, #ffffff);
11812
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11813
+ position: absolute;
11814
+ top: 0;
11815
+ left: 0.125rem;
11816
+ width: calc(100% - (0.125rem * 2));
11817
+ height: 0.125rem;
11818
+ background-color: var(--cds-layer-01, #f4f4f4);
11819
+ content: "";
11021
11820
  }
11022
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11023
- border: 2px dashed var(--cds-focus, #0f62fe);
11024
- background-color: var(--cds-highlight, #d0e2ff);
11821
+
11822
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11823
+ position: absolute;
11824
+ top: 0.125rem;
11825
+ left: 0.5rem;
11826
+ width: calc(100% - (0.5rem * 2));
11827
+ height: 1px;
11828
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11829
+ content: "";
11025
11830
  }
11026
11831
 
11027
- .c4p--datagrid__draggable-handleHolder-droppable {
11028
- display: flex;
11029
- width: 100%;
11832
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11833
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11834
+ }
11835
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11836
+ background-color: transparent;
11030
11837
  }
11031
11838
 
11032
- .c4p--datagrid__draggable-handleHolder--grabbed {
11033
- background-color: var(--cds-highlight, #d0e2ff);
11034
- color: var(--cds-text-primary, #161616);
11839
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11840
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11841
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11842
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11843
+ outline-color: var(--cds-support-error, #da1e28);
11035
11844
  }
11036
11845
 
11037
- .c4p--datagrid__shared-ui--assistive-text {
11038
- position: absolute;
11039
- overflow: hidden;
11040
- width: 0;
11041
- height: 0;
11042
- padding: 0;
11043
- border: 0;
11044
- clip: rect(0 0 0 0);
11045
- text-transform: none;
11046
- white-space: nowrap;
11846
+ .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 {
11847
+ background-color: var(--cds-support-error, #da1e28);
11047
11848
  }
11048
11849
 
11049
- /*
11050
- * Licensed Materials - Property of IBM
11051
- * 5724-Q36
11052
- * (c) Copyright IBM Corp. 2020, 2021
11053
- * US Government Users Restricted Rights - Use, duplication or disclosure
11054
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11055
- */
11850
+ /* stylelint-disable max-nesting-depth */
11056
11851
  .c4p--datagrid__datagridWrap {
11057
11852
  display: block;
11058
11853
  width: 100%;
@@ -11060,6 +11855,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11060
11855
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11061
11856
  display: none;
11062
11857
  }
11858
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11859
+ left: 0.125rem;
11860
+ width: 112px;
11861
+ }
11063
11862
 
11064
11863
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11065
11864
  left: 0.125rem;
@@ -11068,7 +11867,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11068
11867
 
11069
11868
  .c4p--datagrid__datagridWrap-simple {
11070
11869
  display: flex;
11071
- overflow: hidden;
11072
11870
  width: 100%;
11073
11871
  height: 100%;
11074
11872
  flex-direction: column;
@@ -13113,14 +13911,18 @@ a.cds--side-nav__link--current::before {
13113
13911
  font-weight: var(--cds-body-short-01-font-weight, 400);
13114
13912
  line-height: var(--cds-body-short-01-line-height, 1.28572);
13115
13913
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13116
- height: 4rem;
13117
13914
  align-items: center;
13915
+ margin: 0;
13916
+ }
13917
+
13918
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
13919
+ height: 4rem;
13118
13920
  padding-top: 1rem;
13119
13921
  padding-bottom: 2rem;
13120
- margin: 0;
13121
13922
  }
13122
13923
 
13123
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
13924
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
13925
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
13124
13926
  max-width: none;
13125
13927
  }
13126
13928
 
@@ -13181,7 +13983,7 @@ a.cds--side-nav__link--current::before {
13181
13983
  /* stylelint-disable-next-line function-no-unknown */
13182
13984
  z-index: 9000;
13183
13985
  align-items: flex-end;
13184
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13986
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13185
13987
  }
13186
13988
 
13187
13989
  @media (prefers-reduced-motion: reduce) {
@@ -13311,6 +14113,7 @@ a.cds--side-nav__link--current::before {
13311
14113
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13312
14114
  -webkit-box-orient: vertical;
13313
14115
  -webkit-line-clamp: 2;
14116
+ word-break: break-word;
13314
14117
  }
13315
14118
 
13316
14119
  @media (min-width: 42rem) {
@@ -13599,4 +14402,43 @@ a.cds--side-nav__link--current::before {
13599
14402
  margin-bottom: 1rem;
13600
14403
  }
13601
14404
 
14405
+ /* stylelint-disable max-nesting-depth */
14406
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14407
+ /* Used id for overriding the SVG path fill */
14408
+ }
14409
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14410
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14411
+ background-color: #0050e6;
14412
+ }
14413
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14414
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14415
+ box-shadow: none;
14416
+ }
14417
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14418
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14419
+ fill: #ffffff;
14420
+ }
14421
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14422
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14423
+ background-color: transparent;
14424
+ }
14425
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14426
+ background-color: #0f62fe;
14427
+ color: #ffffff;
14428
+ }
14429
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14430
+ animation-duration: 700ms;
14431
+ animation-fill-mode: forwards;
14432
+ animation-iteration-count: infinite;
14433
+ animation-name: rotate;
14434
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14435
+ }
14436
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14437
+ background-color: transparent;
14438
+ }
14439
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14440
+ background-color: #0f62fe;
14441
+ color: #ffffff;
14442
+ }
14443
+
13602
14444
  /*# sourceMappingURL=index-without-carbon.css.map */