@itwin/itwinui-react 1.48.1 → 2.0.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (453) hide show
  1. package/README.md +4 -22
  2. package/cjs/core/Alert/Alert.d.ts +7 -6
  3. package/cjs/core/Alert/Alert.js +13 -8
  4. package/cjs/core/Avatar/Avatar.d.ts +69 -0
  5. package/cjs/core/{UserIcon/UserIcon.js → Avatar/Avatar.js} +15 -11
  6. package/cjs/core/Avatar/index.d.ts +4 -0
  7. package/cjs/core/{UserIcon → Avatar}/index.js +5 -4
  8. package/cjs/core/AvatarGroup/AvatarGroup.d.ts +70 -0
  9. package/cjs/core/{UserIconGroup/UserIconGroup.js → AvatarGroup/AvatarGroup.js} +23 -19
  10. package/cjs/core/AvatarGroup/index.d.ts +4 -0
  11. package/cjs/core/{UserIconGroup → AvatarGroup}/index.js +5 -4
  12. package/cjs/core/Badge/Badge.js +2 -4
  13. package/cjs/core/Breadcrumbs/Breadcrumbs.js +1 -2
  14. package/cjs/core/ButtonGroup/ButtonGroup.d.ts +1 -1
  15. package/cjs/core/Buttons/Button/Button.js +5 -14
  16. package/cjs/core/Buttons/DropdownButton/DropdownButton.js +1 -3
  17. package/cjs/core/Buttons/IconButton/IconButton.js +3 -9
  18. package/cjs/core/Buttons/IdeasButton/IdeasButton.js +1 -2
  19. package/cjs/core/Buttons/SplitButton/SplitButton.js +4 -8
  20. package/cjs/core/Carousel/CarouselNavigation.js +3 -4
  21. package/cjs/core/Checkbox/Checkbox.d.ts +1 -29
  22. package/cjs/core/Checkbox/Checkbox.js +3 -3
  23. package/cjs/core/ColorPicker/ColorBuilder.js +16 -27
  24. package/cjs/core/ColorPicker/ColorInputPanel.js +1 -2
  25. package/cjs/core/ColorPicker/ColorSwatch.d.ts +1 -1
  26. package/cjs/core/ColorPicker/ColorSwatch.js +1 -6
  27. package/cjs/core/ComboBox/ComboBoxDropdown.d.ts +1 -1
  28. package/cjs/core/ComboBox/ComboBoxEndIcon.js +1 -2
  29. package/cjs/core/ComboBox/ComboBoxMenu.js +2 -4
  30. package/cjs/core/DatePicker/DatePicker.js +4 -8
  31. package/cjs/core/Dialog/Dialog.d.ts +4 -4
  32. package/cjs/core/Dialog/Dialog.js +1 -1
  33. package/cjs/core/Dialog/DialogBackdrop.d.ts +1 -1
  34. package/cjs/core/Dialog/DialogBackdrop.js +5 -2
  35. package/cjs/core/Dialog/DialogMain.d.ts +1 -1
  36. package/cjs/core/Dialog/DialogMain.js +7 -1
  37. package/cjs/core/Dialog/DialogTitleBar.d.ts +1 -1
  38. package/cjs/core/Dialog/DialogTitleBar.js +1 -2
  39. package/cjs/core/ExpandableBlock/ExpandableBlock.js +5 -6
  40. package/cjs/core/FileUpload/FileUploadTemplate.js +1 -2
  41. package/cjs/core/Header/Header.d.ts +16 -6
  42. package/cjs/core/Header/Header.js +9 -12
  43. package/cjs/core/Header/HeaderBasicButton.d.ts +6 -0
  44. package/cjs/core/Header/HeaderBasicButton.js +52 -0
  45. package/cjs/core/Header/HeaderBreadcrumbs.js +6 -5
  46. package/cjs/core/Header/HeaderButton.d.ts +3 -2
  47. package/cjs/core/Header/HeaderButton.js +10 -18
  48. package/cjs/core/Header/HeaderDropdownButton.d.ts +6 -0
  49. package/cjs/core/Header/HeaderDropdownButton.js +53 -0
  50. package/cjs/core/Header/HeaderLogo.js +3 -3
  51. package/cjs/core/Header/HeaderSplitButton.d.ts +6 -0
  52. package/cjs/core/Header/HeaderSplitButton.js +54 -0
  53. package/cjs/core/InformationPanel/InformationPanelHeader.js +1 -2
  54. package/cjs/core/Input/Input.d.ts +1 -1
  55. package/cjs/core/Input/Input.js +3 -4
  56. package/cjs/core/InputGroup/InputGroup.d.ts +1 -1
  57. package/cjs/core/InputGroup/InputGroup.js +1 -1
  58. package/cjs/core/Label/Label.d.ts +1 -1
  59. package/cjs/core/Label/Label.js +1 -1
  60. package/cjs/core/LabeledInput/LabeledInput.d.ts +2 -2
  61. package/cjs/core/LabeledInput/LabeledInput.js +1 -1
  62. package/cjs/core/LabeledSelect/LabeledSelect.d.ts +1 -1
  63. package/cjs/core/LabeledSelect/LabeledSelect.js +1 -1
  64. package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts +1 -1
  65. package/cjs/core/LabeledTextarea/LabeledTextarea.js +1 -1
  66. package/cjs/core/Menu/MenuItem.js +1 -2
  67. package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js +2 -4
  68. package/cjs/core/Radio/Radio.d.ts +1 -29
  69. package/cjs/core/Radio/Radio.js +3 -3
  70. package/cjs/core/RadioTiles/RadioTileGroup.d.ts +1 -1
  71. package/cjs/core/RadioTiles/RadioTileGroup.js +1 -1
  72. package/cjs/core/Select/Select.d.ts +1 -1
  73. package/cjs/core/Select/Select.js +10 -14
  74. package/cjs/core/Select/SelectTag.d.ts +1 -1
  75. package/cjs/core/Select/SelectTag.js +1 -1
  76. package/cjs/core/SideNavigation/SideNavigation.js +1 -2
  77. package/cjs/core/SideNavigation/SidenavButton.js +1 -2
  78. package/cjs/core/Stepper/Stepper.d.ts +40 -0
  79. package/cjs/core/{Wizard/Wizard.js → Stepper/Stepper.js} +11 -28
  80. package/cjs/core/{Wizard/Step.d.ts → Stepper/StepperStep.d.ts} +6 -7
  81. package/cjs/core/{Wizard/Step.js → Stepper/StepperStep.js} +10 -10
  82. package/cjs/core/Stepper/Wizard.d.ts +46 -0
  83. package/cjs/core/Stepper/Wizard.js +55 -0
  84. package/cjs/core/Stepper/WorkflowDiagram.d.ts +6 -0
  85. package/cjs/core/Stepper/WorkflowDiagram.js +43 -0
  86. package/cjs/core/Stepper/WorkflowDiagramStep.d.ts +5 -0
  87. package/cjs/core/Stepper/WorkflowDiagramStep.js +42 -0
  88. package/cjs/core/Stepper/index.d.ts +8 -0
  89. package/cjs/core/{Wizard → Stepper}/index.js +5 -1
  90. package/cjs/core/Surface/Surface.d.ts +0 -2
  91. package/cjs/core/Surface/Surface.js +10 -10
  92. package/cjs/core/Table/SubRowExpander.js +3 -3
  93. package/cjs/core/Table/Table.d.ts +5 -4
  94. package/cjs/core/Table/Table.js +30 -23
  95. package/cjs/core/Table/TableCell.js +4 -4
  96. package/cjs/core/Table/TablePaginator.js +16 -19
  97. package/cjs/core/Table/TableRowMemoized.d.ts +2 -0
  98. package/cjs/core/Table/TableRowMemoized.js +10 -13
  99. package/cjs/core/Table/cells/DefaultCell.js +4 -9
  100. package/cjs/core/Table/columns/actionColumn.js +3 -3
  101. package/cjs/core/Table/columns/expanderColumn.js +3 -3
  102. package/cjs/core/Table/filters/BaseFilter.js +1 -1
  103. package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js +1 -2
  104. package/cjs/core/Table/filters/FilterToggle.js +2 -4
  105. package/cjs/core/Table/hooks/useColumnDragAndDrop.js +4 -4
  106. package/cjs/core/Table/hooks/useResizeColumns.js +110 -106
  107. package/cjs/core/Tabs/Tab.d.ts +0 -8
  108. package/cjs/core/Tabs/Tab.js +1 -5
  109. package/cjs/core/Tabs/Tabs.d.ts +32 -12
  110. package/cjs/core/Tabs/Tabs.js +16 -12
  111. package/cjs/core/Tabs/index.d.ts +4 -4
  112. package/cjs/core/Tabs/index.js +2 -2
  113. package/cjs/core/Tag/Tag.js +1 -2
  114. package/cjs/core/Textarea/Textarea.d.ts +1 -1
  115. package/cjs/core/Textarea/Textarea.js +2 -2
  116. package/cjs/core/ThemeProvider/ThemeProvider.d.ts +27 -17
  117. package/cjs/core/ThemeProvider/ThemeProvider.js +64 -7
  118. package/cjs/core/Tile/Tile.d.ts +19 -1
  119. package/cjs/core/Tile/Tile.js +36 -16
  120. package/cjs/core/Toast/Toast.d.ts +3 -3
  121. package/cjs/core/Toast/Toast.js +4 -5
  122. package/cjs/core/Toast/ToastWrapper.d.ts +1 -1
  123. package/cjs/core/Toast/ToastWrapper.js +1 -1
  124. package/cjs/core/Tree/TreeNode.js +1 -7
  125. package/cjs/core/Tree/TreeNodeExpander.js +2 -2
  126. package/cjs/core/Typography/Body/Body.d.ts +5 -3
  127. package/cjs/core/Typography/Body/Body.js +2 -3
  128. package/cjs/core/Typography/Headline/Headline.d.ts +2 -3
  129. package/cjs/core/Typography/Headline/Headline.js +2 -3
  130. package/cjs/core/Typography/Leading/Leading.d.ts +2 -3
  131. package/cjs/core/Typography/Leading/Leading.js +2 -3
  132. package/cjs/core/Typography/Small/Small.d.ts +2 -3
  133. package/cjs/core/Typography/Small/Small.js +2 -3
  134. package/cjs/core/Typography/Subheading/Subheading.d.ts +2 -3
  135. package/cjs/core/Typography/Subheading/Subheading.js +2 -3
  136. package/cjs/core/Typography/Text/Text.d.ts +2 -0
  137. package/cjs/core/Typography/Text/Text.js +2 -0
  138. package/cjs/core/Typography/Title/Title.d.ts +2 -3
  139. package/cjs/core/Typography/Title/Title.js +2 -3
  140. package/cjs/core/index.d.ts +8 -8
  141. package/cjs/core/index.js +14 -10
  142. package/cjs/core/utils/components/Popover.d.ts +2 -2
  143. package/cjs/core/utils/components/Popover.js +1 -1
  144. package/cjs/core/utils/components/Resizer.d.ts +5 -0
  145. package/cjs/core/utils/components/Resizer.js +7 -1
  146. package/cjs/core/utils/components/VisuallyHidden.d.ts +1 -0
  147. package/cjs/core/utils/components/VisuallyHidden.js +1 -0
  148. package/cjs/core/utils/components/index.d.ts +0 -1
  149. package/cjs/core/utils/components/index.js +0 -1
  150. package/cjs/core/utils/functions/colors.d.ts +12 -12
  151. package/cjs/core/utils/functions/colors.js +12 -12
  152. package/cjs/core/utils/hooks/index.d.ts +1 -0
  153. package/cjs/core/utils/hooks/index.js +1 -0
  154. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.d.ts +7 -0
  155. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +17 -0
  156. package/cjs/core/utils/hooks/useMediaQuery.js +2 -1
  157. package/cjs/core/utils/hooks/useTheme.d.ts +20 -3
  158. package/cjs/core/utils/hooks/useTheme.js +57 -58
  159. package/cjs/core/utils/{components/icons.d.ts → icons/StatusIconMap.d.ts} +1 -1
  160. package/cjs/core/utils/icons/StatusIconMap.js +52 -0
  161. package/cjs/core/utils/icons/SvgCalendar.d.ts +2 -0
  162. package/cjs/core/utils/icons/SvgCalendar.js +47 -0
  163. package/cjs/core/utils/icons/SvgCaretDownSmall.d.ts +2 -0
  164. package/cjs/core/utils/icons/SvgCaretDownSmall.js +47 -0
  165. package/cjs/core/utils/icons/SvgCaretRightSmall.d.ts +2 -0
  166. package/cjs/core/utils/icons/SvgCaretRightSmall.js +47 -0
  167. package/cjs/core/utils/icons/SvgCaretUpSmall.d.ts +2 -0
  168. package/cjs/core/utils/icons/SvgCaretUpSmall.js +47 -0
  169. package/cjs/core/utils/icons/SvgCheckmark.d.ts +2 -0
  170. package/cjs/core/utils/icons/SvgCheckmark.js +47 -0
  171. package/cjs/core/utils/icons/SvgCheckmarkSmall.d.ts +2 -0
  172. package/cjs/core/utils/icons/SvgCheckmarkSmall.js +47 -0
  173. package/cjs/core/utils/icons/SvgChevronLeft.d.ts +2 -0
  174. package/cjs/core/utils/icons/SvgChevronLeft.js +47 -0
  175. package/cjs/core/utils/icons/SvgChevronLeftDouble.d.ts +2 -0
  176. package/cjs/core/utils/icons/SvgChevronLeftDouble.js +47 -0
  177. package/cjs/core/utils/icons/SvgChevronRight.d.ts +2 -0
  178. package/cjs/core/utils/icons/SvgChevronRight.js +47 -0
  179. package/cjs/core/utils/icons/SvgChevronRightDouble.d.ts +2 -0
  180. package/cjs/core/utils/icons/SvgChevronRightDouble.js +47 -0
  181. package/cjs/core/utils/icons/SvgClose.d.ts +2 -0
  182. package/cjs/core/utils/icons/SvgClose.js +47 -0
  183. package/cjs/core/utils/icons/SvgCloseSmall.d.ts +2 -0
  184. package/cjs/core/utils/icons/SvgCloseSmall.js +47 -0
  185. package/cjs/core/utils/icons/SvgColumnManager.d.ts +2 -0
  186. package/cjs/core/utils/icons/SvgColumnManager.js +47 -0
  187. package/cjs/core/utils/icons/SvgFilter.d.ts +2 -0
  188. package/cjs/core/utils/icons/SvgFilter.js +47 -0
  189. package/cjs/core/utils/icons/SvgFilterHollow.d.ts +2 -0
  190. package/cjs/core/utils/icons/SvgFilterHollow.js +47 -0
  191. package/cjs/core/utils/icons/SvgImportantSmall.d.ts +2 -0
  192. package/cjs/core/utils/icons/SvgImportantSmall.js +47 -0
  193. package/cjs/core/utils/icons/SvgInfoCircular.d.ts +2 -0
  194. package/cjs/core/utils/icons/SvgInfoCircular.js +47 -0
  195. package/cjs/core/utils/icons/SvgMore.d.ts +2 -0
  196. package/cjs/core/utils/icons/SvgMore.js +47 -0
  197. package/cjs/core/utils/icons/SvgMoreVertical.d.ts +2 -0
  198. package/cjs/core/utils/icons/SvgMoreVertical.js +47 -0
  199. package/cjs/core/utils/icons/SvgNew.d.ts +2 -0
  200. package/cjs/core/utils/icons/SvgNew.js +47 -0
  201. package/cjs/core/utils/icons/SvgSmileyHappy.d.ts +2 -0
  202. package/cjs/core/utils/icons/SvgSmileyHappy.js +47 -0
  203. package/cjs/core/utils/icons/SvgSortDown.d.ts +2 -0
  204. package/cjs/core/utils/icons/SvgSortDown.js +47 -0
  205. package/cjs/core/utils/icons/SvgSortUp.d.ts +2 -0
  206. package/cjs/core/utils/icons/SvgSortUp.js +47 -0
  207. package/cjs/core/utils/icons/SvgStatusError.d.ts +2 -0
  208. package/cjs/core/utils/icons/SvgStatusError.js +47 -0
  209. package/cjs/core/utils/icons/SvgStatusSuccess.d.ts +2 -0
  210. package/cjs/core/utils/icons/SvgStatusSuccess.js +47 -0
  211. package/cjs/core/utils/icons/SvgStatusWarning.d.ts +2 -0
  212. package/cjs/core/utils/icons/SvgStatusWarning.js +47 -0
  213. package/cjs/core/utils/icons/SvgSwap.d.ts +2 -0
  214. package/cjs/core/utils/icons/SvgSwap.js +47 -0
  215. package/cjs/core/utils/icons/SvgUpload.d.ts +2 -0
  216. package/cjs/core/utils/icons/SvgUpload.js +47 -0
  217. package/cjs/core/utils/icons/index.d.ts +29 -0
  218. package/cjs/core/utils/icons/index.js +49 -0
  219. package/cjs/core/utils/index.d.ts +1 -0
  220. package/cjs/core/utils/index.js +1 -0
  221. package/esm/core/Alert/Alert.d.ts +7 -6
  222. package/esm/core/Alert/Alert.js +14 -9
  223. package/esm/core/Avatar/Avatar.d.ts +69 -0
  224. package/esm/core/{UserIcon/UserIcon.js → Avatar/Avatar.js} +13 -9
  225. package/esm/core/Avatar/index.d.ts +4 -0
  226. package/esm/core/{UserIcon → Avatar}/index.js +2 -2
  227. package/esm/core/AvatarGroup/AvatarGroup.d.ts +70 -0
  228. package/esm/core/{UserIconGroup/UserIconGroup.js → AvatarGroup/AvatarGroup.js} +21 -17
  229. package/esm/core/AvatarGroup/index.d.ts +4 -0
  230. package/esm/core/{UserIconGroup → AvatarGroup}/index.js +2 -2
  231. package/esm/core/Badge/Badge.js +3 -5
  232. package/esm/core/Breadcrumbs/Breadcrumbs.js +1 -2
  233. package/esm/core/ButtonGroup/ButtonGroup.d.ts +1 -1
  234. package/esm/core/Buttons/Button/Button.js +5 -14
  235. package/esm/core/Buttons/DropdownButton/DropdownButton.js +2 -4
  236. package/esm/core/Buttons/IconButton/IconButton.js +3 -9
  237. package/esm/core/Buttons/IdeasButton/IdeasButton.js +2 -3
  238. package/esm/core/Buttons/SplitButton/SplitButton.js +5 -9
  239. package/esm/core/Carousel/CarouselNavigation.js +1 -2
  240. package/esm/core/Checkbox/Checkbox.d.ts +1 -29
  241. package/esm/core/Checkbox/Checkbox.js +3 -3
  242. package/esm/core/ColorPicker/ColorBuilder.js +17 -28
  243. package/esm/core/ColorPicker/ColorInputPanel.js +1 -2
  244. package/esm/core/ColorPicker/ColorSwatch.d.ts +1 -1
  245. package/esm/core/ColorPicker/ColorSwatch.js +2 -7
  246. package/esm/core/ComboBox/ComboBoxDropdown.d.ts +1 -1
  247. package/esm/core/ComboBox/ComboBoxEndIcon.js +1 -2
  248. package/esm/core/ComboBox/ComboBoxMenu.js +2 -4
  249. package/esm/core/DatePicker/DatePicker.js +1 -5
  250. package/esm/core/Dialog/Dialog.d.ts +4 -4
  251. package/esm/core/Dialog/Dialog.js +1 -1
  252. package/esm/core/Dialog/DialogBackdrop.d.ts +1 -1
  253. package/esm/core/Dialog/DialogBackdrop.js +5 -2
  254. package/esm/core/Dialog/DialogMain.d.ts +1 -1
  255. package/esm/core/Dialog/DialogMain.js +7 -1
  256. package/esm/core/Dialog/DialogTitleBar.d.ts +1 -1
  257. package/esm/core/Dialog/DialogTitleBar.js +1 -2
  258. package/esm/core/ExpandableBlock/ExpandableBlock.js +5 -6
  259. package/esm/core/FileUpload/FileUploadTemplate.js +1 -2
  260. package/esm/core/Header/Header.d.ts +16 -6
  261. package/esm/core/Header/Header.js +9 -12
  262. package/esm/core/Header/HeaderBasicButton.d.ts +6 -0
  263. package/esm/core/Header/HeaderBasicButton.js +46 -0
  264. package/esm/core/Header/HeaderBreadcrumbs.js +7 -6
  265. package/esm/core/Header/HeaderButton.d.ts +3 -2
  266. package/esm/core/Header/HeaderButton.js +10 -18
  267. package/esm/core/Header/HeaderDropdownButton.d.ts +6 -0
  268. package/esm/core/Header/HeaderDropdownButton.js +47 -0
  269. package/esm/core/Header/HeaderLogo.js +3 -3
  270. package/esm/core/Header/HeaderSplitButton.d.ts +6 -0
  271. package/esm/core/Header/HeaderSplitButton.js +48 -0
  272. package/esm/core/InformationPanel/InformationPanelHeader.js +1 -2
  273. package/esm/core/Input/Input.d.ts +1 -1
  274. package/esm/core/Input/Input.js +3 -4
  275. package/esm/core/InputGroup/InputGroup.d.ts +1 -1
  276. package/esm/core/InputGroup/InputGroup.js +1 -1
  277. package/esm/core/Label/Label.d.ts +1 -1
  278. package/esm/core/Label/Label.js +1 -1
  279. package/esm/core/LabeledInput/LabeledInput.d.ts +2 -2
  280. package/esm/core/LabeledInput/LabeledInput.js +1 -1
  281. package/esm/core/LabeledSelect/LabeledSelect.d.ts +1 -1
  282. package/esm/core/LabeledSelect/LabeledSelect.js +1 -1
  283. package/esm/core/LabeledTextarea/LabeledTextarea.d.ts +1 -1
  284. package/esm/core/LabeledTextarea/LabeledTextarea.js +1 -1
  285. package/esm/core/Menu/MenuItem.js +1 -2
  286. package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js +3 -5
  287. package/esm/core/Radio/Radio.d.ts +1 -29
  288. package/esm/core/Radio/Radio.js +3 -3
  289. package/esm/core/RadioTiles/RadioTileGroup.d.ts +1 -1
  290. package/esm/core/RadioTiles/RadioTileGroup.js +1 -1
  291. package/esm/core/Select/Select.d.ts +1 -1
  292. package/esm/core/Select/Select.js +10 -14
  293. package/esm/core/Select/SelectTag.d.ts +1 -1
  294. package/esm/core/Select/SelectTag.js +1 -1
  295. package/esm/core/SideNavigation/SideNavigation.js +1 -2
  296. package/esm/core/SideNavigation/SidenavButton.js +1 -2
  297. package/esm/core/Stepper/Stepper.d.ts +40 -0
  298. package/esm/core/{Wizard/Wizard.js → Stepper/Stepper.js} +10 -27
  299. package/esm/core/{Wizard/Step.d.ts → Stepper/StepperStep.d.ts} +6 -7
  300. package/esm/core/{Wizard/Step.js → Stepper/StepperStep.js} +8 -8
  301. package/esm/core/Stepper/Wizard.d.ts +46 -0
  302. package/esm/core/Stepper/Wizard.js +49 -0
  303. package/esm/core/Stepper/WorkflowDiagram.d.ts +6 -0
  304. package/esm/core/Stepper/WorkflowDiagram.js +37 -0
  305. package/esm/core/Stepper/WorkflowDiagramStep.d.ts +5 -0
  306. package/esm/core/Stepper/WorkflowDiagramStep.js +35 -0
  307. package/esm/core/Stepper/index.d.ts +8 -0
  308. package/esm/core/{Wizard → Stepper}/index.js +2 -0
  309. package/esm/core/Surface/Surface.d.ts +0 -2
  310. package/esm/core/Surface/Surface.js +11 -11
  311. package/esm/core/Table/SubRowExpander.js +2 -2
  312. package/esm/core/Table/Table.d.ts +5 -4
  313. package/esm/core/Table/Table.js +31 -24
  314. package/esm/core/Table/TableCell.js +4 -4
  315. package/esm/core/Table/TablePaginator.js +15 -18
  316. package/esm/core/Table/TableRowMemoized.d.ts +2 -0
  317. package/esm/core/Table/TableRowMemoized.js +10 -13
  318. package/esm/core/Table/cells/DefaultCell.js +4 -9
  319. package/esm/core/Table/columns/actionColumn.js +2 -2
  320. package/esm/core/Table/columns/expanderColumn.js +2 -2
  321. package/esm/core/Table/filters/BaseFilter.js +1 -1
  322. package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +1 -2
  323. package/esm/core/Table/filters/FilterToggle.js +2 -4
  324. package/esm/core/Table/hooks/useColumnDragAndDrop.js +4 -4
  325. package/esm/core/Table/hooks/useResizeColumns.js +110 -106
  326. package/esm/core/Tabs/Tab.d.ts +0 -8
  327. package/esm/core/Tabs/Tab.js +0 -4
  328. package/esm/core/Tabs/Tabs.d.ts +32 -12
  329. package/esm/core/Tabs/Tabs.js +17 -13
  330. package/esm/core/Tabs/index.d.ts +4 -4
  331. package/esm/core/Tabs/index.js +2 -2
  332. package/esm/core/Tag/Tag.js +1 -2
  333. package/esm/core/Textarea/Textarea.d.ts +1 -1
  334. package/esm/core/Textarea/Textarea.js +2 -2
  335. package/esm/core/ThemeProvider/ThemeProvider.d.ts +27 -17
  336. package/esm/core/ThemeProvider/ThemeProvider.js +64 -6
  337. package/esm/core/Tile/Tile.d.ts +19 -1
  338. package/esm/core/Tile/Tile.js +36 -16
  339. package/esm/core/Toast/Toast.d.ts +3 -3
  340. package/esm/core/Toast/Toast.js +4 -5
  341. package/esm/core/Toast/ToastWrapper.d.ts +1 -1
  342. package/esm/core/Toast/ToastWrapper.js +1 -1
  343. package/esm/core/Tree/TreeNode.js +2 -8
  344. package/esm/core/Tree/TreeNodeExpander.js +1 -1
  345. package/esm/core/Typography/Body/Body.d.ts +5 -3
  346. package/esm/core/Typography/Body/Body.js +2 -3
  347. package/esm/core/Typography/Headline/Headline.d.ts +2 -3
  348. package/esm/core/Typography/Headline/Headline.js +2 -3
  349. package/esm/core/Typography/Leading/Leading.d.ts +2 -3
  350. package/esm/core/Typography/Leading/Leading.js +2 -3
  351. package/esm/core/Typography/Small/Small.d.ts +2 -3
  352. package/esm/core/Typography/Small/Small.js +2 -3
  353. package/esm/core/Typography/Subheading/Subheading.d.ts +2 -3
  354. package/esm/core/Typography/Subheading/Subheading.js +2 -3
  355. package/esm/core/Typography/Text/Text.d.ts +2 -0
  356. package/esm/core/Typography/Text/Text.js +2 -0
  357. package/esm/core/Typography/Title/Title.d.ts +2 -3
  358. package/esm/core/Typography/Title/Title.js +2 -3
  359. package/esm/core/index.d.ts +8 -8
  360. package/esm/core/index.js +4 -4
  361. package/esm/core/utils/components/Popover.d.ts +2 -2
  362. package/esm/core/utils/components/Popover.js +1 -1
  363. package/esm/core/utils/components/Resizer.d.ts +5 -0
  364. package/esm/core/utils/components/Resizer.js +7 -1
  365. package/esm/core/utils/components/VisuallyHidden.d.ts +1 -0
  366. package/esm/core/utils/components/VisuallyHidden.js +1 -0
  367. package/esm/core/utils/components/index.d.ts +0 -1
  368. package/esm/core/utils/components/index.js +0 -1
  369. package/esm/core/utils/functions/colors.d.ts +12 -12
  370. package/esm/core/utils/functions/colors.js +12 -12
  371. package/esm/core/utils/hooks/index.d.ts +1 -0
  372. package/esm/core/utils/hooks/index.js +1 -0
  373. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.d.ts +7 -0
  374. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +11 -0
  375. package/esm/core/utils/hooks/useMediaQuery.js +2 -1
  376. package/esm/core/utils/hooks/useTheme.d.ts +20 -3
  377. package/esm/core/utils/hooks/useTheme.js +56 -57
  378. package/esm/core/utils/{components/icons.d.ts → icons/StatusIconMap.d.ts} +1 -1
  379. package/esm/core/utils/{components/icons.js → icons/StatusIconMap.js} +5 -5
  380. package/esm/core/utils/icons/SvgCalendar.d.ts +2 -0
  381. package/esm/core/utils/icons/SvgCalendar.js +20 -0
  382. package/esm/core/utils/icons/SvgCaretDownSmall.d.ts +2 -0
  383. package/esm/core/utils/icons/SvgCaretDownSmall.js +20 -0
  384. package/esm/core/utils/icons/SvgCaretRightSmall.d.ts +2 -0
  385. package/esm/core/utils/icons/SvgCaretRightSmall.js +20 -0
  386. package/esm/core/utils/icons/SvgCaretUpSmall.d.ts +2 -0
  387. package/esm/core/utils/icons/SvgCaretUpSmall.js +20 -0
  388. package/esm/core/utils/icons/SvgCheckmark.d.ts +2 -0
  389. package/esm/core/utils/icons/SvgCheckmark.js +20 -0
  390. package/esm/core/utils/icons/SvgCheckmarkSmall.d.ts +2 -0
  391. package/esm/core/utils/icons/SvgCheckmarkSmall.js +20 -0
  392. package/esm/core/utils/icons/SvgChevronLeft.d.ts +2 -0
  393. package/esm/core/utils/icons/SvgChevronLeft.js +20 -0
  394. package/esm/core/utils/icons/SvgChevronLeftDouble.d.ts +2 -0
  395. package/esm/core/utils/icons/SvgChevronLeftDouble.js +20 -0
  396. package/esm/core/utils/icons/SvgChevronRight.d.ts +2 -0
  397. package/esm/core/utils/icons/SvgChevronRight.js +20 -0
  398. package/esm/core/utils/icons/SvgChevronRightDouble.d.ts +2 -0
  399. package/esm/core/utils/icons/SvgChevronRightDouble.js +20 -0
  400. package/esm/core/utils/icons/SvgClose.d.ts +2 -0
  401. package/esm/core/utils/icons/SvgClose.js +20 -0
  402. package/esm/core/utils/icons/SvgCloseSmall.d.ts +2 -0
  403. package/esm/core/utils/icons/SvgCloseSmall.js +20 -0
  404. package/esm/core/utils/icons/SvgColumnManager.d.ts +2 -0
  405. package/esm/core/utils/icons/SvgColumnManager.js +20 -0
  406. package/esm/core/utils/icons/SvgFilter.d.ts +2 -0
  407. package/esm/core/utils/icons/SvgFilter.js +20 -0
  408. package/esm/core/utils/icons/SvgFilterHollow.d.ts +2 -0
  409. package/esm/core/utils/icons/SvgFilterHollow.js +20 -0
  410. package/esm/core/utils/icons/SvgImportantSmall.d.ts +2 -0
  411. package/esm/core/utils/icons/SvgImportantSmall.js +20 -0
  412. package/esm/core/utils/icons/SvgInfoCircular.d.ts +2 -0
  413. package/esm/core/utils/icons/SvgInfoCircular.js +20 -0
  414. package/esm/core/utils/icons/SvgMore.d.ts +2 -0
  415. package/esm/core/utils/icons/SvgMore.js +20 -0
  416. package/esm/core/utils/icons/SvgMoreVertical.d.ts +2 -0
  417. package/esm/core/utils/icons/SvgMoreVertical.js +20 -0
  418. package/esm/core/utils/icons/SvgNew.d.ts +2 -0
  419. package/esm/core/utils/icons/SvgNew.js +20 -0
  420. package/esm/core/utils/icons/SvgSmileyHappy.d.ts +2 -0
  421. package/esm/core/utils/icons/SvgSmileyHappy.js +20 -0
  422. package/esm/core/utils/icons/SvgSortDown.d.ts +2 -0
  423. package/esm/core/utils/icons/SvgSortDown.js +20 -0
  424. package/esm/core/utils/icons/SvgSortUp.d.ts +2 -0
  425. package/esm/core/utils/icons/SvgSortUp.js +20 -0
  426. package/esm/core/utils/icons/SvgStatusError.d.ts +2 -0
  427. package/esm/core/utils/icons/SvgStatusError.js +20 -0
  428. package/esm/core/utils/icons/SvgStatusSuccess.d.ts +2 -0
  429. package/esm/core/utils/icons/SvgStatusSuccess.js +20 -0
  430. package/esm/core/utils/icons/SvgStatusWarning.d.ts +2 -0
  431. package/esm/core/utils/icons/SvgStatusWarning.js +20 -0
  432. package/esm/core/utils/icons/SvgSwap.d.ts +2 -0
  433. package/esm/core/utils/icons/SvgSwap.js +20 -0
  434. package/esm/core/utils/icons/SvgUpload.d.ts +2 -0
  435. package/esm/core/utils/icons/SvgUpload.js +20 -0
  436. package/esm/core/utils/icons/index.d.ts +29 -0
  437. package/esm/core/utils/icons/index.js +33 -0
  438. package/esm/core/utils/index.d.ts +1 -0
  439. package/esm/core/utils/index.js +1 -0
  440. package/package.json +3 -3
  441. package/cjs/core/UserIcon/UserIcon.d.ts +0 -57
  442. package/cjs/core/UserIcon/index.d.ts +0 -4
  443. package/cjs/core/UserIconGroup/UserIconGroup.d.ts +0 -62
  444. package/cjs/core/UserIconGroup/index.d.ts +0 -4
  445. package/cjs/core/Wizard/Wizard.d.ts +0 -54
  446. package/cjs/core/Wizard/index.d.ts +0 -4
  447. package/cjs/core/utils/components/icons.js +0 -32
  448. package/esm/core/UserIcon/UserIcon.d.ts +0 -57
  449. package/esm/core/UserIcon/index.d.ts +0 -4
  450. package/esm/core/UserIconGroup/UserIconGroup.d.ts +0 -62
  451. package/esm/core/UserIconGroup/index.d.ts +0 -4
  452. package/esm/core/Wizard/Wizard.d.ts +0 -54
  453. package/esm/core/Wizard/index.d.ts +0 -4
package/cjs/core/ThemeProvider/ThemeProvider.js CHANGED
@@ -1,22 +1,79 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
2
24
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
26
  };
5
27
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ThemeProvider = void 0;
28
+ exports.ThemeContext = exports.ThemeProvider = void 0;
7
29
  /*---------------------------------------------------------------------------------------------
8
30
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
9
31
  * See LICENSE.md in the project root for license terms and full copyright notice.
10
32
  *--------------------------------------------------------------------------------------------*/
11
33
  var react_1 = __importDefault(require("react"));
34
+ var classnames_1 = __importDefault(require("classnames"));
12
35
  var utils_1 = require("../utils");
36
+ require("@itwin/itwinui-css/css/global.css");
37
+ require("@itwin/itwinui-variables/index.css");
13
38
  /**
14
- * Component providing global styles that are required for all components and allows changing theme.
39
+ * This component provides global styles and applies theme to the entire tree
40
+ * that it is wrapping around. The `theme` prop is optional and defaults to the
41
+ * light theme.
42
+ *
43
+ * If you want to theme the entire app, you should use this component at the root.
44
+ * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
45
+ *
46
+ * You can also use this component to apply a different theme to only a part of the tree.
47
+ *
48
+ * @example
49
+ * <ThemeProvider theme='os'>
50
+ * <App />
51
+ * </ThemeProvider>
52
+ *
53
+ * @example
54
+ * <ThemeProvider as='body'>
55
+ * <App />
56
+ * </ThemeProvider>
15
57
  */
16
- var ThemeProvider = function (props) {
17
- var theme = props.theme, children = props.children, themeOptions = props.themeOptions;
58
+ exports.ThemeProvider = react_1.default.forwardRef(function (props, ref) {
59
+ var _a;
60
+ var theme = props.theme, children = props.children, themeOptions = props.themeOptions, _b = props.as, Element = _b === void 0 ? 'div' : _b, className = props.className, rest = __rest(props, ["theme", "children", "themeOptions", "as", "className"]);
61
+ var hasChildren = react_1.default.Children.count(children) > 0;
62
+ var parentContext = react_1.default.useContext(exports.ThemeContext);
63
+ var prefersDark = (0, utils_1.useMediaQuery)('(prefers-color-scheme: dark)');
64
+ var prefersHighContrast = (0, utils_1.useMediaQuery)('(prefers-contrast: more)');
65
+ var shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
66
+ var shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
67
+ // only provide context if wrapped around children
68
+ return hasChildren ? (react_1.default.createElement(exports.ThemeContext.Provider, { value: { theme: theme, themeOptions: themeOptions } },
69
+ react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: ref }, rest), children))) : (
70
+ // otherwise just apply theme on the root using this wrapper component
71
+ react_1.default.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
72
+ });
73
+ exports.default = exports.ThemeProvider;
74
+ exports.ThemeContext = react_1.default.createContext(undefined);
75
+ var ThemeLogicWrapper = function (_a) {
76
+ var theme = _a.theme, themeOptions = _a.themeOptions;
18
77
  (0, utils_1.useTheme)(theme, themeOptions);
19
- return react_1.default.createElement(react_1.default.Fragment, null, children);
78
+ return react_1.default.createElement(react_1.default.Fragment, null);
20
79
  };
21
- exports.ThemeProvider = ThemeProvider;
22
- exports.default = exports.ThemeProvider;
package/cjs/core/Tile/Tile.d.ts CHANGED
@@ -33,7 +33,7 @@ export declare type TileProps = {
33
33
  * // ...
34
34
  * thumbnail='/url/to/image.jpg'
35
35
  * // or
36
- * thumbnail={<UserIcon image={<img src='icon.png' />} />}
36
+ * thumbnail={<Avatar image={<img src='icon.png' />} />}
37
37
  * // or
38
38
  * thumbnail={<SvgImodelHollow />}
39
39
  * />
@@ -61,6 +61,10 @@ export declare type TileProps = {
61
61
  * Dropdown menu containing `MenuItem`s.
62
62
  */
63
63
  moreOptions?: React.ReactNode[];
64
+ /**
65
+ * Status of the tile.
66
+ */
67
+ status?: 'positive' | 'warning' | 'negative';
64
68
  /**
65
69
  * Whether the tile is selected or in "active" state.
66
70
  * Gets highlighted and shows a checkmark icon near tile name.
@@ -84,6 +88,20 @@ export declare type TileProps = {
84
88
  * It becomes focusable and gets on hover styling.
85
89
  */
86
90
  isActionable?: boolean;
91
+ /**
92
+ * Display a loading state.
93
+ * @default false
94
+ */
95
+ isLoading?: boolean;
96
+ /**
97
+ * Flag whether the tile is disabled.
98
+ *
99
+ * Note: This only affects the tile. You need to manually disable
100
+ * the buttons and other interactive elements inside the tile.
101
+ *
102
+ * @default false
103
+ */
104
+ isDisabled?: boolean;
87
105
  } & React.ComponentPropsWithoutRef<'div'>;
88
106
  /**
89
107
  * Tile component that displays content and actions in a card-like format.
package/cjs/core/Tile/Tile.js CHANGED
@@ -32,13 +32,11 @@ exports.Tile = void 0;
32
32
  *--------------------------------------------------------------------------------------------*/
33
33
  var react_1 = __importDefault(require("react"));
34
34
  var classnames_1 = __importDefault(require("classnames"));
35
- var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
36
- var More_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/More"));
37
- var New_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/New"));
38
35
  var utils_1 = require("../utils");
39
36
  require("@itwin/itwinui-css/css/tile.css");
40
37
  var DropdownMenu_1 = require("../DropdownMenu");
41
38
  var Buttons_1 = require("../Buttons");
39
+ var ProgressIndicators_1 = require("../ProgressIndicators");
42
40
  /**
43
41
  * Tile component that displays content and actions in a card-like format.
44
42
  * @example
@@ -57,17 +55,21 @@ var Buttons_1 = require("../Buttons");
57
55
  * />
58
56
  */
59
57
  var Tile = function (props) {
60
- var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, isActionable = props.isActionable, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable"]);
58
+ var _a;
59
+ var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _b = props.variant, variant = _b === void 0 ? 'default' : _b, children = props.children, isActionable = props.isActionable, status = props.status, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.isDisabled, isDisabled = _d === void 0 ? false : _d, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable", "status", "isLoading", "isDisabled"]);
61
60
  (0, utils_1.useTheme)();
62
- var _b = react_1.default.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
61
+ var _e = react_1.default.useState(false), isMenuVisible = _e[0], setIsMenuVisible = _e[1];
63
62
  var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
64
63
  var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
65
- return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', {
66
- 'iui-folder': variant === 'folder',
67
- 'iui-new': isNew,
68
- 'iui-selected': isSelected,
69
- 'iui-actionable': isActionable,
70
- }, className), tabIndex: isActionable ? 0 : undefined }, rest),
64
+ return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', (_a = {
65
+ 'iui-folder': variant === 'folder',
66
+ 'iui-new': isNew,
67
+ 'iui-selected': isSelected,
68
+ 'iui-actionable': isActionable
69
+ },
70
+ _a["iui-".concat(status)] = !!status,
71
+ _a['iui-loading'] = isLoading,
72
+ _a), className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined }, rest),
71
73
  thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
72
74
  typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
73
75
  className: 'iui-tile-thumbnail-picture',
@@ -76,17 +78,18 @@ var Tile = function (props) {
76
78
  })) : (thumbnail),
77
79
  leftIcon &&
78
80
  react_1.default.cloneElement(leftIcon, {
79
- className: 'iui-small iui-tile-thumbnail-type-indicator',
81
+ className: 'iui-tile-thumbnail-type-indicator',
82
+ 'data-iui-size': 'small',
80
83
  }),
81
84
  rightIcon &&
82
85
  react_1.default.cloneElement(rightIcon, {
83
- className: 'iui-small iui-tile-thumbnail-quick-action',
86
+ className: 'iui-tile-thumbnail-quick-action',
87
+ 'data-iui-size': 'small',
84
88
  }),
85
89
  badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
86
90
  react_1.default.createElement("div", { className: 'iui-tile-content' },
87
91
  react_1.default.createElement("div", { className: 'iui-tile-name' },
88
- isSelected && (react_1.default.createElement(Checkmark_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
89
- isNew && (react_1.default.createElement(New_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
92
+ react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
90
93
  react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
91
94
  description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
92
95
  metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
@@ -105,9 +108,26 @@ var Tile = function (props) {
105
108
  'iui-visible': isMenuVisible,
106
109
  }) },
107
110
  react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
108
- react_1.default.createElement(More_1.default, null))))),
111
+ react_1.default.createElement(utils_1.SvgMore, null))))),
109
112
  children),
110
113
  buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
111
114
  };
112
115
  exports.Tile = Tile;
116
+ var TitleIcon = function (_a) {
117
+ var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.isNew, isNew = _d === void 0 ? false : _d, status = _a.status;
118
+ var StatusIcon = !!status && utils_1.StatusIconMap[status];
119
+ if (isLoading) {
120
+ return (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
121
+ }
122
+ if (isSelected) {
123
+ return react_1.default.createElement(utils_1.SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
124
+ }
125
+ if (isNew) {
126
+ return react_1.default.createElement(utils_1.SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
127
+ }
128
+ if (StatusIcon) {
129
+ return react_1.default.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
130
+ }
131
+ return null;
132
+ };
113
133
  exports.default = exports.Tile;
package/cjs/core/Toast/Toast.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { CommonProps } from '../utils';
3
- import '@itwin/itwinui-css/css/toast-notification.css';
3
+ import '@itwin/itwinui-css/css/toast.css';
4
4
  export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
5
5
  export declare type ToastProps = {
6
6
  /**
@@ -58,7 +58,7 @@ export declare type ToastProps = {
58
58
  placementPosition?: 'top' | 'bottom';
59
59
  };
60
60
  /**
61
- * Generic Toast Notification Component
61
+ * Generic Toast Component
62
62
  * @example
63
63
  * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
64
64
  * <Toast type='temporary' content='Processing completed.' category='positive' />
@@ -70,7 +70,7 @@ export declare type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id'
70
70
  onClose?: () => void;
71
71
  } & CommonProps;
72
72
  /**
73
- * The presentational part of a toast notification, without any animation or logic.
73
+ * The presentational part of a toast, without any animation or logic.
74
74
  * @private
75
75
  */
76
76
  export declare const ToastPresentation: (props: ToastPresentationProps) => JSX.Element;
package/cjs/core/Toast/Toast.js CHANGED
@@ -32,13 +32,12 @@ exports.ToastPresentation = exports.Toast = void 0;
32
32
  *--------------------------------------------------------------------------------------------*/
33
33
  var react_1 = __importDefault(require("react"));
34
34
  var react_transition_group_1 = require("react-transition-group");
35
- var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
36
35
  var classnames_1 = __importDefault(require("classnames"));
37
36
  var utils_1 = require("../utils");
38
- require("@itwin/itwinui-css/css/toast-notification.css");
37
+ require("@itwin/itwinui-css/css/toast.css");
39
38
  var Buttons_1 = require("../Buttons");
40
39
  /**
41
- * Generic Toast Notification Component
40
+ * Generic Toast Component
42
41
  * @example
43
42
  * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
44
43
  * <Toast type='temporary' content='Processing completed.' category='positive' />
@@ -134,7 +133,7 @@ var Toast = function (props) {
134
133
  };
135
134
  exports.Toast = Toast;
136
135
  /**
137
- * The presentational part of a toast notification, without any animation or logic.
136
+ * The presentational part of a toast, without any animation or logic.
138
137
  * @private
139
138
  */
140
139
  var ToastPresentation = function (props) {
@@ -145,7 +144,7 @@ var ToastPresentation = function (props) {
145
144
  react_1.default.createElement("div", { className: 'iui-message' }, content),
146
145
  link && (react_1.default.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
147
146
  (type === 'persisting' || hasCloseButton) && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
148
- react_1.default.createElement(CloseSmall_1.default, null)))));
147
+ react_1.default.createElement(utils_1.SvgCloseSmall, null)))));
149
148
  };
150
149
  exports.ToastPresentation = ToastPresentation;
151
150
  exports.default = exports.Toast;
package/cjs/core/Toast/ToastWrapper.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@itwin/itwinui-css/css/toast-notification.css';
1
+ import '@itwin/itwinui-css/css/toast.css';
2
2
  import React from 'react';
3
3
  import { ToastProps } from './Toast';
4
4
  import { ToasterSettings } from './Toaster';
package/cjs/core/Toast/ToastWrapper.js CHANGED
@@ -19,7 +19,7 @@ exports.ToastWrapper = void 0;
19
19
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
20
20
  * See LICENSE.md in the project root for license terms and full copyright notice.
21
21
  *--------------------------------------------------------------------------------------------*/
22
- require("@itwin/itwinui-css/css/toast-notification.css");
22
+ require("@itwin/itwinui-css/css/toast.css");
23
23
  var react_1 = __importDefault(require("react"));
24
24
  var classnames_1 = __importDefault(require("classnames"));
25
25
  var Toast_1 = __importDefault(require("./Toast"));
package/cjs/core/Tree/TreeNode.js CHANGED
@@ -61,12 +61,6 @@ var TreeNode = function (props) {
61
61
  var _e = (0, TreeContext_1.useTreeContext)(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, scrollToParent = _e.scrollToParent, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
62
62
  var _g = react_1.default.useState(false), isFocused = _g[0], setIsFocused = _g[1];
63
63
  var nodeRef = react_1.default.useRef(null);
64
- var styleDepth = react_1.default.useMemo(function () {
65
- var _a, _b, _c;
66
- return ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--level: ".concat(nodeDepth)))
67
- ? { '--level': nodeDepth }
68
- : { marginLeft: nodeDepth ? nodeDepth * 28 : 0 };
69
- }, [nodeDepth]);
70
64
  var onKeyDown = function (event) {
71
65
  var _a, _b, _c, _d, _e, _f;
72
66
  var isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
@@ -144,7 +138,7 @@ var TreeNode = function (props) {
144
138
  react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tree-node', {
145
139
  'iui-active': isSelected,
146
140
  'iui-disabled': isDisabled,
147
- }), style: styleDepth, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
141
+ }), style: { '--level': nodeDepth }, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
148
142
  checkbox && react_1.default.isValidElement(checkbox)
149
143
  ? react_1.default.cloneElement(checkbox, {
150
144
  className: (0, classnames_1.default)('iui-tree-node-checkbox', checkbox.props.className),
package/cjs/core/Tree/TreeNodeExpander.js CHANGED
@@ -32,13 +32,13 @@ exports.TreeNodeExpander = void 0;
32
32
  *--------------------------------------------------------------------------------------------*/
33
33
  var react_1 = __importDefault(require("react"));
34
34
  var classnames_1 = __importDefault(require("classnames"));
35
- var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
35
+ var utils_1 = require("../utils");
36
36
  var IconButton_1 = require("../Buttons/IconButton");
37
37
  require("@itwin/itwinui-css/css/tree.css");
38
38
  var TreeNodeExpander = function (props) {
39
39
  var isExpanded = props.isExpanded, rest = __rest(props, ["isExpanded"]);
40
40
  return (react_1.default.createElement(IconButton_1.IconButton, __assign({ styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand' }, rest),
41
- react_1.default.createElement(ChevronRight_1.default, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
41
+ react_1.default.createElement(utils_1.SvgChevronRight, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
42
42
  'iui-tree-node-content-expander-icon-expanded': isExpanded,
43
43
  }) })));
44
44
  };
package/cjs/core/Typography/Body/Body.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import React from 'react';
2
2
  import '@itwin/itwinui-css/css/text.css';
3
+ /**
4
+ * @deprecated Since v2, use `Text` with variant 'body'.
5
+ */
3
6
  export declare type BodyProps = {
4
7
  /**
5
8
  * Set text to muted.
@@ -13,10 +16,9 @@ export declare type BodyProps = {
13
16
  isSkeleton?: boolean;
14
17
  } & React.HTMLAttributes<HTMLParagraphElement>;
15
18
  /**
16
- * Body text, renders a paragraph element
19
+ * @deprecated Since v2, use `Text` with variant 'body'.
17
20
  * @example
18
- * <Body>I'm some body text!</Body>
19
- * <Body isMuted>I'm some muted body text.</Body>
21
+ * <Text variant='body' as='p'>I'm some body text!</Text>
20
22
  */
21
23
  export declare const Body: React.ForwardRefExoticComponent<{
22
24
  /**
package/cjs/core/Typography/Body/Body.js CHANGED
@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
35
35
  var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
- * Body text, renders a paragraph element
38
+ * @deprecated Since v2, use `Text` with variant 'body'.
39
39
  * @example
40
- * <Body>I'm some body text!</Body>
41
- * <Body isMuted>I'm some muted body text.</Body>
40
+ * <Text variant='body' as='p'>I'm some body text!</Text>
42
41
  */
43
42
  exports.Body = react_1.default.forwardRef(function (props, ref) {
44
43
  var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, _b = props.isSkeleton, isSkeleton = _b === void 0 ? false : _b, rest = __rest(props, ["className", "isMuted", "isSkeleton"]);
package/cjs/core/Typography/Headline/Headline.d.ts CHANGED
@@ -8,10 +8,9 @@ export declare type HeadlineProps = {
8
8
  isMuted?: boolean;
9
9
  } & React.HTMLAttributes<HTMLHeadingElement>;
10
10
  /**
11
- * The biggest title on the page, renders a h1 element
11
+ * @deprecated Since v2, use `Text` with variant 'headline'.
12
12
  * @example
13
- * <Headline>I'm a headline!</Headline>
14
- * <Headline isMuted>I'm a muted headline.</Headline>
13
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
15
14
  */
16
15
  export declare const Headline: React.ForwardRefExoticComponent<{
17
16
  /**
package/cjs/core/Typography/Headline/Headline.js CHANGED
@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
35
35
  var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
- * The biggest title on the page, renders a h1 element
38
+ * @deprecated Since v2, use `Text` with variant 'headline'.
39
39
  * @example
40
- * <Headline>I'm a headline!</Headline>
41
- * <Headline isMuted>I'm a muted headline.</Headline>
40
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
42
41
  */
43
42
  exports.Headline = react_1.default.forwardRef(function (props, ref) {
44
43
  var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
package/cjs/core/Typography/Leading/Leading.d.ts CHANGED
@@ -8,10 +8,9 @@ export declare type LeadingProps = {
8
8
  isMuted?: boolean;
9
9
  } & React.HTMLAttributes<HTMLHeadingElement>;
10
10
  /**
11
- * The third biggest title on the page, renders a h3 element
11
+ * @deprecated Since v2, use `Text` with variant 'leading'.
12
12
  * @example
13
- * <Leading>I'm a Leading!</Leading>
14
- * <Leading isMuted>I'm a muted Leading.</Leading>
13
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
15
14
  */
16
15
  export declare const Leading: React.ForwardRefExoticComponent<{
17
16
  /**
package/cjs/core/Typography/Leading/Leading.js CHANGED
@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
35
35
  var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
- * The third biggest title on the page, renders a h3 element
38
+ * @deprecated Since v2, use `Text` with variant 'leading'.
39
39
  * @example
40
- * <Leading>I'm a Leading!</Leading>
41
- * <Leading isMuted>I'm a muted Leading.</Leading>
40
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
42
41
  */
43
42
  exports.Leading = react_1.default.forwardRef(function (props, ref) {
44
43
  var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
package/cjs/core/Typography/Small/Small.d.ts CHANGED
@@ -8,10 +8,9 @@ export declare type SmallProps = {
8
8
  isMuted?: boolean;
9
9
  } & React.HTMLAttributes<HTMLParagraphElement>;
10
10
  /**
11
- * Small text, renders a paragraph element
11
+ * @deprecated Since v2, use `Text` with variant 'small'.
12
12
  * @example
13
- * <Small>I'm some small text!</Small>
14
- * <Small isMuted>I'm some muted small text.</Small>
13
+ * <Text variant='small' as='small'>I'm some small text!</Text>
15
14
  */
16
15
  export declare const Small: React.ForwardRefExoticComponent<{
17
16
  /**
package/cjs/core/Typography/Small/Small.js CHANGED
@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
35
35
  var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
- * Small text, renders a paragraph element
38
+ * @deprecated Since v2, use `Text` with variant 'small'.
39
39
  * @example
40
- * <Small>I'm some small text!</Small>
41
- * <Small isMuted>I'm some muted small text.</Small>
40
+ * <Text variant='small' as='small'>I'm some small text!</Text>
42
41
  */
43
42
  exports.Small = react_1.default.forwardRef(function (props, ref) {
44
43
  var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
package/cjs/core/Typography/Subheading/Subheading.d.ts CHANGED
@@ -8,10 +8,9 @@ export declare type SubheadingProps = {
8
8
  isMuted?: boolean;
9
9
  } & React.HTMLAttributes<HTMLHeadingElement>;
10
10
  /**
11
- * The third biggest title on the page, renders a h3 element
11
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
12
12
  * @example
13
- * <Subheading>I'm a subheading!</Subheading>
14
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
13
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
15
14
  */
16
15
  export declare const Subheading: React.ForwardRefExoticComponent<{
17
16
  /**
package/cjs/core/Typography/Subheading/Subheading.js CHANGED
@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
35
35
  var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
- * The third biggest title on the page, renders a h3 element
38
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
39
39
  * @example
40
- * <Subheading>I'm a subheading!</Subheading>
41
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
40
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
42
41
  */
43
42
  exports.Subheading = react_1.default.forwardRef(function (props, ref) {
44
43
  var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
package/cjs/core/Typography/Text/Text.d.ts CHANGED
@@ -30,6 +30,8 @@ export declare type TextProps<T extends React.ElementType = 'div'> = Polymorphic
30
30
  declare type TextComponent = PolymorphicForwardRefComponent<'div', TextOwnProps>;
31
31
  /**
32
32
  * Polymorphic typography component to render any kind of text as any kind of element.
33
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
34
+ *
33
35
  * @example
34
36
  * <Text>Some normal paragraph text rendered as a div</Text>
35
37
  * @example
package/cjs/core/Typography/Text/Text.js CHANGED
@@ -36,6 +36,8 @@ var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
38
  * Polymorphic typography component to render any kind of text as any kind of element.
39
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
40
+ *
39
41
  * @example
40
42
  * <Text>Some normal paragraph text rendered as a div</Text>
41
43
  * @example
package/cjs/core/Typography/Title/Title.d.ts CHANGED
@@ -8,10 +8,9 @@ export declare type TitleProps = {
8
8
  isMuted?: boolean;
9
9
  } & React.HTMLAttributes<HTMLHeadingElement>;
10
10
  /**
11
- * The second biggest title on the page, renders a h2 element
11
+ * @deprecated Since v2, use `Text` with variant 'title'.
12
12
  * @example
13
- * <Title>I'm a title!</Title>
14
- * <Title isMuted>I'm a muted title.</Title>
13
+ * <Text variant='title' as='h2'>I'm a title!</Text>
15
14
  */
16
15
  export declare const Title: React.ForwardRefExoticComponent<{
17
16
  /**
package/cjs/core/Typography/Title/Title.js CHANGED
@@ -35,10 +35,9 @@ var react_1 = __importDefault(require("react"));
35
35
  var utils_1 = require("../../utils");
36
36
  require("@itwin/itwinui-css/css/text.css");
37
37
  /**
38
- * The second biggest title on the page, renders a h2 element
38
+ * @deprecated Since v2, use `Text` with variant 'title'.
39
39
  * @example
40
- * <Title>I'm a title!</Title>
41
- * <Title isMuted>I'm a muted title.</Title>
40
+ * <Text variant='title' as='h2'>I'm a title!</Text>
42
41
  */
43
42
  exports.Title = react_1.default.forwardRef(function (props, ref) {
44
43
  var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
package/cjs/core/index.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  export { Alert } from './Alert';
2
2
  export type { AlertProps } from './Alert';
3
+ export { Avatar, UserIcon } from './Avatar';
4
+ export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar';
5
+ export { AvatarGroup, UserIconGroup } from './AvatarGroup';
6
+ export type { AvatarGroupProps, UserIconGroupProps } from './AvatarGroup';
3
7
  export { Backdrop } from './Backdrop';
4
8
  export type { BackdropProps } from './Backdrop';
5
9
  export { Badge } from './Badge';
@@ -36,8 +40,8 @@ export { Footer, defaultFooterElements } from './Footer';
36
40
  export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
37
41
  export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
38
42
  export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
39
- export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
40
- export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
43
+ export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
44
+ export type { VerticalTabsProps, TabProps, HorizontalTabsProps } from './Tabs';
41
45
  export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
42
46
  export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
43
47
  export { Input } from './Input';
@@ -96,11 +100,7 @@ export { Tree, TreeNode, TreeNodeExpander } from './Tree';
96
100
  export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree';
97
101
  export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
98
102
  export type { BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
99
- export { UserIcon } from './UserIcon';
100
- export type { UserIconProps, StatusTitles, UserIconStatus } from './UserIcon';
101
- export { UserIconGroup } from './UserIconGroup';
102
- export type { UserIconGroupProps } from './UserIconGroup';
103
- export { Wizard } from './Wizard';
104
- export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
103
+ export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
104
+ export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
105
105
  export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
106
106
  export type { ThemeType, MiddleTextTruncationProps } from './utils';