@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/cjs/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/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
@@ -39,6 +39,7 @@ var utils_1 = require("../utils");
39
39
  require("@itwin/itwinui-css/css/tile.css");
40
40
  var DropdownMenu_1 = require("../DropdownMenu");
41
41
  var Buttons_1 = require("../Buttons");
42
+ var ProgressIndicators_1 = require("../ProgressIndicators");
42
43
  /**
43
44
  * Tile component that displays content and actions in a card-like format.
44
45
  * @example
@@ -57,17 +58,21 @@ var Buttons_1 = require("../Buttons");
57
58
  * />
58
59
  */
59
60
  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"]);
61
+ var _a;
62
+ 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
63
  (0, utils_1.useTheme)();
62
- var _b = react_1.default.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
64
+ var _e = react_1.default.useState(false), isMenuVisible = _e[0], setIsMenuVisible = _e[1];
63
65
  var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
64
66
  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),
67
+ return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', (_a = {
68
+ 'iui-folder': variant === 'folder',
69
+ 'iui-new': isNew,
70
+ 'iui-selected': isSelected,
71
+ 'iui-actionable': isActionable
72
+ },
73
+ _a["iui-".concat(status)] = !!status,
74
+ _a['iui-loading'] = isLoading,
75
+ _a), className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined }, rest),
71
76
  thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
72
77
  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
78
  className: 'iui-tile-thumbnail-picture',
@@ -76,17 +81,18 @@ var Tile = function (props) {
76
81
  })) : (thumbnail),
77
82
  leftIcon &&
78
83
  react_1.default.cloneElement(leftIcon, {
79
- className: 'iui-small iui-tile-thumbnail-type-indicator',
84
+ className: 'iui-tile-thumbnail-type-indicator',
85
+ 'data-iui-size': 'small',
80
86
  }),
81
87
  rightIcon &&
82
88
  react_1.default.cloneElement(rightIcon, {
83
- className: 'iui-small iui-tile-thumbnail-quick-action',
89
+ className: 'iui-tile-thumbnail-quick-action',
90
+ 'data-iui-size': 'small',
84
91
  }),
85
92
  badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
86
93
  react_1.default.createElement("div", { className: 'iui-tile-content' },
87
94
  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 })),
95
+ react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
90
96
  react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
91
97
  description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
92
98
  metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
@@ -110,4 +116,21 @@ var Tile = function (props) {
110
116
  buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
111
117
  };
112
118
  exports.Tile = Tile;
119
+ var TitleIcon = function (_a) {
120
+ 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;
121
+ var StatusIcon = !!status && utils_1.StatusIconMap[status];
122
+ if (isLoading) {
123
+ return (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
124
+ }
125
+ if (isSelected) {
126
+ return react_1.default.createElement(Checkmark_1.default, { className: 'iui-tile-status-icon', "aria-hidden": true });
127
+ }
128
+ if (isNew) {
129
+ return react_1.default.createElement(New_1.default, { className: 'iui-tile-status-icon', "aria-hidden": true });
130
+ }
131
+ if (StatusIcon) {
132
+ return react_1.default.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
133
+ }
134
+ return null;
135
+ };
113
136
  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
@@ -35,10 +35,10 @@ var react_transition_group_1 = require("react-transition-group");
35
35
  var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
36
36
  var classnames_1 = __importDefault(require("classnames"));
37
37
  var utils_1 = require("../utils");
38
- require("@itwin/itwinui-css/css/toast-notification.css");
38
+ require("@itwin/itwinui-css/css/toast.css");
39
39
  var Buttons_1 = require("../Buttons");
40
40
  /**
41
- * Generic Toast Notification Component
41
+ * Generic Toast Component
42
42
  * @example
43
43
  * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
44
44
  * <Toast type='temporary' content='Processing completed.' category='positive' />
@@ -134,7 +134,7 @@ var Toast = function (props) {
134
134
  };
135
135
  exports.Toast = Toast;
136
136
  /**
137
- * The presentational part of a toast notification, without any animation or logic.
137
+ * The presentational part of a toast, without any animation or logic.
138
138
  * @private
139
139
  */
140
140
  var ToastPresentation = function (props) {
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/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/cjs/core/index.js CHANGED
@@ -3,15 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.Alert = void 0;
7
- exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = void 0;
8
- exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = void 0;
6
+ exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
7
+ exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = void 0;
8
+ exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = void 0;
9
9
  /*---------------------------------------------------------------------------------------------
10
10
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
11
11
  * See LICENSE.md in the project root for license terms and full copyright notice.
12
12
  *--------------------------------------------------------------------------------------------*/
13
13
  var Alert_1 = require("./Alert");
14
14
  Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
15
+ var Avatar_1 = require("./Avatar");
16
+ Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
17
+ Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return Avatar_1.UserIcon; } });
18
+ var AvatarGroup_1 = require("./AvatarGroup");
19
+ Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_1.AvatarGroup; } });
20
+ Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return AvatarGroup_1.UserIconGroup; } });
15
21
  var Backdrop_1 = require("./Backdrop");
16
22
  Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
17
23
  var Badge_1 = require("./Badge");
@@ -66,7 +72,6 @@ var Tabs_1 = require("./Tabs");
66
72
  Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
67
73
  Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });
68
74
  Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_1.HorizontalTabs; } });
69
- Object.defineProperty(exports, "HorizontalTab", { enumerable: true, get: function () { return Tabs_1.HorizontalTab; } });
70
75
  var InformationPanel_1 = require("./InformationPanel");
71
76
  Object.defineProperty(exports, "InformationPanel", { enumerable: true, get: function () { return InformationPanel_1.InformationPanel; } });
72
77
  Object.defineProperty(exports, "InformationPanelWrapper", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelWrapper; } });
@@ -163,12 +168,10 @@ Object.defineProperty(exports, "Code", { enumerable: true, get: function () { re
163
168
  Object.defineProperty(exports, "Kbd", { enumerable: true, get: function () { return Typography_1.Kbd; } });
164
169
  Object.defineProperty(exports, "KbdKeys", { enumerable: true, get: function () { return Typography_1.KbdKeys; } });
165
170
  Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Typography_1.Text; } });
166
- var UserIcon_1 = require("./UserIcon");
167
- Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return UserIcon_1.UserIcon; } });
168
- var UserIconGroup_1 = require("./UserIconGroup");
169
- Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return UserIconGroup_1.UserIconGroup; } });
170
- var Wizard_1 = require("./Wizard");
171
- Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return Wizard_1.Wizard; } });
171
+ var Stepper_1 = require("./Stepper");
172
+ Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return Stepper_1.Wizard; } });
173
+ Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return Stepper_1.Stepper; } });
174
+ Object.defineProperty(exports, "WorkflowDiagram", { enumerable: true, get: function () { return Stepper_1.WorkflowDiagram; } });
172
175
  var utils_1 = require("./utils");
173
176
  Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return utils_1.getUserColor; } });
174
177
  Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });
package/cjs/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/cjs/core/utils/components/Popover.js CHANGED
@@ -32,7 +32,7 @@ var react_1 = __importDefault(require("react"));
32
32
  var classnames_1 = __importDefault(require("classnames"));
33
33
  var react_2 = __importDefault(require("@tippyjs/react"));
34
34
  var useMergedRefs_1 = require("../hooks/useMergedRefs");
35
- require("@itwin/itwinui-css/css/popover.css");
35
+ require("@itwin/itwinui-css/css/utils.css");
36
36
  /**
37
37
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
38
38
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
package/cjs/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/cjs/core/utils/components/Resizer.js CHANGED
@@ -23,7 +23,8 @@ var functions_1 = require("../functions");
23
23
  * );
24
24
  */
25
25
  var Resizer = function (props) {
26
- var elementRef = props.elementRef, containerRef = props.containerRef, onResizeEnd = props.onResizeEnd;
26
+ var elementRef = props.elementRef, containerRef = props.containerRef, onResizeStart = props.onResizeStart, onResizeEnd = props.onResizeEnd;
27
+ var isResizing = react_1.default.useRef(false);
27
28
  var onResizePointerDown = function (event) {
28
29
  if (!elementRef.current || event.button !== 0) {
29
30
  return;
@@ -46,6 +47,10 @@ var Resizer = function (props) {
46
47
  if (!elementRef.current) {
47
48
  return;
48
49
  }
50
+ if (!isResizing.current) {
51
+ isResizing.current = true;
52
+ onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
53
+ }
49
54
  var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
50
55
  var clientX = (0, functions_1.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);
51
56
  var clientY = (0, functions_1.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);
@@ -128,6 +133,7 @@ var Resizer = function (props) {
128
133
  document.removeEventListener('pointermove', onResizePointerMove);
129
134
  if (elementRef.current) {
130
135
  elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
136
+ isResizing.current = false;
131
137
  onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
132
138
  width: width,
133
139
  height: height,
package/cjs/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/cjs/core/utils/components/VisuallyHidden.js CHANGED
@@ -33,6 +33,7 @@ exports.VisuallyHidden = void 0;
33
33
  var react_1 = __importDefault(require("react"));
34
34
  var classnames_1 = __importDefault(require("classnames"));
35
35
  var hooks_1 = require("../hooks");
36
+ require("@itwin/itwinui-css/css/utils.css");
36
37
  /**
37
38
  * Hides content visually but is still accessible to screen readers.
38
39
  */
package/cjs/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/cjs/core/utils/functions/colors.js CHANGED
@@ -38,7 +38,7 @@ var USER_COLORS = [
38
38
  ];
39
39
  /**
40
40
  * Generate color from user name or email.
41
- * Recommended to use for `backgroundColor` in `UserIcon` component.
41
+ * Recommended to use for `backgroundColor` in `Avatar` component.
42
42
  */
43
43
  var getUserColor = function (emailOrName) {
44
44
  var normalizedString = emailOrName.trim().toLowerCase();
package/cjs/core/utils/functions/dom.js CHANGED
@@ -19,6 +19,7 @@ var getContainer = function (containerId, ownerDocument) {
19
19
  if (container == null && !!ownerDocument) {
20
20
  container = ownerDocument.createElement('div');
21
21
  container.setAttribute('id', containerId);
22
+ container.innerHTML = "<style>:where(.iui-dialog-wrapper) { z-index: 999; }</style>"; // TODO: move to css
22
23
  ownerDocument.body.appendChild(container);
23
24
  }
24
25
  return container;
package/cjs/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/cjs/core/utils/hooks/index.js CHANGED
@@ -28,3 +28,4 @@ __exportStar(require("./useIntersection"), exports);
28
28
  __exportStar(require("./useMediaQuery"), exports);
29
29
  __exportStar(require("./useSafeContext"), exports);
30
30
  __exportStar(require("./useLatestRef"), exports);
31
+ __exportStar(require("./useIsomorphicLayoutEffect"), exports);
package/cjs/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/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.useIsomorphicLayoutEffect = void 0;
7
+ /*---------------------------------------------------------------------------------------------
8
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
9
+ * See LICENSE.md in the project root for license terms and full copyright notice.
10
+ *--------------------------------------------------------------------------------------------*/
11
+ var react_1 = __importDefault(require("react"));
12
+ /**
13
+ * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
14
+ *
15
+ * @see https://fb.me/react-uselayouteffect-ssr
16
+ */
17
+ exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.default.useLayoutEffect : react_1.default.useEffect;
package/cjs/core/utils/hooks/useMediaQuery.js CHANGED
@@ -10,9 +10,10 @@ exports.useMediaQuery = void 0;
10
10
  *--------------------------------------------------------------------------------------------*/
11
11
  var react_1 = __importDefault(require("react"));
12
12
  var functions_1 = require("../functions");
13
+ var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
13
14
  var useMediaQuery = function (queryString) {
14
15
  var _a = react_1.default.useState(), matches = _a[0], setMatches = _a[1];
15
- react_1.default.useLayoutEffect(function () {
16
+ (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
16
17
  var _a, _b, _c;
17
18
  var mediaQueryList = (_b = (_a = (0, functions_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
18
19
  var handleChange = function (_a) {