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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (380) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +1368 -401
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +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 +1292 -456
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +1165 -334
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -8
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  20. package/es/components/ActionSet/ActionSet.js +7 -3
  21. package/es/components/AddSelect/AddSelect.js +6 -6
  22. package/es/components/AddSelect/AddSelectBody.js +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 +484 -0
  71. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +514 -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 +9 -0
  75. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +25 -0
  76. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +38 -0
  77. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +25 -0
  78. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +9 -0
  79. package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
  80. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +72 -0
  81. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  82. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  83. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +541 -0
  84. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  85. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  86. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  87. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  88. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  89. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  90. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +262 -0
  91. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  92. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  93. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  94. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -1
  95. package/es/components/Datagrid/index.js +4 -1
  96. package/es/components/Datagrid/useActionsColumn.js +28 -12
  97. package/es/components/Datagrid/useColumnOrder.js +8 -0
  98. package/es/components/Datagrid/useCustomizeColumns.js +13 -8
  99. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  100. package/es/components/Datagrid/useExpandedRow.js +0 -1
  101. package/es/components/Datagrid/useFiltering.js +99 -0
  102. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  103. package/es/components/Datagrid/useInlineEdit.js +71 -0
  104. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  105. package/es/components/Datagrid/useNestedRows.js +16 -4
  106. package/es/components/Datagrid/useParentDimensions.js +3 -1
  107. package/es/components/Datagrid/useRowExpander.js +12 -4
  108. package/es/components/Datagrid/useRowSize.js +17 -6
  109. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  110. package/es/components/Datagrid/useSelectRows.js +13 -4
  111. package/es/components/Datagrid/useSortableColumns.js +15 -9
  112. package/es/components/Datagrid/useStickyColumn.js +11 -0
  113. package/es/components/Datagrid/utils/DatagridActions.js +249 -0
  114. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  115. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  116. package/es/components/Datagrid/utils/getArgTypes.js +94 -0
  117. package/es/components/Datagrid/utils/getInlineEditColumns.js +159 -0
  118. package/es/components/Datagrid/utils/makeData.js +54 -1
  119. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  120. package/es/components/EditUpdateCards/index.js +7 -0
  121. package/es/components/ExportModal/ExportModal.js +1 -1
  122. package/es/components/FilterSummary/FilterSummary.js +54 -0
  123. package/es/components/FilterSummary/index.js +7 -0
  124. package/es/components/ImportModal/ImportModal.js +3 -3
  125. package/es/components/InlineEdit/InlineEdit.js +28 -426
  126. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  127. package/es/components/InlineEditV1/index.js +7 -0
  128. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  129. package/es/components/InlineEditV2/index.js +7 -0
  130. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  131. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  132. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  133. package/es/components/MultiAddSelect/index.js +6 -0
  134. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  135. package/es/components/OptionsTile/OptionsTile.js +32 -16
  136. package/es/components/PageHeader/PageHeader.js +4 -4
  137. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  138. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  139. package/es/components/RemoveModal/RemoveModal.js +20 -3
  140. package/es/components/Saving/Saving.js +1 -1
  141. package/es/components/SidePanel/SidePanel.js +45 -52
  142. package/es/components/SidePanel/motion/variants.js +45 -0
  143. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  144. package/es/components/SingleAddSelect/index.js +6 -0
  145. package/es/components/StatusIcon/StatusIcon.js +1 -1
  146. package/es/components/Tearsheet/Tearsheet.js +5 -0
  147. package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
  148. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  149. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  150. package/es/components/WebTerminal/WebTerminal.js +1 -1
  151. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  152. package/es/components/index.js +4 -3
  153. package/es/global/js/hooks/index.js +2 -1
  154. package/es/global/js/hooks/useClickOutside.js +1 -1
  155. package/es/global/js/hooks/useControllableState.js +83 -0
  156. package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
  157. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  158. package/es/global/js/package-settings.js +9 -6
  159. package/es/global/js/utils/getBezierValues.js +20 -0
  160. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  161. package/es/global/js/utils/motionConstants.js +45 -0
  162. package/es/global/js/utils/rangeWithCallback.js +13 -0
  163. package/es/global/js/utils/story-helper.js +5 -1
  164. package/es/global/js/utils/uuidv4.spec.js +4 -0
  165. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  166. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  167. package/lib/components/ActionSet/ActionSet.js +7 -3
  168. package/lib/components/AddSelect/AddSelect.js +5 -6
  169. package/lib/components/AddSelect/AddSelectBody.js +68 -31
  170. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  171. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  172. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  173. package/lib/components/AddSelect/AddSelectList.js +65 -30
  174. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  175. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  176. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  177. package/lib/components/AddSelect/add-select-utils.js +9 -2
  178. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  179. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  180. package/lib/components/AddSelect/hooks/usePath.js +16 -1
  181. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  182. package/lib/components/ButtonMenu/ButtonMenu.js +4 -3
  183. package/lib/components/Card/Card.js +16 -6
  184. package/lib/components/Card/CardFooter.js +3 -1
  185. package/lib/components/Card/CardHeader.js +21 -1
  186. package/lib/components/ComboButton/ComboButton.js +3 -3
  187. package/lib/components/CreateFullPage/CreateFullPage.js +13 -3
  188. package/lib/components/CreateTearsheet/CreateTearsheet.js +18 -3
  189. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  190. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  191. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +65 -14
  192. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  193. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  194. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  195. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +53 -0
  196. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  197. package/lib/components/Datagrid/Datagrid/Datagrid.js +19 -47
  198. package/lib/components/Datagrid/Datagrid/DatagridContent.js +230 -0
  199. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +19 -9
  200. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  201. package/lib/components/Datagrid/Datagrid/DatagridHead.js +1 -3
  202. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -5
  203. package/lib/components/Datagrid/Datagrid/DatagridRow.js +46 -8
  204. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +14 -6
  205. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  206. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -2
  207. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +14 -10
  208. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +33 -10
  209. package/lib/components/Datagrid/Datagrid/DraggableElement.js +12 -4
  210. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +11 -49
  211. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -8
  212. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +76 -46
  213. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +85 -48
  214. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +32 -36
  215. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
  216. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +505 -0
  217. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +538 -0
  218. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +112 -0
  219. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +47 -0
  220. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +31 -0
  221. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +37 -0
  222. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +50 -0
  223. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +35 -0
  224. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +37 -0
  225. package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +67 -0
  226. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +82 -0
  227. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  228. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  229. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +566 -0
  230. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  231. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  232. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  233. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  234. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  235. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  236. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +271 -0
  237. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  238. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  239. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  240. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -8
  241. package/lib/components/Datagrid/index.js +25 -1
  242. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  243. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  244. package/lib/components/Datagrid/useCustomizeColumns.js +12 -7
  245. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  246. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  247. package/lib/components/Datagrid/useFiltering.js +105 -0
  248. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  249. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  250. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  251. package/lib/components/Datagrid/useNestedRows.js +17 -4
  252. package/lib/components/Datagrid/useParentDimensions.js +3 -1
  253. package/lib/components/Datagrid/useRowExpander.js +17 -5
  254. package/lib/components/Datagrid/useRowSize.js +18 -13
  255. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  256. package/lib/components/Datagrid/useSelectRows.js +13 -4
  257. package/lib/components/Datagrid/useSortableColumns.js +16 -7
  258. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  259. package/lib/components/Datagrid/utils/DatagridActions.js +275 -0
  260. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  261. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  262. package/lib/components/Datagrid/utils/getArgTypes.js +102 -0
  263. package/lib/components/Datagrid/utils/getInlineEditColumns.js +174 -0
  264. package/lib/components/Datagrid/utils/makeData.js +56 -2
  265. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  266. package/lib/components/EditUpdateCards/index.js +13 -0
  267. package/lib/components/ExportModal/ExportModal.js +3 -3
  268. package/lib/components/FilterSummary/FilterSummary.js +72 -0
  269. package/lib/components/FilterSummary/index.js +15 -0
  270. package/lib/components/ImportModal/ImportModal.js +4 -4
  271. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  272. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  273. package/lib/components/InlineEditV1/index.js +13 -0
  274. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  275. package/lib/components/InlineEditV2/index.js +13 -0
  276. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  277. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  278. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  279. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  280. package/lib/components/OptionsTile/OptionsTile.js +36 -19
  281. package/lib/components/PageHeader/PageHeader.js +5 -5
  282. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  283. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  284. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  285. package/lib/components/Saving/Saving.js +5 -5
  286. package/lib/components/SidePanel/SidePanel.js +48 -53
  287. package/lib/components/SidePanel/motion/variants.js +55 -0
  288. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  289. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  290. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  291. package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
  292. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  293. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  294. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  295. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  296. package/lib/components/index.js +33 -1
  297. package/lib/global/js/hooks/index.js +9 -1
  298. package/lib/global/js/hooks/useClickOutside.js +1 -1
  299. package/lib/global/js/hooks/useControllableState.js +94 -0
  300. package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
  301. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  302. package/lib/global/js/package-settings.js +9 -6
  303. package/lib/global/js/utils/getBezierValues.js +29 -0
  304. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  305. package/lib/global/js/utils/motionConstants.js +55 -0
  306. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  307. package/lib/global/js/utils/story-helper.js +5 -1
  308. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  309. package/package.json +18 -16
  310. package/scss/components/ActionSet/_action-set.scss +9 -4
  311. package/scss/components/AddSelect/_add-select.scss +132 -34
  312. package/scss/components/AddSelect/_index.scss +1 -1
  313. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  314. package/scss/components/Card/_card.scss +1 -0
  315. package/scss/components/Cascade/_cascade.scss +1 -1
  316. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  317. package/scss/components/Datagrid/_datagrid.scss +7 -1
  318. package/scss/components/Datagrid/_storybook-styles.scss +29 -5
  319. package/scss/components/Datagrid/styles/_datagrid.scss +131 -37
  320. package/scss/components/Datagrid/styles/_draggableElement.scss +50 -18
  321. package/scss/components/Datagrid/styles/_index.scss +10 -8
  322. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  323. package/scss/components/Datagrid/styles/_useExpandedRow.scss +56 -10
  324. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  325. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  326. package/scss/components/Datagrid/styles/_useSortableColumns.scss +35 -16
  327. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  328. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +69 -0
  329. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  330. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
  331. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +12 -4
  332. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  333. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  334. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  335. package/scss/components/EditUpdateCards/_index.scss +8 -0
  336. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  337. package/scss/components/FilterSummary/_filter-summary.scss +21 -0
  338. package/scss/components/FilterSummary/_index.scss +10 -0
  339. package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
  340. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  341. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  342. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  343. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  344. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  345. package/scss/components/InlineEditV2/_index.scss +10 -0
  346. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  347. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  348. package/scss/components/MultiAddSelect/_multi-add-select.scss +8 -1
  349. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  350. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  351. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  352. package/scss/components/SidePanel/_side-panel.scss +3 -82
  353. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  354. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  355. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  356. package/scss/components/SingleAddSelect/_index.scss +7 -0
  357. package/scss/components/SingleAddSelect/_single-add-select.scss +8 -1
  358. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  359. package/scss/components/Tearsheet/_tearsheet.scss +4 -2
  360. package/scss/components/_index-released-only-with-carbon.scss +3 -1
  361. package/scss/components/_index-released-only.scss +4 -1
  362. package/scss/components/_index-with-carbon.scss +3 -1
  363. package/scss/components/_index.scss +4 -1
  364. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -157
  365. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -62
  366. package/es/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js +0 -6
  367. package/lib/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js +0 -13
  368. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -52
  369. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  370. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  371. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  372. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  373. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  374. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  375. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  376. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  377. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  378. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  379. /package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  380. /package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
package/css/index.css CHANGED
@@ -1764,7 +1764,7 @@ input[data-invalid]:not(:focus),
1764
1764
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1765
1765
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1766
1766
  .cds--list-box[data-invalid]:not(:focus),
1767
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
1767
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
1768
1768
  outline: 2px solid var(--cds-support-error, #da1e28);
1769
1769
  outline-offset: -2px;
1770
1770
  }
@@ -1775,7 +1775,7 @@ input[data-invalid]:not(:focus),
1775
1775
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1776
1776
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1777
1777
  .cds--list-box[data-invalid]:not(:focus),
1778
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
1778
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
1779
1779
  outline-style: dotted;
1780
1780
  }
1781
1781
  }
@@ -2321,6 +2321,9 @@ fieldset[disabled] .cds--form__helper-text {
2321
2321
  z-index: 1;
2322
2322
  top: 0.8125rem;
2323
2323
  left: 1rem;
2324
+ display: flex;
2325
+ height: 1rem;
2326
+ align-items: center;
2324
2327
  margin: 0;
2325
2328
  }
2326
2329
 
@@ -2339,12 +2342,12 @@ fieldset[disabled] .cds--form__helper-text {
2339
2342
  }
2340
2343
 
2341
2344
  .cds--form--fluid .cds--text-input--invalid,
2342
- .cds--form--fluid .cds--text-input--warn {
2345
+ .cds--form--fluid .cds--text-input--warning {
2343
2346
  border-bottom: none;
2344
2347
  }
2345
2348
 
2346
2349
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
2347
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
2350
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
2348
2351
  display: block;
2349
2352
  border-style: solid;
2350
2353
  border-color: var(--cds-border-subtle);
@@ -2356,13 +2359,13 @@ fieldset[disabled] .cds--form__helper-text {
2356
2359
  top: 5rem;
2357
2360
  }
2358
2361
 
2359
- .cds--form--fluid .cds--text-input-wrapper--light {
2360
- background: var(--cds-field-02, #ffffff);
2362
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
2363
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
2364
+ outline: none;
2361
2365
  }
2362
2366
 
2363
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
2364
- outline: 2px solid transparent;
2365
- outline-offset: -2px;
2367
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
2368
+ border-bottom: 1px solid var(--cds-border-strong);
2366
2369
  }
2367
2370
 
2368
2371
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -2375,16 +2378,23 @@ fieldset[disabled] .cds--form__helper-text {
2375
2378
  }
2376
2379
  }
2377
2380
 
2378
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
2381
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
2382
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
2379
2383
  outline: 2px solid var(--cds-focus, #0f62fe);
2380
2384
  outline-offset: -2px;
2381
2385
  }
2382
2386
  @media screen and (prefers-contrast) {
2383
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
2387
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
2388
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
2384
2389
  outline-style: dotted;
2385
2390
  }
2386
2391
  }
2387
2392
 
2393
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
2394
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
2395
+ outline: none;
2396
+ }
2397
+
2388
2398
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
2389
2399
  flex-flow: row wrap;
2390
2400
  }
@@ -3100,14 +3110,17 @@ fieldset[disabled] .cds--form__helper-text {
3100
3110
  font-weight: var(--cds-body-short-01-font-weight, 400);
3101
3111
  line-height: var(--cds-body-short-01-line-height, 1.28572);
3102
3112
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3103
- height: 4rem;
3104
3113
  align-items: center;
3114
+ margin: 0;
3115
+ }
3116
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
3117
+ height: 4rem;
3105
3118
  padding-top: 1rem;
3106
3119
  padding-bottom: 2rem;
3107
- margin: 0;
3108
3120
  }
3109
3121
 
3110
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
3122
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
3123
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
3111
3124
  max-width: none;
3112
3125
  }
3113
3126
 
@@ -5063,7 +5076,7 @@ a.cds--overflow-menu-options__btn::before {
5063
5076
  @media (prefers-reduced-motion: no-preference) {
5064
5077
  .c4p--cascade__element,
5065
5078
  .c4p--cascade__col {
5066
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
5079
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
5067
5080
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
5068
5081
  animation-fill-mode: forwards;
5069
5082
  opacity: 0;
@@ -5637,7 +5650,7 @@ a.cds--overflow-menu-options__btn::before {
5637
5650
  }
5638
5651
 
5639
5652
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5640
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5653
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5641
5654
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
5642
5655
  }
5643
5656
 
@@ -5712,7 +5725,7 @@ a.cds--overflow-menu-options__btn::before {
5712
5725
 
5713
5726
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5714
5727
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5715
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5728
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5716
5729
  color: Highlight;
5717
5730
  outline: 1px solid Highlight;
5718
5731
  }
@@ -6007,26 +6020,6 @@ a.cds--overflow-menu-options__btn::before {
6007
6020
  margin-bottom: 0;
6008
6021
  }
6009
6022
 
6010
- @keyframes side-panel-exit-left {
6011
- 0% {
6012
- opacity: 1;
6013
- transform: translateX(0);
6014
- }
6015
- 100% {
6016
- opacity: 0;
6017
- transform: translateX(calc(-1 * 30rem));
6018
- }
6019
- }
6020
- @keyframes side-panel-exit-right {
6021
- 0% {
6022
- opacity: 1;
6023
- transform: translateX(0);
6024
- }
6025
- 100% {
6026
- opacity: 0;
6027
- transform: translateX(30rem);
6028
- }
6029
- }
6030
6023
  .c4p--side-panel__container {
6031
6024
  --c4p--side-panel--subtitle-opacity: 1;
6032
6025
  --c4p--side-panel--title-container-height: 0;
@@ -6046,8 +6039,6 @@ a.cds--overflow-menu-options__btn::before {
6046
6039
  box-sizing: border-box;
6047
6040
  background-color: var(--cds-layer-01, #f4f4f4);
6048
6041
  color: var(--cds-text-primary, #161616);
6049
- transition: transform 240ms;
6050
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6051
6042
  }
6052
6043
  .c4p--side-panel__container.c4p--side-panel__container--xs {
6053
6044
  width: 16rem;
@@ -6061,37 +6052,13 @@ a.cds--overflow-menu-options__btn::before {
6061
6052
  max-width: 100%;
6062
6053
  }
6063
6054
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
6064
- width: 16rem;
6065
- max-width: 100%;
6066
6055
  right: 0;
6067
6056
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6068
6057
  }
6069
- @keyframes side-panel-entrance-right {
6070
- 0% {
6071
- opacity: 0;
6072
- transform: translateX(16rem);
6073
- }
6074
- 100% {
6075
- opacity: 1;
6076
- transform: translateX(0);
6077
- }
6078
- }
6079
6058
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
6080
- width: 16rem;
6081
- max-width: 100%;
6082
6059
  left: 0;
6083
6060
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6084
6061
  }
6085
- @keyframes side-panel-entrance-left {
6086
- 0% {
6087
- opacity: 0;
6088
- transform: translateX(-16rem);
6089
- }
6090
- 100% {
6091
- opacity: 1;
6092
- transform: translateX(0);
6093
- }
6094
- }
6095
6062
  .c4p--side-panel__container.c4p--side-panel__container--sm {
6096
6063
  width: 20rem;
6097
6064
  max-width: 100%;
@@ -6104,37 +6071,13 @@ a.cds--overflow-menu-options__btn::before {
6104
6071
  max-width: 100%;
6105
6072
  }
6106
6073
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
6107
- width: 20rem;
6108
- max-width: 100%;
6109
6074
  right: 0;
6110
6075
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6111
6076
  }
6112
- @keyframes side-panel-entrance-right {
6113
- 0% {
6114
- opacity: 0;
6115
- transform: translateX(20rem);
6116
- }
6117
- 100% {
6118
- opacity: 1;
6119
- transform: translateX(0);
6120
- }
6121
- }
6122
6077
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
6123
- width: 20rem;
6124
- max-width: 100%;
6125
6078
  left: 0;
6126
6079
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6127
6080
  }
6128
- @keyframes side-panel-entrance-left {
6129
- 0% {
6130
- opacity: 0;
6131
- transform: translateX(-20rem);
6132
- }
6133
- 100% {
6134
- opacity: 1;
6135
- transform: translateX(0);
6136
- }
6137
- }
6138
6081
  .c4p--side-panel__container.c4p--side-panel__container--md {
6139
6082
  width: 30rem;
6140
6083
  max-width: 100%;
@@ -6147,37 +6090,13 @@ a.cds--overflow-menu-options__btn::before {
6147
6090
  max-width: 100%;
6148
6091
  }
6149
6092
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
6150
- width: 30rem;
6151
- max-width: 100%;
6152
6093
  right: 0;
6153
6094
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6154
6095
  }
6155
- @keyframes side-panel-entrance-right {
6156
- 0% {
6157
- opacity: 0;
6158
- transform: translateX(30rem);
6159
- }
6160
- 100% {
6161
- opacity: 1;
6162
- transform: translateX(0);
6163
- }
6164
- }
6165
6096
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
6166
- width: 30rem;
6167
- max-width: 100%;
6168
6097
  left: 0;
6169
6098
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6170
6099
  }
6171
- @keyframes side-panel-entrance-left {
6172
- 0% {
6173
- opacity: 0;
6174
- transform: translateX(-30rem);
6175
- }
6176
- 100% {
6177
- opacity: 1;
6178
- transform: translateX(0);
6179
- }
6180
- }
6181
6100
  .c4p--side-panel__container.c4p--side-panel__container--lg {
6182
6101
  width: 40rem;
6183
6102
  max-width: 100%;
@@ -6190,37 +6109,13 @@ a.cds--overflow-menu-options__btn::before {
6190
6109
  max-width: 100%;
6191
6110
  }
6192
6111
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
6193
- width: 40rem;
6194
- max-width: 100%;
6195
6112
  right: 0;
6196
6113
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6197
6114
  }
6198
- @keyframes side-panel-entrance-right {
6199
- 0% {
6200
- opacity: 0;
6201
- transform: translateX(40rem);
6202
- }
6203
- 100% {
6204
- opacity: 1;
6205
- transform: translateX(0);
6206
- }
6207
- }
6208
6115
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
6209
- width: 40rem;
6210
- max-width: 100%;
6211
6116
  left: 0;
6212
6117
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6213
6118
  }
6214
- @keyframes side-panel-entrance-left {
6215
- 0% {
6216
- opacity: 0;
6217
- transform: translateX(-40rem);
6218
- }
6219
- 100% {
6220
- opacity: 1;
6221
- transform: translateX(0);
6222
- }
6223
- }
6224
6119
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
6225
6120
  width: 75%;
6226
6121
  max-width: 100%;
@@ -6233,37 +6128,13 @@ a.cds--overflow-menu-options__btn::before {
6233
6128
  max-width: 100%;
6234
6129
  }
6235
6130
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
6236
- width: 75%;
6237
- max-width: 100%;
6238
6131
  right: 0;
6239
6132
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6240
6133
  }
6241
- @keyframes side-panel-entrance-right {
6242
- 0% {
6243
- opacity: 0;
6244
- transform: translateX(75%);
6245
- }
6246
- 100% {
6247
- opacity: 1;
6248
- transform: translateX(0);
6249
- }
6250
- }
6251
6134
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
6252
- width: 75%;
6253
- max-width: 100%;
6254
6135
  left: 0;
6255
6136
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6256
6137
  }
6257
- @keyframes side-panel-entrance-left {
6258
- 0% {
6259
- opacity: 0;
6260
- transform: translateX(-75%);
6261
- }
6262
- 100% {
6263
- opacity: 1;
6264
- transform: translateX(0);
6265
- }
6266
- }
6267
6138
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
6268
6139
  /* stylelint-disable-next-line max-nesting-depth */
6269
6140
  }
@@ -6396,10 +6267,7 @@ a.cds--overflow-menu-options__btn::before {
6396
6267
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
6397
6268
  position: fixed;
6398
6269
  z-index: 2;
6399
- top: calc(
6400
- var(--c4p--side-panel--title-text-height) +
6401
- var(--c4p--side-panel--label-text-height) + 3rem
6402
- );
6270
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6403
6271
  background-color: var(--cds-layer-01, #f4f4f4);
6404
6272
  }
6405
6273
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -6414,7 +6282,6 @@ a.cds--overflow-menu-options__btn::before {
6414
6282
  }
6415
6283
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
6416
6284
  position: fixed;
6417
- top: 3rem;
6418
6285
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6419
6286
  }
6420
6287
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -6435,10 +6302,7 @@ a.cds--overflow-menu-options__btn::before {
6435
6302
  }
6436
6303
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
6437
6304
  position: fixed;
6438
- top: calc(
6439
- var(--c4p--side-panel--title-text-height) +
6440
- var(--c4p--side-panel--subtitle-container-height) + 3rem
6441
- );
6305
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
6442
6306
  width: 100%;
6443
6307
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
6444
6308
  }
@@ -6463,8 +6327,7 @@ a.cds--overflow-menu-options__btn::before {
6463
6327
  padding: 0 1rem;
6464
6328
  margin-bottom: 0.5rem;
6465
6329
  background-color: var(--cds-layer-01, #f4f4f4);
6466
- transition: transform 150ms;
6467
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6330
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
6468
6331
  }
6469
6332
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
6470
6333
  min-width: 2rem;
@@ -6595,8 +6458,6 @@ a.cds--overflow-menu-options__btn::before {
6595
6458
  width: 100%;
6596
6459
  height: 100%;
6597
6460
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
6598
- transition: background-color 240ms;
6599
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6600
6461
  }
6601
6462
 
6602
6463
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -6743,7 +6604,7 @@ a.cds--overflow-menu-options__btn::before {
6743
6604
  /* stylelint-disable-next-line function-no-unknown */
6744
6605
  z-index: 9000;
6745
6606
  align-items: flex-end;
6746
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6607
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6747
6608
  }
6748
6609
  @media (prefers-reduced-motion: reduce) {
6749
6610
  .c4p--tearsheet.is-visible {
@@ -6850,6 +6711,7 @@ a.cds--overflow-menu-options__btn::before {
6850
6711
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
6851
6712
  -webkit-box-orient: vertical;
6852
6713
  -webkit-line-clamp: 2;
6714
+ word-break: break-word;
6853
6715
  }
6854
6716
  @media (min-width: 42rem) {
6855
6717
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -8333,7 +8195,6 @@ a.cds--overflow-menu-options__btn::before {
8333
8195
 
8334
8196
  /* stylelint-disable max-nesting-depth */
8335
8197
  .c4p--add-select__selections.cds--structured-list {
8336
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8337
8198
  margin-bottom: 0;
8338
8199
  }
8339
8200
  .c4p--add-select__selections-wrapper {
@@ -8341,8 +8202,11 @@ a.cds--overflow-menu-options__btn::before {
8341
8202
  }
8342
8203
  .c4p--add-select__selections-cell-wrapper {
8343
8204
  display: flex;
8205
+ height: 3rem;
8344
8206
  align-items: center;
8345
8207
  justify-content: space-between;
8208
+ padding: 0 1rem;
8209
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8346
8210
  }
8347
8211
  .c4p--add-select__selections-cell-title {
8348
8212
  display: block;
@@ -8356,17 +8220,21 @@ a.cds--overflow-menu-options__btn::before {
8356
8220
  display: block;
8357
8221
  color: var(--cds-text-secondary, #525252);
8358
8222
  }
8359
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
8223
+ .c4p--add-select__selections-cell {
8224
+ display: flex;
8225
+ flex-direction: column;
8226
+ justify-content: center;
8227
+ }
8228
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
8229
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
8360
8230
  visibility: visible;
8361
8231
  }
8362
8232
  .c4p--add-select__selections-hidden-hover {
8363
8233
  visibility: hidden;
8364
8234
  }
8365
- .c4p--add-select__selections-row-selected {
8366
- background: #e5e5e5;
8367
- }
8368
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
8369
- visibility: visible;
8235
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
8236
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
8237
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
8370
8238
  }
8371
8239
  .c4p--add-select__selections-checkbox {
8372
8240
  display: flex;
@@ -8374,7 +8242,7 @@ a.cds--overflow-menu-options__btn::before {
8374
8242
  }
8375
8243
  .c4p--add-select__selections-checkbox-label-wrapper {
8376
8244
  display: flex;
8377
- margin-left: 0.5rem;
8245
+ margin-left: 1rem;
8378
8246
  }
8379
8247
  .c4p--add-select__selections-checkbox-label-text {
8380
8248
  display: flex;
@@ -8392,6 +8260,13 @@ a.cds--overflow-menu-options__btn::before {
8392
8260
  .c4p--add-select__selections-cell-icon {
8393
8261
  margin-right: 0.5rem;
8394
8262
  }
8263
+ .c4p--add-select__selections-row {
8264
+ border-left: 0.125rem solid transparent;
8265
+ }
8266
+ .c4p--add-select__selections-row-meta--selected {
8267
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
8268
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
8269
+ }
8395
8270
 
8396
8271
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
8397
8272
  color: var(--cds-interactive, #0f62fe);
@@ -8408,10 +8283,21 @@ a.cds--overflow-menu-options__btn::before {
8408
8283
  align-items: flex-end;
8409
8284
  justify-content: space-between;
8410
8285
  }
8286
+ .c4p--add-select__sub-header-multi {
8287
+ padding: 0 1rem;
8288
+ }
8289
+
8290
+ .c4p--add-select .cds--structured-list-row {
8291
+ border-bottom: 0;
8292
+ }
8293
+
8294
+ .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) {
8295
+ border-bottom: 0;
8296
+ }
8411
8297
 
8412
8298
  .c4p--add-select__sidebar-header {
8413
8299
  display: flex;
8414
- padding: 1.5rem 1rem 0.5rem 1rem;
8300
+ padding: 2rem 1rem 0.5rem 1rem;
8415
8301
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8416
8302
  }
8417
8303
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -8437,7 +8323,7 @@ a.cds--overflow-menu-options__btn::before {
8437
8323
  }
8438
8324
 
8439
8325
  .c4p--add-select__sidebar-body {
8440
- padding: 1rem;
8326
+ padding: 0 1rem;
8441
8327
  }
8442
8328
 
8443
8329
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -8470,18 +8356,44 @@ a.cds--overflow-menu-options__btn::before {
8470
8356
  .c4p--add-select__columns {
8471
8357
  display: flex;
8472
8358
  flex-direction: row;
8359
+ flex-grow: 1;
8473
8360
  overflow-x: auto;
8474
8361
  }
8362
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
8363
+ margin-left: 0.5rem;
8364
+ }
8365
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
8366
+ border-left: 0;
8367
+ }
8368
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
8369
+ padding: 0;
8370
+ }
8371
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
8372
+ height: auto;
8373
+ padding: 0 0.5rem;
8374
+ }
8375
+ .c4p--add-select__columns .c4p--add-select__tags {
8376
+ padding: 0 0.5rem;
8377
+ margin-bottom: 0;
8378
+ }
8379
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
8380
+ padding: 0;
8381
+ }
8382
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
8383
+ border-top: 0;
8384
+ }
8475
8385
 
8476
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
8477
- height: 0;
8478
- padding: 0 !important;
8386
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
8387
+ padding: 0 1rem;
8388
+ }
8389
+
8390
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
8391
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8479
8392
  }
8480
8393
 
8481
8394
  .c4p--add-select__column {
8482
8395
  overflow: auto;
8483
- max-width: 15rem;
8484
- flex: 1 0 15rem;
8396
+ flex: 0 0 20rem;
8485
8397
  padding: 1rem;
8486
8398
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8487
8399
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -8499,13 +8411,13 @@ a.cds--overflow-menu-options__btn::before {
8499
8411
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
8500
8412
  }
8501
8413
 
8502
- .c4p--add-select__tag-container {
8414
+ .c4p--add-select__tags {
8503
8415
  display: flex;
8504
8416
  align-items: center;
8505
8417
  margin-top: 1rem;
8506
8418
  margin-bottom: 0.5rem;
8507
8419
  }
8508
- .c4p--add-select__tag-container-label {
8420
+ .c4p--add-select__tags-label {
8509
8421
  margin-right: 0.5rem;
8510
8422
  }
8511
8423
 
@@ -8580,13 +8492,6 @@ button.c4p--add-select__global-filter-toggle--open {
8580
8492
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
8581
8493
  }
8582
8494
 
8583
- .c4p--add-select .cds--structured-list-td {
8584
- height: 3rem;
8585
- padding-top: 0;
8586
- padding-bottom: 0;
8587
- vertical-align: middle;
8588
- }
8589
-
8590
8495
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
8591
8496
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
8592
8497
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -8594,13 +8499,16 @@ button.c4p--add-select__global-filter-toggle--open {
8594
8499
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
8595
8500
  }
8596
8501
 
8597
- .c4p--add-select__tag-container .cds--tag {
8502
+ .c4p--add-select__selections .cds--list-box__menu {
8503
+ left: auto;
8504
+ }
8505
+
8506
+ .c4p--add-select__tags .cds--tag {
8598
8507
  margin: 0;
8599
8508
  }
8600
8509
 
8601
8510
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
8602
- max-width: 29rem;
8603
- flex: 0 0 50%;
8511
+ flex-basis: 22.5rem;
8604
8512
  }
8605
8513
 
8606
8514
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -8612,6 +8520,10 @@ button.c4p--add-select__global-filter-toggle--open {
8612
8520
  flex-direction: column;
8613
8521
  }
8614
8522
 
8523
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
8524
+ max-width: 11.25rem;
8525
+ }
8526
+
8615
8527
  .c4p--add-select .c4p--add-select__items-label {
8616
8528
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
8617
8529
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -8652,8 +8564,35 @@ button.c4p--add-select__global-filter-toggle--open {
8652
8564
  padding-left: 0.5rem;
8653
8565
  }
8654
8566
 
8655
- .cds--tooltip,
8656
- .cds--overflow-menu-options {
8567
+ .c4p--add-select__multi .c4p--empty-state {
8568
+ max-width: 16rem;
8569
+ margin-top: 3rem;
8570
+ }
8571
+
8572
+ .c4p--add-select .cds--accordion__arrow {
8573
+ transform: rotate(0deg);
8574
+ }
8575
+
8576
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
8577
+ transform: rotate(90deg);
8578
+ }
8579
+
8580
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
8581
+ margin: 0 0 0 1rem;
8582
+ }
8583
+
8584
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
8585
+ margin: 0 1rem 0 0.5rem;
8586
+ }
8587
+
8588
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
8589
+ padding-top: 0;
8590
+ padding-bottom: 0;
8591
+ margin-top: 0.5rem;
8592
+ }
8593
+
8594
+ .c4p--add-select .cds--tooltip,
8595
+ .c4p--add-select .cds--overflow-menu-options {
8657
8596
  z-index: 9000;
8658
8597
  }
8659
8598
 
@@ -9055,8 +8994,7 @@ button.c4p--add-select__global-filter-toggle--open {
9055
8994
  max-height: 38.5rem;
9056
8995
  background-color: var(--cds-background, #ffffff);
9057
8996
  color: var(--cds-text-primary, #161616);
9058
- transition: transform 110ms;
9059
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
8997
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
9060
8998
  }
9061
8999
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
9062
9000
  position: sticky;
@@ -9130,8 +9068,7 @@ button.c4p--add-select__global-filter-toggle--open {
9130
9068
  background-color: var(--cds-background, #ffffff);
9131
9069
  cursor: pointer;
9132
9070
  text-align: left;
9133
- transition: background-color 240ms;
9134
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9071
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9135
9072
  }
9136
9073
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
9137
9074
  margin-bottom: 0.25rem;
@@ -9244,8 +9181,7 @@ button.c4p--add-select__global-filter-toggle--open {
9244
9181
  margin: 0 auto;
9245
9182
  background-color: var(--cds-layer-02, #ffffff);
9246
9183
  content: "";
9247
- transition: background-color 240ms;
9248
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9184
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9249
9185
  }
9250
9186
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
9251
9187
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -12348,10 +12284,6 @@ button.c4p--add-select__global-filter-toggle--open {
12348
12284
  padding-right: 1rem;
12349
12285
  }
12350
12286
 
12351
- .c4p--remove-modal .cds--modal-close {
12352
- display: none;
12353
- }
12354
-
12355
12287
  .c4p--remove-modal__body {
12356
12288
  padding-right: 20%;
12357
12289
  margin-bottom: 1rem;
@@ -13557,13 +13489,13 @@ button.c4p--add-select__global-filter-toggle--open {
13557
13489
  .cds--popover--left-top .cds--popover-content {
13558
13490
  top: -50%;
13559
13491
  right: 100%;
13560
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
13492
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
13561
13493
  }
13562
13494
 
13563
13495
  .cds--popover--left-bottom .cds--popover-content {
13564
13496
  right: 100%;
13565
13497
  bottom: -50%;
13566
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
13498
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
13567
13499
  }
13568
13500
 
13569
13501
  .cds--popover--left .cds--popover-content::before,
@@ -15015,7 +14947,9 @@ button.c4p--add-select__global-filter-toggle--open {
15015
14947
  display: inline-block;
15016
14948
  overflow: hidden;
15017
14949
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
15018
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14950
+ max-width: calc(
14951
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
14952
+ );
15019
14953
  min-height: var(--c4p--inline-edit--size);
15020
14954
  /* stylelint-disable-next-line carbon/layout-token-use */
15021
14955
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -15218,27 +15152,95 @@ button.c4p--add-select__global-filter-toggle--open {
15218
15152
  color: var(--cds-support-error, #da1e28);
15219
15153
  }
15220
15154
 
15221
- .c4p--data-spreadsheet {
15222
- --c4p--data-spreadsheet--total-width: 0;
15223
- display: inline-block;
15224
- border-spacing: 0;
15225
- /* stylelint-disable-next-line max-nesting-depth */
15155
+ .c4p--inline-edit-v2 {
15156
+ display: flex;
15157
+ align-items: center;
15158
+ background: transparent;
15159
+ cursor: pointer;
15226
15160
  }
15227
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
15228
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
15161
+
15162
+ .c4p--inline-edit-v2-readonly {
15163
+ cursor: not-allowed;
15229
15164
  }
15230
- .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
15231
- position: relative;
15165
+
15166
+ .c4p--inline-edit-v2:hover {
15167
+ background: var(--cds-field-01, #f4f4f4);
15232
15168
  }
15233
- .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
15234
- border-bottom: 0;
15169
+
15170
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
15171
+ visibility: visible;
15235
15172
  }
15236
- .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
15237
- .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
15238
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
15239
- font-weight: var(--cds-body-short-01-font-weight, 400);
15240
- line-height: var(--cds-body-short-01-line-height, 1.28572);
15241
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15173
+
15174
+ .c4p--inline-edit-v2__btn-edit {
15175
+ visibility: hidden;
15176
+ }
15177
+
15178
+ .c4p--inline-edit-v2-focused {
15179
+ background: var(--cds-field-01, #f4f4f4);
15180
+ outline: 2px solid var(--cds-focus, #0f62fe);
15181
+ }
15182
+
15183
+ .c4p--inline-edit-v2__text-input {
15184
+ flex: 1;
15185
+ }
15186
+
15187
+ .c4p--inline-edit-v2__text-input-label {
15188
+ display: none;
15189
+ }
15190
+
15191
+ .c4p--inline-edit-v2__warning-icon {
15192
+ /* stylelint-disable-next-line carbon/layout-token-use */
15193
+ margin-right: 0.4375rem;
15194
+ color: var(--cds-support-error, #da1e28);
15195
+ }
15196
+
15197
+ .c4p--inline-edit-v2__warning-text {
15198
+ font-size: var(--cds-label-01-font-size, 0.75rem);
15199
+ font-weight: var(--cds-label-01-font-weight, 400);
15200
+ line-height: var(--cds-label-01-line-height, 1.33333);
15201
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15202
+ margin-top: 0.5rem;
15203
+ color: var(--cds-support-error, #da1e28);
15204
+ }
15205
+
15206
+ .c4p--inline-edit-v2__text-input.cds--text-input {
15207
+ border: none;
15208
+ background: transparent;
15209
+ cursor: pointer;
15210
+ outline: none;
15211
+ }
15212
+
15213
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
15214
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
15215
+ cursor: not-allowed;
15216
+ }
15217
+
15218
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
15219
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
15220
+ outline: none;
15221
+ }
15222
+
15223
+ .c4p--data-spreadsheet {
15224
+ --c4p--data-spreadsheet--total-width: 0;
15225
+ display: inline-block;
15226
+ border-spacing: 0;
15227
+ /* stylelint-disable-next-line max-nesting-depth */
15228
+ }
15229
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
15230
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
15231
+ }
15232
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
15233
+ position: relative;
15234
+ }
15235
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
15236
+ border-bottom: 0;
15237
+ }
15238
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
15239
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
15240
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
15241
+ font-weight: var(--cds-body-short-01-font-weight, 400);
15242
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
15243
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15242
15244
  width: 100%;
15243
15245
  height: 100%;
15244
15246
  padding: 0 0.5rem;
@@ -15506,6 +15508,11 @@ button.c4p--add-select__global-filter-toggle--open {
15506
15508
  align-items: center;
15507
15509
  color: var(--cds-text-primary, #161616);
15508
15510
  }
15511
+ .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 {
15512
+ position: sticky;
15513
+ z-index: 1;
15514
+ left: 0;
15515
+ }
15509
15516
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
15510
15517
  align-items: center;
15511
15518
  padding-top: 0;
@@ -15522,6 +15529,11 @@ button.c4p--add-select__global-filter-toggle--open {
15522
15529
  align-items: center;
15523
15530
  padding-top: 0;
15524
15531
  }
15532
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
15533
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
15534
+ position: sticky;
15535
+ left: 0;
15536
+ }
15525
15537
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
15526
15538
  display: flex;
15527
15539
  height: 100%;
@@ -15581,9 +15593,12 @@ button.c4p--add-select__global-filter-toggle--open {
15581
15593
  height: 100%;
15582
15594
  overflow-x: auto;
15583
15595
  }
15584
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
15585
- overflow: hidden;
15596
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
15597
+ display: flex;
15598
+ overflow: auto;
15586
15599
  max-height: 100%;
15600
+ flex-direction: column;
15601
+ background-color: var(--cds-layer-01, #f4f4f4);
15587
15602
  }
15588
15603
  .c4p--datagrid__grid-container .c4p--datagrid__head {
15589
15604
  display: flex;
@@ -15671,10 +15686,6 @@ button.c4p--add-select__global-filter-toggle--open {
15671
15686
  flex: 1 1 auto;
15672
15687
  }
15673
15688
 
15674
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
15675
- border-bottom: none;
15676
- }
15677
-
15678
15689
  .c4p--datagrid__resizer {
15679
15690
  position: absolute;
15680
15691
  z-index: 1;
@@ -15714,6 +15725,12 @@ button.c4p--add-select__global-filter-toggle--open {
15714
15725
  .c4p--datagrid__head-hidden-select-all {
15715
15726
  padding-right: 2.5rem;
15716
15727
  }
15728
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15729
+ position: sticky;
15730
+ z-index: 1;
15731
+ left: 0;
15732
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
15733
+ }
15717
15734
 
15718
15735
  .c4p--datagrid__simple-body {
15719
15736
  position: relative;
@@ -15737,15 +15754,6 @@ button.c4p--add-select__global-filter-toggle--open {
15737
15754
  min-width: 0 !important;
15738
15755
  }
15739
15756
 
15740
- .c4p--datagrid__table-simple::-webkit-scrollbar {
15741
- width: 6px;
15742
- background-color: var(--cds-background, #ffffff);
15743
- }
15744
-
15745
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
15746
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
15747
- }
15748
-
15749
15757
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
15750
15758
  overflow: auto;
15751
15759
  }
@@ -15764,39 +15772,35 @@ button.c4p--add-select__global-filter-toggle--open {
15764
15772
  flex-direction: row;
15765
15773
  }
15766
15774
 
15767
- .c4p--datagrid__datagridLeftPanel {
15768
- display: flex;
15769
- width: 388px;
15770
- background-color: var(--cds-layer-01, #f4f4f4);
15771
- }
15772
-
15773
- .c4p--datagrid__leftPanel-position {
15774
- display: inherit;
15775
+ .c4p--datagrid__table-container-inner {
15776
+ overflow: hidden;
15777
+ flex: 1;
15775
15778
  }
15776
15779
 
15777
15780
  .c4p--datagrid__datagridWithPanel {
15778
15781
  position: relative;
15779
15782
  display: flex;
15780
- width: 100%;
15781
15783
  height: 100%;
15782
15784
  flex-direction: column;
15783
15785
  }
15784
15786
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
15785
15787
  display: flex;
15786
- overflow: hidden;
15788
+ overflow: visible;
15787
15789
  flex-direction: column;
15788
15790
  }
15789
15791
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
15790
15792
  width: 100%;
15791
15793
  }
15792
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
15793
- flex: 0 0 auto;
15794
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
15795
+ display: flex;
15796
+ overflow: visible;
15797
+ background-color: var(--cds-layer-01, #f4f4f4);
15794
15798
  }
15795
- .c4p--datagrid__datagridWithPanel .cds--data-table-content {
15796
- flex: 1 1 0%;
15799
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
15800
+ border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
15797
15801
  }
15798
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
15799
- overflow: hidden;
15802
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
15803
+ height: 100%;
15800
15804
  }
15801
15805
 
15802
15806
  .c4p--datagrid__table-container {
@@ -15805,10 +15809,25 @@ button.c4p--add-select__global-filter-toggle--open {
15805
15809
  overflow: auto;
15806
15810
  width: 100%;
15807
15811
  max-height: 100%;
15812
+ overflow-y: auto;
15808
15813
  }
15809
15814
 
15810
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
15811
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
15815
+ .c4p--datagrid__carbon-row-expanded {
15816
+ position: relative;
15817
+ }
15818
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
15819
+ position: absolute;
15820
+ z-index: 2;
15821
+ /* stylelint-disable-next-line carbon/layout-token-use */
15822
+ top: var(--c4p--datagrid--row-height);
15823
+ /* stylelint-disable-next-line carbon/layout-token-use */
15824
+ left: calc(
15825
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
15826
+ );
15827
+ width: 1px;
15828
+ height: var(--c4p--datagrid--indicator-height);
15829
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
15830
+ content: "";
15812
15831
  }
15813
15832
 
15814
15833
  .c4p--datagrid .cds--data-table-header {
@@ -15824,7 +15843,7 @@ button.c4p--add-select__global-filter-toggle--open {
15824
15843
  padding-bottom: 1rem;
15825
15844
  }
15826
15845
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
15827
- flex: 0 0 auto;
15846
+ flex: 1 0 auto;
15828
15847
  }
15829
15848
  .c4p--datagrid__dense-header .cds--table-toolbar {
15830
15849
  background: transparent;
@@ -15855,6 +15874,7 @@ button.c4p--add-select__global-filter-toggle--open {
15855
15874
 
15856
15875
  .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
15857
15876
  position: absolute;
15877
+ top: 0;
15858
15878
  left: 0;
15859
15879
  width: 0.25rem;
15860
15880
  height: 100%;
@@ -15893,10 +15913,84 @@ button.c4p--add-select__global-filter-toggle--open {
15893
15913
  margin: 0;
15894
15914
  }
15895
15915
 
15916
+ .c4p--datagrid .c4p--button-menu {
15917
+ height: 3rem;
15918
+ }
15919
+
15920
+ .c4p--datagrid .c4p--datagrid__row-size-button {
15921
+ display: flex;
15922
+ width: 3rem;
15923
+ height: 3rem;
15924
+ justify-content: center;
15925
+ }
15926
+
15927
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
15928
+ flex: 0 0 auto;
15929
+ margin-right: 0.5rem;
15930
+ }
15931
+
15932
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
15933
+ width: 10px;
15934
+ height: 7px;
15935
+ }
15936
+
15937
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
15938
+ background: var(--cds-layer);
15939
+ }
15940
+
15941
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
15942
+ border-radius: 5px;
15943
+ }
15944
+
15945
+ .c4p--datagrid__virtualScrollContainer {
15946
+ width: 100%;
15947
+ }
15948
+
15949
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
15950
+ overflow: hidden;
15951
+ height: 100vh;
15952
+ }
15953
+
15954
+ .c4p--datagrid .cds--modal {
15955
+ width: 100%;
15956
+ }
15957
+
15958
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
15959
+ flex-shrink: 0;
15960
+ background-color: var(--cds-interactive, #0f62fe);
15961
+ }
15962
+
15963
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
15964
+ fill: var(--cds-background, #ffffff);
15965
+ }
15966
+
15967
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
15968
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
15969
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
15970
+ background-color: var(--cds-button-primary-hover, #0050e6);
15971
+ }
15972
+
15973
+ .c4p--datagrid__toolbar-options.c4p--datagrid__toolbar-options {
15974
+ background-color: var(--cds-layer-02, #ffffff);
15975
+ }
15976
+
15977
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
15978
+ background-color: transparent;
15979
+ }
15980
+
15981
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
15982
+ position: absolute;
15983
+ }
15984
+
15985
+ .c4p--datagrid__table-toolbar--sm .c4p--filter-summary,
15986
+ .c4p--datagrid__table-toolbar--xs .c4p--filter-summary {
15987
+ padding: 0 0.5rem;
15988
+ }
15989
+
15896
15990
  /*
15897
15991
  * Licensed Materials - Property of IBM
15898
15992
  * 5724-Q36
15899
- * (c) Copyright IBM Corp. 2020 - 2021
15993
+ * (c) Copyright IBM Corp. 2020 - 2022
15900
15994
  * US Government Users Restricted Rights - Use, duplication or disclosure
15901
15995
  * restricted by GSA ADP Schedule Contract with IBM Corp.
15902
15996
  */
@@ -15907,6 +16001,33 @@ button.c4p--add-select__global-filter-toggle--open {
15907
16001
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15908
16002
  }
15909
16003
 
16004
+ .c4p--datagrid .c4p--datagrid__expander-icon {
16005
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16006
+ }
16007
+
16008
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
16009
+ transform: rotate(90deg);
16010
+ }
16011
+
16012
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
16013
+ border-bottom: none;
16014
+ }
16015
+
16016
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
16017
+ position: relative;
16018
+ }
16019
+
16020
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
16021
+ position: absolute;
16022
+ /* stylelint-disable-next-line carbon/layout-token-use */
16023
+ top: -1px;
16024
+ left: 0;
16025
+ width: 100%;
16026
+ height: 1px;
16027
+ background-color: var(--cds-border-subtle);
16028
+ content: "";
16029
+ }
16030
+
15910
16031
  /*
15911
16032
  * Licensed Materials - Property of IBM
15912
16033
  * 5724-Q36
@@ -15931,13 +16052,12 @@ button.c4p--add-select__global-filter-toggle--open {
15931
16052
  background-color: var(--cds-layer-accent-01, #e0e0e0);
15932
16053
  }
15933
16054
 
15934
- /*
15935
- * Licensed Materials - Property of IBM
15936
- * 5724-Q36
15937
- * (c) Copyright IBM Corp. 2020
15938
- * US Government Users Restricted Rights - Use, duplication or disclosure
15939
- * restricted by GSA ADP Schedule Contract with IBM Corp.
15940
- */
16055
+ /**
16056
+ * Copyright IBM Corp. 2020, 2023
16057
+ *
16058
+ * This source code is licensed under the Apache-2.0 license found in the
16059
+ * LICENSE file in the root directory of this source tree.
16060
+ */
15941
16061
  .c4p--datagrid__sortableColumn .cds--table-header-label .header-title {
15942
16062
  display: inline-block;
15943
16063
  width: auto;
@@ -15947,36 +16067,43 @@ button.c4p--add-select__global-filter-toggle--open {
15947
16067
  width: 100%;
15948
16068
  height: 100%;
15949
16069
  }
15950
- .c4p--datagrid__sortableColumn .cds--table-header-label button:focus,
15951
- .c4p--datagrid__sortableColumn .cds--table-header-label button:active,
16070
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus,
16071
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active,
15952
16072
  .c4p--datagrid__sortableColumn .cds--table-header-label button:focus svg {
15953
16073
  /* stylelint-disable-next-line declaration-no-important */
15954
16074
  background: none !important;
15955
16075
  /* stylelint-disable-next-line declaration-no-important */
15956
16076
  color: var(--cds-text-primary, #161616) !important;
15957
- /* stylelint-disable-next-line declaration-no-important */
15958
- outline: none !important;
15959
16077
  }
15960
- .c4p--datagrid__sortableColumn .cds--table-header-label button {
16078
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus + .c4p--datagrid__resizer,
16079
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active + .c4p--datagrid__resizer {
16080
+ z-index: -1;
16081
+ }
16082
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort {
15961
16083
  width: 100%;
15962
16084
  min-width: 100%;
15963
- min-height: 0;
15964
- padding: 0;
16085
+ padding: 0 1rem;
15965
16086
  border: none;
15966
16087
  /* stylelint-disable-next-line declaration-no-important */
15967
16088
  background: none !important;
15968
- box-shadow: none;
15969
16089
  /* stylelint-disable-next-line declaration-no-important */
15970
16090
  color: var(--cds-text-primary, #161616) !important;
15971
16091
  font: inherit;
15972
16092
  }
15973
- .c4p--datagrid__sortableColumn .cds--table-header-label button svg {
16093
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort svg {
15974
16094
  fill: var(--cds-text-primary, #161616);
16095
+ opacity: 0;
15975
16096
  visibility: hidden;
15976
16097
  }
16098
+ .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
16099
+ width: calc(100% + 2rem);
16100
+ margin: 0 calc(-1 * 1rem);
16101
+ }
15977
16102
 
15978
16103
  .c4p--datagrid__sortableColumn:hover .cds--table-header-label svg,
16104
+ .c4p--datagrid__sortableColumn:focus-within .cds--table-header-label svg,
15979
16105
  .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label svg {
16106
+ opacity: 1;
15980
16107
  visibility: visible;
15981
16108
  }
15982
16109
 
@@ -16035,14 +16162,36 @@ button.c4p--add-select__global-filter-toggle--open {
16035
16162
  /* stylelint-disable-next-line declaration-no-important */
16036
16163
  position: sticky !important;
16037
16164
  right: 0;
16038
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16165
+ display: flex;
16166
+ align-items: center;
16167
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16039
16168
  }
16040
16169
 
16041
16170
  .c4p--datagrid__right-sticky-column-header {
16042
16171
  /* stylelint-disable-next-line declaration-no-important */
16043
16172
  position: sticky !important;
16044
16173
  right: 0;
16045
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16174
+ }
16175
+
16176
+ .c4p--datagrid__left-sticky-column-cell {
16177
+ /* stylelint-disable-next-line declaration-no-important */
16178
+ position: sticky !important;
16179
+ left: 0;
16180
+ display: flex;
16181
+ align-items: center;
16182
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16183
+ }
16184
+
16185
+ .c4p--datagrid__left-sticky-column-header {
16186
+ /* stylelint-disable-next-line declaration-no-important */
16187
+ position: sticky !important;
16188
+ z-index: 1;
16189
+ left: 0;
16190
+ }
16191
+
16192
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16193
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16194
+ left: 2.5rem;
16046
16195
  }
16047
16196
 
16048
16197
  .c4p--datagrid__sticky-noShadow {
@@ -16058,6 +16207,12 @@ button.c4p--add-select__global-filter-toggle--open {
16058
16207
  right: 6px !important;
16059
16208
  }
16060
16209
 
16210
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
16211
+ position: sticky;
16212
+ z-index: 1;
16213
+ left: 0;
16214
+ }
16215
+
16061
16216
  /*
16062
16217
  * Licensed Materials - Property of IBM
16063
16218
  * 5724-Q36
@@ -16080,50 +16235,66 @@ button.c4p--add-select__global-filter-toggle--open {
16080
16235
  margin-bottom: 0.5rem;
16081
16236
  }
16082
16237
 
16083
- /*
16084
- * Licensed Materials - Property of IBM
16085
- * 5724-Q36
16086
- * (c) Copyright IBM Corp. 2021, 2022
16087
- * US Government Users Restricted Rights - Use, duplication or disclosure
16088
- * restricted by GSA ADP Schedule Contract with IBM Corp.
16089
- */
16090
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
16091
- position: inherit;
16238
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
16239
+ cursor: not-allowed;
16240
+ }
16241
+
16242
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
16243
+ pointer-events: none;
16244
+ }
16245
+
16246
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
16247
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
16248
+ }
16249
+
16250
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
16092
16251
  display: flex;
16093
16252
  flex-flow: column;
16094
- /* stylelint-disable-next-line declaration-no-important */
16095
- padding-top: 0 !important;
16096
16253
  }
16097
16254
 
16098
- .c4p--datagrid__customize-columns-checkbox {
16255
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
16256
+ height: 3rem;
16257
+ padding-left: 3rem;
16258
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
16259
+ }
16260
+
16261
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16099
16262
  display: flex;
16100
16263
  justify-content: center;
16101
- /* stylelint-disable-next-line declaration-no-important */
16102
- margin-bottom: 0 !important;
16264
+ padding-left: 0.25rem;
16103
16265
  }
16104
16266
 
16105
- .c4p--datagrid__customize-columns-modal--actions {
16106
- display: flex;
16107
- flex-flow: row;
16108
- margin-bottom: 1.5rem;
16267
+ .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
16268
+ margin-bottom: 0;
16109
16269
  }
16110
16270
 
16111
- .c4p--datagrid__customize-columns-modal--actions > button {
16112
- margin-left: 1rem;
16271
+ .c4p--datagrid__customize-columns-column-list {
16272
+ position: relative;
16273
+ overflow: auto;
16113
16274
  }
16114
16275
 
16115
- .c4p--datagrid__customize-columns-instructions {
16116
- margin-bottom: 1.5rem;
16117
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
16118
- font-weight: var(--cds-body-long-01-font-weight, 400);
16119
- line-height: var(--cds-body-long-01-line-height, 1.42857);
16120
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
16121
- color: var(--cds-text-primary, #161616);
16276
+ .c4p--datagrid__customize-columns-select-all,
16277
+ .c4p--datagrid__customize-columns-select-all--selected {
16278
+ position: sticky;
16279
+ z-index: 1;
16280
+ top: 0;
16281
+ display: flex;
16282
+ height: 3rem;
16283
+ padding-left: 2.5rem;
16284
+ border-bottom: 1px solid var(--cds-layer-active);
16285
+ background-color: var(--cds-layer);
16286
+ }
16287
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
16288
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
16289
+ font-weight: 600;
16122
16290
  }
16123
16291
 
16124
- .c4p--datagrid__customize-columns-column-list {
16125
- position: relative;
16126
- overflow: auto;
16292
+ .c4p--datagrid__customize-columns-select-all:hover {
16293
+ background-color: var(--cds-layer-hover);
16294
+ }
16295
+
16296
+ .c4p--datagrid__customize-columns-select-all--selected {
16297
+ background-color: var(--cds-layer-selected);
16127
16298
  }
16128
16299
 
16129
16300
  /*
@@ -16134,17 +16305,213 @@ button.c4p--add-select__global-filter-toggle--open {
16134
16305
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16135
16306
  */
16136
16307
  .c4p--datagrid__row-size-dropdown {
16137
- position: absolute;
16138
16308
  padding: 1rem;
16139
- background-color: var(--cds-background, #ffffff);
16309
+ background-color: var(--cds-layer-02, #ffffff);
16140
16310
  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));
16141
16311
  }
16142
16312
 
16143
- .c4p--datagrid__row-size-button--open {
16144
- background-color: var(--cds-background, #ffffff);
16313
+ .cds--btn--ghost.c4p--datagrid__row-size-button--open {
16314
+ background-color: var(--cds-layer-02, #ffffff);
16145
16315
  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));
16146
16316
  }
16147
16317
 
16318
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
16319
+ /* stylelint-disable-next-line carbon/layout-token-use */
16320
+ left: -4px;
16321
+ }
16322
+
16323
+ /*
16324
+ * Licensed Materials - Property of IBM
16325
+ * 5724-Q36
16326
+ * (c) Copyright IBM Corp. 2022
16327
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16328
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16329
+ */
16330
+ .c4p--datagrid-filter-flyout__container {
16331
+ position: relative;
16332
+ }
16333
+
16334
+ .c4p--datagrid-filter-flyout {
16335
+ position: absolute;
16336
+ top: 3rem;
16337
+ right: 0;
16338
+ display: none;
16339
+ width: 40.125rem;
16340
+ background-color: var(--cds-layer-02, #ffffff);
16341
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
16342
+ }
16343
+
16344
+ .c4p--datagrid-filter-flyout--open {
16345
+ display: grid;
16346
+ }
16347
+
16348
+ .c4p--datagrid-filter-flyout--batch {
16349
+ min-height: 21.625rem;
16350
+ grid-template-rows: 1fr 3rem;
16351
+ }
16352
+
16353
+ .c4p--datagrid-filter-flyout--instant {
16354
+ min-height: 17.625rem;
16355
+ grid-template-rows: 1fr;
16356
+ }
16357
+
16358
+ .c4p--datagrid-filter-flyout__inner-container {
16359
+ padding: 1rem 1rem 3rem 1rem;
16360
+ }
16361
+
16362
+ .c4p--datagrid-filter-flyout__inner-container::before {
16363
+ position: absolute;
16364
+ top: -0.4375rem;
16365
+ right: 1px;
16366
+ display: block;
16367
+ width: 2.875rem;
16368
+ height: 0.9375rem;
16369
+ background-color: var(--cds-layer-02, #ffffff);
16370
+ content: "";
16371
+ }
16372
+
16373
+ .c4p--datagrid-filter-flyout__title {
16374
+ display: block;
16375
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16376
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
16377
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
16378
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
16379
+ margin-bottom: 1.5rem;
16380
+ }
16381
+
16382
+ .c4p--datagrid-filter-flyout__filters {
16383
+ display: grid;
16384
+ gap: 1rem 2rem;
16385
+ grid-template-columns: 1fr 1fr;
16386
+ }
16387
+
16388
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
16389
+ position: relative;
16390
+ background-color: var(--cds-layer-02, #ffffff);
16391
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
16392
+ }
16393
+
16394
+ .c4p--datagrid-filter-flyout .cds--fieldset {
16395
+ margin-bottom: 0;
16396
+ }
16397
+
16398
+ /*
16399
+ * Licensed Materials - Property of IBM
16400
+ * 5724-Q36
16401
+ * (c) Copyright IBM Corp. 2022
16402
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16403
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16404
+ */
16405
+ .c4p--datagrid-filter-panel__container {
16406
+ position: relative;
16407
+ width: rem(320px);
16408
+ height: clamp(var(--filter-panel-min-height), 100%, 100vh);
16409
+ border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
16410
+ background-color: var(--cds-layer-01, #f4f4f4);
16411
+ }
16412
+
16413
+ .c4p--datagrid-filter-panel--open {
16414
+ border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
16415
+ }
16416
+
16417
+ .c4p--datagrid-filter-panel__container::before {
16418
+ position: absolute;
16419
+ top: -1px;
16420
+ left: 0;
16421
+ display: block;
16422
+ width: rem(47px);
16423
+ height: 1px;
16424
+ background-color: var(--cds-layer-01, #f4f4f4);
16425
+ content: "";
16426
+ }
16427
+
16428
+ .c4p--datagrid-filter-panel__inner-container {
16429
+ position: relative;
16430
+ z-index: 0;
16431
+ overflow: auto;
16432
+ padding: 0 1rem;
16433
+ overscroll-behavior: contain;
16434
+ }
16435
+
16436
+ .c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
16437
+ padding-bottom: 5rem;
16438
+ }
16439
+
16440
+ .c4p--datagrid-filter-panel {
16441
+ position: sticky;
16442
+ top: 0;
16443
+ }
16444
+
16445
+ .c4p--datagrid-filter-panel__heading {
16446
+ display: flex;
16447
+ justify-content: space-between;
16448
+ padding-left: 1rem;
16449
+ border-bottom: 1px solid transparent;
16450
+ }
16451
+
16452
+ .c4p--datagrid-filter-panel__heading--with-divider {
16453
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16454
+ }
16455
+
16456
+ .c4p--datagrid-filter-panel__title {
16457
+ padding: 1rem 0;
16458
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
16459
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
16460
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
16461
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
16462
+ }
16463
+
16464
+ .c4p--datagrid-filter-panel__search {
16465
+ padding: 0 1rem 1.5rem;
16466
+ }
16467
+
16468
+ .c4p--datagrid-filter-panel__category-title {
16469
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16470
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
16471
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
16472
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
16473
+ margin-bottom: 1rem;
16474
+ color: var(--cds-text-secondary, #525252);
16475
+ }
16476
+
16477
+ .c4p--datagrid-filter-panel__category {
16478
+ padding-bottom: 1.5rem;
16479
+ }
16480
+
16481
+ .c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
16482
+ margin-bottom: 1rem;
16483
+ }
16484
+
16485
+ .c4p--datagrid-filter-panel__action-set {
16486
+ position: sticky;
16487
+ z-index: 1;
16488
+ bottom: 0;
16489
+ height: rem(64px);
16490
+ margin-top: auto;
16491
+ }
16492
+
16493
+ .c4p--datagrid-filter-panel__container .cds--accordion__title {
16494
+ margin: 0;
16495
+ }
16496
+
16497
+ .c4p--datagrid-filter-panel__container .cds--accordion__arrow {
16498
+ margin: 0.125rem 0 0;
16499
+ }
16500
+
16501
+ .c4p--datagrid-filter-panel__container .cds--accordion__content {
16502
+ padding-right: 0;
16503
+ padding-left: 0;
16504
+ }
16505
+
16506
+ .c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
16507
+ margin-bottom: 1rem;
16508
+ }
16509
+
16510
+ .cds--btn.c4p--datagrid-filter-panel-open-button {
16511
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16512
+ border-bottom: none;
16513
+ }
16514
+
16148
16515
  /*
16149
16516
  * Licensed Materials - Property of IBM
16150
16517
  * 5724-Q36
@@ -16172,10 +16539,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16172
16539
  margin-left: 0.125rem;
16173
16540
  }
16174
16541
 
16175
- .c4p--datagrid__expanded-row-content {
16176
- padding: 1rem 1rem 1.5rem 4rem;
16177
- }
16178
-
16179
16542
  /*
16180
16543
  * Licensed Materials - Property of IBM
16181
16544
  * 5724-Q36
@@ -16183,6 +16546,49 @@ th.c4p--datagrid__select-all-toggle-on.button {
16183
16546
  * US Government Users Restricted Rights - Use, duplication or disclosure
16184
16547
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16185
16548
  */
16549
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
16550
+ position: relative;
16551
+ padding: 1rem 1rem 1.5rem 4rem;
16552
+ }
16553
+
16554
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
16555
+ position: absolute;
16556
+ /* stylelint-disable-next-line carbon/layout-token-use */
16557
+ top: -1px;
16558
+ right: 0;
16559
+ width: calc(100% - 3rem);
16560
+ height: 1px;
16561
+ background-color: var(--cds-layer-accent);
16562
+ content: "";
16563
+ }
16564
+
16565
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
16566
+ position: absolute;
16567
+ bottom: 0;
16568
+ left: 0;
16569
+ width: 100%;
16570
+ height: 1px;
16571
+ background-color: var(--cds-layer-accent);
16572
+ content: "";
16573
+ }
16574
+
16575
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
16576
+ padding: 0.5rem;
16577
+ padding-right: 0;
16578
+ }
16579
+
16580
+ .c4p--datagrid__row-expander.cds--btn {
16581
+ display: flex;
16582
+ width: 2rem;
16583
+ height: 2rem;
16584
+ min-height: 2rem;
16585
+ justify-content: center;
16586
+ padding: 0;
16587
+ }
16588
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
16589
+ fill: var(--cds-layer-selected-inverse, #161616);
16590
+ }
16591
+
16186
16592
  .c4p--datagrid__draggable-handleStyle {
16187
16593
  display: flex;
16188
16594
  align-items: center;
@@ -16194,32 +16600,62 @@ th.c4p--datagrid__select-all-toggle-on.button {
16194
16600
  pointer-events: none;
16195
16601
  }
16196
16602
 
16197
- svg.c4p--datagrid__draggable-handleStyle.disable {
16198
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16603
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
16604
+ fill: var(--cds-icon-on-color-disabled, #8d8d8d);
16199
16605
  }
16200
16606
 
16201
16607
  .c4p--datagrid__draggable-handleHolder {
16202
16608
  display: flex;
16203
- height: 2rem;
16204
- padding-left: 0.25rem;
16205
- margin-bottom: 0.5rem;
16206
- background: var(--cds-layer-02, #ffffff);
16609
+ height: 3rem;
16610
+ border-bottom: 1px solid var(--cds-layer-active);
16611
+ background-color: var(--cds-layer);
16612
+ }
16613
+
16614
+ .c4p--datagrid__draggable-handleHolder:hover {
16615
+ background-color: var(--cds-layer-hover);
16207
16616
  }
16208
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
16617
+
16618
+ .c4p--datagrid__draggable-handleHolder-selected {
16619
+ display: flex;
16620
+ height: 3rem;
16621
+ border-bottom: 1px solid var(--cds-layer-active);
16622
+ background-color: var(--cds-layer-selected);
16623
+ }
16624
+
16625
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
16626
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16627
+ }
16628
+
16629
+ .c4p--datagrid__draggable-handleHolder-isOver {
16209
16630
  border: 2px dashed var(--cds-focus, #0f62fe);
16210
- background-color: var(--cds-highlight, #d0e2ff);
16631
+ /* stylelint-disable-next-line carbon/theme-token-use */
16632
+ background-color: #edf5ff;
16211
16633
  }
16212
16634
 
16213
16635
  .c4p--datagrid__draggable-handleHolder-droppable {
16214
16636
  display: flex;
16215
16637
  width: 100%;
16638
+ align-items: center;
16639
+ padding-left: 1rem;
16640
+ /* stylelint-disable-next-line carbon/type-token-use */
16641
+ line-height: 1;
16642
+ transition-property: opacity;
16216
16643
  }
16217
16644
 
16218
- .c4p--datagrid__draggable-handleHolder--grabbed {
16645
+ .c4p--datagrid__draggable-handleHolder-droppable.c4p--datagrid__draggable-handleHolder-droppable--origin {
16646
+ opacity: 0.5;
16647
+ transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
16648
+ }
16649
+
16650
+ .c4p--datagrid__draggable-handleHolder-grabbed {
16219
16651
  background-color: var(--cds-highlight, #d0e2ff);
16220
16652
  color: var(--cds-text-primary, #161616);
16221
16653
  }
16222
16654
 
16655
+ .c4p--datagrid__draggable-handleHolder--sticky {
16656
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
16657
+ }
16658
+
16223
16659
  .c4p--datagrid__shared-ui--assistive-text {
16224
16660
  position: absolute;
16225
16661
  overflow: hidden;
@@ -16235,10 +16671,363 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16235
16671
  /*
16236
16672
  * Licensed Materials - Property of IBM
16237
16673
  * 5724-Q36
16238
- * (c) Copyright IBM Corp. 2020, 2021
16674
+ * (c) Copyright IBM Corp. 2021
16239
16675
  * US Government Users Restricted Rights - Use, duplication or disclosure
16240
16676
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16241
16677
  */
16678
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
16679
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
16680
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16681
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
16682
+ height: 1.5rem;
16683
+ }
16684
+
16685
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
16686
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
16687
+ height: calc(1.5rem - 0.25rem);
16688
+ }
16689
+
16690
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
16691
+ max-height: none;
16692
+ }
16693
+
16694
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
16695
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
16696
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16697
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
16698
+ height: 2rem;
16699
+ }
16700
+
16701
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
16702
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
16703
+ height: calc(2rem - 0.25rem);
16704
+ }
16705
+
16706
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
16707
+ max-height: none;
16708
+ }
16709
+
16710
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
16711
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
16712
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16713
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
16714
+ height: 2.5rem;
16715
+ }
16716
+
16717
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
16718
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
16719
+ height: calc(2.5rem - 0.25rem);
16720
+ }
16721
+
16722
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
16723
+ max-height: none;
16724
+ }
16725
+
16726
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
16727
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
16728
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16729
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
16730
+ height: 3rem;
16731
+ }
16732
+
16733
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
16734
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
16735
+ height: calc(3rem - 0.25rem);
16736
+ }
16737
+
16738
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
16739
+ max-height: none;
16740
+ }
16741
+
16742
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
16743
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
16744
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16745
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
16746
+ height: 4rem;
16747
+ }
16748
+
16749
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
16750
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
16751
+ height: calc(4rem - 0.25rem);
16752
+ }
16753
+
16754
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
16755
+ max-height: none;
16756
+ }
16757
+
16758
+ .c4p--datagrid {
16759
+ --c4p--datagrid--grid-header-height: 0;
16760
+ }
16761
+
16762
+ .c4p--datagrid__inline-edit-cell {
16763
+ display: flex;
16764
+ height: 100%;
16765
+ align-items: center;
16766
+ }
16767
+
16768
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
16769
+ display: flex;
16770
+ align-items: center;
16771
+ }
16772
+
16773
+ .c4p--datagrid__inline-edit--outer-cell-button {
16774
+ width: 100%;
16775
+ height: calc(100% + 2px);
16776
+ }
16777
+
16778
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
16779
+ position: relative;
16780
+ display: flex;
16781
+ width: 100%;
16782
+ height: 100%;
16783
+ align-items: center;
16784
+ justify-content: space-between;
16785
+ padding-left: 1rem;
16786
+ color: var(--cds-text-secondary, #525252);
16787
+ cursor: pointer;
16788
+ outline: 0;
16789
+ }
16790
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
16791
+ height: 1rem;
16792
+ padding-right: 1rem;
16793
+ }
16794
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
16795
+ padding-left: 0;
16796
+ cursor: default;
16797
+ }
16798
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
16799
+ height: 1rem;
16800
+ fill: var(--cds-icon-secondary, #525252);
16801
+ }
16802
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
16803
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16804
+ }
16805
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
16806
+ justify-content: flex-start;
16807
+ }
16808
+ .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) {
16809
+ /* stylelint-disable-next-line */
16810
+ }
16811
+ .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 {
16812
+ display: none;
16813
+ }
16814
+ .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 {
16815
+ display: block;
16816
+ }
16817
+
16818
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
16819
+ background-color: var(--cds-layer-active);
16820
+ color: var(--cds-text-primary, #161616);
16821
+ }
16822
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
16823
+ fill: var(--cds-icon-primary, #161616);
16824
+ }
16825
+
16826
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
16827
+ background-color: var(--cds-layer-active);
16828
+ color: var(--cds-text-primary, #161616);
16829
+ cursor: text;
16830
+ }
16831
+
16832
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16833
+ /* stylelint-disable-next-line carbon/theme-token-use */
16834
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16835
+ outline-offset: calc(-1 * 0.125rem);
16836
+ }
16837
+ @media screen and (prefers-contrast) {
16838
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16839
+ outline-style: dotted;
16840
+ }
16841
+ }
16842
+
16843
+ .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) {
16844
+ color: var(--cds-button-disabled, #c6c6c6);
16845
+ cursor: not-allowed;
16846
+ }
16847
+
16848
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
16849
+ overflow: hidden;
16850
+ padding-right: 1rem;
16851
+ text-overflow: ellipsis;
16852
+ white-space: nowrap;
16853
+ }
16854
+
16855
+ .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 {
16856
+ padding-right: 3rem;
16857
+ }
16858
+
16859
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
16860
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
16861
+ height: 3rem;
16862
+ }
16863
+
16864
+ .c4p--datagrid__inline-edit-button-icon {
16865
+ position: absolute;
16866
+ right: 1rem;
16867
+ }
16868
+
16869
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
16870
+ position: relative;
16871
+ padding: 0;
16872
+ }
16873
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
16874
+ padding-left: 1rem;
16875
+ }
16876
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
16877
+ min-width: auto;
16878
+ padding-right: 1rem;
16879
+ }
16880
+
16881
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
16882
+ padding-bottom: 1rem;
16883
+ padding-left: 1rem;
16884
+ }
16885
+
16886
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16887
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
16888
+ width: inherit;
16889
+ }
16890
+
16891
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16892
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16893
+ width: 100%;
16894
+ height: 3rem;
16895
+ max-height: none;
16896
+ }
16897
+
16898
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
16899
+ width: inherit;
16900
+ }
16901
+
16902
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16903
+ overflow: hidden;
16904
+ width: 100%;
16905
+ max-width: none;
16906
+ padding-right: 2rem;
16907
+ text-overflow: ellipsis;
16908
+ white-space: nowrap;
16909
+ }
16910
+
16911
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
16912
+ border-top-color: var(--cds-layer-hover);
16913
+ background-color: var(--cds-layer-hover);
16914
+ }
16915
+
16916
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
16917
+ position: absolute;
16918
+ z-index: 2;
16919
+ bottom: 0;
16920
+ left: 0;
16921
+ width: 2px;
16922
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16923
+ background-color: var(--cds-link-inverse, #78a9ff);
16924
+ content: "";
16925
+ }
16926
+
16927
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
16928
+ position: absolute;
16929
+ z-index: 2;
16930
+ right: 0;
16931
+ bottom: 0;
16932
+ width: 2px;
16933
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16934
+ background-color: var(--cds-link-inverse, #78a9ff);
16935
+ content: "";
16936
+ }
16937
+
16938
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
16939
+ position: absolute;
16940
+ z-index: 2;
16941
+ top: 0;
16942
+ right: 0;
16943
+ left: 0;
16944
+ width: var(--c4p--datagrid--grid-width);
16945
+ height: 2px;
16946
+ background-color: var(--cds-link-inverse, #78a9ff);
16947
+ }
16948
+
16949
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
16950
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
16951
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
16952
+ }
16953
+
16954
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
16955
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
16956
+ outline-offset: -2px;
16957
+ }
16958
+
16959
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
16960
+ padding-top: 0.125rem;
16961
+ }
16962
+
16963
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
16964
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
16965
+ position: absolute;
16966
+ z-index: 3;
16967
+ top: calc(100% - 0.125rem);
16968
+ width: 100%;
16969
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
16970
+ margin: 0;
16971
+ background-color: var(--cds-layer-01, #f4f4f4);
16972
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
16973
+ outline-offset: calc(-1 * 0.125rem);
16974
+ }
16975
+
16976
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
16977
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16978
+ }
16979
+
16980
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
16981
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
16982
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16983
+ z-index: 4;
16984
+ top: calc(100% + 0.75rem + 0.125rem);
16985
+ right: 0.5rem;
16986
+ }
16987
+
16988
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16989
+ top: calc(100% + 0.25rem + 0.125rem);
16990
+ }
16991
+
16992
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16993
+ position: absolute;
16994
+ top: 0;
16995
+ left: 0.125rem;
16996
+ width: calc(100% - (0.125rem * 2));
16997
+ height: 0.125rem;
16998
+ background-color: var(--cds-layer-01, #f4f4f4);
16999
+ content: "";
17000
+ }
17001
+
17002
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
17003
+ position: absolute;
17004
+ top: 0.125rem;
17005
+ left: 0.5rem;
17006
+ width: calc(100% - (0.5rem * 2));
17007
+ height: 1px;
17008
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
17009
+ content: "";
17010
+ }
17011
+
17012
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
17013
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
17014
+ }
17015
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
17016
+ background-color: transparent;
17017
+ }
17018
+
17019
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
17020
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
17021
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
17022
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
17023
+ outline-color: var(--cds-support-error, #da1e28);
17024
+ }
17025
+
17026
+ .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 {
17027
+ background-color: var(--cds-support-error, #da1e28);
17028
+ }
17029
+
17030
+ /* stylelint-disable max-nesting-depth */
16242
17031
  .c4p--datagrid__datagridWrap {
16243
17032
  display: block;
16244
17033
  width: 100%;
@@ -16246,6 +17035,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16246
17035
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
16247
17036
  display: none;
16248
17037
  }
17038
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
17039
+ left: 0.125rem;
17040
+ width: 112px;
17041
+ }
16249
17042
 
16250
17043
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16251
17044
  left: 0.125rem;
@@ -16254,7 +17047,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16254
17047
 
16255
17048
  .c4p--datagrid__datagridWrap-simple {
16256
17049
  display: flex;
16257
- overflow: hidden;
16258
17050
  width: 100%;
16259
17051
  height: 100%;
16260
17052
  flex-direction: column;
@@ -16265,4 +17057,43 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16265
17057
  overflow-x: unset;
16266
17058
  }
16267
17059
 
17060
+ /* stylelint-disable max-nesting-depth */
17061
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
17062
+ /* Used id for overriding the SVG path fill */
17063
+ }
17064
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
17065
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
17066
+ background-color: #0050e6;
17067
+ }
17068
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
17069
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
17070
+ box-shadow: none;
17071
+ }
17072
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
17073
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
17074
+ fill: #ffffff;
17075
+ }
17076
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
17077
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
17078
+ background-color: transparent;
17079
+ }
17080
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
17081
+ background-color: #0f62fe;
17082
+ color: #ffffff;
17083
+ }
17084
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
17085
+ animation-duration: 700ms;
17086
+ animation-fill-mode: forwards;
17087
+ animation-iteration-count: infinite;
17088
+ animation-name: rotate;
17089
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17090
+ }
17091
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
17092
+ background-color: transparent;
17093
+ }
17094
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
17095
+ background-color: #0f62fe;
17096
+ color: #ffffff;
17097
+ }
17098
+
16268
17099
  /*# sourceMappingURL=index.css.map */