@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/Tile/Tile.js

@@ -4,16 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  StatusIconMap,
-  SvgMore,
-  SvgNew,
-  SvgCheckmark,
-  useSafeContext,
-  supportsHas,
-  polymorphic,
-  Box,
-} from '../utils/index.js';
+import { StatusIconMap, SvgMore, SvgNew, SvgCheckmark, useSafeContext, supportsHas, polymorphic, Box, } from '../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
@@ -21,74 +12,40 @@ import { LinkAction } from '../LinkAction/LinkAction.js';
 const TileContext = React.createContext(undefined);
 TileContext.displayName = 'TileContext';
 const TileWrapper = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    status,
-    variant,
-    isNew,
-    isSelected,
-    isLoading,
-    isDisabled,
-    ...rest
-  } = props;
-  const [localActionable, setLocalActionable] = React.useState(false);
-  const isActionable = localActionable;
-  return React.createElement(
-    TileContext.Provider,
-    {
-      value: {
-        status,
-        variant,
-        isNew,
-        isSelected,
-        isLoading,
-        isActionable,
-        isDisabled,
-        setActionable: setLocalActionable,
-      },
-    },
-    React.createElement(Box, {
-      className: cx(
-        'iui-tile',
-        {
-          'iui-folder': variant === 'folder',
-          'iui-new': isNew,
-          'iui-selected': isSelected,
-          'iui-actionable': isActionable,
-          [`iui-${status}`]: !!status,
-          'iui-loading': isLoading,
-        },
-        className,
-      ),
-      'aria-disabled': isDisabled,
-      ref: forwardedRef,
-      ...rest,
-    }),
-  );
+    const { className, status, variant, isNew, isSelected, isLoading, isDisabled, ...rest } = props;
+    const [localActionable, setLocalActionable] = React.useState(false);
+    const isActionable = localActionable;
+    return (React.createElement(TileContext.Provider, { value: {
+            status,
+            variant,
+            isNew,
+            isSelected,
+            isLoading,
+            isActionable,
+            isDisabled,
+            setActionable: setLocalActionable,
+        } },
+        React.createElement(Box, { className: cx('iui-tile', {
+                'iui-folder': variant === 'folder',
+                'iui-new': isNew,
+                'iui-selected': isSelected,
+                'iui-actionable': isActionable,
+                [`iui-${status}`]: !!status,
+                'iui-loading': isLoading,
+            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest })));
 });
 TileWrapper.displayName = 'Tile.Wrapper';
 // ----------------------------------------------------------------------------
 // Tile.Action component
 const TileAction = React.forwardRef((props, forwardedRef) => {
-  const { onClick, children, href, ...rest } = props;
-  const { setActionable, isDisabled } = useSafeContext(TileContext);
-  React.useEffect(() => {
-    if (!supportsHas()) {
-      setActionable(true);
-    }
-  }, [setActionable]);
-  return React.createElement(
-    LinkAction,
-    {
-      as: !!props.href ? 'a' : 'button',
-      href: href,
-      onClick: !isDisabled ? onClick : undefined,
-      'aria-disabled': isDisabled,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { onClick, children, href, ...rest } = props;
+    const { setActionable, isDisabled } = useSafeContext(TileContext);
+    React.useEffect(() => {
+        if (!supportsHas()) {
+            setActionable(true);
+        }
+    }, [setActionable]);
+    return (React.createElement(LinkAction, { as: (!!props.href ? 'a' : 'button'), href: href, onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled, ref: forwardedRef, ...rest }, children));
 });
 TileAction.displayName = 'Tile.Action';
 // ----------------------------------------------------------------------------
@@ -96,26 +53,13 @@ TileAction.displayName = 'Tile.Action';
 const TileThumbnailArea = polymorphic('iui-tile-thumbnail');
 TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
-  const { className, url, children, ...rest } = props;
-  if (url) {
-    return React.createElement(Box, {
-      className: cx('iui-tile-thumbnail-picture', className),
-      style: {
-        backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
-      },
-      ref: forwardedRef,
-      ...rest,
-    });
-  }
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-thumbnail-icon', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, url, children, ...rest } = props;
+    if (url) {
+        return (React.createElement(Box, { className: cx('iui-tile-thumbnail-picture', className), style: {
+                backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+            }, ref: forwardedRef, ...rest }));
+    }
+    return (React.createElement(Box, { className: cx('iui-thumbnail-icon', className), ref: forwardedRef, ...rest }, children));
 });
 TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
 // ----------------------------------------------------------------------------
@@ -129,18 +73,8 @@ TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 // ----------------------------------------------------------------------------
 // Tile.IconButton component
 const TileIconButton = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    IconButton,
-    {
-      className: className,
-      styleType: 'borderless',
-      size: 'small',
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(IconButton, { className: className, styleType: 'borderless', size: 'small', ref: forwardedRef, ...rest }, children));
 });
 TileIconButton.displayName = 'Tile.IconButton';
 // ----------------------------------------------------------------------------
@@ -148,48 +82,30 @@ TileIconButton.displayName = 'Tile.IconButton';
 const TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container');
 TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 const TileName = React.forwardRef((props, forwardedRef) => {
-  const { className, children, name, ...rest } = props;
-  return React.createElement(
-    Box,
-    { className: cx('iui-tile-name', className), ref: forwardedRef, ...rest },
-    children ?? name,
-  );
+    const { className, children, name, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-tile-name', className), ref: forwardedRef, ...rest }, children ?? name));
 });
 TileBadgeContainer.displayName = 'Tile.Name';
 // ----------------------------------------------------------------------------
 // Tile.NameIcon component
 const TileNameIcon = React.forwardRef((props, forwardedRef) => {
-  const { children, className, ...rest } = props;
-  const { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
-  const StatusIcon = !!status && StatusIconMap[status];
-  let icon;
-  if (StatusIcon) {
-    icon = React.createElement(StatusIcon, { 'aria-hidden': true });
-  }
-  if (isLoading) {
-    icon = React.createElement(ProgressRadial, {
-      size: 'x-small',
-      'aria-hidden': true,
-      indeterminate: true,
-    });
-  }
-  if (isSelected) {
-    icon = React.createElement(SvgCheckmark, { 'aria-hidden': true });
-  }
-  if (isNew) {
-    icon = React.createElement(SvgNew, { 'aria-hidden': true });
-  }
-  return children || icon
-    ? React.createElement(
-        Box,
-        {
-          className: cx('iui-tile-status-icon', className),
-          ref: forwardedRef,
-          ...rest,
-        },
-        children ?? icon,
-      )
-    : null;
+    const { children, className, ...rest } = props;
+    const { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
+    const StatusIcon = !!status && StatusIconMap[status];
+    let icon;
+    if (StatusIcon) {
+        icon = React.createElement(StatusIcon, { "aria-hidden": true });
+    }
+    if (isLoading) {
+        icon = React.createElement(ProgressRadial, { size: 'x-small', "aria-hidden": true, indeterminate: true });
+    }
+    if (isSelected) {
+        icon = React.createElement(SvgCheckmark, { "aria-hidden": true });
+    }
+    if (isNew) {
+        icon = React.createElement(SvgNew, { "aria-hidden": true });
+    }
+    return children || icon ? (React.createElement(Box, { className: cx('iui-tile-status-icon', className), ref: forwardedRef, ...rest }, children ?? icon)) : null;
 });
 TileNameIcon.displayName = 'Tile.NameIcon';
 // ----------------------------------------------------------------------------
@@ -209,47 +125,19 @@ TileDescription.displayName = 'Tile.Description';
 const TileMetadata = polymorphic('iui-tile-metadata');
 TileMetadata.displayName = 'Tile.Metadata';
 const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
-  const { className, children = [], buttonProps, ...rest } = props;
-  const [isMenuVisible, setIsMenuVisible] = React.useState(false);
-  return React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-tile-more-options',
-        {
-          'iui-visible': isMenuVisible,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      DropdownMenu,
-      {
-        onVisibleChange: setIsMenuVisible,
-        menuItems: (close) =>
-          children?.map((option) =>
-            React.cloneElement(option, {
-              onClick: (value) => {
-                close();
-                option.props.onClick?.(value);
-              },
-            }),
-          ),
-      },
-      React.createElement(
-        IconButton,
-        {
-          styleType: 'borderless',
-          size: 'small',
-          'aria-label': 'More options',
-          ...buttonProps,
-        },
-        React.createElement(SvgMore, null),
-      ),
-    ),
-  );
+    const { className, children = [], buttonProps, ...rest } = props;
+    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
+    return (React.createElement(Box, { className: cx('iui-tile-more-options', {
+            'iui-visible': isMenuVisible,
+        }, className), ref: forwardedRef, ...rest },
+        React.createElement(DropdownMenu, { onVisibleChange: setIsMenuVisible, menuItems: (close) => children?.map((option) => React.cloneElement(option, {
+                onClick: (value) => {
+                    close();
+                    option.props.onClick?.(value);
+                },
+            })) },
+            React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options', ...buttonProps },
+                React.createElement(SvgMore, null)))));
 });
 TileMoreOptions.displayName = 'Tile.MoreOptions';
 // ----------------------------------------------------------------------------
@@ -257,78 +145,22 @@ TileMoreOptions.displayName = 'Tile.MoreOptions';
 const TileButtons = polymorphic('iui-tile-buttons');
 TileButtons.displayName = 'Tile.Buttons';
 const TileComponent = React.forwardRef((props, forwardedRef) => {
-  const {
-    name,
-    description,
-    status,
-    isNew,
-    isLoading,
-    isSelected,
-    thumbnail,
-    badge,
-    leftIcon,
-    rightIcon,
-    buttons,
-    metadata,
-    moreOptions,
-    children,
-    isActionable,
-    isDisabled,
-    onClick,
-    ...rest
-  } = props;
-  return React.createElement(
-    TileWrapper,
-    {
-      ref: forwardedRef,
-      isNew: isNew,
-      isSelected: isSelected,
-      isLoading: isLoading,
-      status: status,
-      isDisabled: isDisabled,
-      ...rest,
-    },
-    React.createElement(
-      TileName,
-      null,
-      (status || isNew || isLoading || isSelected) &&
-        React.createElement(TileNameIcon, null),
-      React.createElement(
-        TileNameLabel,
-        null,
-        isActionable
-          ? React.createElement(
-              TileAction,
-              {
-                onClick: !isDisabled ? onClick : undefined,
-                'aria-disabled': isDisabled,
-              },
-              name,
-            )
-          : name,
-      ),
-    ),
-    thumbnail &&
-      React.createElement(
-        TileThumbnailArea,
-        null,
-        typeof thumbnail !== 'string'
-          ? React.createElement(TileThumbnailPicture, null, thumbnail)
-          : React.createElement(TileThumbnailPicture, { url: thumbnail }),
-        badge && React.createElement(TileBadgeContainer, null, badge),
-        leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
-        rightIcon && React.createElement(TileQuickAction, null, rightIcon),
-      ),
-    React.createElement(
-      TileContentArea,
-      null,
-      description && React.createElement(TileDescription, null, description),
-      moreOptions && React.createElement(TileMoreOptions, null, moreOptions),
-      metadata && React.createElement(TileMetadata, null, metadata),
-      children,
-    ),
-    buttons && React.createElement(TileButtons, null, buttons),
-  );
+    const { name, description, status, isNew, isLoading, isSelected, thumbnail, badge, leftIcon, rightIcon, buttons, metadata, moreOptions, children, isActionable, isDisabled, onClick, ...rest } = props;
+    return (React.createElement(TileWrapper, { ref: forwardedRef, isNew: isNew, isSelected: isSelected, isLoading: isLoading, status: status, isDisabled: isDisabled, ...rest },
+        React.createElement(TileName, null,
+            (status || isNew || isLoading || isSelected) && React.createElement(TileNameIcon, null),
+            React.createElement(TileNameLabel, null, isActionable ? (React.createElement(TileAction, { onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))),
+        thumbnail && (React.createElement(TileThumbnailArea, null,
+            typeof thumbnail !== 'string' ? (React.createElement(TileThumbnailPicture, null, thumbnail)) : (React.createElement(TileThumbnailPicture, { url: thumbnail })),
+            badge && React.createElement(TileBadgeContainer, null, badge),
+            leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
+            rightIcon && React.createElement(TileQuickAction, null, rightIcon))),
+        React.createElement(TileContentArea, null,
+            description && React.createElement(TileDescription, null, description),
+            moreOptions && React.createElement(TileMoreOptions, null, moreOptions),
+            metadata && React.createElement(TileMetadata, null, metadata),
+            children),
+        buttons && React.createElement(TileButtons, null, buttons)));
 });
 TileComponent.displayName = 'Tile';
 /**
@@ -369,136 +201,136 @@ TileComponent.displayName = 'Tile';
  * />
  */
 export const Tile = Object.assign(TileComponent, {
-  /**
-   * Wrapper subcomponent for fully customisable Tile.
-   */
-  Wrapper: TileWrapper,
-  /**
-   * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
-   * @example
-   * <Tile.ThumbnailArea>
-   *    <Tile.ThumbnailPicture/>
-   *    <Tile.QuickAction/>
-   *    <Tile.TypeIndicator/>
-   *    <Tile.BadgeContainer/>
-   * </Tile.ThumbnailArea>
-   */
-  ThumbnailArea: TileThumbnailArea,
-  /**
-   * Thumbnail image url, a custom component or an svg for thumbnail avatar.
-   * @example
-   * <Tile.Wrapper>
-   *  // ...
-   *  <Tile.ThumbnailArea>
-   *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
-   *  </Tile.ThumbnailArea>
-   * </Tile.Wrapper>
-   * or
-   * <Tile.Wrapper>
-   *  // ...
-   *  <Tile.ThumbnailArea>
-   *    <Tile.ThumbnailPicture>
-   *      {<Avatar image={<img src='icon.png' />} />}
-   *      // or
-   *      {<SvgImodelHollow />}
-   *    </Tile.ThumbnailPicture>
-   *   </Tile.ThumbnailArea>
-   * /Tile>
-   */
-  ThumbnailPicture: TileThumbnailPicture,
-  /**
-   * `QuickAction` subcomponent shown on top left of the tile.
-   * Recommended to use an invisible `IconButton`.
-   */
-  QuickAction: TileQuickAction,
-  /**
-   * `TypeIndicator` subcomponent shown on top left of the tile.
-   * Recommended to use an invisible `IconButton`.
-   */
-  TypeIndicator: TileTypeIndicator,
-  /**
-   * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
-   */
-  BadgeContainer: TileBadgeContainer,
-  /**
-   * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
-   */
-  IconButton: TileIconButton,
-  /**
-   * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
-   */
-  Name: TileName,
-  /**
-   * `NameIcon` next to name of the tile. Goes under <Tile.Name>
-   * @example
-   * <Tile.Wrapper>
-   *  <Tile.Name>
-   *    <Tile.NameIcon/>
-   *  </Tile.Name>
-   * </Tile.Wrapper>
-   */
-  NameIcon: TileNameIcon,
-  /*
-   * `NameLabel` of the tile
-   * @example
-   * <Tile.Wrapper>
-   *  <Tile.Name>
-   *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
-   *  </Tile.Name/>
-   * </Tile.Wrapper>
-   */
-  NameLabel: TileNameLabel,
-  /**
-   * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
-   * Renders `a` element by default.
-   * @example
-   * <Tile.Name>
-   *  <Tile.NameLabel>
-   *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
-   *  <Tile.NameLabel/>
-   * </Tile.Name>
-   */
-  Action: TileAction,
-  /**
-   * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
-   * @example
-   * <Tile.Wrapper>
-   *  <Tile.ContentArea>
-   *    <Tile.Description/>
-   *    <Tile.Metadata/>
-   *    <Tile.MoreOptions/>
-   *  </Tile.ContentArea>
-   * </Tile.Wrapper>
-   */
-  ContentArea: TileContentArea,
-  /**
-   * Description text of the tile.
-   * Gets truncated if it can't fit in the tile.
-   */
-  Description: TileDescription,
-  /**
-   * Metadata section located below description.
-   * @example
-   * <Tile.Metadata>
-   *  // ...
-   *  'basic metadata'
-   *  // or
-   *  {<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
-   *  // or
-   *  {<>
-   *    <SvgTag2 />
-   *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
-   *  </>}
-   * </Tile.Metadata>
-   */
-  Metadata: TileMetadata,
-  /**
-   * Dropdown menu containing `MenuItem`s.
-   */
-  MoreOptions: TileMoreOptions,
-  /**
-   * Upto two buttons shown at the bottom of the tile.
-   */
-  Buttons: TileButtons,
+    /**
+     * Wrapper subcomponent for fully customisable Tile.
+     */
+    Wrapper: TileWrapper,
+    /**
+     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
+     * @example
+     * <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture/>
+     *    <Tile.QuickAction/>
+     *    <Tile.TypeIndicator/>
+     *    <Tile.BadgeContainer/>
+     * </Tile.ThumbnailArea>
+     */
+    ThumbnailArea: TileThumbnailArea,
+    /**
+     * Thumbnail image url, a custom component or an svg for thumbnail avatar.
+     * @example
+     * <Tile.Wrapper>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
+     *  </Tile.ThumbnailArea>
+     * </Tile.Wrapper>
+     * or
+     * <Tile.Wrapper>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture>
+     *      {<Avatar image={<img src='icon.png' />} />}
+     *      // or
+     *      {<SvgImodelHollow />}
+     *    </Tile.ThumbnailPicture>
+     *   </Tile.ThumbnailArea>
+     * /Tile>
+     */
+    ThumbnailPicture: TileThumbnailPicture,
+    /**
+     * `QuickAction` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    QuickAction: TileQuickAction,
+    /**
+     * `TypeIndicator` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    TypeIndicator: TileTypeIndicator,
+    /**
+     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
+     */
+    BadgeContainer: TileBadgeContainer,
+    /**
+     * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
+     */
+    IconButton: TileIconButton,
+    /**
+     * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
+     */
+    Name: TileName,
+    /**
+     * `NameIcon` next to name of the tile. Goes under <Tile.Name>
+     * @example
+     * <Tile.Wrapper>
+     *  <Tile.Name>
+     *    <Tile.NameIcon/>
+     *  </Tile.Name>
+     * </Tile.Wrapper>
+     */
+    NameIcon: TileNameIcon,
+    /*
+     * `NameLabel` of the tile
+     * @example
+     * <Tile.Wrapper>
+     *  <Tile.Name>
+     *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
+     *  </Tile.Name/>
+     * </Tile.Wrapper>
+     */
+    NameLabel: TileNameLabel,
+    /**
+     * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
+     * Renders `a` element by default.
+     * @example
+     * <Tile.Name>
+     *  <Tile.NameLabel>
+     *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
+     *  <Tile.NameLabel/>
+     * </Tile.Name>
+     */
+    Action: TileAction,
+    /**
+     * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
+     * @example
+     * <Tile.Wrapper>
+     *  <Tile.ContentArea>
+     *    <Tile.Description/>
+     *    <Tile.Metadata/>
+     *    <Tile.MoreOptions/>
+     *  </Tile.ContentArea>
+     * </Tile.Wrapper>
+     */
+    ContentArea: TileContentArea,
+    /**
+     * Description text of the tile.
+     * Gets truncated if it can't fit in the tile.
+     */
+    Description: TileDescription,
+    /**
+     * Metadata section located below description.
+     * @example
+     * <Tile.Metadata>
+     *  // ...
+     *  'basic metadata'
+     *  // or
+     *  {<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
+     *  // or
+     *  {<>
+     *    <SvgTag2 />
+     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
+     *  </>}
+     * </Tile.Metadata>
+     */
+    Metadata: TileMetadata,
+    /**
+     * Dropdown menu containing `MenuItem`s.
+     */
+    MoreOptions: TileMoreOptions,
+    /**
+     * Upto two buttons shown at the bottom of the tile.
+     */
+    Buttons: TileButtons,
 });
 export default Tile;