@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/esm/core/Avatar/Avatar.js

@@ -1,53 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box, SoftBackgrounds, isSoftBackground } from '../../utils/index.js';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-let getBackground = (color) => {
-  if (!color) return '';
-  return isSoftBackground(color) ? SoftBackgrounds[color] : color;
-};
-export const defaultStatusTitles = {
-  away: 'Away',
-  busy: 'Busy',
-  offline: 'Offline',
-  online: 'Online',
-};
-export const Avatar = React.forwardRef((props, ref) => {
-  let {
-    size = 'small',
-    status,
-    abbreviation,
-    image,
-    backgroundColor,
-    title,
-    translatedStatusTitles,
-    className,
-    style,
-    ...rest
-  } = props;
-  let statusTitles = {
-    ...defaultStatusTitles,
-    ...translatedStatusTitles,
-  };
-  return React.createElement(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-avatar', className),
-      'data-iui-size': 'medium' !== size ? size : void 0,
-      'data-iui-status': status,
-      title: title,
-      style: {
-        backgroundColor: getBackground(backgroundColor),
-        ...style,
-      },
-      ref: ref,
-      ...rest,
-    },
-    image ? null : abbreviation?.substring(0, 2),
-    image,
-    status
-      ? React.createElement(VisuallyHidden, null, statusTitles[status])
-      : null,
-  );
-});

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type AvatarGroupProps = {
-    /**
-     * Max number of avatars unstacked.
-     * @default 5
-     */
-    maxIcons?: number;
-    /**
-     * If true, group will be stacked to take less space.
-     * @default true
-     */
-    stacked?: boolean;
-    /**
-     * If true, group will be animated on hover.
-     * @default false
-     */
-    animated?: boolean;
-    /**
-     * Size of avatars and count avatars.
-     * @default 'small'
-     */
-    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
-    /**
-     * Avatars in the group.
-     */
-    children: React.ReactNode;
-    /**
-     * Count Avatar props.
-     */
-    countIconProps?: React.ComponentPropsWithRef<'div'>;
-};
-/**
- * Group Avatars together.
- *
- * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
- * this component will show 5 Avatars and Count Avatar with "3" in it.
- *
- * You can add custom Count Avatar behavior by using `countAvatarProps`.
- *
- * @example
- * <AvatarGroup iconSize='medium'>
- *  <Avatar
- *    abbreviation="TR"
- *    backgroundColor={getUserColor("Terry Rivers")}
- *    title="Terry Rivers"
- *  />
- *  <Avatar
- *    abbreviation="RM"
- *    backgroundColor={getUserColor("Robin Mercer")}
- *    title="Robin Mercer"
- *  />
- *  <Avatar
- *    abbreviation="JM"
- *    backgroundColor={getUserColor("Jean Mullins")}
- *    title="Jean Mullins"
- *  />
- * </AvatarGroup>
- */
-export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-export {};

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-export const AvatarGroup = React.forwardRef((props, ref) => {
-  let maxLength = 99;
-  let {
-    children,
-    animated = false,
-    stacked = true,
-    maxIcons = 5,
-    iconSize = 'small',
-    countIconProps,
-    className,
-    ...rest
-  } = props;
-  let childrenArray = React.Children.toArray(children);
-  let childrenLength = childrenArray.length;
-  let getAvatarList = (count) =>
-    childrenArray.slice(0, count).map((child) =>
-      React.cloneElement(child, {
-        status: void 0,
-        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-avatar-count',
-              countIconProps?.className,
-            ),
-            'data-iui-size': 'medium' !== iconSize ? iconSize : void 0,
-          },
-          childrenLength <= maxLength
-            ? `${childrenLength - maxIcons}`
-            : `${maxLength}+`,
-        ),
-      ),
-  );
-});

package/esm/core/Backdrop/Backdrop.d.ts

@@ -1,9 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type BackdropProps = {
-    /**
-     * Flag whether backdrop should be shown.
-     * @default true
-     */
-    isVisible?: boolean;
-};
-export declare const Backdrop: PolymorphicForwardRefComponent<"div", BackdropProps>;

package/esm/core/Backdrop/Backdrop.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-export const Backdrop = React.forwardRef((props, ref) => {
-  let { 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.d.ts

@@ -1,26 +0,0 @@
-import { SoftBackgrounds } from '../../utils/index.js';
-import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
-type BadgeProps = {
-    /**
-     * Background color of the badge.
-     *
-     * Recommended to use one of the preset colors for statuses and soft backgrounds.
-     *
-     * If not specified, a default neutral background will be used.
-     */
-    backgroundColor?: 'primary' | 'informational' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | AnyString;
-    /**
-     * Badge label.
-     * Always gets converted to uppercase, and truncated if too long.
-     */
-    children: string;
-};
-/**
- * A colorful visual indicator for categorizing items.
- * @example
- * <Badge>Label</Badge>
- * <Badge backgroundColor="sunglow">Label</Badge>
- * <Badge backgroundColor="positive">Label</Badge>
- */
-export declare const Badge: PolymorphicForwardRefComponent<"span", BadgeProps>;
-export {};

package/esm/core/Badge/Badge.js

@@ -1,40 +0,0 @@
-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 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,
-  );
-});

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type BreadcrumbsProps = {
-    /**
-     * Index of the currently active breadcrumb.
-     * Defaults to the index of the last breadcrumb item.
-     */
-    currentIndex?: number;
-    /**
-     * Breadcrumb items.
-     */
-    children: React.ReactNode[];
-    /**
-     * Specify a custom separator element to show between breadcrumb items.
-     * Defaults to the `SvgChevronRight` icon.
-     */
-    separator?: React.ReactNode;
-    /**
-     * If specified, this prop will be used to show a custom button when overflow happens,
-     * i.e. when there is not enough space to fit all the breadcrumbs.
-     *
-     * Expects a function that takes the number of items that are visible
-     * and returns the `ReactNode` to render.
-     *
-     * @example <caption>Uses the overflow button to redirect to the previous breadcrumb</caption>
-     *  <Breadcrumbs
-     *    overflowButton={(visibleCount: number) => {
-     *      const previousBreadcrumb = visibleCount > 1 ? items.length - visibleCount : items.length - 2;
-     *      return (
-     *        <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
-     *          <IconButton
-     *            onClick={() => {
-     *              // click on "previousBreadcrumb"
-     *            }}
-     *          >
-     *            <SvgMoreSmall />
-     *          </IconButton>
-     *        </Tooltip>
-     *      );
-     *    }}
-     *  >
-     *    {items}
-     *  </Breadcrumbs>
-     *
-     * @example <caption>Uses the overflow button to add a dropdown that contains hidden breadcrumbs</caption>
-     *  <Breadcrumbs
-     *    overflowButton={(visibleCount) => (
-     *      <DropdownMenu
-     *        menuItems={(close) =>
-     *          Array(items.length - visibleCount)
-     *            .fill(null)
-     *            .map((_, _index) => {
-     *              const index = visibleCount > 1 ? _index + 1 : _index;
-     *              const onClick = () => {
-     *                // click on "index" breadcrumb
-     *                close();
-     *              };
-     *              return (
-     *                <MenuItem key={index} onClick={onClick}>
-     *                  Item {index}
-     *                </MenuItem>
-     *              );
-     *            })
-     *        }
-     *      >
-     *        <IconButton>
-     *          <SvgMoreSmall />
-     *        </IconButton>
-     *      </DropdownMenu>
-     *    )}
-     *  >
-     *    {items}
-     *  </Breadcrumbs>
-     */
-    overflowButton?: (visibleCount: number) => React.ReactNode;
-};
-export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps> & {
-    /**
-     * 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: PolymorphicForwardRefComponent<"a", {}>;
-};
-export {};

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  SvgChevronRight,
-  Box,
-  OverflowContainer,
-  useWarningLogger,
-} from '../../utils/index.js';
-import { Button } from '../Buttons/Button.js';
-import { Anchor } from '../Typography/Anchor.js';
-let BreadcrumbsComponent = React.forwardRef((props, forwardedRef) => {
-  let {
-    children: childrenProp,
-    currentIndex = React.Children.count(childrenProp) - 1,
-    separator,
-    overflowButton,
-    className,
-    ...rest
-  } = props;
-  let items = React.useMemo(
-    () => React.Children.toArray(childrenProp),
-    [childrenProp],
-  );
-  return React.createElement(
-    Box,
-    {
-      as: 'nav',
-      className: cx('iui-breadcrumbs', className),
-      ref: forwardedRef,
-      'aria-label': 'Breadcrumb',
-      ...rest,
-    },
-    React.createElement(
-      OverflowContainer,
-      {
-        as: 'ol',
-        itemsCount: items.length,
-        className: 'iui-breadcrumbs-list',
-      },
-      React.createElement(
-        BreadcrumbContent,
-        {
-          currentIndex: currentIndex,
-          overflowButton: overflowButton,
-          separator: separator,
-        },
-        items,
-      ),
-    ),
-  );
-});
-let BreadcrumbContent = (props) => {
-  let { children: items, currentIndex, overflowButton, separator } = props;
-  let { visibleCount } = OverflowContainer.useContext();
-  return React.createElement(
-    React.Fragment,
-    null,
-    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 ListItem = ({ item, isActive }) => {
-  let children = item;
-  let logWarning = useWarningLogger();
-  if (
-    children?.type === 'span' ||
-    children?.type === 'a' ||
-    children?.type === Button
-  )
-    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,
-  });
-});
-export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
-  Item: BreadcrumbsItem,
-});

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
-/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
-export declare const ButtonGroupContext: React.Context<string | undefined>;
-type ButtonGroupProps = {
-    /**
-     * Buttons in the ButtonGroup.
-     */
-    children: React.ReactNode;
-    /**
-     * If specified, this prop will be used to show a custom button when overflow happens,
-     * i.e. when there is not enough space to fit all the buttons.
-     *
-     * Expects a function that takes the index of the first button that is overflowing (i.e. hidden)
-     * and returns the `ReactNode` to render.
-     *
-     * The placement of this button can be controlled using the `overflowPlacement` prop.
-     */
-    overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
-    /**
-     * If `overflowButton` is specified, should it placed at the start or the end?
-     * @default 'end'
-     */
-    overflowPlacement?: 'start' | 'end';
-    /**
-     * Should the buttons be placed in a horizontal or vertical layout?
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * ARIA role for the ButtonGroup.
-     *
-     * If set to toolbar', it will automatically support arrow-key navigation.
-     *
-     * **Note**: `role="toolbar"` should not be used when the ButtonGroup contains
-     * non-button elements (such as inputs).
-     */
-    role?: 'toolbar' | AnyString;
-};
-/**
- * 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 declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
-export {};