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

package/esm/core/Tile/Tile.d.ts

@@ -33,7 +33,7 @@ export declare type TileProps = {
      *  // ...
      *  thumbnail='/url/to/image.jpg'
      *  // or
-     *  thumbnail={<UserIcon image={<img src='icon.png' />} />}
+     *  thumbnail={<Avatar image={<img src='icon.png' />} />}
      *  // or
      *  thumbnail={<SvgImodelHollow />}
      * />
@@ -61,6 +61,10 @@ export declare type TileProps = {
      * Dropdown menu containing `MenuItem`s.
      */
     moreOptions?: React.ReactNode[];
+    /**
+     * Status of the tile.
+     */
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Whether the tile is selected or in "active" state.
      * Gets highlighted and shows a checkmark icon near tile name.
@@ -84,6 +88,20 @@ export declare type TileProps = {
      * It becomes focusable and gets on hover styling.
      */
     isActionable?: boolean;
+    /**
+     * Display a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Flag whether the tile is disabled.
+     *
+     * Note: This only affects the tile. You need to manually disable
+     * the buttons and other interactive elements inside the tile.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
 } & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Tile component that displays content and actions in a card-like format.

package/esm/core/Tile/Tile.js

@@ -26,13 +26,11 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
-import SvgMore from '@itwin/itwinui-icons-react/cjs/icons/More';
-import SvgNew from '@itwin/itwinui-icons-react/cjs/icons/New';
-import { useTheme } from '../utils';
+import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu';
 import { IconButton } from '../Buttons';
+import { ProgressRadial } from '../ProgressIndicators';
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -51,17 +49,21 @@ import { IconButton } from '../Buttons';
  * />
  */
 export var Tile = function (props) {
-    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"]);
+    var _a;
+    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"]);
     useTheme();
-    var _b = React.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
+    var _e = React.useState(false), isMenuVisible = _e[0], setIsMenuVisible = _e[1];
     var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (React.createElement("div", __assign({ className: cx('iui-tile', {
-            'iui-folder': variant === 'folder',
-            'iui-new': isNew,
-            'iui-selected': isSelected,
-            'iui-actionable': isActionable,
-        }, className), tabIndex: isActionable ? 0 : undefined }, rest),
+    return (React.createElement("div", __assign({ className: cx('iui-tile', (_a = {
+                'iui-folder': variant === 'folder',
+                'iui-new': isNew,
+                'iui-selected': isSelected,
+                'iui-actionable': isActionable
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a['iui-loading'] = isLoading,
+            _a), className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined }, rest),
         thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
             typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                 className: 'iui-tile-thumbnail-picture',
@@ -70,17 +72,18 @@ export var Tile = function (props) {
             })) : (thumbnail),
             leftIcon &&
                 React.cloneElement(leftIcon, {
-                    className: 'iui-small iui-tile-thumbnail-type-indicator',
+                    className: 'iui-tile-thumbnail-type-indicator',
+                    'data-iui-size': 'small',
                 }),
             rightIcon &&
                 React.cloneElement(rightIcon, {
-                    className: 'iui-small iui-tile-thumbnail-quick-action',
+                    className: 'iui-tile-thumbnail-quick-action',
+                    'data-iui-size': 'small',
                 }),
             badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
         React.createElement("div", { className: 'iui-tile-content' },
             React.createElement("div", { className: 'iui-tile-name' },
-                isSelected && (React.createElement(SvgCheckmark, { className: cx('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
-                isNew && (React.createElement(SvgNew, { className: cx('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
+                React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
                 React.createElement("span", { className: 'iui-tile-name-label' }, name)),
             description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
             metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
@@ -103,4 +106,21 @@ export var Tile = function (props) {
             children),
         buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
+var TitleIcon = function (_a) {
+    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;
+    var StatusIcon = !!status && StatusIconMap[status];
+    if (isLoading) {
+        return (React.createElement(ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
+    }
+    if (isSelected) {
+        return React.createElement(SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
+    }
+    if (isNew) {
+        return React.createElement(SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
+    }
+    if (StatusIcon) {
+        return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
+    }
+    return null;
+};
 export default Tile;

package/esm/core/Toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/toast-notification.css';
+import '@itwin/itwinui-css/css/toast.css';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {
     /**
@@ -58,7 +58,7 @@ export declare type ToastProps = {
     placementPosition?: 'top' | 'bottom';
 };
 /**
- * Generic Toast Notification Component
+ * Generic Toast Component
  * @example
  * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
  * <Toast type='temporary' content='Processing completed.' category='positive' />
@@ -70,7 +70,7 @@ export declare type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id'
     onClose?: () => void;
 } & CommonProps;
 /**
- * The presentational part of a toast notification, without any animation or logic.
+ * The presentational part of a toast, without any animation or logic.
  * @private
  */
 export declare const ToastPresentation: (props: ToastPresentationProps) => JSX.Element;

package/esm/core/Toast/Toast.js

@@ -26,13 +26,12 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { Transition } from 'react-transition-group';
-import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
-import { useTheme, getWindow, StatusIconMap } from '../utils';
-import '@itwin/itwinui-css/css/toast-notification.css';
+import { useTheme, getWindow, StatusIconMap, SvgCloseSmall, } from '../utils';
+import '@itwin/itwinui-css/css/toast.css';
 import { IconButton } from '../Buttons';
 /**
- * Generic Toast Notification Component
+ * Generic Toast Component
  * @example
  * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
  * <Toast type='temporary' content='Processing completed.' category='positive' />
@@ -127,7 +126,7 @@ export var Toast = function (props) {
             React.createElement(ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
 };
 /**
- * The presentational part of a toast notification, without any animation or logic.
+ * The presentational part of a toast, without any animation or logic.
  * @private
  */
 export var ToastPresentation = function (props) {

package/esm/core/Toast/ToastWrapper.d.ts

@@ -1,4 +1,4 @@
-import '@itwin/itwinui-css/css/toast-notification.css';
+import '@itwin/itwinui-css/css/toast.css';
 import React from 'react';
 import { ToastProps } from './Toast';
 import { ToasterSettings } from './Toaster';

package/esm/core/Toast/ToastWrapper.js

@@ -13,7 +13,7 @@ var __assign = (this && this.__assign) || function () {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import '@itwin/itwinui-css/css/toast-notification.css';
+import '@itwin/itwinui-css/css/toast.css';
 import React from 'react';
 import cx from 'classnames';
 import Toast from './Toast';

package/esm/core/Tree/TreeNode.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { getFocusableElements, getWindow, useTheme, } from '../utils';
+import { getFocusableElements, useTheme } from '../utils';
 import '@itwin/itwinui-css/css/tree.css';
 import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander';
@@ -55,12 +55,6 @@ export var TreeNode = function (props) {
     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;
     var _g = React.useState(false), isFocused = _g[0], setIsFocused = _g[1];
     var nodeRef = React.useRef(null);
-    var styleDepth = React.useMemo(function () {
-        var _a, _b, _c;
-        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)))
-            ? { '--level': nodeDepth }
-            : { marginLeft: nodeDepth ? nodeDepth * 28 : 0 };
-    }, [nodeDepth]);
     var onKeyDown = function (event) {
         var _a, _b, _c, _d, _e, _f;
         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) {
         React.createElement("div", { className: cx('iui-tree-node', {
                 'iui-active': isSelected,
                 'iui-disabled': isDisabled,
-            }), style: styleDepth, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
+            }), style: { '--level': nodeDepth }, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
             checkbox && React.isValidElement(checkbox)
                 ? React.cloneElement(checkbox, {
                     className: cx('iui-tree-node-checkbox', checkbox.props.className),

package/esm/core/Tree/TreeNodeExpander.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { SvgChevronRight } from '../utils';
 import { IconButton } from '../Buttons/IconButton';
 import '@itwin/itwinui-css/css/tree.css';
 export var TreeNodeExpander = function (props) {

package/esm/core/Typography/Body/Body.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/text.css';
+/**
+ * @deprecated Since v2, use `Text` with variant 'body'.
+ */
 export declare type BodyProps = {
     /**
      * Set text to muted.
@@ -13,10 +16,9 @@ export declare type BodyProps = {
     isSkeleton?: boolean;
 } & React.HTMLAttributes<HTMLParagraphElement>;
 /**
- * Body text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'body'.
  * @example
- * <Body>I'm some body text!</Body>
- * <Body isMuted>I'm some muted body text.</Body>
+ * <Text variant='body' as='p'>I'm some body text!</Text>
  */
 export declare const Body: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Body/Body.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * Body text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'body'.
  * @example
- * <Body>I'm some body text!</Body>
- * <Body isMuted>I'm some muted body text.</Body>
+ * <Text variant='body' as='p'>I'm some body text!</Text>
  */
 export var Body = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, _b = props.isSkeleton, isSkeleton = _b === void 0 ? false : _b, rest = __rest(props, ["className", "isMuted", "isSkeleton"]);

package/esm/core/Typography/Headline/Headline.d.ts

@@ -8,10 +8,9 @@ export declare type HeadlineProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The biggest title on the page, renders a h1 element
+ * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example
- * <Headline>I'm a headline!</Headline>
- * <Headline isMuted>I'm a muted headline.</Headline>
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
  */
 export declare const Headline: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Headline/Headline.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The biggest title on the page, renders a h1 element
+ * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example
- * <Headline>I'm a headline!</Headline>
- * <Headline isMuted>I'm a muted headline.</Headline>
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
  */
 export var Headline = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Leading/Leading.d.ts

@@ -8,10 +8,9 @@ export declare type LeadingProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example
- * <Leading>I'm a Leading!</Leading>
- * <Leading isMuted>I'm a muted Leading.</Leading>
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
  */
 export declare const Leading: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Leading/Leading.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example
- * <Leading>I'm a Leading!</Leading>
- * <Leading isMuted>I'm a muted Leading.</Leading>
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
  */
 export var Leading = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Small/Small.d.ts

@@ -8,10 +8,9 @@ export declare type SmallProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLParagraphElement>;
 /**
- * Small text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'small'.
  * @example
- * <Small>I'm some small text!</Small>
- * <Small isMuted>I'm some muted small text.</Small>
+ * <Text variant='small' as='small'>I'm some small text!</Text>
  */
 export declare const Small: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Small/Small.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * Small text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'small'.
  * @example
- * <Small>I'm some small text!</Small>
- * <Small isMuted>I'm some muted small text.</Small>
+ * <Text variant='small' as='small'>I'm some small text!</Text>
  */
 export var Small = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Subheading/Subheading.d.ts

@@ -8,10 +8,9 @@ export declare type SubheadingProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example
- * <Subheading>I'm a subheading!</Subheading>
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
  */
 export declare const Subheading: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Subheading/Subheading.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example
- * <Subheading>I'm a subheading!</Subheading>
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
  */
 export var Subheading = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Text/Text.d.ts

@@ -30,6 +30,8 @@ export declare type TextProps<T extends React.ElementType = 'div'> = Polymorphic
 declare type TextComponent = PolymorphicForwardRefComponent<'div', TextOwnProps>;
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
+ *
  * @example
  * <Text>Some normal paragraph text rendered as a div</Text>
  * @example

package/esm/core/Typography/Text/Text.js

@@ -30,6 +30,8 @@ import { useTheme, } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
+ *
  * @example
  * <Text>Some normal paragraph text rendered as a div</Text>
  * @example

package/esm/core/Typography/Title/Title.d.ts

@@ -8,10 +8,9 @@ export declare type TitleProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The second biggest title on the page, renders a h2 element
+ * @deprecated Since v2, use `Text` with variant 'title'.
  * @example
- * <Title>I'm a title!</Title>
- * <Title isMuted>I'm a muted title.</Title>
+ * <Text variant='title' as='h2'>I'm a title!</Text>
  */
 export declare const Title: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Title/Title.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The second biggest title on the page, renders a h2 element
+ * @deprecated Since v2, use `Text` with variant 'title'.
  * @example
- * <Title>I'm a title!</Title>
- * <Title isMuted>I'm a muted title.</Title>
+ * <Text variant='title' as='h2'>I'm a title!</Text>
  */
 export var Title = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/index.d.ts

@@ -1,5 +1,9 @@
 export { Alert } from './Alert';
 export type { AlertProps } from './Alert';
+export { Avatar, UserIcon } from './Avatar';
+export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar';
+export { AvatarGroup, UserIconGroup } from './AvatarGroup';
+export type { AvatarGroupProps, UserIconGroupProps } from './AvatarGroup';
 export { Backdrop } from './Backdrop';
 export type { BackdropProps } from './Backdrop';
 export { Badge } from './Badge';
@@ -36,8 +40,8 @@ export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
-export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
-export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
+export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
+export type { VerticalTabsProps, TabProps, HorizontalTabsProps } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
 export { Input } from './Input';
@@ -96,11 +100,7 @@ export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export type { BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
-export { UserIcon } from './UserIcon';
-export type { UserIconProps, StatusTitles, UserIconStatus } from './UserIcon';
-export { UserIconGroup } from './UserIconGroup';
-export type { UserIconGroupProps } from './UserIconGroup';
-export { Wizard } from './Wizard';
-export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
+export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
+export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
 export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
 export type { ThemeType, MiddleTextTruncationProps } from './utils';

package/esm/core/index.js

@@ -3,6 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export { Alert } from './Alert';
+export { Avatar, UserIcon } from './Avatar';
+export { AvatarGroup, UserIconGroup } from './AvatarGroup';
 export { Backdrop } from './Backdrop';
 export { Badge } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
@@ -21,7 +23,7 @@ export { Fieldset } from './Fieldset';
 export { FileUpload, FileUploadTemplate } from './FileUpload';
 export { Footer, defaultFooterElements } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
-export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
+export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';
 export { Label } from './Label';
@@ -51,7 +53,5 @@ export { ToggleSwitch } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
-export { UserIcon } from './UserIcon';
-export { UserIconGroup } from './UserIconGroup';
-export { Wizard } from './Wizard';
+export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
 export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';

package/esm/core/utils/components/Popover.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/popover.css';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.
@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-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>>;
+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>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/esm/core/utils/components/Popover.js

@@ -26,7 +26,7 @@ import React from 'react';
 import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import { useMergedRefs } from '../hooks/useMergedRefs';
-import '@itwin/itwinui-css/css/popover.css';
+import '@itwin/itwinui-css/css/utils.css';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).

package/esm/core/utils/components/Resizer.d.ts

@@ -9,6 +9,11 @@ export declare type ResizerProps = {
      * If not passed, viewport will be used.
      */
     containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Callback that is being called on resize start.
+     * Useful to set state, style, or other properties when resizing is started.
+     */
+    onResizeStart?: () => void;
     /**
      * Callback that is being called on resize end.
      * Useful to preserve state if element is being closed.

package/esm/core/utils/components/Resizer.js

@@ -17,7 +17,8 @@ import { getBoundedValue, getTranslateValues } from '../functions';
  * );
  */
 export var Resizer = function (props) {
-    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeEnd = props.onResizeEnd;
+    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeStart = props.onResizeStart, onResizeEnd = props.onResizeEnd;
+    var isResizing = React.useRef(false);
     var onResizePointerDown = function (event) {
         if (!elementRef.current || event.button !== 0) {
             return;
@@ -40,6 +41,10 @@ export var Resizer = function (props) {
             if (!elementRef.current) {
                 return;
             }
+            if (!isResizing.current) {
+                isResizing.current = true;
+                onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
+            }
             var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             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);
             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) {
             document.removeEventListener('pointermove', onResizePointerMove);
             if (elementRef.current) {
                 elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
+                isResizing.current = false;
                 onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
                     width: width,
                     height: height,

package/esm/core/utils/components/VisuallyHidden.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'div'>;
 /**
  * Hides content visually but is still accessible to screen readers.

package/esm/core/utils/components/VisuallyHidden.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../hooks';
+import '@itwin/itwinui-css/css/utils.css';
 /**
  * Hides content visually but is still accessible to screen readers.
  */

package/esm/core/utils/components/index.d.ts

@@ -2,7 +2,6 @@ export * from './Popover';
 export * from './Resizer';
 export * from './FocusTrap';
 export * from './InputContainer';
-export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';