@itwin/itwinui-react 1.48.0 → 2.0.0-dev.0

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 (267) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +4 -22
  3. package/cjs/core/Alert/Alert.d.ts +7 -6
  4. package/cjs/core/Alert/Alert.js +12 -7
  5. package/cjs/core/Avatar/Avatar.d.ts +69 -0
  6. package/cjs/core/{UserIcon/UserIcon.js → Avatar/Avatar.js} +15 -11
  7. package/cjs/core/Avatar/index.d.ts +4 -0
  8. package/cjs/core/{UserIcon → Avatar}/index.js +5 -4
  9. package/cjs/core/AvatarGroup/AvatarGroup.d.ts +70 -0
  10. package/cjs/core/{UserIconGroup/UserIconGroup.js → AvatarGroup/AvatarGroup.js} +23 -19
  11. package/cjs/core/AvatarGroup/index.d.ts +4 -0
  12. package/cjs/core/{UserIconGroup → AvatarGroup}/index.js +5 -4
  13. package/cjs/core/Badge/Badge.js +2 -4
  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 -1
  17. package/cjs/core/Buttons/IconButton/IconButton.js +3 -9
  18. package/cjs/core/Buttons/IdeasButton/IdeasButton.js +1 -1
  19. package/cjs/core/Buttons/SplitButton/SplitButton.js +4 -6
  20. package/cjs/core/Checkbox/Checkbox.d.ts +1 -29
  21. package/cjs/core/Checkbox/Checkbox.js +3 -3
  22. package/cjs/core/ColorPicker/ColorBuilder.js +16 -27
  23. package/cjs/core/ColorPicker/ColorSwatch.d.ts +1 -1
  24. package/cjs/core/ColorPicker/ColorSwatch.js +1 -6
  25. package/cjs/core/ComboBox/ComboBoxDropdown.d.ts +1 -1
  26. package/cjs/core/ComboBox/ComboBoxMenu.js +2 -4
  27. package/cjs/core/Dialog/Dialog.d.ts +4 -4
  28. package/cjs/core/Dialog/Dialog.js +1 -1
  29. package/cjs/core/Dialog/DialogBackdrop.d.ts +1 -1
  30. package/cjs/core/Dialog/DialogBackdrop.js +5 -2
  31. package/cjs/core/Dialog/DialogMain.d.ts +1 -1
  32. package/cjs/core/Dialog/DialogMain.js +7 -1
  33. package/cjs/core/Dialog/DialogTitleBar.d.ts +1 -1
  34. package/cjs/core/ExpandableBlock/ExpandableBlock.js +4 -4
  35. package/cjs/core/Header/Header.d.ts +16 -6
  36. package/cjs/core/Header/Header.js +7 -9
  37. package/cjs/core/Header/HeaderBasicButton.d.ts +6 -0
  38. package/cjs/core/Header/HeaderBasicButton.js +52 -0
  39. package/cjs/core/Header/HeaderBreadcrumbs.js +6 -4
  40. package/cjs/core/Header/HeaderButton.d.ts +3 -2
  41. package/cjs/core/Header/HeaderButton.js +10 -18
  42. package/cjs/core/Header/HeaderDropdownButton.d.ts +6 -0
  43. package/cjs/core/Header/HeaderDropdownButton.js +56 -0
  44. package/cjs/core/Header/HeaderLogo.js +3 -3
  45. package/cjs/core/Header/HeaderSplitButton.d.ts +6 -0
  46. package/cjs/core/Header/HeaderSplitButton.js +56 -0
  47. package/cjs/core/Input/Input.d.ts +1 -1
  48. package/cjs/core/Input/Input.js +3 -4
  49. package/cjs/core/InputGroup/InputGroup.d.ts +1 -1
  50. package/cjs/core/InputGroup/InputGroup.js +1 -1
  51. package/cjs/core/Label/Label.d.ts +1 -1
  52. package/cjs/core/Label/Label.js +1 -1
  53. package/cjs/core/LabeledInput/LabeledInput.d.ts +2 -2
  54. package/cjs/core/LabeledInput/LabeledInput.js +1 -1
  55. package/cjs/core/LabeledSelect/LabeledSelect.d.ts +1 -1
  56. package/cjs/core/LabeledSelect/LabeledSelect.js +1 -1
  57. package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts +1 -1
  58. package/cjs/core/LabeledTextarea/LabeledTextarea.js +1 -1
  59. package/cjs/core/Radio/Radio.d.ts +1 -29
  60. package/cjs/core/Radio/Radio.js +3 -3
  61. package/cjs/core/RadioTiles/RadioTileGroup.d.ts +1 -1
  62. package/cjs/core/RadioTiles/RadioTileGroup.js +1 -1
  63. package/cjs/core/Select/Select.d.ts +1 -1
  64. package/cjs/core/Select/Select.js +9 -12
  65. package/cjs/core/Select/SelectTag.d.ts +1 -1
  66. package/cjs/core/Select/SelectTag.js +1 -1
  67. package/cjs/core/SideNavigation/SidenavButton.js +1 -2
  68. package/cjs/core/Stepper/Stepper.d.ts +40 -0
  69. package/cjs/core/{Wizard/Wizard.js → Stepper/Stepper.js} +11 -28
  70. package/cjs/core/{Wizard/Step.d.ts → Stepper/StepperStep.d.ts} +6 -7
  71. package/cjs/core/{Wizard/Step.js → Stepper/StepperStep.js} +10 -10
  72. package/cjs/core/Stepper/Wizard.d.ts +46 -0
  73. package/cjs/core/Stepper/Wizard.js +55 -0
  74. package/cjs/core/Stepper/WorkflowDiagram.d.ts +6 -0
  75. package/cjs/core/Stepper/WorkflowDiagram.js +43 -0
  76. package/cjs/core/Stepper/WorkflowDiagramStep.d.ts +5 -0
  77. package/cjs/core/Stepper/WorkflowDiagramStep.js +42 -0
  78. package/cjs/core/Stepper/index.d.ts +8 -0
  79. package/cjs/core/{Wizard → Stepper}/index.js +5 -1
  80. package/cjs/core/Surface/Surface.js +2 -4
  81. package/cjs/core/Table/SubRowExpander.js +1 -1
  82. package/cjs/core/Table/Table.d.ts +5 -4
  83. package/cjs/core/Table/Table.js +30 -21
  84. package/cjs/core/Table/TableCell.js +4 -4
  85. package/cjs/core/Table/TablePaginator.js +14 -15
  86. package/cjs/core/Table/TableRowMemoized.d.ts +2 -0
  87. package/cjs/core/Table/TableRowMemoized.js +10 -13
  88. package/cjs/core/Table/cells/DefaultCell.js +4 -9
  89. package/cjs/core/Table/columns/actionColumn.js +1 -1
  90. package/cjs/core/Table/columns/expanderColumn.js +1 -1
  91. package/cjs/core/Table/filters/BaseFilter.js +1 -1
  92. package/cjs/core/Table/filters/FilterToggle.js +1 -1
  93. package/cjs/core/Table/hooks/useColumnDragAndDrop.js +4 -4
  94. package/cjs/core/Table/hooks/useResizeColumns.js +110 -106
  95. package/cjs/core/Tabs/Tab.d.ts +0 -8
  96. package/cjs/core/Tabs/Tab.js +1 -5
  97. package/cjs/core/Tabs/Tabs.js +8 -11
  98. package/cjs/core/Tabs/index.d.ts +2 -2
  99. package/cjs/core/Tabs/index.js +1 -2
  100. package/cjs/core/Textarea/Textarea.d.ts +1 -1
  101. package/cjs/core/Textarea/Textarea.js +2 -2
  102. package/cjs/core/ThemeProvider/ThemeProvider.d.ts +27 -17
  103. package/cjs/core/ThemeProvider/ThemeProvider.js +64 -7
  104. package/cjs/core/Tile/Tile.d.ts +19 -1
  105. package/cjs/core/Tile/Tile.js +35 -12
  106. package/cjs/core/Toast/Toast.d.ts +3 -3
  107. package/cjs/core/Toast/Toast.js +3 -3
  108. package/cjs/core/Toast/ToastWrapper.d.ts +1 -1
  109. package/cjs/core/Toast/ToastWrapper.js +1 -1
  110. package/cjs/core/Tree/TreeNode.js +1 -7
  111. package/cjs/core/index.d.ts +8 -8
  112. package/cjs/core/index.js +13 -10
  113. package/cjs/core/utils/components/Popover.d.ts +2 -2
  114. package/cjs/core/utils/components/Popover.js +1 -1
  115. package/cjs/core/utils/components/Resizer.d.ts +5 -0
  116. package/cjs/core/utils/components/Resizer.js +7 -1
  117. package/cjs/core/utils/components/VisuallyHidden.d.ts +1 -0
  118. package/cjs/core/utils/components/VisuallyHidden.js +1 -0
  119. package/cjs/core/utils/functions/colors.d.ts +1 -1
  120. package/cjs/core/utils/functions/colors.js +1 -1
  121. package/cjs/core/utils/functions/dom.js +1 -0
  122. package/cjs/core/utils/hooks/index.d.ts +1 -0
  123. package/cjs/core/utils/hooks/index.js +1 -0
  124. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.d.ts +7 -0
  125. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +17 -0
  126. package/cjs/core/utils/hooks/useMediaQuery.js +2 -1
  127. package/cjs/core/utils/hooks/useTheme.d.ts +20 -3
  128. package/cjs/core/utils/hooks/useTheme.js +57 -58
  129. package/esm/core/Alert/Alert.d.ts +7 -6
  130. package/esm/core/Alert/Alert.js +12 -7
  131. package/esm/core/Avatar/Avatar.d.ts +69 -0
  132. package/esm/core/{UserIcon/UserIcon.js → Avatar/Avatar.js} +13 -9
  133. package/esm/core/Avatar/index.d.ts +4 -0
  134. package/esm/core/{UserIcon → Avatar}/index.js +2 -2
  135. package/esm/core/AvatarGroup/AvatarGroup.d.ts +70 -0
  136. package/esm/core/{UserIconGroup/UserIconGroup.js → AvatarGroup/AvatarGroup.js} +21 -17
  137. package/esm/core/AvatarGroup/index.d.ts +4 -0
  138. package/esm/core/{UserIconGroup → AvatarGroup}/index.js +2 -2
  139. package/esm/core/Badge/Badge.js +3 -5
  140. package/esm/core/ButtonGroup/ButtonGroup.d.ts +1 -1
  141. package/esm/core/Buttons/Button/Button.js +5 -14
  142. package/esm/core/Buttons/DropdownButton/DropdownButton.js +1 -1
  143. package/esm/core/Buttons/IconButton/IconButton.js +3 -9
  144. package/esm/core/Buttons/IdeasButton/IdeasButton.js +1 -1
  145. package/esm/core/Buttons/SplitButton/SplitButton.js +4 -6
  146. package/esm/core/Checkbox/Checkbox.d.ts +1 -29
  147. package/esm/core/Checkbox/Checkbox.js +3 -3
  148. package/esm/core/ColorPicker/ColorBuilder.js +17 -28
  149. package/esm/core/ColorPicker/ColorSwatch.d.ts +1 -1
  150. package/esm/core/ColorPicker/ColorSwatch.js +2 -7
  151. package/esm/core/ComboBox/ComboBoxDropdown.d.ts +1 -1
  152. package/esm/core/ComboBox/ComboBoxMenu.js +2 -4
  153. package/esm/core/Dialog/Dialog.d.ts +4 -4
  154. package/esm/core/Dialog/Dialog.js +1 -1
  155. package/esm/core/Dialog/DialogBackdrop.d.ts +1 -1
  156. package/esm/core/Dialog/DialogBackdrop.js +5 -2
  157. package/esm/core/Dialog/DialogMain.d.ts +1 -1
  158. package/esm/core/Dialog/DialogMain.js +7 -1
  159. package/esm/core/Dialog/DialogTitleBar.d.ts +1 -1
  160. package/esm/core/ExpandableBlock/ExpandableBlock.js +4 -4
  161. package/esm/core/Header/Header.d.ts +16 -6
  162. package/esm/core/Header/Header.js +7 -9
  163. package/esm/core/Header/HeaderBasicButton.d.ts +6 -0
  164. package/esm/core/Header/HeaderBasicButton.js +46 -0
  165. package/esm/core/Header/HeaderBreadcrumbs.js +6 -4
  166. package/esm/core/Header/HeaderButton.d.ts +3 -2
  167. package/esm/core/Header/HeaderButton.js +10 -18
  168. package/esm/core/Header/HeaderDropdownButton.d.ts +6 -0
  169. package/esm/core/Header/HeaderDropdownButton.js +50 -0
  170. package/esm/core/Header/HeaderLogo.js +3 -3
  171. package/esm/core/Header/HeaderSplitButton.d.ts +6 -0
  172. package/esm/core/Header/HeaderSplitButton.js +50 -0
  173. package/esm/core/Input/Input.d.ts +1 -1
  174. package/esm/core/Input/Input.js +3 -4
  175. package/esm/core/InputGroup/InputGroup.d.ts +1 -1
  176. package/esm/core/InputGroup/InputGroup.js +1 -1
  177. package/esm/core/Label/Label.d.ts +1 -1
  178. package/esm/core/Label/Label.js +1 -1
  179. package/esm/core/LabeledInput/LabeledInput.d.ts +2 -2
  180. package/esm/core/LabeledInput/LabeledInput.js +1 -1
  181. package/esm/core/LabeledSelect/LabeledSelect.d.ts +1 -1
  182. package/esm/core/LabeledSelect/LabeledSelect.js +1 -1
  183. package/esm/core/LabeledTextarea/LabeledTextarea.d.ts +1 -1
  184. package/esm/core/LabeledTextarea/LabeledTextarea.js +1 -1
  185. package/esm/core/Radio/Radio.d.ts +1 -29
  186. package/esm/core/Radio/Radio.js +3 -3
  187. package/esm/core/RadioTiles/RadioTileGroup.d.ts +1 -1
  188. package/esm/core/RadioTiles/RadioTileGroup.js +1 -1
  189. package/esm/core/Select/Select.d.ts +1 -1
  190. package/esm/core/Select/Select.js +9 -12
  191. package/esm/core/Select/SelectTag.d.ts +1 -1
  192. package/esm/core/Select/SelectTag.js +1 -1
  193. package/esm/core/SideNavigation/SidenavButton.js +1 -2
  194. package/esm/core/Stepper/Stepper.d.ts +40 -0
  195. package/esm/core/{Wizard/Wizard.js → Stepper/Stepper.js} +10 -27
  196. package/esm/core/{Wizard/Step.d.ts → Stepper/StepperStep.d.ts} +6 -7
  197. package/esm/core/{Wizard/Step.js → Stepper/StepperStep.js} +8 -8
  198. package/esm/core/Stepper/Wizard.d.ts +46 -0
  199. package/esm/core/Stepper/Wizard.js +49 -0
  200. package/esm/core/Stepper/WorkflowDiagram.d.ts +6 -0
  201. package/esm/core/Stepper/WorkflowDiagram.js +37 -0
  202. package/esm/core/Stepper/WorkflowDiagramStep.d.ts +5 -0
  203. package/esm/core/Stepper/WorkflowDiagramStep.js +35 -0
  204. package/esm/core/Stepper/index.d.ts +8 -0
  205. package/esm/core/{Wizard → Stepper}/index.js +2 -0
  206. package/esm/core/Surface/Surface.js +3 -5
  207. package/esm/core/Table/SubRowExpander.js +1 -1
  208. package/esm/core/Table/Table.d.ts +5 -4
  209. package/esm/core/Table/Table.js +30 -21
  210. package/esm/core/Table/TableCell.js +4 -4
  211. package/esm/core/Table/TablePaginator.js +14 -15
  212. package/esm/core/Table/TableRowMemoized.d.ts +2 -0
  213. package/esm/core/Table/TableRowMemoized.js +10 -13
  214. package/esm/core/Table/cells/DefaultCell.js +4 -9
  215. package/esm/core/Table/columns/actionColumn.js +1 -1
  216. package/esm/core/Table/columns/expanderColumn.js +1 -1
  217. package/esm/core/Table/filters/BaseFilter.js +1 -1
  218. package/esm/core/Table/filters/FilterToggle.js +1 -1
  219. package/esm/core/Table/hooks/useColumnDragAndDrop.js +4 -4
  220. package/esm/core/Table/hooks/useResizeColumns.js +110 -106
  221. package/esm/core/Tabs/Tab.d.ts +0 -8
  222. package/esm/core/Tabs/Tab.js +0 -4
  223. package/esm/core/Tabs/Tabs.js +9 -12
  224. package/esm/core/Tabs/index.d.ts +2 -2
  225. package/esm/core/Tabs/index.js +1 -1
  226. package/esm/core/Textarea/Textarea.d.ts +1 -1
  227. package/esm/core/Textarea/Textarea.js +2 -2
  228. package/esm/core/ThemeProvider/ThemeProvider.d.ts +27 -17
  229. package/esm/core/ThemeProvider/ThemeProvider.js +64 -6
  230. package/esm/core/Tile/Tile.d.ts +19 -1
  231. package/esm/core/Tile/Tile.js +36 -13
  232. package/esm/core/Toast/Toast.d.ts +3 -3
  233. package/esm/core/Toast/Toast.js +3 -3
  234. package/esm/core/Toast/ToastWrapper.d.ts +1 -1
  235. package/esm/core/Toast/ToastWrapper.js +1 -1
  236. package/esm/core/Tree/TreeNode.js +2 -8
  237. package/esm/core/index.d.ts +8 -8
  238. package/esm/core/index.js +4 -4
  239. package/esm/core/utils/components/Popover.d.ts +2 -2
  240. package/esm/core/utils/components/Popover.js +1 -1
  241. package/esm/core/utils/components/Resizer.d.ts +5 -0
  242. package/esm/core/utils/components/Resizer.js +7 -1
  243. package/esm/core/utils/components/VisuallyHidden.d.ts +1 -0
  244. package/esm/core/utils/components/VisuallyHidden.js +1 -0
  245. package/esm/core/utils/functions/colors.d.ts +1 -1
  246. package/esm/core/utils/functions/colors.js +1 -1
  247. package/esm/core/utils/functions/dom.js +1 -0
  248. package/esm/core/utils/hooks/index.d.ts +1 -0
  249. package/esm/core/utils/hooks/index.js +1 -0
  250. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.d.ts +7 -0
  251. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +11 -0
  252. package/esm/core/utils/hooks/useMediaQuery.js +2 -1
  253. package/esm/core/utils/hooks/useTheme.d.ts +20 -3
  254. package/esm/core/utils/hooks/useTheme.js +56 -57
  255. package/package.json +3 -2
  256. package/cjs/core/UserIcon/UserIcon.d.ts +0 -57
  257. package/cjs/core/UserIcon/index.d.ts +0 -4
  258. package/cjs/core/UserIconGroup/UserIconGroup.d.ts +0 -62
  259. package/cjs/core/UserIconGroup/index.d.ts +0 -4
  260. package/cjs/core/Wizard/Wizard.d.ts +0 -54
  261. package/cjs/core/Wizard/index.d.ts +0 -4
  262. package/esm/core/UserIcon/UserIcon.d.ts +0 -57
  263. package/esm/core/UserIcon/index.d.ts +0 -4
  264. package/esm/core/UserIconGroup/UserIconGroup.d.ts +0 -62
  265. package/esm/core/UserIconGroup/index.d.ts +0 -4
  266. package/esm/core/Wizard/Wizard.d.ts +0 -54
  267. package/esm/core/Wizard/index.d.ts +0 -4
package/esm/core/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -1,21 +1,31 @@
1
1
  import React from 'react';
2
- import { ThemeOptions, ThemeType } from '../utils';
3
- export declare type ThemeProviderProps = {
4
- /**
5
- * Theme to be applied. If not set, light theme will be used.
6
- */
7
- theme?: ThemeType;
8
- /**
9
- * Optional children.
10
- */
11
- children?: React.ReactNode;
12
- /**
13
- * Options that can be specified to override default theming behavior.
14
- */
15
- themeOptions?: ThemeOptions;
16
- };
2
+ import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType, UseThemeProps } from '../utils';
3
+ import '@itwin/itwinui-css/css/global.css';
4
+ import '@itwin/itwinui-variables/index.css';
5
+ export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, UseThemeProps>;
17
6
  /**
18
- * Component providing global styles that are required for all components and allows changing theme.
7
+ * This component provides global styles and applies theme to the entire tree
8
+ * that it is wrapping around. The `theme` prop is optional and defaults to the
9
+ * light theme.
10
+ *
11
+ * If you want to theme the entire app, you should use this component at the root.
12
+ * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
13
+ *
14
+ * You can also use this component to apply a different theme to only a part of the tree.
15
+ *
16
+ * @example
17
+ * <ThemeProvider theme='os'>
18
+ * <App />
19
+ * </ThemeProvider>
20
+ *
21
+ * @example
22
+ * <ThemeProvider as='body'>
23
+ * <App />
24
+ * </ThemeProvider>
19
25
  */
20
- export declare const ThemeProvider: (props: ThemeProviderProps) => JSX.Element;
26
+ export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", UseThemeProps>;
21
27
  export default ThemeProvider;
28
+ export declare const ThemeContext: React.Context<{
29
+ theme?: ThemeType | undefined;
30
+ themeOptions?: ThemeOptions | undefined;
31
+ } | undefined>;
package/esm/core/ThemeProvider/ThemeProvider.js CHANGED
@@ -1,15 +1,73 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
1
23
  /*---------------------------------------------------------------------------------------------
2
24
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
25
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
26
  *--------------------------------------------------------------------------------------------*/
5
27
  import React from 'react';
6
- import { useTheme } from '../utils';
28
+ import cx from 'classnames';
29
+ import { useTheme, useMediaQuery } from '../utils';
30
+ import '@itwin/itwinui-css/css/global.css';
31
+ import '@itwin/itwinui-variables/index.css';
7
32
  /**
8
- * Component providing global styles that are required for all components and allows changing theme.
33
+ * This component provides global styles and applies theme to the entire tree
34
+ * that it is wrapping around. The `theme` prop is optional and defaults to the
35
+ * light theme.
36
+ *
37
+ * If you want to theme the entire app, you should use this component at the root.
38
+ * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
39
+ *
40
+ * You can also use this component to apply a different theme to only a part of the tree.
41
+ *
42
+ * @example
43
+ * <ThemeProvider theme='os'>
44
+ * <App />
45
+ * </ThemeProvider>
46
+ *
47
+ * @example
48
+ * <ThemeProvider as='body'>
49
+ * <App />
50
+ * </ThemeProvider>
9
51
  */
10
- export var ThemeProvider = function (props) {
11
- var theme = props.theme, children = props.children, themeOptions = props.themeOptions;
52
+ export var ThemeProvider = React.forwardRef(function (props, ref) {
53
+ var _a;
54
+ 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"]);
55
+ var hasChildren = React.Children.count(children) > 0;
56
+ var parentContext = React.useContext(ThemeContext);
57
+ var prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
58
+ var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
59
+ var shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
60
+ var shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
61
+ // only provide context if wrapped around children
62
+ return hasChildren ? (React.createElement(ThemeContext.Provider, { value: { theme: theme, themeOptions: themeOptions } },
63
+ React.createElement(Element, __assign({ className: cx('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: ref }, rest), children))) : (
64
+ // otherwise just apply theme on the root using this wrapper component
65
+ React.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 }));
66
+ });
67
+ export default ThemeProvider;
68
+ export var ThemeContext = React.createContext(undefined);
69
+ var ThemeLogicWrapper = function (_a) {
70
+ var theme = _a.theme, themeOptions = _a.themeOptions;
12
71
  useTheme(theme, themeOptions);
13
- return React.createElement(React.Fragment, null, children);
72
+ return React.createElement(React.Fragment, null);
14
73
  };
15
- export default ThemeProvider;
package/esm/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/esm/core/Tile/Tile.js CHANGED
@@ -29,10 +29,11 @@ import cx from 'classnames';
29
29
  import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
30
30
  import SvgMore from '@itwin/itwinui-icons-react/cjs/icons/More';
31
31
  import SvgNew from '@itwin/itwinui-icons-react/cjs/icons/New';
32
- import { useTheme } from '../utils';
32
+ import { StatusIconMap, useTheme } from '../utils';
33
33
  import '@itwin/itwinui-css/css/tile.css';
34
34
  import { DropdownMenu } from '../DropdownMenu';
35
35
  import { IconButton } from '../Buttons';
36
+ import { ProgressRadial } from '../ProgressIndicators';
36
37
  /**
37
38
  * Tile component that displays content and actions in a card-like format.
38
39
  * @example
@@ -51,17 +52,21 @@ import { IconButton } from '../Buttons';
51
52
  * />
52
53
  */
53
54
  export var Tile = function (props) {
54
- 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"]);
55
+ var _a;
56
+ 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"]);
55
57
  useTheme();
56
- var _b = React.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
58
+ var _e = React.useState(false), isMenuVisible = _e[0], setIsMenuVisible = _e[1];
57
59
  var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
58
60
  var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
59
- return (React.createElement("div", __assign({ className: cx('iui-tile', {
60
- 'iui-folder': variant === 'folder',
61
- 'iui-new': isNew,
62
- 'iui-selected': isSelected,
63
- 'iui-actionable': isActionable,
64
- }, className), tabIndex: isActionable ? 0 : undefined }, rest),
61
+ return (React.createElement("div", __assign({ className: cx('iui-tile', (_a = {
62
+ 'iui-folder': variant === 'folder',
63
+ 'iui-new': isNew,
64
+ 'iui-selected': isSelected,
65
+ 'iui-actionable': isActionable
66
+ },
67
+ _a["iui-".concat(status)] = !!status,
68
+ _a['iui-loading'] = isLoading,
69
+ _a), className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined }, rest),
65
70
  thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
66
71
  typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
67
72
  className: 'iui-tile-thumbnail-picture',
@@ -70,17 +75,18 @@ export var Tile = function (props) {
70
75
  })) : (thumbnail),
71
76
  leftIcon &&
72
77
  React.cloneElement(leftIcon, {
73
- className: 'iui-small iui-tile-thumbnail-type-indicator',
78
+ className: 'iui-tile-thumbnail-type-indicator',
79
+ 'data-iui-size': 'small',
74
80
  }),
75
81
  rightIcon &&
76
82
  React.cloneElement(rightIcon, {
77
- className: 'iui-small iui-tile-thumbnail-quick-action',
83
+ className: 'iui-tile-thumbnail-quick-action',
84
+ 'data-iui-size': 'small',
78
85
  }),
79
86
  badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
80
87
  React.createElement("div", { className: 'iui-tile-content' },
81
88
  React.createElement("div", { className: 'iui-tile-name' },
82
- isSelected && (React.createElement(SvgCheckmark, { className: cx('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
83
- isNew && (React.createElement(SvgNew, { className: cx('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
89
+ React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
84
90
  React.createElement("span", { className: 'iui-tile-name-label' }, name)),
85
91
  description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
86
92
  metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
@@ -103,4 +109,21 @@ export var Tile = function (props) {
103
109
  children),
104
110
  buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
105
111
  };
112
+ var TitleIcon = function (_a) {
113
+ 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;
114
+ var StatusIcon = !!status && StatusIconMap[status];
115
+ if (isLoading) {
116
+ return (React.createElement(ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
117
+ }
118
+ if (isSelected) {
119
+ return React.createElement(SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
120
+ }
121
+ if (isNew) {
122
+ return React.createElement(SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
123
+ }
124
+ if (StatusIcon) {
125
+ return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
126
+ }
127
+ return null;
128
+ };
106
129
  export default Tile;
package/esm/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/esm/core/Toast/Toast.js CHANGED
@@ -29,10 +29,10 @@ import { Transition } from 'react-transition-group';
29
29
  import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
30
30
  import cx from 'classnames';
31
31
  import { useTheme, getWindow, StatusIconMap } from '../utils';
32
- import '@itwin/itwinui-css/css/toast-notification.css';
32
+ import '@itwin/itwinui-css/css/toast.css';
33
33
  import { IconButton } from '../Buttons';
34
34
  /**
35
- * Generic Toast Notification Component
35
+ * Generic Toast Component
36
36
  * @example
37
37
  * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
38
38
  * <Toast type='temporary' content='Processing completed.' category='positive' />
@@ -127,7 +127,7 @@ export var Toast = function (props) {
127
127
  React.createElement(ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
128
128
  };
129
129
  /**
130
- * The presentational part of a toast notification, without any animation or logic.
130
+ * The presentational part of a toast, without any animation or logic.
131
131
  * @private
132
132
  */
133
133
  export var ToastPresentation = function (props) {
package/esm/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/esm/core/Toast/ToastWrapper.js CHANGED
@@ -13,7 +13,7 @@ var __assign = (this && this.__assign) || function () {
13
13
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
14
14
  * See LICENSE.md in the project root for license terms and full copyright notice.
15
15
  *--------------------------------------------------------------------------------------------*/
16
- import '@itwin/itwinui-css/css/toast-notification.css';
16
+ import '@itwin/itwinui-css/css/toast.css';
17
17
  import React from 'react';
18
18
  import cx from 'classnames';
19
19
  import Toast from './Toast';
package/esm/core/Tree/TreeNode.js CHANGED
@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
25
25
  * See LICENSE.md in the project root for license terms and full copyright notice.
26
26
  *--------------------------------------------------------------------------------------------*/
27
27
  import React from 'react';
28
- import { getFocusableElements, getWindow, useTheme, } from '../utils';
28
+ import { getFocusableElements, useTheme } from '../utils';
29
29
  import '@itwin/itwinui-css/css/tree.css';
30
30
  import cx from 'classnames';
31
31
  import { TreeNodeExpander } from './TreeNodeExpander';
@@ -55,12 +55,6 @@ export var TreeNode = function (props) {
55
55
  var _e = useTreeContext(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, scrollToParent = _e.scrollToParent, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
56
56
  var _g = React.useState(false), isFocused = _g[0], setIsFocused = _g[1];
57
57
  var nodeRef = React.useRef(null);
58
- var styleDepth = React.useMemo(function () {
59
- var _a, _b, _c;
60
- return ((_c = (_b = (_a = 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)))
61
- ? { '--level': nodeDepth }
62
- : { marginLeft: nodeDepth ? nodeDepth * 28 : 0 };
63
- }, [nodeDepth]);
64
58
  var onKeyDown = function (event) {
65
59
  var _a, _b, _c, _d, _e, _f;
66
60
  var isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
@@ -138,7 +132,7 @@ export var TreeNode = function (props) {
138
132
  React.createElement("div", { className: cx('iui-tree-node', {
139
133
  'iui-active': isSelected,
140
134
  'iui-disabled': isDisabled,
141
- }), style: styleDepth, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
135
+ }), style: { '--level': nodeDepth }, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
142
136
  checkbox && React.isValidElement(checkbox)
143
137
  ? React.cloneElement(checkbox, {
144
138
  className: cx('iui-tree-node-checkbox', checkbox.props.className),
package/esm/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, 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';
package/esm/core/index.js CHANGED
@@ -3,6 +3,8 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  export { Alert } from './Alert';
6
+ export { Avatar, UserIcon } from './Avatar';
7
+ export { AvatarGroup, UserIconGroup } from './AvatarGroup';
6
8
  export { Backdrop } from './Backdrop';
7
9
  export { Badge } from './Badge';
8
10
  export { Breadcrumbs } from './Breadcrumbs';
@@ -21,7 +23,7 @@ export { Fieldset } from './Fieldset';
21
23
  export { FileUpload, FileUploadTemplate } from './FileUpload';
22
24
  export { Footer, defaultFooterElements } from './Footer';
23
25
  export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
24
- export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
26
+ export { VerticalTabs, Tab, HorizontalTabs } from './Tabs';
25
27
  export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
26
28
  export { Input } from './Input';
27
29
  export { Label } from './Label';
@@ -51,7 +53,5 @@ export { ToggleSwitch } from './ToggleSwitch';
51
53
  export { Tooltip } from './Tooltip';
52
54
  export { Tree, TreeNode, TreeNodeExpander } from './Tree';
53
55
  export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
54
- export { UserIcon } from './UserIcon';
55
- export { UserIconGroup } from './UserIconGroup';
56
- export { Wizard } from './Wizard';
56
+ export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
57
57
  export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
package/esm/core/utils/components/Popover.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { TippyProps } from '@tippyjs/react';
3
3
  import type { Placement, Instance } from 'tippy.js';
4
4
  export declare type PopoverInstance = Instance;
5
- import '@itwin/itwinui-css/css/popover.css';
5
+ import '@itwin/itwinui-css/css/utils.css';
6
6
  export declare type PopoverProps = {
7
7
  /**
8
8
  * Controlled flag for whether the popover is visible.
@@ -26,7 +26,7 @@ export declare type PopoverProps = {
26
26
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
27
27
  * @private
28
28
  */
29
- export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
29
+ export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "className" | "role" | "children" | "plugins" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
30
30
  /**
31
31
  * Plugin to hide Popover when either Esc key is pressed,
32
32
  * or when the content inside is not tabbable and Tab key is pressed.
package/esm/core/utils/components/Popover.js CHANGED
@@ -26,7 +26,7 @@ import React from 'react';
26
26
  import cx from 'classnames';
27
27
  import Tippy from '@tippyjs/react';
28
28
  import { useMergedRefs } from '../hooks/useMergedRefs';
29
- import '@itwin/itwinui-css/css/popover.css';
29
+ import '@itwin/itwinui-css/css/utils.css';
30
30
  /**
31
31
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
32
32
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
package/esm/core/utils/components/Resizer.d.ts CHANGED
@@ -9,6 +9,11 @@ export declare type ResizerProps = {
9
9
  * If not passed, viewport will be used.
10
10
  */
11
11
  containerRef?: React.RefObject<HTMLElement>;
12
+ /**
13
+ * Callback that is being called on resize start.
14
+ * Useful to set state, style, or other properties when resizing is started.
15
+ */
16
+ onResizeStart?: () => void;
12
17
  /**
13
18
  * Callback that is being called on resize end.
14
19
  * Useful to preserve state if element is being closed.
package/esm/core/utils/components/Resizer.js CHANGED
@@ -17,7 +17,8 @@ import { getBoundedValue, getTranslateValues } from '../functions';
17
17
  * );
18
18
  */
19
19
  export var Resizer = function (props) {
20
- var elementRef = props.elementRef, containerRef = props.containerRef, onResizeEnd = props.onResizeEnd;
20
+ var elementRef = props.elementRef, containerRef = props.containerRef, onResizeStart = props.onResizeStart, onResizeEnd = props.onResizeEnd;
21
+ var isResizing = React.useRef(false);
21
22
  var onResizePointerDown = function (event) {
22
23
  if (!elementRef.current || event.button !== 0) {
23
24
  return;
@@ -40,6 +41,10 @@ export var Resizer = function (props) {
40
41
  if (!elementRef.current) {
41
42
  return;
42
43
  }
44
+ if (!isResizing.current) {
45
+ isResizing.current = true;
46
+ onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
47
+ }
43
48
  var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
44
49
  var clientX = getBoundedValue(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
45
50
  var clientY = getBoundedValue(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : elementRef.current.ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
@@ -122,6 +127,7 @@ export var Resizer = function (props) {
122
127
  document.removeEventListener('pointermove', onResizePointerMove);
123
128
  if (elementRef.current) {
124
129
  elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
130
+ isResizing.current = false;
125
131
  onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
126
132
  width: width,
127
133
  height: height,
package/esm/core/utils/components/VisuallyHidden.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import '@itwin/itwinui-css/css/utils.css';
2
3
  export declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'div'>;
3
4
  /**
4
5
  * Hides content visually but is still accessible to screen readers.
package/esm/core/utils/components/VisuallyHidden.js CHANGED
@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
27
27
  import React from 'react';
28
28
  import cx from 'classnames';
29
29
  import { useTheme } from '../hooks';
30
+ import '@itwin/itwinui-css/css/utils.css';
30
31
  /**
31
32
  * Hides content visually but is still accessible to screen readers.
32
33
  */
package/esm/core/utils/functions/colors.d.ts CHANGED
@@ -15,6 +15,6 @@ export declare const SoftBackgrounds: {
15
15
  export declare const isSoftBackground: (value: string) => value is "skyblue" | "celery" | "froly" | "steelblue" | "sunglow" | "seabuckthorn" | "montecarlo" | "poloblue" | "bouquet" | "ash" | "oak";
16
16
  /**
17
17
  * Generate color from user name or email.
18
- * Recommended to use for `backgroundColor` in `UserIcon` component.
18
+ * Recommended to use for `backgroundColor` in `Avatar` component.
19
19
  */
20
20
  export declare const getUserColor: (emailOrName: string) => string;
package/esm/core/utils/functions/colors.js CHANGED
@@ -34,7 +34,7 @@ var USER_COLORS = [
34
34
  ];
35
35
  /**
36
36
  * Generate color from user name or email.
37
- * Recommended to use for `backgroundColor` in `UserIcon` component.
37
+ * Recommended to use for `backgroundColor` in `Avatar` component.
38
38
  */
39
39
  export var getUserColor = function (emailOrName) {
40
40
  var normalizedString = emailOrName.trim().toLowerCase();
package/esm/core/utils/functions/dom.js CHANGED
@@ -16,6 +16,7 @@ export var getContainer = function (containerId, ownerDocument) {
16
16
  if (container == null && !!ownerDocument) {
17
17
  container = ownerDocument.createElement('div');
18
18
  container.setAttribute('id', containerId);
19
+ container.innerHTML = "<style>:where(.iui-dialog-wrapper) { z-index: 999; }</style>"; // TODO: move to css
19
20
  ownerDocument.body.appendChild(container);
20
21
  }
21
22
  return container;
package/esm/core/utils/hooks/index.d.ts CHANGED
@@ -8,3 +8,4 @@ export * from './useIntersection';
8
8
  export * from './useMediaQuery';
9
9
  export * from './useSafeContext';
10
10
  export * from './useLatestRef';
11
+ export * from './useIsomorphicLayoutEffect';
package/esm/core/utils/hooks/index.js CHANGED
@@ -12,3 +12,4 @@ export * from './useIntersection';
12
12
  export * from './useMediaQuery';
13
13
  export * from './useSafeContext';
14
14
  export * from './useLatestRef';
15
+ export * from './useIsomorphicLayoutEffect';
package/esm/core/utils/hooks/useIsomorphicLayoutEffect.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ /**
3
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
4
+ *
5
+ * @see https://fb.me/react-uselayouteffect-ssr
6
+ */
7
+ export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js ADDED
@@ -0,0 +1,11 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ import React from 'react';
6
+ /**
7
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
8
+ *
9
+ * @see https://fb.me/react-uselayouteffect-ssr
10
+ */
11
+ export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
package/esm/core/utils/hooks/useMediaQuery.js CHANGED
@@ -4,9 +4,10 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  import React from 'react';
6
6
  import { getWindow } from '../functions';
7
+ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
7
8
  export var useMediaQuery = function (queryString) {
8
9
  var _a = React.useState(), matches = _a[0], setMatches = _a[1];
9
- React.useLayoutEffect(function () {
10
+ useIsomorphicLayoutEffect(function () {
10
11
  var _a, _b, _c;
11
12
  var mediaQueryList = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
12
13
  var handleChange = function (_a) {