@itwin/itwinui-react 3.0.3 → 3.0.5

package/esm/core/Alert/Alert.js

@@ -4,85 +4,37 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  useSafeContext,
-  polymorphic,
-  StatusIconMap,
-  SvgCloseSmall,
-  Box,
-  ButtonBase,
-} from '../utils/index.js';
+import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box, ButtonBase, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Icon } from '../Icon/Icon.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 (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),
-  );
+    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),
-  );
+    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';
 // ----------------------------------------------------------------------------
@@ -92,34 +44,15 @@ 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,
-  );
+    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),
-  );
+    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';
 /**
@@ -147,25 +80,25 @@ AlertCloseButton.displayName = '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,
+    /**
+     *  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.js

@@ -10,16 +10,16 @@ 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
@@ -37,39 +37,11 @@ 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,
-      ),
-      '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 (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));
 });
 export default Avatar;

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -33,63 +33,25 @@ import { Box } from '../utils/index.js';
  * </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?.className,
-            ),
-          },
-          childrenLength <= maxLength
-            ? `${childrenLength - maxIcons}`
-            : `${maxLength}+`,
-        ),
-      ),
-  );
+    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}+`)))));
 });
 export default AvatarGroup;

package/esm/core/Backdrop/Backdrop.js

@@ -6,14 +6,6 @@ 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 (React.createElement(Box, { className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
 });

package/esm/core/Badge/Badge.js

@@ -9,17 +9,17 @@ 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.
@@ -29,31 +29,16 @@ 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.js

@@ -4,13 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  useMergedRefs,
-  useOverflow,
-  SvgChevronRight,
-  Box,
-  createWarningLogger,
-} from '../utils/index.js';
+import { useMergedRefs, useOverflow, SvgChevronRight, Box, createWarningLogger, } from '../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 const logWarningInDev = createWarningLogger();
 /**
@@ -36,143 +30,69 @@ const logWarningInDev = createWarningLogger();
  * </Breadcrumbs>
  */
 const BreadcrumbsComponent = React.forwardRef((props, ref) => {
-  const {
-    children: items,
-    currentIndex = items.length - 1,
-    separator,
-    overflowButton,
-    className,
-    ...rest
-  } = props;
-  const [overflowRef, visibleCount] = useOverflow(items);
-  const refs = useMergedRefs(overflowRef, ref);
-  return React.createElement(
-    Box,
-    {
-      as: 'nav',
-      className: cx('iui-breadcrumbs', className),
-      ref: refs,
-      'aria-label': 'Breadcrumb',
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      { as: 'ol', className: 'iui-breadcrumbs-list' },
-      visibleCount > 1 &&
-        React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(ListItem, {
-            item: items[0],
-            isActive: currentIndex === 0,
-          }),
-          React.createElement(Separator, { separator: separator }),
-        ),
-      items.length - visibleCount > 0 &&
-        React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(
-            Box,
-            { as: 'li', className: 'iui-breadcrumbs-item' },
-            overflowButton
-              ? overflowButton(visibleCount)
-              : React.createElement(
-                  Box,
-                  { as: 'span', className: 'iui-breadcrumbs-content' },
-                  '\u2026',
-                ),
-          ),
-          React.createElement(Separator, { separator: separator }),
-        ),
-      items
-        .slice(
-          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
-        )
-        .map((_, _index) => {
-          const index =
-            visibleCount > 1
-              ? 1 + (items.length - visibleCount) + _index
-              : items.length - 1;
-          return React.createElement(
-            React.Fragment,
-            { key: index },
-            React.createElement(ListItem, {
-              item: items[index],
-              isActive: currentIndex === index,
-            }),
-            index < items.length - 1 &&
-              React.createElement(Separator, { separator: separator }),
-          );
-        }),
-    ),
-  );
+    const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
+    const [overflowRef, visibleCount] = useOverflow(items);
+    const refs = useMergedRefs(overflowRef, ref);
+    return (React.createElement(Box, { as: 'nav', className: cx('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
+        React.createElement(Box, { as: 'ol', className: 'iui-breadcrumbs-list' },
+            visibleCount > 1 && (React.createElement(React.Fragment, null,
+                React.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
+                React.createElement(Separator, { separator: separator }))),
+            items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
+                React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement(Box, { as: 'span', className: 'iui-breadcrumbs-content' }, "\u2026"))),
+                React.createElement(Separator, { separator: separator }))),
+            items
+                .slice(visibleCount > 1
+                ? items.length - visibleCount + 1
+                : items.length - 1)
+                .map((_, _index) => {
+                const index = visibleCount > 1
+                    ? 1 + (items.length - visibleCount) + _index
+                    : items.length - 1;
+                return (React.createElement(React.Fragment, { key: index },
+                    React.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
+                    index < items.length - 1 && (React.createElement(Separator, { separator: separator }))));
+            }))));
 });
 // ----------------------------------------------------------------------------
-const ListItem = ({ item, isActive }) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let children = item;
-  if (
-    children?.type === 'span' ||
-    children?.type === 'a' ||
-    children?.type === Button
-  ) {
-    logWarningInDev(
-      'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
-    );
-    children = React.createElement(BreadcrumbsItem, { ...children.props });
-  }
-  return React.createElement(
-    Box,
-    { as: 'li', className: 'iui-breadcrumbs-item' },
-    children &&
-      React.cloneElement(children, {
-        'aria-current':
-          children.props['aria-current'] ?? isActive ? 'location' : undefined,
-      }),
-  );
+const ListItem = ({ item, isActive, }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let children = item;
+    if (children?.type === 'span' ||
+        children?.type === 'a' ||
+        children?.type === Button) {
+        logWarningInDev('Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.');
+        children = React.createElement(BreadcrumbsItem, { ...children.props });
+    }
+    return (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item' }, children &&
+        React.cloneElement(children, {
+            'aria-current': children.props['aria-current'] ?? isActive ? 'location' : undefined,
+        })));
 };
 // ----------------------------------------------------------------------------
-const Separator = ({ separator }) =>
-  React.createElement(
-    Box,
-    { as: 'li', className: 'iui-breadcrumbs-separator', 'aria-hidden': true },
-    separator ?? React.createElement(SvgChevronRight, null),
-  );
+const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-  const { children: childrenProp, className, ...rest } = props;
-  const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
-  const children =
-    defaultAs === 'button'
-      ? React.createElement('span', null, childrenProp)
-      : childrenProp;
-  return React.createElement(
-    Box,
-    {
-      as: defaultAs,
-      className: cx('iui-breadcrumbs-content', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { children: childrenProp, className, ...rest } = props;
+    const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
+    const children = defaultAs === 'button' ? React.createElement("span", null, childrenProp) : childrenProp;
+    return (React.createElement(Box, { as: defaultAs, className: cx('iui-breadcrumbs-content', className), ref: forwardedRef, ...rest }, children));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------
 export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
-  /**
-   * 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: BreadcrumbsItem,
+    /**
+     * 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: BreadcrumbsItem,
 });
 export default Breadcrumbs;