Toast

type ToastProviderState = {}

type ToastViewportState = {
  /** Whether toasts are expanded in the viewport. */
  expanded: boolean;
}

type ToastPortalState = {}

type ToastRootState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the toasts in the viewport are expanded. */
  expanded: boolean;
  /** Whether the toast was removed due to exceeding the limit. */
  limited: boolean;
  /** The type of the toast. */
  type: string | undefined;
  /** Whether the toast is being swiped. */
  swiping: boolean;
  /** The direction the toast is being swiped. */
  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
}

type ToastRootToastObject<Data extends {} = any> = {
  /** The unique identifier for the toast. */
  id: string;
  /** The ref for the toast. */
  ref?: React.RefObject<HTMLElement | null>;
  /** The title of the toast. */
  title?: React.ReactNode;
  /**
   * The type of the toast. Used to conditionally style the toast,
   * including conditionally rendering elements based on the type.
   */
  type?: string;
  /** The description of the toast. */
  description?: React.ReactNode;
  /**
   * The amount of time (in ms) before the toast is auto dismissed.
   * A value of `0` will prevent the toast from being dismissed automatically.
   * @default 5000
   */
  timeout?: number;
  /**
   * The priority of the toast.
   * - `low` - The toast will be announced politely.
   * - `high` - The toast will be announced urgently.
   * @default 'low'
   */
  priority?: 'low' | 'high';
  /** The transition status of the toast. */
  transitionStatus?: 'starting' | 'ending';
  /** A counter that increments whenever the toast is updated or upserted. */
  updateKey?: number;
  /** Determines if the toast was closed due to the limit being reached. */
  limited?: boolean;
  /** The height of the toast. */
  height?: number;
  /** Callback function to be called when the toast is closed. */
  onClose?: () => void;
  /** Callback function to be called when the toast is removed from the list after any animations are complete when closed. */
  onRemove?: () => void;
  /** The props for the action button. */
  actionProps?: Omit<
    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
    'ref'
  >;
  /** The props forwarded to the toast positioner element when rendering anchored toasts. */
  positionerProps?: ToastManagerPositionerProps;
  /** Custom data for the toast. */
  data?: Data;
}

type ToastContentState = {
  /** Whether the toast viewport is expanded. */
  expanded: boolean;
  /** Whether the toast is behind the frontmost toast in the stack. */
  behind: boolean;
}

type ToastTitleState = {
  /** The type of the toast. */
  type: string | undefined;
}

type ToastDescriptionState = {
  /** The type of the toast. */
  type: string | undefined;
}

type ToastActionState = {
  /** The type of the toast. */
  type: string | undefined;
}

type ToastCloseState = {
  /** The type of the toast. */
  type: string | undefined;
}

type ToastPositionerState = {
  /** The side of the anchor the component is placed on. */
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  /** The alignment of the component relative to the anchor. */
  align: 'start' | 'center' | 'end';
  /** Whether the anchor element is hidden. */
  anchorHidden: boolean;
}

type ToastArrowState = {
  /** The side of the anchor the component is placed on. */
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  /** The alignment of the component relative to the anchor. */
  align: 'start' | 'center' | 'end';
  /** Whether the arrow cannot be centered on the anchor. */
  uncentered: boolean;
}

type ToastObject<Data extends {}> = {
  /** The unique identifier for the toast. */
  id: string;
  /** The ref for the toast. */
  ref?: React.RefObject<HTMLElement | null>;
  /** The title of the toast. */
  title?: React.ReactNode;
  /**
   * The type of the toast. Used to conditionally style the toast,
   * including conditionally rendering elements based on the type.
   */
  type?: string;
  /** The description of the toast. */
  description?: React.ReactNode;
  /**
   * The amount of time (in ms) before the toast is auto dismissed.
   * A value of `0` will prevent the toast from being dismissed automatically.
   * @default 5000
   */
  timeout?: number;
  /**
   * The priority of the toast.
   * - `low` - The toast will be announced politely.
   * - `high` - The toast will be announced urgently.
   * @default 'low'
   */
  priority?: 'low' | 'high';
  /** The transition status of the toast. */
  transitionStatus?: 'starting' | 'ending';
  /** A counter that increments whenever the toast is updated or upserted. */
  updateKey?: number;
  /** Determines if the toast was closed due to the limit being reached. */
  limited?: boolean;
  /** The height of the toast. */
  height?: number;
  /** Callback function to be called when the toast is closed. */
  onClose?: () => void;
  /** Callback function to be called when the toast is removed from the list after any animations are complete when closed. */
  onRemove?: () => void;
  /** The props for the action button. */
  actionProps?: Omit<
    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
    'ref'
  >;
  /** The props forwarded to the toast positioner element when rendering anchored toasts. */
  positionerProps?: ToastManagerPositionerProps;
  /** Custom data for the toast. */
  data?: Data;
}

type ToastManager<Data extends {} = any> = {
  ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
  close: (id?: string) => void;
  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
  promise: <Value, T extends Data = Data>(
    promiseValue: Promise<Value>,
    options: ToastManagerPromiseOptions<Value, T>,
  ) => Promise<Value>;
}

type ToastManagerAddOptions<Data extends {}> = {
  /**
   * The unique identifier for the toast. Adding a toast with an existing ID
   * updates it in place and refreshes its auto-dismiss timer.
   */
  id?: string;
  /** The title of the toast. */
  title?: React.ReactNode;
  /**
   * The type of the toast. Used to conditionally style the toast,
   * including conditionally rendering elements based on the type.
   */
  type?: string;
  /** The description of the toast. */
  description?: React.ReactNode;
  /**
   * The amount of time (in ms) before the toast is auto dismissed.
   * A value of `0` will prevent the toast from being dismissed automatically.
   * @default 5000
   */
  timeout?: number;
  /**
   * The priority of the toast.
   * - `low` - The toast will be announced politely.
   * - `high` - The toast will be announced urgently.
   * @default 'low'
   */
  priority?: 'low' | 'high';
  /** The transition status of the toast. */
  transitionStatus?: 'starting' | 'ending';
  /** Callback function to be called when the toast is closed. */
  onClose?: () => void;
  /** Callback function to be called when the toast is removed from the list after any animations are complete when closed. */
  onRemove?: () => void;
  /** The props for the action button. */
  actionProps?: Omit<
    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
    'ref'
  >;
  /** The props forwarded to the toast positioner element when rendering anchored toasts. */
  positionerProps?: ToastManagerPositionerProps;
  /** Custom data for the toast. */
  data?: Data;
}

type ToastManagerEvent = { action: 'add' | 'close' | 'update' | 'promise'; options: any }

type ToastManagerPositionerProps = {
  /** An element to position the toast against. */
  anchor?: Element | null;
  style?:
    | React.CSSProperties
    | ((state: Toast.Positioner.State) => React.CSSProperties | undefined);
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component's state.
   */
  className?: string | ((state: Toast.Positioner.State) => string | undefined);
  /**
   * Which side of the anchor element to align the toast against.
   * May automatically change to avoid collisions.
   * @default 'top'
   */
  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  /**
   * Determines which CSS `position` property to use.
   * @default 'absolute'
   */
  positionMethod?: 'absolute' | 'fixed';
  /**
   * Distance between the anchor and the popup in pixels.
   * Also accepts a function that returns the distance to read the dimensions of the anchor
   * and positioner elements, along with its side and alignment.
   *
   * The function takes a `data` object parameter with the following properties:
   * - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
   * - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
   * - `data.side`: which side of the anchor element the positioner is aligned against.
   * - `data.align`: how the positioner is aligned relative to the specified side.
   * @default 0
   * @example
   * ```jsx
   * <Positioner
   *   sideOffset={({ side, align, anchor, positioner }) => {
   *     return side === 'top' || side === 'bottom'
   *       ? anchor.height
   *       : anchor.width;
   *   }}
   * />
   * ```
   */
  sideOffset?: number | ((data: {
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  align: 'start' | 'center' | 'end';
  anchor: { width: number; height: number };
  positioner: { width: number; height: number };
}) => number);
  /**
   * How to align the popup relative to the specified side.
   * @default 'center'
   */
  align?: 'start' | 'center' | 'end';
  /**
   * Additional offset along the alignment axis in pixels.
   * Also accepts a function that returns the offset to read the dimensions of the anchor
   * and positioner elements, along with its side and alignment.
   *
   * The function takes a `data` object parameter with the following properties:
   * - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
   * - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
   * - `data.side`: which side of the anchor element the positioner is aligned against.
   * - `data.align`: how the positioner is aligned relative to the specified side.
   * @default 0
   * @example
   * ```jsx
   * <Positioner
   *   alignOffset={({ side, align, anchor, positioner }) => {
   *     return side === 'top' || side === 'bottom'
   *       ? anchor.width
   *       : anchor.height;
   *   }}
   * />
   * ```
   */
  alignOffset?: number | ((data: {
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  align: 'start' | 'center' | 'end';
  anchor: { width: number; height: number };
  positioner: { width: number; height: number };
}) => number);
  /**
   * An element or a rectangle that delimits the area that the popup is confined to.
   * @default 'clipping-ancestors'
   */
  collisionBoundary?: Boundary;
  /**
   * Additional space to maintain from the edge of the collision boundary.
   * @default 5
   */
  collisionPadding?: Padding;
  /**
   * Whether to maintain the popup in the viewport after
   * the anchor element was scrolled out of view.
   * @default false
   */
  sticky?: boolean;
  /**
   * Minimum distance to maintain between the arrow and the edges of the popup.
   *
   * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
   * @default 5
   */
  arrowPadding?: number;
  /**
   * Whether to disable the popup from tracking any layout shift of its positioning anchor.
   * @default false
   */
  disableAnchorTracking?: boolean;
  /**
   * Determines how to handle collisions when positioning the popup.
   *
   * `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
   * - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
   *   (`top` and `bottom`, or `left` and `right`).
   * - `'shift'`: never change side; keep the requested side and move the popup within
   *   the clipping boundary so it stays visible.
   * - `'none'`: do not correct side-axis overflow.
   *
   * `align` controls overflow on the alignment axis (`start`/`center`/`end`):
   * - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
   * - `'shift'`: keep side and requested alignment, then nudge the popup along the
   *   alignment axis to fit.
   * - `'none'`: do not correct alignment-axis overflow.
   *
   * `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
   * preferred axis cannot fit:
   * - `'start'`: allow perpendicular fallback and try the logical start side first
   *   (`top` before `bottom`, or `left` before `right` in LTR).
   * - `'end'`: allow perpendicular fallback and try the logical end side first
   *   (`bottom` before `top`, or `right` before `left` in LTR).
   * - `'none'`: do not fallback to the perpendicular axis.
   *
   * When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
   * If `align` is omitted, it defaults to `'flip'`.
   * @example
   * ```jsx
   * <Positioner
   *   collisionAvoidance={{
   *     side: 'shift',
   *     align: 'shift',
   *     fallbackAxisSide: 'none',
   *   }}
   * />
   * ```
   */
  collisionAvoidance?: CollisionAvoidance;
  /**
   * Allows you to replace the component's HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render?: ReactElement | ((props: HTMLProps, state: Toast.Positioner.State) => ReactElement);
}

type ToastManagerPromiseOptions<Value, Data extends {}> = {
  loading: string | ToastManagerUpdateOptions<Data>;
  success:
    | string
    | ToastManagerUpdateOptions<Data>
    | ((result: Value) => string | ToastManagerUpdateOptions<Data>);
  error:
    | string
    | ToastManagerUpdateOptions<Data>
    | ((error: any) => string | ToastManagerUpdateOptions<Data>);
}

type ToastManagerUpdateOptions<Data extends {}> = {
  /** The title of the toast. */
  title?: React.ReactNode;
  /**
   * The type of the toast. Used to conditionally style the toast,
   * including conditionally rendering elements based on the type.
   */
  type?: string;
  /** The description of the toast. */
  description?: React.ReactNode;
  /**
   * The amount of time (in ms) before the toast is auto dismissed.
   * A value of `0` will prevent the toast from being dismissed automatically.
   * @default 5000
   */
  timeout?: number;
  /**
   * The priority of the toast.
   * - `low` - The toast will be announced politely.
   * - `high` - The toast will be announced urgently.
   * @default 'low'
   */
  priority?: 'low' | 'high';
  /** Callback function to be called when the toast is closed. */
  onClose?: () => void;
  /** Callback function to be called when the toast is removed from the list after any animations are complete when closed. */
  onRemove?: () => void;
  /** The props for the action button. */
  actionProps?: Omit<
    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
    'ref'
  >;
  /** The props forwarded to the toast positioner element when rendering anchored toasts. */
  positionerProps?: ToastManagerPositionerProps;
  /** Custom data for the toast. */
  data?: Data;
}

type UseToastManagerReturnValue<Data extends {} = any> = {
  toasts: ToastObject<Data>[];
  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
  close: (toastId?: string) => void;
  update: <T extends Data = Data>(toastId: string, options: ToastManagerUpdateOptions<T>) => void;
  promise: <Value, T extends Data = Data>(
    promise: Promise<Value>,
    options: ToastManagerPromiseOptions<Value, T>,
  ) => Promise<Value>;
}