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

package/cjs/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;