@fluentui/react-toast 9.0.6 → 9.1.1

package/lib/components/ToastContainer/useToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  useMergedRefs,\n  ExtractSlotProps,\n  Slot,\n  useEventCallback,\n  resolveShorthand,\n  useId,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nconst intentPolitenessMap = {\n  success: 'assertive',\n  warning: 'assertive',\n  error: 'assertive',\n  info: 'polite',\n} as const;\n\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */\nexport const useToastContainer_unstable = (\n  props: ToastContainerProps,\n  ref: React.Ref<HTMLElement>,\n): ToastContainerState => {\n  const {\n    visible,\n    children,\n    close: closeProp,\n    remove,\n    updateId,\n    announce,\n    data,\n    timeout: timerTimeout,\n    politeness: desiredPoliteness,\n    intent = 'info',\n    pauseOnHover,\n    pauseOnWindowBlur,\n    imperativeRef,\n    tryRestoreFocus,\n    ...rest\n  } = props;\n  const titleId = useId('toast-title');\n  const bodyId = useId('toast-body');\n  const toastRef = React.useRef<HTMLDivElement | null>(null);\n  const { targetDocument } = useFluent_unstable();\n  const [running, setRunning] = React.useState(false);\n  const imperativePauseRef = React.useRef(false);\n  const focusedToastBeforeClose = React.useRef(false);\n\n  const close = useEventCallback(() => {\n    const activeElement = targetDocument?.activeElement;\n    if (activeElement && toastRef.current?.contains(activeElement)) {\n      focusedToastBeforeClose.current = true;\n    }\n\n    closeProp();\n  });\n  const onStatusChange = useEventCallback((status: ToastStatus) => props.onStatusChange?.(null, { status, ...props }));\n  const pause = useEventCallback(() => setRunning(false));\n  const play = useEventCallback(() => {\n    if (imperativePauseRef.current) {\n      return;\n    }\n    const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null);\n    if (timerTimeout < 0) {\n      setRunning(true);\n      return;\n    }\n\n    if (!containsActive) {\n      setRunning(true);\n    }\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      const firstFocusable = findFirstFocusable(toastRef.current);\n      if (firstFocusable) {\n        firstFocusable.focus();\n      } else {\n        toastRef.current.focus();\n      }\n    },\n\n    play: () => {\n      imperativePauseRef.current = false;\n      play();\n    },\n    pause: () => {\n      imperativePauseRef.current = true;\n      pause();\n    },\n  }));\n\n  React.useEffect(() => {\n    return () => onStatusChange('unmounted');\n  }, [onStatusChange]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    if (pauseOnWindowBlur) {\n      targetDocument.defaultView?.addEventListener('focus', play);\n      targetDocument.defaultView?.addEventListener('blur', pause);\n      return () => {\n        targetDocument.defaultView?.removeEventListener('focus', play);\n        targetDocument.defaultView?.removeEventListener('blur', pause);\n      };\n    }\n  }, [targetDocument, pause, play, pauseOnWindowBlur]);\n\n  // It's impossible to animate to height: auto in CSS, the actual pixel value must be known\n  // Get the height of the toast before animation styles have been applied and set a CSS\n  // variable with its height. The CSS variable will be used by the styles\n  const onTransitionEntering = () => {\n    if (!toastRef.current) {\n      return;\n    }\n\n    const element = toastRef.current;\n    element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n  };\n\n  // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n  const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n\n  // Using a ref callback here because addEventListener supports `once`\n  const toastAnimationRef = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el && toastRef.current) {\n        toastRef.current.addEventListener(\n          'animationend',\n          () => {\n            // start toast once it's fully animated in\n            play();\n            onStatusChange('visible');\n          },\n          { once: true },\n        );\n      }\n    },\n    [play, onStatusChange],\n  );\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    pause();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    play();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      close();\n    }\n\n    userRootSlot?.onKeyDown?.(e);\n  });\n\n  React.useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const politeness = desiredPoliteness ?? intentPolitenessMap[intent];\n    announce(toastRef.current?.textContent ?? '', { politeness });\n  }, [announce, desiredPoliteness, toastRef, visible, updateId, intent]);\n\n  React.useEffect(() => {\n    return () => {\n      if (focusedToastBeforeClose.current) {\n        focusedToastBeforeClose.current = false;\n        tryRestoreFocus();\n      }\n    };\n  }, [tryRestoreFocus]);\n\n  return {\n    components: {\n      timer: Timer,\n      root: 'div',\n    },\n    timer: resolveShorthand<TimerProps>(\n      { key: updateId, onTimeout: close, running, timeout: timerTimeout ?? -1 },\n      { required: true },\n    ),\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, toastRef, toastAnimationRef),\n      children,\n      tabIndex: -1,\n      role: 'group',\n      'aria-labelledby': titleId,\n      'aria-describedby': bodyId,\n      ...rest,\n      ...userRootSlot,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n    }),\n    timerTimeout,\n    transitionTimeout: 500,\n    running,\n    visible,\n    remove,\n    close,\n    onTransitionEntering,\n    updateId,\n    nodeRef: toastRef,\n    intent,\n    titleId,\n    bodyId,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","useEventCallback","resolveShorthand","useId","useFluent_unstable","Timer","useFocusFinders","intentPolitenessMap","success","warning","error","info","useToastContainer_unstable","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","bodyId","toastRef","useRef","targetDocument","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","findFirstFocusable","useImperativeHandle","focus","firstFocusable","useEffect","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","onMouseLeave","onKeyDown","key","preventDefault","textContent","components","timer","onTimeout","required","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}
+{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  useMergedRefs,\n  ExtractSlotProps,\n  Slot,\n  useEventCallback,\n  useId,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\n\nconst intentPolitenessMap = {\n  success: 'assertive',\n  warning: 'assertive',\n  error: 'assertive',\n  info: 'polite',\n} as const;\n\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */\nexport const useToastContainer_unstable = (\n  props: ToastContainerProps,\n  ref: React.Ref<HTMLElement>,\n): ToastContainerState => {\n  const {\n    visible,\n    children,\n    close: closeProp,\n    remove,\n    updateId,\n    announce,\n    data,\n    timeout: timerTimeout,\n    politeness: desiredPoliteness,\n    intent = 'info',\n    pauseOnHover,\n    pauseOnWindowBlur,\n    imperativeRef,\n    tryRestoreFocus,\n    ...rest\n  } = props;\n  const titleId = useId('toast-title');\n  const bodyId = useId('toast-body');\n  const toastRef = React.useRef<HTMLDivElement | null>(null);\n  const { targetDocument } = useFluent_unstable();\n  const [running, setRunning] = React.useState(false);\n  const imperativePauseRef = React.useRef(false);\n  const focusedToastBeforeClose = React.useRef(false);\n  const focusableGroupAttribute = useFocusableGroup({\n    tabBehavior: 'limited-trap-focus',\n    // Users should only use Tab to focus into the toast\n    // Escape is already reserved to dismiss all toasts\n    ignoreDefaultKeydown: { Tab: true, Escape: true, Enter: true },\n  });\n\n  const close = useEventCallback(() => {\n    const activeElement = targetDocument?.activeElement;\n    if (activeElement && toastRef.current?.contains(activeElement)) {\n      focusedToastBeforeClose.current = true;\n    }\n\n    closeProp();\n  });\n  const onStatusChange = useEventCallback((status: ToastStatus) => props.onStatusChange?.(null, { status, ...props }));\n  const pause = useEventCallback(() => setRunning(false));\n  const play = useEventCallback(() => {\n    if (imperativePauseRef.current) {\n      return;\n    }\n    const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null);\n    if (timerTimeout < 0) {\n      setRunning(true);\n      return;\n    }\n\n    if (!containsActive) {\n      setRunning(true);\n    }\n  });\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      toastRef.current.focus();\n    },\n\n    play: () => {\n      imperativePauseRef.current = false;\n      play();\n    },\n    pause: () => {\n      imperativePauseRef.current = true;\n      pause();\n    },\n  }));\n\n  React.useEffect(() => {\n    return () => onStatusChange('unmounted');\n  }, [onStatusChange]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    if (pauseOnWindowBlur) {\n      targetDocument.defaultView?.addEventListener('focus', play);\n      targetDocument.defaultView?.addEventListener('blur', pause);\n      return () => {\n        targetDocument.defaultView?.removeEventListener('focus', play);\n        targetDocument.defaultView?.removeEventListener('blur', pause);\n      };\n    }\n  }, [targetDocument, pause, play, pauseOnWindowBlur]);\n\n  // It's impossible to animate to height: auto in CSS, the actual pixel value must be known\n  // Get the height of the toast before animation styles have been applied and set a CSS\n  // variable with its height. The CSS variable will be used by the styles\n  const onTransitionEntering = () => {\n    if (!toastRef.current) {\n      return;\n    }\n\n    const element = toastRef.current;\n    element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n  };\n\n  // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n  const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n\n  // Using a ref callback here because addEventListener supports `once`\n  const toastAnimationRef = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el && toastRef.current) {\n        toastRef.current.addEventListener(\n          'animationend',\n          () => {\n            // start toast once it's fully animated in\n            play();\n            onStatusChange('visible');\n          },\n          { once: true },\n        );\n      }\n    },\n    [play, onStatusChange],\n  );\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    pause();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    play();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === Delete) {\n      e.preventDefault();\n      close();\n    }\n\n    if (e.key === Tab && e.currentTarget === e.target) {\n      e.preventDefault();\n      if (e.shiftKey) {\n        findLastFocusable(e.currentTarget)?.focus();\n      } else {\n        findFirstFocusable(e.currentTarget)?.focus();\n      }\n    }\n\n    userRootSlot?.onKeyDown?.(e);\n  });\n\n  React.useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const politeness = desiredPoliteness ?? intentPolitenessMap[intent];\n    announce(toastRef.current?.textContent ?? '', { politeness });\n  }, [announce, desiredPoliteness, toastRef, visible, updateId, intent]);\n\n  React.useEffect(() => {\n    return () => {\n      if (focusedToastBeforeClose.current) {\n        focusedToastBeforeClose.current = false;\n        tryRestoreFocus();\n      }\n    };\n  }, [tryRestoreFocus]);\n\n  return {\n    components: {\n      timer: Timer,\n      root: 'div',\n    },\n    timer: slot.always<TimerProps>(\n      { key: updateId, onTimeout: close, running, timeout: timerTimeout ?? -1 },\n      { elementType: Timer },\n    ),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, toastRef, toastAnimationRef),\n        children,\n        tabIndex: 0,\n        role: 'listitem',\n        'aria-labelledby': titleId,\n        'aria-describedby': bodyId,\n        ...rest,\n        ...userRootSlot,\n        ...focusableGroupAttribute,\n        onMouseEnter,\n        onMouseLeave,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    timerTimeout,\n    transitionTimeout: 500,\n    running,\n    visible,\n    remove,\n    close,\n    onTransitionEntering,\n    updateId,\n    nodeRef: toastRef,\n    intent,\n    titleId,\n    bodyId,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","useEventCallback","useId","slot","useFluent_unstable","Delete","Tab","useFocusableGroup","useFocusFinders","Timer","intentPolitenessMap","success","warning","error","info","useToastContainer_unstable","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","bodyId","toastRef","useRef","targetDocument","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","tabBehavior","ignoreDefaultKeydown","Escape","Enter","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","useImperativeHandle","focus","useEffect","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","onKeyDown","key","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","always","onTimeout","elementType","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}

package/lib/components/ToastContainer/useToastContainerStyles.styles.js

@@ -1,7 +1,7 @@
 import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-export const toastClassNames = {
+export const toastContainerClassNames = {
   root: 'fui-ToastContainer',
   timer: 'fui-ToastContainer__timer'
 };
@@ -21,8 +21,8 @@ const useStyles = /*#__PURE__*/__styles({
     Bv12yb3: "f9wuypy"
   }
 }, {
-  d: [".fayl5bc{-webkit-animation-duration:200ms,400ms;animation-duration:200ms,400ms;}", ".f17oyct0{-webkit-animation-delay:0ms,200ms;animation-delay:0ms,200ms;}", ".fvv8lvk{-webkit-animation-name:f1rp83na,f5j8bii;animation-name:f1rp83na,f5j8bii;}", ".f1tk3cza{-webkit-animation-duration:400ms,200ms;animation-duration:400ms,200ms;}", ".f1nx6yy9{-webkit-animation-delay:0ms,400ms;animation-delay:0ms,400ms;}", ".f9wuypy{-webkit-animation-name:fk0lfw7,f1n32sdh;animation-name:fk0lfw7,f1n32sdh;}"],
-  k: ["@-webkit-keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@-webkit-keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}", "@-webkit-keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}", "@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}"]
+  d: [".fayl5bc{animation-duration:200ms,400ms;}", ".f17oyct0{animation-delay:0ms,200ms;}", ".fvv8lvk{animation-name:f1rp83na,f5j8bii;}", ".f1tk3cza{animation-duration:400ms,200ms;}", ".f1nx6yy9{animation-delay:0ms,400ms;}", ".f9wuypy{animation-name:fk0lfw7,f1n32sdh;}"],
+  k: ["@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}", "@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}"]
 });
 /**
  * Apply styling to the ToastContainer slots based on the state
@@ -30,7 +30,7 @@ const useStyles = /*#__PURE__*/__styles({
 export const useToastContainerStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
   const styles = useStyles();
-  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);
+  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);
   return state;
 };
 //# sourceMappingURL=useToastContainerStyles.styles.js.map

package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","toastClassNames","root","timer","useRootBaseClassName","useStyles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","useToastContainerStyles_unstable","state","rootBaseClassName","styles","className","visible"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastClassNames = {\n    root: 'fui-ToastContainer',\n    timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    marginTop: '16px',\n    minHeight: '44px',\n    pointerEvents: 'all',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    '--fui-toast-height': '44px',\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    enter: {\n        animationDuration: '200ms, 400ms',\n        animationDelay: '0ms, 200ms',\n        animationName: [\n            {\n                from: {\n                    maxHeight: 0,\n                    opacity: 0,\n                    marginTop: 0\n                },\n                to: {\n                    marginTop: '16px',\n                    opacity: 0,\n                    maxHeight: 'var(--fui-toast-height)'\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 1\n                }\n            }\n        ]\n    },\n    exit: {\n        animationDuration: '400ms, 200ms',\n        animationDelay: '0ms, 400ms',\n        animationName: [\n            {\n                from: {\n                    opacity: 1\n                },\n                to: {\n                    opacity: 0\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 0,\n                    marginTop: 0,\n                    maxHeight: 0\n                }\n            }\n        ]\n    }\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGT,aAAA,i6BAU5B,CAAC;AACF;AACA;AACA;AAAI,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CAmDrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGX,oBAAoB,CAAC,CAAC;EAChD,MAAMY,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACe,SAAS,GAAGpB,YAAY,CAACI,eAAe,CAACC,IAAI,EAAEa,iBAAiB,EAAED,KAAK,CAACI,OAAO,GAAGF,MAAM,CAACV,KAAK,GAAGU,MAAM,CAACN,IAAI,EAAEI,KAAK,CAACZ,IAAI,CAACe,SAAS,CAAC;EAC9I,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useStyles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","useToastContainerStyles_unstable","state","rootBaseClassName","styles","className","visible"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n    root: 'fui-ToastContainer',\n    timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    marginTop: '16px',\n    minHeight: '44px',\n    pointerEvents: 'all',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    '--fui-toast-height': '44px',\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    enter: {\n        animationDuration: '200ms, 400ms',\n        animationDelay: '0ms, 200ms',\n        animationName: [\n            {\n                from: {\n                    maxHeight: 0,\n                    opacity: 0,\n                    marginTop: 0\n                },\n                to: {\n                    marginTop: '16px',\n                    opacity: 0,\n                    maxHeight: 'var(--fui-toast-height)'\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 1\n                }\n            }\n        ]\n    },\n    exit: {\n        animationDuration: '400ms, 200ms',\n        animationDelay: '0ms, 400ms',\n        animationName: [\n            {\n                from: {\n                    opacity: 1\n                },\n                to: {\n                    opacity: 0\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 0,\n                    marginTop: 0,\n                    maxHeight: 0\n                }\n            }\n        ]\n    }\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGT,aAAA,i6BAU5B,CAAC;AACF;AACA;AACA;AAAI,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CAmDrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGX,oBAAoB,CAAC,CAAC;EAChD,MAAMY,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACe,SAAS,GAAGpB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEa,iBAAiB,EAAED,KAAK,CAACI,OAAO,GAAGF,MAAM,CAACV,KAAK,GAAGU,MAAM,CAACN,IAAI,EAAEI,KAAK,CAACZ,IAAI,CAACe,SAAS,CAAC;EACvJ,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/ToastFooter/renderToastFooter.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of ToastFooter
  */ export const renderToastFooter_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/ToastFooter/renderToastFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types';\n\n/**\n * Render the final JSX of ToastFooter\n */\nexport const renderToastFooter_unstable = (state: ToastFooterState) => {\n  const { slots, slotProps } = getSlotsNext<ToastFooterSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderToastFooter_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBAAO,AAZT,cAYUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderToastFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types';\n\n/**\n * Render the final JSX of ToastFooter\n */\nexport const renderToastFooter_unstable = (state: ToastFooterState) => {\n  assertSlots<ToastFooterSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderToastFooter_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEF,YAA8BE;IAE9B,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/ToastFooter/useToastFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render ToastFooter.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/ToastFooter/useToastFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToastFooterProps, ToastFooterState } from './ToastFooter.types';\n\n/**\n * Create the state required to render ToastFooter.\n *\n * The returned state can be modified with hooks such as useToastFooterStyles_unstable,\n * before being passed to renderToastFooter_unstable.\n *\n * @param props - props from this instance of ToastFooter\n * @param ref - reference to root HTMLElement of ToastFooter\n */\nexport const useToastFooter_unstable = (props: ToastFooterProps, ref: React.Ref<HTMLElement>): ToastFooterState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useToastFooter_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useToastFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastFooterProps, ToastFooterState } from './ToastFooter.types';\n\n/**\n * Create the state required to render ToastFooter.\n *\n * The returned state can be modified with hooks such as useToastFooterStyles_unstable,\n * before being passed to renderToastFooter_unstable.\n *\n * @param props - props from this instance of ToastFooter\n * @param ref - reference to root HTMLElement of ToastFooter\n */\nexport const useToastFooter_unstable = (props: ToastFooterProps, ref: React.Ref<HTMLElement>): ToastFooterState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToastFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/ToastFooter/useToastFooterStyles.styles.js

@@ -5,7 +5,7 @@ export const toastFooterClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1u6izx1", null, [".r1u6izx1{padding-top:16px;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:14px;column-gap:14px;row-gap:14px;}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1u6izx1", null, [".r1u6izx1{padding-top:16px;grid-column-start:2;grid-column-end:3;display:flex;align-items:center;column-gap:14px;row-gap:14px;}"]);
 /**
  * Apply styling to the ToastFooter slots based on the state
  */

package/lib/components/ToastFooter/useToastFooterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","mergeClasses","shorthands","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const toastFooterClassNames = {\n    root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n    paddingTop: '16px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap('14px')\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGL,aAAA,2VAOhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChDE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEI,iBAAiB,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const toastFooterClassNames = {\n    root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n    paddingTop: '16px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap('14px')\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGL,aAAA,sJAOhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChDE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEI,iBAAiB,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/ToastTitle/renderToastTitle.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of ToastTitle
  */ export const renderToastTitle_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(Fragment, null, slots.media ? /*#__PURE__*/ createElement(slots.media, slotProps.media) : null, /*#__PURE__*/ createElement(slots.root, slotProps.root), slots.action ? /*#__PURE__*/ createElement(slots.action, slotProps.action) : null);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Fragment, null, state.media ? /*#__PURE__*/ createElement(state.media, null) : null, /*#__PURE__*/ createElement(state.root, null), state.action ? /*#__PURE__*/ createElement(state.action, null) : null);
 };

package/lib/components/ToastTitle/renderToastTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { ToastTitleState, ToastTitleSlots } from './ToastTitle.types';\n\n/**\n * Render the final JSX of ToastTitle\n */\nexport const renderToastTitle_unstable = (state: ToastTitleState) => {\n  const { slots, slotProps } = getSlotsNext<ToastTitleSlots>(state);\n\n  return (\n    <>\n      {slots.media ? <slots.media {...slotProps.media} /> : null}\n      <slots.root {...slotProps.root} />\n      {slots.action ? <slots.action {...slotProps.action} /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderToastTitle_unstable","state","slots","slotProps","media","root","action"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAbJ,cADA,gBAeOC,MAAME,KAAK,iBAAG,AAdrB,cAcsBF,MAAME,KAAK,EAAKD,UAAUC,KAAK,IAAO,IAAI,gBAC1D,AAfN,cAeOF,MAAMG,IAAI,EAAKF,UAAUE,IAAI,GAC7BH,MAAMI,MAAM,iBAAG,AAhBtB,cAgBuBJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM,IAAO,IAAI;AAGnE,EAAE"}
+{"version":3,"sources":["renderToastTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastTitleState, ToastTitleSlots } from './ToastTitle.types';\n\n/**\n * Render the final JSX of ToastTitle\n */\nexport const renderToastTitle_unstable = (state: ToastTitleState) => {\n  assertSlots<ToastTitleSlots>(state);\n\n  return (\n    <>\n      {state.media ? <state.media /> : null}\n      <state.root />\n      {state.action ? <state.action /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","renderToastTitle_unstable","state","media","root","action"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qBACE,AAbJ,cADA,gBAeOA,MAAMC,KAAK,iBAAG,AAdrB,cAcsBD,MAAMC,KAAK,UAAM,IAAI,gBACrC,AAfN,cAeOD,MAAME,IAAI,SACVF,MAAMG,MAAM,iBAAG,AAhBtB,cAgBuBH,MAAMG,MAAM,UAAM,IAAI;AAG7C,EAAE"}

package/lib/components/ToastTitle/useToastTitle.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 /**
@@ -30,23 +30,28 @@ import { useToastContainerContext } from '../../contexts/toastContainerContext';
             break;
     }
     return {
-        action: resolveShorthand(props.action),
+        action: slot.optional(props.action, {
+            elementType: 'div'
+        }),
         components: {
             root: 'div',
             media: 'div',
             action: 'div'
         },
-        media: resolveShorthand(props.media, {
-            required: !!intent,
+        media: slot.optional(props.media, {
+            renderByDefault: !!intent,
             defaultProps: {
                 children: defaultIcon
-            }
+            },
+            elementType: 'div'
         }),
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             children: props.children,
             id: titleId,
             ...props
+        }), {
+            elementType: 'div'
         }),
         intent,
         backgroundAppearance

package/lib/components/ToastTitle/useToastTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastTitle.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\nimport type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the state required to render ToastTitle.\n *\n * The returned state can be modified with hooks such as useToastTitleStyles_unstable,\n * before being passed to renderToastTitle_unstable.\n *\n * @param props - props from this instance of ToastTitle\n * @param ref - reference to root HTMLElement of ToastTitle\n */\nexport const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref<HTMLElement>): ToastTitleState => {\n  const { intent, titleId } = useToastContainerContext();\n  const backgroundAppearance = useBackgroundAppearance();\n\n  /** Determine the role and media to render based on the intent */\n  let defaultIcon;\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DismissCircleFilled />;\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  return {\n    action: resolveShorthand(props.action),\n    components: {\n      root: 'div',\n      media: 'div',\n      action: 'div',\n    },\n    media: resolveShorthand(props.media, { required: !!intent, defaultProps: { children: defaultIcon } }),\n    root: getNativeElementProps('div', {\n      ref,\n      children: props.children,\n      id: titleId,\n      ...props,\n    }),\n    intent,\n    backgroundAppearance,\n  };\n};\n"],"names":["React","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getNativeElementProps","resolveShorthand","useBackgroundAppearance","useToastContainerContext","useToastTitle_unstable","props","ref","intent","titleId","backgroundAppearance","defaultIcon","action","components","root","media","required","defaultProps","children","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB;AAC9G,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACpF,SAASC,uBAAuB,QAAQ,kCAAkC;AAG1E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGL;IAC5B,MAAMM,uBAAuBP;IAE7B,+DAA+D,GAC/D,IAAIQ;IACJ,OAAQH;QACN,KAAK;YACHG,4BAAc,oBAACd;YACf,KAAM;QACR,KAAK;YACHc,4BAAc,oBAACb;YACf,KAAM;QACR,KAAK;YACHa,4BAAc,oBAACX;YACf,KAAM;QACR,KAAK;YACHW,4BAAc,oBAACZ;YACf,KAAM;IACV;IAEA,OAAO;QACLa,QAAQV,iBAAiBI,MAAMM,MAAM;QACrCC,YAAY;YACVC,MAAM;YACNC,OAAO;YACPH,QAAQ;QACV;QACAG,OAAOb,iBAAiBI,MAAMS,KAAK,EAAE;YAAEC,UAAU,CAAC,CAACR;YAAQS,cAAc;gBAAEC,UAAUP;YAAY;QAAE;QACnGG,MAAMb,sBAAsB,OAAO;YACjCM;YACAW,UAAUZ,MAAMY,QAAQ;YACxBC,IAAIV;YACJ,GAAGH,KAAK;QACV;QACAE;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useToastTitle.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\nimport type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the state required to render ToastTitle.\n *\n * The returned state can be modified with hooks such as useToastTitleStyles_unstable,\n * before being passed to renderToastTitle_unstable.\n *\n * @param props - props from this instance of ToastTitle\n * @param ref - reference to root HTMLElement of ToastTitle\n */\nexport const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref<HTMLElement>): ToastTitleState => {\n  const { intent, titleId } = useToastContainerContext();\n  const backgroundAppearance = useBackgroundAppearance();\n\n  /** Determine the role and media to render based on the intent */\n  let defaultIcon;\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DismissCircleFilled />;\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  return {\n    action: slot.optional(props.action, { elementType: 'div' }),\n    components: { root: 'div', media: 'div', action: 'div' },\n    media: slot.optional(props.media, {\n      renderByDefault: !!intent,\n      defaultProps: { children: defaultIcon },\n      elementType: 'div',\n    }),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        children: props.children,\n        id: titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    intent,\n    backgroundAppearance,\n  };\n};\n"],"names":["React","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getNativeElementProps","slot","useBackgroundAppearance","useToastContainerContext","useToastTitle_unstable","props","ref","intent","titleId","backgroundAppearance","defaultIcon","action","optional","elementType","components","root","media","renderByDefault","defaultProps","children","always","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB;AAC9G,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,uBAAuB,QAAQ,kCAAkC;AAG1E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGL;IAC5B,MAAMM,uBAAuBP;IAE7B,+DAA+D,GAC/D,IAAIQ;IACJ,OAAQH;QACN,KAAK;YACHG,4BAAc,oBAACd;YACf,KAAM;QACR,KAAK;YACHc,4BAAc,oBAACb;YACf,KAAM;QACR,KAAK;YACHa,4BAAc,oBAACX;YACf,KAAM;QACR,KAAK;YACHW,4BAAc,oBAACZ;YACf,KAAM;IACV;IAEA,OAAO;QACLa,QAAQV,KAAKW,QAAQ,CAACP,MAAMM,MAAM,EAAE;YAAEE,aAAa;QAAM;QACzDC,YAAY;YAAEC,MAAM;YAAOC,OAAO;YAAOL,QAAQ;QAAM;QACvDK,OAAOf,KAAKW,QAAQ,CAACP,MAAMW,KAAK,EAAE;YAChCC,iBAAiB,CAAC,CAACV;YACnBW,cAAc;gBAAEC,UAAUT;YAAY;YACtCG,aAAa;QACf;QACAE,MAAMd,KAAKmB,MAAM,CACfpB,sBAAsB,OAAO;YAC3BM;YACAa,UAAUd,MAAMc,QAAQ;YACxBE,IAAIb;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;QACAE;IACF;AACF,EAAE"}

package/lib/components/ToastTitle/useToastTitleStyles.styles.js

@@ -5,9 +5,9 @@ export const toastTitleClassNames = {
   media: 'fui-ToastTitle__media',
   action: 'fui-ToastTitle__action'
 };
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1mlor6q", null, [".r1mlor6q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-column-span:3;grid-column-end:3;color:var(--colorNeutralForeground1);}"]);
-const useMediaBaseClassName = /*#__PURE__*/__resetStyles("rnm72z1", "rzj6g76", [".rnm72z1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-column-span:2;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--colorNeutralForeground1);}", ".rzj6g76{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-column-span:2;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--colorNeutralForeground1);}"]);
-const useActionBaseClassName = /*#__PURE__*/__resetStyles("r5vrc68", "rzqb88z", [".r5vrc68{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:12px;-ms-grid-column-span:-1;grid-column-end:-1;color:var(--colorBrandForeground1);}", ".rzqb88z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:12px;-ms-grid-column-span:-1;grid-column-end:-1;color:var(--colorBrandForeground1);}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1mlor6q", null, [".r1mlor6q{display:flex;align-items:center;grid-column-end:3;color:var(--colorNeutralForeground1);}"]);
+const useMediaBaseClassName = /*#__PURE__*/__resetStyles("rnm72z1", "rzj6g76", [".rnm72z1{display:flex;align-items:center;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--colorNeutralForeground1);}", ".rzj6g76{display:flex;align-items:center;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--colorNeutralForeground1);}"]);
+const useActionBaseClassName = /*#__PURE__*/__resetStyles("r5vrc68", "rzqb88z", [".r5vrc68{display:flex;align-items:center;padding-left:12px;grid-column-end:-1;color:var(--colorBrandForeground1);}", ".rzqb88z{display:flex;align-items:center;padding-right:12px;grid-column-end:-1;color:var(--colorBrandForeground1);}"]);
 const useInvertedStyles = /*#__PURE__*/__styles({
   root: {
     sj55zd: "f1w7i9ko"

package/lib/components/ToastTitle/useToastTitleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n    root: 'fui-ToastTitle',\n    media: 'fui-ToastTitle__media',\n    action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    gridColumnEnd: 3,\n    color: tokens.colorNeutralForeground1\n});\nconst useMediaBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    gridColumnEnd: 2,\n    paddingRight: '8px',\n    fontSize: '16px',\n    color: tokens.colorNeutralForeground1\n});\nconst useActionBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    paddingLeft: '12px',\n    gridColumnEnd: -1,\n    color: tokens.colorBrandForeground1\n});\nconst useInvertedStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForegroundInverted2\n    },\n    action: {\n        color: tokens.colorBrandForegroundInverted\n    },\n    media: {\n        color: tokens.colorNeutralForegroundInverted\n    }\n});\nconst useIntentIconStyles = makeStyles({\n    success: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteGreenForeground3\n    },\n    error: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteCranberryForeground2\n    },\n    warning: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteDarkOrangeForeground1\n    },\n    info: {\n        color: tokens.colorNeutralForeground2\n    }\n});\nconst useIntentIconStylesInverted = makeStyles({\n    success: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteGreenForegroundInverted\n    },\n    error: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteRedForegroundInverted\n    },\n    warning: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteYellowForegroundInverted\n    },\n    info: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const actionBaseClassName = useActionBaseClassName();\n    const mediaBaseClassName = useMediaBaseClassName();\n    const intentIconStyles = useIntentIconStyles();\n    const intentIconStylesInverted = useIntentIconStylesInverted();\n    const { intent  } = state;\n    const invertedStyles = useInvertedStyles();\n    state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, state.media.className, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent]);\n    }\n    if (state.action) {\n        state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,uRAK5B,CAAC;AACF,MAAMQ,qBAAqB,gBAAGR,aAAA,8lBAO7B,CAAC;AACF,MAAMS,sBAAsB,gBAAGT,aAAA,kkBAM9B,CAAC;AACF,MAAMU,iBAAiB,gBAAGX,QAAA;EAAAK,IAAA;IAAAO,MAAA;EAAA;EAAAL,MAAA;IAAAK,MAAA;EAAA;EAAAN,KAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUzB,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgB3B,CAAC;AACF,MAAMM,2BAA2B,gBAAGnB,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgBnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,kBAAkB,GAAGf,qBAAqB,CAAC,CAAC;EAClD,MAAMgB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,wBAAwB,GAAGP,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEQ;EAAQ,CAAC,GAAGN,KAAK;EACzB,MAAMO,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1CU,KAAK,CAAChB,IAAI,CAACwB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEiB,iBAAiB,EAAED,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACvB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACwB,SAAS,CAAC;EACzK,IAAIR,KAAK,CAACf,KAAK,EAAE;IACbe,KAAK,CAACf,KAAK,CAACuB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEkB,kBAAkB,EAAEH,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACtB,KAAK,EAAEe,KAAK,CAACf,KAAK,CAACuB,SAAS,EAAEF,MAAM,IAAIF,gBAAgB,CAACE,MAAM,CAAC,EAAEA,MAAM,IAAIN,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIJ,wBAAwB,CAACC,MAAM,CAAC,CAAC;EAC/S;EACA,IAAIN,KAAK,CAACd,MAAM,EAAE;IACdc,KAAK,CAACd,MAAM,CAACsB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACG,MAAM,EAAEgB,mBAAmB,EAAEF,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACrB,MAAM,EAAEc,KAAK,CAACd,MAAM,CAACsB,SAAS,CAAC;EACvL;EACA,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n    root: 'fui-ToastTitle',\n    media: 'fui-ToastTitle__media',\n    action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    gridColumnEnd: 3,\n    color: tokens.colorNeutralForeground1\n});\nconst useMediaBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    gridColumnEnd: 2,\n    paddingRight: '8px',\n    fontSize: '16px',\n    color: tokens.colorNeutralForeground1\n});\nconst useActionBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    paddingLeft: '12px',\n    gridColumnEnd: -1,\n    color: tokens.colorBrandForeground1\n});\nconst useInvertedStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForegroundInverted2\n    },\n    action: {\n        color: tokens.colorBrandForegroundInverted\n    },\n    media: {\n        color: tokens.colorNeutralForegroundInverted\n    }\n});\nconst useIntentIconStyles = makeStyles({\n    success: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteGreenForeground3\n    },\n    error: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteCranberryForeground2\n    },\n    warning: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteDarkOrangeForeground1\n    },\n    info: {\n        color: tokens.colorNeutralForeground2\n    }\n});\nconst useIntentIconStylesInverted = makeStyles({\n    success: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteGreenForegroundInverted\n    },\n    error: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteRedForegroundInverted\n    },\n    warning: {\n        // FIXME https://github.com/microsoft/fluentui/issues/28219\n        color: tokens.colorPaletteYellowForegroundInverted\n    },\n    info: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const actionBaseClassName = useActionBaseClassName();\n    const mediaBaseClassName = useMediaBaseClassName();\n    const intentIconStyles = useIntentIconStyles();\n    const intentIconStylesInverted = useIntentIconStylesInverted();\n    const { intent  } = state;\n    const invertedStyles = useInvertedStyles();\n    state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, state.media.className, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent]);\n    }\n    if (state.action) {\n        state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,yHAK5B,CAAC;AACF,MAAMQ,qBAAqB,gBAAGR,aAAA,kSAO7B,CAAC;AACF,MAAMS,sBAAsB,gBAAGT,aAAA,oQAM9B,CAAC;AACF,MAAMU,iBAAiB,gBAAGX,QAAA;EAAAK,IAAA;IAAAO,MAAA;EAAA;EAAAL,MAAA;IAAAK,MAAA;EAAA;EAAAN,KAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUzB,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgB3B,CAAC;AACF,MAAMM,2BAA2B,gBAAGnB,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgBnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,kBAAkB,GAAGf,qBAAqB,CAAC,CAAC;EAClD,MAAMgB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,wBAAwB,GAAGP,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEQ;EAAQ,CAAC,GAAGN,KAAK;EACzB,MAAMO,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1CU,KAAK,CAAChB,IAAI,CAACwB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEiB,iBAAiB,EAAED,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACvB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACwB,SAAS,CAAC;EACzK,IAAIR,KAAK,CAACf,KAAK,EAAE;IACbe,KAAK,CAACf,KAAK,CAACuB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEkB,kBAAkB,EAAEH,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACtB,KAAK,EAAEe,KAAK,CAACf,KAAK,CAACuB,SAAS,EAAEF,MAAM,IAAIF,gBAAgB,CAACE,MAAM,CAAC,EAAEA,MAAM,IAAIN,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIJ,wBAAwB,CAACC,MAAM,CAAC,CAAC;EAC/S;EACA,IAAIN,KAAK,CAACd,MAAM,EAAE;IACdc,KAAK,CAACd,MAAM,CAACsB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACG,MAAM,EAAEgB,mBAAmB,EAAEF,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACrB,MAAM,EAAEc,KAAK,CAACd,MAAM,CAACsB,SAAS,CAAC;EACvL;EACA,OAAOR,KAAK;AAChB,CAAC"}

package/lib/components/Toaster/renderToaster.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { Portal } from '@fluentui/react-portal';
 import { AriaLive } from '../AriaLive';
 /**
  * Render the final JSX of Toaster
  */ export const renderToaster_unstable = (state)=>{
     const { announceRef , renderAriaLive  } = state;
-    const { slots , slotProps  } = getSlotsNext(state);
-    const hasToasts = !!slots.bottomStart || !!slots.bottomEnd || !!slots.topStart || !!slots.topEnd;
+    assertSlots(state);
+    const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd;
     return /*#__PURE__*/ createElement(Fragment, null, renderAriaLive ? /*#__PURE__*/ createElement(AriaLive, {
         announceRef: announceRef
-    }) : null, hasToasts ? /*#__PURE__*/ createElement(Portal, null, slots.bottomStart ? /*#__PURE__*/ createElement(slots.bottomStart, slotProps.bottomStart) : null, slots.bottomEnd ? /*#__PURE__*/ createElement(slots.bottomEnd, slotProps.bottomEnd) : null, slots.topStart ? /*#__PURE__*/ createElement(slots.topStart, slotProps.topStart) : null, slots.topEnd ? /*#__PURE__*/ createElement(slots.topEnd, slotProps.topEnd) : null) : null);
+    }) : null, hasToasts ? /*#__PURE__*/ createElement(Portal, null, state.bottomStart ? /*#__PURE__*/ createElement(state.bottomStart, null) : null, state.bottomEnd ? /*#__PURE__*/ createElement(state.bottomEnd, null) : null, state.topStart ? /*#__PURE__*/ createElement(state.topStart, null) : null, state.topEnd ? /*#__PURE__*/ createElement(state.topEnd, null) : null) : null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderToaster.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { ToasterState, ToasterSlotsInternal } from './Toaster.types';\nimport { AriaLive } from '../AriaLive';\n\n/**\n * Render the final JSX of Toaster\n */\nexport const renderToaster_unstable = (state: ToasterState) => {\n  const { announceRef, renderAriaLive } = state;\n  const { slots, slotProps } = getSlotsNext<ToasterSlotsInternal>(state);\n\n  const hasToasts = !!slots.bottomStart || !!slots.bottomEnd || !!slots.topStart || !!slots.topEnd;\n\n  return (\n    <>\n      {renderAriaLive ? <AriaLive announceRef={announceRef} /> : null}\n      {hasToasts ? (\n        <Portal>\n          {slots.bottomStart ? <slots.bottomStart {...slotProps.bottomStart} /> : null}\n          {slots.bottomEnd ? <slots.bottomEnd {...slotProps.bottomEnd} /> : null}\n          {slots.topStart ? <slots.topStart {...slotProps.topStart} /> : null}\n          {slots.topEnd ? <slots.topEnd {...slotProps.topEnd} /> : null}\n        </Portal>\n      ) : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","Portal","AriaLive","renderToaster_unstable","state","announceRef","renderAriaLive","slots","slotProps","hasToasts","bottomStart","bottomEnd","topStart","topEnd"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,cAAc;AAEvC;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,QAAwB;IAC7D,MAAM,EAAEC,YAAW,EAAEC,eAAc,EAAE,GAAGF;IACxC,MAAM,EAAEG,MAAK,EAAEC,UAAS,EAAE,GAAGR,aAAmCI;IAEhE,MAAMK,YAAY,CAAC,CAACF,MAAMG,WAAW,IAAI,CAAC,CAACH,MAAMI,SAAS,IAAI,CAAC,CAACJ,MAAMK,QAAQ,IAAI,CAAC,CAACL,MAAMM,MAAM;IAEhG,qBACE,AAlBJ,cADA,gBAoBOP,+BAAiB,AAnBxB,cAmByBJ;QAASG,aAAaA;SAAkB,IAAI,EAC9DI,0BACC,AArBR,cAqBSR,cACEM,MAAMG,WAAW,iBAAG,AAtB/B,cAsBgCH,MAAMG,WAAW,EAAKF,UAAUE,WAAW,IAAO,IAAI,EAC3EH,MAAMI,SAAS,iBAAG,AAvB7B,cAuB8BJ,MAAMI,SAAS,EAAKH,UAAUG,SAAS,IAAO,IAAI,EACrEJ,MAAMK,QAAQ,iBAAG,AAxB5B,cAwB6BL,MAAMK,QAAQ,EAAKJ,UAAUI,QAAQ,IAAO,IAAI,EAClEL,MAAMM,MAAM,iBAAG,AAzB1B,cAyB2BN,MAAMM,MAAM,EAAKL,UAAUK,MAAM,IAAO,IAAI,IAE7D,IAAI;AAGd,EAAE"}
+{"version":3,"sources":["renderToaster.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { ToasterState, ToasterSlotsInternal } from './Toaster.types';\nimport { AriaLive } from '../AriaLive';\n\n/**\n * Render the final JSX of Toaster\n */\nexport const renderToaster_unstable = (state: ToasterState) => {\n  const { announceRef, renderAriaLive } = state;\n  assertSlots<ToasterSlotsInternal>(state);\n\n  const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd;\n\n  return (\n    <>\n      {renderAriaLive ? <AriaLive announceRef={announceRef} /> : null}\n      {hasToasts ? (\n        <Portal>\n          {state.bottomStart ? <state.bottomStart /> : null}\n          {state.bottomEnd ? <state.bottomEnd /> : null}\n          {state.topStart ? <state.topStart /> : null}\n          {state.topEnd ? <state.topEnd /> : null}\n        </Portal>\n      ) : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","Portal","AriaLive","renderToaster_unstable","state","announceRef","renderAriaLive","hasToasts","bottomStart","bottomEnd","topStart","topEnd"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,cAAc;AAEvC;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,QAAwB;IAC7D,MAAM,EAAEC,YAAW,EAAEC,eAAc,EAAE,GAAGF;IACxCJ,YAAkCI;IAElC,MAAMG,YAAY,CAAC,CAACH,MAAMI,WAAW,IAAI,CAAC,CAACJ,MAAMK,SAAS,IAAI,CAAC,CAACL,MAAMM,QAAQ,IAAI,CAAC,CAACN,MAAMO,MAAM;IAEhG,qBACE,AAlBJ,cADA,gBAoBOL,+BAAiB,AAnBxB,cAmByBJ;QAASG,aAAaA;SAAkB,IAAI,EAC9DE,0BACC,AArBR,cAqBSN,cACEG,MAAMI,WAAW,iBAAG,AAtB/B,cAsBgCJ,MAAMI,WAAW,UAAM,IAAI,EAChDJ,MAAMK,SAAS,iBAAG,AAvB7B,cAuB8BL,MAAMK,SAAS,UAAM,IAAI,EAC5CL,MAAMM,QAAQ,iBAAG,AAxB5B,cAwB6BN,MAAMM,QAAQ,UAAM,IAAI,EAC1CN,MAAMO,MAAM,iBAAG,AAzB1B,cAyB2BP,MAAMO,MAAM,UAAM,IAAI,IAEvC,IAAI;AAGd,EAAE"}

package/lib/components/Toaster/useToastAnnounce.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { isHTMLElement } from '@fluentui/react-utilities';
+/**
+ * Wraps an aria live announcement function.
+ * Aria live announcements can be detrimental once the user is already navigating
+ * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.
+ * @param announce
+ * @returns A function to announce a toast and a ref to attach to the toaster element
+ */ export function useToastAnnounce(announce) {
+    const activeRef = React.useRef(true);
+    const cleanupRef = React.useRef(()=>undefined);
+    const announceToast = React.useCallback((message, options)=>{
+        if (activeRef.current) {
+            announce(message, options);
+        }
+    }, [
+        announce
+    ]);
+    const toasterRef = React.useCallback((el)=>{
+        if (!el) {
+            cleanupRef.current();
+            return;
+        }
+        const onFocusIn = (e)=>{
+            if (isHTMLElement(e.currentTarget) && e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
+                return;
+            }
+            activeRef.current = false;
+        };
+        const onFocusOut = (e)=>{
+            if (isHTMLElement(e.currentTarget) && e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
+                return;
+            }
+            activeRef.current = true;
+        };
+        el.addEventListener('focusin', onFocusIn);
+        el.addEventListener('focusout', onFocusOut);
+        cleanupRef.current = ()=>{
+            el.removeEventListener('focusin', onFocusIn);
+            el.removeEventListener('focusout', onFocusOut);
+        };
+    }, []);
+    return {
+        announceToast,
+        toasterRef
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastAnnounce.ts"],"sourcesContent":["import * as React from 'react';\nimport { Announce } from '../AriaLive';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\n/**\n * Wraps an aria live announcement function.\n * Aria live announcements can be detrimental once the user is already navigating\n * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.\n * @param announce\n * @returns A function to announce a toast and a ref to attach to the toaster element\n */\nexport function useToastAnnounce(announce: Announce) {\n  const activeRef = React.useRef(true);\n  const cleanupRef = React.useRef<() => void>(() => undefined);\n  const announceToast = React.useCallback<Announce>(\n    (message, options) => {\n      if (activeRef.current) {\n        announce(message, options);\n      }\n    },\n    [announce],\n  );\n\n  const toasterRef = React.useCallback((el: HTMLDivElement | null) => {\n    if (!el) {\n      cleanupRef.current();\n      return;\n    }\n\n    const onFocusIn = (e: FocusEvent) => {\n      if (\n        isHTMLElement(e.currentTarget) &&\n        e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n      ) {\n        return;\n      }\n\n      activeRef.current = false;\n    };\n\n    const onFocusOut = (e: FocusEvent) => {\n      if (\n        isHTMLElement(e.currentTarget) &&\n        e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n      ) {\n        return;\n      }\n\n      activeRef.current = true;\n    };\n\n    el.addEventListener('focusin', onFocusIn);\n    el.addEventListener('focusout', onFocusOut);\n\n    cleanupRef.current = () => {\n      el.removeEventListener('focusin', onFocusIn);\n      el.removeEventListener('focusout', onFocusOut);\n    };\n  }, []);\n\n  return {\n    announceToast,\n    toasterRef,\n  };\n}\n"],"names":["React","isHTMLElement","useToastAnnounce","announce","activeRef","useRef","cleanupRef","undefined","announceToast","useCallback","message","options","current","toasterRef","el","onFocusIn","e","currentTarget","contains","relatedTarget","onFocusOut","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiBC,QAAkB,EAAE;IACnD,MAAMC,YAAYJ,MAAMK,MAAM,CAAC,IAAI;IACnC,MAAMC,aAAaN,MAAMK,MAAM,CAAa,IAAME;IAClD,MAAMC,gBAAgBR,MAAMS,WAAW,CACrC,CAACC,SAASC,UAAY;QACpB,IAAIP,UAAUQ,OAAO,EAAE;YACrBT,SAASO,SAASC;QACpB,CAAC;IACH,GACA;QAACR;KAAS;IAGZ,MAAMU,aAAab,MAAMS,WAAW,CAAC,CAACK,KAA8B;QAClE,IAAI,CAACA,IAAI;YACPR,WAAWM,OAAO;YAClB;QACF,CAAC;QAED,MAAMG,YAAY,CAACC,IAAkB;YACnC,IACEf,cAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,cAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,IAAI,GAChF;gBACA;YACF,CAAC;YAEDf,UAAUQ,OAAO,GAAG,KAAK;QAC3B;QAEA,MAAMQ,aAAa,CAACJ,IAAkB;YACpC,IACEf,cAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,cAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,IAAI,GAChF;gBACA;YACF,CAAC;YAEDf,UAAUQ,OAAO,GAAG,IAAI;QAC1B;QAEAE,GAAGO,gBAAgB,CAAC,WAAWN;QAC/BD,GAAGO,gBAAgB,CAAC,YAAYD;QAEhCd,WAAWM,OAAO,GAAG,IAAM;YACzBE,GAAGQ,mBAAmB,CAAC,WAAWP;YAClCD,GAAGQ,mBAAmB,CAAC,YAAYF;QACrC;IACF,GAAG,EAAE;IAEL,OAAO;QACLZ;QACAK;IACF;AACF,CAAC"}

package/lib/components/Toaster/useToaster.js

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { getNativeElementProps, isHTMLElement, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { Escape } from '@fluentui/keyboard-keys';
 import { TOAST_POSITIONS, useToaster } from '../../state';
 import { ToastContainer } from '../ToastContainer';
+import { useToasterFocusManagement_unstable } from './useToasterFocusManagement';
+import { useToastAnnounce } from './useToastAnnounce';
 /**
  * Create the state required to render Toaster.
  *
@@ -10,46 +14,47 @@ import { ToastContainer } from '../ToastContainer';
  */ export const useToaster_unstable = (props)=>{
     const { offset , announce: announceProp , ...rest } = props;
     const announceRef = React.useRef(()=>null);
-    const { toastsToRender , isToastVisible , pauseAllToasts , playAllToasts , tryRestoreFocus  } = useToaster(rest);
+    const { toastsToRender , isToastVisible , pauseAllToasts , playAllToasts , tryRestoreFocus , closeAllToasts  } = useToaster(rest);
     const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);
     const { dir  } = useFluent();
-    const rootProps = getNativeElementProps('div', rest);
-    // Adds native HTML focusin/focusout listeners
-    // https://github.com/facebook/react/issues/25194
-    const focusListenerRef = React.useCallback((el)=>{
-        if (el) {
-            el.addEventListener('focusin', (e)=>{
-                if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
-                    pauseAllToasts();
-                }
-            });
-            el.addEventListener('focusout', (e)=>{
-                if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
-                    playAllToasts();
-                    tryRestoreFocus();
-                }
-            });
+    const rootProps = slot.always(getNativeElementProps('div', rest), {
+        elementType: 'div'
+    });
+    const focusableGroupAttr = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus',
+        ignoreDefaultKeydown: {
+            Escape: true
         }
-    }, [
-        playAllToasts,
-        pauseAllToasts,
-        tryRestoreFocus
-    ]);
-    const createPositionSlot = (toastPosition)=>{
+    });
+    const onKeyDown = useEventCallback((e)=>{
+        var _props_onKeyDown;
+        if (e.key === Escape) {
+            e.preventDefault();
+            closeAllToasts();
+        }
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
+    });
+    const usePositionSlot = (toastPosition)=>{
         var _toastsToRender_get;
-        return resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {
+        const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);
+        const { announceToast , toasterRef  } = useToastAnnounce(announceProp !== null && announceProp !== void 0 ? announceProp : announce);
+        return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {
             defaultProps: {
-                ref: focusListenerRef,
+                ref: useMergedRefs(focusManagementRef, toasterRef),
                 children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(ToastContainer, {
                         ...toast,
                         tryRestoreFocus: tryRestoreFocus,
                         intent: toast.intent,
-                        announce: announce,
+                        announce: announceToast,
                         key: toast.toastId,
                         visible: isToastVisible(toast.toastId)
                     }, toast.content)),
-                'data-toaster-position': toastPosition
-            }
+                onKeyDown,
+                ...focusableGroupAttr,
+                'data-toaster-position': toastPosition,
+                role: 'list'
+            },
+            elementType: 'div'
         });
     };
     return {
@@ -61,13 +66,13 @@ import { ToastContainer } from '../ToastContainer';
             topStart: 'div',
             topEnd: 'div'
         },
-        root: resolveShorthand(rootProps, {
-            required: true
+        root: slot.always(rootProps, {
+            elementType: 'div'
         }),
-        bottomStart: createPositionSlot(TOAST_POSITIONS.bottomStart),
-        bottomEnd: createPositionSlot(TOAST_POSITIONS.bottomEnd),
-        topStart: createPositionSlot(TOAST_POSITIONS.topStart),
-        topEnd: createPositionSlot(TOAST_POSITIONS.topEnd),
+        bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),
+        bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),
+        topStart: usePositionSlot(TOAST_POSITIONS.topStart),
+        topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),
         announceRef,
         offset,
         announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,

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

@@ -1 +1 @@
-{"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  getNativeElementProps,\n  isHTMLElement,\n  resolveShorthand,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';\nimport { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n  const { offset, announce: announceProp, ...rest } = props;\n  const announceRef = React.useRef<Announce>(() => null);\n  const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus } =\n    useToaster<HTMLDivElement>(rest);\n  const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n  const { dir } = useFluent();\n\n  const rootProps = getNativeElementProps('div', rest);\n\n  // Adds native HTML focusin/focusout listeners\n  // https://github.com/facebook/react/issues/25194\n  const focusListenerRef = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el) {\n        el.addEventListener('focusin', e => {\n          if (\n            isHTMLElement(e.currentTarget) &&\n            !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n          ) {\n            pauseAllToasts();\n          }\n        });\n\n        el.addEventListener('focusout', e => {\n          if (\n            isHTMLElement(e.currentTarget) &&\n            !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n          ) {\n            playAllToasts();\n            tryRestoreFocus();\n          }\n        });\n      }\n    },\n    [playAllToasts, pauseAllToasts, tryRestoreFocus],\n  );\n\n  const createPositionSlot = (toastPosition: ToastPosition) =>\n    resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {\n      defaultProps: {\n        ref: focusListenerRef,\n        children: toastsToRender.get(toastPosition)?.map(toast => (\n          <ToastContainer\n            {...toast}\n            tryRestoreFocus={tryRestoreFocus}\n            intent={toast.intent}\n            announce={announce}\n            key={toast.toastId}\n            visible={isToastVisible(toast.toastId)}\n          >\n            {toast.content as React.ReactNode}\n          </ToastContainer>\n        )),\n        'data-toaster-position': toastPosition,\n        // Explicitly casting because our slot types can't handle data attributes\n      } as ExtractSlotProps<Slot<'div'>>,\n    });\n\n  return {\n    dir,\n    components: {\n      root: 'div',\n      bottomStart: 'div',\n      bottomEnd: 'div',\n      topStart: 'div',\n      topEnd: 'div',\n    },\n    root: resolveShorthand(rootProps, { required: true }),\n    bottomStart: createPositionSlot(TOAST_POSITIONS.bottomStart),\n    bottomEnd: createPositionSlot(TOAST_POSITIONS.bottomEnd),\n    topStart: createPositionSlot(TOAST_POSITIONS.topStart),\n    topEnd: createPositionSlot(TOAST_POSITIONS.topEnd),\n    announceRef,\n    offset,\n    announce: announceProp ?? announce,\n    renderAriaLive: !announceProp,\n  };\n};\n"],"names":["React","getNativeElementProps","isHTMLElement","resolveShorthand","useFluent_unstable","useFluent","TOAST_POSITIONS","useToaster","ToastContainer","useToaster_unstable","props","offset","announce","announceProp","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","useCallback","message","options","current","dir","rootProps","focusListenerRef","el","addEventListener","e","currentTarget","contains","relatedTarget","createPositionSlot","toastPosition","has","defaultProps","ref","children","get","map","toast","intent","key","toastId","visible","content","components","root","bottomStart","bottomEnd","topStart","topEnd","required","renderAriaLive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,eAAe,EAAiBC,UAAU,QAAQ,cAAc;AAEzE,SAASC,cAAc,QAAQ,oBAAoB;AAEnD;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC,QAAsC;IACxE,MAAM,EAAEC,OAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGC,MAAM,GAAGJ;IACpD,MAAMK,cAAcf,MAAMgB,MAAM,CAAW,IAAM,IAAI;IACrD,MAAM,EAAEC,eAAc,EAAEC,eAAc,EAAEC,eAAc,EAAEC,cAAa,EAAEC,gBAAe,EAAE,GACtFd,WAA2BO;IAC7B,MAAMF,WAAWZ,MAAMsB,WAAW,CAAW,CAACC,SAASC,UAAYT,YAAYU,OAAO,CAACF,SAASC,UAAU,EAAE;IAC5G,MAAM,EAAEE,IAAG,EAAE,GAAGrB;IAEhB,MAAMsB,YAAY1B,sBAAsB,OAAOa;IAE/C,8CAA8C;IAC9C,iDAAiD;IACjD,MAAMc,mBAAmB5B,MAAMsB,WAAW,CACxC,CAACO,KAA8B;QAC7B,IAAIA,IAAI;YACNA,GAAGC,gBAAgB,CAAC,WAAWC,CAAAA,IAAK;gBAClC,IACE7B,cAAc6B,EAAEC,aAAa,KAC7B,CAACD,EAAEC,aAAa,CAACC,QAAQ,CAAC/B,cAAc6B,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,IAAI,GACjF;oBACAf;gBACF,CAAC;YACH;YAEAU,GAAGC,gBAAgB,CAAC,YAAYC,CAAAA,IAAK;gBACnC,IACE7B,cAAc6B,EAAEC,aAAa,KAC7B,CAACD,EAAEC,aAAa,CAACC,QAAQ,CAAC/B,cAAc6B,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,IAAI,GACjF;oBACAd;oBACAC;gBACF,CAAC;YACH;QACF,CAAC;IACH,GACA;QAACD;QAAeD;QAAgBE;KAAgB;IAGlD,MAAMc,qBAAqB,CAACC;YAIZnB;QAHdd,OAAAA,iBAAiBc,eAAeoB,GAAG,CAACD,iBAAiBT,YAAY,IAAI,EAAE;YACrEW,cAAc;gBACZC,KAAKX;gBACLY,QAAQ,EAAEvB,CAAAA,sBAAAA,eAAewB,GAAG,CAACL,4BAAnBnB,iCAAAA,KAAAA,IAAAA,oBAAmCyB,IAAIC,CAAAA,sBAC/C,oBAACnC;wBACE,GAAGmC,KAAK;wBACTtB,iBAAiBA;wBACjBuB,QAAQD,MAAMC,MAAM;wBACpBhC,UAAUA;wBACViC,KAAKF,MAAMG,OAAO;wBAClBC,SAAS7B,eAAeyB,MAAMG,OAAO;uBAEpCH,MAAMK,OAAO;gBAGlB,yBAAyBZ;YAE3B;QACF;;IAEF,OAAO;QACLV;QACAuB,YAAY;YACVC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;QACV;QACAJ,MAAM/C,iBAAiBwB,WAAW;YAAE4B,UAAU,IAAI;QAAC;QACnDJ,aAAahB,mBAAmB7B,gBAAgB6C,WAAW;QAC3DC,WAAWjB,mBAAmB7B,gBAAgB8C,SAAS;QACvDC,UAAUlB,mBAAmB7B,gBAAgB+C,QAAQ;QACrDC,QAAQnB,mBAAmB7B,gBAAgBgD,MAAM;QACjDvC;QACAJ;QACAC,UAAUC,yBAAAA,0BAAAA,eAAgBD,QAAQ;QAClC4C,gBAAgB,CAAC3C;IACnB;AACF,EAAE"}
+{"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  getNativeElementProps,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';\nimport { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n  const { offset, announce: announceProp, ...rest } = props;\n  const announceRef = React.useRef<Announce>(() => null);\n  const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } =\n    useToaster<HTMLDivElement>(rest);\n  const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n  const { dir } = useFluent();\n\n  const rootProps = slot.always(getNativeElementProps('div', rest), { elementType: 'div' });\n  const focusableGroupAttr = useFocusableGroup({\n    tabBehavior: 'limited-trap-focus',\n    ignoreDefaultKeydown: { Escape: true },\n  });\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === Escape) {\n      e.preventDefault();\n      closeAllToasts();\n    }\n    props.onKeyDown?.(e);\n  });\n  const usePositionSlot = (toastPosition: ToastPosition) => {\n    const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n    const { announceToast, toasterRef } = useToastAnnounce(announceProp ?? announce);\n    return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n      defaultProps: {\n        ref: useMergedRefs(focusManagementRef, toasterRef),\n        children: toastsToRender.get(toastPosition)?.map(toast => (\n          <ToastContainer\n            {...toast}\n            tryRestoreFocus={tryRestoreFocus}\n            intent={toast.intent}\n            announce={announceToast}\n            key={toast.toastId}\n            visible={isToastVisible(toast.toastId)}\n          >\n            {toast.content as React.ReactNode}\n          </ToastContainer>\n        )),\n        onKeyDown,\n        ...focusableGroupAttr,\n        'data-toaster-position': toastPosition,\n        role: 'list',\n        // Explicitly casting because our slot types can't handle data attributes\n      } as ExtractSlotProps<Slot<'div'>>,\n      elementType: 'div',\n    });\n  };\n  return {\n    dir,\n    components: { root: 'div', bottomStart: 'div', bottomEnd: 'div', topStart: 'div', topEnd: 'div' },\n    root: slot.always(rootProps, { elementType: 'div' }),\n    bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n    bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n    topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n    topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n    announceRef,\n    offset,\n    announce: announceProp ?? announce,\n    renderAriaLive: !announceProp,\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","slot","useFluent_unstable","useFluent","useFocusableGroup","Escape","TOAST_POSITIONS","useToaster","ToastContainer","useToasterFocusManagement_unstable","useToastAnnounce","useToaster_unstable","props","offset","announce","announceProp","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useCallback","message","options","current","dir","rootProps","always","elementType","focusableGroupAttr","tabBehavior","ignoreDefaultKeydown","onKeyDown","e","key","preventDefault","usePositionSlot","toastPosition","focusManagementRef","announceToast","toasterRef","optional","has","defaultProps","ref","children","get","map","toast","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","renderAriaLive"],"mappings":"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"}