@hanzogui/toast 8.0.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzogui/toast",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -44,25 +44,26 @@
     "clean:build": "hanzogui-build clean:build"
   },
   "dependencies": {
-    "@hanzogui/animate-presence": "8.0.0",
-    "@hanzogui/collection": "8.0.0",
-    "@hanzogui/compose-refs": "8.0.0",
-    "@hanzogui/constants": "8.0.0",
-    "@hanzogui/core": "8.0.0",
-    "@hanzogui/create-context": "8.0.0",
-    "@hanzogui/dismissable": "8.0.0",
-    "@hanzogui/helpers": "8.0.0",
-    "@hanzogui/native": "8.0.0",
-    "@hanzogui/polyfill-dev": "8.0.0",
-    "@hanzogui/portal": "8.0.0",
-    "@hanzogui/stacks": "8.0.0",
-    "@hanzogui/start-transition": "8.0.0",
-    "@hanzogui/text": "8.0.0",
-    "@hanzogui/use-controllable-state": "8.0.0",
-    "@hanzogui/visually-hidden": "8.0.0"
+    "@hanzogui/animate-presence": "8.1.0",
+    "@hanzogui/collection": "8.1.0",
+    "@hanzogui/compose-refs": "8.1.0",
+    "@hanzogui/constants": "8.1.0",
+    "@hanzogui/core": "8.1.0",
+    "@hanzogui/create-context": "8.1.0",
+    "@hanzogui/dismissable": "8.1.0",
+    "@hanzogui/helpers": "8.1.0",
+    "@hanzogui/native": "8.1.0",
+    "@hanzogui/polyfill-dev": "8.1.0",
+    "@hanzogui/portal": "8.1.0",
+    "@hanzogui/stacks": "8.1.0",
+    "@hanzogui/start-transition": "8.1.0",
+    "@hanzogui/text": "8.1.0",
+    "@hanzogui/use-controllable-state": "8.1.0",
+    "@hanzogui/visually-hidden": "8.1.0",
+    "@hanzogui/web": "8.1.0"
   },
   "devDependencies": {
-    "@hanzogui/build": "8.0.0",
+    "@hanzogui/build": "8.1.0",
     "react": ">=19",
     "react-native": "0.83.2"
   },
@@ -76,5 +77,10 @@
         "./types/v2.d.ts"
       ]
     }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/gui.git",
+    "directory": "pkgs/ui/toast"
   }
 }

package/src/ToastComposable.tsx

@@ -1203,6 +1203,23 @@ const ToastItemInner = ToastItemFrame.styleable<ToastItemProps>(
           dragRef={dragRef}
         >
           <ToastItemFrame
+            // The one hook a stylesheet can reach a toast by.
+            //
+            // A toast is floating chrome — it is over the page or it is nothing
+            // — so a design system wants to give it the same material every
+            // other floating surface wears. It had no handle at all: `Toaster`
+            // accepts sonner's `className`/`style`/`classNames` and documents
+            // them as INERT, and nothing else here reaches the DOM node. So the
+            // one surface that is unambiguously floating was the one surface a
+            // sheet could not select, and it kept a hand-rolled
+            // `rgba(0,0,0,0.15)` drop that is very nearly invisible on a dark
+            // ground — the exact defect an elevation ladder exists to end.
+            //
+            // `data-slot` rather than a class or a prop because it needs no
+            // decision from a call site: a toast is glass because it IS a toast.
+            // gui forwards unrecognised props to the DOM node and native drops
+            // them, which is what makes this cross-platform safe.
+            data-slot="toast"
             role="status"
             aria-live="polite"
             aria-atomic

package/src/ToastImpl.tsx

@@ -161,254 +161,251 @@ type ToastImplProps = ScopedProps<
   ToastImplPrivateProps & ToastImplFrameProps & ToastExtraProps
 >
 
-const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>(
-  (props, forwardedRef) => {
-    const {
-      scope,
-      type = 'foreground',
-      duration: durationProp,
-      open,
-      onClose,
-      onEscapeKeyDown,
-      onPause,
-      onResume,
-      onSwipeStart,
-      onSwipeMove,
-      onSwipeCancel,
-      onSwipeEnd,
-      viewportName = 'default',
-      ...toastProps
-    } = props
-    const isPresent = useIsPresent()
-    const context = useToastProviderContext(scope)
-    const [node, setNode] = React.useState<GuiElement | null>(null)
-    const composedRefs = useComposedRefs(forwardedRef, setNode)
-    const duration = durationProp || context.duration
-    const closeTimerStartTimeRef = React.useRef(0)
-    const closeTimerRemainingTimeRef = React.useRef(duration)
-    const closeTimerRef = React.useRef(0)
-    const { onToastAdd, onToastRemove } = context
-
-    const viewport = React.useMemo(() => {
-      return context.viewports[viewportName] as HTMLElement | null | undefined
-    }, [context.viewports, viewportName])
-
-    const handleClose = useEvent(() => {
-      if (!isPresent) {
-        // already removed from the react tree
-        return
-      }
-      // focus viewport if focus is within toast to read the remaining toast
-      // count to SR users and ensure focus isn't lost
-      if (isWeb) {
-        const isFocusInToast = (node as unknown as HTMLDivElement)?.contains(
-          document.activeElement
-        )
-        if (isFocusInToast) viewport?.focus()
-      }
-      onClose()
-    })
+const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>((props, forwardedRef) => {
+  const {
+    scope,
+    type = 'foreground',
+    duration: durationProp,
+    open,
+    onClose,
+    onEscapeKeyDown,
+    onPause,
+    onResume,
+    onSwipeStart,
+    onSwipeMove,
+    onSwipeCancel,
+    onSwipeEnd,
+    viewportName = 'default',
+    ...toastProps
+  } = props
+  const isPresent = useIsPresent()
+  const context = useToastProviderContext(scope)
+  const [node, setNode] = React.useState<GuiElement | null>(null)
+  const composedRefs = useComposedRefs(forwardedRef, setNode)
+  const duration = durationProp || context.duration
+  const closeTimerStartTimeRef = React.useRef(0)
+  const closeTimerRemainingTimeRef = React.useRef(duration)
+  const closeTimerRef = React.useRef(0)
+  const { onToastAdd, onToastRemove } = context
+
+  const viewport = React.useMemo(() => {
+    return context.viewports[viewportName] as HTMLElement | null | undefined
+  }, [context.viewports, viewportName])
+
+  const handleClose = useEvent(() => {
+    if (!isPresent) {
+      // already removed from the react tree
+      return
+    }
+    // focus viewport if focus is within toast to read the remaining toast
+    // count to SR users and ensure focus isn't lost
+    if (isWeb) {
+      const isFocusInToast = (node as unknown as HTMLDivElement)?.contains(
+        document.activeElement
+      )
+      if (isFocusInToast) viewport?.focus()
+    }
+    onClose()
+  })
 
-    const startTimer = React.useCallback(
-      (duration: number) => {
-        if (!duration || duration === Number.POSITIVE_INFINITY) return
-        clearTimeout(closeTimerRef.current)
-        closeTimerStartTimeRef.current = new Date().getTime()
-        closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number
-      },
-      [handleClose]
-    )
-
-    const handleResume = React.useCallback(() => {
-      startTimer(closeTimerRemainingTimeRef.current)
-      onResume?.()
-    }, [onResume, startTimer])
-
-    const handlePause = React.useCallback(() => {
-      const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current
-      closeTimerRemainingTimeRef.current =
-        closeTimerRemainingTimeRef.current - elapsedTime
-      window.clearTimeout(closeTimerRef.current)
-      onPause?.()
-    }, [onPause])
-
-    React.useEffect(() => {
-      if (!isWeb) return
-
-      if (viewport) {
-        viewport.addEventListener(VIEWPORT_PAUSE, handlePause)
-        viewport.addEventListener(VIEWPORT_RESUME, handleResume)
-        return () => {
-          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)
-          viewport.removeEventListener(VIEWPORT_RESUME, handleResume)
-        }
-      }
-    }, [viewport, duration, onPause, onResume, startTimer])
-
-    // start timer when toast opens or duration changes.
-    // we include `open` in deps because closed !== unmounted when animating
-    // so it could reopen before being completely unmounted
-    React.useEffect(() => {
-      if (open && !context.isClosePausedRef.current) {
-        startTimer(duration)
+  const startTimer = React.useCallback(
+    (duration: number) => {
+      if (!duration || duration === Number.POSITIVE_INFINITY) return
+      clearTimeout(closeTimerRef.current)
+      closeTimerStartTimeRef.current = new Date().getTime()
+      closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number
+    },
+    [handleClose]
+  )
+
+  const handleResume = React.useCallback(() => {
+    startTimer(closeTimerRemainingTimeRef.current)
+    onResume?.()
+  }, [onResume, startTimer])
+
+  const handlePause = React.useCallback(() => {
+    const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current
+    closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime
+    window.clearTimeout(closeTimerRef.current)
+    onPause?.()
+  }, [onPause])
+
+  React.useEffect(() => {
+    if (!isWeb) return
+
+    if (viewport) {
+      viewport.addEventListener(VIEWPORT_PAUSE, handlePause)
+      viewport.addEventListener(VIEWPORT_RESUME, handleResume)
+      return () => {
+        viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)
+        viewport.removeEventListener(VIEWPORT_RESUME, handleResume)
       }
-    }, [open, duration, context.isClosePausedRef, startTimer])
+    }
+  }, [viewport, duration, onPause, onResume, startTimer])
+
+  // start timer when toast opens or duration changes.
+  // we include `open` in deps because closed !== unmounted when animating
+  // so it could reopen before being completely unmounted
+  React.useEffect(() => {
+    if (open && !context.isClosePausedRef.current) {
+      startTimer(duration)
+    }
+  }, [open, duration, context.isClosePausedRef, startTimer])
 
-    React.useEffect(() => {
-      onToastAdd()
-      return () => onToastRemove()
-    }, [onToastAdd, onToastRemove])
+  React.useEffect(() => {
+    onToastAdd()
+    return () => onToastRemove()
+  }, [onToastAdd, onToastRemove])
 
-    const announceTextContent = React.useMemo(() => {
-      if (!isWeb) return null
-      return node ? getAnnounceTextContent(node as unknown as HTMLDivElement) : null
-    }, [node])
+  const announceTextContent = React.useMemo(() => {
+    if (!isWeb) return null
+    return node ? getAnnounceTextContent(node as unknown as HTMLDivElement) : null
+  }, [node])
 
-    const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(
-      context.swipeDirection
-    )
+  const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(
+    context.swipeDirection
+  )
 
-    const { animationDriver } = useConfiguration()
-    if (!animationDriver) {
-      throw new Error('Must set animations in hanzogui.config.ts')
-    }
+  const { animationDriver } = useConfiguration()
+  if (!animationDriver) {
+    throw new Error('Must set animations in hanzogui.config.ts')
+  }
 
-    const { useAnimatedNumber, useAnimatedNumberStyle } = animationDriver
+  const { useAnimatedNumber, useAnimatedNumberStyle } = animationDriver
 
-    const animatedNumber = useAnimatedNumber(0)
+  const animatedNumber = useAnimatedNumber(0)
 
-    // temp until reanimated useAnimatedNumber fix
-    const AnimatedView = (animationDriver['NumberView'] ??
-      animationDriver.View ??
-      View) as typeof Animated.View
+  // temp until reanimated useAnimatedNumber fix
+  const AnimatedView = (animationDriver['NumberView'] ??
+    animationDriver.View ??
+    View) as typeof Animated.View
 
-    const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
-      'worklet'
-      return {
-        transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],
-      }
-    })
+  const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
+    'worklet'
+    return {
+      transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],
+    }
+  })
 
-    const panResponder = React.useMemo(() => {
-      const PanResponder = getPanResponder()
-      if (!PanResponder) return null
-      return PanResponder.create({
-        onMoveShouldSetPanResponder: (e, gesture) => {
-          const shouldMove = shouldGrantGestureMove(context.swipeDirection, gesture)
-          if (shouldMove) {
-            onSwipeStart?.(e)
-            return true
-          }
-          return false
-        },
-        onPanResponderGrant: (e) => {
+  const panResponder = React.useMemo(() => {
+    const PanResponder = getPanResponder()
+    if (!PanResponder) return null
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (e, gesture) => {
+        const shouldMove = shouldGrantGestureMove(context.swipeDirection, gesture)
+        if (shouldMove) {
+          onSwipeStart?.(e)
+          return true
+        }
+        return false
+      },
+      onPanResponderGrant: (e) => {
+        if (!isWeb) {
+          handlePause?.()
+        }
+      },
+      onPanResponderMove: (e, gesture) => {
+        const { x, y } = getGestureDistance(context.swipeDirection, gesture)
+        const delta = { x, y }
+        animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })
+        if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
+          onSwipeEnd?.(e)
+        }
+        onSwipeMove?.(e)
+      },
+      onPanResponderEnd: (e, { dx, dy }) => {
+        if (
+          !isDeltaInDirection(
+            { x: dx, y: dy },
+            context.swipeDirection,
+            context.swipeThreshold
+          )
+        ) {
           if (!isWeb) {
-            handlePause?.()
-          }
-        },
-        onPanResponderMove: (e, gesture) => {
-          const { x, y } = getGestureDistance(context.swipeDirection, gesture)
-          const delta = { x, y }
-          animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })
-          if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
-            onSwipeEnd?.(e)
+            handleResume?.()
           }
-          onSwipeMove?.(e)
-        },
-        onPanResponderEnd: (e, { dx, dy }) => {
-          if (
-            !isDeltaInDirection(
-              { x: dx, y: dy },
-              context.swipeDirection,
-              context.swipeThreshold
-            )
-          ) {
-            if (!isWeb) {
-              handleResume?.()
-            }
-            onSwipeCancel?.(e)
-            animatedNumber.setValue(0, { type: 'spring' })
-          }
-        },
-      })
-    }, [handlePause, handleResume])
-
-    // need to get the theme name from context and apply it again since portals don't retain the theme
-    const themeName = useThemeName()
-
-    return (
-      <>
-        {announceTextContent && (
-          <ToastAnnounce
-            scope={scope}
-            // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
-            // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role="status"
-            aria-live={type === 'foreground' ? 'assertive' : 'polite'}
-            aria-atomic
-          >
-            {announceTextContent}
-          </ToastAnnounce>
-        )}
-
-        <PortalItem hostName={viewportName ?? 'default'}>
-          <ToastInteractiveProvider
-            key={props.id}
-            scope={scope}
-            onClose={() => {
-              handleClose()
-            }}
+          onSwipeCancel?.(e)
+          animatedNumber.setValue(0, { type: 'spring' })
+        }
+      },
+    })
+  }, [handlePause, handleResume])
+
+  // need to get the theme name from context and apply it again since portals don't retain the theme
+  const themeName = useThemeName()
+
+  return (
+    <>
+      {announceTextContent && (
+        <ToastAnnounce
+          scope={scope}
+          // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+          // biome-ignore lint/a11y/useSemanticElements: <explanation>
+          role="status"
+          aria-live={type === 'foreground' ? 'assertive' : 'polite'}
+          aria-atomic
+        >
+          {announceTextContent}
+        </ToastAnnounce>
+      )}
+
+      <PortalItem hostName={viewportName ?? 'default'}>
+        <ToastInteractiveProvider
+          key={props.id}
+          scope={scope}
+          onClose={() => {
+            handleClose()
+          }}
+        >
+          <Dismissable
+            // asChild
+            onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
+              if (!context.isFocusedToastEscapeKeyDownRef.current) {
+                handleClose()
+              }
+              context.isFocusedToastEscapeKeyDownRef.current = false
+            })}
           >
-            <Dismissable
-              // asChild
-              onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
-                if (!context.isFocusedToastEscapeKeyDownRef.current) {
-                  handleClose()
-                }
-                context.isFocusedToastEscapeKeyDownRef.current = false
-              })}
-            >
-              <Theme contain forceClassName name={themeName}>
-                <AnimatedView
-                  {...panResponder?.panHandlers}
-                  style={[{ margin: 'auto' }, animatedStyles]}
-                >
-                  <Collection.ItemSlot scope={context.toastScope}>
-                    <ToastImplFrame
-                      // Ensure toasts are announced as status list or status when focused
-                      role="status"
-                      aria-live="off"
-                      aria-atomic
-                      data-state={open ? 'open' : 'closed'}
-                      data-swipe-direction={context.swipeDirection}
-                      pointerEvents="auto"
-                      $platform-web={{
-                        touchAction: 'none',
-                        userSelect: 'none',
-                      }}
-                      {...toastProps}
-                      ref={composedRefs}
-                      {...(isWeb && {
-                        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-                          if (event.key !== 'Escape') return
-                          onEscapeKeyDown?.(event)
-                          if (!event.defaultPrevented) {
-                            context.isFocusedToastEscapeKeyDownRef.current = true
-                            handleClose()
-                          }
-                        }),
-                      })}
-                    />
-                  </Collection.ItemSlot>
-                </AnimatedView>
-              </Theme>
-            </Dismissable>
-          </ToastInteractiveProvider>
-        </PortalItem>
-      </>
-    )
-  }
-)
+            <Theme contain forceClassName name={themeName}>
+              <AnimatedView
+                {...panResponder?.panHandlers}
+                style={[{ margin: 'auto' }, animatedStyles]}
+              >
+                <Collection.ItemSlot scope={context.toastScope}>
+                  <ToastImplFrame
+                    // Ensure toasts are announced as status list or status when focused
+                    role="status"
+                    aria-live="off"
+                    aria-atomic
+                    data-state={open ? 'open' : 'closed'}
+                    data-swipe-direction={context.swipeDirection}
+                    pointerEvents="auto"
+                    $platform-web={{
+                      touchAction: 'none',
+                      userSelect: 'none',
+                    }}
+                    {...toastProps}
+                    ref={composedRefs}
+                    {...(isWeb && {
+                      onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+                        if (event.key !== 'Escape') return
+                        onEscapeKeyDown?.(event)
+                        if (!event.defaultPrevented) {
+                          context.isFocusedToastEscapeKeyDownRef.current = true
+                          handleClose()
+                        }
+                      }),
+                    })}
+                  />
+                </Collection.ItemSlot>
+              </AnimatedView>
+            </Theme>
+          </Dismissable>
+        </ToastInteractiveProvider>
+      </PortalItem>
+    </>
+  )
+})
 
 ToastImpl.propTypes = {
   type(props) {