@itwin/itwinui-react/esm/core/Tile/Tile.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import { IconButton } from '../Buttons/IconButton.js';
type TileWrapperOwnProps = {
    /**
     * Status of the tile.
     */
    status?: 'positive' | 'warning' | 'negative';
    /**
     * Whether the tile is selected or in "active" state.
     * Gets highlighted and shows a checkmark icon near tile name.
     */
    isSelected?: boolean;
    /**
     * Whether the tile is "new". Tile name becomes bold and gets a new status icon.
     */
    isNew?: boolean;
    /**
     * Default tile variant or the folder layout.
     * @default 'default'
     */
    variant?: 'default' | 'folder';
    /**
     * Display a loading state.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Flag whether the tile is disabled.
     *
     * Note: This only affects the tile. You need to manually disable
     * the buttons and other interactive elements inside the tile.
     *
     * @default false
     */
    isDisabled?: boolean;
};
type TileThumbnailPictureOwnProps = {
    url?: string;
} | {
    url?: never;
    children?: React.ReactNode;
};
type TileNameOwnProps = {
    name?: React.ReactNode;
};
type TileMoreOptionsOwnProps = {
    buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
    children?: React.ReactNode[];
};
type TileLegacyProps = {
    /**
     * 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[];
    /**
     * Status of the tile.
     */
    status?: 'positive' | 'warning' | 'negative';
    /**
     * Whether the tile is selected or in "active" state.
     * Gets highlighted and shows a checkmark icon near tile name.
     */
    isSelected?: boolean;
    /**
     * Whether the tile is "new". Tile name becomes bold and gets a new status icon.
     */
    isNew?: boolean;
    /**
     * Default tile variant or the folder layout.
     * @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
     */
    isLoading?: boolean;
    /**
     * Flag whether the tile is disabled.
     *
     * Note: This only affects the tile. You need to manually disable
     * the buttons and other interactive elements inside the tile.
     *
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Adds onClick to the TileAction component.
     */
    onClick?: React.MouseEventHandler<HTMLElement>;
};
/**
 * 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 declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps> & {
    /**
     * Wrapper subcomponent for fully customisable Tile.
     */
    Wrapper: PolymorphicForwardRefComponent<"div", TileWrapperOwnProps>;
    /**
     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
     * @example
     * <Tile.ThumbnailArea>
     *    <Tile.ThumbnailPicture/>
     *    <Tile.QuickAction/>
     *    <Tile.TypeIndicator/>
     *    <Tile.BadgeContainer/>
     * </Tile.ThumbnailArea>
     */
    ThumbnailArea: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * 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: PolymorphicForwardRefComponent<"div", TileThumbnailPictureOwnProps>;
    /**
     * `QuickAction` subcomponent shown on top left of the tile.
     * Recommended to use an invisible `IconButton`.
     */
    QuickAction: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * `TypeIndicator` subcomponent shown on top left of the tile.
     * Recommended to use an invisible `IconButton`.
     */
    TypeIndicator: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
     */
    BadgeContainer: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
     */
    IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
        isActive?: boolean;
        label?: React.ReactNode;
        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
        iconProps?: React.ComponentProps<"span">;
        title?: string;
    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
        as?: "button" | undefined;
    }, "ref">>;
    /**
     * `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.Wrapper>
     *  <Tile.Name>
     *    <Tile.NameIcon/>
     *  </Tile.Name>
     * </Tile.Wrapper>
     */
    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.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.Wrapper>
     *  <Tile.ContentArea>
     *    <Tile.Description/>
     *    <Tile.Metadata/>
     *    <Tile.MoreOptions/>
     *  </Tile.ContentArea>
     * </Tile.Wrapper>
     */
    ContentArea: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * Description text of the tile.
     * Gets truncated if it can't fit in the tile.
     */
    Description: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * 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<"div", {}>;
    /**
     * Dropdown menu containing `MenuItem`s.
     */
    MoreOptions: PolymorphicForwardRefComponent<"div", TileMoreOptionsOwnProps>;
    /**
     * Upto two buttons shown at the bottom of the tile.
     */
    Buttons: PolymorphicForwardRefComponent<"div", {}>;
};
export {};