@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -1,106 +1,163 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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';
 const logWarningInDev = createWarningLogger();
-/**
- * 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>
- */
 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',
+                  },
+                  '…',
+                ),
+          ),
+          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, }) => {
-    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 }) => {
+  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 { as: asProp, ...rest } = props;
-    const commonProps = {
-        ...rest,
-        className: cx('iui-breadcrumbs-content', props.className),
-        ref: forwardedRef,
-    };
-    if (String(asProp) === 'span' ||
-        (props.href == null && props.onClick == null && asProp == null)) {
-        return React.createElement(Box, { as: 'span', ...commonProps });
-    }
-    return (React.createElement(Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
-            ? Anchor
-            : asProp), styleType: 'borderless', ...commonProps }));
+  const { as: asProp, ...rest } = props;
+  const commonProps = {
+    ...rest,
+    className: cx('iui-breadcrumbs-content', props.className),
+    ref: forwardedRef,
+  };
+  if (
+    String(asProp) === 'span' ||
+    (props.href == null && props.onClick == null && asProp == null)
+  ) {
+    return React.createElement(Box, {
+      as: 'span',
+      ...commonProps,
+    });
+  }
+  return React.createElement(Button, {
+    as: asProp === 'a' || (asProp == null && !!props.href) ? Anchor : asProp,
+    styleType: 'borderless',
+    ...commonProps,
+  });
 });
 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,
+  Item: BreadcrumbsItem,
 });

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -1,83 +1,140 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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';
-// ----------------------------------------------------------------------------
-/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
+import {
+  Composite,
+  CompositeItem,
+  FloatingDelayGroup,
+} from '@floating-ui/react';
 export const ButtonGroupContext = React.createContext(undefined);
 ButtonGroupContext.displayName = 'ButtonGroupContext';
-/**
- * Group buttons together for common actions.
- * Handles responsive overflow when the `overflowButton` prop is specified.
- *
- * @example
- * <ButtonGroup role="toolbar">
- *   <IconButton>
- *     <SvgAdd />
- *   </IconButton>
- *   <IconButton>
- *     <SvgEdit />
- *   </IconButton>
- * </ButtonGroup>
- *
- * @example
- * const buttons = [...Array(10)].map((_, index) => <IconButton><SvgPlaceholder /></IconButton>);
- * <ButtonGroup
- *   overflowButton={(overflowStart) => <DropdownMenu menuItems={(close) =>
- *     [...Array(buttons.length - overflowStart + 1)].map((_, index) => (
- *       <MenuItem icon={<SvgPlaceholder />} onClick={close}>Button #{overflowStart + index}</MenuItem>
- *     ))
- *   }>
- *     <IconButton><SvgMore /></IconButton>
- *   </DropdownMenu>}
- * >
- *   {buttons}
- * </ButtonGroup>
- */
 export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
-    const { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const children = React.useMemo(() => {
-        if (props.role !== 'toolbar') {
-            return childrenProp;
-        }
-        return React.Children.map(childrenProp, (child, index) => React.isValidElement(child) ? (React.createElement(CompositeItem, { key: index, render: child })) : (child));
-    }, [childrenProp, props.role]);
-    const 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 }, props.role === 'toolbar' ? (React.createElement(Composite, { orientation: orientation, render: node })) : (node))));
+  const {
+    children: childrenProp,
+    overflowButton,
+    overflowPlacement = 'end',
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  const children = React.useMemo(() => {
+    if (props.role !== 'toolbar') {
+      return childrenProp;
+    }
+    return React.Children.map(childrenProp, (child, index) =>
+      React.isValidElement(child)
+        ? React.createElement(CompositeItem, {
+            key: index,
+            render: child,
+          })
+        : child,
+    );
+  }, [childrenProp, props.role]);
+  const 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,
+      },
+      props.role === 'toolbar'
+        ? React.createElement(Composite, {
+            orientation: orientation,
+            render: node,
+            disabledIndices: [],
+          })
+        : node,
+    ),
+  );
 });
-// ----------------------------------------------------------------------------
 const BaseGroup = React.forwardRef((props, forwardedRef) => {
-    const { orientation, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-button-group', className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: forwardedRef, ...rest }));
+  const { orientation, className, ...rest } = props;
+  return React.createElement(Box, {
+    className: cx('iui-button-group', className),
+    'data-iui-orientation':
+      orientation === 'vertical' ? orientation : undefined,
+    ref: forwardedRef,
+    ...rest,
+  });
 });
-// ----------------------------------------------------------------------------
 const OverflowGroup = React.forwardRef((props, forwardedRef) => {
-    const { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
-    const items = React.useMemo(() => React.Children.toArray(childrenProp).filter(Boolean), [childrenProp]);
-    const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
-    return (React.createElement(BaseGroup, { orientation: orientation, ...rest, className: cx({
-            'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, props.className), ref: useMergedRefs(forwardedRef, overflowRef) }, (() => {
-        if (!(visibleCount < items.length)) {
-            return items;
-        }
-        const overflowStart = overflowPlacement === 'start'
-            ? items.length - visibleCount
-            : visibleCount - 1;
-        return (React.createElement(React.Fragment, null,
-            overflowButton &&
-                overflowPlacement === 'start' &&
-                overflowButton(overflowStart),
-            overflowPlacement === 'start'
-                ? items.slice(overflowStart + 1)
-                : items.slice(0, Math.max(0, overflowStart)),
-            overflowButton &&
-                overflowPlacement === 'end' &&
-                overflowButton(overflowStart)));
-    })()));
+  const {
+    children: childrenProp,
+    orientation,
+    overflowButton,
+    overflowPlacement,
+    ...rest
+  } = props;
+  const items = React.useMemo(
+    () => React.Children.toArray(childrenProp).filter(Boolean),
+    [childrenProp],
+  );
+  const [overflowRef, visibleCount] = useOverflow(
+    items,
+    !overflowButton,
+    orientation,
+  );
+  return React.createElement(
+    BaseGroup,
+    {
+      orientation: orientation,
+      ...rest,
+      className: cx(
+        {
+          'iui-button-group-overflow-x':
+            !!overflowButton && orientation === 'horizontal',
+        },
+        props.className,
+      ),
+      ref: useMergedRefs(forwardedRef, overflowRef),
+    },
+    (() => {
+      if (!(visibleCount < items.length)) {
+        return items;
+      }
+      const overflowStart =
+        overflowPlacement === 'start'
+          ? items.length - visibleCount
+          : visibleCount - 1;
+      return React.createElement(
+        React.Fragment,
+        null,
+        overflowButton &&
+          overflowPlacement === 'start' &&
+          overflowButton(overflowStart),
+        overflowPlacement === 'start'
+          ? items.slice(overflowStart + 1)
+          : items.slice(0, Math.max(0, overflowStart)),
+        overflowButton &&
+          overflowPlacement === 'end' &&
+          overflowButton(overflowStart),
+      );
+    })(),
+  );
 });

package/esm/core/Buttons/Button.js

@@ -1,28 +1,78 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
 import { Box, ButtonBase } from '../../utils/index.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-/**
- * Generic button component
- * @example
- * <Button>This is a default button</Button>
- * <Button disabled={true}>This is a disabled button</Button>
- * <Button size='large' styleType='high-visibility'>This is a large high visibility button</Button>
- * <Button size='small' styleType='cta'>This is a small call to action button</Button>
- * <Button startIcon={<SvgAdd />}>New</Button>
- */
+import { PopoverOpenContext } from '../Popover/Popover.js';
 export const Button = React.forwardRef((props, ref) => {
-    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, loading: loading, disabled: disabledProp, ...rest } = props;
-    return (React.createElement(ButtonBase, { ref: ref, className: cx('iui-button', 'iui-field', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-loading": loading ? 'true' : undefined, disabled: disabledProp || loading, ...rest, style: {
-            '--_iui-width': stretched ? '100%' : undefined,
-            ...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: size === 'small' ? 'x-small' : 'small', className: 'iui-button-spinner', "aria-hidden": true }))));
+  const {
+    children,
+    className,
+    size,
+    styleType = 'default',
+    startIcon,
+    endIcon,
+    labelProps,
+    startIconProps,
+    endIconProps,
+    stretched,
+    loading: loading,
+    disabled: disabledProp,
+    ...rest
+  } = props;
+  const hasPopoverOpen = React.useContext(PopoverOpenContext);
+  return React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', 'iui-field', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      'data-iui-loading': loading ? 'true' : undefined,
+      'data-iui-has-popover': hasPopoverOpen ? 'open' : undefined,
+      disabled: disabledProp || loading,
+      ...rest,
+      style: {
+        '--_iui-width': stretched ? '100%' : undefined,
+        ...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: size === 'small' ? 'x-small' : 'small',
+        className: 'iui-button-spinner',
+        'aria-hidden': true,
+      }),
+  );
 });

package/esm/core/Buttons/DropdownButton.js

@@ -1,27 +1,48 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Button } from './Button.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
-/**
- * Button that opens a DropdownMenu.
- * @example
- * const menuItems = (close: () => void) => [
- *   <MenuItem key={1} onClick={onClick(1, close)}>Item #1</MenuItem>,
- *   <MenuItem key={2} onClick={onClick(2, close)}>Item #2</MenuItem>,
- * ];
- * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
- */
 export const DropdownButton = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    return (React.createElement(DropdownMenu, { menuItems: menuItems, matchWidth: true, visible: isMenuOpen, ...dropdownMenuProps, onVisibleChange: (open) => {
-            setIsMenuOpen(open);
-            dropdownMenuProps?.onVisibleChange?.(open);
-        } },
-        React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: forwardedRef, ...rest }, children)));
+  const {
+    menuItems,
+    className,
+    size,
+    styleType,
+    children,
+    dropdownMenuProps,
+    ...rest
+  } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  return React.createElement(
+    DropdownMenu,
+    {
+      menuItems: menuItems,
+      matchWidth: true,
+      visible: isMenuOpen,
+      ...dropdownMenuProps,
+      onVisibleChange: (open) => {
+        setIsMenuOpen(open);
+        dropdownMenuProps?.onVisibleChange?.(open);
+      },
+    },
+    React.createElement(
+      Button,
+      {
+        className: cx('iui-button-dropdown', className),
+        size: size,
+        styleType: styleType,
+        endIcon: isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              'aria-hidden': true,
+            }),
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    ),
+  );
 });