@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -1,106 +1,159 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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 _jsx(Box, {
+    as: 'nav',
+    className: cx('iui-breadcrumbs', className),
+    ref: refs,
+    'aria-label': 'Breadcrumb',
+    ...rest,
+    children: _jsxs(Box, {
+      as: 'ol',
+      className: 'iui-breadcrumbs-list',
+      children: [
+        visibleCount > 1 &&
+          _jsxs(_Fragment, {
+            children: [
+              _jsx(ListItem, {
+                item: items[0],
+                isActive: currentIndex === 0,
+              }),
+              _jsx(Separator, {
+                separator: separator,
+              }),
+            ],
+          }),
+        items.length - visibleCount > 0 &&
+          _jsxs(_Fragment, {
+            children: [
+              _jsx(Box, {
+                as: 'li',
+                className: 'iui-breadcrumbs-item',
+                children: overflowButton
+                  ? overflowButton(visibleCount)
+                  : _jsx(Box, {
+                      as: 'span',
+                      className: 'iui-breadcrumbs-content',
+                      children: '…',
+                    }),
+              }),
+              _jsx(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 _jsxs(
+              React.Fragment,
+              {
+                children: [
+                  _jsx(ListItem, {
+                    item: items[index],
+                    isActive: currentIndex === index,
+                  }),
+                  index < items.length - 1 &&
+                    _jsx(Separator, {
+                      separator: separator,
+                    }),
+                ],
+              },
+              index,
+            );
+          }),
+      ],
+    }),
+  });
 });
-// ----------------------------------------------------------------------------
-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 = _jsx(BreadcrumbsItem, {
+      ...children.props,
+    });
+  }
+  return _jsx(Box, {
+    as: 'li',
+    className: 'iui-breadcrumbs-item',
+    children:
+      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 }) =>
+  _jsx(Box, {
+    as: 'li',
+    className: 'iui-breadcrumbs-separator',
+    'aria-hidden': true,
+    children: separator ?? _jsx(SvgChevronRight, {}),
+  });
 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 _jsx(Box, {
+      as: 'span',
+      ...commonProps,
+    });
+  }
+  return _jsx(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,134 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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)
+        ? _jsx(
+            CompositeItem,
+            {
+              render: child,
+            },
+            index,
+          )
+        : child,
+    );
+  }, [childrenProp, props.role]);
+  const node = overflowButton
+    ? _jsx(OverflowGroup, {
+        orientation: orientation,
+        overflowButton: overflowButton,
+        overflowPlacement: overflowPlacement,
+        ref: forwardedRef,
+        ...rest,
+        children: children,
+      })
+    : _jsx(BaseGroup, {
+        orientation: orientation,
+        ref: forwardedRef,
+        ...rest,
+        children: children,
+      });
+  return _jsx(FloatingDelayGroup, {
+    delay: {
+      open: 50,
+      close: 250,
+    },
+    children: _jsx(ButtonGroupContext.Provider, {
+      value: orientation,
+      children:
+        props.role === 'toolbar'
+          ? _jsx(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 _jsx(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 _jsx(BaseGroup, {
+    orientation: orientation,
+    ...rest,
+    className: cx(
+      {
+        'iui-button-group-overflow-x':
+          !!overflowButton && orientation === 'horizontal',
+      },
+      props.className,
+    ),
+    ref: useMergedRefs(forwardedRef, overflowRef),
+    children: (() => {
+      if (!(visibleCount < items.length)) {
+        return items;
+      }
+      const overflowStart =
+        overflowPlacement === 'start'
+          ? items.length - visibleCount
+          : visibleCount - 1;
+      return _jsxs(_Fragment, {
+        children: [
+          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,69 @@
-/*---------------------------------------------------------------------------------------------
- * 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, 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 _jsxs(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,
+    },
+    children: [
+      startIcon &&
+        _jsx(Box, {
+          as: 'span',
+          'aria-hidden': true,
+          ...startIconProps,
+          className: cx('iui-button-icon', startIconProps?.className),
+          children: startIcon,
+        }),
+      children &&
+        _jsx(Box, {
+          as: 'span',
+          ...labelProps,
+          className: cx('iui-button-label', labelProps?.className),
+          children: children,
+        }),
+      endIcon &&
+        _jsx(Box, {
+          as: 'span',
+          'aria-hidden': true,
+          ...endIconProps,
+          className: cx('iui-button-icon', endIconProps?.className),
+          children: endIcon,
+        }),
+      loading &&
+        _jsx(ProgressRadial, {
+          size: size === 'small' ? 'x-small' : 'small',
+          className: 'iui-button-spinner',
+          'aria-hidden': true,
+        }),
+    ],
+  });
 });

package/esm/core/Buttons/DropdownButton.js

@@ -1,27 +1,43 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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 _jsx(DropdownMenu, {
+    menuItems: menuItems,
+    matchWidth: true,
+    visible: isMenuOpen,
+    ...dropdownMenuProps,
+    onVisibleChange: (open) => {
+      setIsMenuOpen(open);
+      dropdownMenuProps?.onVisibleChange?.(open);
+    },
+    children: _jsx(Button, {
+      className: cx('iui-button-dropdown', className),
+      size: size,
+      styleType: styleType,
+      endIcon: isMenuOpen
+        ? _jsx(SvgCaretUpSmall, {
+            'aria-hidden': true,
+          })
+        : _jsx(SvgCaretDownSmall, {
+            'aria-hidden': true,
+          }),
+      ref: forwardedRef,
+      ...rest,
+      children: children,
+    }),
+  });
 });