@seamapi/react 1.61.2 → 1.63.0

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { CheckGreenIcon } from 'lib/icons/CheckGreen.js'
 import { CloseWhiteIcon } from 'lib/icons/CloseWhite.js'
@@ -11,6 +11,7 @@ interface SnackbarProps {
   message: string
   variant: SnackbarVariant
   visible: boolean
+  onClose: () => void
   action?: {
     label: string
     onClick: () => void
@@ -28,34 +29,29 @@ export function Snackbar({
   autoDismiss = false,
   dismissAfterMs = 5000,
   disableCloseButton = false,
+  onClose,
 }: SnackbarProps): JSX.Element {
-  const [hidden, setHidden] = useState(visible)
-
   const { label: actionLabel, onClick: handleActionClick } = action ?? {}
 
-  useEffect(() => {
-    setHidden(!visible)
-  }, [visible])
-
   useEffect(() => {
     if (!autoDismiss) {
       return () => {}
     }
 
     const timeout = globalThis.setTimeout(() => {
-      setHidden(false)
+      onClose()
     }, dismissAfterMs)
 
     return () => {
       globalThis.clearTimeout(timeout)
     }
-  }, [autoDismiss, dismissAfterMs])
+  }, [autoDismiss, dismissAfterMs, onClose])
 
   return (
     <div className='seam-snackbar-wrap'>
       <div
         className={classNames('seam-snackbar', {
-          'seam-snackbar-hide': hidden,
+          'seam-snackbar-visible': visible,
         })}
       >
         <SnackbarIcon variant={variant} />
@@ -75,7 +71,7 @@ export function Snackbar({
             <button
               className='seam-snackbar-close-button'
               onClick={() => {
-                setHidden(true)
+                onClose()
               }}
             >
               <CloseWhiteIcon />

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.61.2'
+const seamapiReactVersion = '1.63.0'
 
 export default seamapiReactVersion

package/src/styles/_snackbar.scss

@@ -28,13 +28,16 @@
     position: absolute;
     bottom: 24px;
     will-change: transform;
-    animation: fade-in-up 0.2s motion.$ease-in-out-quint;
     transition: all 0.2s motion.$ease-in-out-quint;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(24px);
 
-    &.seam-snackbar-hide {
-      transform: translateY(24px);
-      opacity: 0;
-      visibility: hidden;
+    &.seam-snackbar-visible {
+      animation: fade-in-up 0.2s motion.$ease-in-out-quint;
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
     }
 
     .seam-snackbar-message-wrap {