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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (357) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +1294 -331
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +789 -171
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +4 -8
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +1171 -416
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +1068 -262
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -8
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  20. package/es/components/ActionSet/ActionSet.js +7 -3
  21. package/es/components/AddSelect/AddSelect.js +6 -6
  22. package/es/components/AddSelect/AddSelectBody.js +72 -31
  23. package/es/components/AddSelect/AddSelectBreadcrumbs.js +12 -4
  24. package/es/components/AddSelect/AddSelectColumn.js +8 -8
  25. package/es/components/AddSelect/AddSelectFilter.js +10 -7
  26. package/es/components/AddSelect/AddSelectList.js +64 -29
  27. package/es/components/AddSelect/AddSelectMetaPanel.js +7 -1
  28. package/es/components/AddSelect/AddSelectSidebar.js +5 -2
  29. package/es/components/AddSelect/AddSelectSort.js +2 -2
  30. package/es/components/AddSelect/add-select-utils.js +9 -2
  31. package/es/components/AddSelect/hooks/useItemSort.js +6 -0
  32. package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
  33. package/es/components/AddSelect/hooks/usePath.js +15 -1
  34. package/es/components/AddSelect/index.js +1 -1
  35. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  36. package/es/components/Card/Card.js +16 -6
  37. package/es/components/Card/CardFooter.js +3 -1
  38. package/es/components/Card/CardHeader.js +20 -1
  39. package/es/components/ComboButton/ComboButton.js +1 -1
  40. package/es/components/CreateFullPage/CreateFullPage.js +4 -1
  41. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
  42. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  43. package/es/components/DataSpreadsheet/DataSpreadsheet.js +65 -15
  44. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  45. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  46. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  47. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  48. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  49. package/es/components/Datagrid/Datagrid/Datagrid.js +13 -37
  50. package/es/components/Datagrid/Datagrid/DatagridContent.js +159 -0
  51. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
  52. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  53. package/es/components/Datagrid/Datagrid/DatagridRow.js +44 -5
  54. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  55. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  56. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +29 -8
  57. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +31 -9
  58. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  60. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  61. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  62. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  63. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  64. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +424 -0
  65. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +83 -0
  66. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +20 -0
  67. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +22 -0
  68. package/es/components/Datagrid/Datagrid/addons/Filtering/index.js +7 -0
  69. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +38 -0
  70. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  71. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  72. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +537 -0
  73. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  74. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  75. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  76. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  77. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  78. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  79. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  80. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  81. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  82. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  83. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  84. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  85. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  86. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  87. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  88. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  89. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  90. package/es/components/Datagrid/index.js +4 -1
  91. package/es/components/Datagrid/useActionsColumn.js +28 -12
  92. package/es/components/Datagrid/useColumnOrder.js +8 -0
  93. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  94. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  95. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  96. package/es/components/Datagrid/useExpandedRow.js +0 -1
  97. package/es/components/Datagrid/useFiltering.js +90 -0
  98. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  99. package/es/components/Datagrid/useInlineEdit.js +71 -0
  100. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  101. package/es/components/Datagrid/useNestedRows.js +16 -4
  102. package/es/components/Datagrid/useParentDimensions.js +3 -1
  103. package/es/components/Datagrid/useRowExpander.js +12 -4
  104. package/es/components/Datagrid/useRowSize.js +17 -6
  105. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  106. package/es/components/Datagrid/useSelectRows.js +12 -2
  107. package/es/components/Datagrid/useSortableColumns.js +1 -1
  108. package/es/components/Datagrid/useStickyColumn.js +11 -0
  109. package/es/components/Datagrid/utils/DatagridActions.js +223 -0
  110. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  111. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  112. package/es/components/Datagrid/utils/getArgTypes.js +94 -0
  113. package/es/components/Datagrid/utils/getInlineEditColumns.js +158 -0
  114. package/es/components/Datagrid/utils/makeData.js +55 -2
  115. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  116. package/es/components/EditUpdateCards/index.js +7 -0
  117. package/es/components/ExportModal/ExportModal.js +1 -1
  118. package/es/components/FilterSummary/FilterSummary.js +54 -0
  119. package/es/components/FilterSummary/index.js +7 -0
  120. package/es/components/ImportModal/ImportModal.js +3 -3
  121. package/es/components/InlineEdit/InlineEdit.js +28 -426
  122. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  123. package/es/components/InlineEditV1/index.js +7 -0
  124. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  125. package/es/components/InlineEditV2/index.js +7 -0
  126. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  127. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  128. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  129. package/es/components/MultiAddSelect/index.js +6 -0
  130. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  131. package/es/components/OptionsTile/OptionsTile.js +29 -13
  132. package/es/components/PageHeader/PageHeader.js +4 -4
  133. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  134. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  135. package/es/components/RemoveModal/RemoveModal.js +20 -3
  136. package/es/components/Saving/Saving.js +1 -1
  137. package/es/components/SidePanel/SidePanel.js +45 -52
  138. package/es/components/SidePanel/motion/variants.js +45 -0
  139. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  140. package/es/components/SingleAddSelect/index.js +6 -0
  141. package/es/components/StatusIcon/StatusIcon.js +1 -1
  142. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  143. package/es/components/WebTerminal/WebTerminal.js +2 -2
  144. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  145. package/es/components/WebTerminal/hooks/index.js +6 -0
  146. package/es/components/WebTerminal/index.js +6 -0
  147. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  148. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  149. package/es/components/WebTerminal/preview-components/index.js +7 -0
  150. package/es/components/index.js +3 -2
  151. package/es/global/js/hooks/index.js +2 -1
  152. package/es/global/js/hooks/useClickOutside.js +1 -1
  153. package/es/global/js/hooks/useControllableState.js +83 -0
  154. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  155. package/es/global/js/package-settings.js +7 -4
  156. package/es/global/js/utils/getBezierValues.js +20 -0
  157. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  158. package/es/global/js/utils/motionConstants.js +45 -0
  159. package/es/global/js/utils/rangeWithCallback.js +13 -0
  160. package/es/global/js/utils/story-helper.js +5 -1
  161. package/es/global/js/utils/uuidv4.spec.js +4 -0
  162. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  163. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  164. package/lib/components/ActionSet/ActionSet.js +7 -3
  165. package/lib/components/AddSelect/AddSelect.js +5 -6
  166. package/lib/components/AddSelect/AddSelectBody.js +67 -30
  167. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  168. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  169. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  170. package/lib/components/AddSelect/AddSelectList.js +65 -30
  171. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  172. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  173. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  174. package/lib/components/AddSelect/add-select-utils.js +9 -2
  175. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  176. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  177. package/lib/components/AddSelect/hooks/usePath.js +9 -1
  178. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  179. package/lib/components/Card/Card.js +16 -6
  180. package/lib/components/Card/CardFooter.js +3 -1
  181. package/lib/components/Card/CardHeader.js +21 -1
  182. package/lib/components/ComboButton/ComboButton.js +3 -3
  183. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  184. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
  185. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  186. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +65 -14
  187. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  188. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  189. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  190. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +53 -0
  191. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  192. package/lib/components/Datagrid/Datagrid/Datagrid.js +16 -44
  193. package/lib/components/Datagrid/Datagrid/DatagridContent.js +193 -0
  194. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +17 -4
  195. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  196. package/lib/components/Datagrid/Datagrid/DatagridRow.js +45 -5
  197. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  198. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  199. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +32 -8
  200. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +33 -9
  201. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  202. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  203. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  204. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  205. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  206. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  207. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +443 -0
  208. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -0
  209. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +35 -0
  210. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +33 -0
  211. package/lib/components/Datagrid/Datagrid/addons/Filtering/index.js +15 -0
  212. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +47 -0
  213. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  214. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  215. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +562 -0
  216. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  217. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  218. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  219. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  220. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  221. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  222. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  223. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  224. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  225. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  226. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  227. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  228. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  229. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  230. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  231. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  232. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  233. package/lib/components/Datagrid/index.js +25 -1
  234. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  235. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  236. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  237. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  238. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  239. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  240. package/lib/components/Datagrid/useFiltering.js +94 -0
  241. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  242. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  243. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  244. package/lib/components/Datagrid/useNestedRows.js +17 -4
  245. package/lib/components/Datagrid/useParentDimensions.js +3 -1
  246. package/lib/components/Datagrid/useRowExpander.js +17 -5
  247. package/lib/components/Datagrid/useRowSize.js +18 -13
  248. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  249. package/lib/components/Datagrid/useSelectRows.js +12 -2
  250. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  251. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  252. package/lib/components/Datagrid/utils/DatagridActions.js +248 -0
  253. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  254. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  255. package/lib/components/Datagrid/utils/getArgTypes.js +102 -0
  256. package/lib/components/Datagrid/utils/getInlineEditColumns.js +173 -0
  257. package/lib/components/Datagrid/utils/makeData.js +57 -3
  258. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  259. package/lib/components/EditUpdateCards/index.js +13 -0
  260. package/lib/components/ExportModal/ExportModal.js +3 -3
  261. package/lib/components/FilterSummary/FilterSummary.js +72 -0
  262. package/lib/components/FilterSummary/index.js +15 -0
  263. package/lib/components/ImportModal/ImportModal.js +4 -4
  264. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  265. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  266. package/lib/components/InlineEditV1/index.js +13 -0
  267. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  268. package/lib/components/InlineEditV2/index.js +13 -0
  269. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  270. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  271. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  272. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  273. package/lib/components/OptionsTile/OptionsTile.js +34 -17
  274. package/lib/components/PageHeader/PageHeader.js +5 -5
  275. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  276. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  277. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  278. package/lib/components/Saving/Saving.js +5 -5
  279. package/lib/components/SidePanel/SidePanel.js +48 -53
  280. package/lib/components/SidePanel/motion/variants.js +55 -0
  281. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  282. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  283. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  284. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  285. package/lib/components/WebTerminal/hooks/index.js +6 -0
  286. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  287. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  288. package/lib/components/index.js +21 -1
  289. package/lib/global/js/hooks/index.js +9 -1
  290. package/lib/global/js/hooks/useClickOutside.js +1 -1
  291. package/lib/global/js/hooks/useControllableState.js +94 -0
  292. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  293. package/lib/global/js/package-settings.js +7 -4
  294. package/lib/global/js/utils/getBezierValues.js +29 -0
  295. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  296. package/lib/global/js/utils/motionConstants.js +55 -0
  297. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  298. package/lib/global/js/utils/story-helper.js +5 -1
  299. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  300. package/package.json +18 -16
  301. package/scss/components/ActionSet/_action-set.scss +9 -4
  302. package/scss/components/AddSelect/_add-select.scss +132 -34
  303. package/scss/components/AddSelect/_index.scss +1 -1
  304. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  305. package/scss/components/Card/_card.scss +1 -0
  306. package/scss/components/Cascade/_cascade.scss +1 -1
  307. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  308. package/scss/components/Datagrid/_datagrid.scss +7 -1
  309. package/scss/components/Datagrid/_storybook-styles.scss +29 -5
  310. package/scss/components/Datagrid/styles/_datagrid.scss +105 -18
  311. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  312. package/scss/components/Datagrid/styles/_index.scss +2 -0
  313. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  314. package/scss/components/Datagrid/styles/_useExpandedRow.scss +57 -11
  315. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  316. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  317. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  318. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  319. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +87 -0
  320. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  321. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  322. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  323. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  324. package/scss/components/EditUpdateCards/_index.scss +8 -0
  325. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  326. package/scss/components/FilterSummary/_filter-summary.scss +20 -0
  327. package/scss/components/FilterSummary/_index.scss +10 -0
  328. package/scss/components/FilterSummary/_storybook-styles.scss +14 -0
  329. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  330. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  331. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  332. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  333. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  334. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  335. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  336. package/scss/components/InlineEditV2/_index.scss +10 -0
  337. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  338. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  339. package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
  340. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  341. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  342. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  343. package/scss/components/SidePanel/_side-panel.scss +3 -82
  344. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  345. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  346. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  347. package/scss/components/SingleAddSelect/_index.scss +7 -0
  348. package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
  349. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  350. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  351. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  352. package/scss/components/WebTerminal/_index.scss +7 -0
  353. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  354. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  355. package/scss/components/_index-released-only.scss +2 -1
  356. package/scss/components/_index-with-carbon.scss +3 -1
  357. package/scss/components/_index.scss +4 -1
package/css/index.css CHANGED
@@ -1668,12 +1668,61 @@
1668
1668
  margin-bottom: 0;
1669
1669
  }
1670
1670
 
1671
- .cds--label .cds--tooltip__trigger {
1671
+ .cds--label + .cds--tooltip {
1672
+ position: relative;
1673
+ top: 0.2rem;
1674
+ left: 0.5rem;
1675
+ }
1676
+
1677
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
1678
+ box-sizing: border-box;
1679
+ padding: 0;
1680
+ border: 0;
1681
+ margin: 0;
1682
+ font-family: inherit;
1683
+ font-size: 100%;
1684
+ vertical-align: baseline;
1685
+ display: inline-block;
1686
+ padding: 0;
1687
+ border: 0;
1688
+ appearance: none;
1689
+ background: none;
1690
+ cursor: pointer;
1691
+ text-align: start;
1692
+ width: 100%;
1693
+ display: flex;
1694
+ align-items: center;
1695
+ justify-content: center;
1672
1696
  font-size: var(--cds-label-01-font-size, 0.75rem);
1673
1697
  font-weight: var(--cds-label-01-font-weight, 400);
1674
1698
  line-height: var(--cds-label-01-line-height, 1.33333);
1675
1699
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1676
1700
  }
1701
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *,
1702
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
1703
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
1704
+ box-sizing: inherit;
1705
+ }
1706
+ .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
1707
+ border: 0;
1708
+ }
1709
+
1710
+ .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
1711
+ outline: 1px solid var(--cds-focus, #0f62fe);
1712
+ }
1713
+
1714
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
1715
+ fill: var(--cds-icon-secondary, #525252);
1716
+ }
1717
+
1718
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
1719
+ fill: var(--cds-icon-primary, #161616);
1720
+ }
1721
+
1722
+ .cds--label + .cds--toggletip {
1723
+ top: 0.2rem;
1724
+ left: 0.5rem;
1725
+ }
1677
1726
 
1678
1727
  .cds--label.cds--skeleton {
1679
1728
  position: relative;
@@ -1715,7 +1764,7 @@ input[data-invalid]:not(:focus),
1715
1764
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1716
1765
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1717
1766
  .cds--list-box[data-invalid]:not(:focus),
1718
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
1767
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
1719
1768
  outline: 2px solid var(--cds-support-error, #da1e28);
1720
1769
  outline-offset: -2px;
1721
1770
  }
@@ -1726,7 +1775,7 @@ input[data-invalid]:not(:focus),
1726
1775
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1727
1776
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1728
1777
  .cds--list-box[data-invalid]:not(:focus),
1729
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
1778
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
1730
1779
  outline-style: dotted;
1731
1780
  }
1732
1781
  }
@@ -2272,6 +2321,9 @@ fieldset[disabled] .cds--form__helper-text {
2272
2321
  z-index: 1;
2273
2322
  top: 0.8125rem;
2274
2323
  left: 1rem;
2324
+ display: flex;
2325
+ height: 1rem;
2326
+ align-items: center;
2275
2327
  margin: 0;
2276
2328
  }
2277
2329
 
@@ -2290,12 +2342,12 @@ fieldset[disabled] .cds--form__helper-text {
2290
2342
  }
2291
2343
 
2292
2344
  .cds--form--fluid .cds--text-input--invalid,
2293
- .cds--form--fluid .cds--text-input--warn {
2345
+ .cds--form--fluid .cds--text-input--warning {
2294
2346
  border-bottom: none;
2295
2347
  }
2296
2348
 
2297
2349
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
2298
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
2350
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
2299
2351
  display: block;
2300
2352
  border-style: solid;
2301
2353
  border-color: var(--cds-border-subtle);
@@ -2307,13 +2359,13 @@ fieldset[disabled] .cds--form__helper-text {
2307
2359
  top: 5rem;
2308
2360
  }
2309
2361
 
2310
- .cds--form--fluid .cds--text-input-wrapper--light {
2311
- background: var(--cds-field-02, #ffffff);
2362
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
2363
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
2364
+ outline: none;
2312
2365
  }
2313
2366
 
2314
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
2315
- outline: 2px solid transparent;
2316
- outline-offset: -2px;
2367
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
2368
+ border-bottom: 1px solid var(--cds-border-strong);
2317
2369
  }
2318
2370
 
2319
2371
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -2326,16 +2378,23 @@ fieldset[disabled] .cds--form__helper-text {
2326
2378
  }
2327
2379
  }
2328
2380
 
2329
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
2381
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
2382
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
2330
2383
  outline: 2px solid var(--cds-focus, #0f62fe);
2331
2384
  outline-offset: -2px;
2332
2385
  }
2333
2386
  @media screen and (prefers-contrast) {
2334
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
2387
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
2388
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
2335
2389
  outline-style: dotted;
2336
2390
  }
2337
2391
  }
2338
2392
 
2393
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
2394
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
2395
+ outline: none;
2396
+ }
2397
+
2339
2398
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
2340
2399
  flex-flow: row wrap;
2341
2400
  }
@@ -2569,6 +2628,7 @@ fieldset[disabled] .cds--form__helper-text {
2569
2628
  appearance: none;
2570
2629
  background: none;
2571
2630
  cursor: pointer;
2631
+ text-align: start;
2572
2632
  width: 100%;
2573
2633
  display: flex;
2574
2634
  width: 2.5rem;
@@ -2719,6 +2779,7 @@ fieldset[disabled] .cds--form__helper-text {
2719
2779
  appearance: none;
2720
2780
  background: none;
2721
2781
  cursor: pointer;
2782
+ text-align: start;
2722
2783
  outline: 2px solid transparent;
2723
2784
  outline-offset: -2px;
2724
2785
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -3049,14 +3110,17 @@ fieldset[disabled] .cds--form__helper-text {
3049
3110
  font-weight: var(--cds-body-short-01-font-weight, 400);
3050
3111
  line-height: var(--cds-body-short-01-line-height, 1.28572);
3051
3112
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3052
- height: 4rem;
3053
3113
  align-items: center;
3114
+ margin: 0;
3115
+ }
3116
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
3117
+ height: 4rem;
3054
3118
  padding-top: 1rem;
3055
3119
  padding-bottom: 2rem;
3056
- margin: 0;
3057
3120
  }
3058
3121
 
3059
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
3122
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
3123
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
3060
3124
  max-width: none;
3061
3125
  }
3062
3126
 
@@ -3118,6 +3182,7 @@ fieldset[disabled] .cds--form__helper-text {
3118
3182
  appearance: none;
3119
3183
  background: none;
3120
3184
  cursor: pointer;
3185
+ text-align: start;
3121
3186
  width: 100%;
3122
3187
  outline: 2px solid transparent;
3123
3188
  outline-offset: -2px;
@@ -5011,7 +5076,7 @@ a.cds--overflow-menu-options__btn::before {
5011
5076
  @media (prefers-reduced-motion: no-preference) {
5012
5077
  .c4p--cascade__element,
5013
5078
  .c4p--cascade__col {
5014
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
5079
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
5015
5080
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
5016
5081
  animation-fill-mode: forwards;
5017
5082
  opacity: 0;
@@ -5157,6 +5222,7 @@ a.cds--overflow-menu-options__btn::before {
5157
5222
  appearance: none;
5158
5223
  background: none;
5159
5224
  cursor: pointer;
5225
+ text-align: start;
5160
5226
  width: 100%;
5161
5227
  border-bottom: 1px dotted var(--cds-border-strong);
5162
5228
  border-radius: 0;
@@ -5376,6 +5442,7 @@ a.cds--overflow-menu-options__btn::before {
5376
5442
  appearance: none;
5377
5443
  background: none;
5378
5444
  cursor: pointer;
5445
+ text-align: start;
5379
5446
  width: 100%;
5380
5447
  display: flex;
5381
5448
  text-align: left;
@@ -5583,7 +5650,7 @@ a.cds--overflow-menu-options__btn::before {
5583
5650
  }
5584
5651
 
5585
5652
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5586
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5653
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5587
5654
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
5588
5655
  }
5589
5656
 
@@ -5658,7 +5725,7 @@ a.cds--overflow-menu-options__btn::before {
5658
5725
 
5659
5726
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5660
5727
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5661
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5728
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5662
5729
  color: Highlight;
5663
5730
  outline: 1px solid Highlight;
5664
5731
  }
@@ -5953,26 +6020,6 @@ a.cds--overflow-menu-options__btn::before {
5953
6020
  margin-bottom: 0;
5954
6021
  }
5955
6022
 
5956
- @keyframes side-panel-exit-left {
5957
- 0% {
5958
- opacity: 1;
5959
- transform: translateX(0);
5960
- }
5961
- 100% {
5962
- opacity: 0;
5963
- transform: translateX(calc(-1 * 30rem));
5964
- }
5965
- }
5966
- @keyframes side-panel-exit-right {
5967
- 0% {
5968
- opacity: 1;
5969
- transform: translateX(0);
5970
- }
5971
- 100% {
5972
- opacity: 0;
5973
- transform: translateX(30rem);
5974
- }
5975
- }
5976
6023
  .c4p--side-panel__container {
5977
6024
  --c4p--side-panel--subtitle-opacity: 1;
5978
6025
  --c4p--side-panel--title-container-height: 0;
@@ -5992,8 +6039,6 @@ a.cds--overflow-menu-options__btn::before {
5992
6039
  box-sizing: border-box;
5993
6040
  background-color: var(--cds-layer-01, #f4f4f4);
5994
6041
  color: var(--cds-text-primary, #161616);
5995
- transition: transform 240ms;
5996
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5997
6042
  }
5998
6043
  .c4p--side-panel__container.c4p--side-panel__container--xs {
5999
6044
  width: 16rem;
@@ -6007,37 +6052,13 @@ a.cds--overflow-menu-options__btn::before {
6007
6052
  max-width: 100%;
6008
6053
  }
6009
6054
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
6010
- width: 16rem;
6011
- max-width: 100%;
6012
6055
  right: 0;
6013
6056
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6014
6057
  }
6015
- @keyframes side-panel-entrance-right {
6016
- 0% {
6017
- opacity: 0;
6018
- transform: translateX(16rem);
6019
- }
6020
- 100% {
6021
- opacity: 1;
6022
- transform: translateX(0);
6023
- }
6024
- }
6025
6058
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
6026
- width: 16rem;
6027
- max-width: 100%;
6028
6059
  left: 0;
6029
6060
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6030
6061
  }
6031
- @keyframes side-panel-entrance-left {
6032
- 0% {
6033
- opacity: 0;
6034
- transform: translateX(-16rem);
6035
- }
6036
- 100% {
6037
- opacity: 1;
6038
- transform: translateX(0);
6039
- }
6040
- }
6041
6062
  .c4p--side-panel__container.c4p--side-panel__container--sm {
6042
6063
  width: 20rem;
6043
6064
  max-width: 100%;
@@ -6050,37 +6071,13 @@ a.cds--overflow-menu-options__btn::before {
6050
6071
  max-width: 100%;
6051
6072
  }
6052
6073
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
6053
- width: 20rem;
6054
- max-width: 100%;
6055
6074
  right: 0;
6056
6075
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6057
6076
  }
6058
- @keyframes side-panel-entrance-right {
6059
- 0% {
6060
- opacity: 0;
6061
- transform: translateX(20rem);
6062
- }
6063
- 100% {
6064
- opacity: 1;
6065
- transform: translateX(0);
6066
- }
6067
- }
6068
6077
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
6069
- width: 20rem;
6070
- max-width: 100%;
6071
6078
  left: 0;
6072
6079
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6073
6080
  }
6074
- @keyframes side-panel-entrance-left {
6075
- 0% {
6076
- opacity: 0;
6077
- transform: translateX(-20rem);
6078
- }
6079
- 100% {
6080
- opacity: 1;
6081
- transform: translateX(0);
6082
- }
6083
- }
6084
6081
  .c4p--side-panel__container.c4p--side-panel__container--md {
6085
6082
  width: 30rem;
6086
6083
  max-width: 100%;
@@ -6093,37 +6090,13 @@ a.cds--overflow-menu-options__btn::before {
6093
6090
  max-width: 100%;
6094
6091
  }
6095
6092
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
6096
- width: 30rem;
6097
- max-width: 100%;
6098
6093
  right: 0;
6099
6094
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6100
6095
  }
6101
- @keyframes side-panel-entrance-right {
6102
- 0% {
6103
- opacity: 0;
6104
- transform: translateX(30rem);
6105
- }
6106
- 100% {
6107
- opacity: 1;
6108
- transform: translateX(0);
6109
- }
6110
- }
6111
6096
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
6112
- width: 30rem;
6113
- max-width: 100%;
6114
6097
  left: 0;
6115
6098
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6116
6099
  }
6117
- @keyframes side-panel-entrance-left {
6118
- 0% {
6119
- opacity: 0;
6120
- transform: translateX(-30rem);
6121
- }
6122
- 100% {
6123
- opacity: 1;
6124
- transform: translateX(0);
6125
- }
6126
- }
6127
6100
  .c4p--side-panel__container.c4p--side-panel__container--lg {
6128
6101
  width: 40rem;
6129
6102
  max-width: 100%;
@@ -6136,37 +6109,13 @@ a.cds--overflow-menu-options__btn::before {
6136
6109
  max-width: 100%;
6137
6110
  }
6138
6111
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
6139
- width: 40rem;
6140
- max-width: 100%;
6141
6112
  right: 0;
6142
6113
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6143
6114
  }
6144
- @keyframes side-panel-entrance-right {
6145
- 0% {
6146
- opacity: 0;
6147
- transform: translateX(40rem);
6148
- }
6149
- 100% {
6150
- opacity: 1;
6151
- transform: translateX(0);
6152
- }
6153
- }
6154
6115
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
6155
- width: 40rem;
6156
- max-width: 100%;
6157
6116
  left: 0;
6158
6117
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6159
6118
  }
6160
- @keyframes side-panel-entrance-left {
6161
- 0% {
6162
- opacity: 0;
6163
- transform: translateX(-40rem);
6164
- }
6165
- 100% {
6166
- opacity: 1;
6167
- transform: translateX(0);
6168
- }
6169
- }
6170
6119
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
6171
6120
  width: 75%;
6172
6121
  max-width: 100%;
@@ -6179,37 +6128,13 @@ a.cds--overflow-menu-options__btn::before {
6179
6128
  max-width: 100%;
6180
6129
  }
6181
6130
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
6182
- width: 75%;
6183
- max-width: 100%;
6184
6131
  right: 0;
6185
6132
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6186
6133
  }
6187
- @keyframes side-panel-entrance-right {
6188
- 0% {
6189
- opacity: 0;
6190
- transform: translateX(75%);
6191
- }
6192
- 100% {
6193
- opacity: 1;
6194
- transform: translateX(0);
6195
- }
6196
- }
6197
6134
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
6198
- width: 75%;
6199
- max-width: 100%;
6200
6135
  left: 0;
6201
6136
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6202
6137
  }
6203
- @keyframes side-panel-entrance-left {
6204
- 0% {
6205
- opacity: 0;
6206
- transform: translateX(-75%);
6207
- }
6208
- 100% {
6209
- opacity: 1;
6210
- transform: translateX(0);
6211
- }
6212
- }
6213
6138
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
6214
6139
  /* stylelint-disable-next-line max-nesting-depth */
6215
6140
  }
@@ -6342,10 +6267,7 @@ a.cds--overflow-menu-options__btn::before {
6342
6267
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
6343
6268
  position: fixed;
6344
6269
  z-index: 2;
6345
- top: calc(
6346
- var(--c4p--side-panel--title-text-height) +
6347
- var(--c4p--side-panel--label-text-height) + 3rem
6348
- );
6270
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6349
6271
  background-color: var(--cds-layer-01, #f4f4f4);
6350
6272
  }
6351
6273
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -6360,7 +6282,6 @@ a.cds--overflow-menu-options__btn::before {
6360
6282
  }
6361
6283
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
6362
6284
  position: fixed;
6363
- top: 3rem;
6364
6285
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6365
6286
  }
6366
6287
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -6381,10 +6302,7 @@ a.cds--overflow-menu-options__btn::before {
6381
6302
  }
6382
6303
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
6383
6304
  position: fixed;
6384
- top: calc(
6385
- var(--c4p--side-panel--title-text-height) +
6386
- var(--c4p--side-panel--subtitle-container-height) + 3rem
6387
- );
6305
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
6388
6306
  width: 100%;
6389
6307
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
6390
6308
  }
@@ -6409,8 +6327,7 @@ a.cds--overflow-menu-options__btn::before {
6409
6327
  padding: 0 1rem;
6410
6328
  margin-bottom: 0.5rem;
6411
6329
  background-color: var(--cds-layer-01, #f4f4f4);
6412
- transition: transform 150ms;
6413
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6330
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
6414
6331
  }
6415
6332
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
6416
6333
  min-width: 2rem;
@@ -6541,8 +6458,6 @@ a.cds--overflow-menu-options__btn::before {
6541
6458
  width: 100%;
6542
6459
  height: 100%;
6543
6460
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
6544
- transition: background-color 240ms;
6545
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6546
6461
  }
6547
6462
 
6548
6463
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -6689,7 +6604,7 @@ a.cds--overflow-menu-options__btn::before {
6689
6604
  /* stylelint-disable-next-line function-no-unknown */
6690
6605
  z-index: 9000;
6691
6606
  align-items: flex-end;
6692
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6607
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6693
6608
  }
6694
6609
  @media (prefers-reduced-motion: reduce) {
6695
6610
  .c4p--tearsheet.is-visible {
@@ -8279,7 +8194,6 @@ a.cds--overflow-menu-options__btn::before {
8279
8194
 
8280
8195
  /* stylelint-disable max-nesting-depth */
8281
8196
  .c4p--add-select__selections.cds--structured-list {
8282
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8283
8197
  margin-bottom: 0;
8284
8198
  }
8285
8199
  .c4p--add-select__selections-wrapper {
@@ -8287,8 +8201,11 @@ a.cds--overflow-menu-options__btn::before {
8287
8201
  }
8288
8202
  .c4p--add-select__selections-cell-wrapper {
8289
8203
  display: flex;
8204
+ height: 3rem;
8290
8205
  align-items: center;
8291
8206
  justify-content: space-between;
8207
+ padding: 0 1rem;
8208
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8292
8209
  }
8293
8210
  .c4p--add-select__selections-cell-title {
8294
8211
  display: block;
@@ -8302,17 +8219,21 @@ a.cds--overflow-menu-options__btn::before {
8302
8219
  display: block;
8303
8220
  color: var(--cds-text-secondary, #525252);
8304
8221
  }
8305
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
8222
+ .c4p--add-select__selections-cell {
8223
+ display: flex;
8224
+ flex-direction: column;
8225
+ justify-content: center;
8226
+ }
8227
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
8228
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
8306
8229
  visibility: visible;
8307
8230
  }
8308
8231
  .c4p--add-select__selections-hidden-hover {
8309
8232
  visibility: hidden;
8310
8233
  }
8311
- .c4p--add-select__selections-row-selected {
8312
- background: #e5e5e5;
8313
- }
8314
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
8315
- visibility: visible;
8234
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
8235
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
8236
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
8316
8237
  }
8317
8238
  .c4p--add-select__selections-checkbox {
8318
8239
  display: flex;
@@ -8320,7 +8241,7 @@ a.cds--overflow-menu-options__btn::before {
8320
8241
  }
8321
8242
  .c4p--add-select__selections-checkbox-label-wrapper {
8322
8243
  display: flex;
8323
- margin-left: 0.5rem;
8244
+ margin-left: 1rem;
8324
8245
  }
8325
8246
  .c4p--add-select__selections-checkbox-label-text {
8326
8247
  display: flex;
@@ -8338,6 +8259,13 @@ a.cds--overflow-menu-options__btn::before {
8338
8259
  .c4p--add-select__selections-cell-icon {
8339
8260
  margin-right: 0.5rem;
8340
8261
  }
8262
+ .c4p--add-select__selections-row {
8263
+ border-left: 0.125rem solid transparent;
8264
+ }
8265
+ .c4p--add-select__selections-row-meta--selected {
8266
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
8267
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
8268
+ }
8341
8269
 
8342
8270
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
8343
8271
  color: var(--cds-interactive, #0f62fe);
@@ -8354,10 +8282,21 @@ a.cds--overflow-menu-options__btn::before {
8354
8282
  align-items: flex-end;
8355
8283
  justify-content: space-between;
8356
8284
  }
8285
+ .c4p--add-select__sub-header-multi {
8286
+ padding: 0 1rem;
8287
+ }
8288
+
8289
+ .c4p--add-select .cds--structured-list-row {
8290
+ border-bottom: 0;
8291
+ }
8292
+
8293
+ .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) {
8294
+ border-bottom: 0;
8295
+ }
8357
8296
 
8358
8297
  .c4p--add-select__sidebar-header {
8359
8298
  display: flex;
8360
- padding: 1.5rem 1rem 0.5rem 1rem;
8299
+ padding: 2rem 1rem 0.5rem 1rem;
8361
8300
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8362
8301
  }
8363
8302
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -8383,7 +8322,7 @@ a.cds--overflow-menu-options__btn::before {
8383
8322
  }
8384
8323
 
8385
8324
  .c4p--add-select__sidebar-body {
8386
- padding: 1rem;
8325
+ padding: 0 1rem;
8387
8326
  }
8388
8327
 
8389
8328
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -8416,18 +8355,44 @@ a.cds--overflow-menu-options__btn::before {
8416
8355
  .c4p--add-select__columns {
8417
8356
  display: flex;
8418
8357
  flex-direction: row;
8358
+ flex-grow: 1;
8419
8359
  overflow-x: auto;
8420
8360
  }
8361
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
8362
+ margin-left: 0.5rem;
8363
+ }
8364
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
8365
+ border-left: 0;
8366
+ }
8367
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
8368
+ padding: 0;
8369
+ }
8370
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
8371
+ height: auto;
8372
+ padding: 0 0.5rem;
8373
+ }
8374
+ .c4p--add-select__columns .c4p--add-select__tags {
8375
+ padding: 0 0.5rem;
8376
+ margin-bottom: 0;
8377
+ }
8378
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
8379
+ padding: 0;
8380
+ }
8381
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
8382
+ border-top: 0;
8383
+ }
8421
8384
 
8422
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
8423
- height: 0;
8424
- padding: 0 !important;
8385
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
8386
+ padding: 0 1rem;
8387
+ }
8388
+
8389
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
8390
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8425
8391
  }
8426
8392
 
8427
8393
  .c4p--add-select__column {
8428
8394
  overflow: auto;
8429
- max-width: 15rem;
8430
- flex: 1 0 15rem;
8395
+ flex: 0 0 20rem;
8431
8396
  padding: 1rem;
8432
8397
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8433
8398
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -8445,13 +8410,13 @@ a.cds--overflow-menu-options__btn::before {
8445
8410
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
8446
8411
  }
8447
8412
 
8448
- .c4p--add-select__tag-container {
8413
+ .c4p--add-select__tags {
8449
8414
  display: flex;
8450
8415
  align-items: center;
8451
8416
  margin-top: 1rem;
8452
8417
  margin-bottom: 0.5rem;
8453
8418
  }
8454
- .c4p--add-select__tag-container-label {
8419
+ .c4p--add-select__tags-label {
8455
8420
  margin-right: 0.5rem;
8456
8421
  }
8457
8422
 
@@ -8526,13 +8491,6 @@ button.c4p--add-select__global-filter-toggle--open {
8526
8491
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
8527
8492
  }
8528
8493
 
8529
- .c4p--add-select .cds--structured-list-td {
8530
- height: 3rem;
8531
- padding-top: 0;
8532
- padding-bottom: 0;
8533
- vertical-align: middle;
8534
- }
8535
-
8536
8494
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
8537
8495
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
8538
8496
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -8540,13 +8498,16 @@ button.c4p--add-select__global-filter-toggle--open {
8540
8498
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
8541
8499
  }
8542
8500
 
8543
- .c4p--add-select__tag-container .cds--tag {
8501
+ .c4p--add-select__selections .cds--list-box__menu {
8502
+ left: auto;
8503
+ }
8504
+
8505
+ .c4p--add-select__tags .cds--tag {
8544
8506
  margin: 0;
8545
8507
  }
8546
8508
 
8547
8509
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
8548
- max-width: 29rem;
8549
- flex: 0 0 50%;
8510
+ flex-basis: 22.5rem;
8550
8511
  }
8551
8512
 
8552
8513
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -8558,6 +8519,10 @@ button.c4p--add-select__global-filter-toggle--open {
8558
8519
  flex-direction: column;
8559
8520
  }
8560
8521
 
8522
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
8523
+ max-width: 11.25rem;
8524
+ }
8525
+
8561
8526
  .c4p--add-select .c4p--add-select__items-label {
8562
8527
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
8563
8528
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -8598,19 +8563,46 @@ button.c4p--add-select__global-filter-toggle--open {
8598
8563
  padding-left: 0.5rem;
8599
8564
  }
8600
8565
 
8601
- .cds--tooltip,
8602
- .cds--overflow-menu-options {
8603
- z-index: 9000;
8566
+ .c4p--add-select__multi .c4p--empty-state {
8567
+ max-width: 16rem;
8568
+ margin-top: 3rem;
8604
8569
  }
8605
8570
 
8606
- @keyframes fade-in {
8607
- 0% {
8608
- opacity: 0;
8609
- transform: translateY(-38.5rem);
8610
- }
8611
- 100% {
8612
- opacity: 1;
8613
- transform: translateY(0);
8571
+ .c4p--add-select .cds--accordion__arrow {
8572
+ transform: rotate(0deg);
8573
+ }
8574
+
8575
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
8576
+ transform: rotate(90deg);
8577
+ }
8578
+
8579
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
8580
+ margin: 0 0 0 1rem;
8581
+ }
8582
+
8583
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
8584
+ margin: 0 1rem 0 0.5rem;
8585
+ }
8586
+
8587
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
8588
+ padding-top: 0;
8589
+ padding-bottom: 0;
8590
+ margin-top: 0.5rem;
8591
+ }
8592
+
8593
+ .c4p--add-select .cds--tooltip,
8594
+ .c4p--add-select .cds--overflow-menu-options {
8595
+ z-index: 9000;
8596
+ }
8597
+
8598
+ @keyframes fade-in {
8599
+ 0% {
8600
+ opacity: 0;
8601
+ transform: translateY(-38.5rem);
8602
+ }
8603
+ 100% {
8604
+ opacity: 1;
8605
+ transform: translateY(0);
8614
8606
  }
8615
8607
  }
8616
8608
  @keyframes fade-out {
@@ -8744,6 +8736,10 @@ button.c4p--add-select__global-filter-toggle--open {
8744
8736
  --cds-helper-text-01-font-size: 0.75rem;
8745
8737
  --cds-helper-text-01-line-height: 1.33333;
8746
8738
  --cds-helper-text-01-letter-spacing: 0.32px;
8739
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8740
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8741
+ --cds-helper-text-02-line-height: 1.28572;
8742
+ --cds-helper-text-02-letter-spacing: 0.16px;
8747
8743
  --cds-body-short-01-font-size: 0.875rem;
8748
8744
  --cds-body-short-01-font-weight: 400;
8749
8745
  --cds-body-short-01-line-height: 1.28572;
@@ -8997,8 +8993,7 @@ button.c4p--add-select__global-filter-toggle--open {
8997
8993
  max-height: 38.5rem;
8998
8994
  background-color: var(--cds-background, #ffffff);
8999
8995
  color: var(--cds-text-primary, #161616);
9000
- transition: transform 110ms;
9001
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
8996
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
9002
8997
  }
9003
8998
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
9004
8999
  position: sticky;
@@ -9072,8 +9067,7 @@ button.c4p--add-select__global-filter-toggle--open {
9072
9067
  background-color: var(--cds-background, #ffffff);
9073
9068
  cursor: pointer;
9074
9069
  text-align: left;
9075
- transition: background-color 240ms;
9076
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9070
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9077
9071
  }
9078
9072
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
9079
9073
  margin-bottom: 0.25rem;
@@ -9186,8 +9180,7 @@ button.c4p--add-select__global-filter-toggle--open {
9186
9180
  margin: 0 auto;
9187
9181
  background-color: var(--cds-layer-02, #ffffff);
9188
9182
  content: "";
9189
- transition: background-color 240ms;
9190
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9183
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9191
9184
  }
9192
9185
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
9193
9186
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -12290,10 +12283,6 @@ button.c4p--add-select__global-filter-toggle--open {
12290
12283
  padding-right: 1rem;
12291
12284
  }
12292
12285
 
12293
- .c4p--remove-modal .cds--modal-close {
12294
- display: none;
12295
- }
12296
-
12297
12286
  .c4p--remove-modal__body {
12298
12287
  padding-right: 20%;
12299
12288
  margin-bottom: 1rem;
@@ -13036,6 +13025,7 @@ button.c4p--add-select__global-filter-toggle--open {
13036
13025
  appearance: none;
13037
13026
  background: none;
13038
13027
  cursor: pointer;
13028
+ text-align: start;
13039
13029
  outline: 2px solid transparent;
13040
13030
  outline-offset: -2px;
13041
13031
  position: absolute;
@@ -13498,13 +13488,13 @@ button.c4p--add-select__global-filter-toggle--open {
13498
13488
  .cds--popover--left-top .cds--popover-content {
13499
13489
  top: -50%;
13500
13490
  right: 100%;
13501
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
13491
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
13502
13492
  }
13503
13493
 
13504
13494
  .cds--popover--left-bottom .cds--popover-content {
13505
13495
  right: 100%;
13506
13496
  bottom: -50%;
13507
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
13497
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
13508
13498
  }
13509
13499
 
13510
13500
  .cds--popover--left .cds--popover-content::before,
@@ -13725,6 +13715,10 @@ button.c4p--add-select__global-filter-toggle--open {
13725
13715
  --cds-helper-text-01-font-size: 0.75rem;
13726
13716
  --cds-helper-text-01-line-height: 1.33333;
13727
13717
  --cds-helper-text-01-letter-spacing: 0.32px;
13718
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
13719
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
13720
+ --cds-helper-text-02-line-height: 1.28572;
13721
+ --cds-helper-text-02-letter-spacing: 0.16px;
13728
13722
  --cds-body-short-01-font-size: 0.875rem;
13729
13723
  --cds-body-short-01-font-weight: 400;
13730
13724
  --cds-body-short-01-line-height: 1.28572;
@@ -14142,6 +14136,10 @@ button.c4p--add-select__global-filter-toggle--open {
14142
14136
  --cds-helper-text-01-font-size: 0.75rem;
14143
14137
  --cds-helper-text-01-line-height: 1.33333;
14144
14138
  --cds-helper-text-01-letter-spacing: 0.32px;
14139
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
14140
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
14141
+ --cds-helper-text-02-line-height: 1.28572;
14142
+ --cds-helper-text-02-letter-spacing: 0.16px;
14145
14143
  --cds-body-short-01-font-size: 0.875rem;
14146
14144
  --cds-body-short-01-font-weight: 400;
14147
14145
  --cds-body-short-01-line-height: 1.28572;
@@ -14948,7 +14946,9 @@ button.c4p--add-select__global-filter-toggle--open {
14948
14946
  display: inline-block;
14949
14947
  overflow: hidden;
14950
14948
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14951
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14949
+ max-width: calc(
14950
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
14951
+ );
14952
14952
  min-height: var(--c4p--inline-edit--size);
14953
14953
  /* stylelint-disable-next-line carbon/layout-token-use */
14954
14954
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -15151,6 +15151,74 @@ button.c4p--add-select__global-filter-toggle--open {
15151
15151
  color: var(--cds-support-error, #da1e28);
15152
15152
  }
15153
15153
 
15154
+ .c4p--inline-edit-v2 {
15155
+ display: flex;
15156
+ align-items: center;
15157
+ background: transparent;
15158
+ cursor: pointer;
15159
+ }
15160
+
15161
+ .c4p--inline-edit-v2-readonly {
15162
+ cursor: not-allowed;
15163
+ }
15164
+
15165
+ .c4p--inline-edit-v2:hover {
15166
+ background: var(--cds-field-01, #f4f4f4);
15167
+ }
15168
+
15169
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
15170
+ visibility: visible;
15171
+ }
15172
+
15173
+ .c4p--inline-edit-v2__btn-edit {
15174
+ visibility: hidden;
15175
+ }
15176
+
15177
+ .c4p--inline-edit-v2-focused {
15178
+ background: var(--cds-field-01, #f4f4f4);
15179
+ outline: 2px solid var(--cds-focus, #0f62fe);
15180
+ }
15181
+
15182
+ .c4p--inline-edit-v2__text-input {
15183
+ flex: 1;
15184
+ }
15185
+
15186
+ .c4p--inline-edit-v2__text-input-label {
15187
+ display: none;
15188
+ }
15189
+
15190
+ .c4p--inline-edit-v2__warning-icon {
15191
+ /* stylelint-disable-next-line carbon/layout-token-use */
15192
+ margin-right: 0.4375rem;
15193
+ color: var(--cds-support-error, #da1e28);
15194
+ }
15195
+
15196
+ .c4p--inline-edit-v2__warning-text {
15197
+ font-size: var(--cds-label-01-font-size, 0.75rem);
15198
+ font-weight: var(--cds-label-01-font-weight, 400);
15199
+ line-height: var(--cds-label-01-line-height, 1.33333);
15200
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15201
+ margin-top: 0.5rem;
15202
+ color: var(--cds-support-error, #da1e28);
15203
+ }
15204
+
15205
+ .c4p--inline-edit-v2__text-input.cds--text-input {
15206
+ border: none;
15207
+ background: transparent;
15208
+ cursor: pointer;
15209
+ outline: none;
15210
+ }
15211
+
15212
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
15213
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
15214
+ cursor: not-allowed;
15215
+ }
15216
+
15217
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
15218
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
15219
+ outline: none;
15220
+ }
15221
+
15154
15222
  .c4p--data-spreadsheet {
15155
15223
  --c4p--data-spreadsheet--total-width: 0;
15156
15224
  display: inline-block;
@@ -15439,6 +15507,11 @@ button.c4p--add-select__global-filter-toggle--open {
15439
15507
  align-items: center;
15440
15508
  color: var(--cds-text-primary, #161616);
15441
15509
  }
15510
+ .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 {
15511
+ position: sticky;
15512
+ z-index: 1;
15513
+ left: 0;
15514
+ }
15442
15515
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
15443
15516
  align-items: center;
15444
15517
  padding-top: 0;
@@ -15455,6 +15528,11 @@ button.c4p--add-select__global-filter-toggle--open {
15455
15528
  align-items: center;
15456
15529
  padding-top: 0;
15457
15530
  }
15531
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
15532
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
15533
+ position: sticky;
15534
+ left: 0;
15535
+ }
15458
15536
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
15459
15537
  display: flex;
15460
15538
  height: 100%;
@@ -15514,9 +15592,12 @@ button.c4p--add-select__global-filter-toggle--open {
15514
15592
  height: 100%;
15515
15593
  overflow-x: auto;
15516
15594
  }
15517
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
15518
- overflow: hidden;
15595
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
15596
+ display: flex;
15597
+ overflow: auto;
15519
15598
  max-height: 100%;
15599
+ flex-direction: column;
15600
+ background-color: var(--cds-layer-01, #f4f4f4);
15520
15601
  }
15521
15602
  .c4p--datagrid__grid-container .c4p--datagrid__head {
15522
15603
  display: flex;
@@ -15547,6 +15628,12 @@ button.c4p--add-select__global-filter-toggle--open {
15547
15628
  text-overflow: ellipsis;
15548
15629
  white-space: nowrap;
15549
15630
  }
15631
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
15632
+ display: -webkit-box;
15633
+ -webkit-box-orient: vertical;
15634
+ -webkit-line-clamp: 2;
15635
+ white-space: initial;
15636
+ }
15550
15637
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
15551
15638
  display: flex;
15552
15639
  overflow: hidden;
@@ -15598,10 +15685,6 @@ button.c4p--add-select__global-filter-toggle--open {
15598
15685
  flex: 1 1 auto;
15599
15686
  }
15600
15687
 
15601
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
15602
- border-bottom: none;
15603
- }
15604
-
15605
15688
  .c4p--datagrid__resizer {
15606
15689
  position: absolute;
15607
15690
  z-index: 1;
@@ -15641,6 +15724,12 @@ button.c4p--add-select__global-filter-toggle--open {
15641
15724
  .c4p--datagrid__head-hidden-select-all {
15642
15725
  padding-right: 2.5rem;
15643
15726
  }
15727
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15728
+ position: sticky;
15729
+ z-index: 1;
15730
+ left: 0;
15731
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
15732
+ }
15644
15733
 
15645
15734
  .c4p--datagrid__simple-body {
15646
15735
  position: relative;
@@ -15664,15 +15753,6 @@ button.c4p--add-select__global-filter-toggle--open {
15664
15753
  min-width: 0 !important;
15665
15754
  }
15666
15755
 
15667
- .c4p--datagrid__table-simple::-webkit-scrollbar {
15668
- width: 6px;
15669
- background-color: var(--cds-background, #ffffff);
15670
- }
15671
-
15672
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
15673
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
15674
- }
15675
-
15676
15756
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
15677
15757
  overflow: auto;
15678
15758
  }
@@ -15734,8 +15814,22 @@ button.c4p--add-select__global-filter-toggle--open {
15734
15814
  max-height: 100%;
15735
15815
  }
15736
15816
 
15737
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
15738
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
15817
+ .c4p--datagrid__carbon-row-expanded {
15818
+ position: relative;
15819
+ }
15820
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
15821
+ position: absolute;
15822
+ z-index: 2;
15823
+ /* stylelint-disable-next-line carbon/layout-token-use */
15824
+ top: var(--c4p--datagrid--row-height);
15825
+ /* stylelint-disable-next-line carbon/layout-token-use */
15826
+ left: calc(
15827
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
15828
+ );
15829
+ width: 1px;
15830
+ height: var(--c4p--datagrid--indicator-height);
15831
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
15832
+ content: "";
15739
15833
  }
15740
15834
 
15741
15835
  .c4p--datagrid .cds--data-table-header {
@@ -15782,6 +15876,7 @@ button.c4p--add-select__global-filter-toggle--open {
15782
15876
 
15783
15877
  .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
15784
15878
  position: absolute;
15879
+ top: 0;
15785
15880
  left: 0;
15786
15881
  width: 0.25rem;
15787
15882
  height: 100%;
@@ -15820,10 +15915,70 @@ button.c4p--add-select__global-filter-toggle--open {
15820
15915
  margin: 0;
15821
15916
  }
15822
15917
 
15918
+ .c4p--datagrid .c4p--button-menu {
15919
+ height: 3rem;
15920
+ }
15921
+
15922
+ .c4p--datagrid .c4p--datagrid__row-size-button {
15923
+ display: flex;
15924
+ width: 3rem;
15925
+ height: 3rem;
15926
+ justify-content: center;
15927
+ }
15928
+
15929
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
15930
+ width: 10px;
15931
+ height: 7px;
15932
+ }
15933
+
15934
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
15935
+ background: var(--cds-layer);
15936
+ }
15937
+
15938
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
15939
+ border-radius: 5px;
15940
+ }
15941
+
15942
+ .c4p--datagrid__virtualScrollContainer {
15943
+ width: 100%;
15944
+ }
15945
+
15946
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
15947
+ overflow: hidden;
15948
+ height: 100vh;
15949
+ }
15950
+
15951
+ .c4p--datagrid .cds--modal {
15952
+ width: 100%;
15953
+ }
15954
+
15955
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
15956
+ flex-shrink: 0;
15957
+ background-color: var(--cds-interactive, #0f62fe);
15958
+ }
15959
+
15960
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
15961
+ fill: var(--cds-background, #ffffff);
15962
+ }
15963
+
15964
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
15965
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
15966
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
15967
+ background-color: var(--cds-button-primary-hover, #0050e6);
15968
+ }
15969
+
15970
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
15971
+ background-color: transparent;
15972
+ }
15973
+
15974
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
15975
+ position: absolute;
15976
+ }
15977
+
15823
15978
  /*
15824
15979
  * Licensed Materials - Property of IBM
15825
15980
  * 5724-Q36
15826
- * (c) Copyright IBM Corp. 2020 - 2021
15981
+ * (c) Copyright IBM Corp. 2020 - 2022
15827
15982
  * US Government Users Restricted Rights - Use, duplication or disclosure
15828
15983
  * restricted by GSA ADP Schedule Contract with IBM Corp.
15829
15984
  */
@@ -15834,6 +15989,33 @@ button.c4p--add-select__global-filter-toggle--open {
15834
15989
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15835
15990
  }
15836
15991
 
15992
+ .c4p--datagrid .c4p--datagrid__expander-icon {
15993
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15994
+ }
15995
+
15996
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
15997
+ transform: rotate(90deg);
15998
+ }
15999
+
16000
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
16001
+ border-bottom: none;
16002
+ }
16003
+
16004
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
16005
+ position: relative;
16006
+ }
16007
+
16008
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
16009
+ position: absolute;
16010
+ /* stylelint-disable-next-line carbon/layout-token-use */
16011
+ top: -1px;
16012
+ left: 0;
16013
+ width: 100%;
16014
+ height: 1px;
16015
+ background-color: var(--cds-border-subtle);
16016
+ content: "";
16017
+ }
16018
+
15837
16019
  /*
15838
16020
  * Licensed Materials - Property of IBM
15839
16021
  * 5724-Q36
@@ -15962,14 +16144,36 @@ button.c4p--add-select__global-filter-toggle--open {
15962
16144
  /* stylelint-disable-next-line declaration-no-important */
15963
16145
  position: sticky !important;
15964
16146
  right: 0;
15965
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16147
+ display: flex;
16148
+ align-items: center;
16149
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15966
16150
  }
15967
16151
 
15968
16152
  .c4p--datagrid__right-sticky-column-header {
15969
16153
  /* stylelint-disable-next-line declaration-no-important */
15970
16154
  position: sticky !important;
15971
16155
  right: 0;
15972
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16156
+ }
16157
+
16158
+ .c4p--datagrid__left-sticky-column-cell {
16159
+ /* stylelint-disable-next-line declaration-no-important */
16160
+ position: sticky !important;
16161
+ left: 0;
16162
+ display: flex;
16163
+ align-items: center;
16164
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16165
+ }
16166
+
16167
+ .c4p--datagrid__left-sticky-column-header {
16168
+ /* stylelint-disable-next-line declaration-no-important */
16169
+ position: sticky !important;
16170
+ z-index: 1;
16171
+ left: 0;
16172
+ }
16173
+
16174
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16175
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16176
+ left: 2.5rem;
15973
16177
  }
15974
16178
 
15975
16179
  .c4p--datagrid__sticky-noShadow {
@@ -15985,6 +16189,12 @@ button.c4p--add-select__global-filter-toggle--open {
15985
16189
  right: 6px !important;
15986
16190
  }
15987
16191
 
16192
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
16193
+ position: sticky;
16194
+ z-index: 1;
16195
+ left: 0;
16196
+ }
16197
+
15988
16198
  /*
15989
16199
  * Licensed Materials - Property of IBM
15990
16200
  * 5724-Q36
@@ -16007,6 +16217,18 @@ button.c4p--add-select__global-filter-toggle--open {
16007
16217
  margin-bottom: 0.5rem;
16008
16218
  }
16009
16219
 
16220
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
16221
+ cursor: not-allowed;
16222
+ }
16223
+
16224
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
16225
+ pointer-events: none;
16226
+ }
16227
+
16228
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
16229
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
16230
+ }
16231
+
16010
16232
  /*
16011
16233
  * Licensed Materials - Property of IBM
16012
16234
  * 5724-Q36
@@ -16018,21 +16240,30 @@ button.c4p--add-select__global-filter-toggle--open {
16018
16240
  position: inherit;
16019
16241
  display: flex;
16020
16242
  flex-flow: column;
16021
- /* stylelint-disable-next-line declaration-no-important */
16022
- padding-top: 0 !important;
16243
+ padding: 0;
16244
+ margin: 0;
16245
+ }
16246
+
16247
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16248
+ margin-bottom: 0;
16023
16249
  }
16024
16250
 
16025
- .c4p--datagrid__customize-columns-checkbox {
16251
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16026
16252
  display: flex;
16027
16253
  justify-content: center;
16028
- /* stylelint-disable-next-line declaration-no-important */
16029
- margin-bottom: 0 !important;
16030
16254
  }
16031
16255
 
16032
16256
  .c4p--datagrid__customize-columns-modal--actions {
16033
16257
  display: flex;
16258
+ height: 3rem;
16034
16259
  flex-flow: row;
16035
- margin-bottom: 1.5rem;
16260
+ background-color: var(--cds-field-02, #ffffff);
16261
+ }
16262
+
16263
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
16264
+ height: 3rem;
16265
+ padding-left: 2.5rem;
16266
+ border-bottom: none;
16036
16267
  }
16037
16268
 
16038
16269
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -16040,6 +16271,7 @@ button.c4p--add-select__global-filter-toggle--open {
16040
16271
  }
16041
16272
 
16042
16273
  .c4p--datagrid__customize-columns-instructions {
16274
+ padding-left: 1rem;
16043
16275
  margin-bottom: 1.5rem;
16044
16276
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
16045
16277
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -16053,6 +16285,36 @@ button.c4p--add-select__global-filter-toggle--open {
16053
16285
  overflow: auto;
16054
16286
  }
16055
16287
 
16288
+ .c4p--datagrid__customize-columns-select-all {
16289
+ display: flex;
16290
+ height: 3rem;
16291
+ align-items: center;
16292
+ padding-left: 2.5rem;
16293
+ border-bottom: 1px solid var(--cds-layer-active);
16294
+ background-color: var(--cds-layer-01, #f4f4f4);
16295
+ }
16296
+
16297
+ .c4p--datagrid__customize-columns-select-all:hover {
16298
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
16299
+ }
16300
+
16301
+ .c4p--datagrid__customize-columns-select-all-selected {
16302
+ display: flex;
16303
+ height: 3rem;
16304
+ align-items: center;
16305
+ padding-left: 2.5rem;
16306
+ border-bottom: 1px solid var(--cds-layer-active);
16307
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
16308
+ }
16309
+
16310
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
16311
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
16312
+ }
16313
+
16314
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
16315
+ margin-bottom: 0;
16316
+ }
16317
+
16056
16318
  /*
16057
16319
  * Licensed Materials - Property of IBM
16058
16320
  * 5724-Q36
@@ -16061,7 +16323,6 @@ button.c4p--add-select__global-filter-toggle--open {
16061
16323
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16062
16324
  */
16063
16325
  .c4p--datagrid__row-size-dropdown {
16064
- position: absolute;
16065
16326
  padding: 1rem;
16066
16327
  background-color: var(--cds-background, #ffffff);
16067
16328
  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));
@@ -16072,6 +16333,86 @@ button.c4p--add-select__global-filter-toggle--open {
16072
16333
  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));
16073
16334
  }
16074
16335
 
16336
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
16337
+ /* stylelint-disable-next-line carbon/layout-token-use */
16338
+ left: -4px;
16339
+ }
16340
+
16341
+ /*
16342
+ * Licensed Materials - Property of IBM
16343
+ * 5724-Q36
16344
+ * (c) Copyright IBM Corp. 2022
16345
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16346
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16347
+ */
16348
+ .c4p--datagrid-filter-flyout__container {
16349
+ position: relative;
16350
+ }
16351
+
16352
+ .c4p--datagrid-filter-flyout {
16353
+ position: absolute;
16354
+ top: 3rem;
16355
+ right: 0;
16356
+ display: none;
16357
+ width: 40.125rem;
16358
+ background-color: var(--cds-layer-02, #ffffff);
16359
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
16360
+ }
16361
+
16362
+ .c4p--datagrid-filter-flyout--open {
16363
+ display: grid;
16364
+ }
16365
+
16366
+ .c4p--datagrid-filter-flyout--batch {
16367
+ min-height: 21.625rem;
16368
+ grid-template-rows: 1fr 3rem;
16369
+ }
16370
+
16371
+ .c4p--datagrid-filter-flyout--instant {
16372
+ min-height: 17.625rem;
16373
+ grid-template-rows: 1fr;
16374
+ }
16375
+
16376
+ .c4p--datagrid-filter-flyout__inner-container {
16377
+ padding: 1rem 1rem 3rem 1rem;
16378
+ }
16379
+
16380
+ .c4p--datagrid-filter-flyout__inner-container::before {
16381
+ position: absolute;
16382
+ top: -0.4375rem;
16383
+ right: 1px;
16384
+ display: block;
16385
+ width: 2.875rem;
16386
+ height: 0.9375rem;
16387
+ background-color: var(--cds-layer-02, #ffffff);
16388
+ content: "";
16389
+ }
16390
+
16391
+ .c4p--datagrid-filter-flyout__title {
16392
+ display: block;
16393
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16394
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
16395
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
16396
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
16397
+ margin-bottom: 1.5rem;
16398
+ }
16399
+
16400
+ .c4p--datagrid-filter-flyout__filters {
16401
+ display: grid;
16402
+ gap: 1rem 2rem;
16403
+ grid-template-columns: 1fr 1fr;
16404
+ }
16405
+
16406
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
16407
+ position: relative;
16408
+ background-color: var(--cds-layer-02, #ffffff);
16409
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
16410
+ }
16411
+
16412
+ .c4p--datagrid-filter-flyout .cds--fieldset {
16413
+ margin-bottom: 0;
16414
+ }
16415
+
16075
16416
  /*
16076
16417
  * Licensed Materials - Property of IBM
16077
16418
  * 5724-Q36
@@ -16099,8 +16440,54 @@ th.c4p--datagrid__select-all-toggle-on.button {
16099
16440
  margin-left: 0.125rem;
16100
16441
  }
16101
16442
 
16102
- .c4p--datagrid__expanded-row-content {
16103
- padding: 1rem 1rem 1.5rem 4rem;
16443
+ /*
16444
+ * Licensed Materials - Property of IBM
16445
+ * 5724-Q36
16446
+ * (c) Copyright IBM Corp. 2022
16447
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16448
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16449
+ */
16450
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
16451
+ position: relative;
16452
+ padding: 1rem 1rem 1.5rem 3rem;
16453
+ }
16454
+
16455
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
16456
+ position: absolute;
16457
+ /* stylelint-disable-next-line carbon/layout-token-use */
16458
+ top: -1px;
16459
+ right: 0;
16460
+ width: calc(100% - 3rem);
16461
+ height: 1px;
16462
+ background-color: var(--cds-layer-accent);
16463
+ content: "";
16464
+ }
16465
+
16466
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
16467
+ position: absolute;
16468
+ bottom: 0;
16469
+ left: 0;
16470
+ width: 100%;
16471
+ height: 1px;
16472
+ background-color: var(--cds-layer-accent);
16473
+ content: "";
16474
+ }
16475
+
16476
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
16477
+ padding: 0.5rem;
16478
+ padding-right: 0;
16479
+ }
16480
+
16481
+ .c4p--datagrid__row-expander.cds--btn {
16482
+ display: flex;
16483
+ width: 2rem;
16484
+ height: 2rem;
16485
+ min-height: 2rem;
16486
+ justify-content: center;
16487
+ padding: 0;
16488
+ }
16489
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
16490
+ fill: var(--cds-layer-selected-inverse, #161616);
16104
16491
  }
16105
16492
 
16106
16493
  /*
@@ -16127,14 +16514,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16127
16514
 
16128
16515
  .c4p--datagrid__draggable-handleHolder {
16129
16516
  display: flex;
16130
- height: 2rem;
16131
- padding-left: 0.25rem;
16132
- margin-bottom: 0.5rem;
16133
- background: var(--cds-layer-02, #ffffff);
16517
+ height: 3rem;
16518
+ padding-left: 1rem;
16519
+ border-bottom: 1px solid var(--cds-layer-active);
16520
+ background-color: var(--cds-layer);
16521
+ }
16522
+
16523
+ .c4p--datagrid__draggable-handleHolder:hover {
16524
+ background-color: var(--cds-layer-hover);
16525
+ }
16526
+
16527
+ .c4p--datagrid__draggable-handleHolder-selected {
16528
+ display: flex;
16529
+ height: 3rem;
16530
+ padding-left: 1rem;
16531
+ border-bottom: 1px solid var(--cds-layer-active);
16532
+ background-color: var(--cds-layer-selected);
16533
+ }
16534
+
16535
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
16536
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16134
16537
  }
16135
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
16538
+
16539
+ .c4p--datagrid__draggable-handleHolder-isOver {
16136
16540
  border: 2px dashed var(--cds-focus, #0f62fe);
16137
- background-color: var(--cds-highlight, #d0e2ff);
16541
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16138
16542
  }
16139
16543
 
16140
16544
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -16142,7 +16546,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16142
16546
  width: 100%;
16143
16547
  }
16144
16548
 
16145
- .c4p--datagrid__draggable-handleHolder--grabbed {
16549
+ .c4p--datagrid__draggable-handleHolder-grabbed {
16146
16550
  background-color: var(--cds-highlight, #d0e2ff);
16147
16551
  color: var(--cds-text-primary, #161616);
16148
16552
  }
@@ -16159,6 +16563,365 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16159
16563
  white-space: nowrap;
16160
16564
  }
16161
16565
 
16566
+ /*
16567
+ * Licensed Materials - Property of IBM
16568
+ * 5724-Q36
16569
+ * (c) Copyright IBM Corp. 2021
16570
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16571
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16572
+ */
16573
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
16574
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
16575
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16576
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
16577
+ height: 1.5rem;
16578
+ }
16579
+
16580
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
16581
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
16582
+ height: calc(1.5rem - 0.25rem);
16583
+ }
16584
+
16585
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
16586
+ max-height: none;
16587
+ }
16588
+
16589
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
16590
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
16591
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16592
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
16593
+ height: 2rem;
16594
+ }
16595
+
16596
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
16597
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
16598
+ height: calc(2rem - 0.25rem);
16599
+ }
16600
+
16601
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
16602
+ max-height: none;
16603
+ }
16604
+
16605
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
16606
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
16607
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16608
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
16609
+ height: 2.5rem;
16610
+ }
16611
+
16612
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
16613
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
16614
+ height: calc(2.5rem - 0.25rem);
16615
+ }
16616
+
16617
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
16618
+ max-height: none;
16619
+ }
16620
+
16621
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
16622
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
16623
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16624
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
16625
+ height: 3rem;
16626
+ }
16627
+
16628
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
16629
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
16630
+ height: calc(3rem - 0.25rem);
16631
+ }
16632
+
16633
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
16634
+ max-height: none;
16635
+ }
16636
+
16637
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
16638
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
16639
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16640
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
16641
+ height: 4rem;
16642
+ }
16643
+
16644
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
16645
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
16646
+ height: calc(4rem - 0.25rem);
16647
+ }
16648
+
16649
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
16650
+ max-height: none;
16651
+ }
16652
+
16653
+ .c4p--datagrid {
16654
+ --c4p--datagrid--grid-header-height: 0;
16655
+ }
16656
+
16657
+ .c4p--datagrid__inline-edit-cell {
16658
+ display: flex;
16659
+ height: 100%;
16660
+ align-items: center;
16661
+ }
16662
+
16663
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
16664
+ display: flex;
16665
+ align-items: center;
16666
+ }
16667
+
16668
+ .c4p--datagrid__inline-edit--outer-cell-button {
16669
+ width: 100%;
16670
+ height: calc(100% + 2px);
16671
+ }
16672
+
16673
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
16674
+ position: relative;
16675
+ display: flex;
16676
+ width: 100%;
16677
+ height: 100%;
16678
+ align-items: center;
16679
+ justify-content: space-between;
16680
+ padding-left: 1rem;
16681
+ color: var(--cds-text-secondary, #525252);
16682
+ cursor: pointer;
16683
+ outline: 0;
16684
+ }
16685
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
16686
+ height: 1rem;
16687
+ padding-right: 1rem;
16688
+ }
16689
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
16690
+ padding-left: 0;
16691
+ cursor: default;
16692
+ }
16693
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
16694
+ height: 1rem;
16695
+ fill: var(--cds-icon-secondary, #525252);
16696
+ }
16697
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
16698
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16699
+ }
16700
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
16701
+ justify-content: flex-start;
16702
+ }
16703
+ .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) {
16704
+ /* stylelint-disable-next-line */
16705
+ }
16706
+ .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 {
16707
+ display: none;
16708
+ }
16709
+ .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 {
16710
+ display: block;
16711
+ }
16712
+
16713
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
16714
+ background-color: var(--cds-layer-active);
16715
+ color: var(--cds-text-primary, #161616);
16716
+ }
16717
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
16718
+ fill: var(--cds-icon-primary, #161616);
16719
+ }
16720
+
16721
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
16722
+ background-color: var(--cds-layer-active);
16723
+ color: var(--cds-text-primary, #161616);
16724
+ cursor: text;
16725
+ }
16726
+
16727
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16728
+ /* stylelint-disable-next-line carbon/theme-token-use */
16729
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16730
+ outline-offset: calc(-1 * 0.125rem);
16731
+ }
16732
+ @media screen and (prefers-contrast) {
16733
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16734
+ outline-style: dotted;
16735
+ }
16736
+ }
16737
+
16738
+ .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) {
16739
+ color: var(--cds-button-disabled, #c6c6c6);
16740
+ cursor: not-allowed;
16741
+ }
16742
+
16743
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
16744
+ overflow: hidden;
16745
+ padding-right: 1rem;
16746
+ text-overflow: ellipsis;
16747
+ white-space: nowrap;
16748
+ }
16749
+
16750
+ .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 {
16751
+ padding-right: 3rem;
16752
+ }
16753
+
16754
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
16755
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
16756
+ height: 3rem;
16757
+ }
16758
+
16759
+ .c4p--datagrid__inline-edit-button-icon {
16760
+ position: absolute;
16761
+ right: 1rem;
16762
+ }
16763
+
16764
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
16765
+ position: relative;
16766
+ padding: 0;
16767
+ }
16768
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
16769
+ padding-left: 1rem;
16770
+ }
16771
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
16772
+ min-width: auto;
16773
+ padding-right: 1rem;
16774
+ }
16775
+
16776
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
16777
+ padding-bottom: 1rem;
16778
+ padding-left: 1rem;
16779
+ }
16780
+
16781
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16782
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
16783
+ width: inherit;
16784
+ }
16785
+
16786
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16787
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16788
+ width: 100%;
16789
+ height: 3rem;
16790
+ max-height: none;
16791
+ }
16792
+
16793
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
16794
+ width: inherit;
16795
+ }
16796
+
16797
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16798
+ overflow: hidden;
16799
+ width: 100%;
16800
+ max-width: none;
16801
+ padding-right: 2rem;
16802
+ text-overflow: ellipsis;
16803
+ white-space: nowrap;
16804
+ }
16805
+
16806
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
16807
+ border-top-color: var(--cds-layer-hover);
16808
+ background-color: var(--cds-layer-hover);
16809
+ }
16810
+
16811
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
16812
+ position: absolute;
16813
+ z-index: 2;
16814
+ bottom: 0;
16815
+ left: 0;
16816
+ width: 2px;
16817
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16818
+ background-color: var(--cds-link-inverse, #78a9ff);
16819
+ content: "";
16820
+ }
16821
+
16822
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
16823
+ position: absolute;
16824
+ z-index: 2;
16825
+ right: 0;
16826
+ bottom: 0;
16827
+ width: 2px;
16828
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16829
+ background-color: var(--cds-link-inverse, #78a9ff);
16830
+ content: "";
16831
+ }
16832
+
16833
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
16834
+ position: absolute;
16835
+ z-index: 2;
16836
+ top: 0;
16837
+ right: 0;
16838
+ left: 0;
16839
+ width: var(--c4p--datagrid--grid-width);
16840
+ height: 2px;
16841
+ background-color: var(--cds-link-inverse, #78a9ff);
16842
+ }
16843
+
16844
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
16845
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
16846
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
16847
+ }
16848
+
16849
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
16850
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
16851
+ outline-offset: -2px;
16852
+ }
16853
+
16854
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
16855
+ padding-top: 0.125rem;
16856
+ }
16857
+
16858
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
16859
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
16860
+ position: absolute;
16861
+ z-index: 3;
16862
+ top: calc(100% - 0.125rem);
16863
+ width: 100%;
16864
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
16865
+ margin: 0;
16866
+ background-color: var(--cds-layer-01, #f4f4f4);
16867
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
16868
+ outline-offset: calc(-1 * 0.125rem);
16869
+ }
16870
+
16871
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
16872
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16873
+ }
16874
+
16875
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
16876
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
16877
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16878
+ z-index: 4;
16879
+ top: calc(100% + 0.75rem + 0.125rem);
16880
+ right: 0.5rem;
16881
+ }
16882
+
16883
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16884
+ top: calc(100% + 0.25rem + 0.125rem);
16885
+ }
16886
+
16887
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16888
+ position: absolute;
16889
+ top: 0;
16890
+ left: 0.125rem;
16891
+ width: calc(100% - (0.125rem * 2));
16892
+ height: 0.125rem;
16893
+ background-color: var(--cds-layer-01, #f4f4f4);
16894
+ content: "";
16895
+ }
16896
+
16897
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
16898
+ position: absolute;
16899
+ top: 0.125rem;
16900
+ left: 0.5rem;
16901
+ width: calc(100% - (0.5rem * 2));
16902
+ height: 1px;
16903
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
16904
+ content: "";
16905
+ }
16906
+
16907
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16908
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
16909
+ }
16910
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
16911
+ background-color: transparent;
16912
+ }
16913
+
16914
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
16915
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
16916
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
16917
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
16918
+ outline-color: var(--cds-support-error, #da1e28);
16919
+ }
16920
+
16921
+ .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 {
16922
+ background-color: var(--cds-support-error, #da1e28);
16923
+ }
16924
+
16162
16925
  /*
16163
16926
  * Licensed Materials - Property of IBM
16164
16927
  * 5724-Q36
@@ -16166,6 +16929,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16166
16929
  * US Government Users Restricted Rights - Use, duplication or disclosure
16167
16930
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16168
16931
  */
16932
+ /* stylelint-disable max-nesting-depth */
16169
16933
  .c4p--datagrid__datagridWrap {
16170
16934
  display: block;
16171
16935
  width: 100%;
@@ -16173,6 +16937,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16173
16937
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
16174
16938
  display: none;
16175
16939
  }
16940
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16941
+ left: 0.125rem;
16942
+ width: 112px;
16943
+ }
16176
16944
 
16177
16945
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16178
16946
  left: 0.125rem;
@@ -16181,7 +16949,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16181
16949
 
16182
16950
  .c4p--datagrid__datagridWrap-simple {
16183
16951
  display: flex;
16184
- overflow: hidden;
16185
16952
  width: 100%;
16186
16953
  height: 100%;
16187
16954
  flex-direction: column;
@@ -16192,4 +16959,43 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16192
16959
  overflow-x: unset;
16193
16960
  }
16194
16961
 
16962
+ /* stylelint-disable max-nesting-depth */
16963
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
16964
+ /* Used id for overriding the SVG path fill */
16965
+ }
16966
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
16967
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
16968
+ background-color: #0050e6;
16969
+ }
16970
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
16971
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
16972
+ box-shadow: none;
16973
+ }
16974
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
16975
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
16976
+ fill: #ffffff;
16977
+ }
16978
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
16979
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
16980
+ background-color: transparent;
16981
+ }
16982
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
16983
+ background-color: #0f62fe;
16984
+ color: #ffffff;
16985
+ }
16986
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
16987
+ animation-duration: 700ms;
16988
+ animation-fill-mode: forwards;
16989
+ animation-iteration-count: infinite;
16990
+ animation-name: rotate;
16991
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
16992
+ }
16993
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
16994
+ background-color: transparent;
16995
+ }
16996
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
16997
+ background-color: #0f62fe;
16998
+ color: #ffffff;
16999
+ }
17000
+
16195
17001
  /*# sourceMappingURL=index.css.map */