diff --git a/.changeset/thirty-candles-listen.md b/.changeset/thirty-candles-listen.md new file mode 100644 index 0000000000..769e27b4ed --- /dev/null +++ b/.changeset/thirty-candles-listen.md @@ -0,0 +1,5 @@ +--- +"@heroui/toast": patch +--- + +fix shouldShowTimeoutProgess typo (#4856) diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts index d52e309001..51e793bbea 100644 --- a/packages/components/toast/src/use-toast.ts +++ b/packages/components/toast/src/use-toast.ts @@ -100,7 +100,7 @@ export interface ToastProps extends ToastVariantProps { /** * should apply styles to indicate timeout progress */ - shouldShowTimeoutProgess?: boolean; + shouldShowTimeoutProgress?: boolean; /** * The severity of the toast. This changes the icon without having to change the color. * @default "default" @@ -155,7 +155,7 @@ export function useToast(originalProps: UseToastProps) toastOffset = 0, motionProps, timeout = 6000, - shouldShowTimeoutProgess = false, + shouldShowTimeoutProgress = false, icon, onClose, severity, @@ -233,7 +233,7 @@ export function useToast(originalProps: UseToastProps) if (progressBarRef.current) { progressBarRef.current.style.width = `${ - shouldShowTimeoutProgess ? progressRef.current : 0 + shouldShowTimeoutProgress ? progressRef.current : 0 }%`; } @@ -251,7 +251,7 @@ export function useToast(originalProps: UseToastProps) }; }, [ timeout, - shouldShowTimeoutProgess, + shouldShowTimeoutProgress, state, isToastHovered, index, diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index 1f6cca2c54..d85529f032 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -110,7 +110,7 @@ const ShowTimeoutProgressTemplate = (args: ToastProps) => { title: "Toast Title", description: "Toast Description", timeout: 3000, - shouldShowTimeoutProgess: true, + shouldShowTimeoutProgress: true, ...args, }); }}