@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Alert/Alert.js

@@ -4,33 +4,168 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import '@itwin/itwinui-css/css/alert.css';
-import { StatusIconMap, SvgCloseSmall, Box } from '../utils/index.js';
+import {
+  Icon,
+  useSafeContext,
+  polymorphic,
+  StatusIconMap,
+  SvgCloseSmall,
+  Box,
+  ButtonBase,
+} from '../utils/index.js';
+import { IconButton } from '../Buttons/index.js';
+const AlertContext = React.createContext(undefined);
+// ----------------------------------------------------------------------------
+// Alert component
+const AlertComponent = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  return React.createElement(
+    Alert.Wrapper,
+    { type: type, isSticky: isSticky, ref: forwardedRef, ...rest },
+    React.createElement(Alert.Icon, null),
+    React.createElement(
+      Alert.Message,
+      null,
+      children,
+      clickableText
+        ? React.createElement(
+            Alert.Action,
+            { ...clickableTextProps },
+            clickableText,
+          )
+        : null,
+    ),
+    onClose
+      ? React.createElement(Alert.CloseButton, { onClick: onClose })
+      : null,
+  );
+});
+AlertComponent.displayName = 'Alert';
+// ----------------------------------------------------------------------------
+// Alert.Wrapper component
+const AlertWrapper = React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    type = 'informational',
+    isSticky = false,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-alert', className),
+      'data-iui-status': type,
+      'data-iui-variant': isSticky ? 'sticky' : undefined,
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(AlertContext.Provider, { value: { type } }, children),
+  );
+});
+AlertWrapper.displayName = 'Alert.Wrapper';
+// ----------------------------------------------------------------------------
+// Alert.Icon component
+const AlertIcon = React.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const { type } = useSafeContext(AlertContext);
+  const StatusIcon = StatusIconMap[type];
+  return React.createElement(
+    Icon,
+    { fill: type, ref: ref, ...rest },
+    children ?? React.createElement(StatusIcon, null),
+  );
+});
+AlertIcon.displayName = 'Alert.Icon';
+// ----------------------------------------------------------------------------
+// Alert.Message component
+const AlertMessage = polymorphic.span('iui-alert-message');
+AlertMessage.displayName = 'Alert.Message';
+// ----------------------------------------------------------------------------
+// Alert.Action component
+const AlertAction = React.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  return React.createElement(
+    ButtonBase,
+    {
+      as: !!props.href ? 'a' : 'button',
+      className: cx('iui-alert-link', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+AlertAction.displayName = 'Alert.Action';
+// ----------------------------------------------------------------------------
+// Alert.CloseButton component
+const AlertCloseButton = React.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  return React.createElement(
+    IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      'aria-label': 'Close',
+      ref: ref,
+      ...rest,
+    },
+    children ?? React.createElement(SvgCloseSmall, null),
+  );
+});
+AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>This is a basic alert.</Alert>
- * <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"
- *  clickableTextProps={{ href: 'https://www.example.com' }}
- * >
- *   This is a positive alert with a clickable text
- * </Alert>
+ * <Alert>This is an alert.</Alert>
+ * @example
+ * <Alert.Wrapper type='informational'>
+ *  <Alert.Icon />
+ *  <Alert.Message>This is an informational alert.</Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}} />
+ * </Alert.Wrapper>
+ * @example
+ * <Alert.Wrapper type='positive'>
+ *  <Alert.Icon>
+ *    <SvgSmileyHappy />
+ *  </Alert.Icon>
+ *  <Alert.Message>
+ *    This is an alert.
+ *    <Alert.Action>This is clickable text.</Alert.Action>
+ *  </Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}}>
+ *    <SvgCollapse />
+ *  </Alert.CloseButton>
+ * </Alert.Wrapper>
  */
-export const Alert = React.forwardRef((props, ref) => {
-    const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, isSticky = false, ...rest } = props;
-    const StatusIcon = StatusIconMap[type];
-    return (React.createElement(Box, { className: cx('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
-        React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
-        React.createElement(Box, { as: 'span', className: 'iui-alert-message' },
-            children,
-            clickableText && (React.createElement(Box, { as: 'a', ...clickableTextProps, className: cx('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
-        onClose && (React.createElement(Box, { as: 'button', onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
-            React.createElement(Box, { as: 'span', className: 'iui-alert-button-icon', "aria-hidden": true },
-                React.createElement(SvgCloseSmall, null))))));
+export const Alert = Object.assign(AlertComponent, {
+  /**
+   *  Alert wrapper subcomponent
+   */
+  Wrapper: AlertWrapper,
+  /**
+   * 	Alert icon subcomponent
+   */
+  Icon: AlertIcon,
+  /**
+   * 	Alert message subcomponent
+   */
+  Message: AlertMessage,
+  /**
+   * 	Alert action subcomponent for the link you want to provide.
+   */
+  Action: AlertAction,
+  /**
+   * 	Alert close button subcomponent
+   */
+  CloseButton: AlertCloseButton,
 });
 export default Alert;

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
-export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-declare type StatusTitles = {
+import { SoftBackgrounds } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
+export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;
 };
-declare type AvatarProps = {
+type AvatarProps = {
     /**
      * Size of an avatar.
      * @default 'small'
@@ -30,7 +30,7 @@ declare type AvatarProps = {
     /**
      * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
      */
-    backgroundColor?: string;
+    backgroundColor?: keyof typeof SoftBackgrounds | AnyString;
     /**
      * Translated status messages shown on hover.
      */
@@ -53,8 +53,4 @@ export declare const defaultStatusTitles: StatusTitles;
  * <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: PolymorphicForwardRefComponent<"span", AvatarProps>;
-/**
- * @deprecated Since v2, this has been renamed to `Avatar`
- */
-export declare const UserIcon: PolymorphicForwardRefComponent<"span", AvatarProps>;
 export default Avatar;

package/esm/core/Avatar/Avatar.js

@@ -4,13 +4,26 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
+import {
+  Box,
+  VisuallyHidden,
+  SoftBackgrounds,
+  isSoftBackground,
+} from '../utils/index.js';
+/**
+ * Helper function that returns one of the preset badge color values.
+ */
+const getBackground = (color) => {
+  if (!color) {
+    return '';
+  }
+  return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+};
 export const defaultStatusTitles = {
-    away: 'Away',
-    busy: 'Busy',
-    offline: 'Offline',
-    online: 'Online',
+  away: 'Away',
+  busy: 'Busy',
+  offline: 'Offline',
+  online: 'Online',
 };
 /**
  * Basic avatar component
@@ -28,18 +41,39 @@ export const defaultStatusTitles = {
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 export const Avatar = React.forwardRef((props, ref) => {
-    const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
-    const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ref: ref, ...rest },
-        !image && (React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
-        image,
-        React.createElement(Box, { as: 'span', className: 'iui-stroke' }),
-        status && (React.createElement(Box, { as: 'span', title: statusTitles[status], className: cx('iui-status', {
-                [`iui-${status}`]: !!status,
-            }), "aria-label": statusTitles[status] }))));
+  const {
+    size = 'small',
+    status,
+    abbreviation,
+    image,
+    backgroundColor,
+    title,
+    translatedStatusTitles,
+    className,
+    style,
+    ...rest
+  } = props;
+  const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx(
+        'iui-avatar',
+        { [`iui-${size}`]: size !== 'medium' },
+        className,
+      ),
+      'data-iui-status': status,
+      title: title,
+      style: { backgroundColor: getBackground(backgroundColor), ...style },
+      ref: ref,
+      ...rest,
+    },
+    !image ? abbreviation?.substring(0, 2) : null,
+    image,
+    status
+      ? React.createElement(VisuallyHidden, null, statusTitles[status])
+      : null,
+  );
 });
-/**
- * @deprecated Since v2, this has been renamed to `Avatar`
- */
-export const UserIcon = Avatar;
 export default Avatar;

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

@@ -1,3 +1,3 @@
-export { Avatar, UserIcon } from './Avatar.js';
+export { Avatar } from './Avatar.js';
 declare const _default: "./Avatar";
 export default _default;

package/esm/core/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 { Avatar, UserIcon } from './Avatar.js';
+export { Avatar } from './Avatar.js';
 export default './Avatar';

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
-declare type AvatarGroupProps = {
+type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.
      * @default 5
@@ -59,8 +58,4 @@ declare type AvatarGroupProps = {
  * </AvatarGroup>
  */
 export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroup`
- */
-export declare const UserIconGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 export default AvatarGroup;

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 /**
  * Group Avatars together.
  *
@@ -34,31 +33,63 @@ import '@itwin/itwinui-css/css/avatar.css';
  * </AvatarGroup>
  */
 export const AvatarGroup = React.forwardRef((props, ref) => {
-    const maxLength = 99;
-    const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
-    const childrenArray = React.Children.toArray(children);
-    const childrenLength = childrenArray.length;
-    const getAvatarList = (count) => {
-        return childrenArray.slice(0, count).map((child) => React.cloneElement(child, {
-            status: undefined,
-            size: iconSize,
-        }));
-    };
-    return (React.createElement(Box, { className: cx('iui-avatar-list', {
-            'iui-animated': animated,
-            'iui-stacked': stacked,
-        }, className), ref: ref, ...rest },
-        childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
-        childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
-            getAvatarList(maxIcons),
-            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
-                React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, childrenLength <= maxLength
-                    ? `${childrenLength - maxIcons}`
-                    : `${maxLength}+`),
-                React.createElement(Box, { className: 'iui-stroke' }))))));
+  const maxLength = 99;
+  const {
+    children,
+    animated = false,
+    stacked = true,
+    maxIcons = 5,
+    iconSize = 'small',
+    countIconProps,
+    className,
+    ...rest
+  } = props;
+  const childrenArray = React.Children.toArray(children);
+  const childrenLength = childrenArray.length;
+  const getAvatarList = (count) => {
+    return childrenArray.slice(0, count).map((child) =>
+      React.cloneElement(child, {
+        status: undefined,
+        size: iconSize,
+      }),
+    );
+  };
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-avatar-list',
+        {
+          'iui-animated': animated,
+          'iui-stacked': stacked,
+        },
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
+    childrenArray.length > maxIcons + 1 &&
+      React.createElement(
+        React.Fragment,
+        null,
+        getAvatarList(maxIcons),
+        React.createElement(
+          Box,
+          {
+            ...countIconProps,
+            className: cx(
+              'iui-avatar',
+              { [`iui-${iconSize}`]: iconSize !== 'medium' },
+              'iui-avatar-count',
+              countIconProps?.className,
+            ),
+          },
+          childrenLength <= maxLength
+            ? `${childrenLength - maxIcons}`
+            : `${maxLength}+`,
+        ),
+      ),
+  );
 });
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroup`
- */
-export const UserIconGroup = AvatarGroup;
 export default AvatarGroup;

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

@@ -1,3 +1,3 @@
-export { AvatarGroup, UserIconGroup } from './AvatarGroup.js';
+export { AvatarGroup } from './AvatarGroup.js';
 declare const _default: "./AvatarGroup";
 export default _default;

package/esm/core/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 { AvatarGroup, UserIconGroup } from './AvatarGroup.js';
+export { AvatarGroup } from './AvatarGroup.js';
 export default './AvatarGroup';

package/esm/core/Backdrop/Backdrop.d.ts

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/backdrop.css';
-export declare type BackdropProps = {
+export type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.
      * @default true

package/esm/core/Backdrop/Backdrop.js

@@ -5,8 +5,15 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/backdrop.css';
 export const Backdrop = React.forwardRef((props, ref) => {
-    const { isVisible = true, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
+  const { isVisible = true, className, ...rest } = props;
+  return React.createElement(Box, {
+    className: cx(
+      'iui-backdrop',
+      { 'iui-backdrop-visible': isVisible },
+      className,
+    ),
+    ref: ref,
+    ...rest,
+  });
 });

package/esm/core/Badge/Badge.d.ts

@@ -1,7 +1,6 @@
 import { SoftBackgrounds } from '../utils/index.js';
 import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
-declare type BadgeProps = {
+type BadgeProps = {
     /**
      * Background color of the badge.
      *

package/esm/core/Badge/Badge.js

@@ -5,22 +5,21 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { isSoftBackground, SoftBackgrounds, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 /**
  * Helper function that returns one of the preset badge color values.
  */
 const getBadgeColorValue = (color) => {
-    if (!color) {
-        return '';
-    }
-    return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+  if (!color) {
+    return '';
+  }
+  return isSoftBackground(color) ? SoftBackgrounds[color] : color;
 };
 /**
  * Helper function that returns one of the preset badge status values.
  */
 const getStatusValue = (color) => {
-    const statuses = ['positive', 'negative', 'warning', 'informational'];
-    return color && statuses.includes(color) ? color : undefined;
+  const statuses = ['positive', 'negative', 'warning', 'informational'];
+  return color && statuses.includes(color) ? color : undefined;
 };
 /**
  * A colorful visual indicator for categorizing items.
@@ -30,16 +29,31 @@ const getStatusValue = (color) => {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 export const Badge = React.forwardRef((props, forwardedRef) => {
-    const { backgroundColor, style, className, children, ...rest } = props;
-    // choosing 'primary' status should result in data-iui-status equaling 'informational'
-    const reducedBackgroundColor = backgroundColor === 'primary' ? 'informational' : backgroundColor;
-    const statusValue = getStatusValue(reducedBackgroundColor);
-    const _style = reducedBackgroundColor && !statusValue
-        ? {
-            '--iui-badge-background-color': getBadgeColorValue(reducedBackgroundColor),
-            ...style,
+  const { backgroundColor, style, className, children, ...rest } = props;
+  // choosing 'primary' status should result in data-iui-status equaling 'informational'
+  const reducedBackgroundColor =
+    backgroundColor === 'primary' ? 'informational' : backgroundColor;
+  const statusValue = getStatusValue(reducedBackgroundColor);
+  const _style =
+    reducedBackgroundColor && !statusValue
+      ? {
+          '--iui-badge-background-color': getBadgeColorValue(
+            reducedBackgroundColor,
+          ),
+          ...style,
         }
-        : { ...style };
-    return (React.createElement(Box, { as: 'span', className: cx('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
+      : { ...style };
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx('iui-badge', className),
+      style: _style,
+      'data-iui-status': statusValue,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 export default Badge;

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
-declare type BreadcrumbsProps = {
+type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.
      * Defaults to the index of the last breadcrumb item.
@@ -75,27 +74,19 @@ declare type BreadcrumbsProps = {
      */
     overflowButton?: (visibleCount: number) => React.ReactNode;
 };
-/**
- * A breadcrumb trail is used as a navigational aid to help users keep track
- * of their place in the application. It is often placed before a page's main content.
- *
- * Breadcrumb items can use `Button` or `a` or any custom component (passed as `children`).
- *
- * For accessibility, make sure to provide an aria-label describing the type of navigation.
- *
- * @example
- * <Breadcrumbs aria-label='Primary'>
- *   <Button onClick={() => {}}>Root</Button>
- *   <Button onClick={() => {}}>Item 1</Button>
- *   <Button onClick={() => {}}>Item 2</Button>
- * </Breadcrumbs>
- *
- * @example
- * <Breadcrumbs aria-label='Secondary'>
- *   <a href='/'>Root</a>
- *   <a href='/level1/'>Level 1</a>
- *   <span>Current level</span>
- * </Breadcrumbs>
- */
-export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps>;
+export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps> & {
+    /**
+     * Breadcrumbs item subcomponent
+     *
+     * @example
+     * <Breadcrumbs.Item>Breadcrumb Item Title</Breadcrumbs.Item>
+     *
+     * @example
+     * <Breadcrumbs.Item href='https://www.example.com/'>Breadcrumb Anchor Title</Breadcrumbs.Item>
+     *
+     * @example
+     * <Breadcrumbs.Item onClick={() => {}}><SvgCalendar /></Breadcrumbs.Item>
+     */
+    Item: PolymorphicForwardRefComponent<"a", {}>;
+};
 export default Breadcrumbs;