@fluentui/react-toast 9.0.1 → 9.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui/react-toast",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 03 Jul 2023 13:32:38 GMT",
5
+ "date": "Mon, 03 Jul 2023 20:42:52 GMT",
6
+ "tag": "@fluentui/react-toast_v9.0.2",
7
+ "version": "9.0.2",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfan.gao@microsoft.com",
12
+ "package": "@fluentui/react-toast",
13
+ "commit": "7b6bd85a2edbc0b9257fe300062d657a4c256844",
14
+ "comment": "fix: Toaster should play toasts on action dismiss"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 03 Jul 2023 13:34:28 GMT",
6
21
  "tag": "@fluentui/react-toast_v9.0.1",
7
22
  "version": "9.0.1",
8
23
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/react-toast
2
2
 
3
- This log was last generated on Mon, 03 Jul 2023 13:32:38 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 03 Jul 2023 20:42:52 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.2)
8
+
9
+ Mon, 03 Jul 2023 20:42:52 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.1..@fluentui/react-toast_v9.0.2)
11
+
12
+ ### Patches
13
+
14
+ - fix: Toaster should play toasts on action dismiss ([PR #28420](https://github.com/microsoft/fluentui/pull/28420) by lingfan.gao@microsoft.com)
15
+
7
16
  ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.1)
8
17
 
9
- Mon, 03 Jul 2023 13:32:38 GMT
18
+ Mon, 03 Jul 2023 13:34:28 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.0..@fluentui/react-toast_v9.0.1)
11
20
 
12
21
  ### Patches
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
2
+ import { getNativeElementProps, isHTMLElement, resolveShorthand } from '@fluentui/react-utilities';
3
3
  import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
4
4
  import { TOAST_POSITIONS, useToaster } from '../../state';
5
5
  import { ToastContainer } from '../ToastContainer';
@@ -14,25 +14,32 @@ import { ToastContainer } from '../ToastContainer';
14
14
  const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);
15
15
  const { dir } = useFluent();
16
16
  const rootProps = getNativeElementProps('div', rest);
17
- const onFocusPositionSlot = useEventCallback((e)=>{
18
- var _rootProps_onFocus;
19
- if (!e.currentTarget.contains(e.relatedTarget)) {
20
- pauseAllToasts();
17
+ // Adds native HTML focusin/focusout listeners
18
+ // https://github.com/facebook/react/issues/25194
19
+ const focusListenerRef = React.useCallback((el)=>{
20
+ if (el) {
21
+ el.addEventListener('focusin', (e)=>{
22
+ if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
23
+ pauseAllToasts();
24
+ }
25
+ });
26
+ el.addEventListener('focusout', (e)=>{
27
+ if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
28
+ playAllToasts();
29
+ tryRestoreFocus();
30
+ }
31
+ });
21
32
  }
22
- (_rootProps_onFocus = rootProps.onFocus) === null || _rootProps_onFocus === void 0 ? void 0 : _rootProps_onFocus.call(rootProps, e);
23
- });
24
- const onBlurPositionSlot = useEventCallback((e)=>{
25
- var _rootProps_onBlur;
26
- if (!e.currentTarget.contains(e.relatedTarget)) {
27
- playAllToasts();
28
- tryRestoreFocus();
29
- }
30
- (_rootProps_onBlur = rootProps.onBlur) === null || _rootProps_onBlur === void 0 ? void 0 : _rootProps_onBlur.call(rootProps, e);
31
- });
33
+ }, [
34
+ playAllToasts,
35
+ pauseAllToasts,
36
+ tryRestoreFocus
37
+ ]);
32
38
  const createPositionSlot = (toastPosition)=>{
33
39
  var _toastsToRender_get;
34
40
  return resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {
35
41
  defaultProps: {
42
+ ref: focusListenerRef,
36
43
  children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(ToastContainer, {
37
44
  ...toast,
38
45
  tryRestoreFocus: tryRestoreFocus,
@@ -41,9 +48,7 @@ import { ToastContainer } from '../ToastContainer';
41
48
  key: toast.toastId,
42
49
  visible: isToastVisible(toast.toastId)
43
50
  }, toast.content)),
44
- 'data-toaster-position': toastPosition,
45
- onFocus: onFocusPositionSlot,
46
- onBlur: onBlurPositionSlot
51
+ 'data-toaster-position': toastPosition
47
52
  }
48
53
  });
49
54
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n getNativeElementProps,\n resolveShorthand,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';\nimport { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n const { offset, announce: announceProp, ...rest } = props;\n const announceRef = React.useRef<Announce>(() => null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus } =\n useToaster<HTMLDivElement>(rest);\n const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n const { dir } = useFluent();\n\n const rootProps = getNativeElementProps('div', rest);\n\n const onFocusPositionSlot = useEventCallback((e: React.FocusEvent) => {\n if (!e.currentTarget.contains(e.relatedTarget)) {\n pauseAllToasts();\n }\n\n rootProps.onFocus?.(e);\n });\n\n const onBlurPositionSlot = useEventCallback((e: React.FocusEvent) => {\n if (!e.currentTarget.contains(e.relatedTarget)) {\n playAllToasts();\n tryRestoreFocus();\n }\n\n rootProps.onBlur?.(e);\n });\n\n const createPositionSlot = (toastPosition: ToastPosition) =>\n resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n children: toastsToRender.get(toastPosition)?.map(toast => (\n <ToastContainer\n {...toast}\n tryRestoreFocus={tryRestoreFocus}\n intent={toast.intent}\n announce={announce}\n key={toast.toastId}\n visible={isToastVisible(toast.toastId)}\n >\n {toast.content as React.ReactNode}\n </ToastContainer>\n )),\n 'data-toaster-position': toastPosition,\n onFocus: onFocusPositionSlot,\n onBlur: onBlurPositionSlot,\n // Explicitly casting because our slot types can't handle data attributes\n } as ExtractSlotProps<Slot<'div'>>,\n });\n\n return {\n dir,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n },\n root: resolveShorthand(rootProps, { required: true }),\n bottomStart: createPositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: createPositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: createPositionSlot(TOAST_POSITIONS.topStart),\n topEnd: createPositionSlot(TOAST_POSITIONS.topEnd),\n announceRef,\n offset,\n announce: announceProp ?? announce,\n renderAriaLive: !announceProp,\n };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useFluent_unstable","useFluent","TOAST_POSITIONS","useToaster","ToastContainer","useToaster_unstable","props","offset","announce","announceProp","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","useCallback","message","options","current","dir","rootProps","onFocusPositionSlot","e","currentTarget","contains","relatedTarget","onFocus","onBlurPositionSlot","onBlur","createPositionSlot","toastPosition","has","defaultProps","children","get","map","toast","intent","key","toastId","visible","content","components","root","bottomStart","bottomEnd","topStart","topEnd","required","renderAriaLive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,eAAe,EAAiBC,UAAU,QAAQ,cAAc;AAEzE,SAASC,cAAc,QAAQ,oBAAoB;AAEnD;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC,QAAsC;IACxE,MAAM,EAAEC,OAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGC,MAAM,GAAGJ;IACpD,MAAMK,cAAcf,MAAMgB,MAAM,CAAW,IAAM,IAAI;IACrD,MAAM,EAAEC,eAAc,EAAEC,eAAc,EAAEC,eAAc,EAAEC,cAAa,EAAEC,gBAAe,EAAE,GACtFd,WAA2BO;IAC7B,MAAMF,WAAWZ,MAAMsB,WAAW,CAAW,CAACC,SAASC,UAAYT,YAAYU,OAAO,CAACF,SAASC,UAAU,EAAE;IAC5G,MAAM,EAAEE,IAAG,EAAE,GAAGrB;IAEhB,MAAMsB,YAAY1B,sBAAsB,OAAOa;IAE/C,MAAMc,sBAAsBzB,iBAAiB,CAAC0B,IAAwB;YAKpEF;QAJA,IAAI,CAACE,EAAEC,aAAa,CAACC,QAAQ,CAACF,EAAEG,aAAa,GAAG;YAC9Cb;QACF,CAAC;QAEDQ,CAAAA,qBAAAA,UAAUM,OAAO,cAAjBN,gCAAAA,KAAAA,IAAAA,mBAAAA,KAAAA,WAAoBE;IACtB;IAEA,MAAMK,qBAAqB/B,iBAAiB,CAAC0B,IAAwB;YAMnEF;QALA,IAAI,CAACE,EAAEC,aAAa,CAACC,QAAQ,CAACF,EAAEG,aAAa,GAAG;YAC9CZ;YACAC;QACF,CAAC;QAEDM,CAAAA,oBAAAA,UAAUQ,MAAM,cAAhBR,+BAAAA,KAAAA,IAAAA,kBAAAA,KAAAA,WAAmBE;IACrB;IAEA,MAAMO,qBAAqB,CAACC;YAGZpB;QAFdf,OAAAA,iBAAiBe,eAAeqB,GAAG,CAACD,iBAAiBV,YAAY,IAAI,EAAE;YACrEY,cAAc;gBACZC,QAAQ,EAAEvB,CAAAA,sBAAAA,eAAewB,GAAG,CAACJ,4BAAnBpB,iCAAAA,KAAAA,IAAAA,oBAAmCyB,IAAIC,CAAAA,sBAC/C,oBAACnC;wBACE,GAAGmC,KAAK;wBACTtB,iBAAiBA;wBACjBuB,QAAQD,MAAMC,MAAM;wBACpBhC,UAAUA;wBACViC,KAAKF,MAAMG,OAAO;wBAClBC,SAAS7B,eAAeyB,MAAMG,OAAO;uBAEpCH,MAAMK,OAAO;gBAGlB,yBAAyBX;gBACzBJ,SAASL;gBACTO,QAAQD;YAEV;QACF;;IAEF,OAAO;QACLR;QACAuB,YAAY;YACVC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;QACV;QACAJ,MAAMhD,iBAAiByB,WAAW;YAAE4B,UAAU,IAAI;QAAC;QACnDJ,aAAaf,mBAAmB9B,gBAAgB6C,WAAW;QAC3DC,WAAWhB,mBAAmB9B,gBAAgB8C,SAAS;QACvDC,UAAUjB,mBAAmB9B,gBAAgB+C,QAAQ;QACrDC,QAAQlB,mBAAmB9B,gBAAgBgD,MAAM;QACjDvC;QACAJ;QACAC,UAAUC,yBAAAA,0BAAAA,eAAgBD,QAAQ;QAClC4C,gBAAgB,CAAC3C;IACnB;AACF,EAAE"}
1
+ {"version":3,"sources":["useToaster.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ExtractSlotProps,\n Slot,\n getNativeElementProps,\n isHTMLElement,\n resolveShorthand,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state';\nimport { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n const { offset, announce: announceProp, ...rest } = props;\n const announceRef = React.useRef<Announce>(() => null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus } =\n useToaster<HTMLDivElement>(rest);\n const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n const { dir } = useFluent();\n\n const rootProps = getNativeElementProps('div', rest);\n\n // Adds native HTML focusin/focusout listeners\n // https://github.com/facebook/react/issues/25194\n const focusListenerRef = React.useCallback(\n (el: HTMLDivElement | null) => {\n if (el) {\n el.addEventListener('focusin', e => {\n if (\n isHTMLElement(e.currentTarget) &&\n !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n ) {\n pauseAllToasts();\n }\n });\n\n el.addEventListener('focusout', e => {\n if (\n isHTMLElement(e.currentTarget) &&\n !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n ) {\n playAllToasts();\n tryRestoreFocus();\n }\n });\n }\n },\n [playAllToasts, pauseAllToasts, tryRestoreFocus],\n );\n\n const createPositionSlot = (toastPosition: ToastPosition) =>\n resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: focusListenerRef,\n children: toastsToRender.get(toastPosition)?.map(toast => (\n <ToastContainer\n {...toast}\n tryRestoreFocus={tryRestoreFocus}\n intent={toast.intent}\n announce={announce}\n key={toast.toastId}\n visible={isToastVisible(toast.toastId)}\n >\n {toast.content as React.ReactNode}\n </ToastContainer>\n )),\n 'data-toaster-position': toastPosition,\n // Explicitly casting because our slot types can't handle data attributes\n } as ExtractSlotProps<Slot<'div'>>,\n });\n\n return {\n dir,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n },\n root: resolveShorthand(rootProps, { required: true }),\n bottomStart: createPositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: createPositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: createPositionSlot(TOAST_POSITIONS.topStart),\n topEnd: createPositionSlot(TOAST_POSITIONS.topEnd),\n announceRef,\n offset,\n announce: announceProp ?? announce,\n renderAriaLive: !announceProp,\n };\n};\n"],"names":["React","getNativeElementProps","isHTMLElement","resolveShorthand","useFluent_unstable","useFluent","TOAST_POSITIONS","useToaster","ToastContainer","useToaster_unstable","props","offset","announce","announceProp","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","useCallback","message","options","current","dir","rootProps","focusListenerRef","el","addEventListener","e","currentTarget","contains","relatedTarget","createPositionSlot","toastPosition","has","defaultProps","ref","children","get","map","toast","intent","key","toastId","visible","content","components","root","bottomStart","bottomEnd","topStart","topEnd","required","renderAriaLive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,eAAe,EAAiBC,UAAU,QAAQ,cAAc;AAEzE,SAASC,cAAc,QAAQ,oBAAoB;AAEnD;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC,QAAsC;IACxE,MAAM,EAAEC,OAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGC,MAAM,GAAGJ;IACpD,MAAMK,cAAcf,MAAMgB,MAAM,CAAW,IAAM,IAAI;IACrD,MAAM,EAAEC,eAAc,EAAEC,eAAc,EAAEC,eAAc,EAAEC,cAAa,EAAEC,gBAAe,EAAE,GACtFd,WAA2BO;IAC7B,MAAMF,WAAWZ,MAAMsB,WAAW,CAAW,CAACC,SAASC,UAAYT,YAAYU,OAAO,CAACF,SAASC,UAAU,EAAE;IAC5G,MAAM,EAAEE,IAAG,EAAE,GAAGrB;IAEhB,MAAMsB,YAAY1B,sBAAsB,OAAOa;IAE/C,8CAA8C;IAC9C,iDAAiD;IACjD,MAAMc,mBAAmB5B,MAAMsB,WAAW,CACxC,CAACO,KAA8B;QAC7B,IAAIA,IAAI;YACNA,GAAGC,gBAAgB,CAAC,WAAWC,CAAAA,IAAK;gBAClC,IACE7B,cAAc6B,EAAEC,aAAa,KAC7B,CAACD,EAAEC,aAAa,CAACC,QAAQ,CAAC/B,cAAc6B,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,IAAI,GACjF;oBACAf;gBACF,CAAC;YACH;YAEAU,GAAGC,gBAAgB,CAAC,YAAYC,CAAAA,IAAK;gBACnC,IACE7B,cAAc6B,EAAEC,aAAa,KAC7B,CAACD,EAAEC,aAAa,CAACC,QAAQ,CAAC/B,cAAc6B,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,IAAI,GACjF;oBACAd;oBACAC;gBACF,CAAC;YACH;QACF,CAAC;IACH,GACA;QAACD;QAAeD;QAAgBE;KAAgB;IAGlD,MAAMc,qBAAqB,CAACC;YAIZnB;QAHdd,OAAAA,iBAAiBc,eAAeoB,GAAG,CAACD,iBAAiBT,YAAY,IAAI,EAAE;YACrEW,cAAc;gBACZC,KAAKX;gBACLY,QAAQ,EAAEvB,CAAAA,sBAAAA,eAAewB,GAAG,CAACL,4BAAnBnB,iCAAAA,KAAAA,IAAAA,oBAAmCyB,IAAIC,CAAAA,sBAC/C,oBAACnC;wBACE,GAAGmC,KAAK;wBACTtB,iBAAiBA;wBACjBuB,QAAQD,MAAMC,MAAM;wBACpBhC,UAAUA;wBACViC,KAAKF,MAAMG,OAAO;wBAClBC,SAAS7B,eAAeyB,MAAMG,OAAO;uBAEpCH,MAAMK,OAAO;gBAGlB,yBAAyBZ;YAE3B;QACF;;IAEF,OAAO;QACLV;QACAuB,YAAY;YACVC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;QACV;QACAJ,MAAM/C,iBAAiBwB,WAAW;YAAE4B,UAAU,IAAI;QAAC;QACnDJ,aAAahB,mBAAmB7B,gBAAgB6C,WAAW;QAC3DC,WAAWjB,mBAAmB7B,gBAAgB8C,SAAS;QACvDC,UAAUlB,mBAAmB7B,gBAAgB+C,QAAQ;QACrDC,QAAQnB,mBAAmB7B,gBAAgBgD,MAAM;QACjDvC;QACAJ;QACAC,UAAUC,yBAAAA,0BAAAA,eAAgBD,QAAQ;QAClC4C,gBAAgB,CAAC3C;IACnB;AACF,EAAE"}
@@ -19,25 +19,32 @@ const useToaster_unstable = (props)=>{
19
19
  const announce = _react.useCallback((message, options)=>announceRef.current(message, options), []);
20
20
  const { dir } = (0, _reactSharedContexts.useFluent_unstable)();
21
21
  const rootProps = (0, _reactUtilities.getNativeElementProps)('div', rest);
22
- const onFocusPositionSlot = (0, _reactUtilities.useEventCallback)((e)=>{
23
- var _rootProps_onFocus;
24
- if (!e.currentTarget.contains(e.relatedTarget)) {
25
- pauseAllToasts();
22
+ // Adds native HTML focusin/focusout listeners
23
+ // https://github.com/facebook/react/issues/25194
24
+ const focusListenerRef = _react.useCallback((el)=>{
25
+ if (el) {
26
+ el.addEventListener('focusin', (e)=>{
27
+ if ((0, _reactUtilities.isHTMLElement)(e.currentTarget) && !e.currentTarget.contains((0, _reactUtilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
28
+ pauseAllToasts();
29
+ }
30
+ });
31
+ el.addEventListener('focusout', (e)=>{
32
+ if ((0, _reactUtilities.isHTMLElement)(e.currentTarget) && !e.currentTarget.contains((0, _reactUtilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
33
+ playAllToasts();
34
+ tryRestoreFocus();
35
+ }
36
+ });
26
37
  }
27
- (_rootProps_onFocus = rootProps.onFocus) === null || _rootProps_onFocus === void 0 ? void 0 : _rootProps_onFocus.call(rootProps, e);
28
- });
29
- const onBlurPositionSlot = (0, _reactUtilities.useEventCallback)((e)=>{
30
- var _rootProps_onBlur;
31
- if (!e.currentTarget.contains(e.relatedTarget)) {
32
- playAllToasts();
33
- tryRestoreFocus();
34
- }
35
- (_rootProps_onBlur = rootProps.onBlur) === null || _rootProps_onBlur === void 0 ? void 0 : _rootProps_onBlur.call(rootProps, e);
36
- });
38
+ }, [
39
+ playAllToasts,
40
+ pauseAllToasts,
41
+ tryRestoreFocus
42
+ ]);
37
43
  const createPositionSlot = (toastPosition)=>{
38
44
  var _toastsToRender_get;
39
45
  return (0, _reactUtilities.resolveShorthand)(toastsToRender.has(toastPosition) ? rootProps : null, {
40
46
  defaultProps: {
47
+ ref: focusListenerRef,
41
48
  children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ _react.createElement(_toastContainer.ToastContainer, {
42
49
  ...toast,
43
50
  tryRestoreFocus: tryRestoreFocus,
@@ -46,9 +53,7 @@ const useToaster_unstable = (props)=>{
46
53
  key: toast.toastId,
47
54
  visible: isToastVisible(toast.toastId)
48
55
  }, toast.content)),
49
- 'data-toaster-position': toastPosition,
50
- onFocus: onFocusPositionSlot,
51
- onBlur: onBlurPositionSlot
56
+ 'data-toaster-position': toastPosition
52
57
  }
53
58
  });
54
59
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useToaster.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport { ToastContainer } from '../ToastContainer';\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 , ...rest } = props;\n const announceRef = React.useRef(()=>null);\n const { toastsToRender , isToastVisible , pauseAllToasts , playAllToasts , tryRestoreFocus } = useToaster(rest);\n const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);\n const { dir } = useFluent();\n const rootProps = getNativeElementProps('div', rest);\n const onFocusPositionSlot = useEventCallback((e)=>{\n var _rootProps_onFocus;\n if (!e.currentTarget.contains(e.relatedTarget)) {\n pauseAllToasts();\n }\n (_rootProps_onFocus = rootProps.onFocus) === null || _rootProps_onFocus === void 0 ? void 0 : _rootProps_onFocus.call(rootProps, e);\n });\n const onBlurPositionSlot = useEventCallback((e)=>{\n var _rootProps_onBlur;\n if (!e.currentTarget.contains(e.relatedTarget)) {\n playAllToasts();\n tryRestoreFocus();\n }\n (_rootProps_onBlur = rootProps.onBlur) === null || _rootProps_onBlur === void 0 ? void 0 : _rootProps_onBlur.call(rootProps, e);\n });\n const createPositionSlot = (toastPosition)=>{\n var _toastsToRender_get;\n return resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\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: announce,\n key: toast.toastId,\n visible: isToastVisible(toast.toastId)\n }, toast.content)),\n 'data-toaster-position': toastPosition,\n onFocus: onFocusPositionSlot,\n onBlur: onBlurPositionSlot\n }\n });\n };\n return {\n dir,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div'\n },\n root: resolveShorthand(rootProps, {\n required: true\n }),\n bottomStart: createPositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: createPositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: createPositionSlot(TOAST_POSITIONS.topStart),\n topEnd: createPositionSlot(TOAST_POSITIONS.topEnd),\n announceRef,\n offset,\n announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,\n renderAriaLive: !announceProp\n };\n};\n"],"names":["useToaster_unstable","props","offset","announce","announceProp","rest","announceRef","React","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","useToaster","useCallback","message","options","current","dir","useFluent","rootProps","getNativeElementProps","onFocusPositionSlot","useEventCallback","e","_rootProps_onFocus","currentTarget","contains","relatedTarget","onFocus","call","onBlurPositionSlot","_rootProps_onBlur","onBlur","createPositionSlot","toastPosition","_toastsToRender_get","resolveShorthand","has","defaultProps","children","get","map","toast","createElement","ToastContainer","intent","key","toastId","visible","content","components","root","bottomStart","bottomEnd","topStart","topEnd","required","TOAST_POSITIONS","renderAriaLive"],"mappings":";;;;+BASiBA;;aAAAA;;;6DATM;gCACmD;qCAC1B;uBACJ;gCACb;AAKpB,MAAMA,sBAAsB,CAACC,QAAQ;IAC5C,MAAM,EAAEC,OAAM,EAAGC,UAAUC,aAAY,EAAG,GAAGC,MAAM,GAAGJ;IACtD,MAAMK,cAAcC,OAAMC,MAAM,CAAC,IAAI,IAAI;IACzC,MAAM,EAAEC,eAAc,EAAGC,eAAc,EAAGC,eAAc,EAAGC,cAAa,EAAGC,gBAAe,EAAG,GAAGC,IAAAA,iBAAU,EAACT;IAC3G,MAAMF,WAAWI,OAAMQ,WAAW,CAAC,CAACC,SAASC,UAAUX,YAAYY,OAAO,CAACF,SAASC,UAAU,EAAE;IAChG,MAAM,EAAEE,IAAG,EAAG,GAAGC,IAAAA,uCAAS;IAC1B,MAAMC,YAAYC,IAAAA,qCAAqB,EAAC,OAAOjB;IAC/C,MAAMkB,sBAAsBC,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QAC9C,IAAIC;QACJ,IAAI,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACH,EAAEI,aAAa,GAAG;YAC5ClB;QACJ,CAAC;QACAe,CAAAA,qBAAqBL,UAAUS,OAAO,AAAD,MAAO,IAAI,IAAIJ,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBK,IAAI,CAACV,WAAWI,EAAE;IACvI;IACA,MAAMO,qBAAqBR,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QAC7C,IAAIQ;QACJ,IAAI,CAACR,EAAEE,aAAa,CAACC,QAAQ,CAACH,EAAEI,aAAa,GAAG;YAC5CjB;YACAC;QACJ,CAAC;QACAoB,CAAAA,oBAAoBZ,UAAUa,MAAM,AAAD,MAAO,IAAI,IAAID,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBF,IAAI,CAACV,WAAWI,EAAE;IACnI;IACA,MAAMU,qBAAqB,CAACC,gBAAgB;QACxC,IAAIC;QACJ,OAAOC,IAAAA,gCAAgB,EAAC7B,eAAe8B,GAAG,CAACH,iBAAiBf,YAAY,IAAI,EAAE;YAC1EmB,cAAc;gBACVC,UAAU,AAACJ,CAAAA,sBAAsB5B,eAAeiC,GAAG,CAACN,cAAa,MAAO,IAAI,IAAIC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBM,GAAG,CAAC,CAACC,QAAQ,WAAW,GAAGrC,OAAMsC,aAAa,CAACC,8BAAc,EAAE;wBACrM,GAAGF,KAAK;wBACR/B,iBAAiBA;wBACjBkC,QAAQH,MAAMG,MAAM;wBACpB5C,UAAUA;wBACV6C,KAAKJ,MAAMK,OAAO;wBAClBC,SAASxC,eAAekC,MAAMK,OAAO;oBACzC,GAAGL,MAAMO,OAAO,EAAE;gBACtB,yBAAyBf;gBACzBN,SAASP;gBACTW,QAAQF;YACZ;QACJ;IACJ;IACA,OAAO;QACHb;QACAiC,YAAY;YACRC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;QACZ;QACAJ,MAAMf,IAAAA,gCAAgB,EAACjB,WAAW;YAC9BqC,UAAU,IAAI;QAClB;QACAJ,aAAanB,mBAAmBwB,sBAAe,CAACL,WAAW;QAC3DC,WAAWpB,mBAAmBwB,sBAAe,CAACJ,SAAS;QACvDC,UAAUrB,mBAAmBwB,sBAAe,CAACH,QAAQ;QACrDC,QAAQtB,mBAAmBwB,sBAAe,CAACF,MAAM;QACjDnD;QACAJ;QACAC,UAAUC,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAIA,eAAeD,QAAQ;QACpFyD,gBAAgB,CAACxD;IACrB;AACJ"}
1
+ {"version":3,"sources":["useToaster.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isHTMLElement, resolveShorthand } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport { ToastContainer } from '../ToastContainer';\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 , ...rest } = props;\n const announceRef = React.useRef(()=>null);\n const { toastsToRender , isToastVisible , pauseAllToasts , playAllToasts , tryRestoreFocus } = useToaster(rest);\n const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);\n const { dir } = useFluent();\n const rootProps = getNativeElementProps('div', rest);\n // Adds native HTML focusin/focusout listeners\n // https://github.com/facebook/react/issues/25194\n const focusListenerRef = React.useCallback((el)=>{\n if (el) {\n el.addEventListener('focusin', (e)=>{\n if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {\n pauseAllToasts();\n }\n });\n el.addEventListener('focusout', (e)=>{\n if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {\n playAllToasts();\n tryRestoreFocus();\n }\n });\n }\n }, [\n playAllToasts,\n pauseAllToasts,\n tryRestoreFocus\n ]);\n const createPositionSlot = (toastPosition)=>{\n var _toastsToRender_get;\n return resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: focusListenerRef,\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: announce,\n key: toast.toastId,\n visible: isToastVisible(toast.toastId)\n }, toast.content)),\n 'data-toaster-position': toastPosition\n }\n });\n };\n return {\n dir,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div'\n },\n root: resolveShorthand(rootProps, {\n required: true\n }),\n bottomStart: createPositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: createPositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: createPositionSlot(TOAST_POSITIONS.topStart),\n topEnd: createPositionSlot(TOAST_POSITIONS.topEnd),\n announceRef,\n offset,\n announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,\n renderAriaLive: !announceProp\n };\n};\n"],"names":["useToaster_unstable","props","offset","announce","announceProp","rest","announceRef","React","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","useToaster","useCallback","message","options","current","dir","useFluent","rootProps","getNativeElementProps","focusListenerRef","el","addEventListener","e","isHTMLElement","currentTarget","contains","relatedTarget","createPositionSlot","toastPosition","_toastsToRender_get","resolveShorthand","has","defaultProps","ref","children","get","map","toast","createElement","ToastContainer","intent","key","toastId","visible","content","components","root","bottomStart","bottomEnd","topStart","topEnd","required","TOAST_POSITIONS","renderAriaLive"],"mappings":";;;;+BASiBA;;aAAAA;;;6DATM;gCACgD;qCACvB;uBACJ;gCACb;AAKpB,MAAMA,sBAAsB,CAACC,QAAQ;IAC5C,MAAM,EAAEC,OAAM,EAAGC,UAAUC,aAAY,EAAG,GAAGC,MAAM,GAAGJ;IACtD,MAAMK,cAAcC,OAAMC,MAAM,CAAC,IAAI,IAAI;IACzC,MAAM,EAAEC,eAAc,EAAGC,eAAc,EAAGC,eAAc,EAAGC,cAAa,EAAGC,gBAAe,EAAG,GAAGC,IAAAA,iBAAU,EAACT;IAC3G,MAAMF,WAAWI,OAAMQ,WAAW,CAAC,CAACC,SAASC,UAAUX,YAAYY,OAAO,CAACF,SAASC,UAAU,EAAE;IAChG,MAAM,EAAEE,IAAG,EAAG,GAAGC,IAAAA,uCAAS;IAC1B,MAAMC,YAAYC,IAAAA,qCAAqB,EAAC,OAAOjB;IAC/C,8CAA8C;IAC9C,iDAAiD;IACjD,MAAMkB,mBAAmBhB,OAAMQ,WAAW,CAAC,CAACS,KAAK;QAC7C,IAAIA,IAAI;YACJA,GAAGC,gBAAgB,CAAC,WAAW,CAACC,IAAI;gBAChC,IAAIC,IAAAA,6BAAa,EAACD,EAAEE,aAAa,KAAK,CAACF,EAAEE,aAAa,CAACC,QAAQ,CAACF,IAAAA,6BAAa,EAACD,EAAEI,aAAa,IAAIJ,EAAEI,aAAa,GAAG,IAAI,GAAG;oBACtHnB;gBACJ,CAAC;YACL;YACAa,GAAGC,gBAAgB,CAAC,YAAY,CAACC,IAAI;gBACjC,IAAIC,IAAAA,6BAAa,EAACD,EAAEE,aAAa,KAAK,CAACF,EAAEE,aAAa,CAACC,QAAQ,CAACF,IAAAA,6BAAa,EAACD,EAAEI,aAAa,IAAIJ,EAAEI,aAAa,GAAG,IAAI,GAAG;oBACtHlB;oBACAC;gBACJ,CAAC;YACL;QACJ,CAAC;IACL,GAAG;QACCD;QACAD;QACAE;KACH;IACD,MAAMkB,qBAAqB,CAACC,gBAAgB;QACxC,IAAIC;QACJ,OAAOC,IAAAA,gCAAgB,EAACzB,eAAe0B,GAAG,CAACH,iBAAiBX,YAAY,IAAI,EAAE;YAC1Ee,cAAc;gBACVC,KAAKd;gBACLe,UAAU,AAACL,CAAAA,sBAAsBxB,eAAe8B,GAAG,CAACP,cAAa,MAAO,IAAI,IAAIC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBO,GAAG,CAAC,CAACC,QAAQ,WAAW,GAAGlC,OAAMmC,aAAa,CAACC,8BAAc,EAAE;wBACrM,GAAGF,KAAK;wBACR5B,iBAAiBA;wBACjB+B,QAAQH,MAAMG,MAAM;wBACpBzC,UAAUA;wBACV0C,KAAKJ,MAAMK,OAAO;wBAClBC,SAASrC,eAAe+B,MAAMK,OAAO;oBACzC,GAAGL,MAAMO,OAAO,EAAE;gBACtB,yBAAyBhB;YAC7B;QACJ;IACJ;IACA,OAAO;QACHb;QACA8B,YAAY;YACRC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;QACZ;QACAJ,MAAMhB,IAAAA,gCAAgB,EAACb,WAAW;YAC9BkC,UAAU,IAAI;QAClB;QACAJ,aAAapB,mBAAmByB,sBAAe,CAACL,WAAW;QAC3DC,WAAWrB,mBAAmByB,sBAAe,CAACJ,SAAS;QACvDC,UAAUtB,mBAAmByB,sBAAe,CAACH,QAAQ;QACrDC,QAAQvB,mBAAmByB,sBAAe,CAACF,MAAM;QACjDhD;QACAJ;QACAC,UAAUC,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAIA,eAAeD,QAAQ;QACpFsD,gBAAgB,CAACrD;IACrB;AACJ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-toast",
3
- "version": "9.0.1",
3
+ "version": "9.0.2",
4
4
  "description": "Toast component for Fluent UI",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",