[toasts] Introduce a store

packages/react/src/toast/close/ToastClose.tsx

@@ -18,8 +18,9 @@ export const ToastClose = React.forwardRef(function ToastClose(
 ) {
   const { render, className, disabled, nativeButton = true, ...elementProps } = componentProps;
 
-  const { close, expanded } = useToastContext();
+  const store = useToastContext();
   const { toast } = useToastRootContext();
+  const expanded = store.useState('expanded');
 
   const [hasFocus, setHasFocus] = React.useState(false);
 
@@ -39,7 +40,7 @@ export const ToastClose = React.forwardRef(function ToastClose(
       {
         'aria-hidden': !expanded && !hasFocus,
         onClick() {
-          close(toast.id);
+          store.closeToast(toast.id);
         },
         onFocus() {
           setHasFocus(true);

packages/react/src/toast/description/ToastDescription.tsx

@@ -19,16 +19,14 @@ export const ToastDescription = React.forwardRef(function ToastDescription(
 ) {
   const { render, className, id: idProp, children: childrenProp, ...elementProps } = componentProps;
 
-  const { toast } = useToastRootContext();
+  const { toast, setDescriptionId } = useToastRootContext();
 
   const children = childrenProp ?? toast.description;
 
   const shouldRender = Boolean(children);
 
   const id = useId(idProp);
 
-  const { setDescriptionId } = useToastRootContext();
-
   useIsoLayoutEffect(() => {
     if (!shouldRender) {
       return undefined;

packages/react/src/toast/positioner/ToastPositioner.tsx

@@ -25,7 +25,7 @@ export const ToastPositioner = React.forwardRef(function ToastPositioner(
 ) {
   const { toast, ...props } = componentProps;
 
-  const { toasts } = useToastContext();
+  const store = useToastContext();
 
   const positionerProps = (toast.positionerProps ?? EMPTY_OBJECT) as NonNullable<
     typeof toast.positionerProps
@@ -51,11 +51,8 @@ export const ToastPositioner = React.forwardRef(function ToastPositioner(
 
   const [positionerElement, setPositionerElement] = React.useState<HTMLDivElement | null>(null);
 
-  const domIndex = React.useMemo(() => toasts.indexOf(toast), [toast, toasts]);
-  const visibleIndex = React.useMemo(
-    () => toasts.filter((t) => t.transitionStatus !== 'ending').indexOf(toast),
-    [toast, toasts],
-  );
+  const domIndex = store.useState('toastIndex', toast.id);
+  const visibleIndex = store.useState('toastVisibleIndex', toast.id);
 
   const anchor = isElement(anchorProp) ? anchorProp : null;