@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Badge/Badge.js

@@ -1,36 +1,41 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { isSoftBackground, SoftBackgrounds, Box } from '../../utils/index.js';
-let getBadgeColorValue = (color)=>{
-    if (!color) return '';
-    return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+let getBadgeColorValue = (color) => {
+  if (!color) return '';
+  return isSoftBackground(color) ? SoftBackgrounds[color] : color;
 };
-let getStatusValue = (color)=>{
-    let statuses = [
-        'positive',
-        'negative',
-        'warning',
-        'informational'
-    ];
-    return color && statuses.includes(color) ? color : void 0;
+let getStatusValue = (color) => {
+  let statuses = ['positive', 'negative', 'warning', 'informational'];
+  return color && statuses.includes(color) ? color : void 0;
 };
-export const Badge = React.forwardRef((props, forwardedRef)=>{
-    let { backgroundColor, style, className, children, ...rest } = props;
-    let reducedBackgroundColor = 'primary' === backgroundColor ? 'informational' : backgroundColor;
-    let statusValue = getStatusValue(reducedBackgroundColor);
-    let _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);
+export const Badge = React.forwardRef((props, forwardedRef) => {
+  let { backgroundColor, style, className, children, ...rest } = props;
+  let reducedBackgroundColor =
+    'primary' === backgroundColor ? 'informational' : backgroundColor;
+  let statusValue = getStatusValue(reducedBackgroundColor);
+  let _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,
+  );
 });
 Badge.displayName = 'Badge';

package/DEV-esm/core/Breadcrumbs/Breadcrumbs.js

@@ -1,84 +1,163 @@
 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';
 import { Anchor } from '../Typography/Anchor.js';
 let logWarning = createWarningLogger();
-let BreadcrumbsComponent = React.forwardRef((props, ref)=>{
-    let { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
-    let [overflowRef, visibleCount] = useOverflow(items);
-    let 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: 0 === currentIndex
-    }), 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"
-    }, "…")), React.createElement(Separator, {
-        separator: separator
-    })), items.slice(visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1).map((_, _index)=>{
-        let 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
-        }));
-    })));
+let BreadcrumbsComponent = React.forwardRef((props, ref) => {
+  let {
+    children: items,
+    currentIndex = items.length - 1,
+    separator,
+    overflowButton,
+    className,
+    ...rest
+  } = props;
+  let [overflowRef, visibleCount] = useOverflow(items);
+  let 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: 0 === currentIndex,
+          }),
+          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',
+                  },
+                  '…',
+                ),
+          ),
+          React.createElement(Separator, {
+            separator: separator,
+          }),
+        ),
+      items
+        .slice(
+          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+        )
+        .map((_, _index) => {
+          let 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,
+              }),
+          );
+        }),
+    ),
+  );
 });
 BreadcrumbsComponent.displayName = 'Breadcrumbs';
-let ListItem = ({ item, isActive })=>{
-    let children = item;
-    if (children?.type === 'span' || children?.type === 'a' || children?.type === Button) {
-        logWarning('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' : void 0
-    }));
+let ListItem = ({ item, isActive }) => {
+  let children = item;
+  if (
+    children?.type === 'span' ||
+    children?.type === 'a' ||
+    children?.type === Button
+  ) {
+    logWarning(
+      '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' : void 0,
+      }),
+  );
 };
-let Separator = ({ separator })=>React.createElement(Box, {
-        as: "li",
-        className: "iui-breadcrumbs-separator",
-        "aria-hidden": true
-    }, separator ?? React.createElement(SvgChevronRight, null));
-let BreadcrumbsItem = React.forwardRef((props, forwardedRef)=>{
-    let { as: asProp, ...rest } = props;
-    let commonProps = {
-        ...rest,
-        className: cx('iui-breadcrumbs-content', props.className),
-        ref: forwardedRef
-    };
-    if ('span' === String(asProp) || null == props.href && null == props.onClick && null == asProp) return React.createElement(Box, {
-        as: "span",
-        ...commonProps
-    });
-    return React.createElement(Button, {
-        as: 'a' === asProp || null == asProp && props.href ? Anchor : asProp,
-        styleType: "borderless",
-        ...commonProps
+let Separator = ({ separator }) =>
+  React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-separator',
+      'aria-hidden': true,
+    },
+    separator ?? React.createElement(SvgChevronRight, null),
+  );
+let BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
+  let { as: asProp, ...rest } = props;
+  let commonProps = {
+    ...rest,
+    className: cx('iui-breadcrumbs-content', props.className),
+    ref: forwardedRef,
+  };
+  if (
+    'span' === String(asProp) ||
+    (null == props.href && null == props.onClick && null == asProp)
+  )
+    return React.createElement(Box, {
+      as: 'span',
+      ...commonProps,
     });
+  return React.createElement(Button, {
+    as: 'a' === asProp || (null == asProp && props.href) ? Anchor : asProp,
+    styleType: 'borderless',
+    ...commonProps,
+  });
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
-    Item: BreadcrumbsItem
+  Item: BreadcrumbsItem,
 });

package/DEV-esm/core/ButtonGroup/ButtonGroup.js

@@ -1,71 +1,136 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
-import { Composite, CompositeItem, FloatingDelayGroup } from '@floating-ui/react';
+import {
+  Composite,
+  CompositeItem,
+  FloatingDelayGroup,
+} from '@floating-ui/react';
 export const ButtonGroupContext = React.createContext(void 0);
 ButtonGroupContext.displayName = 'ButtonGroupContext';
-export const ButtonGroup = React.forwardRef((props, forwardedRef)=>{
-    let { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    let children = React.useMemo(()=>{
-        if ('toolbar' !== props.role) return childrenProp;
-        return React.Children.map(childrenProp, (child, index)=>React.isValidElement(child) ? React.createElement(CompositeItem, {
-                key: index,
-                render: child
-            }) : child);
-    }, [
-        childrenProp,
-        props.role
-    ]);
-    let node = overflowButton ? React.createElement(OverflowGroup, {
-        orientation: orientation,
-        overflowButton: overflowButton,
-        overflowPlacement: overflowPlacement,
-        ref: forwardedRef,
-        ...rest
-    }, children) : React.createElement(BaseGroup, {
-        orientation: orientation,
-        ref: forwardedRef,
-        ...rest
-    }, children);
-    return React.createElement(FloatingDelayGroup, {
-        delay: {
-            open: 50,
-            close: 250
-        }
-    }, React.createElement(ButtonGroupContext.Provider, {
-        value: orientation
-    }, 'toolbar' === props.role ? React.createElement(Composite, {
-        orientation: orientation,
-        render: node,
-        disabledIndices: []
-    }) : node));
+export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
+  let {
+    children: childrenProp,
+    overflowButton,
+    overflowPlacement = 'end',
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  let children = React.useMemo(() => {
+    if ('toolbar' !== props.role) return childrenProp;
+    return React.Children.map(childrenProp, (child, index) =>
+      React.isValidElement(child)
+        ? React.createElement(CompositeItem, {
+            key: index,
+            render: child,
+          })
+        : child,
+    );
+  }, [childrenProp, props.role]);
+  let node = overflowButton
+    ? React.createElement(
+        OverflowGroup,
+        {
+          orientation: orientation,
+          overflowButton: overflowButton,
+          overflowPlacement: overflowPlacement,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      )
+    : React.createElement(
+        BaseGroup,
+        {
+          orientation: orientation,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      );
+  return React.createElement(
+    FloatingDelayGroup,
+    {
+      delay: {
+        open: 50,
+        close: 250,
+      },
+    },
+    React.createElement(
+      ButtonGroupContext.Provider,
+      {
+        value: orientation,
+      },
+      'toolbar' === props.role
+        ? React.createElement(Composite, {
+            orientation: orientation,
+            render: node,
+            disabledIndices: [],
+          })
+        : node,
+    ),
+  );
 });
 ButtonGroup.displayName = 'ButtonGroup';
-let BaseGroup = React.forwardRef((props, forwardedRef)=>{
-    let { orientation, className, ...rest } = props;
-    return React.createElement(Box, {
-        className: cx('iui-button-group', className),
-        "data-iui-orientation": 'vertical' === orientation ? orientation : void 0,
-        ref: forwardedRef,
-        ...rest
-    });
+let BaseGroup = React.forwardRef((props, forwardedRef) => {
+  let { orientation, className, ...rest } = props;
+  return React.createElement(Box, {
+    className: cx('iui-button-group', className),
+    'data-iui-orientation': 'vertical' === orientation ? orientation : void 0,
+    ref: forwardedRef,
+    ...rest,
+  });
 });
-let OverflowGroup = React.forwardRef((props, forwardedRef)=>{
-    let { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
-    let items = React.useMemo(()=>React.Children.toArray(childrenProp).filter(Boolean), [
-        childrenProp
-    ]);
-    let [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
-    return React.createElement(BaseGroup, {
-        orientation: orientation,
-        ...rest,
-        className: cx({
-            'iui-button-group-overflow-x': !!overflowButton && 'horizontal' === orientation
-        }, props.className),
-        ref: useMergedRefs(forwardedRef, overflowRef)
-    }, (()=>{
-        if (!(visibleCount < items.length)) return items;
-        let overflowStart = 'start' === overflowPlacement ? items.length - visibleCount : visibleCount - 1;
-        return React.createElement(React.Fragment, null, overflowButton && 'start' === overflowPlacement && overflowButton(overflowStart), 'start' === overflowPlacement ? items.slice(overflowStart + 1) : items.slice(0, Math.max(0, overflowStart)), overflowButton && 'end' === overflowPlacement && overflowButton(overflowStart));
-    })());
+let OverflowGroup = React.forwardRef((props, forwardedRef) => {
+  let {
+    children: childrenProp,
+    orientation,
+    overflowButton,
+    overflowPlacement,
+    ...rest
+  } = props;
+  let items = React.useMemo(
+    () => React.Children.toArray(childrenProp).filter(Boolean),
+    [childrenProp],
+  );
+  let [overflowRef, visibleCount] = useOverflow(
+    items,
+    !overflowButton,
+    orientation,
+  );
+  return React.createElement(
+    BaseGroup,
+    {
+      orientation: orientation,
+      ...rest,
+      className: cx(
+        {
+          'iui-button-group-overflow-x':
+            !!overflowButton && 'horizontal' === orientation,
+        },
+        props.className,
+      ),
+      ref: useMergedRefs(forwardedRef, overflowRef),
+    },
+    (() => {
+      if (!(visibleCount < items.length)) return items;
+      let overflowStart =
+        'start' === overflowPlacement
+          ? items.length - visibleCount
+          : visibleCount - 1;
+      return React.createElement(
+        React.Fragment,
+        null,
+        overflowButton &&
+          'start' === overflowPlacement &&
+          overflowButton(overflowStart),
+        'start' === overflowPlacement
+          ? items.slice(overflowStart + 1)
+          : items.slice(0, Math.max(0, overflowStart)),
+        overflowButton &&
+          'end' === overflowPlacement &&
+          overflowButton(overflowStart),
+      );
+    })(),
+  );
 });

package/DEV-esm/core/Buttons/Button.js

@@ -3,40 +3,77 @@ import * as React from 'react';
 import { Box, ButtonBase } from '../../utils/index.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { PopoverOpenContext } from '../Popover/Popover.js';
-export const Button = React.forwardRef((props, ref)=>{
-    let { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, loading: loading, disabled: disabledProp, ...rest } = props;
-    let hasPopoverOpen = React.useContext(PopoverOpenContext);
-    return React.createElement(ButtonBase, {
-        ref: ref,
-        className: cx('iui-button', 'iui-field', className),
-        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
-        "data-iui-size": size,
-        "data-iui-loading": loading ? 'true' : void 0,
-        "data-iui-has-popover": hasPopoverOpen ? 'open' : void 0,
-        disabled: disabledProp || loading,
-        ...rest,
-        style: {
-            '--_iui-width': stretched ? '100%' : void 0,
-            ...props.style
-        }
-    }, startIcon && React.createElement(Box, {
-        as: "span",
-        "aria-hidden": true,
-        ...startIconProps,
-        className: cx('iui-button-icon', startIconProps?.className)
-    }, startIcon), children && React.createElement(Box, {
-        as: "span",
-        ...labelProps,
-        className: cx('iui-button-label', labelProps?.className)
-    }, children), endIcon && React.createElement(Box, {
-        as: "span",
-        "aria-hidden": true,
-        ...endIconProps,
-        className: cx('iui-button-icon', endIconProps?.className)
-    }, endIcon), loading && React.createElement(ProgressRadial, {
+export const Button = React.forwardRef((props, ref) => {
+  let {
+    children,
+    className,
+    size,
+    styleType = 'default',
+    startIcon,
+    endIcon,
+    labelProps,
+    startIconProps,
+    endIconProps,
+    stretched,
+    loading: loading,
+    disabled: disabledProp,
+    ...rest
+  } = props;
+  let hasPopoverOpen = React.useContext(PopoverOpenContext);
+  return React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', 'iui-field', className),
+      'data-iui-variant': 'default' !== styleType ? styleType : void 0,
+      'data-iui-size': size,
+      'data-iui-loading': loading ? 'true' : void 0,
+      'data-iui-has-popover': hasPopoverOpen ? 'open' : void 0,
+      disabled: disabledProp || loading,
+      ...rest,
+      style: {
+        '--_iui-width': stretched ? '100%' : void 0,
+        ...props.style,
+      },
+    },
+    startIcon &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...startIconProps,
+          className: cx('iui-button-icon', startIconProps?.className),
+        },
+        startIcon,
+      ),
+    children &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          ...labelProps,
+          className: cx('iui-button-label', labelProps?.className),
+        },
+        children,
+      ),
+    endIcon &&
+      React.createElement(
+        Box,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...endIconProps,
+          className: cx('iui-button-icon', endIconProps?.className),
+        },
+        endIcon,
+      ),
+    loading &&
+      React.createElement(ProgressRadial, {
         size: 'small' === size ? 'x-small' : 'small',
-        className: "iui-button-spinner",
-        "aria-hidden": true
-    }));
+        className: 'iui-button-spinner',
+        'aria-hidden': true,
+      }),
+  );
 });
 Button.displayName = 'Button';