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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
-export declare type ToastProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+export type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
+export type ToastProps = {
     /**
      * Internal id of the toast. Used for closing the toasts.
      */
@@ -10,6 +10,13 @@ export declare type ToastProps = {
      * Content of the Toast message
      */
     content: React.ReactNode;
+    /**
+     * Passes props to toast and content
+     */
+    domProps?: {
+        toastProps?: React.ComponentProps<'div'>;
+        contentProps?: React.ComponentProps<'div'>;
+    };
     /**
      * Category of the Toast, which controls the border color, as well as the category icon.
      */
@@ -22,10 +29,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 +43,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 +57,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
@@ -64,13 +66,14 @@ export declare type ToastProps = {
  * <Toast type='temporary' content='26 files are available for synchronization.' category='informational' />
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
-export declare const Toast: (props: ToastProps) => JSX.Element;
-export declare type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove'> & {
+export declare const Toast: (props: ToastProps) => React.JSX.Element;
+export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
     onClose?: () => void;
-} & CommonProps;
+    contentProps?: React.ComponentProps<'div'>;
+};
 /**
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
-export declare const ToastPresentation: (props: ToastPresentationProps) => JSX.Element;
+export declare const ToastPresentation: PolymorphicForwardRefComponent<"div", ToastPresentationProps>;
 export default Toast;

package/esm/core/Toast/Toast.js

@@ -5,9 +5,18 @@
 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 { IconButton } from '../Buttons/index.js';
-const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
+import {
+  getWindow,
+  StatusIconMap,
+  SvgCloseSmall,
+  Box,
+  useSafeContext,
+  ButtonBase,
+} from '../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { ToasterStateContext } from './Toaster.js';
+const isMotionOk = () =>
+  getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 /**
  * Generic Toast Component
  * @example
@@ -17,112 +26,198 @@ const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow())
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 export const Toast = (props) => {
-    const { content, category, type = 'temporary', isVisible, link, duration = 7000, hasCloseButton, onRemove, animateOutTo, placementPosition = 'top', } = props;
-    const closeTimeout = React.useRef(0);
-    const [visible, setVisible] = React.useState(isVisible);
-    const [height, setHeight] = React.useState(0);
-    const thisElement = React.useRef(null);
-    const [margin, setMargin] = React.useState(0);
-    const marginStyle = () => {
-        if (placementPosition === 'top') {
-            return { marginBottom: margin };
-        }
-        return { marginTop: margin };
+  const {
+    content,
+    category,
+    type = 'temporary',
+    isVisible: isVisibleProp,
+    link,
+    duration = 7000,
+    hasCloseButton,
+    onRemove,
+    animateOutTo,
+    domProps,
+  } = props;
+  const closeTimeout = React.useRef(0);
+  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);
+  const marginStyle = () => {
+    if (placementPosition === 'top') {
+      return { marginBlockEnd: margin };
+    }
+    return { marginBlockStart: margin };
+  };
+  React.useEffect(() => {
+    if (type === 'temporary') {
+      setCloseTimeout(duration);
+    }
+    return () => {
+      clearCloseTimeout();
     };
-    React.useEffect(() => {
-        if (type === 'temporary') {
-            setCloseTimeout(duration);
-        }
-        return () => {
-            clearCloseTimeout();
-        };
-        // 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.
-        if (!isVisible && !animateOutTo) {
-            setMargin(-height);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, type]);
+  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.
+    if (!isVisible && !animateOutTo) {
+      setMargin(-height);
+    }
+  }, [isVisible, animateOutTo, setMargin, height]);
+  const close = () => {
+    clearCloseTimeout();
+    // move element up when this element is closed.
+    setMargin(-height);
+    setVisible(false);
+  };
+  const setCloseTimeout = (timeout) => {
+    const definedWindow = getWindow();
+    if (!definedWindow) {
+      return;
+    }
+    closeTimeout.current = definedWindow.setTimeout(() => {
+      close();
+    }, timeout);
+  };
+  const clearCloseTimeout = () => {
+    getWindow()?.clearTimeout(closeTimeout.current);
+  };
+  const onRef = (ref) => {
+    if (ref) {
+      const { height } = ref.getBoundingClientRect();
+      setHeight(height);
+    }
+  };
+  const calculateOutAnimation = (node) => {
+    // calculation translate x and y pixels.
+    let translateX = 0;
+    let translateY = 0;
+    if (animateOutTo && node) {
+      const { x: startX, y: startY } = node.getBoundingClientRect(); // current element
+      const { x: endX, y: endY } = animateOutTo.getBoundingClientRect(); // anchor point
+      translateX = endX - startX;
+      translateY = endY - startY;
+    }
+    return { translateX, translateY };
+  };
+  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';
         }
-    }, [isVisible, animateOutTo, setMargin, height]);
-    const close = () => {
-        clearCloseTimeout();
-        // move element up when this element is closed.
-        setMargin(-height);
-        setVisible(false);
-    };
-    const setCloseTimeout = (timeout) => {
-        const definedWindow = getWindow();
-        if (!definedWindow) {
-            return;
+      },
+      onEntered: (node) => {
+        if (isMotionOk()) {
+          node.style.transform = 'translateY(0)';
         }
-        closeTimeout.current = definedWindow.setTimeout(() => {
-            close();
-        }, timeout);
-    };
-    const clearCloseTimeout = () => {
-        var _a;
-        (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
-    };
-    const onRef = (ref) => {
-        if (ref) {
-            const { height } = ref.getBoundingClientRect();
-            setHeight(height);
+      },
+      onExiting: (node) => {
+        if (isMotionOk()) {
+          const { translateX, translateY } = calculateOutAnimation(node);
+          node.style.transform = animateOutTo
+            ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+            : `scale(0.9)`;
+          node.style.opacity = '0';
+          node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+          node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
         }
-    };
-    const calculateOutAnimation = (node) => {
-        // calculation translate x and y pixels.
-        let translateX = 0;
-        let translateY = 0;
-        if (animateOutTo && node) {
-            const { x: startX, y: startY } = node.getBoundingClientRect(); // current element
-            const { x: endX, y: endY } = animateOutTo.getBoundingClientRect(); // anchor point
-            translateX = endX - startX;
-            translateY = endY - startY;
-        }
-        return { translateX, translateY };
-    };
-    return (React.createElement(Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: (node) => {
-            if (isMotionOk()) {
-                node.style.transform = 'translateY(15%)';
-                node.style.transitionTimingFunction = 'ease';
-            }
-        }, onEntered: (node) => {
-            if (isMotionOk()) {
-                node.style.transform = 'translateY(0)';
-            }
-        }, onExiting: (node) => {
-            if (isMotionOk()) {
-                const { translateX, translateY } = calculateOutAnimation(node);
-                node.style.transform = animateOutTo
-                    ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-                    : `scale(0.9)`;
-                node.style.opacity = '0';
-                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, {
+          as: 'div',
+          category: category,
+          content: content,
+          link: link,
+          type: type,
+          hasCloseButton: hasCloseButton,
+          onClose: close,
+          ...domProps?.toastProps,
+          contentProps: domProps?.contentProps,
+        }),
+      ),
+    ),
+  );
 };
 /**
  * The presentational part of a toast, without any animation or logic.
  * @private
  */
-export const ToastPresentation = (props) => {
-    const { content, category, type = 'temporary', link, hasCloseButton, onClose, className, ...rest } = props;
-    const StatusIcon = StatusIconMap[category];
-    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)),
-        (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-            React.createElement(SvgCloseSmall, null)))));
-};
+export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
+  const {
+    content,
+    category,
+    type = 'temporary',
+    link,
+    hasCloseButton,
+    onClose,
+    className,
+    contentProps,
+    ...rest
+  } = props;
+  const StatusIcon = StatusIconMap[category];
+  return React.createElement(
+    Box,
+    {
+      className: cx(`iui-toast iui-${category}`, className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      { className: 'iui-status-area' },
+      React.createElement(StatusIcon, { className: 'iui-icon' }),
+    ),
+    React.createElement(
+      Box,
+      {
+        as: 'div',
+        ...contentProps,
+        className: cx('iui-message', contentProps?.className),
+      },
+      content,
+    ),
+    link &&
+      React.createElement(
+        ButtonBase,
+        { 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),
+      ),
+  );
+});
 export default Toast;

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

@@ -1,48 +1,46 @@
 import * as React from 'react';
 import type { ToastProps } from './Toast.js';
-export declare type ToasterSettings = {
+export 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 type ToastOptions = Omit<ToastProps, 'category' | 'isVisible' | 'id' | 'content'>;
+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: () => React.JSX.Element;
+export declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
+type ToasterState = {
+    toasts: ToastProps[];
+    settings: ToasterSettings;
+};
+export {};