@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
@@ -963,14 +963,17 @@
963
963
  font-weight: var(--cds-body-short-01-font-weight, 400);
964
964
  line-height: var(--cds-body-short-01-line-height, 1.28572);
965
965
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
966
- height: 4rem;
967
966
  align-items: center;
967
+ margin: 0;
968
+ }
969
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
970
+ height: 4rem;
968
971
  padding-top: 1rem;
969
972
  padding-bottom: 2rem;
970
- margin: 0;
971
973
  }
972
974
 
973
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
975
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
976
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
974
977
  max-width: none;
975
978
  }
976
979
 
@@ -2533,7 +2536,7 @@
2533
2536
  @media (prefers-reduced-motion: no-preference) {
2534
2537
  .c4p--cascade__element,
2535
2538
  .c4p--cascade__col {
2536
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2539
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2537
2540
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2538
2541
  animation-fill-mode: forwards;
2539
2542
  opacity: 0;
@@ -2926,26 +2929,6 @@
2926
2929
  margin-bottom: 0;
2927
2930
  }
2928
2931
 
2929
- @keyframes side-panel-exit-left {
2930
- 0% {
2931
- opacity: 1;
2932
- transform: translateX(0);
2933
- }
2934
- 100% {
2935
- opacity: 0;
2936
- transform: translateX(calc(-1 * 30rem));
2937
- }
2938
- }
2939
- @keyframes side-panel-exit-right {
2940
- 0% {
2941
- opacity: 1;
2942
- transform: translateX(0);
2943
- }
2944
- 100% {
2945
- opacity: 0;
2946
- transform: translateX(30rem);
2947
- }
2948
- }
2949
2932
  .c4p--side-panel__container {
2950
2933
  --c4p--side-panel--subtitle-opacity: 1;
2951
2934
  --c4p--side-panel--title-container-height: 0;
@@ -2965,8 +2948,6 @@
2965
2948
  box-sizing: border-box;
2966
2949
  background-color: var(--cds-layer-01, #f4f4f4);
2967
2950
  color: var(--cds-text-primary, #161616);
2968
- transition: transform 240ms;
2969
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2970
2951
  }
2971
2952
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2972
2953
  width: 16rem;
@@ -2980,37 +2961,13 @@
2980
2961
  max-width: 100%;
2981
2962
  }
2982
2963
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2983
- width: 16rem;
2984
- max-width: 100%;
2985
2964
  right: 0;
2986
2965
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2987
2966
  }
2988
- @keyframes side-panel-entrance-right {
2989
- 0% {
2990
- opacity: 0;
2991
- transform: translateX(16rem);
2992
- }
2993
- 100% {
2994
- opacity: 1;
2995
- transform: translateX(0);
2996
- }
2997
- }
2998
2967
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2999
- width: 16rem;
3000
- max-width: 100%;
3001
2968
  left: 0;
3002
2969
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3003
2970
  }
3004
- @keyframes side-panel-entrance-left {
3005
- 0% {
3006
- opacity: 0;
3007
- transform: translateX(-16rem);
3008
- }
3009
- 100% {
3010
- opacity: 1;
3011
- transform: translateX(0);
3012
- }
3013
- }
3014
2971
  .c4p--side-panel__container.c4p--side-panel__container--sm {
3015
2972
  width: 20rem;
3016
2973
  max-width: 100%;
@@ -3023,37 +2980,13 @@
3023
2980
  max-width: 100%;
3024
2981
  }
3025
2982
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
3026
- width: 20rem;
3027
- max-width: 100%;
3028
2983
  right: 0;
3029
2984
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3030
2985
  }
3031
- @keyframes side-panel-entrance-right {
3032
- 0% {
3033
- opacity: 0;
3034
- transform: translateX(20rem);
3035
- }
3036
- 100% {
3037
- opacity: 1;
3038
- transform: translateX(0);
3039
- }
3040
- }
3041
2986
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
3042
- width: 20rem;
3043
- max-width: 100%;
3044
2987
  left: 0;
3045
2988
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3046
2989
  }
3047
- @keyframes side-panel-entrance-left {
3048
- 0% {
3049
- opacity: 0;
3050
- transform: translateX(-20rem);
3051
- }
3052
- 100% {
3053
- opacity: 1;
3054
- transform: translateX(0);
3055
- }
3056
- }
3057
2990
  .c4p--side-panel__container.c4p--side-panel__container--md {
3058
2991
  width: 30rem;
3059
2992
  max-width: 100%;
@@ -3066,37 +2999,13 @@
3066
2999
  max-width: 100%;
3067
3000
  }
3068
3001
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
3069
- width: 30rem;
3070
- max-width: 100%;
3071
3002
  right: 0;
3072
3003
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3073
3004
  }
3074
- @keyframes side-panel-entrance-right {
3075
- 0% {
3076
- opacity: 0;
3077
- transform: translateX(30rem);
3078
- }
3079
- 100% {
3080
- opacity: 1;
3081
- transform: translateX(0);
3082
- }
3083
- }
3084
3005
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
3085
- width: 30rem;
3086
- max-width: 100%;
3087
3006
  left: 0;
3088
3007
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3089
3008
  }
3090
- @keyframes side-panel-entrance-left {
3091
- 0% {
3092
- opacity: 0;
3093
- transform: translateX(-30rem);
3094
- }
3095
- 100% {
3096
- opacity: 1;
3097
- transform: translateX(0);
3098
- }
3099
- }
3100
3009
  .c4p--side-panel__container.c4p--side-panel__container--lg {
3101
3010
  width: 40rem;
3102
3011
  max-width: 100%;
@@ -3109,37 +3018,13 @@
3109
3018
  max-width: 100%;
3110
3019
  }
3111
3020
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
3112
- width: 40rem;
3113
- max-width: 100%;
3114
3021
  right: 0;
3115
3022
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3116
3023
  }
3117
- @keyframes side-panel-entrance-right {
3118
- 0% {
3119
- opacity: 0;
3120
- transform: translateX(40rem);
3121
- }
3122
- 100% {
3123
- opacity: 1;
3124
- transform: translateX(0);
3125
- }
3126
- }
3127
3024
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
3128
- width: 40rem;
3129
- max-width: 100%;
3130
3025
  left: 0;
3131
3026
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3132
3027
  }
3133
- @keyframes side-panel-entrance-left {
3134
- 0% {
3135
- opacity: 0;
3136
- transform: translateX(-40rem);
3137
- }
3138
- 100% {
3139
- opacity: 1;
3140
- transform: translateX(0);
3141
- }
3142
- }
3143
3028
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
3144
3029
  width: 75%;
3145
3030
  max-width: 100%;
@@ -3152,37 +3037,13 @@
3152
3037
  max-width: 100%;
3153
3038
  }
3154
3039
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
3155
- width: 75%;
3156
- max-width: 100%;
3157
3040
  right: 0;
3158
3041
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3159
3042
  }
3160
- @keyframes side-panel-entrance-right {
3161
- 0% {
3162
- opacity: 0;
3163
- transform: translateX(75%);
3164
- }
3165
- 100% {
3166
- opacity: 1;
3167
- transform: translateX(0);
3168
- }
3169
- }
3170
3043
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
3171
- width: 75%;
3172
- max-width: 100%;
3173
3044
  left: 0;
3174
3045
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3175
3046
  }
3176
- @keyframes side-panel-entrance-left {
3177
- 0% {
3178
- opacity: 0;
3179
- transform: translateX(-75%);
3180
- }
3181
- 100% {
3182
- opacity: 1;
3183
- transform: translateX(0);
3184
- }
3185
- }
3186
3047
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
3187
3048
  /* stylelint-disable-next-line max-nesting-depth */
3188
3049
  }
@@ -3315,10 +3176,7 @@
3315
3176
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
3316
3177
  position: fixed;
3317
3178
  z-index: 2;
3318
- top: calc(
3319
- var(--c4p--side-panel--title-text-height) +
3320
- var(--c4p--side-panel--label-text-height) + 3rem
3321
- );
3179
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3322
3180
  background-color: var(--cds-layer-01, #f4f4f4);
3323
3181
  }
3324
3182
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -3333,7 +3191,6 @@
3333
3191
  }
3334
3192
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
3335
3193
  position: fixed;
3336
- top: 3rem;
3337
3194
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3338
3195
  }
3339
3196
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -3354,10 +3211,7 @@
3354
3211
  }
3355
3212
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
3356
3213
  position: fixed;
3357
- top: calc(
3358
- var(--c4p--side-panel--title-text-height) +
3359
- var(--c4p--side-panel--subtitle-container-height) + 3rem
3360
- );
3214
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
3361
3215
  width: 100%;
3362
3216
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
3363
3217
  }
@@ -3382,8 +3236,7 @@
3382
3236
  padding: 0 1rem;
3383
3237
  margin-bottom: 0.5rem;
3384
3238
  background-color: var(--cds-layer-01, #f4f4f4);
3385
- transition: transform 150ms;
3386
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3239
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3387
3240
  }
3388
3241
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3389
3242
  min-width: 2rem;
@@ -3514,8 +3367,6 @@
3514
3367
  width: 100%;
3515
3368
  height: 100%;
3516
3369
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
3517
- transition: background-color 240ms;
3518
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3519
3370
  }
3520
3371
 
3521
3372
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3662,7 +3513,7 @@
3662
3513
  /* stylelint-disable-next-line function-no-unknown */
3663
3514
  z-index: 9000;
3664
3515
  align-items: flex-end;
3665
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3516
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3666
3517
  }
3667
3518
  @media (prefers-reduced-motion: reduce) {
3668
3519
  .c4p--tearsheet.is-visible {
@@ -3769,6 +3620,7 @@
3769
3620
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3770
3621
  -webkit-box-orient: vertical;
3771
3622
  -webkit-line-clamp: 2;
3623
+ word-break: break-word;
3772
3624
  }
3773
3625
  @media (min-width: 42rem) {
3774
3626
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4227,6 +4079,16 @@
4227
4079
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
4228
4080
  }
4229
4081
 
4082
+ .c4p--filter-summary {
4083
+ display: flex;
4084
+ width: 100%;
4085
+ height: rem(48px);
4086
+ align-items: center;
4087
+ padding: 0.5rem;
4088
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4089
+ background: var(--cds-layer-01, #f4f4f4);
4090
+ }
4091
+
4230
4092
  .c4p--http-errors .c4p--http-errors__content {
4231
4093
  position: fixed;
4232
4094
  z-index: 2;
@@ -4444,7 +4306,6 @@
4444
4306
 
4445
4307
  /* stylelint-disable max-nesting-depth */
4446
4308
  .c4p--add-select__selections.cds--structured-list {
4447
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4448
4309
  margin-bottom: 0;
4449
4310
  }
4450
4311
  .c4p--add-select__selections-wrapper {
@@ -4452,8 +4313,11 @@
4452
4313
  }
4453
4314
  .c4p--add-select__selections-cell-wrapper {
4454
4315
  display: flex;
4316
+ height: 3rem;
4455
4317
  align-items: center;
4456
4318
  justify-content: space-between;
4319
+ padding: 0 1rem;
4320
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4457
4321
  }
4458
4322
  .c4p--add-select__selections-cell-title {
4459
4323
  display: block;
@@ -4467,17 +4331,21 @@
4467
4331
  display: block;
4468
4332
  color: var(--cds-text-secondary, #525252);
4469
4333
  }
4470
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4334
+ .c4p--add-select__selections-cell {
4335
+ display: flex;
4336
+ flex-direction: column;
4337
+ justify-content: center;
4338
+ }
4339
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
4340
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
4471
4341
  visibility: visible;
4472
4342
  }
4473
4343
  .c4p--add-select__selections-hidden-hover {
4474
4344
  visibility: hidden;
4475
4345
  }
4476
- .c4p--add-select__selections-row-selected {
4477
- background: #e5e5e5;
4478
- }
4479
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
4480
- visibility: visible;
4346
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
4347
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4348
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4481
4349
  }
4482
4350
  .c4p--add-select__selections-checkbox {
4483
4351
  display: flex;
@@ -4485,7 +4353,7 @@
4485
4353
  }
4486
4354
  .c4p--add-select__selections-checkbox-label-wrapper {
4487
4355
  display: flex;
4488
- margin-left: 0.5rem;
4356
+ margin-left: 1rem;
4489
4357
  }
4490
4358
  .c4p--add-select__selections-checkbox-label-text {
4491
4359
  display: flex;
@@ -4503,6 +4371,13 @@
4503
4371
  .c4p--add-select__selections-cell-icon {
4504
4372
  margin-right: 0.5rem;
4505
4373
  }
4374
+ .c4p--add-select__selections-row {
4375
+ border-left: 0.125rem solid transparent;
4376
+ }
4377
+ .c4p--add-select__selections-row-meta--selected {
4378
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4379
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4380
+ }
4506
4381
 
4507
4382
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4508
4383
  color: var(--cds-interactive, #0f62fe);
@@ -4519,10 +4394,21 @@
4519
4394
  align-items: flex-end;
4520
4395
  justify-content: space-between;
4521
4396
  }
4397
+ .c4p--add-select__sub-header-multi {
4398
+ padding: 0 1rem;
4399
+ }
4400
+
4401
+ .c4p--add-select .cds--structured-list-row {
4402
+ border-bottom: 0;
4403
+ }
4404
+
4405
+ .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) {
4406
+ border-bottom: 0;
4407
+ }
4522
4408
 
4523
4409
  .c4p--add-select__sidebar-header {
4524
4410
  display: flex;
4525
- padding: 1.5rem 1rem 0.5rem 1rem;
4411
+ padding: 2rem 1rem 0.5rem 1rem;
4526
4412
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4527
4413
  }
4528
4414
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4548,7 +4434,7 @@
4548
4434
  }
4549
4435
 
4550
4436
  .c4p--add-select__sidebar-body {
4551
- padding: 1rem;
4437
+ padding: 0 1rem;
4552
4438
  }
4553
4439
 
4554
4440
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4581,18 +4467,44 @@
4581
4467
  .c4p--add-select__columns {
4582
4468
  display: flex;
4583
4469
  flex-direction: row;
4470
+ flex-grow: 1;
4584
4471
  overflow-x: auto;
4585
4472
  }
4473
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4474
+ margin-left: 0.5rem;
4475
+ }
4476
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
4477
+ border-left: 0;
4478
+ }
4479
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4480
+ padding: 0;
4481
+ }
4482
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4483
+ height: auto;
4484
+ padding: 0 0.5rem;
4485
+ }
4486
+ .c4p--add-select__columns .c4p--add-select__tags {
4487
+ padding: 0 0.5rem;
4488
+ margin-bottom: 0;
4489
+ }
4490
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4491
+ padding: 0;
4492
+ }
4493
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
4494
+ border-top: 0;
4495
+ }
4586
4496
 
4587
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4588
- height: 0;
4589
- padding: 0 !important;
4497
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4498
+ padding: 0 1rem;
4499
+ }
4500
+
4501
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4502
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4590
4503
  }
4591
4504
 
4592
4505
  .c4p--add-select__column {
4593
4506
  overflow: auto;
4594
- max-width: 15rem;
4595
- flex: 1 0 15rem;
4507
+ flex: 0 0 20rem;
4596
4508
  padding: 1rem;
4597
4509
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4598
4510
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4610,13 +4522,13 @@
4610
4522
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4611
4523
  }
4612
4524
 
4613
- .c4p--add-select__tag-container {
4525
+ .c4p--add-select__tags {
4614
4526
  display: flex;
4615
4527
  align-items: center;
4616
4528
  margin-top: 1rem;
4617
4529
  margin-bottom: 0.5rem;
4618
4530
  }
4619
- .c4p--add-select__tag-container-label {
4531
+ .c4p--add-select__tags-label {
4620
4532
  margin-right: 0.5rem;
4621
4533
  }
4622
4534
 
@@ -4691,13 +4603,6 @@ button.c4p--add-select__global-filter-toggle--open {
4691
4603
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4692
4604
  }
4693
4605
 
4694
- .c4p--add-select .cds--structured-list-td {
4695
- height: 3rem;
4696
- padding-top: 0;
4697
- padding-bottom: 0;
4698
- vertical-align: middle;
4699
- }
4700
-
4701
4606
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4702
4607
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4703
4608
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4705,13 +4610,16 @@ button.c4p--add-select__global-filter-toggle--open {
4705
4610
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4706
4611
  }
4707
4612
 
4708
- .c4p--add-select__tag-container .cds--tag {
4613
+ .c4p--add-select__selections .cds--list-box__menu {
4614
+ left: auto;
4615
+ }
4616
+
4617
+ .c4p--add-select__tags .cds--tag {
4709
4618
  margin: 0;
4710
4619
  }
4711
4620
 
4712
4621
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4713
- max-width: 29rem;
4714
- flex: 0 0 50%;
4622
+ flex-basis: 22.5rem;
4715
4623
  }
4716
4624
 
4717
4625
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4723,6 +4631,10 @@ button.c4p--add-select__global-filter-toggle--open {
4723
4631
  flex-direction: column;
4724
4632
  }
4725
4633
 
4634
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4635
+ max-width: 11.25rem;
4636
+ }
4637
+
4726
4638
  .c4p--add-select .c4p--add-select__items-label {
4727
4639
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4728
4640
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4763,8 +4675,35 @@ button.c4p--add-select__global-filter-toggle--open {
4763
4675
  padding-left: 0.5rem;
4764
4676
  }
4765
4677
 
4766
- .cds--tooltip,
4767
- .cds--overflow-menu-options {
4678
+ .c4p--add-select__multi .c4p--empty-state {
4679
+ max-width: 16rem;
4680
+ margin-top: 3rem;
4681
+ }
4682
+
4683
+ .c4p--add-select .cds--accordion__arrow {
4684
+ transform: rotate(0deg);
4685
+ }
4686
+
4687
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4688
+ transform: rotate(90deg);
4689
+ }
4690
+
4691
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
4692
+ margin: 0 0 0 1rem;
4693
+ }
4694
+
4695
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
4696
+ margin: 0 1rem 0 0.5rem;
4697
+ }
4698
+
4699
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
4700
+ padding-top: 0;
4701
+ padding-bottom: 0;
4702
+ margin-top: 0.5rem;
4703
+ }
4704
+
4705
+ .c4p--add-select .cds--tooltip,
4706
+ .c4p--add-select .cds--overflow-menu-options {
4768
4707
  z-index: 9000;
4769
4708
  }
4770
4709
 
@@ -5151,8 +5090,7 @@ button.c4p--add-select__global-filter-toggle--open {
5151
5090
  max-height: 38.5rem;
5152
5091
  background-color: var(--cds-background, #ffffff);
5153
5092
  color: var(--cds-text-primary, #161616);
5154
- transition: transform 110ms;
5155
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5093
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5156
5094
  }
5157
5095
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5158
5096
  position: sticky;
@@ -5226,8 +5164,7 @@ button.c4p--add-select__global-filter-toggle--open {
5226
5164
  background-color: var(--cds-background, #ffffff);
5227
5165
  cursor: pointer;
5228
5166
  text-align: left;
5229
- transition: background-color 240ms;
5230
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5167
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5231
5168
  }
5232
5169
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5233
5170
  margin-bottom: 0.25rem;
@@ -5340,8 +5277,7 @@ button.c4p--add-select__global-filter-toggle--open {
5340
5277
  margin: 0 auto;
5341
5278
  background-color: var(--cds-layer-02, #ffffff);
5342
5279
  content: "";
5343
- transition: background-color 240ms;
5344
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5280
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5345
5281
  }
5346
5282
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5347
5283
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7883,10 +7819,6 @@ button.c4p--add-select__global-filter-toggle--open {
7883
7819
  padding-right: 1rem;
7884
7820
  }
7885
7821
 
7886
- .c4p--remove-modal .cds--modal-close {
7887
- display: none;
7888
- }
7889
-
7890
7822
  .c4p--remove-modal__body {
7891
7823
  padding-right: 20%;
7892
7824
  margin-bottom: 1rem;
@@ -9571,12 +9503,19 @@ button.c4p--add-select__global-filter-toggle--open {
9571
9503
  }
9572
9504
 
9573
9505
  .c4p--options-tile {
9574
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
9575
- background-color: var(--cds-layer-01, #f4f4f4);
9506
+ position: relative;
9507
+ border-bottom: 1px solid var(--cds-border-subtle);
9508
+ background-color: var(--cds-layer);
9576
9509
  }
9577
9510
 
9578
9511
  .c4p--options-tile__toggle-container {
9579
- position: relative;
9512
+ position: absolute;
9513
+ top: 0;
9514
+ right: 0;
9515
+ bottom: 0;
9516
+ width: calc(
9517
+ 1rem + 2rem + 1rem
9518
+ );
9580
9519
  }
9581
9520
 
9582
9521
  .c4p--options-tile__toggle {
@@ -9830,7 +9769,9 @@ button.c4p--add-select__global-filter-toggle--open {
9830
9769
  display: inline-block;
9831
9770
  overflow: hidden;
9832
9771
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9833
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9772
+ max-width: calc(
9773
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9774
+ );
9834
9775
  min-height: var(--c4p--inline-edit--size);
9835
9776
  /* stylelint-disable-next-line carbon/layout-token-use */
9836
9777
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10033,14 +9974,82 @@ button.c4p--add-select__global-filter-toggle--open {
10033
9974
  color: var(--cds-support-error, #da1e28);
10034
9975
  }
10035
9976
 
10036
- .c4p--data-spreadsheet {
10037
- --c4p--data-spreadsheet--total-width: 0;
10038
- display: inline-block;
10039
- border-spacing: 0;
10040
- /* stylelint-disable-next-line max-nesting-depth */
10041
- }
10042
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10043
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
9977
+ .c4p--inline-edit-v2 {
9978
+ display: flex;
9979
+ align-items: center;
9980
+ background: transparent;
9981
+ cursor: pointer;
9982
+ }
9983
+
9984
+ .c4p--inline-edit-v2-readonly {
9985
+ cursor: not-allowed;
9986
+ }
9987
+
9988
+ .c4p--inline-edit-v2:hover {
9989
+ background: var(--cds-field-01, #f4f4f4);
9990
+ }
9991
+
9992
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9993
+ visibility: visible;
9994
+ }
9995
+
9996
+ .c4p--inline-edit-v2__btn-edit {
9997
+ visibility: hidden;
9998
+ }
9999
+
10000
+ .c4p--inline-edit-v2-focused {
10001
+ background: var(--cds-field-01, #f4f4f4);
10002
+ outline: 2px solid var(--cds-focus, #0f62fe);
10003
+ }
10004
+
10005
+ .c4p--inline-edit-v2__text-input {
10006
+ flex: 1;
10007
+ }
10008
+
10009
+ .c4p--inline-edit-v2__text-input-label {
10010
+ display: none;
10011
+ }
10012
+
10013
+ .c4p--inline-edit-v2__warning-icon {
10014
+ /* stylelint-disable-next-line carbon/layout-token-use */
10015
+ margin-right: 0.4375rem;
10016
+ color: var(--cds-support-error, #da1e28);
10017
+ }
10018
+
10019
+ .c4p--inline-edit-v2__warning-text {
10020
+ font-size: var(--cds-label-01-font-size, 0.75rem);
10021
+ font-weight: var(--cds-label-01-font-weight, 400);
10022
+ line-height: var(--cds-label-01-line-height, 1.33333);
10023
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
10024
+ margin-top: 0.5rem;
10025
+ color: var(--cds-support-error, #da1e28);
10026
+ }
10027
+
10028
+ .c4p--inline-edit-v2__text-input.cds--text-input {
10029
+ border: none;
10030
+ background: transparent;
10031
+ cursor: pointer;
10032
+ outline: none;
10033
+ }
10034
+
10035
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
10036
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
10037
+ cursor: not-allowed;
10038
+ }
10039
+
10040
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
10041
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
10042
+ outline: none;
10043
+ }
10044
+
10045
+ .c4p--data-spreadsheet {
10046
+ --c4p--data-spreadsheet--total-width: 0;
10047
+ display: inline-block;
10048
+ border-spacing: 0;
10049
+ /* stylelint-disable-next-line max-nesting-depth */
10050
+ }
10051
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10052
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
10044
10053
  }
10045
10054
  .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10046
10055
  position: relative;
@@ -10321,6 +10330,11 @@ button.c4p--add-select__global-filter-toggle--open {
10321
10330
  align-items: center;
10322
10331
  color: var(--cds-text-primary, #161616);
10323
10332
  }
10333
+ .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 {
10334
+ position: sticky;
10335
+ z-index: 1;
10336
+ left: 0;
10337
+ }
10324
10338
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10325
10339
  align-items: center;
10326
10340
  padding-top: 0;
@@ -10337,6 +10351,11 @@ button.c4p--add-select__global-filter-toggle--open {
10337
10351
  align-items: center;
10338
10352
  padding-top: 0;
10339
10353
  }
10354
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10355
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10356
+ position: sticky;
10357
+ left: 0;
10358
+ }
10340
10359
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10341
10360
  display: flex;
10342
10361
  height: 100%;
@@ -10396,9 +10415,12 @@ button.c4p--add-select__global-filter-toggle--open {
10396
10415
  height: 100%;
10397
10416
  overflow-x: auto;
10398
10417
  }
10399
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10400
- overflow: hidden;
10418
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10419
+ display: flex;
10420
+ overflow: auto;
10401
10421
  max-height: 100%;
10422
+ flex-direction: column;
10423
+ background-color: var(--cds-layer-01, #f4f4f4);
10402
10424
  }
10403
10425
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10404
10426
  display: flex;
@@ -10486,10 +10508,6 @@ button.c4p--add-select__global-filter-toggle--open {
10486
10508
  flex: 1 1 auto;
10487
10509
  }
10488
10510
 
10489
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10490
- border-bottom: none;
10491
- }
10492
-
10493
10511
  .c4p--datagrid__resizer {
10494
10512
  position: absolute;
10495
10513
  z-index: 1;
@@ -10529,6 +10547,12 @@ button.c4p--add-select__global-filter-toggle--open {
10529
10547
  .c4p--datagrid__head-hidden-select-all {
10530
10548
  padding-right: 2.5rem;
10531
10549
  }
10550
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10551
+ position: sticky;
10552
+ z-index: 1;
10553
+ left: 0;
10554
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10555
+ }
10532
10556
 
10533
10557
  .c4p--datagrid__simple-body {
10534
10558
  position: relative;
@@ -10552,15 +10576,6 @@ button.c4p--add-select__global-filter-toggle--open {
10552
10576
  min-width: 0 !important;
10553
10577
  }
10554
10578
 
10555
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10556
- width: 6px;
10557
- background-color: var(--cds-background, #ffffff);
10558
- }
10559
-
10560
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10561
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10562
- }
10563
-
10564
10579
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10565
10580
  overflow: auto;
10566
10581
  }
@@ -10579,39 +10594,35 @@ button.c4p--add-select__global-filter-toggle--open {
10579
10594
  flex-direction: row;
10580
10595
  }
10581
10596
 
10582
- .c4p--datagrid__datagridLeftPanel {
10583
- display: flex;
10584
- width: 388px;
10585
- background-color: var(--cds-layer-01, #f4f4f4);
10586
- }
10587
-
10588
- .c4p--datagrid__leftPanel-position {
10589
- display: inherit;
10597
+ .c4p--datagrid__table-container-inner {
10598
+ overflow: hidden;
10599
+ flex: 1;
10590
10600
  }
10591
10601
 
10592
10602
  .c4p--datagrid__datagridWithPanel {
10593
10603
  position: relative;
10594
10604
  display: flex;
10595
- width: 100%;
10596
10605
  height: 100%;
10597
10606
  flex-direction: column;
10598
10607
  }
10599
10608
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
10600
10609
  display: flex;
10601
- overflow: hidden;
10610
+ overflow: visible;
10602
10611
  flex-direction: column;
10603
10612
  }
10604
10613
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
10605
10614
  width: 100%;
10606
10615
  }
10607
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
10608
- flex: 0 0 auto;
10616
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
10617
+ display: flex;
10618
+ overflow: visible;
10619
+ background-color: var(--cds-layer-01, #f4f4f4);
10609
10620
  }
10610
- .c4p--datagrid__datagridWithPanel .cds--data-table-content {
10611
- flex: 1 1 0%;
10621
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
10622
+ border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
10612
10623
  }
10613
- .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
10614
- overflow: hidden;
10624
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
10625
+ height: 100%;
10615
10626
  }
10616
10627
 
10617
10628
  .c4p--datagrid__table-container {
@@ -10620,10 +10631,25 @@ button.c4p--add-select__global-filter-toggle--open {
10620
10631
  overflow: auto;
10621
10632
  width: 100%;
10622
10633
  max-height: 100%;
10634
+ overflow-y: auto;
10623
10635
  }
10624
10636
 
10625
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
10626
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
10637
+ .c4p--datagrid__carbon-row-expanded {
10638
+ position: relative;
10639
+ }
10640
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
10641
+ position: absolute;
10642
+ z-index: 2;
10643
+ /* stylelint-disable-next-line carbon/layout-token-use */
10644
+ top: var(--c4p--datagrid--row-height);
10645
+ /* stylelint-disable-next-line carbon/layout-token-use */
10646
+ left: calc(
10647
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
10648
+ );
10649
+ width: 1px;
10650
+ height: var(--c4p--datagrid--indicator-height);
10651
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
10652
+ content: "";
10627
10653
  }
10628
10654
 
10629
10655
  .c4p--datagrid .cds--data-table-header {
@@ -10639,7 +10665,9 @@ button.c4p--add-select__global-filter-toggle--open {
10639
10665
  padding-bottom: 1rem;
10640
10666
  }
10641
10667
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
10642
- flex: 0 0 auto;
10668
+ display: flex;
10669
+ flex: 1 0 auto;
10670
+ align-items: flex-end;
10643
10671
  }
10644
10672
  .c4p--datagrid__dense-header .cds--table-toolbar {
10645
10673
  background: transparent;
@@ -10647,9 +10675,6 @@ button.c4p--add-select__global-filter-toggle--open {
10647
10675
  .c4p--datagrid__dense-header .cds__table-container {
10648
10676
  flex: 1 1 100%;
10649
10677
  }
10650
- .c4p--datagrid__dense-header .cds--table-toolbar {
10651
- padding-top: 2rem;
10652
- }
10653
10678
  .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
10654
10679
  position: relative;
10655
10680
  }
@@ -10670,6 +10695,7 @@ button.c4p--add-select__global-filter-toggle--open {
10670
10695
 
10671
10696
  .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
10672
10697
  position: absolute;
10698
+ top: 0;
10673
10699
  left: 0;
10674
10700
  width: 0.25rem;
10675
10701
  height: 100%;
@@ -10708,10 +10734,84 @@ button.c4p--add-select__global-filter-toggle--open {
10708
10734
  margin: 0;
10709
10735
  }
10710
10736
 
10737
+ .c4p--datagrid .c4p--button-menu {
10738
+ height: 3rem;
10739
+ }
10740
+
10741
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10742
+ display: flex;
10743
+ width: 3rem;
10744
+ height: 3rem;
10745
+ justify-content: center;
10746
+ }
10747
+
10748
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
10749
+ flex: 0 0 auto;
10750
+ margin-right: 0.5rem;
10751
+ }
10752
+
10753
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
10754
+ width: 10px;
10755
+ height: 7px;
10756
+ }
10757
+
10758
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
10759
+ background: var(--cds-layer);
10760
+ }
10761
+
10762
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
10763
+ border-radius: 5px;
10764
+ }
10765
+
10766
+ .c4p--datagrid__virtualScrollContainer {
10767
+ width: 100%;
10768
+ }
10769
+
10770
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10771
+ overflow: hidden;
10772
+ height: 100vh;
10773
+ }
10774
+
10775
+ .c4p--datagrid .cds--modal {
10776
+ width: 100%;
10777
+ }
10778
+
10779
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
10780
+ flex-shrink: 0;
10781
+ background-color: var(--cds-interactive, #0f62fe);
10782
+ }
10783
+
10784
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
10785
+ fill: var(--cds-background, #ffffff);
10786
+ }
10787
+
10788
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
10789
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
10790
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
10791
+ background-color: var(--cds-button-primary-hover, #0050e6);
10792
+ }
10793
+
10794
+ .c4p--datagrid__toolbar-options.c4p--datagrid__toolbar-options {
10795
+ background-color: var(--cds-layer-02, #ffffff);
10796
+ }
10797
+
10798
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
10799
+ background-color: transparent;
10800
+ }
10801
+
10802
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
10803
+ position: absolute;
10804
+ }
10805
+
10806
+ .c4p--datagrid__table-toolbar--sm .c4p--filter-summary,
10807
+ .c4p--datagrid__table-toolbar--xs .c4p--filter-summary {
10808
+ padding: 0 0.5rem;
10809
+ }
10810
+
10711
10811
  /*
10712
10812
  * Licensed Materials - Property of IBM
10713
10813
  * 5724-Q36
10714
- * (c) Copyright IBM Corp. 2020 - 2021
10814
+ * (c) Copyright IBM Corp. 2020 - 2022
10715
10815
  * US Government Users Restricted Rights - Use, duplication or disclosure
10716
10816
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10717
10817
  */
@@ -10722,6 +10822,33 @@ button.c4p--add-select__global-filter-toggle--open {
10722
10822
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10723
10823
  }
10724
10824
 
10825
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10826
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10827
+ }
10828
+
10829
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10830
+ transform: rotate(90deg);
10831
+ }
10832
+
10833
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10834
+ border-bottom: none;
10835
+ }
10836
+
10837
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
10838
+ position: relative;
10839
+ }
10840
+
10841
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
10842
+ position: absolute;
10843
+ /* stylelint-disable-next-line carbon/layout-token-use */
10844
+ top: -1px;
10845
+ left: 0;
10846
+ width: 100%;
10847
+ height: 1px;
10848
+ background-color: var(--cds-border-subtle);
10849
+ content: "";
10850
+ }
10851
+
10725
10852
  /*
10726
10853
  * Licensed Materials - Property of IBM
10727
10854
  * 5724-Q36
@@ -10746,13 +10873,12 @@ button.c4p--add-select__global-filter-toggle--open {
10746
10873
  background-color: var(--cds-layer-accent-01, #e0e0e0);
10747
10874
  }
10748
10875
 
10749
- /*
10750
- * Licensed Materials - Property of IBM
10751
- * 5724-Q36
10752
- * (c) Copyright IBM Corp. 2020
10753
- * US Government Users Restricted Rights - Use, duplication or disclosure
10754
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10755
- */
10876
+ /**
10877
+ * Copyright IBM Corp. 2020, 2023
10878
+ *
10879
+ * This source code is licensed under the Apache-2.0 license found in the
10880
+ * LICENSE file in the root directory of this source tree.
10881
+ */
10756
10882
  .c4p--datagrid__sortableColumn .cds--table-header-label .header-title {
10757
10883
  display: inline-block;
10758
10884
  width: auto;
@@ -10762,36 +10888,43 @@ button.c4p--add-select__global-filter-toggle--open {
10762
10888
  width: 100%;
10763
10889
  height: 100%;
10764
10890
  }
10765
- .c4p--datagrid__sortableColumn .cds--table-header-label button:focus,
10766
- .c4p--datagrid__sortableColumn .cds--table-header-label button:active,
10891
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus,
10892
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active,
10767
10893
  .c4p--datagrid__sortableColumn .cds--table-header-label button:focus svg {
10768
10894
  /* stylelint-disable-next-line declaration-no-important */
10769
10895
  background: none !important;
10770
10896
  /* stylelint-disable-next-line declaration-no-important */
10771
10897
  color: var(--cds-text-primary, #161616) !important;
10772
- /* stylelint-disable-next-line declaration-no-important */
10773
- outline: none !important;
10774
10898
  }
10775
- .c4p--datagrid__sortableColumn .cds--table-header-label button {
10899
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus + .c4p--datagrid__resizer,
10900
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active + .c4p--datagrid__resizer {
10901
+ z-index: -1;
10902
+ }
10903
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort {
10776
10904
  width: 100%;
10777
10905
  min-width: 100%;
10778
- min-height: 0;
10779
- padding: 0;
10906
+ padding: 0 1rem;
10780
10907
  border: none;
10781
10908
  /* stylelint-disable-next-line declaration-no-important */
10782
10909
  background: none !important;
10783
- box-shadow: none;
10784
10910
  /* stylelint-disable-next-line declaration-no-important */
10785
10911
  color: var(--cds-text-primary, #161616) !important;
10786
10912
  font: inherit;
10787
10913
  }
10788
- .c4p--datagrid__sortableColumn .cds--table-header-label button svg {
10914
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort svg {
10789
10915
  fill: var(--cds-text-primary, #161616);
10916
+ opacity: 0;
10790
10917
  visibility: hidden;
10791
10918
  }
10919
+ .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
10920
+ width: calc(100% + 2rem);
10921
+ margin: 0 calc(-1 * 1rem);
10922
+ }
10792
10923
 
10793
10924
  .c4p--datagrid__sortableColumn:hover .cds--table-header-label svg,
10925
+ .c4p--datagrid__sortableColumn:focus-within .cds--table-header-label svg,
10794
10926
  .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label svg {
10927
+ opacity: 1;
10795
10928
  visibility: visible;
10796
10929
  }
10797
10930
 
@@ -10850,14 +10983,36 @@ button.c4p--add-select__global-filter-toggle--open {
10850
10983
  /* stylelint-disable-next-line declaration-no-important */
10851
10984
  position: sticky !important;
10852
10985
  right: 0;
10853
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10986
+ display: flex;
10987
+ align-items: center;
10988
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10854
10989
  }
10855
10990
 
10856
10991
  .c4p--datagrid__right-sticky-column-header {
10857
10992
  /* stylelint-disable-next-line declaration-no-important */
10858
10993
  position: sticky !important;
10859
10994
  right: 0;
10860
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10995
+ }
10996
+
10997
+ .c4p--datagrid__left-sticky-column-cell {
10998
+ /* stylelint-disable-next-line declaration-no-important */
10999
+ position: sticky !important;
11000
+ left: 0;
11001
+ display: flex;
11002
+ align-items: center;
11003
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11004
+ }
11005
+
11006
+ .c4p--datagrid__left-sticky-column-header {
11007
+ /* stylelint-disable-next-line declaration-no-important */
11008
+ position: sticky !important;
11009
+ z-index: 1;
11010
+ left: 0;
11011
+ }
11012
+
11013
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
11014
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
11015
+ left: 2.5rem;
10861
11016
  }
10862
11017
 
10863
11018
  .c4p--datagrid__sticky-noShadow {
@@ -10873,6 +11028,12 @@ button.c4p--add-select__global-filter-toggle--open {
10873
11028
  right: 6px !important;
10874
11029
  }
10875
11030
 
11031
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
11032
+ position: sticky;
11033
+ z-index: 1;
11034
+ left: 0;
11035
+ }
11036
+
10876
11037
  /*
10877
11038
  * Licensed Materials - Property of IBM
10878
11039
  * 5724-Q36
@@ -10895,165 +11056,799 @@ button.c4p--add-select__global-filter-toggle--open {
10895
11056
  margin-bottom: 0.5rem;
10896
11057
  }
10897
11058
 
10898
- /*
10899
- * Licensed Materials - Property of IBM
10900
- * 5724-Q36
10901
- * (c) Copyright IBM Corp. 2021, 2022
10902
- * US Government Users Restricted Rights - Use, duplication or disclosure
10903
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10904
- */
10905
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
10906
- position: inherit;
11059
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11060
+ cursor: not-allowed;
11061
+ }
11062
+
11063
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11064
+ pointer-events: none;
11065
+ }
11066
+
11067
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11068
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11069
+ }
11070
+
11071
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
10907
11072
  display: flex;
10908
11073
  flex-flow: column;
10909
- /* stylelint-disable-next-line declaration-no-important */
10910
- padding-top: 0 !important;
10911
11074
  }
10912
11075
 
10913
- .c4p--datagrid__customize-columns-checkbox {
10914
- display: flex;
10915
- justify-content: center;
10916
- /* stylelint-disable-next-line declaration-no-important */
10917
- margin-bottom: 0 !important;
11076
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
11077
+ height: 3rem;
11078
+ padding-left: 3rem;
11079
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
10918
11080
  }
10919
11081
 
10920
- .c4p--datagrid__customize-columns-modal--actions {
11082
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10921
11083
  display: flex;
10922
- flex-flow: row;
10923
- margin-bottom: 1.5rem;
11084
+ justify-content: center;
11085
+ padding-left: 0.25rem;
10924
11086
  }
10925
11087
 
10926
- .c4p--datagrid__customize-columns-modal--actions > button {
10927
- margin-left: 1rem;
11088
+ .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
11089
+ margin-bottom: 0;
10928
11090
  }
10929
11091
 
10930
- .c4p--datagrid__customize-columns-instructions {
11092
+ .c4p--datagrid__customize-columns-column-list {
11093
+ position: relative;
11094
+ overflow: auto;
11095
+ }
11096
+
11097
+ .c4p--datagrid__customize-columns-select-all,
11098
+ .c4p--datagrid__customize-columns-select-all--selected {
11099
+ position: sticky;
11100
+ z-index: 1;
11101
+ top: 0;
11102
+ display: flex;
11103
+ height: 3rem;
11104
+ padding-left: 2.5rem;
11105
+ border-bottom: 1px solid var(--cds-layer-active);
11106
+ background-color: var(--cds-layer);
11107
+ }
11108
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
11109
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
11110
+ font-weight: 600;
11111
+ }
11112
+
11113
+ .c4p--datagrid__customize-columns-select-all:hover {
11114
+ background-color: var(--cds-layer-hover);
11115
+ }
11116
+
11117
+ .c4p--datagrid__customize-columns-select-all--selected {
11118
+ background-color: var(--cds-layer-selected);
11119
+ }
11120
+
11121
+ /*
11122
+ * Licensed Materials - Property of IBM
11123
+ * 5724-Q36
11124
+ * (c) Copyright IBM Corp. 2021
11125
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11126
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11127
+ */
11128
+ .c4p--datagrid__row-size-dropdown {
11129
+ padding: 1rem;
11130
+ background-color: var(--cds-layer-02, #ffffff);
11131
+ 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));
11132
+ }
11133
+
11134
+ .cds--btn--ghost.c4p--datagrid__row-size-button--open {
11135
+ background-color: var(--cds-layer-02, #ffffff);
11136
+ 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));
11137
+ }
11138
+
11139
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11140
+ /* stylelint-disable-next-line carbon/layout-token-use */
11141
+ left: -4px;
11142
+ }
11143
+
11144
+ /*
11145
+ * Licensed Materials - Property of IBM
11146
+ * 5724-Q36
11147
+ * (c) Copyright IBM Corp. 2022
11148
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11149
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11150
+ */
11151
+ .c4p--datagrid-filter-flyout__container {
11152
+ position: relative;
11153
+ }
11154
+
11155
+ .c4p--datagrid-filter-flyout {
11156
+ position: absolute;
11157
+ top: 3rem;
11158
+ right: 0;
11159
+ display: none;
11160
+ width: 40.125rem;
11161
+ background-color: var(--cds-layer-02, #ffffff);
11162
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
11163
+ }
11164
+
11165
+ .c4p--datagrid-filter-flyout--open {
11166
+ display: grid;
11167
+ }
11168
+
11169
+ .c4p--datagrid-filter-flyout--batch {
11170
+ min-height: 21.625rem;
11171
+ grid-template-rows: 1fr 3rem;
11172
+ }
11173
+
11174
+ .c4p--datagrid-filter-flyout--instant {
11175
+ min-height: 17.625rem;
11176
+ grid-template-rows: 1fr;
11177
+ }
11178
+
11179
+ .c4p--datagrid-filter-flyout__inner-container {
11180
+ padding: 1rem 1rem 3rem 1rem;
11181
+ }
11182
+
11183
+ .c4p--datagrid-filter-flyout__inner-container::before {
11184
+ position: absolute;
11185
+ top: -0.4375rem;
11186
+ right: 1px;
11187
+ display: block;
11188
+ width: 2.875rem;
11189
+ height: 0.9375rem;
11190
+ background-color: var(--cds-layer-02, #ffffff);
11191
+ content: "";
11192
+ }
11193
+
11194
+ .c4p--datagrid-filter-flyout__title {
11195
+ display: block;
11196
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11197
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11198
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11199
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
10931
11200
  margin-bottom: 1.5rem;
10932
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
10933
- font-weight: var(--cds-body-long-01-font-weight, 400);
10934
- line-height: var(--cds-body-long-01-line-height, 1.42857);
10935
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
11201
+ }
11202
+
11203
+ .c4p--datagrid-filter-flyout__filters {
11204
+ display: grid;
11205
+ gap: 1rem 2rem;
11206
+ grid-template-columns: 1fr 1fr;
11207
+ }
11208
+
11209
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
11210
+ position: relative;
11211
+ background-color: var(--cds-layer-02, #ffffff);
11212
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
11213
+ }
11214
+
11215
+ .c4p--datagrid-filter-flyout .cds--fieldset {
11216
+ margin-bottom: 0;
11217
+ }
11218
+
11219
+ /*
11220
+ * Licensed Materials - Property of IBM
11221
+ * 5724-Q36
11222
+ * (c) Copyright IBM Corp. 2022
11223
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11224
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11225
+ */
11226
+ .c4p--datagrid-filter-panel__container {
11227
+ position: relative;
11228
+ width: rem(320px);
11229
+ height: clamp(var(--filter-panel-min-height), 100%, 100vh);
11230
+ border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
11231
+ background-color: var(--cds-layer-01, #f4f4f4);
11232
+ }
11233
+
11234
+ .c4p--datagrid-filter-panel--open {
11235
+ border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
11236
+ }
11237
+
11238
+ .c4p--datagrid-filter-panel__container::before {
11239
+ position: absolute;
11240
+ top: -1px;
11241
+ left: 0;
11242
+ display: block;
11243
+ width: rem(47px);
11244
+ height: 1px;
11245
+ background-color: var(--cds-layer-01, #f4f4f4);
11246
+ content: "";
11247
+ }
11248
+
11249
+ .c4p--datagrid-filter-panel__inner-container {
11250
+ position: relative;
11251
+ z-index: 0;
11252
+ overflow: auto;
11253
+ padding: 0 1rem;
11254
+ overscroll-behavior: contain;
11255
+ }
11256
+
11257
+ .c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
11258
+ padding-bottom: 5rem;
11259
+ }
11260
+
11261
+ .c4p--datagrid-filter-panel {
11262
+ position: sticky;
11263
+ top: 0;
11264
+ }
11265
+
11266
+ .c4p--datagrid-filter-panel__heading {
11267
+ display: flex;
11268
+ justify-content: space-between;
11269
+ padding-left: 1rem;
11270
+ border-bottom: 1px solid transparent;
11271
+ }
11272
+
11273
+ .c4p--datagrid-filter-panel__heading--with-divider {
11274
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11275
+ }
11276
+
11277
+ .c4p--datagrid-filter-panel__title {
11278
+ padding: 1rem 0;
11279
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
11280
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
11281
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
11282
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
11283
+ }
11284
+
11285
+ .c4p--datagrid-filter-panel__search {
11286
+ padding: 0 1rem 1.5rem;
11287
+ }
11288
+
11289
+ .c4p--datagrid-filter-panel__category-title {
11290
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11291
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11292
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11293
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
11294
+ margin-bottom: 1rem;
11295
+ color: var(--cds-text-secondary, #525252);
11296
+ }
11297
+
11298
+ .c4p--datagrid-filter-panel__category {
11299
+ padding-bottom: 1.5rem;
11300
+ }
11301
+
11302
+ .c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
11303
+ margin-bottom: 1rem;
11304
+ }
11305
+
11306
+ .c4p--datagrid-filter-panel__action-set {
11307
+ position: sticky;
11308
+ z-index: 1;
11309
+ bottom: 0;
11310
+ height: rem(64px);
11311
+ margin-top: auto;
11312
+ }
11313
+
11314
+ .c4p--datagrid-filter-panel__container .cds--accordion__title {
11315
+ margin: 0;
11316
+ }
11317
+
11318
+ .c4p--datagrid-filter-panel__container .cds--accordion__arrow {
11319
+ margin: 0.125rem 0 0;
11320
+ }
11321
+
11322
+ .c4p--datagrid-filter-panel__container .cds--accordion__content {
11323
+ padding-right: 0;
11324
+ padding-left: 0;
11325
+ }
11326
+
11327
+ .c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
11328
+ margin-bottom: 1rem;
11329
+ }
11330
+
11331
+ .cds--btn.c4p--datagrid-filter-panel-open-button {
11332
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11333
+ border-bottom: none;
11334
+ }
11335
+
11336
+ /*
11337
+ * Licensed Materials - Property of IBM
11338
+ * 5724-Q36
11339
+ * (c) Copyright IBM Corp. 2021
11340
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11341
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11342
+ */
11343
+ th.c4p--datagrid__select-all-toggle-on,
11344
+ td.c4p--datagrid__select-all-toggle-on {
11345
+ /* stylelint-disable-next-line declaration-no-important */
11346
+ width: 4.5rem !important;
11347
+ /* stylelint-disable-next-line declaration-no-important */
11348
+ min-width: initial !important;
11349
+ box-sizing: border-box;
11350
+ flex: 0 0 auto;
11351
+ }
11352
+
11353
+ th.c4p--datagrid__select-all-toggle-on {
11354
+ display: flex;
11355
+ align-items: center;
11356
+ justify-content: center;
11357
+ }
11358
+
11359
+ th.c4p--datagrid__select-all-toggle-on.button {
11360
+ margin-left: 0.125rem;
11361
+ }
11362
+
11363
+ /*
11364
+ * Licensed Materials - Property of IBM
11365
+ * 5724-Q36
11366
+ * (c) Copyright IBM Corp. 2022
11367
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11368
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11369
+ */
11370
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11371
+ position: relative;
11372
+ padding: 1rem 1rem 1.5rem 4rem;
11373
+ }
11374
+
11375
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11376
+ position: absolute;
11377
+ /* stylelint-disable-next-line carbon/layout-token-use */
11378
+ top: -1px;
11379
+ right: 0;
11380
+ width: calc(100% - 3rem);
11381
+ height: 1px;
11382
+ background-color: var(--cds-layer-accent);
11383
+ content: "";
11384
+ }
11385
+
11386
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11387
+ position: absolute;
11388
+ bottom: 0;
11389
+ left: 0;
11390
+ width: 100%;
11391
+ height: 1px;
11392
+ background-color: var(--cds-layer-accent);
11393
+ content: "";
11394
+ }
11395
+
11396
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
11397
+ padding: 0.5rem;
11398
+ padding-right: 0;
11399
+ }
11400
+
11401
+ .c4p--datagrid__row-expander.cds--btn {
11402
+ display: flex;
11403
+ width: 2rem;
11404
+ height: 2rem;
11405
+ min-height: 2rem;
11406
+ justify-content: center;
11407
+ padding: 0;
11408
+ }
11409
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
11410
+ fill: var(--cds-layer-selected-inverse, #161616);
11411
+ }
11412
+
11413
+ .c4p--datagrid__draggable-handleStyle {
11414
+ display: flex;
11415
+ align-items: center;
11416
+ margin-right: 0.5rem;
11417
+ cursor: grab;
11418
+ }
11419
+
11420
+ .c4p--datagrid__draggable-handleStyle.disabled {
11421
+ pointer-events: none;
11422
+ }
11423
+
11424
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
11425
+ fill: var(--cds-icon-on-color-disabled, #8d8d8d);
11426
+ }
11427
+
11428
+ .c4p--datagrid__draggable-handleHolder {
11429
+ display: flex;
11430
+ height: 3rem;
11431
+ border-bottom: 1px solid var(--cds-layer-active);
11432
+ background-color: var(--cds-layer);
11433
+ }
11434
+
11435
+ .c4p--datagrid__draggable-handleHolder:hover {
11436
+ background-color: var(--cds-layer-hover);
11437
+ }
11438
+
11439
+ .c4p--datagrid__draggable-handleHolder-selected {
11440
+ display: flex;
11441
+ height: 3rem;
11442
+ border-bottom: 1px solid var(--cds-layer-active);
11443
+ background-color: var(--cds-layer-selected);
11444
+ }
11445
+
11446
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11447
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11448
+ }
11449
+
11450
+ .c4p--datagrid__draggable-handleHolder-isOver {
11451
+ border: 2px dashed var(--cds-focus, #0f62fe);
11452
+ /* stylelint-disable-next-line carbon/theme-token-use */
11453
+ background-color: #edf5ff;
11454
+ }
11455
+
11456
+ .c4p--datagrid__draggable-handleHolder-droppable {
11457
+ display: flex;
11458
+ width: 100%;
11459
+ align-items: center;
11460
+ padding-left: 1rem;
11461
+ /* stylelint-disable-next-line carbon/type-token-use */
11462
+ line-height: 1;
11463
+ transition-property: opacity;
11464
+ }
11465
+
11466
+ .c4p--datagrid__draggable-handleHolder-droppable.c4p--datagrid__draggable-handleHolder-droppable--origin {
11467
+ opacity: 0.5;
11468
+ transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
11469
+ }
11470
+
11471
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11472
+ background-color: var(--cds-highlight, #d0e2ff);
10936
11473
  color: var(--cds-text-primary, #161616);
10937
11474
  }
10938
11475
 
10939
- .c4p--datagrid__customize-columns-column-list {
10940
- position: relative;
10941
- overflow: auto;
11476
+ .c4p--datagrid__draggable-handleHolder--sticky {
11477
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
11478
+ }
11479
+
11480
+ .c4p--datagrid__shared-ui--assistive-text {
11481
+ position: absolute;
11482
+ overflow: hidden;
11483
+ width: 0;
11484
+ height: 0;
11485
+ padding: 0;
11486
+ border: 0;
11487
+ clip: rect(0 0 0 0);
11488
+ text-transform: none;
11489
+ white-space: nowrap;
11490
+ }
11491
+
11492
+ /*
11493
+ * Licensed Materials - Property of IBM
11494
+ * 5724-Q36
11495
+ * (c) Copyright IBM Corp. 2021
11496
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11497
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11498
+ */
11499
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11500
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11501
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11502
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11503
+ height: 1.5rem;
11504
+ }
11505
+
11506
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11507
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11508
+ height: calc(1.5rem - 0.25rem);
11509
+ }
11510
+
11511
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11512
+ max-height: none;
11513
+ }
11514
+
11515
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11516
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11517
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11518
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11519
+ height: 2rem;
11520
+ }
11521
+
11522
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11523
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11524
+ height: calc(2rem - 0.25rem);
11525
+ }
11526
+
11527
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11528
+ max-height: none;
11529
+ }
11530
+
11531
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11532
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11533
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11534
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11535
+ height: 2.5rem;
11536
+ }
11537
+
11538
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11539
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11540
+ height: calc(2.5rem - 0.25rem);
11541
+ }
11542
+
11543
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11544
+ max-height: none;
11545
+ }
11546
+
11547
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11548
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11549
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11550
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11551
+ height: 3rem;
11552
+ }
11553
+
11554
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11555
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11556
+ height: calc(3rem - 0.25rem);
11557
+ }
11558
+
11559
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11560
+ max-height: none;
11561
+ }
11562
+
11563
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11564
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11565
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11566
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11567
+ height: 4rem;
11568
+ }
11569
+
11570
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11571
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11572
+ height: calc(4rem - 0.25rem);
11573
+ }
11574
+
11575
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11576
+ max-height: none;
11577
+ }
11578
+
11579
+ .c4p--datagrid {
11580
+ --c4p--datagrid--grid-header-height: 0;
11581
+ }
11582
+
11583
+ .c4p--datagrid__inline-edit-cell {
11584
+ display: flex;
11585
+ height: 100%;
11586
+ align-items: center;
11587
+ }
11588
+
11589
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11590
+ display: flex;
11591
+ align-items: center;
11592
+ }
11593
+
11594
+ .c4p--datagrid__inline-edit--outer-cell-button {
11595
+ width: 100%;
11596
+ height: calc(100% + 2px);
11597
+ }
11598
+
11599
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11600
+ position: relative;
11601
+ display: flex;
11602
+ width: 100%;
11603
+ height: 100%;
11604
+ align-items: center;
11605
+ justify-content: space-between;
11606
+ padding-left: 1rem;
11607
+ color: var(--cds-text-secondary, #525252);
11608
+ cursor: pointer;
11609
+ outline: 0;
11610
+ }
11611
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11612
+ height: 1rem;
11613
+ padding-right: 1rem;
11614
+ }
11615
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11616
+ padding-left: 0;
11617
+ cursor: default;
11618
+ }
11619
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11620
+ height: 1rem;
11621
+ fill: var(--cds-icon-secondary, #525252);
11622
+ }
11623
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11624
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11625
+ }
11626
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11627
+ justify-content: flex-start;
11628
+ }
11629
+ .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) {
11630
+ /* stylelint-disable-next-line */
11631
+ }
11632
+ .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 {
11633
+ display: none;
11634
+ }
11635
+ .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 {
11636
+ display: block;
11637
+ }
11638
+
11639
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11640
+ background-color: var(--cds-layer-active);
11641
+ color: var(--cds-text-primary, #161616);
11642
+ }
11643
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11644
+ fill: var(--cds-icon-primary, #161616);
11645
+ }
11646
+
11647
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11648
+ background-color: var(--cds-layer-active);
11649
+ color: var(--cds-text-primary, #161616);
11650
+ cursor: text;
11651
+ }
11652
+
11653
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11654
+ /* stylelint-disable-next-line carbon/theme-token-use */
11655
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11656
+ outline-offset: calc(-1 * 0.125rem);
11657
+ }
11658
+ @media screen and (prefers-contrast) {
11659
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11660
+ outline-style: dotted;
11661
+ }
11662
+ }
11663
+
11664
+ .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) {
11665
+ color: var(--cds-button-disabled, #c6c6c6);
11666
+ cursor: not-allowed;
11667
+ }
11668
+
11669
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11670
+ overflow: hidden;
11671
+ padding-right: 1rem;
11672
+ text-overflow: ellipsis;
11673
+ white-space: nowrap;
11674
+ }
11675
+
11676
+ .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 {
11677
+ padding-right: 3rem;
11678
+ }
11679
+
11680
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11681
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11682
+ height: 3rem;
11683
+ }
11684
+
11685
+ .c4p--datagrid__inline-edit-button-icon {
11686
+ position: absolute;
11687
+ right: 1rem;
11688
+ }
11689
+
11690
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11691
+ position: relative;
11692
+ padding: 0;
11693
+ }
11694
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11695
+ padding-left: 1rem;
11696
+ }
11697
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11698
+ min-width: auto;
11699
+ padding-right: 1rem;
11700
+ }
11701
+
11702
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11703
+ padding-bottom: 1rem;
11704
+ padding-left: 1rem;
11705
+ }
11706
+
11707
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11708
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11709
+ width: inherit;
11710
+ }
11711
+
11712
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11713
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11714
+ width: 100%;
11715
+ height: 3rem;
11716
+ max-height: none;
11717
+ }
11718
+
11719
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11720
+ width: inherit;
11721
+ }
11722
+
11723
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11724
+ overflow: hidden;
11725
+ width: 100%;
11726
+ max-width: none;
11727
+ padding-right: 2rem;
11728
+ text-overflow: ellipsis;
11729
+ white-space: nowrap;
11730
+ }
11731
+
11732
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11733
+ border-top-color: var(--cds-layer-hover);
11734
+ background-color: var(--cds-layer-hover);
11735
+ }
11736
+
11737
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11738
+ position: absolute;
11739
+ z-index: 2;
11740
+ bottom: 0;
11741
+ left: 0;
11742
+ width: 2px;
11743
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11744
+ background-color: var(--cds-link-inverse, #78a9ff);
11745
+ content: "";
11746
+ }
11747
+
11748
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11749
+ position: absolute;
11750
+ z-index: 2;
11751
+ right: 0;
11752
+ bottom: 0;
11753
+ width: 2px;
11754
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11755
+ background-color: var(--cds-link-inverse, #78a9ff);
11756
+ content: "";
10942
11757
  }
10943
11758
 
10944
- /*
10945
- * Licensed Materials - Property of IBM
10946
- * 5724-Q36
10947
- * (c) Copyright IBM Corp. 2021
10948
- * US Government Users Restricted Rights - Use, duplication or disclosure
10949
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10950
- */
10951
- .c4p--datagrid__row-size-dropdown {
11759
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
10952
11760
  position: absolute;
10953
- padding: 1rem;
10954
- background-color: var(--cds-background, #ffffff);
10955
- 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));
11761
+ z-index: 2;
11762
+ top: 0;
11763
+ right: 0;
11764
+ left: 0;
11765
+ width: var(--c4p--datagrid--grid-width);
11766
+ height: 2px;
11767
+ background-color: var(--cds-link-inverse, #78a9ff);
10956
11768
  }
10957
11769
 
10958
- .c4p--datagrid__row-size-button--open {
10959
- background-color: var(--cds-background, #ffffff);
10960
- 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));
11770
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11771
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11772
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
10961
11773
  }
10962
11774
 
10963
- /*
10964
- * Licensed Materials - Property of IBM
10965
- * 5724-Q36
10966
- * (c) Copyright IBM Corp. 2021
10967
- * US Government Users Restricted Rights - Use, duplication or disclosure
10968
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10969
- */
10970
- th.c4p--datagrid__select-all-toggle-on,
10971
- td.c4p--datagrid__select-all-toggle-on {
10972
- /* stylelint-disable-next-line declaration-no-important */
10973
- width: 4.5rem !important;
10974
- /* stylelint-disable-next-line declaration-no-important */
10975
- min-width: initial !important;
10976
- box-sizing: border-box;
10977
- flex: 0 0 auto;
11775
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11776
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11777
+ outline-offset: -2px;
10978
11778
  }
10979
11779
 
10980
- th.c4p--datagrid__select-all-toggle-on {
10981
- display: flex;
10982
- align-items: center;
10983
- justify-content: center;
11780
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11781
+ padding-top: 0.125rem;
10984
11782
  }
10985
11783
 
10986
- th.c4p--datagrid__select-all-toggle-on.button {
10987
- margin-left: 0.125rem;
11784
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11785
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11786
+ position: absolute;
11787
+ z-index: 3;
11788
+ top: calc(100% - 0.125rem);
11789
+ width: 100%;
11790
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11791
+ margin: 0;
11792
+ background-color: var(--cds-layer-01, #f4f4f4);
11793
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11794
+ outline-offset: calc(-1 * 0.125rem);
10988
11795
  }
10989
11796
 
10990
- .c4p--datagrid__expanded-row-content {
10991
- padding: 1rem 1rem 1.5rem 4rem;
11797
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11798
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
10992
11799
  }
10993
11800
 
10994
- /*
10995
- * Licensed Materials - Property of IBM
10996
- * 5724-Q36
10997
- * (c) Copyright IBM Corp. 2022
10998
- * US Government Users Restricted Rights - Use, duplication or disclosure
10999
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11000
- */
11001
- .c4p--datagrid__draggable-handleStyle {
11002
- display: flex;
11003
- align-items: center;
11004
- margin-right: 0.5rem;
11005
- cursor: grab;
11801
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11802
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11803
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11804
+ z-index: 4;
11805
+ top: calc(100% + 0.75rem + 0.125rem);
11806
+ right: 0.5rem;
11006
11807
  }
11007
11808
 
11008
- .c4p--datagrid__draggable-handleStyle.disabled {
11009
- pointer-events: none;
11809
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11810
+ top: calc(100% + 0.25rem + 0.125rem);
11010
11811
  }
11011
11812
 
11012
- svg.c4p--datagrid__draggable-handleStyle.disable {
11013
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11813
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11814
+ position: absolute;
11815
+ top: 0;
11816
+ left: 0.125rem;
11817
+ width: calc(100% - (0.125rem * 2));
11818
+ height: 0.125rem;
11819
+ background-color: var(--cds-layer-01, #f4f4f4);
11820
+ content: "";
11014
11821
  }
11015
11822
 
11016
- .c4p--datagrid__draggable-handleHolder {
11017
- display: flex;
11018
- height: 2rem;
11019
- padding-left: 0.25rem;
11020
- margin-bottom: 0.5rem;
11021
- background: var(--cds-layer-02, #ffffff);
11022
- }
11023
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11024
- border: 2px dashed var(--cds-focus, #0f62fe);
11025
- background-color: var(--cds-highlight, #d0e2ff);
11823
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11824
+ position: absolute;
11825
+ top: 0.125rem;
11826
+ left: 0.5rem;
11827
+ width: calc(100% - (0.5rem * 2));
11828
+ height: 1px;
11829
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11830
+ content: "";
11026
11831
  }
11027
11832
 
11028
- .c4p--datagrid__draggable-handleHolder-droppable {
11029
- display: flex;
11030
- width: 100%;
11833
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11834
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11835
+ }
11836
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11837
+ background-color: transparent;
11031
11838
  }
11032
11839
 
11033
- .c4p--datagrid__draggable-handleHolder--grabbed {
11034
- background-color: var(--cds-highlight, #d0e2ff);
11035
- color: var(--cds-text-primary, #161616);
11840
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11841
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11842
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11843
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11844
+ outline-color: var(--cds-support-error, #da1e28);
11036
11845
  }
11037
11846
 
11038
- .c4p--datagrid__shared-ui--assistive-text {
11039
- position: absolute;
11040
- overflow: hidden;
11041
- width: 0;
11042
- height: 0;
11043
- padding: 0;
11044
- border: 0;
11045
- clip: rect(0 0 0 0);
11046
- text-transform: none;
11047
- white-space: nowrap;
11847
+ .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 {
11848
+ background-color: var(--cds-support-error, #da1e28);
11048
11849
  }
11049
11850
 
11050
- /*
11051
- * Licensed Materials - Property of IBM
11052
- * 5724-Q36
11053
- * (c) Copyright IBM Corp. 2020, 2021
11054
- * US Government Users Restricted Rights - Use, duplication or disclosure
11055
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11056
- */
11851
+ /* stylelint-disable max-nesting-depth */
11057
11852
  .c4p--datagrid__datagridWrap {
11058
11853
  display: block;
11059
11854
  width: 100%;
@@ -11061,6 +11856,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11061
11856
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11062
11857
  display: none;
11063
11858
  }
11859
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11860
+ left: 0.125rem;
11861
+ width: 112px;
11862
+ }
11064
11863
 
11065
11864
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11066
11865
  left: 0.125rem;
@@ -11069,7 +11868,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11069
11868
 
11070
11869
  .c4p--datagrid__datagridWrap-simple {
11071
11870
  display: flex;
11072
- overflow: hidden;
11073
11871
  width: 100%;
11074
11872
  height: 100%;
11075
11873
  flex-direction: column;
@@ -13114,14 +13912,18 @@ a.cds--side-nav__link--current::before {
13114
13912
  font-weight: var(--cds-body-short-01-font-weight, 400);
13115
13913
  line-height: var(--cds-body-short-01-line-height, 1.28572);
13116
13914
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13117
- height: 4rem;
13118
13915
  align-items: center;
13916
+ margin: 0;
13917
+ }
13918
+
13919
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
13920
+ height: 4rem;
13119
13921
  padding-top: 1rem;
13120
13922
  padding-bottom: 2rem;
13121
- margin: 0;
13122
13923
  }
13123
13924
 
13124
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
13925
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
13926
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
13125
13927
  max-width: none;
13126
13928
  }
13127
13929
 
@@ -13182,7 +13984,7 @@ a.cds--side-nav__link--current::before {
13182
13984
  /* stylelint-disable-next-line function-no-unknown */
13183
13985
  z-index: 9000;
13184
13986
  align-items: flex-end;
13185
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13987
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13186
13988
  }
13187
13989
 
13188
13990
  @media (prefers-reduced-motion: reduce) {
@@ -13312,6 +14114,7 @@ a.cds--side-nav__link--current::before {
13312
14114
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13313
14115
  -webkit-box-orient: vertical;
13314
14116
  -webkit-line-clamp: 2;
14117
+ word-break: break-word;
13315
14118
  }
13316
14119
 
13317
14120
  @media (min-width: 42rem) {
@@ -13600,6 +14403,45 @@ a.cds--side-nav__link--current::before {
13600
14403
  margin-bottom: 1rem;
13601
14404
  }
13602
14405
 
14406
+ /* stylelint-disable max-nesting-depth */
14407
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14408
+ /* Used id for overriding the SVG path fill */
14409
+ }
14410
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14411
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14412
+ background-color: #0050e6;
14413
+ }
14414
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14415
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14416
+ box-shadow: none;
14417
+ }
14418
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14419
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14420
+ fill: #ffffff;
14421
+ }
14422
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14423
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14424
+ background-color: transparent;
14425
+ }
14426
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14427
+ background-color: #0f62fe;
14428
+ color: #ffffff;
14429
+ }
14430
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14431
+ animation-duration: 700ms;
14432
+ animation-fill-mode: forwards;
14433
+ animation-iteration-count: infinite;
14434
+ animation-name: rotate;
14435
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14436
+ }
14437
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14438
+ background-color: transparent;
14439
+ }
14440
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14441
+ background-color: #0f62fe;
14442
+ color: #ffffff;
14443
+ }
14444
+
13603
14445
  html,
13604
14446
  body,
13605
14447
  div,
@@ -15074,6 +15916,10 @@ em {
15074
15916
  --cds-button-secondary-hover: #5e5e5e;
15075
15917
  --cds-button-tertiary-hover: #f4f4f4;
15076
15918
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15919
+ --cds-notification-background-error: #393939;
15920
+ --cds-notification-background-success: #393939;
15921
+ --cds-notification-background-info: #393939;
15922
+ --cds-notification-background-warning: #393939;
15077
15923
  --cds-notification-action-tertiary-inverse: #0f62fe;
15078
15924
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15079
15925
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15238,6 +16084,10 @@ em {
15238
16084
  --cds-button-secondary-hover: #5e5e5e;
15239
16085
  --cds-button-tertiary-hover: #f4f4f4;
15240
16086
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
16087
+ --cds-notification-background-error: #262626;
16088
+ --cds-notification-background-success: #262626;
16089
+ --cds-notification-background-info: #262626;
16090
+ --cds-notification-background-warning: #262626;
15241
16091
  --cds-notification-action-tertiary-inverse: #0f62fe;
15242
16092
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15243
16093
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -16515,7 +17365,7 @@ input[data-invalid]:not(:focus),
16515
17365
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16516
17366
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16517
17367
  .cds--list-box[data-invalid]:not(:focus),
16518
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17368
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16519
17369
  outline: 2px solid var(--cds-support-error, #da1e28);
16520
17370
  outline-offset: -2px;
16521
17371
  }
@@ -16526,7 +17376,7 @@ input[data-invalid]:not(:focus),
16526
17376
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16527
17377
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16528
17378
  .cds--list-box[data-invalid]:not(:focus),
16529
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17379
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16530
17380
  outline-style: dotted;
16531
17381
  }
16532
17382
  }
@@ -17257,6 +18107,9 @@ fieldset[disabled] .cds--form__helper-text {
17257
18107
  z-index: 1;
17258
18108
  top: 0.8125rem;
17259
18109
  left: 1rem;
18110
+ display: flex;
18111
+ height: 1rem;
18112
+ align-items: center;
17260
18113
  margin: 0;
17261
18114
  }
17262
18115
 
@@ -17275,12 +18128,12 @@ fieldset[disabled] .cds--form__helper-text {
17275
18128
  }
17276
18129
 
17277
18130
  .cds--form--fluid .cds--text-input--invalid,
17278
- .cds--form--fluid .cds--text-input--warn {
18131
+ .cds--form--fluid .cds--text-input--warning {
17279
18132
  border-bottom: none;
17280
18133
  }
17281
18134
 
17282
18135
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
17283
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
18136
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
17284
18137
  display: block;
17285
18138
  border-style: solid;
17286
18139
  border-color: var(--cds-border-subtle);
@@ -17292,13 +18145,13 @@ fieldset[disabled] .cds--form__helper-text {
17292
18145
  top: 5rem;
17293
18146
  }
17294
18147
 
17295
- .cds--form--fluid .cds--text-input-wrapper--light {
17296
- background: var(--cds-field-02, #ffffff);
18148
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
18149
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
18150
+ outline: none;
17297
18151
  }
17298
18152
 
17299
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
17300
- outline: 2px solid transparent;
17301
- outline-offset: -2px;
18153
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
18154
+ border-bottom: 1px solid var(--cds-border-strong);
17302
18155
  }
17303
18156
 
17304
18157
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -17311,16 +18164,23 @@ fieldset[disabled] .cds--form__helper-text {
17311
18164
  }
17312
18165
  }
17313
18166
 
17314
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
18167
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
18168
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17315
18169
  outline: 2px solid var(--cds-focus, #0f62fe);
17316
18170
  outline-offset: -2px;
17317
18171
  }
17318
18172
  @media screen and (prefers-contrast) {
17319
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
18173
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
18174
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17320
18175
  outline-style: dotted;
17321
18176
  }
17322
18177
  }
17323
18178
 
18179
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
18180
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
18181
+ outline: none;
18182
+ }
18183
+
17324
18184
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
17325
18185
  flex-flow: row wrap;
17326
18186
  }
@@ -22294,6 +23154,106 @@ button.cds--dropdown-text:focus {
22294
23154
  }
22295
23155
 
22296
23156
  /* stylelint-enable */
23157
+ .cds--text-input--fluid.cds--text-input-wrapper {
23158
+ position: relative;
23159
+ height: 100%;
23160
+ background: var(--cds-field);
23161
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
23162
+ }
23163
+
23164
+ .cds--text-input--fluid .cds--label {
23165
+ position: absolute;
23166
+ z-index: 1;
23167
+ top: 0.8125rem;
23168
+ left: 1rem;
23169
+ display: flex;
23170
+ height: 1rem;
23171
+ align-items: center;
23172
+ margin: 0;
23173
+ }
23174
+
23175
+ .cds--text-input--fluid .cds--form__helper-text {
23176
+ display: none;
23177
+ }
23178
+
23179
+ .cds--text-input--fluid .cds--text-input {
23180
+ min-height: 4rem;
23181
+ padding: 2rem 1rem 0.8125rem;
23182
+ }
23183
+
23184
+ .cds--text-input__divider,
23185
+ .cds--text-input--fluid .cds--text-input__divider {
23186
+ display: none;
23187
+ }
23188
+
23189
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
23190
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
23191
+ display: block;
23192
+ }
23193
+
23194
+ .cds--text-input--fluid input[data-invalid] {
23195
+ outline: none;
23196
+ }
23197
+
23198
+ .cds--text-input--fluid .cds--form-requirement {
23199
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
23200
+ margin: 0;
23201
+ }
23202
+
23203
+ .cds--text-input--fluid .cds--text-input--invalid,
23204
+ .cds--text-input--fluid .cds--text-input--warning {
23205
+ border-bottom: none;
23206
+ }
23207
+
23208
+ .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
23209
+ .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
23210
+ display: block;
23211
+ border-style: solid;
23212
+ border-color: var(--cds-border-subtle);
23213
+ border-bottom: none;
23214
+ margin: 0 1rem;
23215
+ }
23216
+
23217
+ .cds--text-input--fluid .cds--text-input__invalid-icon {
23218
+ top: 5rem;
23219
+ }
23220
+
23221
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
23222
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
23223
+ outline: none;
23224
+ }
23225
+
23226
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
23227
+ border-bottom: 1px solid var(--cds-border-strong);
23228
+ }
23229
+
23230
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
23231
+ outline: 2px solid var(--cds-support-error, #da1e28);
23232
+ outline-offset: -2px;
23233
+ }
23234
+ @media screen and (prefers-contrast) {
23235
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
23236
+ outline-style: dotted;
23237
+ }
23238
+ }
23239
+
23240
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
23241
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
23242
+ outline: 2px solid var(--cds-focus, #0f62fe);
23243
+ outline-offset: -2px;
23244
+ }
23245
+ @media screen and (prefers-contrast) {
23246
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
23247
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
23248
+ outline-style: dotted;
23249
+ }
23250
+ }
23251
+
23252
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
23253
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
23254
+ outline: none;
23255
+ }
23256
+
22297
23257
  @keyframes stroke {
22298
23258
  100% {
22299
23259
  stroke-dashoffset: 0;
@@ -22996,6 +23956,10 @@ button.cds--dropdown-text:focus {
22996
23956
  background-color: transparent;
22997
23957
  }
22998
23958
 
23959
+ .cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu {
23960
+ visibility: hidden;
23961
+ }
23962
+
22999
23963
  .cds--inline-notification {
23000
23964
  position: relative;
23001
23965
  display: flex;
@@ -26038,13 +27002,13 @@ span.cds--pagination__text.cds--pagination__items-count {
26038
27002
  .cds--popover--left-top .cds--popover-content {
26039
27003
  top: -50%;
26040
27004
  right: 100%;
26041
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
27005
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
26042
27006
  }
26043
27007
 
26044
27008
  .cds--popover--left-bottom .cds--popover-content {
26045
27009
  right: 100%;
26046
27010
  bottom: -50%;
26047
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
27011
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
26048
27012
  }
26049
27013
 
26050
27014
  .cds--popover--left .cds--popover-content::before,
@@ -28948,7 +29912,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28948
29912
  }
28949
29913
 
28950
29914
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28951
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29915
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28952
29916
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
28953
29917
  }
28954
29918
 
@@ -29023,7 +29987,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29023
29987
 
29024
29988
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
29025
29989
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
29026
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29990
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
29027
29991
  color: Highlight;
29028
29992
  outline: 1px solid Highlight;
29029
29993
  }
@@ -29084,6 +30048,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29084
30048
  min-height: 2rem;
29085
30049
  flex: 1;
29086
30050
  align-items: center;
30051
+ padding-top: 0.4375rem;
30052
+ padding-bottom: 0.4375rem;
29087
30053
  }
29088
30054
  .cds--tree-node__label:hover {
29089
30055
  background-color: var(--cds-layer-hover-01, #e8e8e8);
@@ -29118,7 +30084,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29118
30084
  }
29119
30085
 
29120
30086
  .cds--tree-parent-node__toggle {
29121
- padding: 0;
30087
+ display: flex;
30088
+ align-items: center;
30089
+ align-self: flex-start;
30090
+ padding: 0.0625rem 0;
29122
30091
  border: 0;
29123
30092
  margin-right: 0.5rem;
29124
30093
  }
@@ -29142,6 +30111,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29142
30111
  .cds--tree-node__icon {
29143
30112
  min-width: 1rem;
29144
30113
  min-height: 1rem;
30114
+ align-self: flex-start;
30115
+ margin-top: 0.0625rem;
29145
30116
  margin-right: 0.5rem;
29146
30117
  fill: var(--cds-icon-secondary, #525252);
29147
30118
  }
@@ -29174,6 +30145,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29174
30145
 
29175
30146
  .cds--tree--xs .cds--tree-node__label {
29176
30147
  min-height: 1.5rem;
30148
+ padding-top: 0.25rem;
30149
+ padding-bottom: 0.25rem;
29177
30150
  }
29178
30151
 
29179
30152
  .cds--content {