@fluentui/react-toast 9.3.7 → 9.3.8

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/react-toast",
   "entries": [
     {
-      "date": "Wed, 04 Oct 2023 08:41:55 GMT",
+      "date": "Thu, 05 Oct 2023 15:18:00 GMT",
+      "tag": "@fluentui/react-toast_v9.3.8",
+      "version": "9.3.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-toast",
+            "commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
+            "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-aria to v9.3.40",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.21",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.13.4",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-utilities to v9.14.1",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Oct 2023 08:45:47 GMT",
       "tag": "@fluentui/react-toast_v9.3.7",
       "version": "9.3.7",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Wed, 04 Oct 2023 08:41:55 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Oct 2023 15:18:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.8)
+
+Thu, 05 Oct 2023 15:18:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.7..@fluentui/react-toast_v9.3.8)
+
+### Patches
+
+- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.40 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-portal to v9.3.21 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+
 ## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.7)
 
-Wed, 04 Oct 2023 08:41:55 GMT 
+Wed, 04 Oct 2023 08:45:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.6..@fluentui/react-toast_v9.3.7)
 
 ### Patches

package/lib/components/Toast/useToast.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Toast.
  *
@@ -13,8 +13,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             ...props
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useToast.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\n\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 */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\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    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToast_unstable","props","ref","components","root","always","elementType","backgroundAppearance","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;QAEvBC,sBAAsBN,MAAMO,UAAU;IACxC;AACF,EAAE"}
+{"version":3,"sources":["useToast.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\n\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 */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToast_unstable","props","ref","components","root","always","elementType","backgroundAppearance","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;QAEvBC,sBAAsBN,MAAMO,UAAU;IACxC;AACF,EAAE"}

package/lib/components/ToastBody/useToastBody.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 /**
@@ -21,8 +21,11 @@ import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
         subtitle: slot.optional(props.subtitle, {
             elementType: 'div'
         }),
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             id: bodyId,
             ...props
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["useToastBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\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 */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\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, { elementType: 'div' }),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        id: bodyId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","optional","elementType","always","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,uBAAuB,QAAQ,kCAAkC;AAE1E;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAMC,uBAAuBJ;IAC7B,MAAM,EAAEK,MAAM,EAAE,GAAGN;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,KAAKW,QAAQ,CAACP,MAAMM,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMT,KAAKa,MAAM,CACfd,sBAAsB,OAAO;YAC3BM;YACAS,IAAIP;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["useToastBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\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 */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\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, { elementType: 'div' }),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        id: bodyId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","optional","elementType","always","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,uBAAuB,QAAQ,kCAAkC;AAE1E;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAMC,uBAAuBJ;IAC7B,MAAM,EAAEK,MAAM,EAAE,GAAGN;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,KAAKW,QAAQ,CAACP,MAAMM,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMT,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLS,IAAIP;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib/components/ToastContainer/useToastContainer.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { Delete, Tab } from '@fluentui/keyboard-keys';
 import { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';
@@ -206,7 +206,10 @@ const intentPolitenessMap = {
         }, {
             elementType: Timer
         }),
-        root: slot.always(getNativeElementProps('div', {
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, toastRef, toastAnimationRef),
             children,
             tabIndex: 0,

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  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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"}
+{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, toastRef, toastAnimationRef) as React.Ref<HTMLDivElement>,\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","getIntrinsicElementProps","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/ToastFooter/useToastFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render ToastFooter.
  *
@@ -13,8 +13,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: 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, 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;IAC/D,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"}
+{"version":3,"sources":["useToastFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToastFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,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, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 /**
@@ -45,8 +45,11 @@ import { useToastContainerContext } from '../../contexts/toastContainerContext';
             },
             elementType: 'div'
         }),
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             children: props.children,
             id: titleId,
             ...props

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, 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;IAC7D,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IAC5B,MAAMM,uBAAuBP;IAE7B,+DAA+D,GAC/D,IAAIQ;IACJ,OAAQH;QACN,KAAK;YACHG,4BAAc,oBAACd;YACf;QACF,KAAK;YACHc,4BAAc,oBAACb;YACf;QACF,KAAK;YACHa,4BAAc,oBAACX;YACf;QACF,KAAK;YACHW,4BAAc,oBAACZ;YACf;IACJ;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"}
+{"version":3,"sources":["useToastTitle.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\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","getIntrinsicElementProps","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,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAG1E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IAC5B,MAAMM,uBAAuBP;IAE7B,+DAA+D,GAC/D,IAAIQ;IACJ,OAAQH;QACN,KAAK;YACHG,4BAAc,oBAACd;YACf;QACF,KAAK;YACHc,4BAAc,oBAACb;YACf;QACF,KAAK;YACHa,4BAAc,oBAACX;YACf;QACF,KAAK;YACHW,4BAAc,oBAACZ;YACf;IACJ;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,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLa,UAAUd,MAAMc,QAAQ;YACxBE,IAAIb;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;QACAE;IACF;AACF,EAAE"}

package/lib/components/Toaster/useToaster.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, 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';
@@ -17,7 +17,7 @@ import { useToastAnnounce } from './useToastAnnounce';
     const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);
     const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);
     const { dir } = useFluent();
-    const rootProps = slot.always(getNativeElementProps('div', rest), {
+    const rootProps = slot.always(getIntrinsicElementProps('div', rest), {
         elementType: 'div'
     });
     const focusableGroupAttr = useFocusableGroup({

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  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, mountNode, inline = false, ...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\n  return {\n    dir,\n    mountNode,\n    components: {\n      root: 'div',\n      bottomStart: 'div',\n      bottomEnd: 'div',\n      topStart: 'div',\n      topEnd: 'div',\n      top: 'div',\n      bottom: 'div',\n    },\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    top: usePositionSlot(TOAST_POSITIONS.top),\n    bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n    announceRef,\n    offset,\n    announce: announceProp ?? announce,\n    renderAriaLive: !announceProp,\n    inline,\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","mountNode","inline","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","top","bottom","renderAriaLive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD,SAASC,eAAe,EAAiBC,UAAU,QAAQ,cAAc;AAEzE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,MAAM,EAAEC,UAAUC,YAAY,EAAEC,SAAS,EAAEC,SAAS,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAC/E,MAAMO,cAActB,MAAMuB,MAAM,CAAW,IAAM;IACjD,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,aAAa,EAAEC,eAAe,EAAEC,cAAc,EAAE,GACtGnB,WAA2BW;IAC7B,MAAMJ,WAAWjB,MAAM8B,WAAW,CAAW,CAACC,SAASC,UAAYV,YAAYW,OAAO,CAACF,SAASC,UAAU,EAAE;IAC5G,MAAM,EAAEE,GAAG,EAAE,GAAG5B;IAEhB,MAAM6B,YAAY/B,KAAKgC,MAAM,CAACnC,sBAAsB,OAAOoB,OAAO;QAAEgB,aAAa;IAAM;IACvF,MAAMC,qBAAqB/B,kBAAkB;QAC3CgC,aAAa;QACbC,sBAAsB;YAAEhC,QAAQ;QAAK;IACvC;IACA,MAAMiC,YAAYvC,iBAAiB,CAACwC;YAKlC3B;QAJA,IAAI2B,EAAEC,GAAG,KAAKnC,QAAQ;YACpBkC,EAAEE,cAAc;YAChBf;QACF;SACAd,mBAAAA,MAAM0B,SAAS,cAAf1B,uCAAAA,sBAAAA,OAAkB2B;IACpB;IACA,MAAMG,kBAAkB,CAACC;YAMTtB;QALd,MAAMuB,qBAAqBnC,mCAAmCc,gBAAgBC;QAC9E,MAAM,EAAEqB,aAAa,EAAEC,UAAU,EAAE,GAAGpC,iBAAiBK,yBAAAA,0BAAAA,eAAgBD;QACvE,OAAOb,KAAK8C,QAAQ,CAAC1B,eAAe2B,GAAG,CAACL,iBAAiBX,YAAY,MAAM;YACzEiB,cAAc;gBACZC,KAAKlD,cAAc4C,oBAAoBE;gBACvCK,QAAQ,GAAE9B,sBAAAA,eAAe+B,GAAG,CAACT,4BAAnBtB,0CAAAA,oBAAmCgC,GAAG,CAACC,CAAAA,sBAC/C,oBAAC9C;wBACE,GAAG8C,KAAK;wBACT7B,iBAAiBA;wBACjB8B,QAAQD,MAAMC,MAAM;wBACpBzC,UAAU+B;wBACVL,KAAKc,MAAME,OAAO;wBAClBC,SAASnC,eAAegC,MAAME,OAAO;uBAEpCF,MAAMI,OAAO;gBAGlBpB;gBACA,GAAGH,kBAAkB;gBACrB,yBAAyBQ;gBACzBgB,MAAM;YAER;YACAzB,aAAa;QACf;IACF;IAEA,OAAO;QACLH;QACAf;QACA4C,YAAY;YACVC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;YACRC,KAAK;YACLC,QAAQ;QACV;QACAN,MAAM5D,KAAKgC,MAAM,CAACD,WAAW;YAAEE,aAAa;QAAM;QAClD4B,aAAapB,gBAAgBpC,gBAAgBwD,WAAW;QACxDC,WAAWrB,gBAAgBpC,gBAAgByD,SAAS;QACpDC,UAAUtB,gBAAgBpC,gBAAgB0D,QAAQ;QAClDC,QAAQvB,gBAAgBpC,gBAAgB2D,MAAM;QAC9CC,KAAKxB,gBAAgBpC,gBAAgB4D,GAAG;QACxCC,QAAQzB,gBAAgBpC,gBAAgB6D,MAAM;QAC9ChD;QACAN;QACAC,UAAUC,yBAAAA,0BAAAA,eAAgBD;QAC1BsD,gBAAgB,CAACrD;QACjBE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  getIntrinsicElementProps,\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, mountNode, inline = false, ...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(getIntrinsicElementProps<ExtractSlotProps<Slot<'div'>>>('div', rest), {\n    elementType: 'div',\n  });\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<ExtractSlotProps<Slot<'div'>>>(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\n  return {\n    dir,\n    mountNode,\n    components: {\n      root: 'div',\n      bottomStart: 'div',\n      bottomEnd: 'div',\n      topStart: 'div',\n      topEnd: 'div',\n      top: 'div',\n      bottom: 'div',\n    },\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    top: usePositionSlot(TOAST_POSITIONS.top),\n    bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n    announceRef,\n    offset,\n    announce: announceProp ?? announce,\n    renderAriaLive: !announceProp,\n    inline,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useFluent_unstable","useFluent","useFocusableGroup","Escape","TOAST_POSITIONS","useToaster","ToastContainer","useToasterFocusManagement_unstable","useToastAnnounce","useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","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","top","bottom","renderAriaLive"],"mappings":"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"}

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

@@ -16,8 +16,11 @@ const useToast_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             ...props
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"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;;;eAAAA;;;;iEAVM;gCACqB;AASjC,MAAMA,oBAAoB,CAACC,OAAOC;IACzC,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"}
+{"version":3,"sources":["useToast.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        backgroundAppearance: props.appearance\n    };\n};\n"],"names":["useToast_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType","backgroundAppearance","appearance"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,oBAAoB,CAACC,OAAOC;IACzC,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FL,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;QACAC,sBAAsBR,MAAMS,UAAU;IAC1C;AACJ"}

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

@@ -24,8 +24,11 @@ const useToastBody_unstable = (props, ref)=>{
         subtitle: _reactutilities.slot.optional(props.subtitle, {
             elementType: 'div'
         }),
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             id: bodyId,
             ...props
         }), {

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

@@ -1 +1 @@
-{"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;;;eAAAA;;;;iEAZM;gCACqB;uCACH;qCACD;AAS7B,MAAMA,wBAAwB,CAACC,OAAOC;IAC7C,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,IAAAA,+CAAwB;IAC3C,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"}
+{"version":3,"sources":["useToastBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: 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","getIntrinsicElementProps","id"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACwB;uCACN;qCACD;AAS7B,MAAMA,wBAAwB,CAACC,OAAOC;IAC7C,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC,IAAAA,+CAAwB;IAC3C,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,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FZ,KAAKA;YACLa,IAAIV;YACJ,GAAGJ,KAAK;QACZ,IAAI;YACAW,aAAa;QACjB;QACAT;IACJ;AACJ"}

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

@@ -209,7 +209,10 @@ const useToastContainer_unstable = (props, ref)=>{
         }, {
             elementType: _Timer.Timer
         }),
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, toastRef, toastAnimationRef),
             children,
             tabIndex: 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["useToastContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, useEventCallback, useId, slot } 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 { Timer } from '../Timer/Timer';\nconst intentPolitenessMap = {\n    success: 'assertive',\n    warning: 'assertive',\n    error: 'assertive',\n    info: 'polite'\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 */ export const useToastContainer_unstable = (props, ref)=>{\n    const { visible, children, close: closeProp, remove, updateId, announce, data, timeout: timerTimeout, politeness: desiredPoliteness, intent = 'info', pauseOnHover, pauseOnWindowBlur, imperativeRef, tryRestoreFocus, ...rest } = props;\n    const titleId = useId('toast-title');\n    const bodyId = useId('toast-body');\n    const toastRef = React.useRef(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: {\n            Tab: true,\n            Escape: true,\n            Enter: true\n        }\n    });\n    const close = useEventCallback(()=>{\n        var _toastRef_current;\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if (activeElement && ((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains(activeElement))) {\n            focusedToastBeforeClose.current = true;\n        }\n        closeProp();\n    });\n    const onStatusChange = useEventCallback((status)=>{\n        var _props_onStatusChange;\n        return (_props_onStatusChange = props.onStatusChange) === null || _props_onStatusChange === void 0 ? void 0 : _props_onStatusChange.call(props, null, {\n            status,\n            ...props\n        });\n    });\n    const pause = useEventCallback(()=>setRunning(false));\n    const play = useEventCallback(()=>{\n        var _toastRef_current;\n        if (imperativePauseRef.current) {\n            return;\n        }\n        var _targetDocument_activeElement;\n        const containsActive = !!((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains((_targetDocument_activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) !== null && _targetDocument_activeElement !== void 0 ? _targetDocument_activeElement : null));\n        if (timerTimeout < 0) {\n            setRunning(true);\n            return;\n        }\n        if (!containsActive) {\n            setRunning(true);\n        }\n    });\n    React.useImperativeHandle(imperativeRef, ()=>({\n            focus: ()=>{\n                if (!toastRef.current) {\n                    return;\n                }\n                toastRef.current.focus();\n            },\n            play: ()=>{\n                imperativePauseRef.current = false;\n                play();\n            },\n            pause: ()=>{\n                imperativePauseRef.current = true;\n                pause();\n            }\n        }));\n    React.useEffect(()=>{\n        return ()=>onStatusChange('unmounted');\n    }, [\n        onStatusChange\n    ]);\n    React.useEffect(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        if (pauseOnWindowBlur) {\n            var _targetDocument_defaultView, _targetDocument_defaultView1;\n            (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('focus', play);\n            (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.addEventListener('blur', pause);\n            return ()=>{\n                var _targetDocument_defaultView, _targetDocument_defaultView1;\n                (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('focus', play);\n                (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('blur', pause);\n            };\n        }\n    }, [\n        targetDocument,\n        pause,\n        play,\n        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        const element = toastRef.current;\n        element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n    };\n    // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n    const userRootSlot = data.root;\n    // Using a ref callback here because addEventListener supports `once`\n    const toastAnimationRef = React.useCallback((el)=>{\n        if (el && toastRef.current) {\n            toastRef.current.addEventListener('animationend', ()=>{\n                // start toast once it's fully animated in\n                play();\n                onStatusChange('visible');\n            }, {\n                once: true\n            });\n        }\n    }, [\n        play,\n        onStatusChange\n    ]);\n    const onMouseEnter = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        pause();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const onMouseLeave = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        play();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n    const onKeyDown = useEventCallback((e)=>{\n        var _userRootSlot_onKeyDown;\n        if (e.key === Delete) {\n            e.preventDefault();\n            close();\n        }\n        if (e.key === Tab && e.currentTarget === e.target) {\n            e.preventDefault();\n            if (e.shiftKey) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(e.currentTarget)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            } else {\n                var _findFirstFocusable;\n                (_findFirstFocusable = findFirstFocusable(e.currentTarget)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n            }\n        }\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onKeyDown = userRootSlot.onKeyDown) === null || _userRootSlot_onKeyDown === void 0 ? void 0 : _userRootSlot_onKeyDown.call(userRootSlot, e);\n    });\n    React.useEffect(()=>{\n        var _toastRef_current;\n        if (!visible) {\n            return;\n        }\n        const politeness = desiredPoliteness !== null && desiredPoliteness !== void 0 ? desiredPoliteness : intentPolitenessMap[intent];\n        var _toastRef_current_textContent;\n        announce((_toastRef_current_textContent = (_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.textContent) !== null && _toastRef_current_textContent !== void 0 ? _toastRef_current_textContent : '', {\n            politeness\n        });\n    }, [\n        announce,\n        desiredPoliteness,\n        toastRef,\n        visible,\n        updateId,\n        intent\n    ]);\n    React.useEffect(()=>{\n        return ()=>{\n            if (focusedToastBeforeClose.current) {\n                focusedToastBeforeClose.current = false;\n                tryRestoreFocus();\n            }\n        };\n    }, [\n        tryRestoreFocus\n    ]);\n    return {\n        components: {\n            timer: Timer,\n            root: 'div'\n        },\n        timer: slot.always({\n            key: updateId,\n            onTimeout: close,\n            running,\n            timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1\n        }, {\n            elementType: Timer\n        }),\n        root: slot.always(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":["useToastContainer_unstable","intentPolitenessMap","success","warning","error","info","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","useId","bodyId","toastRef","React","useRef","targetDocument","useFluent_unstable","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Tab","Escape","Enter","useEventCallback","_toastRef_current","activeElement","current","contains","onStatusChange","status","_props_onStatusChange","call","pause","play","_targetDocument_activeElement","containsActive","useImperativeHandle","focus","useEffect","_targetDocument_defaultView","_targetDocument_defaultView1","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","_userRootSlot_onMouseEnter","onMouseLeave","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","_userRootSlot_onKeyDown","key","Delete","preventDefault","currentTarget","target","shiftKey","_findLastFocusable","_findFirstFocusable","_toastRef_current_textContent","textContent","components","timer","Timer","slot","always","onTimeout","elementType","getNativeElementProps","useMergedRefs","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}
+{"version":3,"sources":["useToastContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, useEventCallback, useId, slot } 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 { Timer } from '../Timer/Timer';\nconst intentPolitenessMap = {\n    success: 'assertive',\n    warning: 'assertive',\n    error: 'assertive',\n    info: 'polite'\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 */ export const useToastContainer_unstable = (props, ref)=>{\n    const { visible, children, close: closeProp, remove, updateId, announce, data, timeout: timerTimeout, politeness: desiredPoliteness, intent = 'info', pauseOnHover, pauseOnWindowBlur, imperativeRef, tryRestoreFocus, ...rest } = props;\n    const titleId = useId('toast-title');\n    const bodyId = useId('toast-body');\n    const toastRef = React.useRef(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: {\n            Tab: true,\n            Escape: true,\n            Enter: true\n        }\n    });\n    const close = useEventCallback(()=>{\n        var _toastRef_current;\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if (activeElement && ((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains(activeElement))) {\n            focusedToastBeforeClose.current = true;\n        }\n        closeProp();\n    });\n    const onStatusChange = useEventCallback((status)=>{\n        var _props_onStatusChange;\n        return (_props_onStatusChange = props.onStatusChange) === null || _props_onStatusChange === void 0 ? void 0 : _props_onStatusChange.call(props, null, {\n            status,\n            ...props\n        });\n    });\n    const pause = useEventCallback(()=>setRunning(false));\n    const play = useEventCallback(()=>{\n        var _toastRef_current;\n        if (imperativePauseRef.current) {\n            return;\n        }\n        var _targetDocument_activeElement;\n        const containsActive = !!((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains((_targetDocument_activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) !== null && _targetDocument_activeElement !== void 0 ? _targetDocument_activeElement : null));\n        if (timerTimeout < 0) {\n            setRunning(true);\n            return;\n        }\n        if (!containsActive) {\n            setRunning(true);\n        }\n    });\n    React.useImperativeHandle(imperativeRef, ()=>({\n            focus: ()=>{\n                if (!toastRef.current) {\n                    return;\n                }\n                toastRef.current.focus();\n            },\n            play: ()=>{\n                imperativePauseRef.current = false;\n                play();\n            },\n            pause: ()=>{\n                imperativePauseRef.current = true;\n                pause();\n            }\n        }));\n    React.useEffect(()=>{\n        return ()=>onStatusChange('unmounted');\n    }, [\n        onStatusChange\n    ]);\n    React.useEffect(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        if (pauseOnWindowBlur) {\n            var _targetDocument_defaultView, _targetDocument_defaultView1;\n            (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('focus', play);\n            (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.addEventListener('blur', pause);\n            return ()=>{\n                var _targetDocument_defaultView, _targetDocument_defaultView1;\n                (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('focus', play);\n                (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('blur', pause);\n            };\n        }\n    }, [\n        targetDocument,\n        pause,\n        play,\n        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        const element = toastRef.current;\n        element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n    };\n    // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n    const userRootSlot = data.root;\n    // Using a ref callback here because addEventListener supports `once`\n    const toastAnimationRef = React.useCallback((el)=>{\n        if (el && toastRef.current) {\n            toastRef.current.addEventListener('animationend', ()=>{\n                // start toast once it's fully animated in\n                play();\n                onStatusChange('visible');\n            }, {\n                once: true\n            });\n        }\n    }, [\n        play,\n        onStatusChange\n    ]);\n    const onMouseEnter = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        pause();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const onMouseLeave = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        play();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n    const onKeyDown = useEventCallback((e)=>{\n        var _userRootSlot_onKeyDown;\n        if (e.key === Delete) {\n            e.preventDefault();\n            close();\n        }\n        if (e.key === Tab && e.currentTarget === e.target) {\n            e.preventDefault();\n            if (e.shiftKey) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(e.currentTarget)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            } else {\n                var _findFirstFocusable;\n                (_findFirstFocusable = findFirstFocusable(e.currentTarget)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n            }\n        }\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onKeyDown = userRootSlot.onKeyDown) === null || _userRootSlot_onKeyDown === void 0 ? void 0 : _userRootSlot_onKeyDown.call(userRootSlot, e);\n    });\n    React.useEffect(()=>{\n        var _toastRef_current;\n        if (!visible) {\n            return;\n        }\n        const politeness = desiredPoliteness !== null && desiredPoliteness !== void 0 ? desiredPoliteness : intentPolitenessMap[intent];\n        var _toastRef_current_textContent;\n        announce((_toastRef_current_textContent = (_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.textContent) !== null && _toastRef_current_textContent !== void 0 ? _toastRef_current_textContent : '', {\n            politeness\n        });\n    }, [\n        announce,\n        desiredPoliteness,\n        toastRef,\n        visible,\n        updateId,\n        intent\n    ]);\n    React.useEffect(()=>{\n        return ()=>{\n            if (focusedToastBeforeClose.current) {\n                focusedToastBeforeClose.current = false;\n                tryRestoreFocus();\n            }\n        };\n    }, [\n        tryRestoreFocus\n    ]);\n    return {\n        components: {\n            timer: Timer,\n            root: 'div'\n        },\n        timer: slot.always({\n            key: updateId,\n            onTimeout: close,\n            running,\n            timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1\n        }, {\n            elementType: Timer\n        }),\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\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":["useToastContainer_unstable","intentPolitenessMap","success","warning","error","info","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","useId","bodyId","toastRef","React","useRef","targetDocument","useFluent_unstable","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Tab","Escape","Enter","useEventCallback","_toastRef_current","activeElement","current","contains","onStatusChange","status","_props_onStatusChange","call","pause","play","_targetDocument_activeElement","containsActive","useImperativeHandle","focus","useEffect","_targetDocument_defaultView","_targetDocument_defaultView1","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","_userRootSlot_onMouseEnter","onMouseLeave","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","_userRootSlot_onKeyDown","key","Delete","preventDefault","currentTarget","target","shiftKey","_findLastFocusable","_findFirstFocusable","_toastRef_current_textContent","textContent","components","timer","Timer","slot","always","onTimeout","elementType","getIntrinsicElementProps","useMergedRefs","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}

package/lib-commonjs/components/ToastFooter/useToastFooter.js

@@ -16,8 +16,11 @@ const useToastFooter_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             ...props
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useToastFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\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 */ export const useToastFooter_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    };\n};\n"],"names":["useToastFooter_unstable","props","ref","components","root","slot","always","getNativeElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACqB;AASjC,MAAMA,0BAA0B,CAACC,OAAOC;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;IACJ;AACJ"}
+{"version":3,"sources":["useToastFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\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 */ export const useToastFooter_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useToastFooter_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FL,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/ToastTitle/useToastTitle.js

@@ -48,8 +48,11 @@ const useToastTitle_unstable = (props, ref)=>{
             },
             elementType: 'div'
         }),
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             children: props.children,
             id: titleId,
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useToastTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\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 */ export const useToastTitle_unstable = (props, ref)=>{\n    const { intent, titleId } = useToastContainerContext();\n    const backgroundAppearance = useBackgroundAppearance();\n    /** Determine the role and media to render based on the intent */ let defaultIcon;\n    switch(intent){\n        case 'success':\n            defaultIcon = /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);\n            break;\n        case 'error':\n            defaultIcon = /*#__PURE__*/ React.createElement(DismissCircleFilled, null);\n            break;\n        case 'warning':\n            defaultIcon = /*#__PURE__*/ React.createElement(WarningFilled, null);\n            break;\n        case 'info':\n            defaultIcon = /*#__PURE__*/ React.createElement(InfoFilled, null);\n            break;\n    }\n    return {\n        action: slot.optional(props.action, {\n            elementType: 'div'\n        }),\n        components: {\n            root: 'div',\n            media: 'div',\n            action: 'div'\n        },\n        media: slot.optional(props.media, {\n            renderByDefault: !!intent,\n            defaultProps: {\n                children: defaultIcon\n            },\n            elementType: 'div'\n        }),\n        root: slot.always(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":["useToastTitle_unstable","props","ref","intent","titleId","useToastContainerContext","backgroundAppearance","useBackgroundAppearance","defaultIcon","React","createElement","CheckmarkCircleFilled","DismissCircleFilled","WarningFilled","InfoFilled","action","slot","optional","elementType","components","root","media","renderByDefault","defaultProps","children","always","getNativeElementProps","id"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;4BAC+D;gCAC1C;qCACJ;uCACC;AAS9B,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,IAAAA,+CAAwB;IACpD,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,+DAA+D,GAAG,IAAIC;IACtE,OAAOL;QACH,KAAK;YACDK,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACC,iCAAqB,EAAE;YACvE;QACJ,KAAK;YACDH,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACE,+BAAmB,EAAE;YACrE;QACJ,KAAK;YACDJ,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACG,yBAAa,EAAE;YAC/D;QACJ,KAAK;YACDL,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACI,sBAAU,EAAE;YAC5D;IACR;IACA,OAAO;QACHC,QAAQC,oBAAI,CAACC,QAAQ,CAAChB,MAAMc,MAAM,EAAE;YAChCG,aAAa;QACjB;QACAC,YAAY;YACRC,MAAM;YACNC,OAAO;YACPN,QAAQ;QACZ;QACAM,OAAOL,oBAAI,CAACC,QAAQ,CAAChB,MAAMoB,KAAK,EAAE;YAC9BC,iBAAiB,CAAC,CAACnB;YACnBoB,cAAc;gBACVC,UAAUhB;YACd;YACAU,aAAa;QACjB;QACAE,MAAMJ,oBAAI,CAACS,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CxB;YACAsB,UAAUvB,MAAMuB,QAAQ;YACxBG,IAAIvB;YACJ,GAAGH,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;QACAf;QACAG;IACJ;AACJ"}
+{"version":3,"sources":["useToastTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\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 */ export const useToastTitle_unstable = (props, ref)=>{\n    const { intent, titleId } = useToastContainerContext();\n    const backgroundAppearance = useBackgroundAppearance();\n    /** Determine the role and media to render based on the intent */ let defaultIcon;\n    switch(intent){\n        case 'success':\n            defaultIcon = /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);\n            break;\n        case 'error':\n            defaultIcon = /*#__PURE__*/ React.createElement(DismissCircleFilled, null);\n            break;\n        case 'warning':\n            defaultIcon = /*#__PURE__*/ React.createElement(WarningFilled, null);\n            break;\n        case 'info':\n            defaultIcon = /*#__PURE__*/ React.createElement(InfoFilled, null);\n            break;\n    }\n    return {\n        action: slot.optional(props.action, {\n            elementType: 'div'\n        }),\n        components: {\n            root: 'div',\n            media: 'div',\n            action: 'div'\n        },\n        media: slot.optional(props.media, {\n            renderByDefault: !!intent,\n            defaultProps: {\n                children: defaultIcon\n            },\n            elementType: 'div'\n        }),\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            children: props.children,\n            id: titleId,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        intent,\n        backgroundAppearance\n    };\n};\n"],"names":["useToastTitle_unstable","props","ref","intent","titleId","useToastContainerContext","backgroundAppearance","useBackgroundAppearance","defaultIcon","React","createElement","CheckmarkCircleFilled","DismissCircleFilled","WarningFilled","InfoFilled","action","slot","optional","elementType","components","root","media","renderByDefault","defaultProps","children","always","getIntrinsicElementProps","id"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;4BAC+D;gCACvC;qCACP;uCACC;AAS9B,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,IAAAA,+CAAwB;IACpD,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,+DAA+D,GAAG,IAAIC;IACtE,OAAOL;QACH,KAAK;YACDK,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACC,iCAAqB,EAAE;YACvE;QACJ,KAAK;YACDH,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACE,+BAAmB,EAAE;YACrE;QACJ,KAAK;YACDJ,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACG,yBAAa,EAAE;YAC/D;QACJ,KAAK;YACDL,cAAc,WAAW,GAAGC,OAAMC,aAAa,CAACI,sBAAU,EAAE;YAC5D;IACR;IACA,OAAO;QACHC,QAAQC,oBAAI,CAACC,QAAQ,CAAChB,MAAMc,MAAM,EAAE;YAChCG,aAAa;QACjB;QACAC,YAAY;YACRC,MAAM;YACNC,OAAO;YACPN,QAAQ;QACZ;QACAM,OAAOL,oBAAI,CAACC,QAAQ,CAAChB,MAAMoB,KAAK,EAAE;YAC9BC,iBAAiB,CAAC,CAACnB;YACnBoB,cAAc;gBACVC,UAAUhB;YACd;YACAU,aAAa;QACjB;QACAE,MAAMJ,oBAAI,CAACS,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FxB,KAAKA;YACLsB,UAAUvB,MAAMuB,QAAQ;YACxBG,IAAIvB;YACJ,GAAGH,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;QACAf;QACAG;IACJ;AACJ"}

package/lib-commonjs/components/Toaster/useToaster.js

@@ -24,7 +24,7 @@ const useToaster_unstable = (props)=>{
     const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = (0, _state.useToaster)(rest);
     const announce = _react.useCallback((message, options)=>announceRef.current(message, options), []);
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const rootProps = _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', rest), {
+    const rootProps = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', rest), {
         elementType: 'div'
     });
     const focusableGroupAttr = (0, _reacttabster.useFocusableGroup)({

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

@@ -1 +1 @@
-{"version":3,"sources":["useToaster.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, slot } 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 { TOAST_POSITIONS, useToaster } from '../../state';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */ export const useToaster_unstable = (props)=>{\n    const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;\n    const announceRef = React.useRef(()=>null);\n    const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);\n    const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);\n    const { dir } = useFluent();\n    const rootProps = slot.always(getNativeElementProps('div', rest), {\n        elementType: 'div'\n    });\n    const focusableGroupAttr = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus',\n        ignoreDefaultKeydown: {\n            Escape: true\n        }\n    });\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        if (e.key === Escape) {\n            e.preventDefault();\n            closeAllToasts();\n        }\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n    });\n    const usePositionSlot = (toastPosition)=>{\n        var _toastsToRender_get;\n        const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n        const { announceToast, toasterRef } = useToastAnnounce(announceProp !== null && announceProp !== void 0 ? announceProp : announce);\n        return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n            defaultProps: {\n                ref: useMergedRefs(focusManagementRef, toasterRef),\n                children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(ToastContainer, {\n                        ...toast,\n                        tryRestoreFocus: tryRestoreFocus,\n                        intent: toast.intent,\n                        announce: announceToast,\n                        key: toast.toastId,\n                        visible: isToastVisible(toast.toastId)\n                    }, toast.content)),\n                onKeyDown,\n                ...focusableGroupAttr,\n                'data-toaster-position': toastPosition,\n                role: 'list'\n            },\n            elementType: 'div'\n        });\n    };\n    return {\n        dir,\n        mountNode,\n        components: {\n            root: 'div',\n            bottomStart: 'div',\n            bottomEnd: 'div',\n            topStart: 'div',\n            topEnd: 'div',\n            top: 'div',\n            bottom: 'div'\n        },\n        root: slot.always(rootProps, {\n            elementType: 'div'\n        }),\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        top: usePositionSlot(TOAST_POSITIONS.top),\n        bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n        announceRef,\n        offset,\n        announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,\n        renderAriaLive: !announceProp,\n        inline\n    };\n};\n"],"names":["useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","rest","announceRef","React","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useToaster","useCallback","message","options","current","dir","useFluent","rootProps","slot","always","getNativeElementProps","elementType","focusableGroupAttr","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Escape","onKeyDown","useEventCallback","e","_props_onKeyDown","key","preventDefault","call","usePositionSlot","toastPosition","_toastsToRender_get","focusManagementRef","useToasterFocusManagement_unstable","announceToast","toasterRef","useToastAnnounce","optional","has","defaultProps","ref","useMergedRefs","children","get","map","toast","createElement","ToastContainer","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","TOAST_POSITIONS","renderAriaLive"],"mappings":"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"}
+{"version":3,"sources":["useToaster.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } 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 { TOAST_POSITIONS, useToaster } from '../../state';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */ export const useToaster_unstable = (props)=>{\n    const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;\n    const announceRef = React.useRef(()=>null);\n    const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);\n    const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);\n    const { dir } = useFluent();\n    const rootProps = slot.always(getIntrinsicElementProps('div', rest), {\n        elementType: 'div'\n    });\n    const focusableGroupAttr = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus',\n        ignoreDefaultKeydown: {\n            Escape: true\n        }\n    });\n    const onKeyDown = useEventCallback((e)=>{\n        var _props_onKeyDown;\n        if (e.key === Escape) {\n            e.preventDefault();\n            closeAllToasts();\n        }\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n    });\n    const usePositionSlot = (toastPosition)=>{\n        var _toastsToRender_get;\n        const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n        const { announceToast, toasterRef } = useToastAnnounce(announceProp !== null && announceProp !== void 0 ? announceProp : announce);\n        return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {\n            defaultProps: {\n                ref: useMergedRefs(focusManagementRef, toasterRef),\n                children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(ToastContainer, {\n                        ...toast,\n                        tryRestoreFocus: tryRestoreFocus,\n                        intent: toast.intent,\n                        announce: announceToast,\n                        key: toast.toastId,\n                        visible: isToastVisible(toast.toastId)\n                    }, toast.content)),\n                onKeyDown,\n                ...focusableGroupAttr,\n                'data-toaster-position': toastPosition,\n                role: 'list'\n            },\n            elementType: 'div'\n        });\n    };\n    return {\n        dir,\n        mountNode,\n        components: {\n            root: 'div',\n            bottomStart: 'div',\n            bottomEnd: 'div',\n            topStart: 'div',\n            topEnd: 'div',\n            top: 'div',\n            bottom: 'div'\n        },\n        root: slot.always(rootProps, {\n            elementType: 'div'\n        }),\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        top: usePositionSlot(TOAST_POSITIONS.top),\n        bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n        announceRef,\n        offset,\n        announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,\n        renderAriaLive: !announceProp,\n        inline\n    };\n};\n"],"names":["useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","rest","announceRef","React","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useToaster","useCallback","message","options","current","dir","useFluent","rootProps","slot","always","getIntrinsicElementProps","elementType","focusableGroupAttr","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Escape","onKeyDown","useEventCallback","e","_props_onKeyDown","key","preventDefault","call","usePositionSlot","toastPosition","_toastsToRender_get","focusManagementRef","useToasterFocusManagement_unstable","announceToast","toasterRef","useToastAnnounce","optional","has","defaultProps","ref","useMergedRefs","children","get","map","toast","createElement","ToastContainer","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","TOAST_POSITIONS","renderAriaLive"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toast",
-  "version": "9.3.7",
+  "version": "9.3.8",
   "description": "Toast component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,14 +37,14 @@
   "dependencies": {
     "react-transition-group": "^4.4.1",
     "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-aria": "^9.3.39",
+    "@fluentui/react-aria": "^9.3.40",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-jsx-runtime": "^9.0.13",
-    "@fluentui/react-portal": "^9.3.20",
+    "@fluentui/react-jsx-runtime": "^9.0.14",
+    "@fluentui/react-portal": "^9.3.21",
     "@fluentui/react-shared-contexts": "^9.9.2",
-    "@fluentui/react-tabster": "^9.13.3",
+    "@fluentui/react-tabster": "^9.13.4",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-utilities": "^9.14.0",
+    "@fluentui/react-utilities": "^9.14.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },