react-toastify - npm Package Compare versions

Comparing version 10.0.6 to 10.0.7-0

addons/use-notification-center/index.d.ts

@@ -1,1 +0,161 @@
-export * from './useNotificationCenter';
+import { ToastItem, Id } from 'react-toastify';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+interface NotificationCenterItem<Data = {}> extends Optional<ToastItem<Data>, 'content' | 'data' | 'status'> {
+    read: boolean;
+    createdAt: number;
+}
+type SortFn<Data> = (l: NotificationCenterItem<Data>, r: NotificationCenterItem<Data>) => number;
+type FilterFn<Data = {}> = (item: NotificationCenterItem<Data>) => boolean;
+interface UseNotificationCenterParams<Data = {}> {
+    /**
+     * initial data to rehydrate the notification center
+     */
+    data?: NotificationCenterItem<Data>[];
+    /**
+     * By default, the notifications are sorted from the newest to the oldest using
+     * the `createdAt` field. Use this to provide your own sort function
+     *
+     * Usage:
+     * ```
+     * // old notifications first
+     * useNotificationCenter({
+     *   sort: ((l, r) => l.createdAt - r.createdAt)
+     * })
+     * ```
+     */
+    sort?: SortFn<Data>;
+    /**
+     * Keep the toast that meets the condition specified in the callback function.
+     *
+     * Usage:
+     * ```
+     * // keep only the toasts when hidden is set to false
+     * useNotificationCenter({
+     *   filter: item => item.data.hidden === false
+     * })
+     * ```
+     */
+    filter?: FilterFn<Data>;
+}
+interface UseNotificationCenter<Data> {
+    /**
+     * Contains all the notifications
+     */
+    notifications: NotificationCenterItem<Data>[];
+    /**
+     * Clear all notifications
+     */
+    clear(): void;
+    /**
+     * Mark all notification as read
+     */
+    markAllAsRead(): void;
+    /**
+     * Mark all notification as read or not.
+     *
+     * Usage:
+     * ```
+     * markAllAsRead(false) // mark all notification as not read
+     *
+     * markAllAsRead(true) // same as calling markAllAsRead()
+     * ```
+     */
+    markAllAsRead(read?: boolean): void;
+    /**
+     * Mark one or more notifications as read.
+     *
+     * Usage:
+     * ```
+     * markAsRead("anId")
+     * markAsRead(["a","list", "of", "id"])
+     * ```
+     */
+    markAsRead(id: Id | Id[]): void;
+    /**
+     * Mark one or more notifications as read.The second parameter let you mark the notification as read or not.
+     *
+     * Usage:
+     * ```
+     * markAsRead("anId", false)
+     * markAsRead(["a","list", "of", "id"], false)
+     *
+     * markAsRead("anId", true) // same as markAsRead("anId")
+     * ```
+     */
+    markAsRead(id: Id | Id[], read?: boolean): void;
+    /**
+     * Remove one or more notifications
+     *
+     * Usage:
+     * ```
+     * remove("anId")
+     * remove(["a","list", "of", "id"])
+     * ```
+     */
+    remove(id: Id | Id[]): void;
+    /**
+     * Push a notification to the notification center.
+     * Returns null when an item with the given id already exists
+     *
+     * Usage:
+     * ```
+     * const id = add({id: "id", content: "test", data: { foo: "hello" } })
+     *
+     * // Return the id of the notification, generate one if none provided
+     * const id = add({ data: {title: "a title", text: "some text"} })
+     * ```
+     */
+    add(item: Partial<NotificationCenterItem<Data>>): Id | null;
+    /**
+     * Update the notification that match the id
+     * Returns null when no matching notification found
+     *
+     * Usage:
+     * ```
+     * const id = update("anId",  {content: "test", data: { foo: "hello" } })
+     *
+     * // It's also possible to update the id
+     * const id = update("anId"m { id:"anotherOne", data: {title: "a title", text: "some text"} })
+     * ```
+     */
+    update(id: Id, item: Partial<NotificationCenterItem<Data>>): Id | null;
+    /**
+     * Retrieve one or more notifications
+     *
+     * Usage:
+     * ```
+     * find("anId")
+     * find(["a","list", "of", "id"])
+     * ```
+     */
+    find(id: Id): NotificationCenterItem<Data> | undefined;
+    /**
+     * Retrieve one or more notifications
+     *
+     * Usage:
+     * ```
+     * find("anId")
+     * find(["a","list", "of", "id"])
+     * ```
+     */
+    find(id: Id[]): NotificationCenterItem<Data>[] | undefined;
+    /**
+     * Retrieve the count for unread notifications
+     */
+    unreadCount: number;
+    /**
+     * Sort notifications using the newly provided function
+     *
+     * Usage:
+     * ```
+     * // old notifications first
+     * sort((l, r) => l.createdAt - r.createdAt)
+     * ```
+     */
+    sort(sort: SortFn<Data>): void;
+}
+declare function useNotificationCenter<Data = {}>(params?: UseNotificationCenterParams<Data>): UseNotificationCenter<Data>;
+declare function decorate<Data>(item: NotificationCenterItem<Data> | Partial<NotificationCenterItem<Data>>): NotificationCenterItem<Data>;
+
+export { type FilterFn, type NotificationCenterItem, type SortFn, type UseNotificationCenter, type UseNotificationCenterParams, decorate, useNotificationCenter };

addons/use-notification-center/index.js

@@ -1,147 +0,3 @@
-var react = require('react');
-var reactToastify = require('react-toastify');
-
-function useNotificationCenter(params) {
-  if (params === void 0) {
-    params = {};
-  }
-
-  const sortFn = react.useRef(params.sort || defaultSort);
-  const filterFn = react.useRef(params.filter || null);
-  const [notifications, setNotifications] = react.useState(() => {
-    if (params.data) {
-      return filterFn.current ? params.data.filter(filterFn.current).sort(sortFn.current) : [...params.data].sort(sortFn.current);
-    }
-
-    return [];
-  });
-  react.useEffect(() => {
-    return reactToastify.toast.onChange(item => {
-      if (item.status === 'added' || item.status === 'updated') {
-        const newItem = decorate(item);
-        if (filterFn.current && !filterFn.current(newItem)) return;
-        setNotifications(prev => {
-          let nextState = [];
-          const updateIdx = prev.findIndex(v => v.id === newItem.id);
-
-          if (updateIdx !== -1) {
-            nextState = prev.slice();
-            Object.assign(nextState[updateIdx], newItem, {
-              createdAt: Date.now()
-            });
-          } else if (prev.length === 0) {
-            nextState = [newItem];
-          } else {
-            nextState = [newItem, ...prev];
-          }
-
-          return nextState.sort(sortFn.current);
-        });
-      }
-    });
-  }, []);
-
-  const remove = id => {
-    setNotifications(prev => prev.filter(Array.isArray(id) ? v => !id.includes(v.id) : v => v.id !== id));
-  };
-
-  const clear = () => {
-    setNotifications([]);
-  };
-
-  const markAllAsRead = function (read) {
-    if (read === void 0) {
-      read = true;
-    }
-
-    setNotifications(prev => prev.map(v => {
-      v.read = read;
-      return v;
-    }));
-  };
-
-  const markAsRead = function (id, read) {
-    if (read === void 0) {
-      read = true;
-    }
-
-    let map = v => {
-      if (v.id === id) v.read = read;
-      return v;
-    };
-
-    if (Array.isArray(id)) {
-      map = v => {
-        if (id.includes(v.id)) v.read = read;
-        return v;
-      };
-    }
-
-    setNotifications(prev => prev.map(map));
-  };
-
-  const find = id => {
-    return Array.isArray(id) ? notifications.filter(v => id.includes(v.id)) : notifications.find(v => v.id === id);
-  };
-
-  const add = item => {
-    if (notifications.find(v => v.id === item.id)) return null;
-    const newItem = decorate(item);
-    setNotifications(prev => [...prev, newItem].sort(sortFn.current));
-    return newItem.id;
-  };
-
-  const update = (id, item) => {
-    const index = notifications.findIndex(v => v.id === id);
-
-    if (index !== -1) {
-      setNotifications(prev => {
-        const nextState = [...prev];
-        Object.assign(nextState[index], item, {
-          createdAt: item.createdAt || Date.now()
-        });
-        return nextState.sort(sortFn.current);
-      });
-      return item.id;
-    }
-
-    return null;
-  };
-
-  const sort = compareFn => {
-    sortFn.current = compareFn;
-    setNotifications(prev => prev.slice().sort(compareFn));
-  };
-
-  return {
-    notifications,
-    clear,
-    markAllAsRead,
-    markAsRead,
-    add,
-    update,
-    remove,
-    // @ts-ignore fixme: overloading issue
-    find,
-    sort,
-
-    get unreadCount() {
-      return notifications.reduce((prev, cur) => !cur.read ? prev + 1 : prev, 0);
-    }
-
-  };
-}
-function decorate(item) {
-  if (item.id == null) item.id = Date.now().toString(36).substring(2, 9);
-  if (!item.createdAt) item.createdAt = Date.now();
-  if (item.read == null) item.read = false;
-  return item;
-} // newest to oldest
-
-function defaultSort(l, r) {
-  return r.createdAt - l.createdAt;
-}
-
-exports.decorate = decorate;
-exports.useNotificationCenter = useNotificationCenter;
-//# sourceMappingURL=index.js.map
+"use client";
+var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var A=(a,i)=>{for(var d in i)u(a,d,{get:i[d],enumerable:!0})},x=(a,i,d,c)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of C(i))!N.call(a,o)&&o!==d&&u(a,o,{get:()=>i[o],enumerable:!(c=m(i,o))||c.enumerable});return a};var p=a=>x(u({},"__esModule",{value:!0}),a);var y={};A(y,{decorate:()=>l,useNotificationCenter:()=>b});module.exports=p(y);var s=require("react"),I=require("react-toastify");function b(a={}){let i=(0,s.useRef)(a.sort||k),d=(0,s.useRef)(a.filter||null),[c,o]=(0,s.useState)(()=>a.data?d.current?a.data.filter(d.current).sort(i.current):[...a.data].sort(i.current):[]);return(0,s.useEffect)(()=>I.toast.onChange(t=>{if(t.status==="added"||t.status==="updated"){let e=l(t);if(d.current&&!d.current(e))return;o(r=>{let n=[],f=r.findIndex(D=>D.id===e.id);return f!==-1?(n=r.slice(),Object.assign(n[f],e,{createdAt:Date.now()})):r.length===0?n=[e]:n=[e,...r],n.sort(i.current)})}}),[]),{notifications:c,clear:()=>{o([])},markAllAsRead:(t=!0)=>{o(e=>e.map(r=>(r.read=t,r)))},markAsRead:(t,e=!0)=>{let r=n=>(n.id===t&&(n.read=e),n);Array.isArray(t)&&(r=n=>(t.includes(n.id)&&(n.read=e),n)),o(n=>n.map(r))},add:t=>{if(c.find(r=>r.id===t.id))return null;let e=l(t);return o(r=>[...r,e].sort(i.current)),e.id},update:(t,e)=>{let r=c.findIndex(n=>n.id===t);return r!==-1?(o(n=>{let f=[...n];return Object.assign(f[r],e,{createdAt:e.createdAt||Date.now()}),f.sort(i.current)}),e.id):null},remove:t=>{o(e=>e.filter(Array.isArray(t)?r=>!t.includes(r.id):r=>r.id!==t))},find:t=>Array.isArray(t)?c.filter(e=>t.includes(e.id)):c.find(e=>e.id===t),sort:t=>{i.current=t,o(e=>e.slice().sort(t))},get unreadCount(){return c.reduce((t,e)=>e.read?t:t+1,0)}}}function l(a){return a.id==null&&(a.id=Date.now().toString(36).substring(2,9)),a.createdAt||(a.createdAt=Date.now()),a.read==null&&(a.read=!1),a}function k(a,i){return i.createdAt-a.createdAt}0&&(module.exports={decorate,useNotificationCenter});
+//# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -1,7 +0,421 @@
-export { useToastContainer, useToast } from './hooks';
-export { cssTransition, collapseToast } from './utils';
-export { ToastContainer, Bounce, Flip, Slide, Zoom, Icons } from './components';
-export type { IconProps, CloseButton } from './components';
-export type { ToastPromiseParams } from './core';
-export { toast } from './core';
-export type { TypeOptions, Theme, ToastPosition, ToastContentProps, ToastContent, ToastTransition, ToastClassName, ClearWaitingQueueParams, DraggableDirection, ToastOptions, UpdateOptions, ToastContainerProps, ToastTransitionProps, Id, ToastItem } from './types';
+import * as React from 'react';
+import React__default, { DOMAttributes } from 'react';
+
+interface CloseButtonProps {
+    closeToast: (removedByUser: boolean) => void;
+    type: TypeOptions;
+    ariaLabel?: string;
+    theme: Theme;
+}
+declare function CloseButton({ closeToast, theme, ariaLabel }: CloseButtonProps): React__default.JSX.Element;
+
+declare function ToastContainer(props: ToastContainerProps): React__default.JSX.Element;
+
+declare const Bounce: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
+declare const Slide: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
+declare const Zoom: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
+declare const Flip: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
+
+/**
+ * Used when providing custom icon
+ */
+interface IconProps {
+    theme: Theme;
+    type: TypeOptions;
+    isLoading?: boolean;
+}
+type BuiltInIconProps = React__default.SVGProps<SVGSVGElement> & IconProps;
+declare function Warning(props: BuiltInIconProps): React__default.JSX.Element;
+declare function Info(props: BuiltInIconProps): React__default.JSX.Element;
+declare function Success(props: BuiltInIconProps): React__default.JSX.Element;
+declare function Error(props: BuiltInIconProps): React__default.JSX.Element;
+declare function Spinner(): React__default.JSX.Element;
+declare const Icons: {
+    info: typeof Info;
+    warning: typeof Warning;
+    success: typeof Success;
+    error: typeof Error;
+    spinner: typeof Spinner;
+};
+
+type Nullable<T> = {
+    [P in keyof T]: T[P] | null;
+};
+type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';
+type Theme = 'light' | 'dark' | 'colored' | (string & {});
+type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+interface ToastContentProps<Data = unknown> {
+    closeToast: () => void;
+    toastProps: ToastProps;
+    data: Data;
+}
+type ToastContent<T = unknown> = React__default.ReactNode | ((props: ToastContentProps<T>) => React__default.ReactNode);
+type ToastIcon = false | ((props: IconProps) => React__default.ReactNode) | React__default.ReactElement<IconProps>;
+type Id = number | string;
+type ToastTransition = React__default.FC<ToastTransitionProps> | React__default.ComponentClass<ToastTransitionProps>;
+/**
+ * ClassName for the elements - can take a function to build a classname or a raw string that is cx'ed to defaults
+ */
+type ToastClassName = ((context?: {
+    type?: TypeOptions;
+    defaultClassName?: string;
+    position?: ToastPosition;
+    rtl?: boolean;
+}) => string) | string;
+interface ClearWaitingQueueParams {
+    containerId?: Id;
+}
+type DraggableDirection = 'x' | 'y';
+interface CommonOptions {
+    /**
+     * Pause the timer when the mouse hover the toast.
+     * `Default: true`
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Pause the toast when the window loses focus.
+     * `Default: true`
+     */
+    pauseOnFocusLoss?: boolean;
+    /**
+     * Remove the toast when clicked.
+     * `Default: false`
+     */
+    closeOnClick?: boolean;
+    /**
+     * Set the delay in ms to close the toast automatically.
+     * Use `false` to prevent the toast from closing.
+     * `Default: 5000`
+     */
+    autoClose?: number | false;
+    /**
+     * Set the default position to use.
+     * `One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'`
+     * `Default: 'top-right'`
+     */
+    position?: ToastPosition;
+    /**
+     * Pass a custom close button.
+     * To remove the close button pass `false`
+     */
+    closeButton?: boolean | ((props: CloseButtonProps) => React__default.ReactNode) | React__default.ReactElement<CloseButtonProps>;
+    /**
+     * An optional css class to set for the progress bar.
+     */
+    progressClassName?: ToastClassName;
+    /**
+     * An optional style to set for the progress bar.
+     */
+    progressStyle?: React__default.CSSProperties;
+    /**
+     * An optional css class to set for the toast content.
+     */
+    bodyClassName?: ToastClassName;
+    /**
+     * An optional inline style to apply for the toast content.
+     */
+    bodyStyle?: React__default.CSSProperties;
+    /**
+     * Hide or show the progress bar.
+     * `Default: false`
+     */
+    hideProgressBar?: boolean;
+    /**
+     * Pass a custom transition see https://fkhadra.github.io/react-toastify/custom-animation/
+     */
+    transition?: ToastTransition;
+    /**
+     * Allow toast to be draggable
+     * `Default: 'touch'`
+     */
+    draggable?: boolean | 'mouse' | 'touch';
+    /**
+     * The percentage of the toast's width it takes for a drag to dismiss a toast
+     * `Default: 80`
+     */
+    draggablePercent?: number;
+    /**
+     * Specify in which direction should you swipe to dismiss the toast
+     * `Default: "x"`
+     */
+    draggableDirection?: DraggableDirection;
+    /**
+     * Define the ARIA role for the toast
+     * `Default: alert`
+     *  https://www.w3.org/WAI/PF/aria/roles
+     */
+    role?: string;
+    /**
+     * Set id to handle multiple container
+     */
+    containerId?: Id;
+    /**
+     * Fired when clicking inside toaster
+     */
+    onClick?: (event: React__default.MouseEvent) => void;
+    /**
+     * Support right to left display.
+     * `Default: false`
+     */
+    rtl?: boolean;
+    /**
+     * Used to display a custom icon. Set it to `false` to prevent
+     * the icons from being displayed
+     */
+    icon?: ToastIcon;
+    /**
+     * Theme to use.
+     * `One of: 'light', 'dark', 'colored'`
+     * `Default: 'light'`
+     */
+    theme?: Theme;
+}
+interface ToastOptions<Data = unknown> extends CommonOptions {
+    /**
+     * An optional css class to set.
+     */
+    className?: ToastClassName;
+    /**
+     * Called when toast is mounted.
+     */
+    onOpen?: () => void;
+    /**
+     * Called when toast is unmounted.
+     */
+    onClose?: (removedByUser: true | undefined) => void;
+    /**
+     * An optional inline style to apply.
+     */
+    style?: React__default.CSSProperties;
+    /**
+     * Set the toast type.
+     * `One of: 'info', 'success', 'warning', 'error', 'default'`
+     */
+    type?: TypeOptions;
+    /**
+     * Set a custom `toastId`
+     */
+    toastId?: Id;
+    /**
+     * Used during update
+     */
+    updateId?: Id;
+    /**
+     * Set the percentage for the controlled progress bar. `Value must be between 0 and 1.`
+     */
+    progress?: number | string;
+    /**
+     * Add a delay in ms before the toast appear.
+     */
+    delay?: number;
+    isLoading?: boolean;
+    data?: Data;
+}
+interface UpdateOptions<T = unknown> extends Nullable<ToastOptions<T>> {
+    /**
+     * Used to update a toast.
+     * Pass any valid ReactNode(string, number, component)
+     */
+    render?: ToastContent<T>;
+}
+interface ToastContainerProps extends CommonOptions {
+    /**
+     * An optional css class to set.
+     */
+    className?: ToastClassName;
+    /**
+     * Will stack the toast with the newest on the top.
+     */
+    stacked?: boolean;
+    /**
+     * Whether or not to display the newest toast on top.
+     * `Default: false`
+     */
+    newestOnTop?: boolean;
+    /**
+     * An optional inline style to apply.
+     */
+    style?: React__default.CSSProperties;
+    /**
+     * An optional inline style to apply for the toast.
+     */
+    toastStyle?: React__default.CSSProperties;
+    /**
+     * An optional css class for the toast.
+     */
+    toastClassName?: ToastClassName;
+    /**
+     * Limit the number of toast displayed at the same time
+     */
+    limit?: number;
+}
+interface ToastTransitionProps {
+    isIn: boolean;
+    done: () => void;
+    position: ToastPosition | string;
+    preventExitTransition: boolean;
+    nodeRef: React__default.RefObject<HTMLElement>;
+    children?: React__default.ReactNode;
+    playToast(): void;
+}
+/**
+ * @INTERNAL
+ */
+interface ToastProps extends ToastOptions {
+    isIn: boolean;
+    staleId?: Id;
+    toastId: Id;
+    key: Id;
+    transition: ToastTransition;
+    closeToast: (removedByUser?: boolean) => void;
+    position: ToastPosition;
+    children?: ToastContent;
+    draggablePercent: number;
+    draggableDirection?: DraggableDirection;
+    progressClassName?: ToastClassName;
+    className?: ToastClassName;
+    bodyClassName?: ToastClassName;
+    deleteToast: () => void;
+    theme: Theme;
+    type: TypeOptions;
+    collapseAll: () => void;
+    stacked?: boolean;
+}
+/**
+ * @INTERNAL
+ */
+interface Toast {
+    content: ToastContent;
+    props: ToastProps;
+    toggle?: (v: boolean) => void;
+    removedByUser?: true | undefined;
+    isActive: boolean;
+    staleId?: Id;
+}
+type ToastItemStatus = 'added' | 'removed' | 'updated';
+interface ToastItem<Data = {}> {
+    content: ToastContent<Data>;
+    id: Id;
+    theme?: Theme;
+    type?: TypeOptions;
+    isLoading?: boolean;
+    containerId?: Id;
+    data: Data;
+    icon?: ToastIcon;
+    status: ToastItemStatus;
+    removedByUser?: true;
+}
+type OnChangeCallback = (toast: ToastItem) => void;
+type IdOpts = {
+    id?: Id;
+    containerId?: Id;
+};
+type ClearWaitingQueueFunc = typeof clearWaitingQueue;
+
+declare function isToastActive(id: Id, containerId?: Id): boolean;
+declare const clearWaitingQueue: (p?: ClearWaitingQueueParams) => void;
+
+declare function useToastContainer(props: ToastContainerProps): {
+    getToastToRender: <T>(cb: (position: ToastPosition, toastList: Toast[]) => T) => T[];
+    isToastActive: typeof isToastActive;
+    count: number;
+};
+
+declare function useToast(props: ToastProps): {
+    playToast: () => void;
+    pauseToast: () => void;
+    isRunning: boolean;
+    preventExitTransition: boolean;
+    toastRef: React.RefObject<HTMLDivElement>;
+    eventHandlers: DOMAttributes<HTMLElement>;
+};
+
+declare const enum Default {
+    COLLAPSE_DURATION = 300,
+    DEBOUNCE_DURATION = 50,
+    CSS_NAMESPACE = "Toastify",
+    DRAGGABLE_PERCENT = 80,
+    CONTAINER_ID = 1
+}
+
+interface CSSTransitionProps {
+    /**
+     * Css class to apply when toast enter
+     */
+    enter: string;
+    /**
+     * Css class to apply when toast leave
+     */
+    exit: string;
+    /**
+     * Append current toast position to the classname.
+     * If multiple classes are provided, only the last one will get the position
+     * For instance `myclass--top-center`...
+     * `Default: false`
+     */
+    appendPosition?: boolean;
+    /**
+     * Collapse toast smoothly when exit animation end
+     * `Default: true`
+     */
+    collapse?: boolean;
+    /**
+     * Collapse transition duration
+     * `Default: 300`
+     */
+    collapseDuration?: number;
+}
+/**
+ * Css animation that just work.
+ * You could use animate.css for instance
+ *
+ *
+ * ```
+ * cssTransition({
+ *   enter: "animate__animated animate__bounceIn",
+ *   exit: "animate__animated animate__bounceOut"
+ * })
+ * ```
+ *
+ */
+declare function cssTransition({ enter, exit, appendPosition, collapse, collapseDuration }: CSSTransitionProps): ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React__default.JSX.Element;
+
+/**
+ * Used to collapse toast after exit animation
+ */
+declare function collapseToast(node: HTMLElement, done: () => void, duration?: Default): void;
+
+declare function toast<TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>): Id;
+declare namespace toast {
+    var loading: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
+    var promise: typeof handlePromise;
+    var success: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
+    var info: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
+    var error: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
+    var warning: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
+    var warn: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
+    var dark: (content: ToastContent, options?: ToastOptions) => Id;
+    var dismiss: {
+        (params: RemoveParams): void;
+        (params?: Id): void;
+    };
+    var clearWaitingQueue: (p?: ClearWaitingQueueParams) => void;
+    var isActive: typeof isToastActive;
+    var update: <TData = unknown>(toastId: Id, options?: UpdateOptions<TData>) => void;
+    var done: (id: Id) => void;
+    var onChange: (cb: OnChangeCallback) => () => void;
+    var play: (opts?: IdOpts) => void;
+    var pause: (opts?: IdOpts) => void;
+}
+interface ToastPromiseParams<TData = unknown, TError = unknown, TPending = unknown> {
+    pending?: string | UpdateOptions<TPending>;
+    success?: string | UpdateOptions<TData>;
+    error?: string | UpdateOptions<TError>;
+}
+declare function handlePromise<TData = unknown, TError = unknown, TPending = unknown>(promise: Promise<TData> | (() => Promise<TData>), { pending, error, success }: ToastPromiseParams<TData, TError, TPending>, options?: ToastOptions<TData>): Promise<TData>;
+interface RemoveParams {
+    id?: Id;
+    containerId: Id;
+}
+
+export { Bounce, type ClearWaitingQueueFunc, type ClearWaitingQueueParams, CloseButton, type CloseButtonProps, type DraggableDirection, Flip, type IconProps, Icons, type Id, type OnChangeCallback, Slide, type Theme, type ToastClassName, ToastContainer, type ToastContainerProps, type ToastContent, type ToastContentProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastPromiseParams, type ToastTransition, type ToastTransitionProps, type TypeOptions, type UpdateOptions, Zoom, collapseToast, cssTransition, toast, useToast, useToastContainer };

package.json

 {
-  "version": "10.0.6",
+  "version": "10.0.7-0",
   "license": "MIT",
-  "typings": "dist/index.d.ts",
   "description": "React notification made easy",
@@ -13,40 +12,25 @@ "keywords": [
     "push",
-    "alert"
+    "alert",
+    "snackbar",
+    "message"
   ],
   "files": [
     "dist",
-    "addons",
-    "scss"
+    "addons"
   ],
-  "sideEffects": true,
   "scripts": {
-    "start": "cd playground && yarn dev",
+    "prepare": "lefthook install",
+    "setup": "pnpm link .",
+    "start": "cd playground && pnpm dev",
     "test": "cypress open --component",
     "test:run": "cypress run --component -b chrome",
-    "clean": "rimraf dist && rimraf addons",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "prettier": "prettier --write src",
-    "prettier-scss": "prettier --write scss",
-    "sass": "sass scss/main.scss dist/ReactToastify.css",
-    "sass-minimal": "sass scss/minimal.scss dist/ReactToastify.minimal.css",
-    "postsass": "postcss dist/ReactToastify.css --use autoprefixer -m -o dist/ReactToastify.css",
-    "postsass-minimal": "cssnano dist/ReactToastify.minimal.css dist/ReactToastify.minimal.css --no-zindex --no-reduceIdents",
-    "style": "npm run sass && npm run sass-minimal && cssnano dist/ReactToastify.css dist/ReactToastify.min.css --no-zindex --no-reduceIdents && npm run style-injector",
-    "style-injector": "style2js --out-dir dist dist/ReactToastify.min.css",
-    "build": "npm run clean && npm run build:core && npm run pack-and-extract && npm run build:addons && npm run style && husky install",
-    "build:core": "microbundle --jsx React.createElement --jsxFragment React.Fragment --tsconfig tsconfig.build.json",
-    "build:addons": "node build-addons.mjs",
-    "postbuild": "./prepend-use-client.sh",
-    "setup": "npm run clean && npm run build && npm run pack-and-extract",
-    "setup:core": "npm run clean && npm run build:core && npm run pack-and-extract",
-    "pack-and-extract": "yarn pack -f react-toastify.tgz && npm run rm-pkg && npm run extract-pkg",
-    "rm-pkg": "rimraf node_modules/react-toastify && mkdir -p node_modules/react-toastify",
-    "extract-pkg": "tar xzvf react-toastify.tgz -C node_modules/react-toastify --strip-components 1 && rimraf react-toastify.tgz"
+    "build": "tsup && cp src/style.css dist/ReactToastify.css"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "prettier": {
-    "printWidth": 80,
+    "printWidth": 120,
     "semi": true,
@@ -62,3 +46,3 @@ "singleQuote": true,
   },
-  "author": "Fadi Khadra  <[e-mail]> (https://fkhadra.github.io)",
+  "author": "Fadi Khadra <[e-mail]> (https://fkhadra.github.io)",
   "bugs": {
@@ -69,43 +53,29 @@ "url": "https://github.com/fkhadra/react-toastify/issues"
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "^2.2.4",
-    "@cypress/code-coverage": "^3.12.18",
+    "@4tw/cypress-drag-drop": "^2.2.5",
+    "@cypress/code-coverage": "^3.13.8",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@testing-library/cypress": "^10.0.1",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "coveralls": "^3.0.9",
-    "cssnano": "^6.0.3",
-    "cssnano-cli": "^1.0.5",
-    "cypress": "^13.6.2",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "husky": "^8.0.3",
-    "microbundle": "^0.15.1",
-    "postcss": "^8.4.33",
-    "postcss-cli": "^11.0.0",
-    "prettier": "3.2.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rimraf": "^5.0.0",
-    "sass": "^1.69.7",
-    "style2js": "^1.0.3",
-    "ts-jest": "^29.1.0",
-    "tslib": "^2.5.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vite-plugin-istanbul": "^5.0.0"
+    "@testing-library/cypress": "^10.0.2",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "coveralls": "^3.1.1",
+    "cypress": "^13.16.0",
+    "lefthook": "^1.8.4",
+    "lint-staged": "^15.2.10",
+    "postcss": "^8.4.49",
+    "prettier": "3.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-istanbul": "^6.0.2"
   },
   "dependencies": {
-    "clsx": "^2.1.0"
+    "clsx": "^2.1.1"
   },
-  "main": "dist/react-toastify.js",
-  "module": "dist/react-toastify.esm.mjs",
-  "umd:main": "dist/react-toastify.umd.js",
-  "unpkg": "dist/react-toastify.umd.js",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/index.mjs",
   "source": "src/index.ts",
@@ -115,32 +85,22 @@ "exports": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/react-toastify.js",
-      "import": "./dist/react-toastify.esm.mjs",
-      "umd": "./dist/react-toastify.umd.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "./dist/ReactToastify.min.css": "./dist/ReactToastify.min.css",
     "./dist/ReactToastify.css": "./dist/ReactToastify.css",
-    "./dist/ReactToastify.css.map": "./dist/ReactToastify.css.map",
-    "./dist/ReactToastify.minimal.css": "./dist/ReactToastify.minimal.css",
-    "./ReactToastify.min.css": "./dist/ReactToastify.min.css",
     "./ReactToastify.css": "./dist/ReactToastify.css",
-    "./ReactToastify.css.map": "./dist/ReactToastify.css.map",
-    "./ReactToastify.minimal.css": "./dist/ReactToastify.minimal.css",
-    "./dist/inject-style": {
-      "types": "./dist/inject-style.d.ts",
-      "require": "./dist/inject-style.js",
-      "import": "./dist/inject-style.esm.mjs"
-    },
-    "./inject-style": {
-      "types": "./dist/inject-style.d.ts",
-      "require": "./dist/inject-style.js",
-      "import": "./dist/inject-style.esm.mjs"
-    },
     "./package.json": "./package.json",
-    "./scss/": "./scss/",
     "./addons/use-notification-center": {
       "types": "./addons/use-notification-center/index.d.ts",
-      "require": "./addons/use-notification-center/index.js",
-      "import": "./addons/use-notification-center/index.esm.mjs"
+      "import": "./addons/use-notification-center/index.mjs",
+      "require": "./addons/use-notification-center/index.js"
+    },
+    "./notification-center": {
+      "types": "./addons/use-notification-center/index.d.ts",
+      "import": "./addons/use-notification-center/index.mjs",
+      "require": "./addons/use-notification-center/index.js"
     }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
   }
 }

README.md

@@ -52,3 +52,2 @@ # React-Toastify
   import { ToastContainer, toast } from 'react-toastify';
-  import 'react-toastify/dist/ReactToastify.css';
   
@@ -55,0 +54,0 @@ function App(){

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

20

decreased by-39.39%

Worsened metrics

Total package byte prevSize

324352

decreased by-20.33%

Number of package files

16

decreased by-73.77%

Lines of code

1524

decreased by-23.26%

Number of low quality alerts

3

increased by50%

Number of lines in readme file

118

decreased by-0.84%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedclsx@^2.1.1