@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Tile/Tile.js

@@ -1,10 +1,15 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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';
@@ -12,324 +17,319 @@ 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';
-// ----------------------------------------------------------------------------
-// Tile.ThumbnailArea component
 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';
-// ----------------------------------------------------------------------------
-// Tile.QuickAction component
 const TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action');
 TileQuickAction.displayName = 'Tile.QuickAction';
-// ----------------------------------------------------------------------------
-// Tile.TypeIndicator component
 const TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator');
 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: cx('iui-tile-thumbnail-button', className),
+      styleType: 'borderless',
+      size: 'small',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileIconButton.displayName = 'Tile.IconButton';
-// ----------------------------------------------------------------------------
-// Tile.BadgeContainer component
 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';
-// ----------------------------------------------------------------------------
-// Tile.NameLabel component
 const TileNameLabel = polymorphic.span('iui-tile-name-label');
 TileNameLabel.displayName = 'Tile.NameLabel';
-// ----------------------------------------------------------------------------
-// Tile.ContentArea component
 const TileContentArea = polymorphic('iui-tile-content');
 TileContentArea.displayName = 'Tile.ContentArea';
-// ----------------------------------------------------------------------------
-// Tile.Description component
 const TileDescription = polymorphic('iui-tile-description');
 TileDescription.displayName = 'Tile.Description';
-// ----------------------------------------------------------------------------
-// Tile.Metadata component
 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';
-// ----------------------------------------------------------------------------
-// Tile.Buttons component
 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';
-/**
- * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
- * @example
- * <Tile.Wrapper>
- *    <Tile.ThumbnailArea>
- *      <Tile.ThumbnailPicture/>
- *      <Tile.Badge/>
- *      <Tile.TypeIndicator/>
- *      <Tile.QuickAction/>
- *    </Tile.ThumbnailArea>
- *    <Tile.Name>
- *      <Tile.NameIcon/>
- *      <Tile.NameLabel/>
- *    </Tile.Name>
- *    <Tile.ContentArea>
- *      <Tile.Description />
- *      <Tile.Metadata/>
- *      <Tile.MoreOptions/>
- *    </Tile.ContentArea>
- *    <Tile.Buttons/>
- * </Tile.Wrapper>
- *
- * @example
- *  <Tile
- *  name='Tile name'
- *  description='Tile description that takes upto 3 lines'
- *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
- *  thumbnail='/url/to/image.jpg'
- *  badge={<Badge backgroundColor='blue'>Badge label</Badge>}
- *  buttons={[<Button>Button 1</Button>, <Button>Button 2</Button>]}
- *  moreOptions={[<MenuItem>Item 1</MenuItem>, <MenuItem>Item 2</MenuItem>]}
- *  leftIcon={<IconButton><SvgInfo /></IconButton>}
- *  rightIcon={<IconButton><SvgStar /></IconButton>}
- *  isSelected={true}
- *  isNew={false}
- * />
- */
 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: TileWrapper,
+  ThumbnailArea: TileThumbnailArea,
+  ThumbnailPicture: TileThumbnailPicture,
+  QuickAction: TileQuickAction,
+  TypeIndicator: TileTypeIndicator,
+  BadgeContainer: TileBadgeContainer,
+  IconButton: TileIconButton,
+  Name: TileName,
+  NameIcon: TileNameIcon,
+  NameLabel: TileNameLabel,
+  Action: TileAction,
+  ContentArea: TileContentArea,
+  Description: TileDescription,
+  Metadata: TileMetadata,
+  MoreOptions: TileMoreOptions,
+  Buttons: TileButtons,
 });