@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.4

package/esm/core/Tile/Tile.d.ts

@@ -1,75 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-/**
- * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
- * Renders `a` element by default.
- * @example
- * <Tile
- *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
- * />
- */
-export declare const TileAction: PolymorphicForwardRefComponent<"a", {}>;
-declare type TileProps = {
-    /**
-     * Name or title of the tile.
-     */
-    name: React.ReactNode;
-    /**
-     * Description text of the tile.
-     * Gets truncated if it can't fit in the tile.
-     */
-    description?: React.ReactNode;
-    /**
-     * Metadata section located below description.
-     * @example
-     * <Tile
-     *  // ...
-     *  metadata='basic metadata'
-     *  // or
-     *  metadata={<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
-     *  // or
-     *  metadata={<>
-     *    <SvgTag2 />
-     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
-     *  </>}
-     * />
-     */
-    metadata?: React.ReactNode;
-    /**
-     * Thumbnail image url, a custom component or an svg.
-     * @example
-     * <Tile
-     *  // ...
-     *  thumbnail='/url/to/image.jpg'
-     *  // or
-     *  thumbnail={<Avatar image={<img src='icon.png' />} />}
-     *  // or
-     *  thumbnail={<SvgImodelHollow />}
-     * />
-     */
-    thumbnail?: string | React.ReactNode;
-    /**
-     * `Badge` shown on the bottom right of thumbnail.
-     */
-    badge?: React.ReactNode;
-    /**
-     * Icon shown on top left of the tile. Also known as "type indicator".
-     * Recommended to use an invisible `IconButton`.
-     */
-    leftIcon?: React.ReactNode;
-    /**
-     * Icon shown on top right of the tile. Also known as "quick action".
-     * Recommended to use an invisible `IconButton`.
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * Upto two buttons shown at the bottom of the tile.
-     */
-    buttons?: [React.ReactNode?, React.ReactNode?];
-    /**
-     * Dropdown menu containing `MenuItem`s.
-     */
-    moreOptions?: React.ReactNode[];
+import { IconButton } from '../Buttons/index.js';
+declare type TileOwnProps = {
     /**
      * Status of the tile.
      */
@@ -88,15 +20,6 @@ declare type TileProps = {
      * @default 'default'
      */
     variant?: 'default' | 'folder';
-    /**
-     * Any custom nodes that will be appended to the tile's main content.
-     */
-    children?: React.ReactNode;
-    /**
-     * Whether the tile is expected to be interactable (i.e. `onClick`).
-     * It becomes focusable and gets on hover styling.
-     */
-    isActionable?: boolean;
     /**
      * Display a loading state.
      * @default false
@@ -111,34 +34,169 @@ declare type TileProps = {
      * @default false
      */
     isDisabled?: boolean;
-    onClick?: React.MouseEventHandler<HTMLElement>;
+};
+declare type TileThumbnailPictureOwnProps = {
+    url?: string;
+} | {
+    url?: never;
+    children?: React.ReactNode;
+};
+declare type TileNameOwnProps = {
+    name?: React.ReactNode;
+};
+declare type TileMoreOptionsOwnProps = {
+    buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
+    children?: React.ReactElement[];
 };
 /**
- * Tile component that displays content and actions in a card-like format.
+ * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
  * @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}
- * />
+ * <Tile>
+ *    <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>
  */
-export declare const Tile: PolymorphicForwardRefComponent<"div", TileProps> & {
+export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> & {
+    /**
+     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
+     * @example
+     * <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture/>
+     *    // or
+     *    <Tile.ThumbnailAvatar/>
+     *    <Tile.QuickAction/>
+     *    <Tile.TypeIndicator/>
+     *    <Tile.BadgeContainer/>
+     * </Tile.ThumbnailArea>
+     */
+    ThumbnailArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    /**
+     * Thumbnail image url, a custom component or an svg for thumbnail avatar.
+     * @example
+     * <Tile>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
+     *  </Tile.ThumbnailArea>
+     * </Tile>
+     * or
+     * <Tile>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture>
+     *      {<Avatar image={<img src='icon.png' />} />}
+     *      // or
+     *      {<SvgImodelHollow />}
+     *    </Tile.ThumbnailPicture>
+     *   </Tile.ThumbnailArea>
+     * /Tile>
+     */
+    ThumbnailPicture: PolymorphicForwardRefComponent<"div", TileThumbnailPictureOwnProps>;
+    /**
+     * `QuickAction` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    QuickAction: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
-     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
+     * `TypeIndicator` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    TypeIndicator: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    /**
+     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
+     */
+    BadgeContainer: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    /**
+     * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
+     */
+    IconButton: PolymorphicForwardRefComponent<"button", Pick<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+        isActive?: boolean | undefined;
+        label?: React.ReactNode;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        as?: "button" | undefined;
+    }, "label" | "as" | "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement> | "size" | "styleType" | "isActive">>;
+    /**
+     * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
+     */
+    Name: PolymorphicForwardRefComponent<"div", TileNameOwnProps>;
+    /**
+     * `NameIcon` next to name of the tile. Goes under <Tile.Name>
+     * @example
+     * <Tile>
+     *  <Tile.Name>
+     *    <Tile.NameIcon/>
+     *  </Tile.Name>
+     * <Tile/>
+     */
+    NameIcon: PolymorphicForwardRefComponent<"div", {}>;
+    NameLabel: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
      * Renders `a` element by default.
      * @example
-     * <Tile
-     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
-     * />
+     * <Tile.Name>
+     *  <Tile.NameLabel>
+     *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
+     *  <Tile.NameLabel/>
+     * </Tile.Name>
      */
     Action: PolymorphicForwardRefComponent<"a", {}>;
+    /**
+     * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
+     * @example
+     * <Tile>
+     *  <Tile.ContentArea>
+     *    <Tile.Description/>
+     *    <Tile.Metadata/>
+     *    <Tile.MoreOptions/>
+     *  </Tile.ContentArea>
+     * </Tile>
+     */
+    ContentArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    /**
+     * Description text of the tile.
+     * Gets truncated if it can't fit in the tile.
+     */
+    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    /**
+     * 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: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    /**
+     * Dropdown menu containing `MenuItem`s.
+     */
+    MoreOptions: PolymorphicForwardRefComponent<"div", TileMoreOptionsOwnProps>;
+    /**
+     * Upto two buttons shown at the bottom of the tile.
+     */
+    Buttons: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
 };
 export default Tile;

package/esm/core/Tile/Tile.js

@@ -4,56 +4,26 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, Box, } from '../utils/index.js';
+import { StatusIconMap, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, polymorphic, Box, } from '../utils/index.js';
 import { DropdownMenu } from '../DropdownMenu/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 const TileContext = React.createContext(undefined);
-/**
- * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
- * Renders `a` element by default.
- * @example
- * <Tile
- *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
- * />
- */
-export const TileAction = React.forwardRef((props, forwardedRef) => {
-    const tileContext = useSafeContext(TileContext);
-    React.useEffect(() => {
-        if (!supportsHas()) {
-            tileContext.setActionable(true);
-        }
-    }, [tileContext]);
-    return React.createElement(LinkAction, { ref: forwardedRef, ...props });
-});
-/**
- * Tile component that displays content and actions in a card-like format.
- * @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(React.forwardRef((props, forwardedRef) => {
-    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
-    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
-    const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
-    const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
-    const [localActionable, setLocalActionable] = React.useState(isActionableProp);
-    const isActionable = isActionableProp ?? localActionable;
-    const tileName = (React.createElement(Box, { className: 'iui-tile-name' },
-        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-        React.createElement(Box, { as: 'span', className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
-    return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+TileContext.displayName = 'TileContext';
+const TileComponent = 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,
@@ -61,65 +31,269 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
                 'iui-actionable': isActionable,
                 [`iui-${status}`]: !!status,
                 'iui-loading': isLoading,
-            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest },
-            variant !== 'folder' ? tileName : null,
-            thumbnail && (React.createElement(Box, { className: 'iui-tile-thumbnail' },
-                typeof thumbnail === 'string' ? (React.createElement(Box, { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                    className: 'iui-tile-thumbnail-picture',
-                })) : (React.createElement(Box, { as: 'span', className: 'iui-thumbnail-icon' }, thumbnail)),
-                leftIcon &&
-                    React.cloneElement(leftIcon, {
-                        className: 'iui-tile-thumbnail-type-indicator',
-                        'data-iui-size': 'small',
-                    }),
-                rightIcon &&
-                    React.cloneElement(rightIcon, {
-                        className: 'iui-tile-thumbnail-quick-action',
-                        'data-iui-size': 'small',
-                    }),
-                badge && (React.createElement(Box, { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-            React.createElement(Box, { className: 'iui-tile-content' },
-                variant === 'folder' ? tileName : null,
-                description != undefined && (React.createElement(Box, { className: 'iui-tile-description' }, description)),
-                metadata != undefined && (React.createElement(Box, { className: 'iui-tile-metadata' }, metadata)),
-                moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
-                        onClick: (value) => {
-                            close();
-                            option.props.onClick?.(value);
-                        },
-                    })) },
-                    React.createElement(Box, { className: cx('iui-tile-more-options', {
-                            'iui-visible': isMenuVisible,
-                        }) },
-                        React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                            React.createElement(SvgMore, null))))),
-                children),
-            buttons && React.createElement(Box, { className: 'iui-tile-buttons' }, buttons))));
-}), {
-    /**
-     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
-     * Renders `a` element by default.
-     * @example
-     * <Tile
-     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
-     * />
-     */
-    Action: TileAction,
+            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest })));
 });
-const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
+TileComponent.displayName = 'Tile';
+// ----------------------------------------------------------------------------
+// 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));
+});
+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));
+});
+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));
+});
+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));
+});
+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) {
-        return (React.createElement(ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
+        icon = React.createElement(ProgressRadial, { size: 'x-small', "aria-hidden": true, indeterminate: true });
     }
     if (isSelected) {
-        return React.createElement(SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        icon = React.createElement(SvgCheckmark, { "aria-hidden": true });
     }
     if (isNew) {
-        return React.createElement(SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
-    }
-    if (StatusIcon) {
-        return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
+        icon = React.createElement(SvgNew, { "aria-hidden": true });
     }
-    return null;
-};
+    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(DropdownMenu, { onShow: React.useCallback(() => setIsMenuVisible(true), []), onHide: React.useCallback(() => setIsMenuVisible(false), []), menuItems: (close) => children?.map((option) => React.cloneElement(option, {
+            onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+            },
+        })) },
+        React.createElement(Box, { className: cx('iui-tile-more-options', {
+                'iui-visible': isMenuVisible,
+            }, className), ref: forwardedRef, ...rest },
+            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';
+/**
+ * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
+ * @example
+ * <Tile>
+ *    <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>
+ */
+export const Tile = Object.assign(TileComponent, {
+    /**
+     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
+     * @example
+     * <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture/>
+     *    // or
+     *    <Tile.ThumbnailAvatar/>
+     *    <Tile.QuickAction/>
+     *    <Tile.TypeIndicator/>
+     *    <Tile.BadgeContainer/>
+     * </Tile.ThumbnailArea>
+     */
+    ThumbnailArea: TileThumbnailArea,
+    /**
+     * Thumbnail image url, a custom component or an svg for thumbnail avatar.
+     * @example
+     * <Tile>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
+     *  </Tile.ThumbnailArea>
+     * </Tile>
+     * or
+     * <Tile>
+     *  // ...
+     *  <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>
+     *  <Tile.Name>
+     *    <Tile.NameIcon/>
+     *  </Tile.Name>
+     * <Tile/>
+     */
+    NameIcon: TileNameIcon,
+    /*
+     * `NameLabel` of the tile
+     * @example
+     * <Tile>
+     *  <Tile.Name>
+     *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
+     *  </Tile.Name/>
+     * <Tile/>
+     */
+    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>
+     *  <Tile.ContentArea>
+     *    <Tile.Description/>
+     *    <Tile.Metadata/>
+     *    <Tile.MoreOptions/>
+     *  </Tile.ContentArea>
+     * </Tile>
+     */
+    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;