@fluentui/react-toast 9.0.6 → 9.1.1

package/lib/components/Toaster/useToasterFocusManagement.js

@@ -0,0 +1,85 @@
+import { isHTMLElement } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowDown, ArrowUp } from '@fluentui/keyboard-keys';
+import { toastContainerClassNames } from '../ToastContainer';
+const noop = ()=>undefined;
+/**
+ * @internal
+ */ export function useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts) {
+    const { targetDocument  } = useFluent();
+    const cleanupListenersRef = React.useRef(noop);
+    return React.useCallback((el)=>{
+        if (!el || !targetDocument) {
+            cleanupListenersRef.current();
+            cleanupListenersRef.current = noop;
+            return;
+        }
+        const toastContainerWalker = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, {
+            acceptNode (node) {
+                if (isHTMLElement(node) && node.classList.contains(toastContainerClassNames.root)) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_SKIP;
+            }
+        });
+        /**
+       * FIXME: https://github.com/microsoft/tabster/issues/299
+       * Toasts  should be arrow navigable and focus should be trapped in a stack of tasts
+       * This is a temporary measure, Tabster does not have an API yet to enable mover arrow keys from within grouppers
+       * Once tabster fully supports this use case, remove this hook
+       */ const keydownListener = (e)=>{
+            const { target , key  } = e;
+            if (!isHTMLElement(target)) {
+                return;
+            }
+            if (key === ArrowDown) {
+                toastContainerWalker.currentNode = target;
+                let nextToastContainer = toastContainerWalker.nextNode();
+                if (!nextToastContainer) {
+                    toastContainerWalker.currentNode = el;
+                    nextToastContainer = toastContainerWalker.nextNode();
+                }
+                if (isHTMLElement(nextToastContainer)) {
+                    nextToastContainer.focus();
+                }
+            }
+            if (key === ArrowUp) {
+                toastContainerWalker.currentNode = target;
+                let prevToastContainer = toastContainerWalker.previousNode();
+                if (prevToastContainer && prevToastContainer.contains(target)) {
+                    prevToastContainer = toastContainerWalker.previousNode();
+                }
+                if (!prevToastContainer) {
+                    toastContainerWalker.currentNode = el;
+                    prevToastContainer = toastContainerWalker.lastChild();
+                }
+                if (isHTMLElement(prevToastContainer)) {
+                    prevToastContainer.focus();
+                }
+            }
+        };
+        const focusInListener = (e)=>{
+            if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
+                pauseAllToasts();
+            }
+        };
+        const focusOutListener = (e)=>{
+            if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
+                playAllToasts();
+            }
+        };
+        el.addEventListener('keydown', keydownListener);
+        el.addEventListener('focusin', focusInListener);
+        el.addEventListener('focusout', focusOutListener);
+        cleanupListenersRef.current = ()=>{
+            el.removeEventListener('keydown', keydownListener);
+            el.removeEventListener('focusin', focusInListener);
+            el.removeEventListener('focusout', focusOutListener);
+        };
+    }, [
+        targetDocument,
+        pauseAllToasts,
+        playAllToasts
+    ]);
+}

package/lib/components/Toaster/useToasterFocusManagement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToasterFocusManagement.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowUp } from '@fluentui/keyboard-keys';\nimport { toastContainerClassNames } from '../ToastContainer';\n\nconst noop = () => undefined;\n\n/**\n * @internal\n */\nexport function useToasterFocusManagement_unstable(pauseAllToasts: () => void, playAllToasts: () => void) {\n  const { targetDocument } = useFluent();\n  const cleanupListenersRef = React.useRef<() => void>(noop);\n\n  return React.useCallback(\n    (el: HTMLDivElement) => {\n      if (!el || !targetDocument) {\n        cleanupListenersRef.current();\n        cleanupListenersRef.current = noop;\n        return;\n      }\n\n      const toastContainerWalker = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, {\n        acceptNode(node: Node) {\n          if (isHTMLElement(node) && node.classList.contains(toastContainerClassNames.root)) {\n            return NodeFilter.FILTER_ACCEPT;\n          }\n\n          return NodeFilter.FILTER_SKIP;\n        },\n      });\n\n      /**\n       * FIXME: https://github.com/microsoft/tabster/issues/299\n       * Toasts  should be arrow navigable and focus should be trapped in a stack of tasts\n       * This is a temporary measure, Tabster does not have an API yet to enable mover arrow keys from within grouppers\n       * Once tabster fully supports this use case, remove this hook\n       */\n      const keydownListener = (e: KeyboardEvent) => {\n        const { target, key } = e;\n        if (!isHTMLElement(target)) {\n          return;\n        }\n\n        if (key === ArrowDown) {\n          toastContainerWalker.currentNode = target;\n          let nextToastContainer = toastContainerWalker.nextNode();\n          if (!nextToastContainer) {\n            toastContainerWalker.currentNode = el;\n            nextToastContainer = toastContainerWalker.nextNode();\n          }\n\n          if (isHTMLElement(nextToastContainer)) {\n            nextToastContainer.focus();\n          }\n        }\n\n        if (key === ArrowUp) {\n          toastContainerWalker.currentNode = target;\n          let prevToastContainer = toastContainerWalker.previousNode();\n          if (prevToastContainer && prevToastContainer.contains(target)) {\n            prevToastContainer = toastContainerWalker.previousNode();\n          }\n\n          if (!prevToastContainer) {\n            toastContainerWalker.currentNode = el;\n            prevToastContainer = toastContainerWalker.lastChild();\n          }\n\n          if (isHTMLElement(prevToastContainer)) {\n            prevToastContainer.focus();\n          }\n        }\n      };\n\n      const focusInListener = (e: FocusEvent) => {\n        if (\n          isHTMLElement(e.currentTarget) &&\n          !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n        ) {\n          pauseAllToasts();\n        }\n      };\n\n      const focusOutListener = (e: FocusEvent) => {\n        if (\n          isHTMLElement(e.currentTarget) &&\n          !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n        ) {\n          playAllToasts();\n        }\n      };\n\n      el.addEventListener('keydown', keydownListener);\n      el.addEventListener('focusin', focusInListener);\n      el.addEventListener('focusout', focusOutListener);\n\n      cleanupListenersRef.current = () => {\n        el.removeEventListener('keydown', keydownListener);\n        el.removeEventListener('focusin', focusInListener);\n        el.removeEventListener('focusout', focusOutListener);\n      };\n    },\n    [targetDocument, pauseAllToasts, playAllToasts],\n  );\n}\n"],"names":["isHTMLElement","React","useFluent_unstable","useFluent","ArrowDown","ArrowUp","toastContainerClassNames","noop","undefined","useToasterFocusManagement_unstable","pauseAllToasts","playAllToasts","targetDocument","cleanupListenersRef","useRef","useCallback","el","current","toastContainerWalker","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","classList","contains","root","FILTER_ACCEPT","FILTER_SKIP","keydownListener","e","target","key","currentNode","nextToastContainer","nextNode","focus","prevToastContainer","previousNode","lastChild","focusInListener","currentTarget","relatedTarget","focusOutListener","addEventListener","removeEventListener"],"mappings":"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"}

package/lib/state/useToaster.js

@@ -18,11 +18,6 @@ export function useToaster(options = {}) {
             return shortcuts.focus(e);
         }
     });
-    const tryRestoreFocus = React.useCallback(()=>{
-        var _lastActiveElementRef_current;
-        (_lastActiveElementRef_current = lastActiveElementRef.current) === null || _lastActiveElementRef_current === void 0 ? void 0 : _lastActiveElementRef_current.focus();
-        lastActiveElementRef.current = null;
-    }, []);
     const pauseAllToasts = React.useCallback(()=>{
         toaster.visibleToasts.forEach((toastId)=>{
             var _toast_imperativeRef_current;
@@ -58,6 +53,28 @@ export function useToaster(options = {}) {
     }, [
         toaster
     ]);
+    const tryRestoreFocus = React.useCallback(()=>{
+        const mostRecentToast = getMostRecentVisibleToast();
+        if (mostRecentToast === null || mostRecentToast === void 0 ? void 0 : mostRecentToast.imperativeRef.current) {
+            mostRecentToast.imperativeRef.current.focus();
+        } else {
+            var _lastActiveElementRef_current;
+            (_lastActiveElementRef_current = lastActiveElementRef.current) === null || _lastActiveElementRef_current === void 0 ? void 0 : _lastActiveElementRef_current.focus();
+            lastActiveElementRef.current = null;
+        }
+    }, [
+        getMostRecentVisibleToast
+    ]);
+    const closeAllToasts = React.useCallback(()=>{
+        toaster.visibleToasts.forEach((toastId)=>{
+            const toast = toaster.toasts.get(toastId);
+            toast === null || toast === void 0 ? void 0 : toast.close();
+        });
+        tryRestoreFocus();
+    }, [
+        toaster,
+        tryRestoreFocus
+    ]);
     React.useEffect(()=>{
         if (!targetDocument) {
             return;
@@ -157,6 +174,7 @@ export function useToaster(options = {}) {
         toastsToRender,
         pauseAllToasts,
         playAllToasts,
-        tryRestoreFocus
+        tryRestoreFocus,
+        closeAllToasts
     };
 }

package/lib/state/useToaster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToaster.ts"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useEventCallback, useForceUpdate } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createToaster } from './vanilla';\nimport type {\n  CommonToastDetail,\n  ShowToastEventDetail,\n  Toast,\n  ToastListenerMap,\n  ToastPosition,\n  ToasterId,\n  ToasterOptions,\n} from './types';\nimport { EVENTS } from './constants';\n\nexport function useToaster<TElement extends HTMLElement = HTMLDivElement>(options: Partial<ToasterOptions> = {}) {\n  const forceUpdate = useForceUpdate();\n  const { toasterId: userToasterId, shortcuts } = options;\n  // Currently the toaster options can never be changed at runtime\n  const [toaster] = React.useState(() => createToaster(options));\n  const { targetDocument } = useFluent();\n\n  const lastActiveElementRef = React.useRef<HTMLElement | null>(null);\n\n  const isCorrectToaster = useEventCallback((toasterId: ToasterId | undefined) => {\n    return toasterId === userToasterId;\n  });\n\n  const isFocusShortcut = useEventCallback((e: KeyboardEvent) => {\n    if (shortcuts?.focus) {\n      return shortcuts.focus(e);\n    }\n  });\n\n  const tryRestoreFocus = React.useCallback(() => {\n    lastActiveElementRef.current?.focus();\n    lastActiveElementRef.current = null;\n  }, []);\n\n  const pauseAllToasts = React.useCallback(() => {\n    toaster.visibleToasts.forEach(toastId => {\n      const toast = toaster.toasts.get(toastId);\n      toast?.imperativeRef.current?.pause();\n    });\n  }, [toaster]);\n\n  const playAllToasts = React.useCallback(() => {\n    toaster.visibleToasts.forEach(toastId => {\n      const toast = toaster.toasts.get(toastId);\n      toast?.imperativeRef.current?.play();\n    });\n  }, [toaster]);\n\n  const getMostRecentVisibleToast = React.useCallback(() => {\n    return Array.from(toaster.visibleToasts).reduce((cur, next) => {\n      const toast = toaster.toasts.get(next);\n      if (!toast) {\n        return cur;\n      }\n\n      if (!cur) {\n        return toast;\n      }\n\n      if (cur.order < toast?.order) {\n        return toast;\n      }\n\n      return cur;\n    }, undefined as Toast | undefined);\n  }, [toaster]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const addToastListener = <TType extends keyof ToastListenerMap>(\n      eventType: TType,\n      callback: ToastListenerMap[TType],\n    ) => {\n      const listener: ToastListenerMap[TType] = (e: CustomEvent<CommonToastDetail>) => {\n        if (!isCorrectToaster(e.detail.toasterId)) {\n          return;\n        }\n\n        callback(e as CustomEvent<ShowToastEventDetail>);\n        forceUpdate();\n      };\n\n      targetDocument.addEventListener(eventType, listener as () => void);\n      return () => targetDocument.removeEventListener(eventType, listener as () => void);\n    };\n\n    const buildToast: ToastListenerMap[typeof EVENTS.show] = e => {\n      toaster.buildToast(e.detail, forceUpdate);\n    };\n\n    const dismissToast: ToastListenerMap[typeof EVENTS.dismiss] = e => {\n      toaster.dismissToast(e.detail.toastId);\n    };\n\n    const updateToast: ToastListenerMap[typeof EVENTS.update] = e => {\n      toaster.updateToast(e.detail);\n    };\n\n    const dismissAllToasts: ToastListenerMap[typeof EVENTS.dismissAll] = e => {\n      toaster.dismissAllToasts();\n    };\n\n    const pauseToast: ToastListenerMap[typeof EVENTS.pause] = e => {\n      const toast = toaster.toasts.get(e.detail.toastId);\n      if (toast) {\n        toast.imperativeRef.current?.pause();\n      }\n    };\n\n    const playToast: ToastListenerMap[typeof EVENTS.play] = e => {\n      const toast = toaster.toasts.get(e.detail.toastId);\n      if (toast) {\n        toast.imperativeRef.current?.play();\n      }\n    };\n\n    const cleanupBuildListener = addToastListener(EVENTS.show, buildToast);\n    const cleanupUpdateListener = addToastListener(EVENTS.update, updateToast);\n    const cleanupDismissListener = addToastListener(EVENTS.dismiss, dismissToast);\n    const cleanupDismissAllListener = addToastListener(EVENTS.dismissAll, dismissAllToasts);\n    const cleanupPauseListener = addToastListener(EVENTS.pause, pauseToast);\n    const cleanupPlayListener = addToastListener(EVENTS.play, playToast);\n\n    const focusShortcutListener = (e: KeyboardEvent) => {\n      if (isFocusShortcut(e)) {\n        pauseAllToasts();\n        const mostRecentToast = getMostRecentVisibleToast();\n\n        if (mostRecentToast) {\n          lastActiveElementRef.current = isHTMLElement(targetDocument.activeElement)\n            ? targetDocument.activeElement\n            : null;\n          mostRecentToast.imperativeRef.current?.focus();\n        }\n      }\n    };\n\n    targetDocument.addEventListener('keydown', focusShortcutListener);\n\n    return () => {\n      cleanupBuildListener();\n      cleanupDismissAllListener();\n      cleanupUpdateListener();\n      cleanupDismissListener();\n      cleanupPauseListener();\n      cleanupPlayListener();\n\n      targetDocument.removeEventListener('keydown', focusShortcutListener);\n    };\n  }, [\n    toaster,\n    forceUpdate,\n    targetDocument,\n    isCorrectToaster,\n    pauseAllToasts,\n    getMostRecentVisibleToast,\n    isFocusShortcut,\n  ]);\n\n  const toastsToRender = (() => {\n    if (!toaster) {\n      return new Map<ToastPosition, Toast[]>();\n    }\n\n    const toRender = new Map<ToastPosition, Toast[]>();\n    const toasts = Array.from(toaster.toasts.values());\n\n    toasts.forEach(toast => {\n      const { position } = toast;\n      toRender.has(position) || toRender.set(position, []);\n      if (position.startsWith('bottom')) {\n        toRender.get(position)!.push(toast);\n      } else {\n        toRender.get(position)!.unshift(toast);\n      }\n    });\n\n    return toRender;\n  })();\n\n  return {\n    isToastVisible: toaster.isToastVisible,\n    toastsToRender,\n    pauseAllToasts,\n    playAllToasts,\n    tryRestoreFocus,\n  };\n}\n"],"names":["React","isHTMLElement","useEventCallback","useForceUpdate","useFluent_unstable","useFluent","createToaster","EVENTS","useToaster","options","forceUpdate","toasterId","userToasterId","shortcuts","toaster","useState","targetDocument","lastActiveElementRef","useRef","isCorrectToaster","isFocusShortcut","e","focus","tryRestoreFocus","useCallback","current","pauseAllToasts","visibleToasts","forEach","toastId","toast","toasts","get","imperativeRef","pause","playAllToasts","play","getMostRecentVisibleToast","Array","from","reduce","cur","next","order","undefined","useEffect","addToastListener","eventType","callback","listener","detail","addEventListener","removeEventListener","buildToast","dismissToast","updateToast","dismissAllToasts","pauseToast","playToast","cleanupBuildListener","show","cleanupUpdateListener","update","cleanupDismissListener","dismiss","cleanupDismissAllListener","dismissAll","cleanupPauseListener","cleanupPlayListener","focusShortcutListener","mostRecentToast","activeElement","toastsToRender","Map","toRender","values","position","has","set","startsWith","push","unshift","isToastVisible"],"mappings":"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"}
+{"version":3,"sources":["useToaster.ts"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useEventCallback, useForceUpdate } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createToaster } from './vanilla';\nimport type {\n  CommonToastDetail,\n  ShowToastEventDetail,\n  Toast,\n  ToastListenerMap,\n  ToastPosition,\n  ToasterId,\n  ToasterOptions,\n} from './types';\nimport { EVENTS } from './constants';\n\nexport function useToaster<TElement extends HTMLElement = HTMLDivElement>(options: Partial<ToasterOptions> = {}) {\n  const forceUpdate = useForceUpdate();\n  const { toasterId: userToasterId, shortcuts } = options;\n  // Currently the toaster options can never be changed at runtime\n  const [toaster] = React.useState(() => createToaster(options));\n  const { targetDocument } = useFluent();\n\n  const lastActiveElementRef = React.useRef<HTMLElement | null>(null);\n\n  const isCorrectToaster = useEventCallback((toasterId: ToasterId | undefined) => {\n    return toasterId === userToasterId;\n  });\n\n  const isFocusShortcut = useEventCallback((e: KeyboardEvent) => {\n    if (shortcuts?.focus) {\n      return shortcuts.focus(e);\n    }\n  });\n\n  const pauseAllToasts = React.useCallback(() => {\n    toaster.visibleToasts.forEach(toastId => {\n      const toast = toaster.toasts.get(toastId);\n      toast?.imperativeRef.current?.pause();\n    });\n  }, [toaster]);\n\n  const playAllToasts = React.useCallback(() => {\n    toaster.visibleToasts.forEach(toastId => {\n      const toast = toaster.toasts.get(toastId);\n      toast?.imperativeRef.current?.play();\n    });\n  }, [toaster]);\n\n  const getMostRecentVisibleToast = React.useCallback(() => {\n    return Array.from(toaster.visibleToasts).reduce((cur, next) => {\n      const toast = toaster.toasts.get(next);\n      if (!toast) {\n        return cur;\n      }\n\n      if (!cur) {\n        return toast;\n      }\n\n      if (cur.order < toast?.order) {\n        return toast;\n      }\n\n      return cur;\n    }, undefined as Toast | undefined);\n  }, [toaster]);\n\n  const tryRestoreFocus = React.useCallback(() => {\n    const mostRecentToast = getMostRecentVisibleToast();\n    if (mostRecentToast?.imperativeRef.current) {\n      mostRecentToast.imperativeRef.current.focus();\n    } else {\n      lastActiveElementRef.current?.focus();\n      lastActiveElementRef.current = null;\n    }\n  }, [getMostRecentVisibleToast]);\n\n  const closeAllToasts = React.useCallback(() => {\n    toaster.visibleToasts.forEach(toastId => {\n      const toast = toaster.toasts.get(toastId);\n      toast?.close();\n    });\n\n    tryRestoreFocus();\n  }, [toaster, tryRestoreFocus]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const addToastListener = <TType extends keyof ToastListenerMap>(\n      eventType: TType,\n      callback: ToastListenerMap[TType],\n    ) => {\n      const listener: ToastListenerMap[TType] = (e: CustomEvent<CommonToastDetail>) => {\n        if (!isCorrectToaster(e.detail.toasterId)) {\n          return;\n        }\n\n        callback(e as CustomEvent<ShowToastEventDetail>);\n        forceUpdate();\n      };\n\n      targetDocument.addEventListener(eventType, listener as () => void);\n      return () => targetDocument.removeEventListener(eventType, listener as () => void);\n    };\n\n    const buildToast: ToastListenerMap[typeof EVENTS.show] = e => {\n      toaster.buildToast(e.detail, forceUpdate);\n    };\n\n    const dismissToast: ToastListenerMap[typeof EVENTS.dismiss] = e => {\n      toaster.dismissToast(e.detail.toastId);\n    };\n\n    const updateToast: ToastListenerMap[typeof EVENTS.update] = e => {\n      toaster.updateToast(e.detail);\n    };\n\n    const dismissAllToasts: ToastListenerMap[typeof EVENTS.dismissAll] = e => {\n      toaster.dismissAllToasts();\n    };\n\n    const pauseToast: ToastListenerMap[typeof EVENTS.pause] = e => {\n      const toast = toaster.toasts.get(e.detail.toastId);\n      if (toast) {\n        toast.imperativeRef.current?.pause();\n      }\n    };\n\n    const playToast: ToastListenerMap[typeof EVENTS.play] = e => {\n      const toast = toaster.toasts.get(e.detail.toastId);\n      if (toast) {\n        toast.imperativeRef.current?.play();\n      }\n    };\n\n    const cleanupBuildListener = addToastListener(EVENTS.show, buildToast);\n    const cleanupUpdateListener = addToastListener(EVENTS.update, updateToast);\n    const cleanupDismissListener = addToastListener(EVENTS.dismiss, dismissToast);\n    const cleanupDismissAllListener = addToastListener(EVENTS.dismissAll, dismissAllToasts);\n    const cleanupPauseListener = addToastListener(EVENTS.pause, pauseToast);\n    const cleanupPlayListener = addToastListener(EVENTS.play, playToast);\n\n    const focusShortcutListener = (e: KeyboardEvent) => {\n      if (isFocusShortcut(e)) {\n        pauseAllToasts();\n        const mostRecentToast = getMostRecentVisibleToast();\n\n        if (mostRecentToast) {\n          lastActiveElementRef.current = isHTMLElement(targetDocument.activeElement)\n            ? targetDocument.activeElement\n            : null;\n          mostRecentToast.imperativeRef.current?.focus();\n        }\n      }\n    };\n\n    targetDocument.addEventListener('keydown', focusShortcutListener);\n\n    return () => {\n      cleanupBuildListener();\n      cleanupDismissAllListener();\n      cleanupUpdateListener();\n      cleanupDismissListener();\n      cleanupPauseListener();\n      cleanupPlayListener();\n\n      targetDocument.removeEventListener('keydown', focusShortcutListener);\n    };\n  }, [\n    toaster,\n    forceUpdate,\n    targetDocument,\n    isCorrectToaster,\n    pauseAllToasts,\n    getMostRecentVisibleToast,\n    isFocusShortcut,\n  ]);\n\n  const toastsToRender = (() => {\n    if (!toaster) {\n      return new Map<ToastPosition, Toast[]>();\n    }\n\n    const toRender = new Map<ToastPosition, Toast[]>();\n    const toasts = Array.from(toaster.toasts.values());\n\n    toasts.forEach(toast => {\n      const { position } = toast;\n      toRender.has(position) || toRender.set(position, []);\n      if (position.startsWith('bottom')) {\n        toRender.get(position)!.push(toast);\n      } else {\n        toRender.get(position)!.unshift(toast);\n      }\n    });\n\n    return toRender;\n  })();\n\n  return {\n    isToastVisible: toaster.isToastVisible,\n    toastsToRender,\n    pauseAllToasts,\n    playAllToasts,\n    tryRestoreFocus,\n    closeAllToasts,\n  };\n}\n"],"names":["React","isHTMLElement","useEventCallback","useForceUpdate","useFluent_unstable","useFluent","createToaster","EVENTS","useToaster","options","forceUpdate","toasterId","userToasterId","shortcuts","toaster","useState","targetDocument","lastActiveElementRef","useRef","isCorrectToaster","isFocusShortcut","e","focus","pauseAllToasts","useCallback","visibleToasts","forEach","toastId","toast","toasts","get","imperativeRef","current","pause","playAllToasts","play","getMostRecentVisibleToast","Array","from","reduce","cur","next","order","undefined","tryRestoreFocus","mostRecentToast","closeAllToasts","close","useEffect","addToastListener","eventType","callback","listener","detail","addEventListener","removeEventListener","buildToast","dismissToast","updateToast","dismissAllToasts","pauseToast","playToast","cleanupBuildListener","show","cleanupUpdateListener","update","cleanupDismissListener","dismiss","cleanupDismissAllListener","dismissAll","cleanupPauseListener","cleanupPlayListener","focusShortcutListener","activeElement","toastsToRender","Map","toRender","values","position","has","set","startsWith","push","unshift","isToastVisible"],"mappings":"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"}

package/lib-commonjs/components/AriaLive/renderAriaLive.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderAriaLive_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderAriaLive_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactJsxRuntime.Fragment, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.assertive, slotProps.assertive), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.polite, slotProps.polite));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactJsxRuntime.Fragment, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.assertive, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.polite, null));
 };

package/lib-commonjs/components/AriaLive/renderAriaLive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAriaLive.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of AriaLive\n */ export const renderAriaLive_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(slots.assertive, slotProps.assertive), /*#__PURE__*/ createElement(slots.polite, slotProps.polite));\n};\n"],"names":["renderAriaLive_unstable","state","slots","slotProps","getSlotsNext","createElement","Fragment","assertive","polite"],"mappings":"AAAA,wBAAwB,GAAG,sBAAsB,GAAG,uBAAuB;;;;+BAI1DA;;aAAAA;;iCAJqG;gCACzF;AAGlB,MAAMA,0BAA0B,CAACC,QAAQ;IAChD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACC,yBAAQ,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACH,MAAMK,SAAS,EAAEJ,UAAUI,SAAS,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMM,MAAM,EAAEL,UAAUK,MAAM;AACpL"}
+{"version":3,"sources":["renderAriaLive.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of AriaLive\n */ export const renderAriaLive_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(state.assertive, null), /*#__PURE__*/ createElement(state.polite, null));\n};\n"],"names":["renderAriaLive_unstable","state","assertSlots","createElement","Fragment","assertive","polite"],"mappings":"AAAA,wBAAwB,GAAG,sBAAsB,GAAG,uBAAuB;;;;+BAI1DA;;aAAAA;;iCAJqG;gCAC1F;AAGjB,MAAMA,0BAA0B,CAACC,QAAQ;IAChDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACC,yBAAQ,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACF,MAAMI,SAAS,EAAE,IAAI,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMK,MAAM,EAAE,IAAI;AACzJ"}

package/lib-commonjs/components/AriaLive/useAriaLive.js

@@ -57,19 +57,19 @@ const useAriaLive_unstable = (props)=>{
             assertive: 'div',
             polite: 'div'
         },
-        assertive: (0, _reactUtilities.resolveShorthand)(props.assertive, {
-            required: true,
+        assertive: _reactUtilities.slot.always(props.assertive, {
             defaultProps: {
                 'aria-live': 'assertive',
                 children: assertiveMessage
-            }
+            },
+            elementType: 'div'
         }),
-        polite: (0, _reactUtilities.resolveShorthand)(props.polite, {
-            required: true,
+        polite: _reactUtilities.slot.always(props.polite, {
             defaultProps: {
                 'aria-live': 'polite',
                 children: politeMessage
-            }
+            },
+            elementType: 'div'
         })
     };
 };

package/lib-commonjs/components/AriaLive/useAriaLive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAriaLive.js"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluentui/react-utilities';\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;\n/**\n * Create the state required to render AriaLive.\n *\n * The returned state can be modified with hooks such as useAriaLiveStyles_unstable,\n * before being passed to renderAriaLive_unstable.\n *\n * @param props - props from this instance of AriaLive\n */ export const useAriaLive_unstable = (props)=>{\n    const [currentMessage, setCurrentMessage] = React.useState(undefined);\n    // Can't rely on Date.now() if user invokes announce more than once in a code block\n    const order = React.useRef(0);\n    const [messageQueue] = React.useState(()=>createPriorityQueue((a, b)=>{\n            if (a.politeness === b.politeness) {\n                return a.createdAt - b.createdAt;\n            }\n            return a.politeness === 'assertive' ? -1 : 1;\n        }));\n    const announce = useEventCallback((message, options)=>{\n        const { politeness  } = options;\n        if (message === (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.message)) {\n            return;\n        }\n        const liveMessage = {\n            message,\n            politeness,\n            createdAt: order.current++\n        };\n        if (!currentMessage) {\n            setCurrentMessage(liveMessage);\n        } else {\n            messageQueue.enqueue(liveMessage);\n        }\n    });\n    React.useEffect(()=>{\n        const timeout = setTimeout(()=>{\n            if (messageQueue.peek()) {\n                setCurrentMessage(messageQueue.dequeue());\n            } else {\n                setCurrentMessage(undefined);\n            }\n        }, MESSAGE_DURATION);\n        return ()=>clearTimeout(timeout);\n    }, [\n        currentMessage,\n        messageQueue\n    ]);\n    React.useImperativeHandle(props.announceRef, ()=>announce);\n    const politeMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'polite' ? currentMessage.message : undefined;\n    const assertiveMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'assertive' ? currentMessage.message : undefined;\n    return {\n        components: {\n            assertive: 'div',\n            polite: 'div'\n        },\n        assertive: resolveShorthand(props.assertive, {\n            required: true,\n            defaultProps: {\n                'aria-live': 'assertive',\n                children: assertiveMessage\n            }\n        }),\n        polite: resolveShorthand(props.polite, {\n            required: true,\n            defaultProps: {\n                'aria-live': 'polite',\n                children: politeMessage\n            }\n        })\n    };\n};\n"],"names":["useAriaLive_unstable","MESSAGE_DURATION","props","currentMessage","setCurrentMessage","React","useState","undefined","order","useRef","messageQueue","createPriorityQueue","a","b","politeness","createdAt","announce","useEventCallback","message","options","liveMessage","current","enqueue","useEffect","timeout","setTimeout","peek","dequeue","clearTimeout","useImperativeHandle","announceRef","politeMessage","assertiveMessage","components","assertive","polite","resolveShorthand","required","defaultProps","children"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACiD;AACxE,gHAAgH,GAAG,MAAMC,mBAAmB;AAQjI,MAAMD,uBAAuB,CAACE,QAAQ;IAC7C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,OAAMC,QAAQ,CAACC;IAC3D,mFAAmF;IACnF,MAAMC,QAAQH,OAAMI,MAAM,CAAC;IAC3B,MAAM,CAACC,aAAa,GAAGL,OAAMC,QAAQ,CAAC,IAAIK,IAAAA,mCAAmB,EAAC,CAACC,GAAGC,IAAI;YAC9D,IAAID,EAAEE,UAAU,KAAKD,EAAEC,UAAU,EAAE;gBAC/B,OAAOF,EAAEG,SAAS,GAAGF,EAAEE,SAAS;YACpC,CAAC;YACD,OAAOH,EAAEE,UAAU,KAAK,cAAc,CAAC,IAAI,CAAC;QAChD;IACJ,MAAME,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,SAASC,UAAU;QAClD,MAAM,EAAEL,WAAU,EAAG,GAAGK;QACxB,IAAID,YAAaf,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAee,OAAO,AAAD,GAAI;YACtG;QACJ,CAAC;QACD,MAAME,cAAc;YAChBF;YACAJ;YACAC,WAAWP,MAAMa,OAAO;QAC5B;QACA,IAAI,CAAClB,gBAAgB;YACjBC,kBAAkBgB;QACtB,OAAO;YACHV,aAAaY,OAAO,CAACF;QACzB,CAAC;IACL;IACAf,OAAMkB,SAAS,CAAC,IAAI;QAChB,MAAMC,UAAUC,WAAW,IAAI;YAC3B,IAAIf,aAAagB,IAAI,IAAI;gBACrBtB,kBAAkBM,aAAaiB,OAAO;YAC1C,OAAO;gBACHvB,kBAAkBG;YACtB,CAAC;QACL,GAAGN;QACH,OAAO,IAAI2B,aAAaJ;IAC5B,GAAG;QACCrB;QACAO;KACH;IACDL,OAAMwB,mBAAmB,CAAC3B,MAAM4B,WAAW,EAAE,IAAId;IACjD,MAAMe,gBAAgB,AAAC5B,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeW,UAAU,AAAD,MAAO,WAAWX,eAAee,OAAO,GAAGX,SAAS;IACnK,MAAMyB,mBAAmB,AAAC7B,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeW,UAAU,AAAD,MAAO,cAAcX,eAAee,OAAO,GAAGX,SAAS;IACzK,OAAO;QACH0B,YAAY;YACRC,WAAW;YACXC,QAAQ;QACZ;QACAD,WAAWE,IAAAA,gCAAgB,EAAClC,MAAMgC,SAAS,EAAE;YACzCG,UAAU,IAAI;YACdC,cAAc;gBACV,aAAa;gBACbC,UAAUP;YACd;QACJ;QACAG,QAAQC,IAAAA,gCAAgB,EAAClC,MAAMiC,MAAM,EAAE;YACnCE,UAAU,IAAI;YACdC,cAAc;gBACV,aAAa;gBACbC,UAAUR;YACd;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useAriaLive.js"],"sourcesContent":["import * as React from 'react';\nimport { createPriorityQueue, useEventCallback, slot } from '@fluentui/react-utilities';\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;\n/**\n * Create the state required to render AriaLive.\n *\n * The returned state can be modified with hooks such as useAriaLiveStyles_unstable,\n * before being passed to renderAriaLive_unstable.\n *\n * @param props - props from this instance of AriaLive\n */ export const useAriaLive_unstable = (props)=>{\n    const [currentMessage, setCurrentMessage] = React.useState(undefined);\n    // Can't rely on Date.now() if user invokes announce more than once in a code block\n    const order = React.useRef(0);\n    const [messageQueue] = React.useState(()=>createPriorityQueue((a, b)=>{\n            if (a.politeness === b.politeness) {\n                return a.createdAt - b.createdAt;\n            }\n            return a.politeness === 'assertive' ? -1 : 1;\n        }));\n    const announce = useEventCallback((message, options)=>{\n        const { politeness  } = options;\n        if (message === (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.message)) {\n            return;\n        }\n        const liveMessage = {\n            message,\n            politeness,\n            createdAt: order.current++\n        };\n        if (!currentMessage) {\n            setCurrentMessage(liveMessage);\n        } else {\n            messageQueue.enqueue(liveMessage);\n        }\n    });\n    React.useEffect(()=>{\n        const timeout = setTimeout(()=>{\n            if (messageQueue.peek()) {\n                setCurrentMessage(messageQueue.dequeue());\n            } else {\n                setCurrentMessage(undefined);\n            }\n        }, MESSAGE_DURATION);\n        return ()=>clearTimeout(timeout);\n    }, [\n        currentMessage,\n        messageQueue\n    ]);\n    React.useImperativeHandle(props.announceRef, ()=>announce);\n    const politeMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'polite' ? currentMessage.message : undefined;\n    const assertiveMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'assertive' ? currentMessage.message : undefined;\n    return {\n        components: {\n            assertive: 'div',\n            polite: 'div'\n        },\n        assertive: slot.always(props.assertive, {\n            defaultProps: {\n                'aria-live': 'assertive',\n                children: assertiveMessage\n            },\n            elementType: 'div'\n        }),\n        polite: slot.always(props.polite, {\n            defaultProps: {\n                'aria-live': 'polite',\n                children: politeMessage\n            },\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useAriaLive_unstable","MESSAGE_DURATION","props","currentMessage","setCurrentMessage","React","useState","undefined","order","useRef","messageQueue","createPriorityQueue","a","b","politeness","createdAt","announce","useEventCallback","message","options","liveMessage","current","enqueue","useEffect","timeout","setTimeout","peek","dequeue","clearTimeout","useImperativeHandle","announceRef","politeMessage","assertiveMessage","components","assertive","polite","slot","always","defaultProps","children","elementType"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACqC;AAC5D,gHAAgH,GAAG,MAAMC,mBAAmB;AAQjI,MAAMD,uBAAuB,CAACE,QAAQ;IAC7C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,OAAMC,QAAQ,CAACC;IAC3D,mFAAmF;IACnF,MAAMC,QAAQH,OAAMI,MAAM,CAAC;IAC3B,MAAM,CAACC,aAAa,GAAGL,OAAMC,QAAQ,CAAC,IAAIK,IAAAA,mCAAmB,EAAC,CAACC,GAAGC,IAAI;YAC9D,IAAID,EAAEE,UAAU,KAAKD,EAAEC,UAAU,EAAE;gBAC/B,OAAOF,EAAEG,SAAS,GAAGF,EAAEE,SAAS;YACpC,CAAC;YACD,OAAOH,EAAEE,UAAU,KAAK,cAAc,CAAC,IAAI,CAAC;QAChD;IACJ,MAAME,WAAWC,IAAAA,gCAAgB,EAAC,CAACC,SAASC,UAAU;QAClD,MAAM,EAAEL,WAAU,EAAG,GAAGK;QACxB,IAAID,YAAaf,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAee,OAAO,AAAD,GAAI;YACtG;QACJ,CAAC;QACD,MAAME,cAAc;YAChBF;YACAJ;YACAC,WAAWP,MAAMa,OAAO;QAC5B;QACA,IAAI,CAAClB,gBAAgB;YACjBC,kBAAkBgB;QACtB,OAAO;YACHV,aAAaY,OAAO,CAACF;QACzB,CAAC;IACL;IACAf,OAAMkB,SAAS,CAAC,IAAI;QAChB,MAAMC,UAAUC,WAAW,IAAI;YAC3B,IAAIf,aAAagB,IAAI,IAAI;gBACrBtB,kBAAkBM,aAAaiB,OAAO;YAC1C,OAAO;gBACHvB,kBAAkBG;YACtB,CAAC;QACL,GAAGN;QACH,OAAO,IAAI2B,aAAaJ;IAC5B,GAAG;QACCrB;QACAO;KACH;IACDL,OAAMwB,mBAAmB,CAAC3B,MAAM4B,WAAW,EAAE,IAAId;IACjD,MAAMe,gBAAgB,AAAC5B,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeW,UAAU,AAAD,MAAO,WAAWX,eAAee,OAAO,GAAGX,SAAS;IACnK,MAAMyB,mBAAmB,AAAC7B,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeW,UAAU,AAAD,MAAO,cAAcX,eAAee,OAAO,GAAGX,SAAS;IACzK,OAAO;QACH0B,YAAY;YACRC,WAAW;YACXC,QAAQ;QACZ;QACAD,WAAWE,oBAAI,CAACC,MAAM,CAACnC,MAAMgC,SAAS,EAAE;YACpCI,cAAc;gBACV,aAAa;gBACbC,UAAUP;YACd;YACAQ,aAAa;QACjB;QACAL,QAAQC,oBAAI,CAACC,MAAM,CAACnC,MAAMiC,MAAM,EAAE;YAC9BG,cAAc;gBACV,aAAa;gBACbC,UAAUR;YACd;YACAS,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/Timer/useTimerStyles.styles.js

@@ -7,10 +7,8 @@ Object.defineProperty(exports, "useBaseAnimationStyles", {
     get: ()=>useBaseAnimationStyles
 });
 const _react = require("@griffel/react");
-const useBaseAnimationStyles = /*#__PURE__*/ (0, _react["__resetStyles"])("r17x0t3n", "r75casi", [
-    ".r17x0t3n{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}",
-    "@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}",
-    "@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}",
+const useBaseAnimationStyles = /*#__PURE__*/ (0, _react["__resetStyles"])("r16zaflb", "r75casi", [
+    ".r16zaflb{animation-name:rsacmq1;}",
     "@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}",
-    ".r75casi{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}"
+    ".r75casi{animation-name:rsacmq1;}"
 ]); //# sourceMappingURL=useTimerStyles.styles.js.map

package/lib-commonjs/components/Timer/useTimerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTimerStyles.styles.js"],"sourcesContent":["import { __resetStyles } from '@griffel/react';\nexport const useBaseAnimationStyles = /*#__PURE__*/__resetStyles(\"r17x0t3n\", \"r75casi\", [\".r17x0t3n{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}\", \"@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}\", \"@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}\", \"@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}\", \".r75casi{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}\"]);\n//# sourceMappingURL=useTimerStyles.styles.js.map"],"names":["useBaseAnimationStyles","__resetStyles"],"mappings":";;;;+BACaA;;aAAAA;;uBADiB;AACvB,MAAMA,yBAAyB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,YAAY,WAAW;IAAC;IAAqE;IAA8D;IAA8D;IAAsD;CAAmE,GACnZ,iDAAiD"}
+{"version":3,"sources":["useTimerStyles.styles.js"],"sourcesContent":["import { __resetStyles } from '@griffel/react';\nexport const useBaseAnimationStyles = /*#__PURE__*/__resetStyles(\"r16zaflb\", \"r75casi\", [\".r16zaflb{animation-name:rsacmq1;}\", \"@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}\", \".r75casi{animation-name:rsacmq1;}\"]);\n//# sourceMappingURL=useTimerStyles.styles.js.map"],"names":["useBaseAnimationStyles","__resetStyles"],"mappings":";;;;+BACaA;;aAAAA;;uBADiB;AACvB,MAAMA,yBAAyB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,YAAY,WAAW;IAAC;IAAsC;IAAsD;CAAoC,GACzN,iDAAiD"}

package/lib-commonjs/components/Toast/renderToast.js

@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const renderToast_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    (0, _reactUtilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactSharedContexts.BackgroundAppearanceProvider, {
         value: contextValues.backgroundAppearance
-    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null));
 };

package/lib-commonjs/components/Toast/renderToast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToast.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';\n/**\n * Render the final JSX of Toast\n */ export const renderToast_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(BackgroundAppearanceProvider, {\n        value: contextValues.backgroundAppearance\n    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));\n};\n"],"names":["renderToast_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","BackgroundAppearanceProvider","value","backgroundAppearance","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;qCACgB;AAGlC,MAAMA,uBAAuB,CAACC,OAAOC,gBAAgB;IAC5D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACC,iDAA4B,EAAE;QAC7DC,OAAON,cAAcO,oBAAoB;IAC7C,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,IAAI,EAAEN,UAAUM,IAAI;AAC7D"}
+{"version":3,"sources":["renderToast.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';\n/**\n * Render the final JSX of Toast\n */ export const renderToast_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(BackgroundAppearanceProvider, {\n        value: contextValues.backgroundAppearance\n    }, /*#__PURE__*/ createElement(state.root, null));\n};\n"],"names":["renderToast_unstable","state","contextValues","assertSlots","createElement","BackgroundAppearanceProvider","value","backgroundAppearance","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;qCACiB;AAGlC,MAAMA,uBAAuB,CAACC,OAAOC,gBAAgB;IAC5DC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACC,iDAA4B,EAAE;QAC7DC,OAAOJ,cAAcK,oBAAoB;IAC7C,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,IAAI,EAAE,IAAI;AACnD"}

package/lib-commonjs/components/Toast/useToast.js

@@ -14,9 +14,11 @@ const useToast_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         backgroundAppearance: props.appearance
     };

package/lib-commonjs/components/Toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToast.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */ export const useToast_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref,\n            ...props\n        }),\n        backgroundAppearance: props.appearance\n    };\n};\n"],"names":["useToast_unstable","props","ref","components","root","getNativeElementProps","backgroundAppearance","appearance"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACe;AAS3B,MAAMA,oBAAoB,CAACC,OAAOC,MAAM;IAC/C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BH;YACA,GAAGD,KAAK;QACZ;QACAK,sBAAsBL,MAAMM,UAAU;IAC1C;AACJ"}
+{"version":3,"sources":["useToast.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */ export const useToast_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        backgroundAppearance: props.appearance\n    };\n};\n"],"names":["useToast_unstable","props","ref","components","root","slot","always","getNativeElementProps","elementType","backgroundAppearance","appearance"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACqB;AASjC,MAAMA,oBAAoB,CAACC,OAAOC,MAAM;IAC/C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CL;YACA,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;QACAC,sBAAsBR,MAAMS,UAAU;IAC1C;AACJ"}

package/lib-commonjs/components/Toast/useToastStyles.styles.js

@@ -17,8 +17,8 @@ const toastClassNames = {
     root: 'fui-Toast'
 };
 const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rzyoxeq", "r1lipnsg", [
-    ".rzyoxeq{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}",
-    ".r1lipnsg{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"
+    ".rzyoxeq{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}",
+    ".r1lipnsg{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"
 ]);
 const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
     inverted: {

package/lib-commonjs/components/Toast/useToastStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n  root: 'fui-Toast'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rzyoxeq\", \"r1lipnsg\", [\".rzyoxeq{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\", \".r1lipnsg{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"f1w7i9ko\",\n    De3pzq: \"f5pduvr\"\n  }\n}, {\n  d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\", \".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}\"]\n});\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToastStyles.styles.js.map"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","inverted","sj55zd","De3pzq","d","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,eAAe,MAAfA;IAeAC,uBAAuB,MAAvBA;;uBAjBqD;AAE3D,MAAMD,kBAAkB;IAC7BE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,WAAW,YAAY;IAAC;IAA08B;CAA08B;AACp+D,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCC,UAAU;QACRC,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4D;KAAoE;AACtI;AAIO,MAAMT,0BAA0BU,CAAAA,QAAS;IAC9C,MAAMC,oBAAoBT;IAC1B,MAAMU,SAASR;IACfM,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,gBAAgBE,IAAI,EAAEU,mBAAmBD,MAAMK,oBAAoB,KAAK,cAAcH,OAAON,QAAQ,EAAEI,MAAMT,IAAI,CAACY,SAAS;IAC/J,OAAOH;AACT,GACA,iDAAiD"}
+{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n  root: 'fui-Toast'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rzyoxeq\", \"r1lipnsg\", [\".rzyoxeq{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\", \".r1lipnsg{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"f1w7i9ko\",\n    De3pzq: \"f5pduvr\"\n  }\n}, {\n  d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\", \".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}\"]\n});\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToastStyles.styles.js.map"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","inverted","sj55zd","De3pzq","d","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,eAAe,MAAfA;IAeAC,uBAAuB,MAAvBA;;uBAjBqD;AAE3D,MAAMD,kBAAkB;IAC7BE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,WAAW,YAAY;IAAC;IAA05B;CAA05B;AACp4D,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCC,UAAU;QACRC,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4D;KAAoE;AACtI;AAIO,MAAMT,0BAA0BU,CAAAA,QAAS;IAC9C,MAAMC,oBAAoBT;IAC1B,MAAMU,SAASR;IACfM,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,gBAAgBE,IAAI,EAAEU,mBAAmBD,MAAMK,oBAAoB,KAAK,cAAcH,OAAON,QAAQ,EAAEI,MAAMT,IAAI,CAACY,SAAS;IAC/J,OAAOH;AACT,GACA,iDAAiD"}

package/lib-commonjs/components/ToastBody/renderToastBody.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderToastBody_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderToastBody_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactJsxRuntime.Fragment, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root), slots.subtitle ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.subtitle, slotProps.subtitle) : null);
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactJsxRuntime.Fragment, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null), state.subtitle ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.subtitle, null) : null);
 };

package/lib-commonjs/components/ToastBody/renderToastBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastBody.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of ToastBody\n */ export const renderToastBody_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(slots.root, slotProps.root), slots.subtitle ? /*#__PURE__*/ createElement(slots.subtitle, slotProps.subtitle) : null);\n};\n"],"names":["renderToastBody_unstable","state","slots","slotProps","getSlotsNext","createElement","Fragment","root","subtitle"],"mappings":"AAAA,wBAAwB,GAAG,sBAAsB,GAAG,uBAAuB;;;;+BAI1DA;;aAAAA;;iCAJqG;gCACzF;AAGlB,MAAMA,2BAA2B,CAACC,QAAQ;IACjD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACC,yBAAQ,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACH,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,GAAGL,MAAMM,QAAQ,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,QAAQ,EAAEL,UAAUK,QAAQ,IAAI,IAAI;AACvM"}
+{"version":3,"sources":["renderToastBody.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of ToastBody\n */ export const renderToastBody_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(state.root, null), state.subtitle ? /*#__PURE__*/ createElement(state.subtitle, null) : null);\n};\n"],"names":["renderToastBody_unstable","state","assertSlots","createElement","Fragment","root","subtitle"],"mappings":"AAAA,wBAAwB,GAAG,sBAAsB,GAAG,uBAAuB;;;;+BAI1DA;;aAAAA;;iCAJqG;gCAC1F;AAGjB,MAAMA,2BAA2B,CAACC,QAAQ;IACjDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACC,yBAAQ,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACF,MAAMI,IAAI,EAAE,IAAI,GAAGJ,MAAMK,QAAQ,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACF,MAAMK,QAAQ,EAAE,IAAI,IAAI,IAAI;AAC/K"}

package/lib-commonjs/components/ToastBody/useToastBody.js

@@ -19,11 +19,15 @@ const useToastBody_unstable = (props, ref)=>{
             root: 'div',
             subtitle: 'div'
         },
-        subtitle: (0, _reactUtilities.resolveShorthand)(props.subtitle),
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        subtitle: _reactUtilities.slot.optional(props.subtitle, {
+            elementType: 'div'
+        }),
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             id: bodyId,
             ...props
+        }), {
+            elementType: 'div'
         }),
         backgroundAppearance
     };

package/lib-commonjs/components/ToastBody/useToastBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */ export const useToastBody_unstable = (props, ref)=>{\n    const backgroundAppearance = useBackgroundAppearance();\n    const { bodyId  } = useToastContainerContext();\n    return {\n        components: {\n            root: 'div',\n            subtitle: 'div'\n        },\n        subtitle: resolveShorthand(props.subtitle),\n        root: getNativeElementProps('div', {\n            ref,\n            id: bodyId,\n            ...props\n        }),\n        backgroundAppearance\n    };\n};\n"],"names":["useToastBody_unstable","props","ref","backgroundAppearance","useBackgroundAppearance","bodyId","useToastContainerContext","components","root","subtitle","resolveShorthand","getNativeElementProps","id"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACiC;uCACf;qCACD;AAS7B,MAAMA,wBAAwB,CAACC,OAAOC,MAAM;IACnD,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,MAAM,EAAEC,OAAM,EAAG,GAAGC,IAAAA,+CAAwB;IAC5C,OAAO;QACHC,YAAY;YACRC,MAAM;YACNC,UAAU;QACd;QACAA,UAAUC,IAAAA,gCAAgB,EAACT,MAAMQ,QAAQ;QACzCD,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YAC/BT;YACAU,IAAIP;YACJ,GAAGJ,KAAK;QACZ;QACAE;IACJ;AACJ"}
+{"version":3,"sources":["useToastBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */ export const useToastBody_unstable = (props, ref)=>{\n    const backgroundAppearance = useBackgroundAppearance();\n    const { bodyId  } = useToastContainerContext();\n    return {\n        components: {\n            root: 'div',\n            subtitle: 'div'\n        },\n        subtitle: slot.optional(props.subtitle, {\n            elementType: 'div'\n        }),\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            id: bodyId,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        backgroundAppearance\n    };\n};\n"],"names":["useToastBody_unstable","props","ref","backgroundAppearance","useBackgroundAppearance","bodyId","useToastContainerContext","components","root","subtitle","slot","optional","elementType","always","getNativeElementProps","id"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACqB;uCACH;qCACD;AAS7B,MAAMA,wBAAwB,CAACC,OAAOC,MAAM;IACnD,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,MAAM,EAAEC,OAAM,EAAG,GAAGC,IAAAA,+CAAwB;IAC5C,OAAO;QACHC,YAAY;YACRC,MAAM;YACNC,UAAU;QACd;QACAA,UAAUC,oBAAI,CAACC,QAAQ,CAACV,MAAMQ,QAAQ,EAAE;YACpCG,aAAa;QACjB;QACAJ,MAAME,oBAAI,CAACG,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CZ;YACAa,IAAIV;YACJ,GAAGJ,KAAK;QACZ,IAAI;YACAW,aAAa;QACjB;QACAT;IACJ;AACJ"}

package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js

@@ -18,10 +18,10 @@ const toastBodyClassNames = {
     subtitle: 'fui-ToastBody__subtitle'
 };
 const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rnxxsue", null, [
-    ".rnxxsue{-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}"
+    ".rnxxsue{grid-column-start:2;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}"
 ]);
 const useSubtitleBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rzjw1xk", null, [
-    ".rzjw1xk{padding-top:4px;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"
+    ".rzjw1xk{padding-top:4px;grid-column-start:2;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"
 ]);
 const useInvertedStyles = /*#__PURE__*/ (0, _react["__styles"])({
     root: {

package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n  root: 'fui-ToastBody',\n  subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rnxxsue\", null, [\".rnxxsue{-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}\"]);\nconst useSubtitleBaseClassName = /*#__PURE__*/__resetStyles(\"rzjw1xk\", null, [\".rzjw1xk{padding-top:4px;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}\"]);\nconst useInvertedStyles = /*#__PURE__*/__styles({\n  root: {\n    sj55zd: \"f1w7i9ko\"\n  },\n  subtitle: {\n    sj55zd: \"f1w7i9ko\"\n  }\n}, {\n  d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\"]\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */\nexport const useToastBodyStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const subtitleBaseClassName = useSubtitleBaseClassName();\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n  if (state.subtitle) {\n    state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useToastBodyStyles.styles.js.map"],"names":["toastBodyClassNames","useToastBodyStyles_unstable","root","subtitle","useRootBaseClassName","__resetStyles","useSubtitleBaseClassName","useInvertedStyles","__styles","sj55zd","d","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,mBAAmB,MAAnBA;IAmBAC,2BAA2B,MAA3BA;;uBArByC;AAE/C,MAAMD,sBAAsB;IACjCE,MAAM;IACNC,UAAU;AACZ;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAAuP;AACjU,MAAMC,2BAA2B,WAAW,GAAED,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAAuP;AACrU,MAAME,oBAAoB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC9CN,MAAM;QACJO,QAAQ;IACV;IACAN,UAAU;QACRM,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAA2D;AACjE;AAIO,MAAMT,8BAA8BU,CAAAA,QAAS;IAClD,MAAMC,oBAAoBR;IAC1B,MAAMS,wBAAwBP;IAC9B,MAAMQ,iBAAiBP;IACvBI,MAAMT,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,oBAAoBE,IAAI,EAAEU,mBAAmBD,MAAMM,oBAAoB,KAAK,cAAcH,eAAeZ,IAAI,EAAES,MAAMT,IAAI,CAACa,SAAS;IACvK,IAAIJ,MAAMR,QAAQ,EAAE;QAClBQ,MAAMR,QAAQ,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,oBAAoBG,QAAQ,EAAEU,uBAAuBF,MAAMM,oBAAoB,KAAK,cAAcH,eAAeX,QAAQ,EAAEQ,MAAMR,QAAQ,CAACY,SAAS;IAC7L,CAAC;IACD,OAAOJ;AACT,GACA,qDAAqD"}
+{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n  root: 'fui-ToastBody',\n  subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rnxxsue\", null, [\".rnxxsue{grid-column-start:2;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}\"]);\nconst useSubtitleBaseClassName = /*#__PURE__*/__resetStyles(\"rzjw1xk\", null, [\".rzjw1xk{padding-top:4px;grid-column-start:2;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}\"]);\nconst useInvertedStyles = /*#__PURE__*/__styles({\n  root: {\n    sj55zd: \"f1w7i9ko\"\n  },\n  subtitle: {\n    sj55zd: \"f1w7i9ko\"\n  }\n}, {\n  d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\"]\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */\nexport const useToastBodyStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const subtitleBaseClassName = useSubtitleBaseClassName();\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n  if (state.subtitle) {\n    state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useToastBodyStyles.styles.js.map"],"names":["toastBodyClassNames","useToastBodyStyles_unstable","root","subtitle","useRootBaseClassName","__resetStyles","useSubtitleBaseClassName","useInvertedStyles","__styles","sj55zd","d","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,mBAAmB,MAAnBA;IAmBAC,2BAA2B,MAA3BA;;uBArByC;AAE/C,MAAMD,sBAAsB;IACjCE,MAAM;IACNC,UAAU;AACZ;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAAiN;AAC3R,MAAMC,2BAA2B,WAAW,GAAED,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAAiN;AAC/R,MAAME,oBAAoB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC9CN,MAAM;QACJO,QAAQ;IACV;IACAN,UAAU;QACRM,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAA2D;AACjE;AAIO,MAAMT,8BAA8BU,CAAAA,QAAS;IAClD,MAAMC,oBAAoBR;IAC1B,MAAMS,wBAAwBP;IAC9B,MAAMQ,iBAAiBP;IACvBI,MAAMT,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,oBAAoBE,IAAI,EAAEU,mBAAmBD,MAAMM,oBAAoB,KAAK,cAAcH,eAAeZ,IAAI,EAAES,MAAMT,IAAI,CAACa,SAAS;IACvK,IAAIJ,MAAMR,QAAQ,EAAE;QAClBQ,MAAMR,QAAQ,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,oBAAoBG,QAAQ,EAAEU,uBAAuBF,MAAMM,oBAAoB,KAAK,cAAcH,eAAeX,QAAQ,EAAEQ,MAAMR,QAAQ,CAACY,SAAS;IAC7L,CAAC;IACD,OAAOJ;AACT,GACA,qDAAqD"}

package/lib-commonjs/components/ToastContainer/renderToastContainer.js

@@ -12,7 +12,7 @@ const _reactTransitionGroup = require("react-transition-group");
 const _toastContainerContext = require("../../contexts/toastContainerContext");
 const renderToastContainer_unstable = (state, contextValues)=>{
     const { onTransitionEntering , visible , transitionTimeout , remove , nodeRef  } = state;
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    (0, _reactUtilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactTransitionGroup.Transition, {
         in: visible,
         appear: true,
@@ -23,5 +23,5 @@ const renderToastContainer_unstable = (state, contextValues)=>{
         nodeRef: nodeRef
     }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_toastContainerContext.ToastContainerContextProvider, {
         value: contextValues.toast
-    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.timer, slotProps.timer)));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.timer, null)));
 };

package/lib-commonjs/components/ToastContainer/renderToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastContainer.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { Transition } from 'react-transition-group';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\n/**\n * Render the final JSX of ToastContainer\n */ export const renderToastContainer_unstable = (state, contextValues)=>{\n    const { onTransitionEntering , visible , transitionTimeout , remove , nodeRef  } = state;\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(Transition, {\n        in: visible,\n        appear: true,\n        unmountOnExit: true,\n        timeout: transitionTimeout,\n        onExited: remove,\n        onEntering: onTransitionEntering,\n        nodeRef: nodeRef\n    }, /*#__PURE__*/ createElement(ToastContainerContextProvider, {\n        value: contextValues.toast\n    }, /*#__PURE__*/ createElement(slots.root, slotProps.root), /*#__PURE__*/ createElement(slots.timer, slotProps.timer)));\n};\n"],"names":["renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","slots","slotProps","getSlotsNext","createElement","Transition","in","appear","unmountOnExit","timeout","onExited","onEntering","ToastContainerContextProvider","value","toast","root","timer"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;iCANkE;gCACtD;sCACF;uCACmB;AAGnC,MAAMA,gCAAgC,CAACC,OAAOC,gBAAgB;IACrE,MAAM,EAAEC,qBAAoB,EAAGC,QAAO,EAAGC,kBAAiB,EAAGC,OAAM,EAAGC,QAAO,EAAG,GAAGN;IACnF,MAAM,EAAEO,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACT;IAC5C,OAAO,WAAW,GAAGU,IAAAA,8BAAa,EAACC,gCAAU,EAAE;QAC3CC,IAAIT;QACJU,QAAQ,IAAI;QACZC,eAAe,IAAI;QACnBC,SAASX;QACTY,UAAUX;QACVY,YAAYf;QACZI,SAASA;IACb,GAAG,WAAW,GAAGI,IAAAA,8BAAa,EAACQ,oDAA6B,EAAE;QAC1DC,OAAOlB,cAAcmB,KAAK;IAC9B,GAAG,WAAW,GAAGV,IAAAA,8BAAa,EAACH,MAAMc,IAAI,EAAEb,UAAUa,IAAI,GAAG,WAAW,GAAGX,IAAAA,8BAAa,EAACH,MAAMe,KAAK,EAAEd,UAAUc,KAAK;AACxH"}
+{"version":3,"sources":["renderToastContainer.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Transition } from 'react-transition-group';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\n/**\n * Render the final JSX of ToastContainer\n */ export const renderToastContainer_unstable = (state, contextValues)=>{\n    const { onTransitionEntering , visible , transitionTimeout , remove , nodeRef  } = state;\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(Transition, {\n        in: visible,\n        appear: true,\n        unmountOnExit: true,\n        timeout: transitionTimeout,\n        onExited: remove,\n        onEntering: onTransitionEntering,\n        nodeRef: nodeRef\n    }, /*#__PURE__*/ createElement(ToastContainerContextProvider, {\n        value: contextValues.toast\n    }, /*#__PURE__*/ createElement(state.root, null), /*#__PURE__*/ createElement(state.timer, null)));\n};\n"],"names":["renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","assertSlots","createElement","Transition","in","appear","unmountOnExit","timeout","onExited","onEntering","ToastContainerContextProvider","value","toast","root","timer"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;iCANkE;gCACvD;sCACD;uCACmB;AAGnC,MAAMA,gCAAgC,CAACC,OAAOC,gBAAgB;IACrE,MAAM,EAAEC,qBAAoB,EAAGC,QAAO,EAAGC,kBAAiB,EAAGC,OAAM,EAAGC,QAAO,EAAG,GAAGN;IACnFO,IAAAA,2BAAW,EAACP;IACZ,OAAO,WAAW,GAAGQ,IAAAA,8BAAa,EAACC,gCAAU,EAAE;QAC3CC,IAAIP;QACJQ,QAAQ,IAAI;QACZC,eAAe,IAAI;QACnBC,SAAST;QACTU,UAAUT;QACVU,YAAYb;QACZI,SAASA;IACb,GAAG,WAAW,GAAGE,IAAAA,8BAAa,EAACQ,oDAA6B,EAAE;QAC1DC,OAAOhB,cAAciB,KAAK;IAC9B,GAAG,WAAW,GAAGV,IAAAA,8BAAa,EAACR,MAAMmB,IAAI,EAAE,IAAI,GAAG,WAAW,GAAGX,IAAAA,8BAAa,EAACR,MAAMoB,KAAK,EAAE,IAAI;AACnG"}