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

package/cjs/core/Tile/Tile.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tile = exports.TileAction = void 0;
+exports.Tile = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -38,51 +38,21 @@ const index_js_2 = require("../DropdownMenu/index.js");
 const index_js_3 = require("../Buttons/index.js");
 const index_js_4 = require("../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/>}
- * />
- */
-exports.TileAction = React.forwardRef((props, forwardedRef) => {
-    const tileContext = (0, index_js_1.useSafeContext)(TileContext);
-    React.useEffect(() => {
-        if (!(0, index_js_1.supportsHas)()) {
-            tileContext.setActionable(true);
-        }
-    }, [tileContext]);
-    return React.createElement(index_js_1.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}
- * />
- */
-exports.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(index_js_1.Box, { className: 'iui-tile-name' },
-        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(index_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile', {
                 'iui-folder': variant === 'folder',
                 'iui-new': isNew,
@@ -90,65 +60,269 @@ exports.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(index_js_1.Box, { className: 'iui-tile-thumbnail' },
-                typeof thumbnail === 'string' ? (React.createElement(index_js_1.Box, { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                    className: 'iui-tile-thumbnail-picture',
-                })) : (React.createElement(index_js_1.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(index_js_1.Box, { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-            React.createElement(index_js_1.Box, { className: 'iui-tile-content' },
-                variant === 'folder' ? tileName : null,
-                description != undefined && (React.createElement(index_js_1.Box, { className: 'iui-tile-description' }, description)),
-                metadata != undefined && (React.createElement(index_js_1.Box, { className: 'iui-tile-metadata' }, metadata)),
-                moreOptions && (React.createElement(index_js_2.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
-                        onClick: (value) => {
-                            close();
-                            option.props.onClick?.(value);
-                        },
-                    })) },
-                    React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {
-                            'iui-visible': isMenuVisible,
-                        }) },
-                        React.createElement(index_js_3.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                            React.createElement(index_js_1.SvgMore, null))))),
-                children),
-            buttons && React.createElement(index_js_1.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: exports.TileAction,
+            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest })));
+});
+TileComponent.displayName = 'Tile';
+// ----------------------------------------------------------------------------
+// Tile.Action component
+const TileAction = React.forwardRef((props, forwardedRef) => {
+    const { onClick, children, href, ...rest } = props;
+    const { setActionable, isDisabled } = (0, index_js_1.useSafeContext)(TileContext);
+    React.useEffect(() => {
+        if (!(0, index_js_1.supportsHas)()) {
+            setActionable(true);
+        }
+    }, [setActionable]);
+    return (React.createElement(index_js_1.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 = (0, index_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-thumbnail-picture', className), style: {
+                backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+            }, ref: forwardedRef, ...rest }));
+    }
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-thumbnail-icon', className), ref: forwardedRef, ...rest }, children));
+});
+TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
+// ----------------------------------------------------------------------------
+// Tile.QuickAction component
+const TileQuickAction = (0, index_js_1.polymorphic)('iui-tile-thumbnail-quick-action');
+TileQuickAction.displayName = 'Tile.QuickAction';
+// ----------------------------------------------------------------------------
+// Tile.TypeIndicator component
+const TileTypeIndicator = (0, index_js_1.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(index_js_3.IconButton, { className: className, styleType: 'borderless', size: 'small', ref: forwardedRef, ...rest }, children));
+});
+TileIconButton.displayName = 'Tile.IconButton';
+// ----------------------------------------------------------------------------
+// Tile.BadgeContainer component
+const TileBadgeContainer = (0, index_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-name', className), ref: forwardedRef, ...rest }, children ?? name));
 });
-const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
+TileBadgeContainer.displayName = 'Tile.Name';
+// ----------------------------------------------------------------------------
+// Tile.NameIcon component
+const TileNameIcon = React.forwardRef((props, forwardedRef) => {
+    const { children, className, ...rest } = props;
+    const { status, isLoading, isSelected, isNew } = (0, index_js_1.useSafeContext)(TileContext);
     const StatusIcon = !!status && index_js_1.StatusIconMap[status];
+    let icon;
+    if (StatusIcon) {
+        icon = React.createElement(StatusIcon, { "aria-hidden": true });
+    }
     if (isLoading) {
-        return (React.createElement(index_js_4.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
+        icon = React.createElement(index_js_4.ProgressRadial, { size: 'x-small', "aria-hidden": true, indeterminate: true });
     }
     if (isSelected) {
-        return React.createElement(index_js_1.SvgCheckmark, { className: 'iui-tile-status-icon', "aria-hidden": true });
+        icon = React.createElement(index_js_1.SvgCheckmark, { "aria-hidden": true });
     }
     if (isNew) {
-        return React.createElement(index_js_1.SvgNew, { className: 'iui-tile-status-icon', "aria-hidden": true });
-    }
-    if (StatusIcon) {
-        return React.createElement(StatusIcon, { className: 'iui-tile-status-icon' });
+        icon = React.createElement(index_js_1.SvgNew, { "aria-hidden": true });
     }
-    return null;
-};
+    return children || icon ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-status-icon', className), ref: forwardedRef, ...rest }, children ?? icon)) : null;
+});
+TileNameIcon.displayName = 'Tile.NameIcon';
+// ----------------------------------------------------------------------------
+// Tile.NameLabel component
+const TileNameLabel = index_js_1.polymorphic.span('iui-tile-name-label');
+TileNameLabel.displayName = 'Tile.NameLabel';
+// ----------------------------------------------------------------------------
+// Tile.ContentArea component
+const TileContentArea = (0, index_js_1.polymorphic)('iui-tile-content');
+TileContentArea.displayName = 'Tile.ContentArea';
+// ----------------------------------------------------------------------------
+// Tile.Description component
+const TileDescription = (0, index_js_1.polymorphic)('iui-tile-description');
+TileDescription.displayName = 'Tile.Description';
+// ----------------------------------------------------------------------------
+// Tile.Metadata component
+const TileMetadata = (0, index_js_1.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(index_js_2.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {
+                'iui-visible': isMenuVisible,
+            }, className), ref: forwardedRef, ...rest },
+            React.createElement(index_js_3.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options', ...buttonProps },
+                React.createElement(index_js_1.SvgMore, null)))));
+});
+TileMoreOptions.displayName = 'Tile.MoreOptions';
+// ----------------------------------------------------------------------------
+// Tile.Buttons component
+const TileButtons = (0, index_js_1.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>
+ */
+exports.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,
+});
 exports.default = exports.Tile;

package/cjs/core/Toast/Toast.d.ts

@@ -22,10 +22,9 @@ export declare type ToastProps = {
      */
     type?: 'persisting' | 'temporary';
     /**
-     * Boolean indicating when the toast is visible.
-     * When false, will close the Toast and call onRemove when finished closing.
+     * Controlled boolean prop indicating whether the toast is visible.
      */
-    isVisible: boolean;
+    isVisible?: boolean;
     /**
      * Duration of the toast in millisecond.
      * @default 7000
@@ -37,12 +36,12 @@ export declare type ToastProps = {
      */
     hasCloseButton?: boolean;
     /**
-     * A Callback that can be used to add additional information to a Toast
+     * Props for a button/link that can be used to perform an action
+     * (e.g. to show additional information).
      */
     link?: {
-        onClick: () => void;
         title: string;
-    };
+    } & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>;
     /**
      * Function called when the toast is all the way closed.
      */
@@ -51,10 +50,6 @@ export declare type ToastProps = {
      * Element to which the toast will animate out to.
      */
     animateOutTo?: HTMLElement | null;
-    /**
-     * Parent toaster placement position for smoother animation.
-     */
-    placementPosition?: 'top' | 'bottom';
 };
 /**
  * Generic Toast Component

package/cjs/core/Toast/Toast.js

@@ -36,6 +36,7 @@ const react_transition_group_1 = require("react-transition-group");
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Buttons/index.js");
+const Toaster_js_1 = require("./Toaster.js");
 const isMotionOk = () => (0, index_js_1.getWindow)()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
@@ -46,9 +47,12 @@ const isMotionOk = () => (0, index_js_1.getWindow)()?.matchMedia?.('(prefers-red
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 const Toast = (props) => {
-    const { content, category, type = 'temporary', isVisible, link, duration = 7000, hasCloseButton, onRemove, animateOutTo, placementPosition = 'top', } = props;
+    const { content, category, type = 'temporary', isVisible: isVisibleProp, link, duration = 7000, hasCloseButton, onRemove, animateOutTo, } = props;
     const closeTimeout = React.useRef(0);
-    const [visible, setVisible] = React.useState(isVisible);
+    const { placement } = (0, index_js_1.useSafeContext)(Toaster_js_1.ToasterStateContext).settings;
+    const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    const [visible, setVisible] = React.useState(isVisibleProp ?? true);
+    const isVisible = isVisibleProp ?? visible;
     const [height, setHeight] = React.useState(0);
     const thisElement = React.useRef(null);
     const [margin, setMargin] = React.useState(0);
@@ -67,9 +71,6 @@ const Toast = (props) => {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [duration, type]);
-    React.useEffect(() => {
-        setVisible(isVisible);
-    }, [isVisible]);
     React.useEffect(() => {
         // if we don't have animateOutTo point and not isVisible, set negative margin to move other toasts up.
         // Close all and close on toasts with no anchor.
@@ -113,7 +114,7 @@ const Toast = (props) => {
         }
         return { translateX, translateY };
     };
-    return (React.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: (node) => {
+    return (React.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: isVisible, appear: true, unmountOnExit: true, onEnter: (node) => {
             if (isMotionOk()) {
                 node.style.transform = 'translateY(15%)';
                 node.style.transitionTimingFunction = 'ease';
@@ -132,12 +133,13 @@ const Toast = (props) => {
                 node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
                 node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
             }
-        }, onExited: onRemove }, React.createElement(index_js_1.Box, { ref: thisElement, className: 'iui-toast-all', style: {
-            height,
-            ...marginStyle(),
-        } },
-        React.createElement("div", { ref: onRef },
-            React.createElement(exports.ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
+        }, onExited: onRemove },
+        React.createElement(index_js_1.Box, { ref: thisElement, className: 'iui-toast-all', style: {
+                height,
+                ...marginStyle(),
+            } },
+            React.createElement("div", { ref: onRef },
+                React.createElement(exports.ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
 };
 exports.Toast = Toast;
 /**
@@ -150,7 +152,7 @@ const ToastPresentation = (props) => {
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast iui-${category}`, className), ...rest },
         React.createElement(index_js_1.Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
         React.createElement(index_js_1.Box, { className: 'iui-message' }, content),
-        link && (React.createElement(index_js_1.Box, { as: 'a', className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
+        link && (React.createElement(index_js_1.Box, { as: 'button', className: 'iui-toast-anchor', ...link, title: undefined }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(index_js_2.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(index_js_1.SvgCloseSmall, null)))));
 };

package/cjs/core/Toast/Toaster.d.ts

@@ -4,45 +4,43 @@ export declare type ToasterSettings = {
     /**
      * Order of toasts.
      * When set to 'descending', most recent toasts are on top. When set to 'ascending', most recent toasts are on bottom.
-  
-     * When `placement` is set to a top value, order defaults to 'descending', otherwise 'ascending'.
+     *
+     * When set to `auto`, it will behave like 'descending' when `placement` is set to a top value, otherwise 'ascending'.
+     *
+     * @default 'auto'
      */
-    order?: 'descending' | 'ascending';
+    order: 'descending' | 'ascending' | 'auto';
     /**
      * Placement of toasts.
      * Changes placement of toasts. Start indicates left side of viewport. End - right side of viewport.
      * @default 'top'
      */
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 };
 export declare type ToastOptions = Omit<ToastProps, 'category' | 'isVisible' | 'id' | 'content'>;
-export default class Toaster {
-    private toasts;
-    private lastId;
-    private settings;
-    private toastsRef;
-    private isInitialized;
-    private asyncInit;
-    /**
-     * Set global Toaster settings for toasts order and placement.
-     * Settings will be applied to new toasts on the page.
-     */
-    setSettings(newSettings: ToasterSettings): void;
-    positive(content: React.ReactNode, options?: ToastOptions): {
+export declare const useToaster: () => {
+    positive: (content: React.ReactNode, options?: ToastOptions) => {
         close: () => void;
     };
-    informational(content: React.ReactNode, options?: ToastOptions): {
+    informational: (content: React.ReactNode, options?: ToastOptions) => {
         close: () => void;
     };
-    negative(content: React.ReactNode, options?: ToastOptions): {
+    negative: (content: React.ReactNode, options?: ToastOptions) => {
         close: () => void;
     };
-    warning(content: React.ReactNode, options?: ToastOptions): {
+    warning: (content: React.ReactNode, options?: ToastOptions) => {
         close: () => void;
     };
-    private createToast;
-    private removeToast;
-    private updateView;
-    private closeToast;
-    closeAll(): void;
-}
+    closeAll: () => void;
+    setSettings: (settings: Partial<ToasterSettings>) => void;
+};
+export declare const Toaster: () => JSX.Element;
+export declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
+declare type ToasterState = {
+    toasts: ToastProps[];
+    settings: ToasterSettings;
+};
+export {};