react-hot-toast - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0-beta

dist/index.d.ts

@@ -1,23 +0,120 @@
-import { toast } from './core/toast';
-import { ToastOptions as _ToastOptions, ToastPosition as _ToastPosition, Toast as _Toast, Renderable as _Renderable, ValueOrFunction as _ValueOrFunction, ToasterProps as _ToasterProps, DefaultToastOptions as _DefaultToastOptions, IconTheme as _IconTheme, ToastType as _ToastType, ValueFunction as _ValueFunction } from './core/types';
-export { useToaster } from './core/use-toaster';
-export { ToastBar } from './components/toast-bar';
-export { ToastIcon } from './components/toast-icon';
-export { Toaster } from './components/toaster';
-export { useStore as useToasterStore } from './core/store';
-export { CheckmarkIcon } from './components/checkmark';
-export { ErrorIcon } from './components/error';
-export { LoaderIcon } from './components/loader';
-export { resolveValue } from './core/types';
-export declare type ToastOptions = _ToastOptions;
-export declare type ToastPosition = _ToastPosition;
-export declare type Toast = _Toast;
-export declare type Renderable = _Renderable;
-export declare type ValueOrFunction<TValue, TArg> = _ValueOrFunction<TValue, TArg>;
-export declare type ToasterProps = _ToasterProps;
-export declare type DefaultToastOptions = _DefaultToastOptions;
-export declare type IconTheme = _IconTheme;
-export declare type ToastType = _ToastType;
-export declare type ValueFunction<TArg, TValue> = _ValueFunction<TArg, TValue>;
-export { toast };
-export default toast;
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import * as goober from 'goober';
+
+declare type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
+declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+declare type Renderable = JSX.Element | string | null;
+interface IconTheme {
+    primary: string;
+    secondary: string;
+}
+declare type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
+declare type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
+declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
+interface Toast {
+    type: ToastType;
+    id: string;
+    message: ValueOrFunction<Renderable, Toast>;
+    icon?: Renderable;
+    duration?: number;
+    pauseDuration: number;
+    position?: ToastPosition;
+    ariaProps: {
+        role: 'status' | 'alert';
+        'aria-live': 'assertive' | 'off' | 'polite';
+    };
+    style?: CSSProperties;
+    className?: string;
+    iconTheme?: IconTheme;
+    createdAt: number;
+    visible: boolean;
+    height?: number;
+}
+declare type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme'>>;
+declare type DefaultToastOptions = ToastOptions & {
+    [key in ToastType]?: ToastOptions;
+};
+interface ToasterProps {
+    position?: ToastPosition;
+    toastOptions?: DefaultToastOptions;
+    reverseOrder?: boolean;
+    gutter?: number;
+    containerStyle?: React.CSSProperties;
+    containerClassName?: string;
+    children?: (toast: Toast) => JSX.Element;
+}
+
+declare type Message = ValueOrFunction<Renderable, Toast>;
+declare type ToastHandler = (message: Message, options?: ToastOptions) => string;
+declare const toast: {
+    (message: Message, opts?: ToastOptions): string;
+    error: ToastHandler;
+    success: ToastHandler;
+    loading: ToastHandler;
+    custom: ToastHandler;
+    dismiss(toastId?: string): void;
+    remove(toastId?: string): void;
+    promise<T>(promise: Promise<T>, msgs: {
+        loading: Renderable;
+        success: ValueOrFunction<Renderable, T>;
+        error: ValueOrFunction<Renderable, any>;
+    }, opts?: DefaultToastOptions): Promise<T>;
+};
+
+declare const useToaster: (toastOptions?: DefaultToastOptions) => {
+    toasts: Toast[];
+    handlers: {
+        startPause: () => void;
+        endPause: () => void;
+        updateHeight: (toastId: string, height: number) => void;
+        calculateOffset: (toast: Toast, opts?: {
+            reverseOrder?: boolean;
+            gutter?: number;
+            defaultPosition?: ToastPosition;
+        }) => number;
+    };
+};
+
+interface State {
+    toasts: Toast[];
+    pausedAt: number | undefined;
+}
+declare const useStore: (toastOptions?: DefaultToastOptions) => State;
+
+interface ToastBarProps {
+    toast: Toast;
+    position?: ToastPosition;
+    style?: react.CSSProperties;
+    children?: (components: {
+        icon: Renderable;
+        message: Renderable;
+    }) => Renderable;
+}
+declare const ToastBar: react.FC<ToastBarProps>;
+
+interface ErrorTheme {
+    primary?: string;
+    secondary?: string;
+}
+declare const ErrorIcon: goober.StyledVNode<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & goober.DefaultTheme & ErrorTheme, never>>;
+
+interface LoaderTheme {
+    primary?: string;
+    secondary?: string;
+}
+declare const LoaderIcon: goober.StyledVNode<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & goober.DefaultTheme & LoaderTheme, never>>;
+
+interface CheckmarkTheme {
+    primary?: string;
+    secondary?: string;
+}
+declare const CheckmarkIcon: goober.StyledVNode<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & goober.DefaultTheme & CheckmarkTheme, never>>;
+
+declare const ToastIcon: react.FC<{
+    toast: Toast;
+}>;
+
+declare const Toaster: react.FC<ToasterProps>;
+
+export { CheckmarkIcon, DefaultToastOptions, ErrorIcon, IconTheme, LoaderIcon, Renderable, Toast, ToastBar, ToastIcon, ToastOptions, ToastPosition, ToastType, Toaster, ToasterProps, ValueFunction, ValueOrFunction, toast as default, resolveValue, toast, useToaster, useStore as useToasterStore };

dist/index.js

@@ -0,8 +1,178 @@
+"use strict";var q=Object.create;var O=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var te=(e,t)=>{for(var o in t)O(e,o,{get:t[o],enumerable:!0})},j=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of K(t))!ee.call(e,r)&&r!==o&&O(e,r,{get:()=>t[r],enumerable:!(s=G(t,r))||s.enumerable});return e};var N=(e,t,o)=>(o=e!=null?q(Z(e)):{},j(t||!e||!e.__esModule?O(o,"default",{value:e,enumerable:!0}):o,e)),oe=e=>j(O({},"__esModule",{value:!0}),e);var Ie={};te(Ie,{CheckmarkIcon:()=>U,ErrorIcon:()=>M,LoaderIcon:()=>F,ToastBar:()=>L,ToastIcon:()=>$,Toaster:()=>Y,default:()=>De,resolveValue:()=>m,toast:()=>n,useToaster:()=>w,useToasterStore:()=>V});module.exports=oe(Ie);var re=e=>typeof e=="function",m=(e,t)=>re(e)?e(t):e;var Q=(()=>{let e=0;return()=>(++e).toString()})(),J=e=>t=>{t&&setTimeout(()=>{let o=t.getBoundingClientRect();e(o)})},E=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var k=require("react"),ae=20;var v=new Map,X=e=>{if(v.has(e))return;let t=setTimeout(()=>{v.delete(e),u({type:4,toastId:e})},1e3);v.set(e,t)},se=e=>{let t=v.get(e);t&&clearTimeout(t)},H=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,ae)};case 1:return t.toast.id&&se(t.toast.id),{...e,toasts:e.toasts.map(a=>a.id===t.toast.id?{...a,...t.toast}:a)};case 2:let{toast:o}=t;return e.toasts.find(a=>a.id===o.id)?H(e,{type:1,toast:o}):H(e,{type:0,toast:o});case 3:let{toastId:s}=t;return s?X(s):e.toasts.forEach(a=>{X(a.id)}),{...e,toasts:e.toasts.map(a=>a.id===s||s===void 0?{...a,visible:!1}:a)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(a=>a.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let r=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(a=>({...a,pauseDuration:a.pauseDuration+r}))}}},D=[],I={toasts:[],pausedAt:void 0},u=e=>{I=H(I,e),D.forEach(t=>{t(I)})},ie={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},V=(e={})=>{let[t,o]=(0,k.useState)(I);(0,k.useEffect)(()=>(D.push(o),()=>{let r=D.indexOf(o);r>-1&&D.splice(r,1)}),[t]);let s=t.toasts.map(r=>{var a,i;return{...e,...e[r.type],...r,duration:r.duration||((a=e[r.type])==null?void 0:a.duration)||(e==null?void 0:e.duration)||ie[r.type],style:{...e.style,...(i=e[r.type])==null?void 0:i.style,...r.style}}});return{...t,toasts:s}};var ce=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||Q()}),b=e=>(t,o)=>{let s=ce(t,e,o);return u({type:2,toast:s}),s.id},n=(e,t)=>b("blank")(e,t);n.error=b("error");n.success=b("success");n.loading=b("loading");n.custom=b("custom");n.dismiss=e=>{u({type:3,toastId:e})};n.remove=e=>u({type:4,toastId:e});n.promise=(e,t,o)=>{let s=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return e.then(r=>(n.success(m(t.success,r),{id:s,...o,...o==null?void 0:o.success}),r)).catch(r=>{n.error(m(t.error,r),{id:s,...o,...o==null?void 0:o.error})}),e};var _=require("react");var w=e=>{let{toasts:t,pausedAt:o}=V(e);(0,_.useEffect)(()=>{if(o)return;let r=Date.now(),a=t.map(i=>{if(i.duration===1/0)return;let T=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(T<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),T)});return()=>{a.forEach(i=>i&&clearTimeout(i))}},[t,o]);let s=(0,_.useMemo)(()=>({startPause:()=>{u({type:5,time:Date.now()})},endPause:()=>{o&&u({type:6,time:Date.now()})},updateHeight:(r,a)=>u({type:1,toast:{id:r,height:a}}),calculateOffset:(r,a)=>{let{reverseOrder:i=!1,gutter:T=8,defaultPosition:l}=a||{},c=t.filter(p=>(p.position||l)===(r.position||l)&&p.height),P=c.findIndex(p=>p.id===r.id),R=c.filter((p,h)=>h<P&&p.visible).length;return c.filter(p=>p.visible).slice(...i?[R+1]:[0,R]).reduce((p,h)=>p+(h.height||0)+T,0)}}),[t,o]);return{toasts:t,handlers:s}};var d=N(require("react")),x=require("goober");var f=N(require("react")),g=require("goober");var y=require("goober"),pe=y.keyframes`
+from {
+  transform: scale(0) rotate(45deg);
+	opacity: 0;
+}
+to {
+ transform: scale(1) rotate(45deg);
+  opacity: 1;
+}`,de=y.keyframes`
+from {
+  transform: scale(0);
+  opacity: 0;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`,me=y.keyframes`
+from {
+  transform: scale(0) rotate(90deg);
+	opacity: 0;
+}
+to {
+  transform: scale(1) rotate(90deg);
+	opacity: 1;
+}`,M=(0,y.styled)("div")`
+  width: 20px;
+  opacity: 0;
+  height: 20px;
+  border-radius: 10px;
+  background: ${e=>e.primary||"#ff4b4b"};
+  position: relative;
+  transform: rotate(45deg);
 
-'use strict'
+  animation: ${pe} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+  animation-delay: 100ms;
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-hot-toast.cjs.production.min.js')
-} else {
-  module.exports = require('./react-hot-toast.cjs.development.js')
+  &:after,
+  &:before {
+    content: '';
+    animation: ${de} 0.15s ease-out forwards;
+    animation-delay: 150ms;
+    position: absolute;
+    border-radius: 3px;
+    opacity: 0;
+    background: ${e=>e.secondary||"#fff"};
+    bottom: 9px;
+    left: 4px;
+    height: 2px;
+    width: 12px;
+  }
+
+  &:before {
+    animation: ${me} 0.15s ease-out forwards;
+    animation-delay: 180ms;
+    transform: rotate(90deg);
+  }
+`;var C=require("goober"),ue=C.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`,F=(0,C.styled)("div")`
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  border: 2px solid;
+  border-radius: 100%;
+  border-color: ${e=>e.secondary||"#e0e0e0"};
+  border-right-color: ${e=>e.primary||"#616161"};
+  animation: ${ue} 1s linear infinite;
+`;var S=require("goober"),le=S.keyframes`
+from {
+  transform: scale(0) rotate(45deg);
+	opacity: 0;
 }
+to {
+  transform: scale(1) rotate(45deg);
+	opacity: 1;
+}`,fe=S.keyframes`
+0% {
+	height: 0;
+	width: 0;
+	opacity: 0;
+}
+40% {
+  height: 0;
+	width: 6px;
+	opacity: 1;
+}
+100% {
+  opacity: 1;
+  height: 10px;
+}`,U=(0,S.styled)("div")`
+  width: 20px;
+  opacity: 0;
+  height: 20px;
+  border-radius: 10px;
+  background: ${e=>e.primary||"#61d345"};
+  position: relative;
+  transform: rotate(45deg);
+
+  animation: ${le} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+  animation-delay: 100ms;
+  &:after {
+    content: '';
+    box-sizing: border-box;
+    animation: ${fe} 0.2s ease-out forwards;
+    opacity: 0;
+    animation-delay: 200ms;
+    position: absolute;
+    border-right: 2px solid;
+    border-bottom: 2px solid;
+    border-color: ${e=>e.secondary||"#fff"};
+    bottom: 6px;
+    left: 6px;
+    height: 10px;
+    width: 6px;
+  }
+`;var Te=(0,g.styled)("div")`
+  position: absolute;
+`,ye=(0,g.styled)("div")`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 20px;
+  min-height: 20px;
+`,ge=g.keyframes`
+from {
+  transform: scale(0.6);
+  opacity: 0.4;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`,xe=(0,g.styled)("div")`
+  position: relative;
+  transform: scale(0.6);
+  opacity: 0.4;
+  min-width: 20px;
+  animation: ${ge} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+`,$=({toast:e})=>{let{icon:t,type:o,iconTheme:s}=e;return t!==void 0?typeof t=="string"?f.createElement(xe,null,t):t:o==="blank"?null:f.createElement(ye,null,f.createElement(F,{...s}),o!=="loading"&&f.createElement(Te,null,o==="error"?f.createElement(M,{...s}):f.createElement(U,{...s})))};var he=e=>`
+0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
+100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
+`,be=e=>`
+0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
+100% {transform: translate3d(0,${e*-150}%,-1px) scale(.6); opacity:0;}
+`,Se="0%{opacity:0;} 100%{opacity:1;}",Ae="0%{opacity:1;} 100%{opacity:0;}",Pe=(0,x.styled)("div",d.forwardRef)`
+  display: flex;
+  align-items: center;
+  background: #fff;
+  color: #363636;
+  line-height: 1.3;
+  will-change: transform;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
+  max-width: 350px;
+  pointer-events: auto;
+  padding: 8px 10px;
+  border-radius: 8px;
+`,Re=(0,x.styled)("div")`
+  display: flex;
+  justify-content: center;
+  margin: 4px 10px;
+  color: inherit;
+  flex: 1 1 auto;
+  white-space: pre-line;
+`,Oe=(e,t)=>{let s=e.includes("top")?1:-1,[r,a]=E()?[Se,Ae]:[he(s),be(s)];return{animation:t?`${(0,x.keyframes)(r)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,x.keyframes)(a)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},L=d.memo(({toast:e,position:t,style:o,children:s})=>{let r=e!=null&&e.height?Oe(e.position||t||"top-center",e.visible):{opacity:0},a=d.createElement($,{toast:e}),i=d.createElement(Re,{...e.ariaProps},m(e.message,e));return d.createElement(Pe,{className:e.className,style:{...r,...o,...e.style}},typeof s=="function"?s({icon:a,message:i}):d.createElement(d.Fragment,null,a,i))});var B=require("goober"),A=N(require("react"));(0,B.setup)(A.createElement);var Ee=(e,t)=>{let o=e.includes("top"),s=o?{top:0}:{bottom:0},r=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:E()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...r}},ve=B.css`
+  z-index: 9999;
+  > * {
+    pointer-events: auto;
+  }
+`,z=16,Y=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:r,containerStyle:a,containerClassName:i})=>{let{toasts:T,handlers:l}=w(o);return A.createElement("div",{style:{position:"fixed",zIndex:9999,top:z,left:z,right:z,bottom:z,pointerEvents:"none",...a},className:i,onMouseEnter:l.startPause,onMouseLeave:l.endPause},T.map(c=>{let P=c.position||t,R=l.calculateOffset(c,{reverseOrder:e,gutter:s,defaultPosition:t}),W=Ee(P,R),p=c.height?void 0:J(h=>{l.updateHeight(c.id,h.height)});return A.createElement("div",{ref:p,className:c.visible?ve:"",key:c.id,style:W},c.type==="custom"?m(c.message,c):r?r(c):A.createElement(L,{toast:c,position:P}))}))};var De=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-hot-toast",
   "description": "Smoking hot React Notifications. Lightweight, customizable and beautiful by default.",
-  "version": "2.2.0",
+  "version": "2.3.0-beta",
   "author": "Timo Lins",
   "license": "MIT",
-  "sideEffects": false,
   "repository": "timolins/react-hot-toast",
@@ -15,5 +14,19 @@ "keywords": [
   ],
-  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./headless": {
+      "import": "./headless/index.esm.js",
+      "require": "./headless/index.js",
+      "types": "./headless/index.d.ts"
+    }
+  },
   "files": [
+    "headless",
     "dist",
@@ -27,17 +40,14 @@ "src",
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "lint": "tsdx lint",
+    "start": "tsup --watch",
+    "build": "tsup",
     "test": "echo \"No test specified\"",
-    "prepare": "tsdx build",
+    "setup": "pnpm i && cd site && pnpm i && cd .. && pnpm run link",
+    "link": "pnpm link ./site/node_modules/react && pnpm link ./site/node_modules/react-dom",
+    "prepare": "tsup",
     "size": "size-limit",
     "analyze": "size-limit --why"
   },
-  "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
-  },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "prettier src --ignore-unknown --write"
     }
@@ -52,24 +62,37 @@ },
   },
-  "module": "dist/react-hot-toast.esm.js",
   "size-limit": [
     {
-      "path": "dist/react-hot-toast.cjs.production.min.js",
+      "path": "dist/index.js",
       "limit": "5 KB"
     },
     {
-      "path": "dist/react-hot-toast.esm.js",
+      "path": "dist/index.esm.js",
       "limit": "5 KB"
+    },
+    {
+      "path": "headless/index.js",
+      "limit": "2 KB"
+    },
+    {
+      "path": "headless/index.esm.js",
+      "limit": "2 KB"
     }
   ],
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^4.9.1",
+    "@size-limit/preset-small-lib": "^7.0.8",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "csstype": "^3.0.7",
-    "size-limit": "^4.9.1",
-    "tsdx": "^0.14.1"
+    "prettier": "^2.7.1",
+    "size-limit": "^7.0.8",
+    "tsup": "^6.1.3",
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "goober": "^2.1.1"
+    "goober": "^2.1.10"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
   }
 }

src/core/toast.ts

@@ -35,10 +35,9 @@ import {
 
-const createHandler = (type?: ToastType): ToastHandler => (
-  message,
-  options
-) => {
-  const toast = createToast(message, type, options);
-  dispatch({ type: ActionType.UPSERT_TOAST, toast });
-  return toast.id;
-};
+const createHandler =
+  (type?: ToastType): ToastHandler =>
+  (message, options) => {
+    const toast = createToast(message, type, options);
+    dispatch({ type: ActionType.UPSERT_TOAST, toast });
+    return toast.id;
+  };
 
@@ -45,0 +44,0 @@ const toast = (message: Message, opts?: ToastOptions) =>

src/core/types.ts

@@ -71,6 +71,5 @@ import { CSSProperties } from 'react';
 
-export type DefaultToastOptions = ToastOptions &
-  {
-    [key in ToastType]?: ToastOptions;
-  };
+export type DefaultToastOptions = ToastOptions & {
+  [key in ToastType]?: ToastOptions;
+};
 
@@ -77,0 +76,0 @@ export interface ToasterProps {

src/core/use-toaster.ts

@@ -63,4 +63,7 @@ import { useEffect, useMemo } from 'react';
       ) => {
-        const { reverseOrder = false, gutter = 8, defaultPosition } =
-          opts || {};
+        const {
+          reverseOrder = false,
+          gutter = 8,
+          defaultPosition,
+        } = opts || {};
 
@@ -67,0 +70,0 @@ const relevantToasts = toasts.filter(

src/core/utils.ts

@@ -8,12 +8,11 @@ export const genId = (() => {
 
-export const createRectRef = (onRect: (rect: DOMRect) => void) => (
-  el: HTMLElement | null
-) => {
-  if (el) {
-    setTimeout(() => {
-      const boundingRect = el.getBoundingClientRect();
-      onRect(boundingRect);
-    });
-  }
-};
+export const createRectRef =
+  (onRect: (rect: DOMRect) => void) => (el: HTMLElement | null) => {
+    if (el) {
+      setTimeout(() => {
+        const boundingRect = el.getBoundingClientRect();
+        onRect(boundingRect);
+      });
+    }
+  };
 
@@ -20,0 +19,0 @@ export const prefersReducedMotion = (() => {

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 2 instances 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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Improved metrics

Number of low supply chain risk alerts

1

-50%

Worsened metrics

Total package byte prevSize

161063

-33.23%

Dev dependency count

8

33.33%

Number of package files

27

-28.95%

Lines of code

1489

-39.59%

Number of low quality alerts

7

133.33%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  goober@^2.1.10