@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -44,11 +44,31 @@ type RootProps = {
 type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
+    /**
+     * The element used as the portal for floating elements (Tooltip, Toast, DropdownMenu, Dialog, etc).
+     *
+     * Defaults to a `<div>` rendered at the end of the ThemeProvider.
+     *
+     * When passing an element, it is recommended to use state.
+     *
+     * @example
+     * const [myPortal, setMyPortal] = React.useState(null);
+     *
+     * <div ref={setMyPortal} />
+     * <ThemeProvider
+     *   portalContainer={myPortal}
+     * >
+     *   ...
+     * </ThemeProvider>
+     */
+    portalContainer?: HTMLElement;
 };
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * This component provides global state and applies theme to the entire tree
+ * that it is wrapping around.
+ *
+ * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
+ * and falls back to "light" theme if one is not found.
  *
  * If you want to theme the entire app, you should use this component at the root. You can also
  * use this component to apply a different theme to only a part of the tree.

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -3,14 +3,23 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box } from '../utils/index.js';
+import {
+  useMediaQuery,
+  useMergedRefs,
+  Box,
+  useIsomorphicLayoutEffect,
+  useControlledState,
+} from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * This component provides global state and applies theme to the entire tree
+ * that it is wrapping around.
+ *
+ * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
+ * and falls back to "light" theme if one is not found.
  *
  * If you want to theme the entire app, you should use this component at the root. You can also
  * use this component to apply a different theme to only a part of the tree.
@@ -33,18 +42,24 @@ import { ToastProvider, Toaster } from '../Toast/Toaster.js';
  *  <App />
  * </ThemeProvider>
  */
-export const ThemeProvider = React.forwardRef((props, ref) => {
-  const { theme: themeProp, children, themeOptions, ...rest } = props;
-  const portalContainerRef = React.useRef(null);
-  const parentContext = React.useContext(ThemeContext);
-  const theme =
-    themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
-  const shouldApplyBackground =
-    themeOptions?.applyBackground ??
-    (themeProp === 'inherit' ? false : !parentContext);
+export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions,
+    portalContainer: portalContainerProp,
+    ...rest
+  } = props;
+  const [portalContainer, setPortalContainer] = useControlledState(
+    null,
+    portalContainerProp,
+  );
+  const [parentTheme, rootRef] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+  const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
-    () => ({ theme, themeOptions, portalContainerRef }),
-    [theme, themeOptions],
+    () => ({ theme, themeOptions, portalContainer }),
+    [theme, themeOptions, portalContainer],
   );
   return React.createElement(
     ThemeContext.Provider,
@@ -55,23 +70,29 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
         theme: theme,
         shouldApplyBackground: shouldApplyBackground,
         themeOptions: themeOptions,
-        ref: ref,
+        ref: useMergedRefs(forwardedRef, rootRef),
         ...rest,
       },
       React.createElement(
         ToastProvider,
         null,
         children,
-        React.createElement(
-          'div',
-          { ref: portalContainerRef },
-          React.createElement(Toaster, null),
-        ),
+        portalContainerProp
+          ? ReactDOM.createPortal(
+              React.createElement(Toaster, null),
+              portalContainerProp,
+            )
+          : React.createElement(
+              'div',
+              { ref: setPortalContainer },
+              React.createElement(Toaster, null),
+            ),
       ),
     ),
   );
 });
 export default ThemeProvider;
+// ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     theme,
@@ -81,8 +102,6 @@ const Root = React.forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const ref = React.useRef(null);
-  const mergedRefs = useMergedRefs(ref, forwardedRef);
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
@@ -97,9 +116,31 @@ const Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: mergedRefs,
+      ref: forwardedRef,
       ...rest,
     },
     children,
   );
 });
+// ----------------------------------------------------------------------------
+/**
+ * Returns theme from either parent context or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ */
+const useParentTheme = () => {
+  const parentContext = React.useContext(ThemeContext);
+  const rootRef = React.useRef(null);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+  useIsomorphicLayoutEffect(() => {
+    setParentTheme(
+      (old) =>
+        old ||
+        rootRef.current?.parentElement
+          ?.closest('[data-iui-theme]')
+          ?.getAttribute('data-iui-theme'),
+    );
+  }, []);
+  return [parentContext?.theme ?? parentThemeState, rootRef];
+};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
-type TileOwnProps = {
+type TileWrapperOwnProps = {
     /**
      * Status of the tile.
      */
@@ -46,12 +46,119 @@ type TileNameOwnProps = {
 };
 type TileMoreOptionsOwnProps = {
     buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
-    children?: React.ReactElement[];
+    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>
+ * <Tile.Wrapper>
  *    <Tile.ThumbnailArea>
  *      <Tile.ThumbnailPicture/>
  *      <Tile.Badge/>
@@ -61,23 +168,40 @@ type TileMoreOptionsOwnProps = {
  *    <Tile.Name>
  *      <Tile.NameIcon/>
  *      <Tile.NameLabel/>
- *    <Tile.Name/>
+ *    </Tile.Name>
  *    <Tile.ContentArea>
  *      <Tile.Description />
  *      <Tile.Metadata/>
  *      <Tile.MoreOptions/>
  *    </Tile.ContentArea>
  *    <Tile.Buttons/>
- * </Tile>
+ * </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", TileOwnProps> & {
+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/>
-     *    // or
-     *    <Tile.ThumbnailAvatar/>
      *    <Tile.QuickAction/>
      *    <Tile.TypeIndicator/>
      *    <Tile.BadgeContainer/>
@@ -87,14 +211,14 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
     /**
      * Thumbnail image url, a custom component or an svg for thumbnail avatar.
      * @example
-     * <Tile>
+     * <Tile.Wrapper>
      *  // ...
      *  <Tile.ThumbnailArea>
      *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
      *  </Tile.ThumbnailArea>
-     * </Tile>
+     * </Tile.Wrapper>
      * or
-     * <Tile>
+     * <Tile.Wrapper>
      *  // ...
      *  <Tile.ThumbnailArea>
      *    <Tile.ThumbnailPicture>
@@ -125,10 +249,11 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
     /**
@@ -138,11 +263,11 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
     /**
      * `NameIcon` next to name of the tile. Goes under <Tile.Name>
      * @example
-     * <Tile>
+     * <Tile.Wrapper>
      *  <Tile.Name>
      *    <Tile.NameIcon/>
      *  </Tile.Name>
-     * <Tile/>
+     * </Tile.Wrapper>
      */
     NameIcon: PolymorphicForwardRefComponent<"div", {}>;
     NameLabel: PolymorphicForwardRefComponent<"span", {}>;
@@ -160,13 +285,13 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
     /**
      * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
      * @example
-     * <Tile>
+     * <Tile.Wrapper>
      *  <Tile.ContentArea>
      *    <Tile.Description/>
      *    <Tile.Metadata/>
      *    <Tile.MoreOptions/>
      *  </Tile.ContentArea>
-     * </Tile>
+     * </Tile.Wrapper>
      */
     ContentArea: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**

package/esm/core/Tile/Tile.js

@@ -20,7 +20,7 @@ import { IconButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 const TileContext = React.createContext(undefined);
 TileContext.displayName = 'TileContext';
-const TileComponent = React.forwardRef((props, forwardedRef) => {
+const TileWrapper = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     status,
@@ -66,7 +66,7 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-TileComponent.displayName = 'Tile';
+TileWrapper.displayName = 'Tile.Wrapper';
 // ----------------------------------------------------------------------------
 // Tile.Action component
 const TileAction = React.forwardRef((props, forwardedRef) => {
@@ -257,10 +257,84 @@ 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,
+      ),
+    ),
+    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>
+ * <Tile.Wrapper>
  *    <Tile.ThumbnailArea>
  *      <Tile.ThumbnailPicture/>
  *      <Tile.Badge/>
@@ -270,23 +344,40 @@ TileButtons.displayName = 'Tile.Buttons';
  *    <Tile.Name>
  *      <Tile.NameIcon/>
  *      <Tile.NameLabel/>
- *    <Tile.Name/>
+ *    </Tile.Name>
  *    <Tile.ContentArea>
  *      <Tile.Description />
  *      <Tile.Metadata/>
  *      <Tile.MoreOptions/>
  *    </Tile.ContentArea>
  *    <Tile.Buttons/>
- * </Tile>
+ * </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/>
-   *    // or
-   *    <Tile.ThumbnailAvatar/>
    *    <Tile.QuickAction/>
    *    <Tile.TypeIndicator/>
    *    <Tile.BadgeContainer/>
@@ -296,14 +387,14 @@ export const Tile = Object.assign(TileComponent, {
   /**
    * Thumbnail image url, a custom component or an svg for thumbnail avatar.
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  // ...
    *  <Tile.ThumbnailArea>
    *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
    *  </Tile.ThumbnailArea>
-   * </Tile>
+   * </Tile.Wrapper>
    * or
-   * <Tile>
+   * <Tile.Wrapper>
    *  // ...
    *  <Tile.ThumbnailArea>
    *    <Tile.ThumbnailPicture>
@@ -340,21 +431,21 @@ export const Tile = Object.assign(TileComponent, {
   /**
    * `NameIcon` next to name of the tile. Goes under <Tile.Name>
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  <Tile.Name>
    *    <Tile.NameIcon/>
    *  </Tile.Name>
-   * <Tile/>
+   * </Tile.Wrapper>
    */
   NameIcon: TileNameIcon,
   /*
    * `NameLabel` of the tile
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  <Tile.Name>
    *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
    *  </Tile.Name/>
-   * <Tile/>
+   * </Tile.Wrapper>
    */
   NameLabel: TileNameLabel,
   /**
@@ -371,13 +462,13 @@ export const Tile = Object.assign(TileComponent, {
   /**
    * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
    * @example
-   * <Tile>
+   * <Tile.Wrapper>
    *  <Tile.ContentArea>
    *    <Tile.Description/>
    *    <Tile.Metadata/>
    *    <Tile.MoreOptions/>
    *  </Tile.ContentArea>
-   * </Tile>
+   * </Tile.Wrapper>
    */
   ContentArea: TileContentArea,
   /**

package/esm/core/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export type ToastProps = {
     /**
@@ -10,6 +10,13 @@ export type ToastProps = {
      * Content of the Toast message
      */
     content: React.ReactNode;
+    /**
+     * Passes props to toast and content
+     */
+    domProps?: {
+        toastProps?: React.ComponentProps<'div'>;
+        contentProps?: React.ComponentProps<'div'>;
+    };
     /**
      * Category of the Toast, which controls the border color, as well as the category icon.
      */
@@ -60,12 +67,13 @@ export type ToastProps = {
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 export declare const Toast: (props: ToastProps) => React.JSX.Element;
-export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove'> & {
+export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
     onClose?: () => void;
-} & CommonProps;
+    contentProps?: React.ComponentProps<'div'>;
+};
 /**
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
-export declare const ToastPresentation: (props: ToastPresentationProps) => React.JSX.Element;
+export declare const ToastPresentation: PolymorphicForwardRefComponent<"div", ToastPresentationProps>;
 export default Toast;