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

package/cjs/core/utils/icons/SvgStatusWarning.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgStatusWarning = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var React = __importStar(require("react"));
+var SvgStatusWarning = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+        React.createElement("path", { d: 'm15.86807 13.26721-6.77-11.62a1.15 1.15 0 0 0 -1.1-.67 1.17 1.17 0 0 0 -1.1.69l-6.77 11.59a1.2 1.2 0 0 0 1.1 1.72h13.45a1.19 1.19 0 0 0 1.19-1.71zm-6.87-.29h-2v-2h2zm0-3h-2v-5h2z' })));
+};
+exports.SvgStatusWarning = SvgStatusWarning;

package/cjs/core/utils/icons/SvgSwap.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgSwap: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/cjs/core/utils/icons/SvgSwap.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgSwap = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var React = __importStar(require("react"));
+var SvgSwap = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+        React.createElement("path", { d: 'm5 15-3.78125-3.5 3.78125-3.5v2h8v3h-8zm6-7 3.78125-3.5-3.78125-3.5v2h-8v3h8z' })));
+};
+exports.SvgSwap = SvgSwap;

package/cjs/core/utils/icons/SvgUpload.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgUpload: (props: React.ComponentProps<'svg'>) => JSX.Element;

package/cjs/core/utils/icons/SvgUpload.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgUpload = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var React = __importStar(require("react"));
+var SvgUpload = function (props) {
+    return (React.createElement("svg", __assign({ viewBox: '0 0 16 16' }, props),
+        React.createElement("path", { d: 'm2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z' })));
+};
+exports.SvgUpload = SvgUpload;

package/cjs/core/utils/icons/index.d.ts

@@ -0,0 +1,29 @@
+export * from './StatusIconMap';
+export * from './SvgStatusSuccess';
+export * from './SvgStatusWarning';
+export * from './SvgStatusError';
+export * from './SvgInfoCircular';
+export * from './SvgClose';
+export * from './SvgCloseSmall';
+export * from './SvgChevronLeft';
+export * from './SvgChevronRight';
+export * from './SvgChevronLeftDouble';
+export * from './SvgChevronRightDouble';
+export * from './SvgCaretUpSmall';
+export * from './SvgCaretDownSmall';
+export * from './SvgCaretRightSmall';
+export * from './SvgSmileyHappy';
+export * from './SvgSwap';
+export * from './SvgUpload';
+export * from './SvgMoreVertical';
+export * from './SvgCheckmark';
+export * from './SvgCheckmarkSmall';
+export * from './SvgImportantSmall';
+export * from './SvgSortUp';
+export * from './SvgSortDown';
+export * from './SvgColumnManager';
+export * from './SvgMore';
+export * from './SvgNew';
+export * from './SvgFilter';
+export * from './SvgFilterHollow';
+export * from './SvgCalendar';

package/cjs/core/utils/icons/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./StatusIconMap"), exports);
+__exportStar(require("./SvgStatusSuccess"), exports);
+__exportStar(require("./SvgStatusWarning"), exports);
+__exportStar(require("./SvgStatusError"), exports);
+__exportStar(require("./SvgInfoCircular"), exports);
+__exportStar(require("./SvgClose"), exports);
+__exportStar(require("./SvgCloseSmall"), exports);
+__exportStar(require("./SvgChevronLeft"), exports);
+__exportStar(require("./SvgChevronRight"), exports);
+__exportStar(require("./SvgChevronLeftDouble"), exports);
+__exportStar(require("./SvgChevronRightDouble"), exports);
+__exportStar(require("./SvgCaretUpSmall"), exports);
+__exportStar(require("./SvgCaretDownSmall"), exports);
+__exportStar(require("./SvgCaretRightSmall"), exports);
+__exportStar(require("./SvgSmileyHappy"), exports);
+__exportStar(require("./SvgSwap"), exports);
+__exportStar(require("./SvgUpload"), exports);
+__exportStar(require("./SvgMoreVertical"), exports);
+__exportStar(require("./SvgCheckmark"), exports);
+__exportStar(require("./SvgCheckmarkSmall"), exports);
+__exportStar(require("./SvgImportantSmall"), exports);
+__exportStar(require("./SvgSortUp"), exports);
+__exportStar(require("./SvgSortDown"), exports);
+__exportStar(require("./SvgColumnManager"), exports);
+__exportStar(require("./SvgMore"), exports);
+__exportStar(require("./SvgNew"), exports);
+__exportStar(require("./SvgFilter"), exports);
+__exportStar(require("./SvgFilterHollow"), exports);
+__exportStar(require("./SvgCalendar"), exports);

package/cjs/core/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './hooks';
 export * from './components';
 export * from './props';
 export * from './color';
+export * from './icons';

package/cjs/core/utils/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./hooks"), exports);
 __exportStar(require("./components"), exports);
 __exportStar(require("./props"), exports);
 __exportStar(require("./color"), exports);
+__exportStar(require("./icons"), exports);

package/esm/core/Alert/Alert.d.ts

@@ -15,11 +15,6 @@ export declare type AlertProps = {
      * Props for the clickable text. Used for providing `href` and other attributes.
      */
     clickableTextProps?: React.ComponentPropsWithRef<'a'>;
-    /**
-     * Action handler for the clickable text.
-     * @deprecated `clickableTextProps` should be used instead.
-     */
-    onClick?: () => void;
     /**
      * Action handler for close.
      */
@@ -41,7 +36,13 @@ export declare type AlertProps = {
  * <Alert type='positive'>This is a positive alert.</Alert>
  * <Alert type='warning'>This is a warning alert.</Alert>
  * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert type='positive' clickableText="I am a clickable text" onClick={()=>alert("Pressed")}>This is a positive alert with a clickable text</Alert>
+ * <Alert
+ *  type='positive'
+ *  clickableText="I am a clickable text"
+ *  clickableTextProps={{ href: 'https://www.example.com' }}
+ * >
+ *   This is a positive alert with a clickable text
+ * </Alert>
  */
 export declare const Alert: (props: AlertProps) => JSX.Element;
 export default Alert;

package/esm/core/Alert/Alert.js

@@ -24,12 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, StatusIconMap } from '../utils';
+import { useTheme, StatusIconMap, SvgCloseSmall } from '../utils';
 import '@itwin/itwinui-css/css/alert.css';
-import { IconButton } from '../Buttons/IconButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
@@ -37,18 +35,25 @@ import { IconButton } from '../Buttons/IconButton';
  * <Alert type='positive'>This is a positive alert.</Alert>
  * <Alert type='warning'>This is a warning alert.</Alert>
  * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert type='positive' clickableText="I am a clickable text" onClick={()=>alert("Pressed")}>This is a positive alert with a clickable text</Alert>
+ * <Alert
+ *  type='positive'
+ *  clickableText="I am a clickable text"
+ *  clickableTextProps={{ href: 'https://www.example.com' }}
+ * >
+ *   This is a positive alert with a clickable text
+ * </Alert>
  */
 export var Alert = function (props) {
-    var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? 'informational' : _a, clickableText = props.clickableText, clickableTextProps = props.clickableTextProps, onClick = props.onClick, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "clickableTextProps", "onClick", "onClose", "style", "isSticky"]);
+    var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? 'informational' : _a, clickableText = props.clickableText, clickableTextProps = props.clickableTextProps, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "clickableTextProps", "onClose", "style", "isSticky"]);
     useTheme();
     var StatusIcon = StatusIconMap[type];
-    return (React.createElement("div", __assign({ className: cx('iui-alert', "iui-".concat(type), { 'iui-sticky': isSticky }, className), style: style }, rest),
+    return (React.createElement("div", __assign({ className: cx("iui-alert-".concat(type), { 'iui-sticky': isSticky }, className), style: style }, rest),
         React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
         React.createElement("span", { className: 'iui-alert-message' },
             children,
-            clickableText && (React.createElement("a", __assign({ onClick: onClick }, clickableTextProps, { className: cx('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }), clickableText))),
-        onClose && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onClose, "aria-label": 'Close' },
-            React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
+            clickableText && (React.createElement("a", __assign({}, clickableTextProps, { className: cx('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }), clickableText))),
+        onClose && (React.createElement("button", { onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
+            React.createElement("span", { className: 'iui-alert-button-icon', "aria-hidden": true },
+                React.createElement(SvgCloseSmall, null))))));
 };
 export default Alert;

package/esm/core/Avatar/Avatar.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/avatar.css';
+export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarStatus` (Use with `Avatar`)
+ */
+export declare type UserIconStatus = AvatarStatus;
+export declare type StatusTitles = {
+    [key in Exclude<AvatarStatus, ''>]: string;
+};
+export declare type AvatarProps = {
+    /**
+     * Size of a avatar.
+     * @default 'small'
+     */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Status/Availability of a user.
+     */
+    status?: AvatarStatus;
+    /**
+     * Text which will appear when hovering over the icon.
+     */
+    title?: string;
+    /**
+     * Abbreviation to be displayed.
+     */
+    abbreviation?: string;
+    /**
+     * User image to be displayed. MUST be an <img> element!
+     */
+    image?: JSX.Element;
+    /**
+     * Color of the icon. You can use `getUserColor` function to generate color from user name or email.
+     * @default 'white'
+     */
+    backgroundColor?: string;
+    /**
+     * Translated status messages shown on hover.
+     */
+    translatedStatusTitles?: StatusTitles;
+} & Omit<CommonProps, 'title'>;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarProps` (Use with `Avatar`)
+ */
+export declare type UserIconProps = AvatarProps;
+export declare const defaultStatusTitles: StatusTitles;
+/**
+ * Basic avatar component
+ * @example
+ * <caption>Small icon with abbreviation</caption>
+ * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
+ * @example
+ * <caption>Medium icon with image</caption>
+ * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * @example
+ * <caption>Large icon with status</caption>
+ * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
+ * @example
+ * <caption>X-large icon with image</caption>
+ * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ */
+export declare const Avatar: (props: AvatarProps) => JSX.Element;
+/**
+ * @deprecated Since v2, this has been renamed to `Avatar`
+ */
+export declare const UserIcon: (props: AvatarProps) => JSX.Element;
+export default Avatar;

package/esm/core/{UserIcon/UserIcon.js → Avatar/Avatar.js}

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
+import '@itwin/itwinui-css/css/avatar.css';
 export var defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',
@@ -35,29 +35,33 @@ export var defaultStatusTitles = {
     online: 'Online',
 };
 /**
- * Basic user icon component
+ * Basic avatar component
  * @example
  * <caption>Small icon with abbreviation</caption>
- * <UserIcon size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
+ * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
  * @example
  * <caption>Medium icon with image</caption>
- * <UserIcon size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  * @example
  * <caption>Large icon with status</caption>
- * <UserIcon size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
+ * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
  * @example
  * <caption>X-large icon with image</caption>
- * <UserIcon size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
-export var UserIcon = function (props) {
+export var Avatar = function (props) {
     var _a, _b;
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
     useTheme();
     var statusTitles = __assign(__assign({}, defaultStatusTitles), translatedStatusTitles);
-    return (React.createElement("span", __assign({ className: cx('iui-user-icon', (_a = {}, _a["iui-".concat(size)] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (React.createElement("span", __assign({ className: cx('iui-avatar', (_a = {}, _a["iui-".concat(size)] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         React.createElement("span", { className: 'iui-stroke' }),
         status && (React.createElement("span", { title: statusTitles[status], className: cx('iui-status', (_b = {},
                 _b["iui-".concat(status)] = !!status,
                 _b)), "aria-label": statusTitles[status] }))));
 };
-export default UserIcon;
+/**
+ * @deprecated Since v2, this has been renamed to `Avatar`
+ */
+export var UserIcon = Avatar;
+export default Avatar;

package/esm/core/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar, UserIcon } from './Avatar';
+export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar';
+declare const _default: "./Avatar";
+export default _default;

package/esm/core/{UserIcon → Avatar}/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { UserIcon } from './UserIcon';
-export default './UserIcon';
+export { Avatar, UserIcon } from './Avatar';
+export default './Avatar';

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/avatar.css';
+export declare type AvatarGroupProps = {
+    /**
+     * Max number of avatars unstacked.
+     * @default 5
+     */
+    maxIcons?: number;
+    /**
+     * If true, group will be stacked to take less space.
+     * @default true
+     */
+    stacked?: boolean;
+    /**
+     * If true, group will be animated on hover.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Size of avatars and count avatars.
+     * @default 'small'
+     */
+    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Avatars in the group.
+     */
+    children: React.ReactNode;
+    /**
+     * Count Avatar props.
+     */
+    countIconProps?: React.ComponentPropsWithRef<'div'>;
+} & Omit<CommonProps, 'title'>;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarGroupProps` (Use with `AvatarGroup`)
+ */
+export declare type UserIconGroupProps = AvatarGroupProps;
+/**
+ * Group Avatars together.
+ *
+ * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
+ * this component will show 5 Avatars and Count Avatar with "3" in it.
+ *
+ * You can add custom Count Avatar behavior by using `countAvatarProps`.
+ *
+ * @example
+ * <AvatarGroup avatarSize='medium'>
+ *  <Avatar
+ *    abbreviation="TR"
+ *    backgroundColor={getUserColor("Terry Rivers")}
+ *    title="Terry Rivers"
+ *  />
+ *  <Avatar
+ *    abbreviation="RM"
+ *    backgroundColor={getUserColor("Robin Mercer")}
+ *    title="Robin Mercer"
+ *  />
+ *  <Avatar
+ *    abbreviation="JM"
+ *    backgroundColor={getUserColor("Jean Mullins")}
+ *    title="Jean Mullins"
+ *  />
+ * </AvatarGroup>
+ */
+export declare const AvatarGroup: (props: AvatarGroupProps) => JSX.Element;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarGroup`
+ */
+export declare const UserIconGroup: (props: AvatarGroupProps) => JSX.Element;
+export default AvatarGroup;

package/esm/core/{UserIconGroup/UserIconGroup.js → AvatarGroup/AvatarGroup.js}

@@ -27,42 +27,42 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
+import '@itwin/itwinui-css/css/avatar.css';
 /**
- * Group User Icons together.
+ * Group Avatars together.
  *
- * User Icons stacking is based on `maxIcons` count. If you provide 8 User Icons and keep default 5 `maxIcons` count,
- * this component will show 5 User Icons and User Count Icon with "3" in it.
+ * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
+ * this component will show 5 Avatars and Count Avatar with "3" in it.
  *
- * You can add custom User Count Icon behavior by using `countIconProps`.
+ * You can add custom Count Avatar behavior by using `countAvatarProps`.
  *
  * @example
- * <UserIconGroup iconSize='medium'>
- *  <UserIcon
+ * <AvatarGroup avatarSize='medium'>
+ *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}
  *    title="Terry Rivers"
  *  />
- *  <UserIcon
+ *  <Avatar
  *    abbreviation="RM"
  *    backgroundColor={getUserColor("Robin Mercer")}
  *    title="Robin Mercer"
  *  />
- *  <UserIcon
+ *  <Avatar
  *    abbreviation="JM"
  *    backgroundColor={getUserColor("Jean Mullins")}
  *    title="Jean Mullins"
  *  />
- * </UserIconGroup>
+ * </AvatarGroup>
  */
-export var UserIconGroup = function (props) {
+export var AvatarGroup = function (props) {
     var _a;
     var maxLength = 99;
     var children = props.children, _b = props.animated, animated = _b === void 0 ? false : _b, _c = props.stacked, stacked = _c === void 0 ? true : _c, _d = props.maxIcons, maxIcons = _d === void 0 ? 5 : _d, _e = props.iconSize, iconSize = _e === void 0 ? 'small' : _e, countIconProps = props.countIconProps, className = props.className, rest = __rest(props, ["children", "animated", "stacked", "maxIcons", "iconSize", "countIconProps", "className"]);
     var childrenArray = React.Children.toArray(children);
     var childrenLength = childrenArray.length;
     useTheme();
-    var getUserIconList = function (count) {
+    var getAvatarList = function (count) {
         return childrenArray.slice(0, count).map(function (child) {
             return React.cloneElement(child, {
                 status: undefined,
@@ -71,17 +71,21 @@ export var UserIconGroup = function (props) {
         });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({ className: cx('iui-user-icon-list', {
+        React.createElement("div", __assign({ className: cx('iui-avatar-list', {
                 'iui-animated': animated,
                 'iui-stacked': stacked,
             }, className) }, rest),
-            childrenArray.length <= maxIcons + 1 && getUserIconList(maxIcons + 1),
+            childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
             childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
-                getUserIconList(maxIcons),
-                React.createElement("div", __assign({}, countIconProps, { className: cx('iui-user-icon', (_a = {}, _a["iui-".concat(iconSize)] = iconSize !== 'medium', _a), 'iui-user-icon-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
+                getAvatarList(maxIcons),
+                React.createElement("div", __assign({}, countIconProps, { className: cx('iui-avatar', (_a = {}, _a["iui-".concat(iconSize)] = iconSize !== 'medium', _a), 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
                     React.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
                         ? "".concat(childrenLength - maxIcons)
                         : "".concat(maxLength, "+")),
                     React.createElement("span", { className: 'iui-stroke' })))))));
 };
-export default UserIconGroup;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarGroup`
+ */
+export var UserIconGroup = AvatarGroup;
+export default AvatarGroup;

package/esm/core/AvatarGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { AvatarGroup, UserIconGroup } from './AvatarGroup';
+export type { AvatarGroupProps, UserIconGroupProps } from './AvatarGroup';
+declare const _default: "./AvatarGroup";
+export default _default;

package/esm/core/{UserIconGroup → AvatarGroup}/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { UserIconGroup } from './UserIconGroup';
-export default './UserIconGroup';
+export { AvatarGroup, UserIconGroup } from './AvatarGroup';
+export default './AvatarGroup';