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

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,8 +5,9 @@
 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';
+import { ToasterStateContext } from './Toaster.js';
 const isMotionOk = () => getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
@@ -17,9 +18,12 @@ const isMotionOk = () => getWindow()?.matchMedia?.('(prefers-reduced-motion: no-
  * <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.
@@ -84,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';
@@ -103,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.
@@ -120,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 {};

package/esm/core/Toast/Toaster.js

@@ -3,125 +3,94 @@
  * 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 { getContainer, getDocument } from '../utils/index.js';
-import { ToastWrapper } from './ToastWrapper.js';
-const TOASTS_CONTAINER_ID = 'iui-toasts-container';
-export default class Toaster {
-    constructor() {
-        this.toasts = [];
-        this.lastId = 0;
-        this.settings = {
-            order: 'descending',
+import cx from 'classnames';
+import { Box, useSafeContext } from '../utils/index.js';
+import { Toast } from './Toast.js';
+// ----------------------------------------------------------------------------
+export const useToaster = () => {
+    const dispatch = useSafeContext(ToasterDispatchContext);
+    const showToast = React.useCallback((category) => (content, options) => {
+        const id = nextId();
+        dispatch({
+            type: 'add',
+            toast: { ...options, id, content, category },
+        });
+        return { close: () => dispatch({ type: 'remove', id }) };
+    }, [dispatch]);
+    return {
+        positive: showToast('positive'),
+        informational: showToast('informational'),
+        negative: showToast('negative'),
+        warning: showToast('warning'),
+        closeAll: () => {
+            dispatch({ type: 'close-all' });
+        },
+        setSettings: (settings) => {
+            dispatch({ type: 'settings', settings });
+        },
+    };
+};
+// ----------------------------------------------------------------------------
+export const Toaster = () => {
+    const { toasts, settings } = useSafeContext(ToasterStateContext);
+    return (React.createElement(Box, { className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`) }, toasts.map((toastProps) => {
+        return React.createElement(Toast, { key: toastProps.id, ...toastProps });
+    })));
+};
+// ----------------------------------------------------------------------------
+export const ToastProvider = ({ children }) => {
+    const [toasterState, dispatch] = React.useReducer(toastReducer, {
+        toasts: [],
+        settings: {
+            order: 'auto',
             placement: 'top',
+        },
+    });
+    return (React.createElement(ToasterDispatchContext.Provider, { value: dispatch },
+        React.createElement(ToasterStateContext.Provider, { value: toasterState }, children)));
+};
+const toastReducer = (state, action) => {
+    if (action.type === 'add') {
+        let order = state.settings.order;
+        if (order === 'auto') {
+            order = state.settings.placement.startsWith('top')
+                ? 'descending'
+                : 'ascending';
+        }
+        return {
+            ...state,
+            toasts: [
+                ...(order === 'ascending' ? state.toasts : []),
+                action.toast,
+                ...(order === 'descending' ? state.toasts : []),
+            ],
         };
-        this.toastsRef = React.createRef();
-        this.isInitialized = false;
-        // Create container on demand.
-        // Cannot do it in constructor, because SSG/SSR apps would fail.
-        this.asyncInit = async () => {
-            if (this.isInitialized) {
-                return;
-            }
-            const container = getContainer(TOASTS_CONTAINER_ID) ?? getDocument()?.body;
-            if (!container) {
-                return;
-            }
-            this.isInitialized = true;
-            const toastWrapper = React.createElement(ToastWrapper, { ref: this.toastsRef });
-            const _ReactDOM = ReactDOM; // eslint-disable-line @typescript-eslint/no-explicit-any
-            // v18 mode
-            if (_ReactDOM.createRoot) {
-                const _ReactDOMInternals = _ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-                // suppress warning about importing createRoot from react-dom/client
-                if (_ReactDOMInternals) {
-                    _ReactDOMInternals.usingClientEntryPoint = true;
-                }
-                const root = _ReactDOM.createRoot(container);
-                root.render(toastWrapper);
-                // revert suppression, not to influence users app
-                if (_ReactDOMInternals) {
-                    _ReactDOMInternals.usingClientEntryPoint = false;
-                }
-            }
-            else {
-                // v17 and before
-                ReactDOM.render(toastWrapper, container);
-            }
-        };
-    }
-    /**
-     * Set global Toaster settings for toasts order and placement.
-     * Settings will be applied to new toasts on the page.
-     */
-    setSettings(newSettings) {
-        newSettings.placement ?? (newSettings.placement = this.settings.placement);
-        newSettings.order ?? (newSettings.order = newSettings.placement?.startsWith('bottom')
-            ? 'ascending'
-            : 'descending');
-        this.settings = newSettings;
-        this.asyncInit().then(() => {
-            this.toastsRef.current?.setPlacement(this.settings.placement ?? 'top');
-        });
-    }
-    positive(content, options) {
-        return this.createToast(content, 'positive', options);
-    }
-    informational(content, options) {
-        return this.createToast(content, 'informational', options);
-    }
-    negative(content, options) {
-        return this.createToast(content, 'negative', options);
-    }
-    warning(content, options) {
-        return this.createToast(content, 'warning', options);
     }
-    createToast(content, category, options) {
-        ++this.lastId;
-        const currentId = this.lastId;
-        this.toasts = [
-            ...(this.settings.order === 'ascending' ? this.toasts : []),
-            {
-                ...options,
-                content,
-                category,
-                onRemove: () => {
-                    this.removeToast(currentId);
-                    options?.onRemove?.();
-                },
-                id: currentId,
-                isVisible: true,
-            },
-            ...(this.settings.order === 'descending' ? this.toasts : []),
-        ];
-        this.updateView();
-        return { close: () => this.closeToast(currentId) };
-    }
-    removeToast(id) {
-        this.toasts = this.toasts.filter((toast) => toast.id !== id);
-        this.updateView();
-    }
-    updateView() {
-        this.asyncInit().then(() => {
-            this.toastsRef.current?.setToasts(this.toasts);
-        });
+    if (action.type === 'remove') {
+        return {
+            ...state,
+            toasts: state.toasts.filter((toast) => toast.id !== action.id),
+        };
     }
-    closeToast(toastId) {
-        this.toasts = this.toasts.map((toast) => {
-            return {
-                ...toast,
-                isVisible: toast.id !== toastId,
-            };
-        });
-        this.updateView();
+    if (action.type === 'close-all') {
+        return {
+            ...state,
+            toasts: state.toasts.map((toast) => ({ ...toast, isVisible: false })),
+        };
     }
-    closeAll() {
-        this.toasts = this.toasts.map((toast) => {
-            return {
-                ...toast,
-                isVisible: false,
-            };
-        });
-        this.updateView();
+    if (action.type === 'settings') {
+        return { ...state, settings: { ...state.settings, ...action.settings } };
     }
-}
+    return state;
+};
+// ----------------------------------------------------------------------------
+export const ToasterStateContext = React.createContext(undefined);
+ToasterStateContext.displayName = 'ToasterStateContext';
+// ----------------------------------------------------------------------------
+const ToasterDispatchContext = React.createContext(undefined);
+ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+// ----------------------------------------------------------------------------
+const nextId = (() => {
+    let count = 0;
+    return () => ++count;
+})();

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

@@ -1,4 +1 @@
-import Toaster from './Toaster.js';
-export type { ToastOptions } from './Toaster.js';
-declare const toaster: Toaster;
-export default toaster;
+export { useToaster } from './Toaster.js';

package/esm/core/Toast/index.js

@@ -2,6 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import Toaster from './Toaster.js';
-const toaster = new Toaster();
-export default toaster;
+export { useToaster } from './Toaster.js';

package/esm/core/Tooltip/Tooltip.d.ts

@@ -1,6 +1,49 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
-export declare type TooltipProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type TooltipOptions = {
+    /**
+     * Placement of the Tooltip
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * Property for manual visibility control
+     */
+    visible?: boolean;
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want Tooltip to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Tooltip middleware options.
+     * https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        size?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+};
+declare type TooltipOwnProps = {
     /**
      * Content of the tooltip.
      */
@@ -9,18 +52,35 @@ export declare type TooltipProps = {
      * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
      * If not specified, the `reference` prop should be used instead.
      */
-    children?: JSX.Element;
-} & Omit<PopoverProps, 'className'> & Omit<CommonProps, 'title'>;
+    children?: React.ReactNode;
+    /**
+     * Element to portal tooltip to.
+     * Portals to ThemeProvider portalContainerRef by default.
+     * @default true;
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
+    /**
+     * Sets reference point to user provided element.
+     * @example
+     * const buttonRef = React.useRef();
+     * ...
+     * <Button ref={buttonRef} />
+     * <Tooltip content='tooltip text' reference={buttonRef} />
+     */
+    reference?: React.RefObject<HTMLElement>;
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
 export default Tooltip;

package/esm/core/Tooltip/Tooltip.js

@@ -4,20 +4,110 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Popover, Box } from '../utils/index.js';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useHover, useFocus, useDismiss, useRole, useInteractions, safePolygon, size, autoPlacement, hide, inline, } from '@floating-ui/react';
+import { Box, getDocument, mergeRefs, useGlobals, useMergedRefs, } from '../utils/index.js';
+import ReactDOM from 'react-dom';
+const useTooltip = (options = {}) => {
+    const { placement, visible: controlledOpen, middleware = {
+        flip: true,
+        shift: true,
+    }, autoUpdateOptions = {}, } = options;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const data = useFloating({
+        placement,
+        open,
+        onOpenChange: setUncontrolledOpen,
+        whileElementsMounted: (referenceEl, floatingEl, update) => autoUpdate(referenceEl, floatingEl, update, {
+            animationFrame: autoUpdateOptions.animationFrame,
+            ancestorScroll: autoUpdateOptions.ancestorScroll,
+            ancestorResize: autoUpdateOptions.ancestorResize,
+            elementResize: autoUpdateOptions.elementResize,
+            layoutShift: autoUpdateOptions.layoutShift,
+        }),
+        middleware: [
+            middleware.offset !== undefined ? offset(middleware.offset) : offset(4),
+            middleware.flip && flip(),
+            middleware.shift && shift(),
+            middleware.size && size(),
+            middleware.autoPlacement && autoPlacement(),
+            middleware.inline && inline(),
+            middleware.hide && hide(),
+        ].filter(Boolean),
+    });
+    const context = data.context;
+    const hover = useHover(context, {
+        enabled: controlledOpen == null,
+        delay: {
+            open: 50,
+            close: 250,
+        },
+        handleClose: safePolygon({ buffer: -Infinity }),
+    });
+    const focus = useFocus(context, {
+        enabled: controlledOpen == null,
+    });
+    const click = useClick(context, {
+        enabled: controlledOpen == null,
+    });
+    const dismiss = useDismiss(context, {
+        enabled: controlledOpen == null,
+    });
+    const role = useRole(context, { role: 'tooltip' });
+    const interactions = useInteractions([click, hover, focus, dismiss, role]);
+    return React.useMemo(() => ({
+        open,
+        setUncontrolledOpen,
+        ...interactions,
+        ...data,
+    }), [open, interactions, data]);
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export const Tooltip = (props) => {
-    const { content, children, className, style, visible, ref, id, ...rest } = props;
-    return (React.createElement(Popover, { visible: visible, interactive: false, content: React.createElement(Box, { className: cx('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
-};
+export const Tooltip = React.forwardRef((props, forwardRef) => {
+    const { content, children, portal = true, placement = 'top', autoUpdateOptions, middleware, style, className, visible, reference, ...rest } = props;
+    const tooltip = useTooltip({
+        placement,
+        visible,
+        autoUpdateOptions,
+        middleware,
+    });
+    const context = useGlobals();
+    React.useEffect(() => {
+        if (reference) {
+            tooltip.refs.setReference(reference.current);
+        }
+    }, [reference, tooltip.refs]);
+    const portalTo = typeof portal !== 'boolean'
+        ? portal.to
+        : portal
+            ? context?.portalContainerRef?.current ?? getDocument()?.body
+            : null;
+    const contentBox = (React.createElement(Box, { className: cx('iui-tooltip', className), ref: useMergedRefs(tooltip.refs.setFloating, forwardRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.getFloatingProps(), ...rest }, content));
+    const childrenRef = React.isValidElement(children) &&
+        mergeRefs(tooltip.refs.setReference, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children.ref);
+    return (React.createElement(React.Fragment, null,
+        React.isValidElement(children)
+            ? React.cloneElement(children, tooltip.getReferenceProps({
+                ref: childrenRef,
+                ...children.props,
+            }))
+            : null,
+        tooltip.open
+            ? portalTo
+                ? ReactDOM.createPortal(contentBox, portalTo)
+                : contentBox
+            : null));
+});
 export default Tooltip;

package/esm/core/index.d.ts

@@ -1,6 +1,6 @@
 export { Alert } from './Alert/index.js';
-export { Avatar, UserIcon } from './Avatar/index.js';
-export { AvatarGroup, UserIconGroup } from './AvatarGroup/index.js';
+export { Avatar } from './Avatar/index.js';
+export { AvatarGroup } from './AvatarGroup/index.js';
 export { Backdrop } from './Backdrop/index.js';
 export { Badge } from './Badge/index.js';
 export { Breadcrumbs } from './Breadcrumbs/index.js';
@@ -23,7 +23,7 @@ export type { FooterElement, TitleTranslations } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
 export { TransferList } from './TransferList/index.js';
-export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
+export { Tabs, Tab } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
 export { Label } from './Label/index.js';
@@ -51,8 +51,7 @@ export { Textarea } from './Textarea/index.js';
 export { Tile } from './Tile/index.js';
 export { TimePicker } from './TimePicker/index.js';
 export type { MeridiemType } from './TimePicker/index.js';
-export { default as toaster } from './Toast/index.js';
-export type { ToastOptions } from './Toast/index.js';
+export { useToaster } from './Toast/index.js';
 export { ThemeProvider } from './ThemeProvider/index.js';
 export type { ThemeType } from './ThemeProvider/index.js';
 export { ToggleSwitch } from './ToggleSwitch/index.js';
@@ -60,7 +59,7 @@ export { Tooltip } from './Tooltip/index.js';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree/index.js';
 export type { NodeData, NodeRenderProps } from './Tree/index.js';
 export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
-export { Wizard, Stepper, WorkflowDiagram } from './Stepper/index.js';
-export type { StepProperties, WizardType, WizardLocalization, StepperLocalization, } from './Stepper/index.js';
+export { Stepper, WorkflowDiagram } from './Stepper/index.js';
+export type { StepProperties, StepperLocalization } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
 export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';