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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (383) hide show
  1. package/README.md +19 -2
  2. package/css/index-full-carbon.css +1376 -403
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +8 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +1413 -385
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +4 -8
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +1295 -453
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +8 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +1170 -333
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +8 -8
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  20. package/es/components/ActionSet/ActionSet.js +7 -3
  21. package/es/components/AddSelect/AddSelect.js +6 -6
  22. package/es/components/AddSelect/AddSelectBody.js +73 -32
  23. package/es/components/AddSelect/AddSelectBreadcrumbs.js +12 -4
  24. package/es/components/AddSelect/AddSelectColumn.js +8 -8
  25. package/es/components/AddSelect/AddSelectFilter.js +10 -7
  26. package/es/components/AddSelect/AddSelectList.js +64 -29
  27. package/es/components/AddSelect/AddSelectMetaPanel.js +7 -1
  28. package/es/components/AddSelect/AddSelectSidebar.js +5 -2
  29. package/es/components/AddSelect/AddSelectSort.js +2 -2
  30. package/es/components/AddSelect/add-select-utils.js +9 -2
  31. package/es/components/AddSelect/hooks/useItemSort.js +6 -0
  32. package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
  33. package/es/components/AddSelect/hooks/usePath.js +23 -2
  34. package/es/components/AddSelect/index.js +1 -1
  35. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  36. package/es/components/ButtonMenu/ButtonMenu.js +4 -3
  37. package/es/components/Card/Card.js +16 -6
  38. package/es/components/Card/CardFooter.js +3 -1
  39. package/es/components/Card/CardHeader.js +20 -1
  40. package/es/components/ComboButton/ComboButton.js +1 -1
  41. package/es/components/CreateFullPage/CreateFullPage.js +13 -3
  42. package/es/components/CreateTearsheet/CreateTearsheet.js +17 -3
  43. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  44. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  45. package/es/components/DataSpreadsheet/DataSpreadsheet.js +65 -15
  46. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  47. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  48. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  49. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  50. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  51. package/es/components/Datagrid/Datagrid/Datagrid.js +16 -40
  52. package/es/components/Datagrid/Datagrid/DatagridContent.js +194 -0
  53. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +18 -8
  54. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  55. package/es/components/Datagrid/Datagrid/DatagridHead.js +1 -2
  56. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -4
  57. package/es/components/Datagrid/Datagrid/DatagridRow.js +44 -7
  58. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -5
  59. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  60. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -2
  61. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +14 -10
  62. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +32 -11
  63. package/es/components/Datagrid/Datagrid/DraggableElement.js +12 -4
  64. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +11 -54
  65. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +15 -14
  66. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +63 -31
  67. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +193 -0
  68. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +56 -0
  69. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -1
  70. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +256 -0
  71. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +270 -0
  72. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +91 -0
  73. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +28 -0
  74. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +10 -0
  75. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +310 -0
  76. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +25 -0
  77. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +38 -0
  78. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +25 -0
  79. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +9 -0
  80. package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +55 -0
  81. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +72 -0
  82. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  83. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  84. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +541 -0
  85. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  86. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  87. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  88. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  89. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  90. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  91. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +262 -0
  92. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  93. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  94. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  95. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -1
  96. package/es/components/Datagrid/index.js +4 -1
  97. package/es/components/Datagrid/useActionsColumn.js +28 -12
  98. package/es/components/Datagrid/useColumnOrder.js +8 -0
  99. package/es/components/Datagrid/useCustomizeColumns.js +13 -8
  100. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  101. package/es/components/Datagrid/useExpandedRow.js +0 -1
  102. package/es/components/Datagrid/useFiltering.js +99 -0
  103. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  104. package/es/components/Datagrid/useInlineEdit.js +71 -0
  105. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  106. package/es/components/Datagrid/useNestedRows.js +16 -4
  107. package/es/components/Datagrid/useParentDimensions.js +3 -1
  108. package/es/components/Datagrid/useRowExpander.js +12 -4
  109. package/es/components/Datagrid/useRowSize.js +17 -6
  110. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  111. package/es/components/Datagrid/useSelectRows.js +13 -4
  112. package/es/components/Datagrid/useSortableColumns.js +15 -9
  113. package/es/components/Datagrid/useStickyColumn.js +11 -0
  114. package/es/components/Datagrid/utils/DatagridActions.js +249 -0
  115. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  116. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  117. package/es/components/Datagrid/utils/getArgTypes.js +94 -0
  118. package/es/components/Datagrid/utils/getInlineEditColumns.js +159 -0
  119. package/es/components/Datagrid/utils/makeData.js +54 -1
  120. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  121. package/es/components/EditUpdateCards/index.js +7 -0
  122. package/es/components/ExportModal/ExportModal.js +1 -1
  123. package/es/components/FilterSummary/FilterSummary.js +54 -0
  124. package/es/components/FilterSummary/index.js +7 -0
  125. package/es/components/ImportModal/ImportModal.js +3 -3
  126. package/es/components/InlineEdit/InlineEdit.js +28 -426
  127. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  128. package/es/components/InlineEditV1/index.js +7 -0
  129. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  130. package/es/components/InlineEditV2/index.js +7 -0
  131. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  132. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  133. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  134. package/es/components/MultiAddSelect/index.js +6 -0
  135. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  136. package/es/components/OptionsTile/OptionsTile.js +32 -16
  137. package/es/components/PageHeader/PageHeader.js +4 -4
  138. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  139. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  140. package/es/components/RemoveModal/RemoveModal.js +20 -3
  141. package/es/components/Saving/Saving.js +1 -1
  142. package/es/components/SidePanel/SidePanel.js +45 -52
  143. package/es/components/SidePanel/motion/variants.js +45 -0
  144. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  145. package/es/components/SingleAddSelect/index.js +6 -0
  146. package/es/components/StatusIcon/StatusIcon.js +1 -1
  147. package/es/components/Tearsheet/Tearsheet.js +5 -0
  148. package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
  149. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  150. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  151. package/es/components/WebTerminal/WebTerminal.js +1 -1
  152. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  153. package/es/components/index.js +4 -3
  154. package/es/global/js/hooks/index.js +2 -1
  155. package/es/global/js/hooks/useClickOutside.js +1 -1
  156. package/es/global/js/hooks/useControllableState.js +83 -0
  157. package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
  158. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  159. package/es/global/js/package-settings.js +9 -6
  160. package/es/global/js/utils/getBezierValues.js +20 -0
  161. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  162. package/es/global/js/utils/motionConstants.js +45 -0
  163. package/es/global/js/utils/rangeWithCallback.js +13 -0
  164. package/es/global/js/utils/story-helper.js +5 -1
  165. package/es/global/js/utils/uuidv4.spec.js +4 -0
  166. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  167. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  168. package/lib/components/ActionSet/ActionSet.js +7 -3
  169. package/lib/components/AddSelect/AddSelect.js +5 -6
  170. package/lib/components/AddSelect/AddSelectBody.js +68 -31
  171. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  172. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  173. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  174. package/lib/components/AddSelect/AddSelectList.js +65 -30
  175. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  176. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  177. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  178. package/lib/components/AddSelect/add-select-utils.js +9 -2
  179. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  180. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  181. package/lib/components/AddSelect/hooks/usePath.js +16 -1
  182. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  183. package/lib/components/ButtonMenu/ButtonMenu.js +4 -3
  184. package/lib/components/Card/Card.js +16 -6
  185. package/lib/components/Card/CardFooter.js +3 -1
  186. package/lib/components/Card/CardHeader.js +21 -1
  187. package/lib/components/ComboButton/ComboButton.js +3 -3
  188. package/lib/components/CreateFullPage/CreateFullPage.js +13 -3
  189. package/lib/components/CreateTearsheet/CreateTearsheet.js +18 -3
  190. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  191. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  192. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +65 -14
  193. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  194. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  195. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  196. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +53 -0
  197. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  198. package/lib/components/Datagrid/Datagrid/Datagrid.js +19 -47
  199. package/lib/components/Datagrid/Datagrid/DatagridContent.js +230 -0
  200. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +19 -9
  201. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  202. package/lib/components/Datagrid/Datagrid/DatagridHead.js +1 -3
  203. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -5
  204. package/lib/components/Datagrid/Datagrid/DatagridRow.js +46 -8
  205. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +14 -6
  206. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  207. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -2
  208. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +14 -10
  209. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +33 -10
  210. package/lib/components/Datagrid/Datagrid/DraggableElement.js +12 -4
  211. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +11 -49
  212. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -8
  213. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +76 -46
  214. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +85 -48
  215. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +32 -36
  216. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
  217. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +284 -0
  218. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +301 -0
  219. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +112 -0
  220. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +47 -0
  221. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +39 -0
  222. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +325 -0
  223. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +37 -0
  224. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +50 -0
  225. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useSubscribeToEventEmitter.js +35 -0
  226. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +37 -0
  227. package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +67 -0
  228. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +82 -0
  229. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  230. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  231. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +566 -0
  232. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  233. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  234. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  235. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  236. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  237. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  238. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +271 -0
  239. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  240. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  241. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  242. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -8
  243. package/lib/components/Datagrid/index.js +25 -1
  244. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  245. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  246. package/lib/components/Datagrid/useCustomizeColumns.js +12 -7
  247. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  248. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  249. package/lib/components/Datagrid/useFiltering.js +105 -0
  250. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  251. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  252. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  253. package/lib/components/Datagrid/useNestedRows.js +17 -4
  254. package/lib/components/Datagrid/useParentDimensions.js +3 -1
  255. package/lib/components/Datagrid/useRowExpander.js +17 -5
  256. package/lib/components/Datagrid/useRowSize.js +18 -13
  257. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  258. package/lib/components/Datagrid/useSelectRows.js +13 -4
  259. package/lib/components/Datagrid/useSortableColumns.js +16 -7
  260. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  261. package/lib/components/Datagrid/utils/DatagridActions.js +275 -0
  262. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  263. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  264. package/lib/components/Datagrid/utils/getArgTypes.js +102 -0
  265. package/lib/components/Datagrid/utils/getInlineEditColumns.js +174 -0
  266. package/lib/components/Datagrid/utils/makeData.js +56 -2
  267. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  268. package/lib/components/EditUpdateCards/index.js +13 -0
  269. package/lib/components/ExportModal/ExportModal.js +3 -3
  270. package/lib/components/FilterSummary/FilterSummary.js +72 -0
  271. package/lib/components/FilterSummary/index.js +15 -0
  272. package/lib/components/ImportModal/ImportModal.js +4 -4
  273. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  274. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  275. package/lib/components/InlineEditV1/index.js +13 -0
  276. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  277. package/lib/components/InlineEditV2/index.js +13 -0
  278. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  279. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  280. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  281. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  282. package/lib/components/OptionsTile/OptionsTile.js +36 -19
  283. package/lib/components/PageHeader/PageHeader.js +5 -5
  284. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  285. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  286. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  287. package/lib/components/Saving/Saving.js +5 -5
  288. package/lib/components/SidePanel/SidePanel.js +48 -53
  289. package/lib/components/SidePanel/motion/variants.js +55 -0
  290. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  291. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  292. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  293. package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
  294. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  295. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  296. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  297. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  298. package/lib/components/index.js +33 -1
  299. package/lib/global/js/hooks/index.js +9 -1
  300. package/lib/global/js/hooks/useClickOutside.js +1 -1
  301. package/lib/global/js/hooks/useControllableState.js +94 -0
  302. package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
  303. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  304. package/lib/global/js/package-settings.js +9 -6
  305. package/lib/global/js/utils/getBezierValues.js +29 -0
  306. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  307. package/lib/global/js/utils/motionConstants.js +55 -0
  308. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  309. package/lib/global/js/utils/story-helper.js +5 -1
  310. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  311. package/package.json +18 -16
  312. package/scss/components/ActionSet/_action-set.scss +9 -4
  313. package/scss/components/AddSelect/_add-select.scss +132 -34
  314. package/scss/components/AddSelect/_index.scss +1 -1
  315. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  316. package/scss/components/Card/_card.scss +1 -0
  317. package/scss/components/Cascade/_cascade.scss +1 -1
  318. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  319. package/scss/components/Datagrid/_datagrid.scss +7 -1
  320. package/scss/components/Datagrid/_storybook-styles.scss +29 -5
  321. package/scss/components/Datagrid/styles/_datagrid.scss +133 -41
  322. package/scss/components/Datagrid/styles/_draggableElement.scss +50 -18
  323. package/scss/components/Datagrid/styles/_index.scss +10 -8
  324. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  325. package/scss/components/Datagrid/styles/_useExpandedRow.scss +56 -10
  326. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  327. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  328. package/scss/components/Datagrid/styles/_useSortableColumns.scss +35 -16
  329. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  330. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +69 -0
  331. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  332. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +129 -0
  333. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +12 -4
  334. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  335. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  336. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  337. package/scss/components/EditUpdateCards/_index.scss +8 -0
  338. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  339. package/scss/components/FilterSummary/_filter-summary.scss +21 -0
  340. package/scss/components/FilterSummary/_index.scss +10 -0
  341. package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
  342. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  343. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  344. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  345. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  346. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  347. package/scss/components/InlineEditV2/_index.scss +10 -0
  348. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  349. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  350. package/scss/components/MultiAddSelect/_multi-add-select.scss +8 -1
  351. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  352. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  353. package/scss/components/OptionsTile/_options-tile.scss +10 -3
  354. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  355. package/scss/components/SidePanel/_side-panel.scss +3 -82
  356. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  357. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  358. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  359. package/scss/components/SingleAddSelect/_index.scss +7 -0
  360. package/scss/components/SingleAddSelect/_single-add-select.scss +8 -1
  361. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  362. package/scss/components/Tearsheet/_tearsheet.scss +4 -2
  363. package/scss/components/_index-released-only-with-carbon.scss +3 -1
  364. package/scss/components/_index-released-only.scss +4 -1
  365. package/scss/components/_index-with-carbon.scss +3 -1
  366. package/scss/components/_index.scss +4 -1
  367. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +0 -157
  368. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -62
  369. package/es/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js +0 -6
  370. package/lib/components/Datagrid/Datagrid.stories-helpers/LeftPanelStory.js +0 -13
  371. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -52
  372. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  373. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  374. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  375. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  376. /package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  377. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  378. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  379. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  380. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  381. /package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  382. /package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  383. /package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
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,
@@ -14756,12 +14688,19 @@ button.c4p--add-select__global-filter-toggle--open {
14756
14688
  }
14757
14689
 
14758
14690
  .c4p--options-tile {
14759
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14760
- background-color: var(--cds-layer-01, #f4f4f4);
14691
+ position: relative;
14692
+ border-bottom: 1px solid var(--cds-border-subtle);
14693
+ background-color: var(--cds-layer);
14761
14694
  }
14762
14695
 
14763
14696
  .c4p--options-tile__toggle-container {
14764
- position: relative;
14697
+ position: absolute;
14698
+ top: 0;
14699
+ right: 0;
14700
+ bottom: 0;
14701
+ width: calc(
14702
+ 1rem + 2rem + 1rem
14703
+ );
14765
14704
  }
14766
14705
 
14767
14706
  .c4p--options-tile__toggle {
@@ -15015,7 +14954,9 @@ button.c4p--add-select__global-filter-toggle--open {
15015
14954
  display: inline-block;
15016
14955
  overflow: hidden;
15017
14956
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
15018
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14957
+ max-width: calc(
14958
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
14959
+ );
15019
14960
  min-height: var(--c4p--inline-edit--size);
15020
14961
  /* stylelint-disable-next-line carbon/layout-token-use */
15021
14962
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -15218,19 +15159,87 @@ button.c4p--add-select__global-filter-toggle--open {
15218
15159
  color: var(--cds-support-error, #da1e28);
15219
15160
  }
15220
15161
 
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 */
15162
+ .c4p--inline-edit-v2 {
15163
+ display: flex;
15164
+ align-items: center;
15165
+ background: transparent;
15166
+ cursor: pointer;
15226
15167
  }
15227
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
15228
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
15168
+
15169
+ .c4p--inline-edit-v2-readonly {
15170
+ cursor: not-allowed;
15229
15171
  }
15230
- .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
15231
- position: relative;
15172
+
15173
+ .c4p--inline-edit-v2:hover {
15174
+ background: var(--cds-field-01, #f4f4f4);
15232
15175
  }
15233
- .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
15176
+
15177
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
15178
+ visibility: visible;
15179
+ }
15180
+
15181
+ .c4p--inline-edit-v2__btn-edit {
15182
+ visibility: hidden;
15183
+ }
15184
+
15185
+ .c4p--inline-edit-v2-focused {
15186
+ background: var(--cds-field-01, #f4f4f4);
15187
+ outline: 2px solid var(--cds-focus, #0f62fe);
15188
+ }
15189
+
15190
+ .c4p--inline-edit-v2__text-input {
15191
+ flex: 1;
15192
+ }
15193
+
15194
+ .c4p--inline-edit-v2__text-input-label {
15195
+ display: none;
15196
+ }
15197
+
15198
+ .c4p--inline-edit-v2__warning-icon {
15199
+ /* stylelint-disable-next-line carbon/layout-token-use */
15200
+ margin-right: 0.4375rem;
15201
+ color: var(--cds-support-error, #da1e28);
15202
+ }
15203
+
15204
+ .c4p--inline-edit-v2__warning-text {
15205
+ font-size: var(--cds-label-01-font-size, 0.75rem);
15206
+ font-weight: var(--cds-label-01-font-weight, 400);
15207
+ line-height: var(--cds-label-01-line-height, 1.33333);
15208
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15209
+ margin-top: 0.5rem;
15210
+ color: var(--cds-support-error, #da1e28);
15211
+ }
15212
+
15213
+ .c4p--inline-edit-v2__text-input.cds--text-input {
15214
+ border: none;
15215
+ background: transparent;
15216
+ cursor: pointer;
15217
+ outline: none;
15218
+ }
15219
+
15220
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
15221
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
15222
+ cursor: not-allowed;
15223
+ }
15224
+
15225
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
15226
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
15227
+ outline: none;
15228
+ }
15229
+
15230
+ .c4p--data-spreadsheet {
15231
+ --c4p--data-spreadsheet--total-width: 0;
15232
+ display: inline-block;
15233
+ border-spacing: 0;
15234
+ /* stylelint-disable-next-line max-nesting-depth */
15235
+ }
15236
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
15237
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
15238
+ }
15239
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
15240
+ position: relative;
15241
+ }
15242
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
15234
15243
  border-bottom: 0;
15235
15244
  }
15236
15245
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
@@ -15506,6 +15515,11 @@ button.c4p--add-select__global-filter-toggle--open {
15506
15515
  align-items: center;
15507
15516
  color: var(--cds-text-primary, #161616);
15508
15517
  }
15518
+ .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 {
15519
+ position: sticky;
15520
+ z-index: 1;
15521
+ left: 0;
15522
+ }
15509
15523
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
15510
15524
  align-items: center;
15511
15525
  padding-top: 0;
@@ -15522,6 +15536,11 @@ button.c4p--add-select__global-filter-toggle--open {
15522
15536
  align-items: center;
15523
15537
  padding-top: 0;
15524
15538
  }
15539
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
15540
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
15541
+ position: sticky;
15542
+ left: 0;
15543
+ }
15525
15544
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
15526
15545
  display: flex;
15527
15546
  height: 100%;
@@ -15581,9 +15600,12 @@ button.c4p--add-select__global-filter-toggle--open {
15581
15600
  height: 100%;
15582
15601
  overflow-x: auto;
15583
15602
  }
15584
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
15585
- overflow: hidden;
15603
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
15604
+ display: flex;
15605
+ overflow: auto;
15586
15606
  max-height: 100%;
15607
+ flex-direction: column;
15608
+ background-color: var(--cds-layer-01, #f4f4f4);
15587
15609
  }
15588
15610
  .c4p--datagrid__grid-container .c4p--datagrid__head {
15589
15611
  display: flex;
@@ -15671,10 +15693,6 @@ button.c4p--add-select__global-filter-toggle--open {
15671
15693
  flex: 1 1 auto;
15672
15694
  }
15673
15695
 
15674
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
15675
- border-bottom: none;
15676
- }
15677
-
15678
15696
  .c4p--datagrid__resizer {
15679
15697
  position: absolute;
15680
15698
  z-index: 1;
@@ -15714,6 +15732,12 @@ button.c4p--add-select__global-filter-toggle--open {
15714
15732
  .c4p--datagrid__head-hidden-select-all {
15715
15733
  padding-right: 2.5rem;
15716
15734
  }
15735
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15736
+ position: sticky;
15737
+ z-index: 1;
15738
+ left: 0;
15739
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
15740
+ }
15717
15741
 
15718
15742
  .c4p--datagrid__simple-body {
15719
15743
  position: relative;
@@ -15737,15 +15761,6 @@ button.c4p--add-select__global-filter-toggle--open {
15737
15761
  min-width: 0 !important;
15738
15762
  }
15739
15763
 
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
15764
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
15750
15765
  overflow: auto;
15751
15766
  }
@@ -15764,39 +15779,35 @@ button.c4p--add-select__global-filter-toggle--open {
15764
15779
  flex-direction: row;
15765
15780
  }
15766
15781
 
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;
15782
+ .c4p--datagrid__table-container-inner {
15783
+ overflow: hidden;
15784
+ flex: 1;
15775
15785
  }
15776
15786
 
15777
15787
  .c4p--datagrid__datagridWithPanel {
15778
15788
  position: relative;
15779
15789
  display: flex;
15780
- width: 100%;
15781
15790
  height: 100%;
15782
15791
  flex-direction: column;
15783
15792
  }
15784
15793
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
15785
15794
  display: flex;
15786
- overflow: hidden;
15795
+ overflow: visible;
15787
15796
  flex-direction: column;
15788
15797
  }
15789
15798
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
15790
15799
  width: 100%;
15791
15800
  }
15792
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
15793
- flex: 0 0 auto;
15801
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
15802
+ display: flex;
15803
+ overflow: visible;
15804
+ background-color: var(--cds-layer-01, #f4f4f4);
15794
15805
  }
15795
- .c4p--datagrid__datagridWithPanel .cds--data-table-content {
15796
- flex: 1 1 0%;
15806
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
15807
+ border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
15797
15808
  }
15798
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
15799
- overflow: hidden;
15809
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
15810
+ height: 100%;
15800
15811
  }
15801
15812
 
15802
15813
  .c4p--datagrid__table-container {
@@ -15805,10 +15816,25 @@ button.c4p--add-select__global-filter-toggle--open {
15805
15816
  overflow: auto;
15806
15817
  width: 100%;
15807
15818
  max-height: 100%;
15819
+ overflow-y: auto;
15808
15820
  }
15809
15821
 
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);
15822
+ .c4p--datagrid__carbon-row-expanded {
15823
+ position: relative;
15824
+ }
15825
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
15826
+ position: absolute;
15827
+ z-index: 2;
15828
+ /* stylelint-disable-next-line carbon/layout-token-use */
15829
+ top: var(--c4p--datagrid--row-height);
15830
+ /* stylelint-disable-next-line carbon/layout-token-use */
15831
+ left: calc(
15832
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
15833
+ );
15834
+ width: 1px;
15835
+ height: var(--c4p--datagrid--indicator-height);
15836
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
15837
+ content: "";
15812
15838
  }
15813
15839
 
15814
15840
  .c4p--datagrid .cds--data-table-header {
@@ -15824,7 +15850,9 @@ button.c4p--add-select__global-filter-toggle--open {
15824
15850
  padding-bottom: 1rem;
15825
15851
  }
15826
15852
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
15827
- flex: 0 0 auto;
15853
+ display: flex;
15854
+ flex: 1 0 auto;
15855
+ align-items: flex-end;
15828
15856
  }
15829
15857
  .c4p--datagrid__dense-header .cds--table-toolbar {
15830
15858
  background: transparent;
@@ -15832,9 +15860,6 @@ button.c4p--add-select__global-filter-toggle--open {
15832
15860
  .c4p--datagrid__dense-header .cds__table-container {
15833
15861
  flex: 1 1 100%;
15834
15862
  }
15835
- .c4p--datagrid__dense-header .cds--table-toolbar {
15836
- padding-top: 2rem;
15837
- }
15838
15863
  .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
15839
15864
  position: relative;
15840
15865
  }
@@ -15855,6 +15880,7 @@ button.c4p--add-select__global-filter-toggle--open {
15855
15880
 
15856
15881
  .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
15857
15882
  position: absolute;
15883
+ top: 0;
15858
15884
  left: 0;
15859
15885
  width: 0.25rem;
15860
15886
  height: 100%;
@@ -15893,10 +15919,84 @@ button.c4p--add-select__global-filter-toggle--open {
15893
15919
  margin: 0;
15894
15920
  }
15895
15921
 
15922
+ .c4p--datagrid .c4p--button-menu {
15923
+ height: 3rem;
15924
+ }
15925
+
15926
+ .c4p--datagrid .c4p--datagrid__row-size-button {
15927
+ display: flex;
15928
+ width: 3rem;
15929
+ height: 3rem;
15930
+ justify-content: center;
15931
+ }
15932
+
15933
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
15934
+ flex: 0 0 auto;
15935
+ margin-right: 0.5rem;
15936
+ }
15937
+
15938
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
15939
+ width: 10px;
15940
+ height: 7px;
15941
+ }
15942
+
15943
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
15944
+ background: var(--cds-layer);
15945
+ }
15946
+
15947
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
15948
+ border-radius: 5px;
15949
+ }
15950
+
15951
+ .c4p--datagrid__virtualScrollContainer {
15952
+ width: 100%;
15953
+ }
15954
+
15955
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
15956
+ overflow: hidden;
15957
+ height: 100vh;
15958
+ }
15959
+
15960
+ .c4p--datagrid .cds--modal {
15961
+ width: 100%;
15962
+ }
15963
+
15964
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
15965
+ flex-shrink: 0;
15966
+ background-color: var(--cds-interactive, #0f62fe);
15967
+ }
15968
+
15969
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
15970
+ fill: var(--cds-background, #ffffff);
15971
+ }
15972
+
15973
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
15974
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
15975
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
15976
+ background-color: var(--cds-button-primary-hover, #0050e6);
15977
+ }
15978
+
15979
+ .c4p--datagrid__toolbar-options.c4p--datagrid__toolbar-options {
15980
+ background-color: var(--cds-layer-02, #ffffff);
15981
+ }
15982
+
15983
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
15984
+ background-color: transparent;
15985
+ }
15986
+
15987
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
15988
+ position: absolute;
15989
+ }
15990
+
15991
+ .c4p--datagrid__table-toolbar--sm .c4p--filter-summary,
15992
+ .c4p--datagrid__table-toolbar--xs .c4p--filter-summary {
15993
+ padding: 0 0.5rem;
15994
+ }
15995
+
15896
15996
  /*
15897
15997
  * Licensed Materials - Property of IBM
15898
15998
  * 5724-Q36
15899
- * (c) Copyright IBM Corp. 2020 - 2021
15999
+ * (c) Copyright IBM Corp. 2020 - 2022
15900
16000
  * US Government Users Restricted Rights - Use, duplication or disclosure
15901
16001
  * restricted by GSA ADP Schedule Contract with IBM Corp.
15902
16002
  */
@@ -15907,6 +16007,33 @@ button.c4p--add-select__global-filter-toggle--open {
15907
16007
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15908
16008
  }
15909
16009
 
16010
+ .c4p--datagrid .c4p--datagrid__expander-icon {
16011
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16012
+ }
16013
+
16014
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
16015
+ transform: rotate(90deg);
16016
+ }
16017
+
16018
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
16019
+ border-bottom: none;
16020
+ }
16021
+
16022
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
16023
+ position: relative;
16024
+ }
16025
+
16026
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
16027
+ position: absolute;
16028
+ /* stylelint-disable-next-line carbon/layout-token-use */
16029
+ top: -1px;
16030
+ left: 0;
16031
+ width: 100%;
16032
+ height: 1px;
16033
+ background-color: var(--cds-border-subtle);
16034
+ content: "";
16035
+ }
16036
+
15910
16037
  /*
15911
16038
  * Licensed Materials - Property of IBM
15912
16039
  * 5724-Q36
@@ -15931,13 +16058,12 @@ button.c4p--add-select__global-filter-toggle--open {
15931
16058
  background-color: var(--cds-layer-accent-01, #e0e0e0);
15932
16059
  }
15933
16060
 
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
- */
16061
+ /**
16062
+ * Copyright IBM Corp. 2020, 2023
16063
+ *
16064
+ * This source code is licensed under the Apache-2.0 license found in the
16065
+ * LICENSE file in the root directory of this source tree.
16066
+ */
15941
16067
  .c4p--datagrid__sortableColumn .cds--table-header-label .header-title {
15942
16068
  display: inline-block;
15943
16069
  width: auto;
@@ -15947,36 +16073,43 @@ button.c4p--add-select__global-filter-toggle--open {
15947
16073
  width: 100%;
15948
16074
  height: 100%;
15949
16075
  }
15950
- .c4p--datagrid__sortableColumn .cds--table-header-label button:focus,
15951
- .c4p--datagrid__sortableColumn .cds--table-header-label button:active,
16076
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus,
16077
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active,
15952
16078
  .c4p--datagrid__sortableColumn .cds--table-header-label button:focus svg {
15953
16079
  /* stylelint-disable-next-line declaration-no-important */
15954
16080
  background: none !important;
15955
16081
  /* stylelint-disable-next-line declaration-no-important */
15956
16082
  color: var(--cds-text-primary, #161616) !important;
15957
- /* stylelint-disable-next-line declaration-no-important */
15958
- outline: none !important;
15959
16083
  }
15960
- .c4p--datagrid__sortableColumn .cds--table-header-label button {
16084
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus + .c4p--datagrid__resizer,
16085
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active + .c4p--datagrid__resizer {
16086
+ z-index: -1;
16087
+ }
16088
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort {
15961
16089
  width: 100%;
15962
16090
  min-width: 100%;
15963
- min-height: 0;
15964
- padding: 0;
16091
+ padding: 0 1rem;
15965
16092
  border: none;
15966
16093
  /* stylelint-disable-next-line declaration-no-important */
15967
16094
  background: none !important;
15968
- box-shadow: none;
15969
16095
  /* stylelint-disable-next-line declaration-no-important */
15970
16096
  color: var(--cds-text-primary, #161616) !important;
15971
16097
  font: inherit;
15972
16098
  }
15973
- .c4p--datagrid__sortableColumn .cds--table-header-label button svg {
16099
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort svg {
15974
16100
  fill: var(--cds-text-primary, #161616);
16101
+ opacity: 0;
15975
16102
  visibility: hidden;
15976
16103
  }
16104
+ .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
16105
+ width: calc(100% + 2rem);
16106
+ margin: 0 calc(-1 * 1rem);
16107
+ }
15977
16108
 
15978
16109
  .c4p--datagrid__sortableColumn:hover .cds--table-header-label svg,
16110
+ .c4p--datagrid__sortableColumn:focus-within .cds--table-header-label svg,
15979
16111
  .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label svg {
16112
+ opacity: 1;
15980
16113
  visibility: visible;
15981
16114
  }
15982
16115
 
@@ -16035,14 +16168,36 @@ button.c4p--add-select__global-filter-toggle--open {
16035
16168
  /* stylelint-disable-next-line declaration-no-important */
16036
16169
  position: sticky !important;
16037
16170
  right: 0;
16038
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16171
+ display: flex;
16172
+ align-items: center;
16173
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16039
16174
  }
16040
16175
 
16041
16176
  .c4p--datagrid__right-sticky-column-header {
16042
16177
  /* stylelint-disable-next-line declaration-no-important */
16043
16178
  position: sticky !important;
16044
16179
  right: 0;
16045
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16180
+ }
16181
+
16182
+ .c4p--datagrid__left-sticky-column-cell {
16183
+ /* stylelint-disable-next-line declaration-no-important */
16184
+ position: sticky !important;
16185
+ left: 0;
16186
+ display: flex;
16187
+ align-items: center;
16188
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16189
+ }
16190
+
16191
+ .c4p--datagrid__left-sticky-column-header {
16192
+ /* stylelint-disable-next-line declaration-no-important */
16193
+ position: sticky !important;
16194
+ z-index: 1;
16195
+ left: 0;
16196
+ }
16197
+
16198
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16199
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16200
+ left: 2.5rem;
16046
16201
  }
16047
16202
 
16048
16203
  .c4p--datagrid__sticky-noShadow {
@@ -16058,6 +16213,12 @@ button.c4p--add-select__global-filter-toggle--open {
16058
16213
  right: 6px !important;
16059
16214
  }
16060
16215
 
16216
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
16217
+ position: sticky;
16218
+ z-index: 1;
16219
+ left: 0;
16220
+ }
16221
+
16061
16222
  /*
16062
16223
  * Licensed Materials - Property of IBM
16063
16224
  * 5724-Q36
@@ -16080,50 +16241,66 @@ button.c4p--add-select__global-filter-toggle--open {
16080
16241
  margin-bottom: 0.5rem;
16081
16242
  }
16082
16243
 
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;
16244
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
16245
+ cursor: not-allowed;
16246
+ }
16247
+
16248
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
16249
+ pointer-events: none;
16250
+ }
16251
+
16252
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
16253
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
16254
+ }
16255
+
16256
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
16092
16257
  display: flex;
16093
16258
  flex-flow: column;
16094
- /* stylelint-disable-next-line declaration-no-important */
16095
- padding-top: 0 !important;
16096
16259
  }
16097
16260
 
16098
- .c4p--datagrid__customize-columns-checkbox {
16261
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
16262
+ height: 3rem;
16263
+ padding-left: 3rem;
16264
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
16265
+ }
16266
+
16267
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16099
16268
  display: flex;
16100
16269
  justify-content: center;
16101
- /* stylelint-disable-next-line declaration-no-important */
16102
- margin-bottom: 0 !important;
16270
+ padding-left: 0.25rem;
16103
16271
  }
16104
16272
 
16105
- .c4p--datagrid__customize-columns-modal--actions {
16106
- display: flex;
16107
- flex-flow: row;
16108
- margin-bottom: 1.5rem;
16273
+ .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
16274
+ margin-bottom: 0;
16109
16275
  }
16110
16276
 
16111
- .c4p--datagrid__customize-columns-modal--actions > button {
16112
- margin-left: 1rem;
16277
+ .c4p--datagrid__customize-columns-column-list {
16278
+ position: relative;
16279
+ overflow: auto;
16113
16280
  }
16114
16281
 
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);
16282
+ .c4p--datagrid__customize-columns-select-all,
16283
+ .c4p--datagrid__customize-columns-select-all--selected {
16284
+ position: sticky;
16285
+ z-index: 1;
16286
+ top: 0;
16287
+ display: flex;
16288
+ height: 3rem;
16289
+ padding-left: 2.5rem;
16290
+ border-bottom: 1px solid var(--cds-layer-active);
16291
+ background-color: var(--cds-layer);
16292
+ }
16293
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
16294
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
16295
+ font-weight: 600;
16122
16296
  }
16123
16297
 
16124
- .c4p--datagrid__customize-columns-column-list {
16125
- position: relative;
16126
- overflow: auto;
16298
+ .c4p--datagrid__customize-columns-select-all:hover {
16299
+ background-color: var(--cds-layer-hover);
16300
+ }
16301
+
16302
+ .c4p--datagrid__customize-columns-select-all--selected {
16303
+ background-color: var(--cds-layer-selected);
16127
16304
  }
16128
16305
 
16129
16306
  /*
@@ -16134,17 +16311,213 @@ button.c4p--add-select__global-filter-toggle--open {
16134
16311
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16135
16312
  */
16136
16313
  .c4p--datagrid__row-size-dropdown {
16137
- position: absolute;
16138
16314
  padding: 1rem;
16139
- background-color: var(--cds-background, #ffffff);
16315
+ background-color: var(--cds-layer-02, #ffffff);
16140
16316
  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
16317
  }
16142
16318
 
16143
- .c4p--datagrid__row-size-button--open {
16144
- background-color: var(--cds-background, #ffffff);
16319
+ .cds--btn--ghost.c4p--datagrid__row-size-button--open {
16320
+ background-color: var(--cds-layer-02, #ffffff);
16145
16321
  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
16322
  }
16147
16323
 
16324
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
16325
+ /* stylelint-disable-next-line carbon/layout-token-use */
16326
+ left: -4px;
16327
+ }
16328
+
16329
+ /*
16330
+ * Licensed Materials - Property of IBM
16331
+ * 5724-Q36
16332
+ * (c) Copyright IBM Corp. 2022
16333
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16334
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16335
+ */
16336
+ .c4p--datagrid-filter-flyout__container {
16337
+ position: relative;
16338
+ }
16339
+
16340
+ .c4p--datagrid-filter-flyout {
16341
+ position: absolute;
16342
+ top: 3rem;
16343
+ right: 0;
16344
+ display: none;
16345
+ width: 40.125rem;
16346
+ background-color: var(--cds-layer-02, #ffffff);
16347
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
16348
+ }
16349
+
16350
+ .c4p--datagrid-filter-flyout--open {
16351
+ display: grid;
16352
+ }
16353
+
16354
+ .c4p--datagrid-filter-flyout--batch {
16355
+ min-height: 21.625rem;
16356
+ grid-template-rows: 1fr 3rem;
16357
+ }
16358
+
16359
+ .c4p--datagrid-filter-flyout--instant {
16360
+ min-height: 17.625rem;
16361
+ grid-template-rows: 1fr;
16362
+ }
16363
+
16364
+ .c4p--datagrid-filter-flyout__inner-container {
16365
+ padding: 1rem 1rem 3rem 1rem;
16366
+ }
16367
+
16368
+ .c4p--datagrid-filter-flyout__inner-container::before {
16369
+ position: absolute;
16370
+ top: -0.4375rem;
16371
+ right: 1px;
16372
+ display: block;
16373
+ width: 2.875rem;
16374
+ height: 0.9375rem;
16375
+ background-color: var(--cds-layer-02, #ffffff);
16376
+ content: "";
16377
+ }
16378
+
16379
+ .c4p--datagrid-filter-flyout__title {
16380
+ display: block;
16381
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16382
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
16383
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
16384
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
16385
+ margin-bottom: 1.5rem;
16386
+ }
16387
+
16388
+ .c4p--datagrid-filter-flyout__filters {
16389
+ display: grid;
16390
+ gap: 1rem 2rem;
16391
+ grid-template-columns: 1fr 1fr;
16392
+ }
16393
+
16394
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
16395
+ position: relative;
16396
+ background-color: var(--cds-layer-02, #ffffff);
16397
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
16398
+ }
16399
+
16400
+ .c4p--datagrid-filter-flyout .cds--fieldset {
16401
+ margin-bottom: 0;
16402
+ }
16403
+
16404
+ /*
16405
+ * Licensed Materials - Property of IBM
16406
+ * 5724-Q36
16407
+ * (c) Copyright IBM Corp. 2022
16408
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16409
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16410
+ */
16411
+ .c4p--datagrid-filter-panel__container {
16412
+ position: relative;
16413
+ width: rem(320px);
16414
+ height: clamp(var(--filter-panel-min-height), 100%, 100vh);
16415
+ border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
16416
+ background-color: var(--cds-layer-01, #f4f4f4);
16417
+ }
16418
+
16419
+ .c4p--datagrid-filter-panel--open {
16420
+ border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
16421
+ }
16422
+
16423
+ .c4p--datagrid-filter-panel__container::before {
16424
+ position: absolute;
16425
+ top: -1px;
16426
+ left: 0;
16427
+ display: block;
16428
+ width: rem(47px);
16429
+ height: 1px;
16430
+ background-color: var(--cds-layer-01, #f4f4f4);
16431
+ content: "";
16432
+ }
16433
+
16434
+ .c4p--datagrid-filter-panel__inner-container {
16435
+ position: relative;
16436
+ z-index: 0;
16437
+ overflow: auto;
16438
+ padding: 0 1rem;
16439
+ overscroll-behavior: contain;
16440
+ }
16441
+
16442
+ .c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
16443
+ padding-bottom: 5rem;
16444
+ }
16445
+
16446
+ .c4p--datagrid-filter-panel {
16447
+ position: sticky;
16448
+ top: 0;
16449
+ }
16450
+
16451
+ .c4p--datagrid-filter-panel__heading {
16452
+ display: flex;
16453
+ justify-content: space-between;
16454
+ padding-left: 1rem;
16455
+ border-bottom: 1px solid transparent;
16456
+ }
16457
+
16458
+ .c4p--datagrid-filter-panel__heading--with-divider {
16459
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16460
+ }
16461
+
16462
+ .c4p--datagrid-filter-panel__title {
16463
+ padding: 1rem 0;
16464
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
16465
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
16466
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
16467
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
16468
+ }
16469
+
16470
+ .c4p--datagrid-filter-panel__search {
16471
+ padding: 0 1rem 1.5rem;
16472
+ }
16473
+
16474
+ .c4p--datagrid-filter-panel__category-title {
16475
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16476
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
16477
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
16478
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
16479
+ margin-bottom: 1rem;
16480
+ color: var(--cds-text-secondary, #525252);
16481
+ }
16482
+
16483
+ .c4p--datagrid-filter-panel__category {
16484
+ padding-bottom: 1.5rem;
16485
+ }
16486
+
16487
+ .c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
16488
+ margin-bottom: 1rem;
16489
+ }
16490
+
16491
+ .c4p--datagrid-filter-panel__action-set {
16492
+ position: sticky;
16493
+ z-index: 1;
16494
+ bottom: 0;
16495
+ height: rem(64px);
16496
+ margin-top: auto;
16497
+ }
16498
+
16499
+ .c4p--datagrid-filter-panel__container .cds--accordion__title {
16500
+ margin: 0;
16501
+ }
16502
+
16503
+ .c4p--datagrid-filter-panel__container .cds--accordion__arrow {
16504
+ margin: 0.125rem 0 0;
16505
+ }
16506
+
16507
+ .c4p--datagrid-filter-panel__container .cds--accordion__content {
16508
+ padding-right: 0;
16509
+ padding-left: 0;
16510
+ }
16511
+
16512
+ .c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
16513
+ margin-bottom: 1rem;
16514
+ }
16515
+
16516
+ .cds--btn.c4p--datagrid-filter-panel-open-button {
16517
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16518
+ border-bottom: none;
16519
+ }
16520
+
16148
16521
  /*
16149
16522
  * Licensed Materials - Property of IBM
16150
16523
  * 5724-Q36
@@ -16172,10 +16545,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16172
16545
  margin-left: 0.125rem;
16173
16546
  }
16174
16547
 
16175
- .c4p--datagrid__expanded-row-content {
16176
- padding: 1rem 1rem 1.5rem 4rem;
16177
- }
16178
-
16179
16548
  /*
16180
16549
  * Licensed Materials - Property of IBM
16181
16550
  * 5724-Q36
@@ -16183,6 +16552,49 @@ th.c4p--datagrid__select-all-toggle-on.button {
16183
16552
  * US Government Users Restricted Rights - Use, duplication or disclosure
16184
16553
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16185
16554
  */
16555
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
16556
+ position: relative;
16557
+ padding: 1rem 1rem 1.5rem 4rem;
16558
+ }
16559
+
16560
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
16561
+ position: absolute;
16562
+ /* stylelint-disable-next-line carbon/layout-token-use */
16563
+ top: -1px;
16564
+ right: 0;
16565
+ width: calc(100% - 3rem);
16566
+ height: 1px;
16567
+ background-color: var(--cds-layer-accent);
16568
+ content: "";
16569
+ }
16570
+
16571
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
16572
+ position: absolute;
16573
+ bottom: 0;
16574
+ left: 0;
16575
+ width: 100%;
16576
+ height: 1px;
16577
+ background-color: var(--cds-layer-accent);
16578
+ content: "";
16579
+ }
16580
+
16581
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
16582
+ padding: 0.5rem;
16583
+ padding-right: 0;
16584
+ }
16585
+
16586
+ .c4p--datagrid__row-expander.cds--btn {
16587
+ display: flex;
16588
+ width: 2rem;
16589
+ height: 2rem;
16590
+ min-height: 2rem;
16591
+ justify-content: center;
16592
+ padding: 0;
16593
+ }
16594
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
16595
+ fill: var(--cds-layer-selected-inverse, #161616);
16596
+ }
16597
+
16186
16598
  .c4p--datagrid__draggable-handleStyle {
16187
16599
  display: flex;
16188
16600
  align-items: center;
@@ -16194,32 +16606,62 @@ th.c4p--datagrid__select-all-toggle-on.button {
16194
16606
  pointer-events: none;
16195
16607
  }
16196
16608
 
16197
- svg.c4p--datagrid__draggable-handleStyle.disable {
16198
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16609
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
16610
+ fill: var(--cds-icon-on-color-disabled, #8d8d8d);
16199
16611
  }
16200
16612
 
16201
16613
  .c4p--datagrid__draggable-handleHolder {
16202
16614
  display: flex;
16203
- height: 2rem;
16204
- padding-left: 0.25rem;
16205
- margin-bottom: 0.5rem;
16206
- background: var(--cds-layer-02, #ffffff);
16615
+ height: 3rem;
16616
+ border-bottom: 1px solid var(--cds-layer-active);
16617
+ background-color: var(--cds-layer);
16618
+ }
16619
+
16620
+ .c4p--datagrid__draggable-handleHolder:hover {
16621
+ background-color: var(--cds-layer-hover);
16207
16622
  }
16208
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
16623
+
16624
+ .c4p--datagrid__draggable-handleHolder-selected {
16625
+ display: flex;
16626
+ height: 3rem;
16627
+ border-bottom: 1px solid var(--cds-layer-active);
16628
+ background-color: var(--cds-layer-selected);
16629
+ }
16630
+
16631
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
16632
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16633
+ }
16634
+
16635
+ .c4p--datagrid__draggable-handleHolder-isOver {
16209
16636
  border: 2px dashed var(--cds-focus, #0f62fe);
16210
- background-color: var(--cds-highlight, #d0e2ff);
16637
+ /* stylelint-disable-next-line carbon/theme-token-use */
16638
+ background-color: #edf5ff;
16211
16639
  }
16212
16640
 
16213
16641
  .c4p--datagrid__draggable-handleHolder-droppable {
16214
16642
  display: flex;
16215
16643
  width: 100%;
16644
+ align-items: center;
16645
+ padding-left: 1rem;
16646
+ /* stylelint-disable-next-line carbon/type-token-use */
16647
+ line-height: 1;
16648
+ transition-property: opacity;
16216
16649
  }
16217
16650
 
16218
- .c4p--datagrid__draggable-handleHolder--grabbed {
16651
+ .c4p--datagrid__draggable-handleHolder-droppable.c4p--datagrid__draggable-handleHolder-droppable--origin {
16652
+ opacity: 0.5;
16653
+ transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
16654
+ }
16655
+
16656
+ .c4p--datagrid__draggable-handleHolder-grabbed {
16219
16657
  background-color: var(--cds-highlight, #d0e2ff);
16220
16658
  color: var(--cds-text-primary, #161616);
16221
16659
  }
16222
16660
 
16661
+ .c4p--datagrid__draggable-handleHolder--sticky {
16662
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
16663
+ }
16664
+
16223
16665
  .c4p--datagrid__shared-ui--assistive-text {
16224
16666
  position: absolute;
16225
16667
  overflow: hidden;
@@ -16235,10 +16677,363 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16235
16677
  /*
16236
16678
  * Licensed Materials - Property of IBM
16237
16679
  * 5724-Q36
16238
- * (c) Copyright IBM Corp. 2020, 2021
16680
+ * (c) Copyright IBM Corp. 2021
16239
16681
  * US Government Users Restricted Rights - Use, duplication or disclosure
16240
16682
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16241
16683
  */
16684
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
16685
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
16686
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16687
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
16688
+ height: 1.5rem;
16689
+ }
16690
+
16691
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
16692
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
16693
+ height: calc(1.5rem - 0.25rem);
16694
+ }
16695
+
16696
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
16697
+ max-height: none;
16698
+ }
16699
+
16700
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
16701
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
16702
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16703
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
16704
+ height: 2rem;
16705
+ }
16706
+
16707
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
16708
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
16709
+ height: calc(2rem - 0.25rem);
16710
+ }
16711
+
16712
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
16713
+ max-height: none;
16714
+ }
16715
+
16716
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
16717
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
16718
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16719
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
16720
+ height: 2.5rem;
16721
+ }
16722
+
16723
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
16724
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
16725
+ height: calc(2.5rem - 0.25rem);
16726
+ }
16727
+
16728
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
16729
+ max-height: none;
16730
+ }
16731
+
16732
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
16733
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
16734
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16735
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
16736
+ height: 3rem;
16737
+ }
16738
+
16739
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
16740
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
16741
+ height: calc(3rem - 0.25rem);
16742
+ }
16743
+
16744
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
16745
+ max-height: none;
16746
+ }
16747
+
16748
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
16749
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
16750
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16751
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
16752
+ height: 4rem;
16753
+ }
16754
+
16755
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
16756
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
16757
+ height: calc(4rem - 0.25rem);
16758
+ }
16759
+
16760
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
16761
+ max-height: none;
16762
+ }
16763
+
16764
+ .c4p--datagrid {
16765
+ --c4p--datagrid--grid-header-height: 0;
16766
+ }
16767
+
16768
+ .c4p--datagrid__inline-edit-cell {
16769
+ display: flex;
16770
+ height: 100%;
16771
+ align-items: center;
16772
+ }
16773
+
16774
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
16775
+ display: flex;
16776
+ align-items: center;
16777
+ }
16778
+
16779
+ .c4p--datagrid__inline-edit--outer-cell-button {
16780
+ width: 100%;
16781
+ height: calc(100% + 2px);
16782
+ }
16783
+
16784
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
16785
+ position: relative;
16786
+ display: flex;
16787
+ width: 100%;
16788
+ height: 100%;
16789
+ align-items: center;
16790
+ justify-content: space-between;
16791
+ padding-left: 1rem;
16792
+ color: var(--cds-text-secondary, #525252);
16793
+ cursor: pointer;
16794
+ outline: 0;
16795
+ }
16796
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
16797
+ height: 1rem;
16798
+ padding-right: 1rem;
16799
+ }
16800
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
16801
+ padding-left: 0;
16802
+ cursor: default;
16803
+ }
16804
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
16805
+ height: 1rem;
16806
+ fill: var(--cds-icon-secondary, #525252);
16807
+ }
16808
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
16809
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16810
+ }
16811
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
16812
+ justify-content: flex-start;
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) {
16815
+ /* stylelint-disable-next-line */
16816
+ }
16817
+ .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 {
16818
+ display: none;
16819
+ }
16820
+ .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 {
16821
+ display: block;
16822
+ }
16823
+
16824
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
16825
+ background-color: var(--cds-layer-active);
16826
+ color: var(--cds-text-primary, #161616);
16827
+ }
16828
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
16829
+ fill: var(--cds-icon-primary, #161616);
16830
+ }
16831
+
16832
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
16833
+ background-color: var(--cds-layer-active);
16834
+ color: var(--cds-text-primary, #161616);
16835
+ cursor: text;
16836
+ }
16837
+
16838
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16839
+ /* stylelint-disable-next-line carbon/theme-token-use */
16840
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16841
+ outline-offset: calc(-1 * 0.125rem);
16842
+ }
16843
+ @media screen and (prefers-contrast) {
16844
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16845
+ outline-style: dotted;
16846
+ }
16847
+ }
16848
+
16849
+ .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) {
16850
+ color: var(--cds-button-disabled, #c6c6c6);
16851
+ cursor: not-allowed;
16852
+ }
16853
+
16854
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
16855
+ overflow: hidden;
16856
+ padding-right: 1rem;
16857
+ text-overflow: ellipsis;
16858
+ white-space: nowrap;
16859
+ }
16860
+
16861
+ .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 {
16862
+ padding-right: 3rem;
16863
+ }
16864
+
16865
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
16866
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
16867
+ height: 3rem;
16868
+ }
16869
+
16870
+ .c4p--datagrid__inline-edit-button-icon {
16871
+ position: absolute;
16872
+ right: 1rem;
16873
+ }
16874
+
16875
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
16876
+ position: relative;
16877
+ padding: 0;
16878
+ }
16879
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
16880
+ padding-left: 1rem;
16881
+ }
16882
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
16883
+ min-width: auto;
16884
+ padding-right: 1rem;
16885
+ }
16886
+
16887
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
16888
+ padding-bottom: 1rem;
16889
+ padding-left: 1rem;
16890
+ }
16891
+
16892
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16893
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
16894
+ width: inherit;
16895
+ }
16896
+
16897
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16898
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16899
+ width: 100%;
16900
+ height: 3rem;
16901
+ max-height: none;
16902
+ }
16903
+
16904
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
16905
+ width: inherit;
16906
+ }
16907
+
16908
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16909
+ overflow: hidden;
16910
+ width: 100%;
16911
+ max-width: none;
16912
+ padding-right: 2rem;
16913
+ text-overflow: ellipsis;
16914
+ white-space: nowrap;
16915
+ }
16916
+
16917
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
16918
+ border-top-color: var(--cds-layer-hover);
16919
+ background-color: var(--cds-layer-hover);
16920
+ }
16921
+
16922
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
16923
+ position: absolute;
16924
+ z-index: 2;
16925
+ bottom: 0;
16926
+ left: 0;
16927
+ width: 2px;
16928
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16929
+ background-color: var(--cds-link-inverse, #78a9ff);
16930
+ content: "";
16931
+ }
16932
+
16933
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
16934
+ position: absolute;
16935
+ z-index: 2;
16936
+ right: 0;
16937
+ bottom: 0;
16938
+ width: 2px;
16939
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16940
+ background-color: var(--cds-link-inverse, #78a9ff);
16941
+ content: "";
16942
+ }
16943
+
16944
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
16945
+ position: absolute;
16946
+ z-index: 2;
16947
+ top: 0;
16948
+ right: 0;
16949
+ left: 0;
16950
+ width: var(--c4p--datagrid--grid-width);
16951
+ height: 2px;
16952
+ background-color: var(--cds-link-inverse, #78a9ff);
16953
+ }
16954
+
16955
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
16956
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
16957
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
16958
+ }
16959
+
16960
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
16961
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
16962
+ outline-offset: -2px;
16963
+ }
16964
+
16965
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
16966
+ padding-top: 0.125rem;
16967
+ }
16968
+
16969
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
16970
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
16971
+ position: absolute;
16972
+ z-index: 3;
16973
+ top: calc(100% - 0.125rem);
16974
+ width: 100%;
16975
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
16976
+ margin: 0;
16977
+ background-color: var(--cds-layer-01, #f4f4f4);
16978
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
16979
+ outline-offset: calc(-1 * 0.125rem);
16980
+ }
16981
+
16982
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
16983
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16984
+ }
16985
+
16986
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
16987
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
16988
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16989
+ z-index: 4;
16990
+ top: calc(100% + 0.75rem + 0.125rem);
16991
+ right: 0.5rem;
16992
+ }
16993
+
16994
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16995
+ top: calc(100% + 0.25rem + 0.125rem);
16996
+ }
16997
+
16998
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16999
+ position: absolute;
17000
+ top: 0;
17001
+ left: 0.125rem;
17002
+ width: calc(100% - (0.125rem * 2));
17003
+ height: 0.125rem;
17004
+ background-color: var(--cds-layer-01, #f4f4f4);
17005
+ content: "";
17006
+ }
17007
+
17008
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
17009
+ position: absolute;
17010
+ top: 0.125rem;
17011
+ left: 0.5rem;
17012
+ width: calc(100% - (0.5rem * 2));
17013
+ height: 1px;
17014
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
17015
+ content: "";
17016
+ }
17017
+
17018
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
17019
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
17020
+ }
17021
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
17022
+ background-color: transparent;
17023
+ }
17024
+
17025
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
17026
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
17027
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
17028
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
17029
+ outline-color: var(--cds-support-error, #da1e28);
17030
+ }
17031
+
17032
+ .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 {
17033
+ background-color: var(--cds-support-error, #da1e28);
17034
+ }
17035
+
17036
+ /* stylelint-disable max-nesting-depth */
16242
17037
  .c4p--datagrid__datagridWrap {
16243
17038
  display: block;
16244
17039
  width: 100%;
@@ -16246,6 +17041,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16246
17041
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
16247
17042
  display: none;
16248
17043
  }
17044
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
17045
+ left: 0.125rem;
17046
+ width: 112px;
17047
+ }
16249
17048
 
16250
17049
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16251
17050
  left: 0.125rem;
@@ -16254,7 +17053,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16254
17053
 
16255
17054
  .c4p--datagrid__datagridWrap-simple {
16256
17055
  display: flex;
16257
- overflow: hidden;
16258
17056
  width: 100%;
16259
17057
  height: 100%;
16260
17058
  flex-direction: column;
@@ -16265,4 +17063,43 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16265
17063
  overflow-x: unset;
16266
17064
  }
16267
17065
 
17066
+ /* stylelint-disable max-nesting-depth */
17067
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
17068
+ /* Used id for overriding the SVG path fill */
17069
+ }
17070
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
17071
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
17072
+ background-color: #0050e6;
17073
+ }
17074
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
17075
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
17076
+ box-shadow: none;
17077
+ }
17078
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
17079
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
17080
+ fill: #ffffff;
17081
+ }
17082
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
17083
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
17084
+ background-color: transparent;
17085
+ }
17086
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
17087
+ background-color: #0f62fe;
17088
+ color: #ffffff;
17089
+ }
17090
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
17091
+ animation-duration: 700ms;
17092
+ animation-fill-mode: forwards;
17093
+ animation-iteration-count: infinite;
17094
+ animation-name: rotate;
17095
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
17096
+ }
17097
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
17098
+ background-color: transparent;
17099
+ }
17100
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
17101
+ background-color: #0f62fe;
17102
+ color: #ffffff;
17103
+ }
17104
+
16268
17105
  /*# sourceMappingURL=index.css.map */