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

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

@@ -19,7 +19,7 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
  *
  * @private
  */
-export declare const polymorphic: ((className: string, attrs?: React.SVGProps<SVGSymbolElement> | React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement> | React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement> | React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement> | React.DetailedHTMLProps<React.BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement> | React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement> | React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> | React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement> | React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement> | React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement> | React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement> | React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement> | React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement> | React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement> | React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement> | React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> | React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement> | React.DetailedHTMLProps<React.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement> | React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement> | React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement> | React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> | React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement> | React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement> | React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement> | React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement> | React.DetailedHTMLProps<React.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> | React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> | React.DetailedHTMLProps<React.SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement> | React.DetailedHTMLProps<React.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement> | React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement> | React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement> | React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> | React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> | React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> | React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> | React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> | React.SVGProps<SVGTextElement> | React.SVGProps<SVGElement> | React.SVGProps<SVGCircleElement> | React.SVGProps<SVGClipPathElement> | React.SVGProps<SVGDefsElement> | React.SVGProps<SVGDescElement> | React.SVGProps<SVGEllipseElement> | React.SVGProps<SVGFEBlendElement> | React.SVGProps<SVGFEColorMatrixElement> | React.SVGProps<SVGFEComponentTransferElement> | React.SVGProps<SVGFECompositeElement> | React.SVGProps<SVGFEConvolveMatrixElement> | React.SVGProps<SVGFEDiffuseLightingElement> | React.SVGProps<SVGFEDisplacementMapElement> | React.SVGProps<SVGFEDistantLightElement> | React.SVGProps<SVGFEDropShadowElement> | React.SVGProps<SVGFEFloodElement> | React.SVGProps<SVGFEFuncAElement> | React.SVGProps<SVGFEFuncBElement> | React.SVGProps<SVGFEFuncGElement> | React.SVGProps<SVGFEFuncRElement> | React.SVGProps<SVGFEGaussianBlurElement> | React.SVGProps<SVGFEImageElement> | React.SVGProps<SVGFEMergeElement> | React.SVGProps<SVGFEMergeNodeElement> | React.SVGProps<SVGFEMorphologyElement> | React.SVGProps<SVGFEOffsetElement> | React.SVGProps<SVGFEPointLightElement> | React.SVGProps<SVGFESpecularLightingElement> | React.SVGProps<SVGFESpotLightElement> | React.SVGProps<SVGFETileElement> | React.SVGProps<SVGFETurbulenceElement> | React.SVGProps<SVGFilterElement> | React.SVGProps<SVGForeignObjectElement> | React.SVGProps<SVGGElement> | React.SVGProps<SVGImageElement> | React.SVGProps<SVGLineElement> | React.SVGProps<SVGLinearGradientElement> | React.SVGProps<SVGMarkerElement> | React.SVGProps<SVGMaskElement> | React.SVGProps<SVGMetadataElement> | React.SVGProps<SVGPathElement> | React.SVGProps<SVGPatternElement> | React.SVGProps<SVGPolygonElement> | React.SVGProps<SVGPolylineElement> | React.SVGProps<SVGRadialGradientElement> | React.SVGProps<SVGRectElement> | React.SVGProps<SVGStopElement> | React.SVGProps<SVGSVGElement> | React.SVGProps<SVGSwitchElement> | React.SVGProps<SVGTextPathElement> | React.SVGProps<SVGTSpanElement> | React.SVGProps<SVGUseElement> | React.SVGProps<SVGViewElement> | React.DetailedHTMLProps<React.KeygenHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement> | undefined) => PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>) & {
+export declare const polymorphic: ((className: string, attrs?: React.SVGProps<SVGSymbolElement> | React.DetailedHTMLProps<React.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement> | React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement> | React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement> | React.DetailedHTMLProps<React.BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement> | React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement> | React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> | React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement> | React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement> | React.DetailedHTMLProps<React.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement> | React.DetailedHTMLProps<React.DelHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement> | React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement> | React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement> | React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement> | React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement> | React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement> | React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> | React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.DetailedHTMLProps<React.InsHTMLAttributes<HTMLModElement>, HTMLModElement> | React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement> | React.DetailedHTMLProps<React.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement> | React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement> | React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement> | React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> | React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement> | React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement> | React.DetailedHTMLProps<React.OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement> | React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement> | React.DetailedHTMLProps<React.QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement> | React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> | React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> | React.DetailedHTMLProps<React.SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement> | React.DetailedHTMLProps<React.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement> | React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement> | React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement> | React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> | React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> | React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> | React.DetailedHTMLProps<React.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> | React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> | React.SVGProps<SVGElement> | React.SVGProps<SVGCircleElement> | React.SVGProps<SVGClipPathElement> | React.SVGProps<SVGDefsElement> | React.SVGProps<SVGDescElement> | React.SVGProps<SVGEllipseElement> | React.SVGProps<SVGFEBlendElement> | React.SVGProps<SVGFEColorMatrixElement> | React.SVGProps<SVGFEComponentTransferElement> | React.SVGProps<SVGFECompositeElement> | React.SVGProps<SVGFEConvolveMatrixElement> | React.SVGProps<SVGFEDiffuseLightingElement> | React.SVGProps<SVGFEDisplacementMapElement> | React.SVGProps<SVGFEDistantLightElement> | React.SVGProps<SVGFEDropShadowElement> | React.SVGProps<SVGFEFloodElement> | React.SVGProps<SVGFEFuncAElement> | React.SVGProps<SVGFEFuncBElement> | React.SVGProps<SVGFEFuncGElement> | React.SVGProps<SVGFEFuncRElement> | React.SVGProps<SVGFEGaussianBlurElement> | React.SVGProps<SVGFEImageElement> | React.SVGProps<SVGFEMergeElement> | React.SVGProps<SVGFEMergeNodeElement> | React.SVGProps<SVGFEMorphologyElement> | React.SVGProps<SVGFEOffsetElement> | React.SVGProps<SVGFEPointLightElement> | React.SVGProps<SVGFESpecularLightingElement> | React.SVGProps<SVGFESpotLightElement> | React.SVGProps<SVGFETileElement> | React.SVGProps<SVGFETurbulenceElement> | React.SVGProps<SVGFilterElement> | React.SVGProps<SVGForeignObjectElement> | React.SVGProps<SVGGElement> | React.SVGProps<SVGImageElement> | React.SVGProps<SVGLineElement> | React.SVGProps<SVGLinearGradientElement> | React.SVGProps<SVGMarkerElement> | React.SVGProps<SVGMaskElement> | React.SVGProps<SVGMetadataElement> | React.SVGProps<SVGPathElement> | React.SVGProps<SVGPatternElement> | React.SVGProps<SVGPolygonElement> | React.SVGProps<SVGPolylineElement> | React.SVGProps<SVGRadialGradientElement> | React.SVGProps<SVGRectElement> | React.SVGProps<SVGStopElement> | React.SVGProps<SVGSVGElement> | React.SVGProps<SVGSwitchElement> | React.SVGProps<SVGTextElement> | React.SVGProps<SVGTextPathElement> | React.SVGProps<SVGTSpanElement> | React.SVGProps<SVGUseElement> | React.SVGProps<SVGViewElement> | React.DetailedHTMLProps<React.KeygenHTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedHTMLProps<React.WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement> | undefined) => PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>) & {
     a: (className: string, attrs?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> | undefined) => PolymorphicForwardRefComponent<"a", {}>;
     abbr: (className: string, attrs?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined) => PolymorphicForwardRefComponent<"abbr", {}>;
     address: (className: string, attrs?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined) => PolymorphicForwardRefComponent<"address", {}>;

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

@@ -6,10 +6,10 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, useMergedRefs } from '../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>
  */
 export const FileUpload = React.forwardRef((props, ref) => {

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

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
 import { Anchor } from '../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/esm/core/ThemeProvider/ThemeProvider.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 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
@@ -42,8 +43,10 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
     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 },
-            children,
-            React.createElement("div", { ref: portalContainerRef }))));
+            React.createElement(ToastProvider, null,
+                children,
+                React.createElement("div", { ref: portalContainerRef },
+                    React.createElement(Toaster, null))))));
 });
 export default ThemeProvider;
 const Root = React.forwardRef((props, forwardedRef) => {

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

@@ -50,7 +50,7 @@ export { Tag, TagContainer } from './Tag/index.js';
 export { Textarea } from './Textarea/index.js';
 export { Tile } from './Tile/index.js';
 export { TimePicker } from './TimePicker/index.js';
-export { default as toaster } from './Toast/index.js';
+export { useToaster } from './Toast/index.js';
 export { ThemeProvider } from './ThemeProvider/index.js';
 export { ToggleSwitch } from './ToggleSwitch/index.js';
 export { Tooltip } from './Tooltip/index.js';

package/esm/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/esm/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/esm/core/utils/functions/dom.js

@@ -2,25 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import styles from '../../../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).
- */
-export const getContainer = (containerId, ownerDocument = getDocument()) => {
-    let container = ownerDocument?.getElementById(containerId) ?? undefined;
-    if (container == null && !!ownerDocument) {
-        container = ownerDocument.createElement('div');
-        container.setAttribute('id', containerId);
-        const root = ownerDocument.querySelector(`.${styles['iui-root']}`) ??
-            ownerDocument.body;
-        root.appendChild(container);
-    }
-    return container;
-};
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.