Utilities

/**
 * Creates a custom transition component using CSS classes
 * @param config - Configuration object defining CSS classes and timing
 * @returns Custom transition component ready to use with ToastContainer
 */
function cssTransition(config: CSSTransitionProps): React.FC<ToastTransitionProps>;

interface CSSTransitionProps {
  /** CSS class applied when toast is entering */
  enter: string;
  /** CSS class applied when toast is exiting */
  exit: string;
  /** Whether to append position-based classes (e.g. '--top-right') */
  appendPosition?: boolean;
  /** Enable height collapse animation on exit */
  collapse?: boolean;
  /** Duration for height collapse animation */
  collapseDuration?: number;
}

import { cssTransition, ToastContainer } from 'react-toastify';

// Create a custom fade transition
const FadeTransition = cssTransition({
  enter: 'fade-enter',
  exit: 'fade-exit',
  collapse: true,
  collapseDuration: 300
});

// Use with ToastContainer
<ToastContainer transition={FadeTransition} />

.fade-enter {
  opacity: 0;
  animation: fadeIn 300ms ease-in-out;
}

.fade-exit {
  opacity: 1;
  animation: fadeOut 300ms ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

const SlideTransition = cssTransition({
  enter: 'slide-enter',
  exit: 'slide-exit',
  appendPosition: true,  // Enables position-specific classes
  collapse: true,
  collapseDuration: 300
});

/* Base slide animations using CSS animations */
.slide-enter {
  animation: slideIn 400ms ease-out;
}

.slide-exit {
  animation: slideOut 200ms ease-in;
}

/* Position-specific entry animations */
.slide-enter--top-right,
.slide-enter--bottom-right {
  animation: slideInFromRight 400ms ease-out;
}

.slide-enter--top-left,
.slide-enter--bottom-left {
  animation: slideInFromLeft 400ms ease-out;
}

.slide-enter--top-center,
.slide-enter--bottom-center {
  animation: slideInFromTop 400ms ease-out;
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromTop {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/**
 * Animates the collapse of a toast element by reducing its height to zero
 * @param node - The HTML element to collapse
 * @param done - Callback function called when animation completes
 * @param duration - Animation duration in milliseconds (default: 300)
 */
function collapseToast(
  node: HTMLElement,
  done: () => void,
  duration?: number
): void;

import { collapseToast } from 'react-toastify';

// Custom collapse implementation
function customCollapseHandler(element: HTMLElement) {
  collapseToast(element, () => {
    console.log('Collapse animation completed');
    // Perform cleanup or additional actions
  }, 250);
}

// Use in custom transition
const CustomTransitionWithCollapse = cssTransition({
  enter: 'custom-enter',
  exit: 'custom-exit',
  collapse: true,  // Uses collapseToast internally
  collapseDuration: 250
});

import React, { useRef } from 'react';
import { collapseToast } from 'react-toastify';

function CustomToastComponent() {
  const toastRef = useRef<HTMLDivElement>(null);

  const handleManualCollapse = () => {
    if (toastRef.current) {
      collapseToast(toastRef.current, () => {
        // Toast has fully collapsed
        console.log('Toast collapsed');
      });
    }
  };

  return (
    <div ref={toastRef} className="custom-toast">
      <p>Custom toast content</p>
      <button onClick={handleManualCollapse}>Collapse</button>
    </div>
  );
}

/**
 * Built-in icon components for different toast types
 */
const Icons: {
  info: React.FC<IconProps>;
  success: React.FC<IconProps>;
  warning: React.FC<IconProps>;
  error: React.FC<IconProps>;
  spinner: React.FC<IconProps>;
};

/**
 * Utility function to resolve the appropriate icon for a toast
 * @param params - Icon resolution parameters
 * @returns React element or null
 */
function getIcon(params: {
  theme: Theme;
  type: TypeOptions;
  isLoading?: boolean;
  icon?: ToastIcon;
}): React.ReactElement | null;

interface IconProps {
  theme: Theme;
  type: TypeOptions;
}

import { Icons, getIcon } from 'react-toastify';

// Use built-in icons directly
function CustomToast() {
  return (
    <div>
      <Icons.success theme="light" type="success" />
      <span>Success message</span>
    </div>
  );
}

// Use icon resolution utility
const resolvedIcon = getIcon({
  theme: 'dark',
  type: 'error',
  isLoading: false
});

// Custom icon in toast options
toast.success("Success!", {
  icon: <Icons.success theme="colored" type="success" />
});

/**
 * Default close button component
 * @param props - Close button props
 * @returns JSX.Element - The close button
 */
function CloseButton(props: CloseButtonProps): JSX.Element;

interface CloseButtonProps {
  closeToast: (e: React.MouseEvent<HTMLElement>) => void;
  type: TypeOptions;
  ariaLabel?: string;
  theme: Theme;
}

import { CloseButton } from 'react-toastify';

// Extend the default close button
function CustomCloseButton(props: CloseButtonProps) {
  return (
    <button
      onClick={props.closeToast}
      className={`custom-close custom-close--${props.type}`}
      aria-label={props.ariaLabel || 'Close notification'}
    >
      ✕
    </button>
  );
}

// Use with ToastContainer
<ToastContainer closeButton={CustomCloseButton} />

// Or use with individual toasts
toast.info("Message", {
  closeButton: CustomCloseButton
});

/**
 * Validates toast options at runtime
 * @param options - Toast options to validate
 * @returns Validated options object
 */
function validateToastOptions<T>(options: ToastOptions<T>): ToastOptions<T>;

/**
 * Checks if a value is a valid toast content type
 * @param content - Content to validate
 * @returns Boolean indicating if content is valid
 */
function isValidToastContent(content: any): boolean;

import { validateToastOptions, isValidToastContent } from 'react-toastify';

function customToastFunction(content: any, options: any) {
  // Validate inputs
  if (!isValidToastContent(content)) {
    throw new Error('Invalid toast content');
  }

  const validatedOptions = validateToastOptions(options || {});
  
  // Proceed with toast creation
  return toast(content, validatedOptions);
}

function createThemedTransition(baseName: string, themes: string[]) {
  return cssTransition({
    enter: `${baseName}-enter`,
    exit: `${baseName}-exit`,
    appendPosition: true
  });
}

// Create themed transitions
const ThemedSlide = createThemedTransition('themed-slide', ['light', 'dark']);

function createChoreographedTransition(phases: Array<{
  className: string;
}>) {
  return cssTransition({
    enter: phases[0].className,
    exit: phases[0].className.replace('enter', 'exit')
  });
}

const ResponsiveSlide = cssTransition({
  enter: 'responsive-slide-enter',
  exit: 'responsive-slide-exit',
  appendPosition: true
});

// CSS with media queries
/*
@media (max-width: 768px) {
  .responsive-slide-enter--top-right {
    transform: translateY(-100%) !important;
  }
}
*/

type ToastTransition = React.FC<ToastTransitionProps>;

interface ToastTransitionProps {
  isIn: boolean;
  done: () => void;
  position: ToastPosition;
  preventExitTransition?: boolean;
  nodeRef: React.RefObject<HTMLElement>;
  children?: React.ReactNode;
}

type ToastIcon = 
  | React.ReactElement 
  | string 
  | number 
  | boolean 
  | ((props: IconProps) => React.ReactElement) 
  | false;