@itwin/itwinui-react 3.11.2 → 3.12.0

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

@@ -55,13 +55,9 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        /**
-         * Type of the alert.
-         * @default 'informational'
-         */
-        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
-        padded?: boolean | undefined;
+        size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
+        fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
+        padded?: boolean;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }>;

package/esm/core/Alert/Alert.js

@@ -1,105 +1,121 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box, } from '../../utils/index.js';
+import {
+  useSafeContext,
+  polymorphic,
+  StatusIconMap,
+  SvgCloseSmall,
+  Box,
+} from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Icon } from '../Icon/Icon.js';
 import { Anchor } from '../Typography/Anchor.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));
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  return _jsxs(Alert.Wrapper, {
+    type: type,
+    isSticky: isSticky,
+    ref: forwardedRef,
+    ...rest,
+    children: [
+      _jsx(Alert.Icon, {}),
+      _jsxs(Alert.Message, {
+        children: [
+          children,
+          clickableText
+            ? _jsx(Alert.Action, {
+                ...clickableTextProps,
+                children: clickableText,
+              })
+            : null,
+        ],
+      }),
+      onClose
+        ? _jsx(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)));
+  const {
+    children,
+    className,
+    type = 'informational',
+    isSticky = false,
+    ...rest
+  } = props;
+  return _jsx(Box, {
+    className: cx('iui-alert', className),
+    'data-iui-status': type,
+    'data-iui-variant': isSticky ? 'sticky' : undefined,
+    ref: ref,
+    ...rest,
+    children: _jsx(AlertContext.Provider, {
+      value: {
+        type,
+      },
+      children: 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)));
+  const { children, ...rest } = props;
+  const { type } = useSafeContext(AlertContext);
+  const StatusIcon = StatusIconMap[type];
+  return _jsx(Icon, {
+    fill: type,
+    ref: ref,
+    ...rest,
+    children: children ?? _jsx(StatusIcon, {}),
+  });
 });
 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;
-    const { type } = useSafeContext(AlertContext);
-    return (React.createElement(Anchor, { as: (!!props.href ? 'a' : 'button'), className: cx('iui-button-base', 'iui-alert-link', className), underline: true, "data-iui-status": type, ref: ref, ...rest }, children));
+  const { children, className, ...rest } = props;
+  const { type } = useSafeContext(AlertContext);
+  return _jsx(Anchor, {
+    as: !!props.href ? 'a' : 'button',
+    className: cx('iui-button-base', 'iui-alert-link', className),
+    underline: true,
+    'data-iui-status': type,
+    ref: ref,
+    ...rest,
+    children: 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)));
+  const { children, ...rest } = props;
+  return _jsx(IconButton, {
+    styleType: 'borderless',
+    size: 'small',
+    'aria-label': 'Close',
+    ref: ref,
+    ...rest,
+    children: children ?? _jsx(SvgCloseSmall, {}),
+  });
 });
 AlertCloseButton.displayName = 'Alert.CloseButton';
-/**
- * A small box to quickly grab user attention and communicate a brief message
- * @example
- * <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 = 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,
+  Wrapper: AlertWrapper,
+  Icon: AlertIcon,
+  Message: AlertMessage,
+  Action: AlertAction,
+  CloseButton: AlertCloseButton,
 });

package/esm/core/Avatar/Avatar.js

@@ -1,46 +1,57 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box, SoftBackgrounds, isSoftBackground } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-/**
- * Helper function that returns one of the preset badge color values.
- */
 const getBackground = (color) => {
-    if (!color) {
-        return '';
-    }
-    return isSoftBackground(color) ? SoftBackgrounds[color] : 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
- * @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 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', className), "data-iui-size": size !== 'medium' ? size : undefined, "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));
+  const {
+    size = 'small',
+    status,
+    abbreviation,
+    image,
+    backgroundColor,
+    title,
+    translatedStatusTitles,
+    className,
+    style,
+    ...rest
+  } = props;
+  const statusTitles = {
+    ...defaultStatusTitles,
+    ...translatedStatusTitles,
+  };
+  return _jsxs(Box, {
+    as: 'span',
+    className: cx('iui-avatar', className),
+    'data-iui-size': size !== 'medium' ? size : undefined,
+    'data-iui-status': status,
+    title: title,
+    style: {
+      backgroundColor: getBackground(backgroundColor),
+      ...style,
+    },
+    ref: ref,
+    ...rest,
+    children: [
+      !image ? abbreviation?.substring(0, 2) : null,
+      image,
+      status
+        ? _jsx(VisuallyHidden, {
+            children: statusTitles[status],
+          })
+        : null,
+    ],
+  });
 });

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -1,56 +1,65 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-/**
- * 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 iconSize='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 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,
+  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 _jsxs(Box, {
+    className: cx(
+      'iui-avatar-list',
+      {
+        'iui-animated': animated,
+        'iui-stacked': stacked,
+      },
+      className,
+    ),
+    ref: ref,
+    ...rest,
+    children: [
+      childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
+      childrenArray.length > maxIcons + 1 &&
+        _jsxs(_Fragment, {
+          children: [
             getAvatarList(maxIcons),
-            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', 'iui-avatar-count', countIconProps?.className), "data-iui-size": iconSize !== 'medium' ? iconSize : undefined }, childrenLength <= maxLength
-                ? `${childrenLength - maxIcons}`
-                : `${maxLength}+`)))));
+            _jsx(Box, {
+              ...countIconProps,
+              className: cx(
+                'iui-avatar',
+                'iui-avatar-count',
+                countIconProps?.className,
+              ),
+              'data-iui-size': iconSize !== 'medium' ? iconSize : undefined,
+              children:
+                childrenLength <= maxLength
+                  ? `${childrenLength - maxIcons}`
+                  : `${maxLength}+`,
+            }),
+          ],
+        }),
+    ],
+  });
 });

package/esm/core/Backdrop/Backdrop.js

@@ -1,11 +1,18 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 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 _jsx(Box, {
+    className: cx(
+      'iui-backdrop',
+      {
+        'iui-backdrop-visible': isVisible,
+      },
+      className,
+    ),
+    ref: ref,
+    ...rest,
+  });
 });

package/esm/core/Badge/Badge.js

@@ -1,43 +1,40 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { isSoftBackground, SoftBackgrounds, Box } from '../../utils/index.js';
-/**
- * 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.
- * @example
- * <Badge>Label</Badge>
- * <Badge backgroundColor="sunglow">Label</Badge>
- * <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;
+  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 _jsx(Box, {
+    as: 'span',
+    className: cx('iui-badge', className),
+    style: _style,
+    'data-iui-status': statusValue,
+    ref: forwardedRef,
+    ...rest,
+    children: children,
+  });
 });