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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.0.0-dev.3
+
+### Major Changes
+
+- [#1330](https://github.com/iTwin/iTwinUI/pull/1330): Deprecated `FileUploadTemplate`. Removed all of its references.
+- [#1351](https://github.com/iTwin/iTwinUI/pull/1351): `toaster` import has been removed and replaced with `useToaster` which returns a toaster object with the same API.
+
 ## 3.0.0-dev.2
 
 ### Major Changes

package/cjs/core/Alert/Alert.d.ts

@@ -45,8 +45,8 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps>
     Icon: PolymorphicForwardRefComponent<"span", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "as" | "fill" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
-        fill?: "default" | "positive" | "warning" | "negative" | import("../utils/types.js").AnyString | "informational" | undefined;
+        size?: "small" | "auto" | "large" | "medium" | import("../utils/types.js").AnyString | undefined;
+        fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
     } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
         as?: "span" | undefined;
     }>;

package/cjs/core/FileUpload/FileUpload.d.ts

@@ -4,7 +4,6 @@ declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.
      * Should always be used when drag content differs from `children` being wrapped.
-     * Can be skipped if wrapping `FileUploadTemplate`.
      */
     dragContent?: React.ReactNode;
     /**
@@ -13,15 +12,15 @@ declare type FileUploadProps = {
     onFileDropped: (files: FileList) => void;
     /**
      * Component to wrap `FileUpload` around.
-     * Either pass `FileUploadTemplate` (for default state) or a different component to wrap.
+     * Either pass `FileUploadCard` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
 };
 /**
- * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
+ * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
  * @example
- * <FileUpload onFileDropped={console.log}><FileUploadTemplate /></FileUpload>
+ * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 export declare const FileUpload: PolymorphicForwardRefComponent<"div", FileUploadProps>;

package/cjs/core/FileUpload/FileUpload.js

@@ -35,10 +35,10 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 /**
- * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
+ * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
  * @example
- * <FileUpload onFileDropped={console.log}><FileUploadTemplate /></FileUpload>
+ * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 exports.FileUpload = React.forwardRef((props, ref) => {

package/cjs/core/FileUpload/FileUploadTemplate.d.ts

@@ -32,6 +32,7 @@ declare type FileUploadTemplateProps = {
     children?: React.ReactNode;
 };
 /**
+ * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -36,6 +36,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
 /**
+ * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -35,6 +35,7 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const ThemeContext_js_1 = require("./ThemeContext.js");
+const Toaster_js_1 = require("../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
@@ -71,8 +72,10 @@ exports.ThemeProvider = React.forwardRef((props, ref) => {
     const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainerRef }), [theme, themeOptions]);
     return (React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
         React.createElement(Root, { theme: theme, shouldApplyBackground: shouldApplyBackground, themeOptions: themeOptions, ref: ref, ...rest },
-            children,
-            React.createElement("div", { ref: portalContainerRef }))));
+            React.createElement(Toaster_js_1.ToastProvider, null,
+                children,
+                React.createElement("div", { ref: portalContainerRef },
+                    React.createElement(Toaster_js_1.Toaster, null))))));
 });
 exports.default = exports.ThemeProvider;
 const Root = React.forwardRef((props, forwardedRef) => {

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 {};

package/cjs/core/Toast/Toaster.js

@@ -22,132 +22,107 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToasterStateContext = exports.ToastProvider = exports.Toaster = exports.useToaster = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const ReactDOM = __importStar(require("react-dom"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-const ToastWrapper_js_1 = require("./ToastWrapper.js");
-const TOASTS_CONTAINER_ID = 'iui-toasts-container';
-class Toaster {
-    constructor() {
-        this.toasts = [];
-        this.lastId = 0;
-        this.settings = {
-            order: 'descending',
+const Toast_js_1 = require("./Toast.js");
+// ----------------------------------------------------------------------------
+const useToaster = () => {
+    const dispatch = (0, index_js_1.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 });
+        },
+    };
+};
+exports.useToaster = useToaster;
+// ----------------------------------------------------------------------------
+const Toaster = () => {
+    const { toasts, settings } = (0, index_js_1.useSafeContext)(exports.ToasterStateContext);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)(`iui-toast-wrapper`, `iui-placement-${settings.placement}`) }, toasts.map((toastProps) => {
+        return React.createElement(Toast_js_1.Toast, { key: toastProps.id, ...toastProps });
+    })));
+};
+exports.Toaster = Toaster;
+// ----------------------------------------------------------------------------
+const ToastProvider = ({ children }) => {
+    const [toasterState, dispatch] = React.useReducer(toastReducer, {
+        toasts: [],
+        settings: {
+            order: 'auto',
             placement: 'top',
+        },
+    });
+    return (React.createElement(ToasterDispatchContext.Provider, { value: dispatch },
+        React.createElement(exports.ToasterStateContext.Provider, { value: toasterState }, children)));
+};
+exports.ToastProvider = ToastProvider;
+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 = (0, index_js_1.getContainer)(TOASTS_CONTAINER_ID) ?? (0, index_js_1.getDocument)()?.body;
-            if (!container) {
-                return;
-            }
-            this.isInitialized = true;
-            const toastWrapper = React.createElement(ToastWrapper_js_1.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 } };
     }
-}
-exports.default = Toaster;
+    return state;
+};
+// ----------------------------------------------------------------------------
+exports.ToasterStateContext = React.createContext(undefined);
+exports.ToasterStateContext.displayName = 'ToasterStateContext';
+// ----------------------------------------------------------------------------
+const ToasterDispatchContext = React.createContext(undefined);
+ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+// ----------------------------------------------------------------------------
+const nextId = (() => {
+    let count = 0;
+    return () => ++count;
+})();

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

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToaster = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const Toaster_js_1 = __importDefault(require("./Toaster.js"));
-const toaster = new Toaster_js_1.default();
-exports.default = toaster;
+var Toaster_js_1 = require("./Toaster.js");
+Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return Toaster_js_1.useToaster; } });

package/cjs/core/index.d.ts

@@ -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';

package/cjs/core/index.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.TransferList = exports.ListItem = exports.List = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
-exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = void 0;
+exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.useToaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = void 0;
 exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.getUserColor = exports.SearchBox = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -155,7 +152,7 @@ Object.defineProperty(exports, "Tile", { enumerable: true, get: function () { re
 var index_js_48 = require("./TimePicker/index.js");
 Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return index_js_48.TimePicker; } });
 var index_js_49 = require("./Toast/index.js");
-Object.defineProperty(exports, "toaster", { enumerable: true, get: function () { return __importDefault(index_js_49).default; } });
+Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return index_js_49.useToaster; } });
 var index_js_50 = require("./ThemeProvider/index.js");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return index_js_50.ThemeProvider; } });
 var index_js_51 = require("./ToggleSwitch/index.js");

package/cjs/core/utils/components/Popover.d.ts

@@ -25,7 +25,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "className" | "role" | "offset" | "children" | "content" | "plugins" | "theme" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "className" | "role" | "offset" | "children" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "theme" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/cjs/core/utils/functions/dom.d.ts

@@ -1,12 +1,4 @@
 /// <reference types="react" />
-/**
- * Get the container as a child of body, or create one if it doesn't exist.
- * Mostly used for dynamic components like Modal or Toast.
- *
- * @param containerId id of the container to find or create
- * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
- */
-export declare const getContainer: (containerId: string, ownerDocument?: Document | undefined) => HTMLElement | undefined;
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.

package/cjs/core/utils/functions/dom.js

@@ -3,31 +3,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
-const styles_js_1 = __importDefault(require("../../../styles.js"));
-/**
- * Get the container as a child of body, or create one if it doesn't exist.
- * Mostly used for dynamic components like Modal or Toast.
- *
- * @param containerId id of the container to find or create
- * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
- */
-const getContainer = (containerId, ownerDocument = (0, exports.getDocument)()) => {
-    let container = ownerDocument?.getElementById(containerId) ?? undefined;
-    if (container == null && !!ownerDocument) {
-        container = ownerDocument.createElement('div');
-        container.setAttribute('id', containerId);
-        const root = ownerDocument.querySelector(`.${styles_js_1.default['iui-root']}`) ??
-            ownerDocument.body;
-        root.appendChild(container);
-    }
-    return container;
-};
-exports.getContainer = getContainer;
+exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = void 0;
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.