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

package/esm/core/Tabs/Tabs.js

@@ -86,22 +86,20 @@ export const Tabs = (props) => {
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
             const tab = tablistRef.current.querySelectorAll(`.${styles['iui-tab']}`)[focusedIndex];
-            tab === null || tab === void 0 ? void 0 : tab.focus();
+            tab?.focus();
         }
     }, [focusedIndex]);
     const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
     useIsomorphicLayoutEffect(() => {
-        var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles['iui-tab-description']}`)));
+            !!tablistRef.current?.querySelector(`.${styles['iui-tab-description']}`));
     }, [type]);
     const enableHorizontalScroll = React.useCallback((e) => {
-        var _a;
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
             return;
         }
-        let scrollLeft = (_a = ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        let scrollLeft = ownerDoc?.scrollLeft ?? 0;
         if (e.deltaY > 0 || e.deltaX > 0) {
             scrollLeft += 25;
         }
@@ -116,12 +114,12 @@ export const Tabs = (props) => {
         if (ownerDoc === null) {
             return;
         }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) || orientation === 'vertical') {
+        if (!overflowOptions?.useOverflow || orientation === 'vertical') {
             ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
             return;
         }
         ownerDoc.addEventListener('wheel', enableHorizontalScroll);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, orientation, enableHorizontalScroll]);
+    }, [overflowOptions?.useOverflow, orientation, enableHorizontalScroll]);
     const isTabHidden = (activeTab, isVertical) => {
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
@@ -201,7 +199,7 @@ export const Tabs = (props) => {
         setTimeout(() => {
             const ownerDoc = tablistRef.current;
             if (ownerDoc !== null &&
-                (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
+                overflowOptions?.useOverflow &&
                 currentActiveIndex !== undefined) {
                 const activeTab = ownerDoc.querySelectorAll(`.${styles['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
@@ -212,7 +210,7 @@ export const Tabs = (props) => {
             }
         }, 50);
     }, [
-        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
+        overflowOptions?.useOverflow,
         currentActiveIndex,
         focusedIndex,
         orientation,
@@ -248,19 +246,19 @@ export const Tabs = (props) => {
     }, [orientation, setScrollingPlacement]);
     // apply correct mask when tabs list is resized
     const [resizeRef] = useResizeObserver(determineScrollingPlacement);
-    resizeRef(tablistRef === null || tablistRef === void 0 ? void 0 : tablistRef.current);
+    resizeRef(tablistRef?.current);
     // check if overflow tabs are scrolled to far edges
     React.useEffect(() => {
         const ownerDoc = tablistRef.current;
         if (ownerDoc === null) {
             return;
         }
-        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow)) {
+        if (!overflowOptions?.useOverflow) {
             ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
             return;
         }
         ownerDoc.addEventListener('scroll', determineScrollingPlacement);
-    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, determineScrollingPlacement]);
+    }, [overflowOptions?.useOverflow, determineScrollingPlacement]);
     const onTabClick = React.useCallback((index) => {
         if (onTabSelected) {
             onTabSelected(index);
@@ -276,7 +274,7 @@ export const Tabs = (props) => {
             const tab = labels[index];
             return React.isValidElement(tab) && tab.props.disabled;
         };
-        let newIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : currentActiveIndex;
+        let newIndex = focusedIndex ?? currentActiveIndex;
         /** focus next tab if delta is +1, previous tab if -1 */
         const focusTab = (delta = +1) => {
             do {
@@ -339,9 +337,8 @@ export const Tabs = (props) => {
             'aria-selected': index === currentActiveIndex,
             tabIndex: index === currentActiveIndex ? 0 : -1,
             onClick: (args) => {
-                var _a, _b;
                 onClick();
-                (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+                label.props.onClick?.(args);
             },
         }))));
     }, [currentActiveIndex, onTabClick]);
@@ -351,7 +348,7 @@ export const Tabs = (props) => {
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
-            }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
+            }, tabsClassName), "data-iui-overflow": overflowOptions?.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
         actions && (React.createElement(Box, { className: 'iui-tabs-actions-wrapper' },
             React.createElement(Box, { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement(Box, { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));

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

@@ -3,5 +3,5 @@ import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
-    rootRef: React.RefObject<HTMLElement>;
+    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
 } | undefined>;

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

@@ -37,10 +37,9 @@ declare type RootProps = {
         applyBackground?: boolean;
     };
     /**
-     * Whether theme was set to `'inherit'`.
-     * This will be used to determine if applyBackground will default to false.
+     * This will be used to determine if background will be applied.
      */
-    isInheritingTheme?: boolean;
+    shouldApplyBackground?: boolean;
 };
 declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, useIsThemeAlreadySet, Box, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box } 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
@@ -33,28 +34,28 @@ import { ThemeContext } from './ThemeContext.js';
  * </ThemeProvider>
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a;
     const { theme: themeProp, children, themeOptions, ...rest } = props;
-    const rootRef = React.useRef(null);
-    const mergedRefs = useMergedRefs(rootRef, ref);
+    const portalContainerRef = React.useRef(null);
     const parentContext = React.useContext(ThemeContext);
-    const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
-    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
-    // now that we know there are children, we can render the root and provide the context value
-    return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
-        React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
+    const theme = themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
+    const shouldApplyBackground = themeOptions?.applyBackground ??
+        (themeProp === 'inherit' ? false : !parentContext);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainerRef }), [theme, themeOptions]);
+    return (React.createElement(ThemeContext.Provider, { value: contextValue },
+        React.createElement(Root, { theme: theme, shouldApplyBackground: shouldApplyBackground, themeOptions: themeOptions, ref: ref, ...rest },
+            React.createElement(ToastProvider, null,
+                children,
+                React.createElement("div", { ref: portalContainerRef },
+                    React.createElement(Toaster, null))))));
 });
 export default ThemeProvider;
 const Root = React.forwardRef((props, forwardedRef) => {
-    var _a, _b, _c;
-    const { theme, children, themeOptions, className, isInheritingTheme, ...rest } = props;
+    const { theme, children, themeOptions, shouldApplyBackground, 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);
-    const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
-    const isThemeAlreadySet = useIsThemeAlreadySet((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : (isInheritingTheme ? false : !isThemeAlreadySet.current);
+    const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
     return (React.createElement(Box, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });

package/esm/core/Tile/Tile.js

@@ -49,7 +49,7 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
     const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
     const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
     const [localActionable, setLocalActionable] = React.useState(isActionableProp);
-    const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
+    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))));
@@ -84,9 +84,8 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
                 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) => {
-                            var _a, _b;
                             close();
-                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                            option.props.onClick?.(value);
                         },
                     })) },
                     React.createElement(Box, { className: cx('iui-tile-more-options', {

package/esm/core/TimePicker/TimePicker.js

@@ -79,17 +79,17 @@ const defaultCombinedRenderer = (date, precision) => {
 export const TimePicker = React.forwardRef((props, forwardedRef) => {
     const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, useCombinedRenderer = false, combinedRenderer = defaultCombinedRenderer, className, ...rest } = props;
     const [selectedTime, setSelectedTime] = React.useState(date);
-    const [focusedTime, setFocusedTime] = React.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
-    const [meridiem, setMeridiem] = React.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined);
+    const [focusedTime, setFocusedTime] = React.useState(selectedTime ?? new Date());
+    const [meridiem, setMeridiem] = React.useState(use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : undefined);
     React.useEffect(() => {
-        setFocusedTime(date !== null && date !== void 0 ? date : new Date());
+        setFocusedTime(date ?? new Date());
         setSelectedTime(date);
     }, [date]);
     const onHourClick = (date) => {
         const adjustedHour = use12Hours
             ? formatHourFrom12(date.getHours(), meridiem)
             : date.getHours();
-        const adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+        const adjustedSelectedTime = setHours(adjustedHour, selectedTime ?? new Date());
         updateCurrentTime(adjustedSelectedTime);
     };
     const onTimeClick = (date) => {
@@ -100,7 +100,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         updateCurrentTime(adjustedSelectedTime);
     };
     const onMeridiemClick = (value) => {
-        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        let adjustedSelectedTime = selectedTime ?? new Date();
         const currentHours = adjustedSelectedTime.getHours();
         setMeridiem(value);
         if (value === 'AM' && currentHours > 11) {
@@ -122,7 +122,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         }
         setFocusedTime(adjustedTime);
         setSelectedTime(adjustedTime);
-        onChange === null || onChange === void 0 ? void 0 : onChange(adjustedTime);
+        onChange?.(adjustedTime);
     };
     const onHourFocus = (date) => {
         const adjustedHour = use12Hours
@@ -137,7 +137,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         setFocusedTime(setHours(adjustedHour, date));
     };
     const onMeridiemFocus = (value) => {
-        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        let adjustedSelectedTime = selectedTime ?? new Date();
         const currentHours = adjustedSelectedTime.getHours();
         if (value === 'AM' && currentHours > 11) {
             setMeridiem(value);
@@ -159,7 +159,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         return data;
     };
     const time = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         const data = [];
         const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
             .filter((i) => i % hourStep === 0)
@@ -186,15 +186,15 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         return data;
     }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
     const hours = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
     }, [hourStep, selectedTime, use12Hours]);
     const minutes = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds()), minuteStep);
     }, [minuteStep, selectedTime]);
     const seconds = React.useMemo(() => {
-        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const time = selectedTime ?? new Date();
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
     return (React.createElement(Box, { className: cx('iui-time-picker', className), ref: forwardedRef, ...rest },
@@ -215,7 +215,7 @@ const TimePickerColumn = (props) => {
         }
     });
     const scrollIntoView = (ref, isSame) => {
-        isSame && (ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
+        isSame && ref?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     };
     const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
         if (event.altKey) {
@@ -255,7 +255,7 @@ const TimePickerColumn = (props) => {
                     'iui-selected': isSameSelected(value),
                 }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: (ref) => {
                     scrollIntoView(ref, isSameFocus);
-                    needFocus.current && isSameFocus && (ref === null || ref === void 0 ? void 0 : ref.focus());
+                    needFocus.current && isSameFocus && ref?.focus();
                 }, onClick: () => {
                     onSelectChange(value);
                 } }, valueRenderer(value, precision)));

package/esm/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/esm/core/Toast/Toast.js

@@ -5,9 +5,10 @@
 import * as React from 'react';
 import { Transition } from 'react-transition-group';
 import cx from 'classnames';
-import { getWindow, StatusIconMap, SvgCloseSmall, Box, } from '../utils/index.js';
+import { getWindow, StatusIconMap, SvgCloseSmall, Box, useSafeContext, } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
-const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
+import { ToasterStateContext } from './Toaster.js';
+const isMotionOk = () => getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
  * @example
@@ -17,9 +18,12 @@ const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow())
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 export 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 } = useSafeContext(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);
@@ -38,9 +42,6 @@ export 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.
@@ -64,8 +65,7 @@ export const Toast = (props) => {
         }, timeout);
     };
     const clearCloseTimeout = () => {
-        var _a;
-        (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
+        getWindow()?.clearTimeout(closeTimeout.current);
     };
     const onRef = (ref) => {
         if (ref) {
@@ -85,7 +85,7 @@ export const Toast = (props) => {
         }
         return { translateX, translateY };
     };
-    return (React.createElement(Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: (node) => {
+    return (React.createElement(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';
@@ -104,12 +104,13 @@ export const Toast = (props) => {
                 node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
                 node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
             }
-        }, onExited: onRemove }, React.createElement(Box, { ref: thisElement, className: 'iui-toast-all', style: {
-            height,
-            ...marginStyle(),
-        } },
-        React.createElement("div", { ref: onRef },
-            React.createElement(ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
+        }, onExited: onRemove },
+        React.createElement(Box, { ref: thisElement, className: 'iui-toast-all', style: {
+                height,
+                ...marginStyle(),
+            } },
+            React.createElement("div", { ref: onRef },
+                React.createElement(ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
 };
 /**
  * The presentational part of a toast, without any animation or logic.
@@ -121,7 +122,7 @@ export const ToastPresentation = (props) => {
     return (React.createElement(Box, { className: cx(`iui-toast iui-${category}`, className), ...rest },
         React.createElement(Box, { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
         React.createElement(Box, { className: 'iui-message' }, content),
-        link && (React.createElement(Box, { as: 'a', className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
+        link && (React.createElement(Box, { as: 'button', className: 'iui-toast-anchor', ...link, title: undefined }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgCloseSmall, null)))));
 };

package/esm/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 {};