@fluentui/react-toast 9.5.5 → 9.6.1
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.md +29 -2
- package/lib/AriaLive.js.map +1 -1
- package/lib/Toast.js.map +1 -1
- package/lib/ToastBody.js.map +1 -1
- package/lib/ToastContainer.js.map +1 -1
- package/lib/ToastFooter.js.map +1 -1
- package/lib/ToastTitle.js.map +1 -1
- package/lib/ToastTrigger.js.map +1 -1
- package/lib/Toaster.js.map +1 -1
- package/lib/components/AriaLive/AriaLive.js.map +1 -1
- package/lib/components/AriaLive/AriaLive.types.js.map +1 -1
- package/lib/components/AriaLive/index.js.map +1 -1
- package/lib/components/AriaLive/renderAriaLive.js.map +1 -1
- package/lib/components/AriaLive/useAriaLive.js.map +1 -1
- package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js +25 -0
- package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js.map +1 -0
- package/lib/components/Timer/Timer.js.map +1 -1
- package/lib/components/Timer/index.js.map +1 -1
- package/lib/components/Timer/useTimerStyles.styles.raw.js +11 -0
- package/lib/components/Timer/useTimerStyles.styles.raw.js.map +1 -0
- package/lib/components/Toast/Toast.js.map +1 -1
- package/lib/components/Toast/Toast.types.js.map +1 -1
- package/lib/components/Toast/index.js.map +1 -1
- package/lib/components/Toast/renderToast.js.map +1 -1
- package/lib/components/Toast/useToast.js.map +1 -1
- package/lib/components/Toast/useToastContextValues.js.map +1 -1
- package/lib/components/Toast/useToastStyles.styles.raw.js +33 -0
- package/lib/components/Toast/useToastStyles.styles.raw.js.map +1 -0
- package/lib/components/ToastBody/ToastBody.js.map +1 -1
- package/lib/components/ToastBody/ToastBody.types.js.map +1 -1
- package/lib/components/ToastBody/index.js.map +1 -1
- package/lib/components/ToastBody/renderToastBody.js.map +1 -1
- package/lib/components/ToastBody/useToastBody.js.map +1 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.raw.js +46 -0
- package/lib/components/ToastBody/useToastBodyStyles.styles.raw.js.map +1 -0
- package/lib/components/ToastContainer/ToastContainer.js.map +1 -1
- package/lib/components/ToastContainer/ToastContainer.types.js.map +1 -1
- package/lib/components/ToastContainer/index.js.map +1 -1
- package/lib/components/ToastContainer/renderToastContainer.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainer.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerContextValues.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js +24 -0
- package/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js.map +1 -0
- package/lib/components/ToastFooter/ToastFooter.js.map +1 -1
- package/lib/components/ToastFooter/ToastFooter.types.js.map +1 -1
- package/lib/components/ToastFooter/index.js.map +1 -1
- package/lib/components/ToastFooter/renderToastFooter.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooter.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.raw.js +22 -0
- package/lib/components/ToastFooter/useToastFooterStyles.styles.raw.js.map +1 -0
- package/lib/components/ToastTitle/ToastTitle.js.map +1 -1
- package/lib/components/ToastTitle/ToastTitle.types.js.map +1 -1
- package/lib/components/ToastTitle/index.js.map +1 -1
- package/lib/components/ToastTitle/renderToastTitle.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitle.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.raw.js +87 -0
- package/lib/components/ToastTitle/useToastTitleStyles.styles.raw.js.map +1 -0
- package/lib/components/ToastTrigger/ToastTrigger.js.map +1 -1
- package/lib/components/ToastTrigger/ToastTrigger.types.js.map +1 -1
- package/lib/components/ToastTrigger/index.js.map +1 -1
- package/lib/components/ToastTrigger/renderToastTrigger.js.map +1 -1
- package/lib/components/ToastTrigger/useToastTrigger.js.map +1 -1
- package/lib/components/Toaster/Toaster.js.map +1 -1
- package/lib/components/Toaster/Toaster.types.js.map +1 -1
- package/lib/components/Toaster/index.js.map +1 -1
- package/lib/components/Toaster/renderToaster.js.map +1 -1
- package/lib/components/Toaster/useToastAnnounce.js.map +1 -1
- package/lib/components/Toaster/useToaster.js.map +1 -1
- package/lib/components/Toaster/useToasterFocusManagement.js.map +1 -1
- package/lib/components/Toaster/useToasterStyles.styles.raw.js +68 -0
- package/lib/components/Toaster/useToasterStyles.styles.raw.js.map +1 -0
- package/lib/contexts/toastContainerContext.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/state/constants.js.map +1 -1
- package/lib/state/index.js.map +1 -1
- package/lib/state/types.js.map +1 -1
- package/lib/state/useToastController.js.map +1 -1
- package/lib/state/useToaster.js.map +1 -1
- package/lib/state/vanilla/createToaster.js.map +1 -1
- package/lib/state/vanilla/dismissAllToasts.js.map +1 -1
- package/lib/state/vanilla/dismissToast.js.map +1 -1
- package/lib/state/vanilla/dispatchToast.js.map +1 -1
- package/lib/state/vanilla/getPositionStyles.js.map +1 -1
- package/lib/state/vanilla/index.js.map +1 -1
- package/lib/state/vanilla/pauseToast.js.map +1 -1
- package/lib/state/vanilla/playToast.js.map +1 -1
- package/lib/state/vanilla/updateToast.js.map +1 -1
- package/lib-commonjs/AriaLive.js.map +1 -1
- package/lib-commonjs/Toast.js.map +1 -1
- package/lib-commonjs/ToastBody.js.map +1 -1
- package/lib-commonjs/ToastContainer.js.map +1 -1
- package/lib-commonjs/ToastFooter.js.map +1 -1
- package/lib-commonjs/ToastTitle.js.map +1 -1
- package/lib-commonjs/ToastTrigger.js.map +1 -1
- package/lib-commonjs/Toaster.js.map +1 -1
- package/lib-commonjs/components/AriaLive/AriaLive.js.map +1 -1
- package/lib-commonjs/components/AriaLive/AriaLive.types.js.map +1 -1
- package/lib-commonjs/components/AriaLive/index.js.map +1 -1
- package/lib-commonjs/components/AriaLive/renderAriaLive.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLive.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js +41 -0
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Timer/Timer.js.map +1 -1
- package/lib-commonjs/components/Timer/index.js.map +1 -1
- package/lib-commonjs/components/Timer/useTimerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Timer/useTimerStyles.styles.raw.js +21 -0
- package/lib-commonjs/components/Timer/useTimerStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Toast/Toast.js.map +1 -1
- package/lib-commonjs/components/Toast/Toast.types.js.map +1 -1
- package/lib-commonjs/components/Toast/index.js.map +1 -1
- package/lib-commonjs/components/Toast/renderToast.js.map +1 -1
- package/lib-commonjs/components/Toast/useToast.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastContextValues.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js +49 -0
- package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ToastBody/ToastBody.js.map +1 -1
- package/lib-commonjs/components/ToastBody/ToastBody.types.js.map +1 -1
- package/lib-commonjs/components/ToastBody/index.js.map +1 -1
- package/lib-commonjs/components/ToastBody/renderToastBody.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBody.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js +62 -0
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ToastContainer/ToastContainer.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/ToastContainer.types.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/index.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/renderToastContainer.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainer.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerContextValues.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js +40 -0
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ToastFooter/ToastFooter.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/ToastFooter.types.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/index.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/renderToastFooter.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooter.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js +38 -0
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ToastTitle/ToastTitle.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/ToastTitle.types.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/index.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/renderToastTitle.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitle.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js +103 -0
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ToastTrigger/ToastTrigger.js.map +1 -1
- package/lib-commonjs/components/ToastTrigger/ToastTrigger.types.js.map +1 -1
- package/lib-commonjs/components/ToastTrigger/index.js.map +1 -1
- package/lib-commonjs/components/ToastTrigger/renderToastTrigger.js.map +1 -1
- package/lib-commonjs/components/ToastTrigger/useToastTrigger.js.map +1 -1
- package/lib-commonjs/components/Toaster/Toaster.js.map +1 -1
- package/lib-commonjs/components/Toaster/Toaster.types.js.map +1 -1
- package/lib-commonjs/components/Toaster/index.js.map +1 -1
- package/lib-commonjs/components/Toaster/renderToaster.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToastAnnounce.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToaster.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterFocusManagement.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js +84 -0
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/contexts/toastContainerContext.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/state/constants.js.map +1 -1
- package/lib-commonjs/state/index.js.map +1 -1
- package/lib-commonjs/state/types.js.map +1 -1
- package/lib-commonjs/state/useToastController.js.map +1 -1
- package/lib-commonjs/state/useToaster.js.map +1 -1
- package/lib-commonjs/state/vanilla/createToaster.js.map +1 -1
- package/lib-commonjs/state/vanilla/dismissAllToasts.js.map +1 -1
- package/lib-commonjs/state/vanilla/dismissToast.js.map +1 -1
- package/lib-commonjs/state/vanilla/dispatchToast.js.map +1 -1
- package/lib-commonjs/state/vanilla/getPositionStyles.js.map +1 -1
- package/lib-commonjs/state/vanilla/index.js.map +1 -1
- package/lib-commonjs/state/vanilla/pauseToast.js.map +1 -1
- package/lib-commonjs/state/vanilla/playToast.js.map +1 -1
- package/lib-commonjs/state/vanilla/updateToast.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toast/useToastContextValues.ts"],"sourcesContent":["import { ToastContextValues, ToastState } from './Toast.types';\n\nexport function useToastContextValues_unstable(state: ToastState): ToastContextValues {\n const { backgroundAppearance } = state;\n\n return {\n backgroundAppearance,\n };\n}\n"],"names":["useToastContextValues_unstable","state","backgroundAppearance"],"
|
|
1
|
+
{"version":3,"sources":["../src/components/Toast/useToastContextValues.ts"],"sourcesContent":["import { ToastContextValues, ToastState } from './Toast.types';\n\nexport function useToastContextValues_unstable(state: ToastState): ToastContextValues {\n const { backgroundAppearance } = state;\n\n return {\n backgroundAppearance,\n };\n}\n"],"names":["useToastContextValues_unstable","state","backgroundAppearance"],"mappings":";;;;;;;;;;AAEO,SAASA,+BAA+BC,KAAiB;IAC9D,MAAM,EAAEC,oBAAoB,EAAE,GAAGD;IAEjC,OAAO;QACLC;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n padding: '12px',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n lineHeight: '20px',\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted\n }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n padding: '12px',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n lineHeight: '20px',\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted\n }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaI,eAAe;;;IAwBXQ,uBAAuB;;;;uBA1BkB,gBAAgB;AAEnE,wBAAwB;IAC3BP,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGN,oBAAA,EAAA,WAAA,MAAA;IAAA;CAY5B,CAAC;AACF,MAAMO,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKjB,CAAC;AAGS,iCAAiCE,KAAK,IAAG;IAChD,aAAa;IACb,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;IAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;IAChK,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
toastClassNames: function() {
|
|
13
|
+
return toastClassNames;
|
|
14
|
+
},
|
|
15
|
+
useToastStyles_unstable: function() {
|
|
16
|
+
return useToastStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const toastClassNames = {
|
|
22
|
+
root: 'fui-Toast'
|
|
23
|
+
};
|
|
24
|
+
const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
25
|
+
display: 'grid',
|
|
26
|
+
gridTemplateColumns: 'auto 1fr auto',
|
|
27
|
+
padding: '12px',
|
|
28
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
29
|
+
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
|
|
30
|
+
boxShadow: _reacttheme.tokens.shadow8,
|
|
31
|
+
fontSize: _reacttheme.tokens.fontSizeBase300,
|
|
32
|
+
lineHeight: '20px',
|
|
33
|
+
fontWeight: _reacttheme.tokens.fontWeightSemibold,
|
|
34
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
35
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
|
|
36
|
+
});
|
|
37
|
+
const useStyles = (0, _react.makeStyles)({
|
|
38
|
+
inverted: {
|
|
39
|
+
color: _reacttheme.tokens.colorNeutralForegroundInverted2,
|
|
40
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundInverted
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
const useToastStyles_unstable = (state)=>{
|
|
44
|
+
'use no memo';
|
|
45
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
46
|
+
const styles = useStyles();
|
|
47
|
+
state.root.className = (0, _react.mergeClasses)(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
|
|
48
|
+
return state;
|
|
49
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastSlots, ToastState } from './Toast.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastClassNames: SlotClassNames<ToastSlots> = {\n root: 'fui-Toast',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n padding: '12px',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n lineHeight: '20px',\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n});\n\nconst useStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n});\n\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = (state: ToastState): ToastState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(\n toastClassNames.root,\n rootBaseClassName,\n state.backgroundAppearance === 'inverted' && styles.inverted,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","display","gridTemplateColumns","padding","borderRadius","borderRadiusMedium","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","lineHeight","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","useStyles","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"mappings":";;;;;;;;;;;IAKaI,eAAAA;;;2BA4BAyB;eAAAA;;;uBAjC6C,iBAAiB;4BACpD,wBAAwB;AAIxC,wBAAoD;IACzDxB,MAAM;AACR,EAAE;AAEF,MAAMC,2BAAuBN,sBAAAA,EAAgB;IAC3CO,SAAS;IACTC,qBAAqB;IACrBC,SAAS;IACTC,cAAcP,kBAAAA,CAAOQ,kBAAkB;IACvCC,QAAQ,CAAC,UAAU,EAAET,kBAAAA,CAAOU,sBAAsB,EAAE;IACpDC,WAAWX,kBAAAA,CAAOY,OAAO;IACzBC,UAAUb,kBAAAA,CAAOc,eAAe;IAChCC,YAAY;IACZC,YAAYhB,kBAAAA,CAAOiB,kBAAkB;IACrCC,OAAOlB,kBAAAA,CAAOmB,uBAAuB;IACrCC,iBAAiBpB,kBAAAA,CAAOqB,uBAAuB;AACjD;AAEA,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3ByB,UAAU;QACRL,OAAOlB,kBAAAA,CAAOwB,+BAA+B;QAC7CJ,iBAAiBpB,kBAAAA,CAAOyB,8BAA8B;IACxD;AACF;AAKO,gCAAgC,CAACE;IACtC;IAEA,MAAMC,oBAAoBzB;IAC1B,MAAM0B,SAASP;IACfK,MAAMzB,IAAI,CAAC4B,SAAS,OAAG/B,mBAAAA,EACrBE,gBAAgBC,IAAI,EACpB0B,mBACAD,MAAMI,oBAAoB,KAAK,cAAcF,OAAON,QAAQ,EAC5DI,MAAMzB,IAAI,CAAC4B,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/ToastBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastBody_unstable } from './useToastBody';\nimport { renderToastBody_unstable } from './renderToastBody';\nimport { useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\nimport type { ToastBodyProps } from './ToastBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastBody component\n */\nexport const ToastBody: ForwardRefComponent<ToastBodyProps> = React.forwardRef((props, ref) => {\n const state = useToastBody_unstable(props, ref);\n\n useToastBodyStyles_unstable(state);\n useCustomStyleHook_unstable('useToastBodyStyles_unstable')(state);\n\n return renderToastBody_unstable(state);\n});\n\nToastBody.displayName = 'ToastBody';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/ToastBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastBody_unstable } from './useToastBody';\nimport { renderToastBody_unstable } from './renderToastBody';\nimport { useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\nimport type { ToastBodyProps } from './ToastBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastBody component\n */\nexport const ToastBody: ForwardRefComponent<ToastBodyProps> = React.forwardRef((props, ref) => {\n const state = useToastBody_unstable(props, ref);\n\n useToastBodyStyles_unstable(state);\n useCustomStyleHook_unstable('useToastBodyStyles_unstable')(state);\n\n return renderToastBody_unstable(state);\n});\n\nToastBody.displayName = 'ToastBody';\n"],"names":["React","useToastBody_unstable","renderToastBody_unstable","useToastBodyStyles_unstable","useCustomStyleHook_unstable","ToastBody","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;8BACO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAG9B,kCAAkC;AAKvE,kBAAMA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,uCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/ToastBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type ToastBodySlots = {\n root: Slot<'div'>;\n subtitle?: Slot<'div'>;\n};\n\n/**\n * ToastBody Props\n */\nexport type ToastBodyProps = ComponentProps<ToastBodySlots> & {};\n\n/**\n * State used in rendering ToastBody\n */\nexport type ToastBodyState = ComponentState<ToastBodySlots> & {\n backgroundAppearance: BackgroundAppearanceContextValue;\n};\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/ToastBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type ToastBodySlots = {\n root: Slot<'div'>;\n subtitle?: Slot<'div'>;\n};\n\n/**\n * ToastBody Props\n */\nexport type ToastBodyProps = ComponentProps<ToastBodySlots> & {};\n\n/**\n * State used in rendering ToastBody\n */\nexport type ToastBodyState = ComponentState<ToastBodySlots> & {\n backgroundAppearance: BackgroundAppearanceContextValue;\n};\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAEE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/index.ts"],"sourcesContent":["export { ToastBody } from './ToastBody';\nexport type { ToastBodyProps, ToastBodySlots, ToastBodyState } from './ToastBody.types';\nexport { renderToastBody_unstable } from './renderToastBody';\nexport { useToastBody_unstable } from './useToastBody';\nexport { toastBodyClassNames, useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\n"],"names":["ToastBody","renderToastBody_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/index.ts"],"sourcesContent":["export { ToastBody } from './ToastBody';\nexport type { ToastBodyProps, ToastBodySlots, ToastBodyState } from './ToastBody.types';\nexport { renderToastBody_unstable } from './renderToastBody';\nexport { useToastBody_unstable } from './useToastBody';\nexport { toastBodyClassNames, useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\n"],"names":["ToastBody","renderToastBody_unstable","useToastBody_unstable","toastBodyClassNames","useToastBodyStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAETC,yCAAwB;;;eAExBE,6CAAmB;;;eAAEC,qDAA2B;;;eADhDF,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CACU,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/renderToastBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastBodyState, ToastBodySlots } from './ToastBody.types';\n\n/**\n * Render the final JSX of ToastBody\n */\nexport const renderToastBody_unstable = (state: ToastBodyState) => {\n assertSlots<ToastBodySlots>(state);\n\n return (\n <>\n <state.root />\n {state.subtitle ? <state.subtitle /> : null}\n </>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/renderToastBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastBodyState, ToastBodySlots } from './ToastBody.types';\n\n/**\n * Render the final JSX of ToastBody\n */\nexport const renderToastBody_unstable = (state: ToastBodyState) => {\n assertSlots<ToastBodySlots>(state);\n\n return (\n <>\n <state.root />\n {state.subtitle ? <state.subtitle /> : null}\n </>\n );\n};\n"],"names":["assertSlots","renderToastBody_unstable","state","root","subtitle"],"mappings":";;;;+BASaC;;;;;;4BARb,UAAiD;gCAErB,4BAA4B;AAMjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;8BACE,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;YACVD,MAAME,QAAQ,GAAA,WAAA,OAAG,eAAA,EAACF,MAAME,QAAQ,EAAA,CAAA,KAAM;;;AAG7C,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/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":";;;;+BAeaK;;;;;;;iEAfU,QAAQ;gCACgB,4BAA4B;uCAElC,uCAAuC;qCACxC,kCAAkC;AAWnE,8BAA8B,CAACC,OAAuBC;IAC3D,MAAMC,2BAAuBJ,4CAAAA;IAC7B,MAAM,EAAEK,MAAM,EAAE,OAAGN,+CAAAA;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,oBAAAA,CAAKW,QAAQ,CAACP,MAAMM,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMT,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLS,IAAIP;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n root: 'fui-ToastBody',\n subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = makeResetStyles({\n gridColumnStart: 2,\n gridColumnEnd: 3,\n paddingTop: '6px',\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word'\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n paddingTop: '4px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n color: tokens.colorNeutralForeground2\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2\n },\n subtitle: {\n color: tokens.colorNeutralForegroundInverted2\n }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.subtitle) {\n state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n }\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n root: 'fui-ToastBody',\n subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = makeResetStyles({\n gridColumnStart: 2,\n gridColumnEnd: 3,\n paddingTop: '6px',\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word'\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n paddingTop: '4px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n color: tokens.colorNeutralForeground2\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2\n },\n subtitle: {\n color: tokens.colorNeutralForegroundInverted2\n }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.subtitle) {\n state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaI,mBAAmB;;;IAiCfQ,2BAA2B;;;;uBAnCc,gBAAgB;AAEnE,4BAA4B;IAC/BP,IAAI,EAAE,eAAe;IACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;CAS5B,CAAC;AACF,MAAMQ,wBAAwB,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAA;CAQhC,CAAC;AACF,MAAMS,iBAAiB,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAK,MAAA,EAAA;IAAA;IAAAJ,QAAA,EAAA;QAAAI,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAOzB,CAAC;AAGS,oCAAqCE,KAAK,IAAG;IACpD,aAAa;IACb,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;IACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;IAC1CI,KAAK,CAACR,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,mBAAmB,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACX,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACY,SAAS,CAAC;IACxK,IAAIJ,KAAK,CAACP,QAAQ,EAAE;QAChBO,KAAK,CAACP,QAAQ,CAACW,SAAS,OAAGf,mBAAY,EAACE,mBAAmB,CAACE,QAAQ,EAAES,qBAAqB,EAAEF,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACV,QAAQ,EAAEO,KAAK,CAACP,QAAQ,CAACW,SAAS,CAAC;IAChM;IACA,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
toastBodyClassNames: function() {
|
|
13
|
+
return toastBodyClassNames;
|
|
14
|
+
},
|
|
15
|
+
useToastBodyStyles_unstable: function() {
|
|
16
|
+
return useToastBodyStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const toastBodyClassNames = {
|
|
22
|
+
root: 'fui-ToastBody',
|
|
23
|
+
subtitle: 'fui-ToastBody__subtitle'
|
|
24
|
+
};
|
|
25
|
+
const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
26
|
+
gridColumnStart: 2,
|
|
27
|
+
gridColumnEnd: 3,
|
|
28
|
+
paddingTop: '6px',
|
|
29
|
+
fontSize: _reacttheme.tokens.fontSizeBase300,
|
|
30
|
+
lineHeight: _reacttheme.tokens.fontSizeBase300,
|
|
31
|
+
fontWeight: _reacttheme.tokens.fontWeightRegular,
|
|
32
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
33
|
+
wordBreak: 'break-word'
|
|
34
|
+
});
|
|
35
|
+
const useSubtitleBaseClassName = (0, _react.makeResetStyles)({
|
|
36
|
+
paddingTop: '4px',
|
|
37
|
+
gridColumnStart: 2,
|
|
38
|
+
gridColumnEnd: 3,
|
|
39
|
+
fontSize: _reacttheme.tokens.fontSizeBase200,
|
|
40
|
+
lineHeight: _reacttheme.tokens.fontSizeBase200,
|
|
41
|
+
fontWeight: _reacttheme.tokens.fontWeightRegular,
|
|
42
|
+
color: _reacttheme.tokens.colorNeutralForeground2
|
|
43
|
+
});
|
|
44
|
+
const useInvertedStyles = (0, _react.makeStyles)({
|
|
45
|
+
root: {
|
|
46
|
+
color: _reacttheme.tokens.colorNeutralForegroundInverted2
|
|
47
|
+
},
|
|
48
|
+
subtitle: {
|
|
49
|
+
color: _reacttheme.tokens.colorNeutralForegroundInverted2
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
const useToastBodyStyles_unstable = (state)=>{
|
|
53
|
+
'use no memo';
|
|
54
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
55
|
+
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
56
|
+
const invertedStyles = useInvertedStyles();
|
|
57
|
+
state.root.className = (0, _react.mergeClasses)(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
|
|
58
|
+
if (state.subtitle) {
|
|
59
|
+
state.subtitle.className = (0, _react.mergeClasses)(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
|
|
60
|
+
}
|
|
61
|
+
return state;
|
|
62
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastBodySlots, ToastBodyState } from './ToastBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastBodyClassNames: SlotClassNames<ToastBodySlots> = {\n root: 'fui-ToastBody',\n subtitle: 'fui-ToastBody__subtitle',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n gridColumnStart: 2,\n gridColumnEnd: 3,\n paddingTop: '6px',\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word',\n});\n\nconst useSubtitleBaseClassName = makeResetStyles({\n paddingTop: '4px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n color: tokens.colorNeutralForeground2,\n});\n\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n subtitle: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\n/**\n * Apply styling to the ToastBody slots based on the state\n */\nexport const useToastBodyStyles_unstable = (state: ToastBodyState): ToastBodyState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n state.root.className = mergeClasses(\n toastBodyClassNames.root,\n rootBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.root,\n state.root.className,\n );\n\n if (state.subtitle) {\n state.subtitle.className = mergeClasses(\n toastBodyClassNames.subtitle,\n subtitleBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.subtitle,\n state.subtitle.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","gridColumnStart","gridColumnEnd","paddingTop","fontSize","fontSizeBase300","lineHeight","fontWeight","fontWeightRegular","color","colorNeutralForeground1","wordBreak","useSubtitleBaseClassName","fontSizeBase200","colorNeutralForeground2","useInvertedStyles","colorNeutralForegroundInverted2","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":";;;;;;;;;;;IAKaI,mBAAAA;;;+BAsCAoB;eAAAA;;;uBA3C6C,iBAAiB;4BACpD,wBAAwB;AAIxC,4BAA4D;IACjEnB,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,2BAAuBP,sBAAAA,EAAgB;IAC3CQ,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZC,UAAUR,kBAAAA,CAAOS,eAAe;IAChCC,YAAYV,kBAAAA,CAAOS,eAAe;IAClCE,YAAYX,kBAAAA,CAAOY,iBAAiB;IACpCC,OAAOb,kBAAAA,CAAOc,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,2BAA2BnB,0BAAAA,EAAgB;IAC/CU,YAAY;IACZF,iBAAiB;IACjBC,eAAe;IACfE,UAAUR,kBAAAA,CAAOiB,eAAe;IAChCP,YAAYV,kBAAAA,CAAOiB,eAAe;IAClCN,YAAYX,kBAAAA,CAAOY,iBAAiB;IACpCC,OAAOb,kBAAAA,CAAOkB,uBAAuB;AACvC;AAEA,MAAMC,wBAAoBrB,iBAAAA,EAAW;IACnCI,MAAM;QACJW,OAAOb,kBAAAA,CAAOoB,+BAA+B;IAC/C;IACAjB,UAAU;QACRU,OAAOb,kBAAAA,CAAOoB,+BAA+B;IAC/C;AACF;AAKO,oCAAoC,CAACE;IAC1C;IAEA,MAAMC,oBAAoBnB;IAC1B,MAAMoB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;IACvBG,MAAMpB,IAAI,CAACwB,SAAS,OAAG3B,mBAAAA,EACrBE,oBAAoBC,IAAI,EACxBqB,mBACAD,MAAMK,oBAAoB,KAAK,cAAcF,eAAevB,IAAI,EAChEoB,MAAMpB,IAAI,CAACwB,SAAS;IAGtB,IAAIJ,MAAMnB,QAAQ,EAAE;QAClBmB,MAAMnB,QAAQ,CAACuB,SAAS,OAAG3B,mBAAAA,EACzBE,oBAAoBE,QAAQ,EAC5BqB,uBACAF,MAAMK,oBAAoB,KAAK,cAAcF,eAAetB,QAAQ,EACpEmB,MAAMnB,QAAQ,CAACuB,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/ToastContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastContainer_unstable } from './useToastContainer';\nimport { renderToastContainer_unstable } from './renderToastContainer';\nimport { useToastContainerStyles_unstable } from './useToastContainerStyles.styles';\nimport type { ToastContainerProps } from './ToastContainer.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToastContainerContextValues_unstable } from './useToastContainerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastContainer component\n */\nexport const ToastContainer: ForwardRefComponent<ToastContainerProps> = React.forwardRef((props, ref) => {\n const state = useToastContainer_unstable(props, ref);\n\n useToastContainerStyles_unstable(state);\n useCustomStyleHook_unstable('useToastContainerStyles_unstable')(state);\n\n return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state));\n});\n\nToastContainer.displayName = 'ToastContainer';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/ToastContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastContainer_unstable } from './useToastContainer';\nimport { renderToastContainer_unstable } from './renderToastContainer';\nimport { useToastContainerStyles_unstable } from './useToastContainerStyles.styles';\nimport type { ToastContainerProps } from './ToastContainer.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToastContainerContextValues_unstable } from './useToastContainerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastContainer component\n */\nexport const ToastContainer: ForwardRefComponent<ToastContainerProps> = React.forwardRef((props, ref) => {\n const state = useToastContainer_unstable(props, ref);\n\n useToastContainerStyles_unstable(state);\n useCustomStyleHook_unstable('useToastContainerStyles_unstable')(state);\n\n return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state));\n});\n\nToastContainer.displayName = 'ToastContainer';\n"],"names":["React","useToastContainer_unstable","renderToastContainer_unstable","useToastContainerStyles_unstable","useToastContainerContextValues_unstable","useCustomStyleHook_unstable","ToastContainer","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaM;;;;;;;iEAZU,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;gDAG5B,mCAAmC;qCAC/C,kCAAkC;AAKvE,uBAAMA,WAAAA,GAA2DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQT,6CAAAA,EAA2BO,OAAOC;QAEhDN,+DAAAA,EAAiCO;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOR,mDAAAA,EAA8BQ,WAAON,uEAAAA,EAAwCM;AACtF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/ToastContainer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Announce } from '../AriaLive/AriaLive.types';\nimport { Toast, ToastIntent } from '../../state';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\nimport { TimerProps } from '../Timer/Timer';\n\nexport type ToastContainerContextValues = {\n toast: ToastContainerContextValue;\n};\n\nexport type ToastContainerSlots = {\n root: NonNullable<Slot<'div'>>;\n timer: NonNullable<Slot<TimerProps>>;\n};\n\n/**\n * ToastContainer Props\n */\nexport type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> &\n Toast & {\n visible: boolean;\n announce: Announce;\n intent: ToastIntent | undefined;\n tryRestoreFocus: () => void;\n };\n\n/**\n * State used in rendering ToastContainer\n */\nexport type ToastContainerState = ComponentState<ToastContainerSlots> &\n Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> &\n Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {\n /**\n * @deprecated Will be always \"0\".\n */\n transitionTimeout: number;\n timerTimeout: number;\n running: boolean;\n /**\n * @deprecated Will be always no-op.\n */\n onTransitionEntering: () => void;\n /**\n * @deprecated\n */\n nodeRef: React.Ref<HTMLDivElement>;\n\n onMotionFinish?: (event: null, data: { direction: 'enter' | 'exit' }) => void;\n };\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/ToastContainer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Announce } from '../AriaLive/AriaLive.types';\nimport { Toast, ToastIntent } from '../../state';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\nimport { TimerProps } from '../Timer/Timer';\n\nexport type ToastContainerContextValues = {\n toast: ToastContainerContextValue;\n};\n\nexport type ToastContainerSlots = {\n root: NonNullable<Slot<'div'>>;\n timer: NonNullable<Slot<TimerProps>>;\n};\n\n/**\n * ToastContainer Props\n */\nexport type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> &\n Toast & {\n visible: boolean;\n announce: Announce;\n intent: ToastIntent | undefined;\n tryRestoreFocus: () => void;\n };\n\n/**\n * State used in rendering ToastContainer\n */\nexport type ToastContainerState = ComponentState<ToastContainerSlots> &\n Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> &\n Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {\n /**\n * @deprecated Will be always \"0\".\n */\n transitionTimeout: number;\n timerTimeout: number;\n running: boolean;\n /**\n * @deprecated Will be always no-op.\n */\n onTransitionEntering: () => void;\n /**\n * @deprecated\n */\n nodeRef: React.Ref<HTMLDivElement>;\n\n onMotionFinish?: (event: null, data: { direction: 'enter' | 'exit' }) => void;\n };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/index.ts"],"sourcesContent":["export { ToastContainer } from './ToastContainer';\nexport type {\n ToastContainerContextValues,\n ToastContainerProps,\n ToastContainerSlots,\n ToastContainerState,\n} from './ToastContainer.types';\nexport { renderToastContainer_unstable } from './renderToastContainer';\nexport { useToastContainer_unstable } from './useToastContainer';\nexport { toastContainerClassNames, useToastContainerStyles_unstable } from './useToastContainerStyles.styles';\nexport { useToastContainerContextValues_unstable } from './useToastContainerContextValues';\n"],"names":["ToastContainer","renderToastContainer_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/index.ts"],"sourcesContent":["export { ToastContainer } from './ToastContainer';\nexport type {\n ToastContainerContextValues,\n ToastContainerProps,\n ToastContainerSlots,\n ToastContainerState,\n} from './ToastContainer.types';\nexport { renderToastContainer_unstable } from './renderToastContainer';\nexport { useToastContainer_unstable } from './useToastContainer';\nexport { toastContainerClassNames, useToastContainerStyles_unstable } from './useToastContainerStyles.styles';\nexport { useToastContainerContextValues_unstable } from './useToastContainerContextValues';\n"],"names":["ToastContainer","renderToastContainer_unstable","useToastContainer_unstable","toastContainerClassNames","useToastContainerStyles_unstable","useToastContainerContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAOdC,mDAA6B;;;eAE7BE,uDAAwB;;;eACxBE,uEAAuC;;;eADbD,+DAAgC;;;eAD1DF,6CAA0B;;;gCARJ,mBAAmB;sCAOJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC;gDACtD,mCAAmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\nimport { CollapseDelayed } from '@fluentui/react-motion-components-preview';\n\n/**\n * Render the final JSX of ToastContainer\n */\nexport const renderToastContainer_unstable = (\n state: ToastContainerState,\n contextValues: ToastContainerContextValues,\n) => {\n const { onMotionFinish, visible, updateId } = state;\n assertSlots<ToastContainerSlots>(state);\n\n return (\n <ToastContainerContextProvider value={contextValues.toast}>\n <CollapseDelayed appear onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>\n <state.root>\n {state.root.children}\n <state.timer key={updateId} />\n </state.root>\n </CollapseDelayed>\n </ToastContainerContextProvider>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\nimport { CollapseDelayed } from '@fluentui/react-motion-components-preview';\n\n/**\n * Render the final JSX of ToastContainer\n */\nexport const renderToastContainer_unstable = (\n state: ToastContainerState,\n contextValues: ToastContainerContextValues,\n) => {\n const { onMotionFinish, visible, updateId } = state;\n assertSlots<ToastContainerSlots>(state);\n\n return (\n <ToastContainerContextProvider value={contextValues.toast}>\n <CollapseDelayed appear onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>\n <state.root>\n {state.root.children}\n <state.timer key={updateId} />\n </state.root>\n </CollapseDelayed>\n </ToastContainerContextProvider>\n );\n};\n"],"names":["assertSlots","ToastContainerContextProvider","CollapseDelayed","renderToastContainer_unstable","state","contextValues","onMotionFinish","visible","updateId","value","toast","appear","unmountOnExit","root","children","timer"],"mappings":";;;;+BAUaG;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;uCAEV,uCAAuC;8CACrD,4CAA4C;AAKrE,sCAAsC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGJ;QAC9CJ,2BAAAA,EAAiCI;IAEjC,OAAA,WAAA,OACE,eAAA,EAACH,oDAAAA,EAAAA;QAA8BQ,OAAOJ,cAAcK,KAAK;kBACvD,WAAA,OAAA,eAAA,EAACR,6CAAAA,EAAAA;YAAgBS,MAAM,EAAA;YAACL,gBAAgBA;YAAgBC,SAASA;YAASK,aAAa,EAAA;sBACrF,WAAA,OAAA,gBAAA,EAACR,MAAMS,IAAI,EAAA;;oBACRT,MAAMS,IAAI,CAACC,QAAQ;sCACpB,eAAA,EAACV,MAAMW,KAAK,EAAA,CAAA,GAAMP;;;;;AAK5B,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/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 content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\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 // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n const onMotionFinish = React.useCallback(\n (_: null, { direction }: { direction: 'exit' | 'enter' }) => {\n if (direction === 'exit') {\n remove();\n }\n\n if (direction === 'enter') {\n // start toast once it's fully animated in\n play();\n onStatusChange('visible');\n }\n },\n [onStatusChange, play, remove],\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>({ onTimeout: close, running, timeout: timerTimeout ?? -1 }, { elementType: Timer }),\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) 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: 0,\n running,\n visible,\n remove,\n close,\n onTransitionEntering: () => {\n /* no-op */\n },\n updateId,\n nodeRef: toastRef,\n intent,\n titleId,\n bodyId,\n onMotionFinish,\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","content","_content","rest","titleId","useId","bodyId","toastRef","React","useRef","targetDocument","useFluent_unstable","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Tab","Escape","Enter","useEventCallback","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","useImperativeHandle","focus","useEffect","defaultView","addEventListener","removeEventListener","userRootSlot","root","onMotionFinish","useCallback","_","direction","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","key","Delete","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","Timer","slot","always","onTimeout","elementType","getIntrinsicElementProps","useMergedRefs","tabIndex","role","transitionTimeout","onTransitionEntering","nodeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/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 content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\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 // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n const onMotionFinish = React.useCallback(\n (_: null, { direction }: { direction: 'exit' | 'enter' }) => {\n if (direction === 'exit') {\n remove();\n }\n\n if (direction === 'enter') {\n // start toast once it's fully animated in\n play();\n onStatusChange('visible');\n }\n },\n [onStatusChange, play, remove],\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>({ onTimeout: close, running, timeout: timerTimeout ?? -1 }, { elementType: Timer }),\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) 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: 0,\n running,\n visible,\n remove,\n close,\n onTransitionEntering: () => {\n /* no-op */\n },\n updateId,\n nodeRef: toastRef,\n intent,\n titleId,\n bodyId,\n onMotionFinish,\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","content","_content","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","userRootSlot","root","onMotionFinish","useCallback","_","direction","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","onKeyDown","key","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","always","onTimeout","elementType","tabIndex","role","transitionTimeout","onTransitionEntering","nodeRef"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types';\n\nexport function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues {\n const { close, intent, titleId, bodyId } = state;\n\n const toastContainerContext = React.useMemo(\n () => ({\n close,\n intent,\n titleId,\n bodyId,\n }),\n [close, intent, titleId, bodyId],\n );\n\n return {\n toast: toastContainerContext,\n };\n}\n"],"names":["useToastContainerContextValues_unstable","state","close","intent","titleId","bodyId","toastContainerContext","
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types';\n\nexport function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues {\n const { close, intent, titleId, bodyId } = state;\n\n const toastContainerContext = React.useMemo(\n () => ({\n close,\n intent,\n titleId,\n bodyId,\n }),\n [close, intent, titleId, bodyId],\n );\n\n return {\n toast: toastContainerContext,\n };\n}\n"],"names":["React","useToastContainerContextValues_unstable","state","close","intent","titleId","bodyId","toastContainerContext","useMemo","toast"],"mappings":";;;;+BAGgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,KAA0B;IAChF,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGJ;IAE3C,MAAMK,wBAAwBP,OAAMQ,OAAO,CACzC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACH;QAAOC;QAAQC;QAASC;KAAO;IAGlC,OAAO;QACLG,OAAOF;IACT;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n })\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n })\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"mappings":";;;;;;;;;;;IAGaI,wBAAwB;;;oCAeY;;;;uBAlBH,gBAAgB;AAGvD,iCAAiC;IACpCC,IAAI,EAAE,oBAAoB;IAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAQ5B,CAAC;AAGS,MAAMQ,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;IAChDE,KAAK,CAACJ,IAAI,CAACM,SAAS,OAAGV,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAEK,iBAAiB,EAAED,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;IAC3G,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
toastContainerClassNames: function() {
|
|
13
|
+
return toastContainerClassNames;
|
|
14
|
+
},
|
|
15
|
+
useToastContainerStyles_unstable: function() {
|
|
16
|
+
return useToastContainerStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
22
|
+
const toastContainerClassNames = {
|
|
23
|
+
root: 'fui-ToastContainer',
|
|
24
|
+
timer: 'fui-ToastContainer__timer'
|
|
25
|
+
};
|
|
26
|
+
const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
27
|
+
boxSizing: 'border-box',
|
|
28
|
+
marginTop: '16px',
|
|
29
|
+
pointerEvents: 'all',
|
|
30
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
31
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
32
|
+
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`
|
|
33
|
+
})
|
|
34
|
+
});
|
|
35
|
+
const useToastContainerStyles_unstable = (state)=>{
|
|
36
|
+
'use no memo';
|
|
37
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
38
|
+
state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
39
|
+
return state;
|
|
40
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ToastContainerSlots, ToastContainerState } from './ToastContainer.types';\n\nexport const toastContainerClassNames: SlotClassNames<ToastContainerSlots> = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n }),\n});\n\n/**\n * Apply styling to the ToastContainer slots based on the state\n */\nexport const useToastContainerStyles_unstable = (state: ToastContainerState): ToastContainerState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","boxSizing","marginTop","pointerEvents","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"mappings":";;;;;;;;;;;IAMaI,wBAAAA;;;IAkBAY,gCAAAA;;;;uBAxBiC,iBAAiB;4BACxC,wBAAwB;8BAEC,0BAA0B;AAGnE,iCAAsE;IAC3EX,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,2BAAuBP,sBAAAA,EAAgB;IAC3CQ,WAAW;IACXC,WAAW;IACXC,eAAe;IACfC,cAAcT,kBAAAA,CAAOU,kBAAkB;IACvC,OAAGT,6CAAAA,EAAgC;QACjCU,SAAS,GAAGX,kBAAAA,CAAOY,gBAAgB,CAAC,OAAO,EAAEZ,kBAAAA,CAAOa,iBAAiB,EAAE;IACzE,EAAE;AACJ;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,oBAAoBX;IAC1BU,MAAMZ,IAAI,CAACc,SAAS,OAAGlB,mBAAAA,EAAaG,yBAAyBC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACc,SAAS;IAE1G,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/ToastFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastFooter_unstable } from './useToastFooter';\nimport { renderToastFooter_unstable } from './renderToastFooter';\nimport { useToastFooterStyles_unstable } from './useToastFooterStyles.styles';\nimport type { ToastFooterProps } from './ToastFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastFooter component\n */\nexport const ToastFooter: ForwardRefComponent<ToastFooterProps> = React.forwardRef((props, ref) => {\n const state = useToastFooter_unstable(props, ref);\n\n useToastFooterStyles_unstable(state);\n useCustomStyleHook_unstable('useToastFooterStyles_unstable')(state);\n\n return renderToastFooter_unstable(state);\n});\n\nToastFooter.displayName = 'ToastFooter';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/ToastFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastFooter_unstable } from './useToastFooter';\nimport { renderToastFooter_unstable } from './renderToastFooter';\nimport { useToastFooterStyles_unstable } from './useToastFooterStyles.styles';\nimport type { ToastFooterProps } from './ToastFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastFooter component\n */\nexport const ToastFooter: ForwardRefComponent<ToastFooterProps> = React.forwardRef((props, ref) => {\n const state = useToastFooter_unstable(props, ref);\n\n useToastFooterStyles_unstable(state);\n useCustomStyleHook_unstable('useToastFooterStyles_unstable')(state);\n\n return renderToastFooter_unstable(state);\n});\n\nToastFooter.displayName = 'ToastFooter';\n"],"names":["React","useToastFooter_unstable","renderToastFooter_unstable","useToastFooterStyles_unstable","useCustomStyleHook_unstable","ToastFooter","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/ToastFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToastFooterSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * ToastFooter Props\n */\nexport type ToastFooterProps = ComponentProps<ToastFooterSlots> & {};\n\n/**\n * State used in rendering ToastFooter\n */\nexport type ToastFooterState = ComponentState<ToastFooterSlots>;\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/ToastFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToastFooterSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * ToastFooter Props\n */\nexport type ToastFooterProps = ComponentProps<ToastFooterSlots> & {};\n\n/**\n * State used in rendering ToastFooter\n */\nexport type ToastFooterState = ComponentState<ToastFooterSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAgE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/index.ts"],"sourcesContent":["export { ToastFooter } from './ToastFooter';\nexport type { ToastFooterProps, ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nexport { renderToastFooter_unstable } from './renderToastFooter';\nexport { useToastFooter_unstable } from './useToastFooter';\nexport { toastFooterClassNames, useToastFooterStyles_unstable } from './useToastFooterStyles.styles';\n"],"names":["ToastFooter","renderToastFooter_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/index.ts"],"sourcesContent":["export { ToastFooter } from './ToastFooter';\nexport type { ToastFooterProps, ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nexport { renderToastFooter_unstable } from './renderToastFooter';\nexport { useToastFooter_unstable } from './useToastFooter';\nexport { toastFooterClassNames, useToastFooterStyles_unstable } from './useToastFooterStyles.styles';\n"],"names":["ToastFooter","renderToastFooter_unstable","useToastFooter_unstable","toastFooterClassNames","useToastFooterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAEXC,6CAA0B;;;eAE1BE,iDAAqB;;;eAAEC,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/renderToastFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types';\n\n/**\n * Render the final JSX of ToastFooter\n */\nexport const renderToastFooter_unstable = (state: ToastFooterState) => {\n assertSlots<ToastFooterSlots>(state);\n\n return <state.root />;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/renderToastFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types';\n\n/**\n * Render the final JSX of ToastFooter\n */\nexport const renderToastFooter_unstable = (state: ToastFooterState) => {\n assertSlots<ToastFooterSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderToastFooter_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAMjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/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":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,gCAAgC,CAACC,OAAyBC;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const toastFooterClassNames = {\n root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n paddingTop: '16px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n display: 'flex',\n alignItems: 'center',\n gap: '14px'\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const toastFooterClassNames = {\n root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n paddingTop: '16px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n display: 'flex',\n alignItems: 'center',\n gap: '14px'\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"mappings":";;;;;;;;;;;IACaE,qBAAqB;;;iCAeY;;;;uBAhBA,gBAAgB;AACvD,8BAA8B;IACjCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAOhC,CAAC;AAGS,MAAMK,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;IAChDE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEI,iBAAiB,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
toastFooterClassNames: function() {
|
|
13
|
+
return toastFooterClassNames;
|
|
14
|
+
},
|
|
15
|
+
useToastFooterStyles_unstable: function() {
|
|
16
|
+
return useToastFooterStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const toastFooterClassNames = {
|
|
21
|
+
root: 'fui-ToastFooter'
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Styles for the root slot
|
|
25
|
+
*/ const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
26
|
+
paddingTop: '16px',
|
|
27
|
+
gridColumnStart: 2,
|
|
28
|
+
gridColumnEnd: 3,
|
|
29
|
+
display: 'flex',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
gap: '14px'
|
|
32
|
+
});
|
|
33
|
+
const useToastFooterStyles_unstable = (state)=>{
|
|
34
|
+
'use no memo';
|
|
35
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
36
|
+
state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
37
|
+
return state;
|
|
38
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastFooterClassNames: SlotClassNames<ToastFooterSlots> = {\n root: 'fui-ToastFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n paddingTop: '16px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n display: 'flex',\n alignItems: 'center',\n gap: '14px',\n});\n\n/**\n * Apply styling to the ToastFooter slots based on the state\n */\nexport const useToastFooterStyles_unstable = (state: ToastFooterState): ToastFooterState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","paddingTop","gridColumnStart","gridColumnEnd","display","alignItems","gap","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"mappings":";;;;;;;;;;;IAIaE,qBAAAA;;;iCAmBAS;eAAAA;;;uBAvBiC,iBAAiB;AAIxD,8BAAgE;IACrER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,2BAAuBJ,sBAAAA,EAAgB;IAC3CK,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IACfC,SAAS;IACTC,YAAY;IACZC,KAAK;AACP;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,oBAAoBT;IAC1BQ,MAAMT,IAAI,CAACW,SAAS,OAAGb,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastTitle_unstable } from './useToastTitle';\nimport { renderToastTitle_unstable } from './renderToastTitle';\nimport { useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\nimport type { ToastTitleProps } from './ToastTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastTitle component\n */\nexport const ToastTitle: ForwardRefComponent<ToastTitleProps> = React.forwardRef((props, ref) => {\n const state = useToastTitle_unstable(props, ref);\n\n useToastTitleStyles_unstable(state);\n useCustomStyleHook_unstable('useToastTitleStyles_unstable')(state);\n\n return renderToastTitle_unstable(state);\n});\n\nToastTitle.displayName = 'ToastTitle';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastTitle_unstable } from './useToastTitle';\nimport { renderToastTitle_unstable } from './renderToastTitle';\nimport { useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\nimport type { ToastTitleProps } from './ToastTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastTitle component\n */\nexport const ToastTitle: ForwardRefComponent<ToastTitleProps> = React.forwardRef((props, ref) => {\n const state = useToastTitle_unstable(props, ref);\n\n useToastTitleStyles_unstable(state);\n useCustomStyleHook_unstable('useToastTitleStyles_unstable')(state);\n\n return renderToastTitle_unstable(state);\n});\n\nToastTitle.displayName = 'ToastTitle';\n"],"names":["React","useToastTitle_unstable","renderToastTitle_unstable","useToastTitleStyles_unstable","useCustomStyleHook_unstable","ToastTitle","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAKvE,mBAAMA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,yCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAC7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\n\nexport type ToastTitleSlots = {\n root: NonNullable<Slot<'div'>>;\n media?: Slot<'div'>;\n action?: Slot<'div'>;\n};\n\n/**\n * ToastTitle Props\n */\nexport type ToastTitleProps = ComponentProps<ToastTitleSlots> & {};\n\n/**\n * State used in rendering ToastTitle\n */\nexport type ToastTitleState = ComponentState<ToastTitleSlots> &\n Pick<ToastContainerContextValue, 'intent'> & {\n backgroundAppearance: BackgroundAppearanceContextValue;\n };\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\n\nexport type ToastTitleSlots = {\n root: NonNullable<Slot<'div'>>;\n media?: Slot<'div'>;\n action?: Slot<'div'>;\n};\n\n/**\n * ToastTitle Props\n */\nexport type ToastTitleProps = ComponentProps<ToastTitleSlots> & {};\n\n/**\n * State used in rendering ToastTitle\n */\nexport type ToastTitleState = ComponentState<ToastTitleSlots> &\n Pick<ToastContainerContextValue, 'intent'> & {\n backgroundAppearance: BackgroundAppearanceContextValue;\n };\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAGI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/index.ts"],"sourcesContent":["export { ToastTitle } from './ToastTitle';\nexport type { ToastTitleProps, ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\nexport { renderToastTitle_unstable } from './renderToastTitle';\nexport { useToastTitle_unstable } from './useToastTitle';\nexport { toastTitleClassNames, useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\n"],"names":["ToastTitle","renderToastTitle_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/index.ts"],"sourcesContent":["export { ToastTitle } from './ToastTitle';\nexport type { ToastTitleProps, ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\nexport { renderToastTitle_unstable } from './renderToastTitle';\nexport { useToastTitle_unstable } from './useToastTitle';\nexport { toastTitleClassNames, useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\n"],"names":["ToastTitle","renderToastTitle_unstable","useToastTitle_unstable","toastTitleClassNames","useToastTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAEVC,2CAAyB;;;eAEzBE,+CAAoB;;;eAAEC,uDAA4B;;;eADlDF,qCAAsB;;;4BAHJ,eAAe;kCAEA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}
|