@fluentui/react-toast 9.8.0 → 9.8.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 +18 -2
- package/lib/components/AriaLive/useAriaLiveStyles.styles.js +0 -2
- package/lib/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js +0 -1
- package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js.map +1 -1
- package/lib/components/Toast/useToastStyles.styles.js +0 -2
- package/lib/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib/components/Toast/useToastStyles.styles.raw.js +0 -1
- package/lib/components/Toast/useToastStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.js +0 -2
- package/lib/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.raw.js +0 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js +0 -2
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js +0 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.js +0 -2
- package/lib/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.raw.js +0 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.js +0 -2
- package/lib/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.raw.js +0 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.raw.js.map +1 -1
- package/lib/components/Toaster/useToaster.js +0 -1
- package/lib/components/Toaster/useToaster.js.map +1 -1
- package/lib/components/Toaster/useToasterStyles.styles.js +0 -2
- package/lib/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib/components/Toaster/useToasterStyles.styles.raw.js +0 -1
- package/lib/components/Toaster/useToasterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js +0 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.js +0 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js +0 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js +0 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js +0 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js +0 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToaster.js +0 -1
- package/lib-commonjs/components/Toaster/useToaster.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js +0 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toast
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.8.1)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.8.0..@fluentui/react-toast_v9.8.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.13 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-motion to v9.16.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.6 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v9.8.14 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
22
|
+
|
|
7
23
|
## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.8.0)
|
|
8
24
|
|
|
9
|
-
Wed, 27 May 2026 11:18:
|
|
25
|
+
Wed, 27 May 2026 11:18:57 GMT
|
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.7.18..@fluentui/react-toast_v9.8.0)
|
|
11
27
|
|
|
12
28
|
### Minor changes
|
|
@@ -13,8 +13,6 @@ const useResetStyles = /*#__PURE__*/__resetStyles("rrd10u0", null, [".rrd10u0{cl
|
|
|
13
13
|
* Apply styling to the AriaLive slots based on the state
|
|
14
14
|
*/
|
|
15
15
|
export const useAriaLiveStyles_unstable = state => {
|
|
16
|
-
'use no memo';
|
|
17
|
-
|
|
18
16
|
const visuallyHidden = useResetStyles();
|
|
19
17
|
// eslint-disable-next-line react-hooks/immutability
|
|
20
18
|
state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n const visuallyHidden = useResetStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n // eslint-disable-next-line react-hooks/immutability\n state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC9D,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,SAAS,EAAE,yBAAyB;EACpCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGJ,aAAA,6IAQ1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGH,cAAc,CAAC,CAAC;EACvC;EACAE,KAAK,CAACJ,SAAS,CAACM,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;EACjH;EACAF,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -18,7 +18,6 @@ export const ariaLiveClassNames = {
|
|
|
18
18
|
/**
|
|
19
19
|
* Apply styling to the AriaLive slots based on the state
|
|
20
20
|
*/ export const useAriaLiveStyles_unstable = (state)=>{
|
|
21
|
-
'use no memo';
|
|
22
21
|
const visuallyHidden = useResetStyles();
|
|
23
22
|
// eslint-disable-next-line react-hooks/immutability
|
|
24
23
|
state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n const visuallyHidden = useResetStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n // eslint-disable-next-line react-hooks/immutability\n state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeResetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","clip","height","margin","overflow","padding","width","position","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,qBAAoD;IAC/DC,WAAW;IACXC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBJ,gBAAgB;IACrCK,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,iBAAiBV;IACvB,oDAAoD;IACpDS,MAAMX,SAAS,CAACa,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBC,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChH,oDAAoD;IACpDF,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBE,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -18,8 +18,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
18
18
|
* Apply styling to the Toast slots based on the state
|
|
19
19
|
*/
|
|
20
20
|
export const useToastStyles_unstable = state => {
|
|
21
|
-
'use no memo';
|
|
22
|
-
|
|
23
21
|
const rootBaseClassName = useRootBaseClassName();
|
|
24
22
|
const styles = useStyles();
|
|
25
23
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,4XAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B;EACAM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -26,7 +26,6 @@ const useStyles = makeStyles({
|
|
|
26
26
|
/**
|
|
27
27
|
* Apply styling to the Toast slots based on the state
|
|
28
28
|
*/ export const useToastStyles_unstable = (state)=>{
|
|
29
|
-
'use no memo';
|
|
30
29
|
const rootBaseClassName = useRootBaseClassName();
|
|
31
30
|
const styles = useStyles();
|
|
32
31
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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
|
|
1
|
+
{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,qBAAqB;IACrBC,SAAS;IACTC,cAAcP,OAAOQ,kBAAkB;IACvCC,QAAQ,CAAC,UAAU,EAAET,OAAOU,sBAAsB,EAAE;IACpDC,WAAWX,OAAOY,OAAO;IACzBC,UAAUb,OAAOc,eAAe;IAChCC,YAAY;IACZC,YAAYhB,OAAOiB,kBAAkB;IACrCC,OAAOlB,OAAOmB,uBAAuB;IACrCC,iBAAiBpB,OAAOqB,uBAAuB;AACjD;AAEA,MAAMC,YAAYxB,WAAW;IAC3ByB,UAAU;QACRL,OAAOlB,OAAOwB,+BAA+B;QAC7CJ,iBAAiBpB,OAAOyB,8BAA8B;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAMC,oBAAoBzB;IAC1B,MAAM0B,SAASP;IACf,oDAAoD;IACpDK,MAAMzB,IAAI,CAAC4B,SAAS,GAAG/B,aACrBE,gBAAgBC,IAAI,EACpB0B,mBACAD,MAAMI,oBAAoB,KAAK,cAAcF,OAAON,QAAQ,EAC5DI,MAAMzB,IAAI,CAAC4B,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -22,8 +22,6 @@ const useInvertedStyles = /*#__PURE__*/__styles({
|
|
|
22
22
|
* Apply styling to the ToastBody slots based on the state
|
|
23
23
|
*/
|
|
24
24
|
export const useToastBodyStyles_unstable = state => {
|
|
25
|
-
'use no memo';
|
|
26
|
-
|
|
27
25
|
const rootBaseClassName = useRootBaseClassName();
|
|
28
26
|
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
29
27
|
const invertedStyles = useInvertedStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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.lineHeightBase300,\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
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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.lineHeightBase300,\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 const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.subtitle) {\n // eslint-disable-next-line react-hooks/immutability\n state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,8PAS5B,CAAC;AACF,MAAMQ,wBAAwB,gBAAGR,aAAA,oOAQhC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,MAAA;EAAA;EAAAJ,QAAA;IAAAI,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;EACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C;EACAI,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACX,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACY,SAAS,CAAC;EACxK,IAAIJ,KAAK,CAACP,QAAQ,EAAE;IAChB;IACAO,KAAK,CAACP,QAAQ,CAACW,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACE,QAAQ,EAAES,qBAAqB,EAAEF,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACV,QAAQ,EAAEO,KAAK,CAACP,QAAQ,CAACW,SAAS,CAAC;EAChM;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -35,7 +35,6 @@ const useInvertedStyles = makeStyles({
|
|
|
35
35
|
/**
|
|
36
36
|
* Apply styling to the ToastBody slots based on the state
|
|
37
37
|
*/ export const useToastBodyStyles_unstable = (state)=>{
|
|
38
|
-
'use no memo';
|
|
39
38
|
const rootBaseClassName = useRootBaseClassName();
|
|
40
39
|
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
41
40
|
const invertedStyles = useInvertedStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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.lineHeightBase300,\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
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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.lineHeightBase300,\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 const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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","lineHeightBase300","fontWeight","fontWeightRegular","color","colorNeutralForeground1","wordBreak","useSubtitleBaseClassName","fontSizeBase200","colorNeutralForeground2","useInvertedStyles","colorNeutralForegroundInverted2","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZC,UAAUR,OAAOS,eAAe;IAChCC,YAAYV,OAAOW,iBAAiB;IACpCC,YAAYZ,OAAOa,iBAAiB;IACpCC,OAAOd,OAAOe,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,2BAA2BpB,gBAAgB;IAC/CU,YAAY;IACZF,iBAAiB;IACjBC,eAAe;IACfE,UAAUR,OAAOkB,eAAe;IAChCR,YAAYV,OAAOkB,eAAe;IAClCN,YAAYZ,OAAOa,iBAAiB;IACpCC,OAAOd,OAAOmB,uBAAuB;AACvC;AAEA,MAAMC,oBAAoBtB,WAAW;IACnCI,MAAM;QACJY,OAAOd,OAAOqB,+BAA+B;IAC/C;IACAlB,UAAU;QACRW,OAAOd,OAAOqB,+BAA+B;IAC/C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAMC,oBAAoBpB;IAC1B,MAAMqB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;IACvB,oDAAoD;IACpDG,MAAMrB,IAAI,CAACyB,SAAS,GAAG5B,aACrBE,oBAAoBC,IAAI,EACxBsB,mBACAD,MAAMK,oBAAoB,KAAK,cAAcF,eAAexB,IAAI,EAChEqB,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,QAAQ,EAAE;QAClB,oDAAoD;QACpDoB,MAAMpB,QAAQ,CAACwB,SAAS,GAAG5B,aACzBE,oBAAoBE,QAAQ,EAC5BsB,uBACAF,MAAMK,oBAAoB,KAAK,cAAcF,eAAevB,QAAQ,EACpEoB,MAAMpB,QAAQ,CAACwB,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -12,8 +12,6 @@ const useRootBaseClassName = /*#__PURE__*/__resetStyles("r98b696", null, [".r98b
|
|
|
12
12
|
* Apply styling to the ToastContainer slots based on the state
|
|
13
13
|
*/
|
|
14
14
|
export const useToastContainerStyles_unstable = state => {
|
|
15
|
-
'use no memo';
|
|
16
|
-
|
|
17
15
|
const rootBaseClassName = useRootBaseClassName();
|
|
18
16
|
// eslint-disable-next-line react-hooks/immutability
|
|
19
17
|
state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,sOAQ5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChD;EACAE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGV,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEK,iBAAiB,EAAED,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAC3G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -18,7 +18,6 @@ const useRootBaseClassName = makeResetStyles({
|
|
|
18
18
|
/**
|
|
19
19
|
* Apply styling to the ToastContainer slots based on the state
|
|
20
20
|
*/ export const useToastContainerStyles_unstable = (state)=>{
|
|
21
|
-
'use no memo';
|
|
22
21
|
const rootBaseClassName = useRootBaseClassName();
|
|
23
22
|
// eslint-disable-next-line react-hooks/immutability
|
|
24
23
|
state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAG1E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAW;IACXC,WAAW;IACXC,eAAe;IACfC,cAAcT,OAAOU,kBAAkB;IACvC,GAAGT,gCAAgC;QACjCU,SAAS,GAAGX,OAAOY,gBAAgB,CAAC,OAAO,EAAEZ,OAAOa,iBAAiB,EAAE;IACzE,EAAE;AACJ;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBX;IAC1B,oDAAoD;IACpDU,MAAMZ,IAAI,CAACc,SAAS,GAAGlB,aAAaG,yBAAyBC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACc,SAAS;IAE1G,OAAOF;AACT,EAAE"}
|
|
@@ -12,8 +12,6 @@ const useRootBaseClassName = /*#__PURE__*/__resetStyles("r56x6h2", null, [".r56x
|
|
|
12
12
|
* Apply styling to the ToastFooter slots based on the state
|
|
13
13
|
*/
|
|
14
14
|
export const useToastFooterStyles_unstable = state => {
|
|
15
|
-
'use no memo';
|
|
16
|
-
|
|
17
15
|
const rootBaseClassName = useRootBaseClassName();
|
|
18
16
|
// eslint-disable-next-line react-hooks/immutability
|
|
19
17
|
state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGJ,aAAA,gIAOhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChD;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEI,iBAAiB,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -16,7 +16,6 @@ export const toastFooterClassNames = {
|
|
|
16
16
|
/**
|
|
17
17
|
* Apply styling to the ToastFooter slots based on the state
|
|
18
18
|
*/ export const useToastFooterStyles_unstable = (state)=>{
|
|
19
|
-
'use no memo';
|
|
20
19
|
const rootBaseClassName = useRootBaseClassName();
|
|
21
20
|
// eslint-disable-next-line react-hooks/immutability
|
|
22
21
|
state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBJ,gBAAgB;IAC3CK,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IACfC,SAAS;IACTC,YAAY;IACZC,KAAK;AACP;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAMC,oBAAoBT;IAC1B,oDAAoD;IACpDQ,MAAMT,IAAI,CAACW,SAAS,GAAGb,aAAaC,sBAAsBC,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -59,8 +59,6 @@ const useIntentIconStylesInverted = /*#__PURE__*/__styles({
|
|
|
59
59
|
* Apply styling to the ToastTitle slots based on the state
|
|
60
60
|
*/
|
|
61
61
|
export const useToastTitleStyles_unstable = state => {
|
|
62
|
-
'use no memo';
|
|
63
|
-
|
|
64
62
|
const rootBaseClassName = useRootBaseClassName();
|
|
65
63
|
const actionBaseClassName = useActionBaseClassName();
|
|
66
64
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word'\n});\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1\n});\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2\n },\n action: {\n color: tokens.colorBrandForegroundInverted\n },\n media: {\n color: tokens.colorNeutralForegroundInverted\n }\n});\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground1\n },\n info: {\n color: tokens.colorNeutralForeground2\n }\n});\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2\n }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word'\n});\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1\n});\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2\n },\n action: {\n color: tokens.colorBrandForegroundInverted\n },\n media: {\n color: tokens.colorNeutralForegroundInverted\n }\n});\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground1\n },\n info: {\n color: tokens.colorNeutralForeground2\n }\n});\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2\n }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const actionBaseClassName = useActionBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const intentIconStyles = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const { intent } = state;\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,0HAK5B,CAAC;AACF,MAAMQ,qBAAqB,gBAAGR,aAAA,8RAO7B,CAAC;AACF,MAAMS,sBAAsB,gBAAGT,aAAA,kQAM9B,CAAC;AACF,MAAMU,iBAAiB,gBAAGX,QAAA;EAAAK,IAAA;IAAAO,MAAA;EAAA;EAAAL,MAAA;IAAAK,MAAA;EAAA;EAAAN,KAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUzB,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMM,2BAA2B,gBAAGnB,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAanC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,kBAAkB,GAAGf,qBAAqB,CAAC,CAAC;EAClD,MAAMgB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,wBAAwB,GAAGP,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEQ;EAAO,CAAC,GAAGN,KAAK;EACxB,MAAMO,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C;EACAU,KAAK,CAAChB,IAAI,CAACwB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEiB,iBAAiB,EAAED,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACvB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACwB,SAAS,CAAC;EACzK,IAAIR,KAAK,CAACf,KAAK,EAAE;IACb;IACAe,KAAK,CAACf,KAAK,CAACuB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEkB,kBAAkB,EAAEH,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACtB,KAAK,EAAEqB,MAAM,IAAIF,gBAAgB,CAACE,MAAM,CAAC,EAAEA,MAAM,IAAIN,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIJ,wBAAwB,CAACC,MAAM,CAAC,EAAEN,KAAK,CAACf,KAAK,CAACuB,SAAS,CAAC;EAC/S;EACA,IAAIR,KAAK,CAACd,MAAM,EAAE;IACd;IACAc,KAAK,CAACd,MAAM,CAACsB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACG,MAAM,EAAEgB,mBAAmB,EAAEF,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACrB,MAAM,EAAEc,KAAK,CAACd,MAAM,CAACsB,SAAS,CAAC;EACvL;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -69,7 +69,6 @@ const useIntentIconStylesInverted = makeStyles({
|
|
|
69
69
|
/**
|
|
70
70
|
* Apply styling to the ToastTitle slots based on the state
|
|
71
71
|
*/ export const useToastTitleStyles_unstable = (state)=>{
|
|
72
|
-
'use no memo';
|
|
73
72
|
const rootBaseClassName = useRootBaseClassName();
|
|
74
73
|
const actionBaseClassName = useActionBaseClassName();
|
|
75
74
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/useToastTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\n\nexport const toastTitleClassNames: SlotClassNames<ToastTitleSlots> = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word',\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1,\n});\n\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1,\n});\n\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n\n action: {\n color: tokens.colorBrandForegroundInverted,\n },\n\n media: {\n color: tokens.colorNeutralForegroundInverted,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground1,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted,\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted,\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\n/**\n * Apply styling to the ToastTitle slots based on the state\n */\nexport const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/useToastTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\n\nexport const toastTitleClassNames: SlotClassNames<ToastTitleSlots> = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word',\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1,\n});\n\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1,\n});\n\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n\n action: {\n color: tokens.colorBrandForegroundInverted,\n },\n\n media: {\n color: tokens.colorNeutralForegroundInverted,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground1,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted,\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted,\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\n/**\n * Apply styling to the ToastTitle slots based on the state\n */\nexport const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => {\n const rootBaseClassName = useRootBaseClassName();\n const actionBaseClassName = useActionBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const intentIconStyles = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const { intent } = state;\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toastTitleClassNames.root,\n rootBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.root,\n state.root.className,\n );\n\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(\n toastTitleClassNames.media,\n mediaBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.media,\n intent && intentIconStyles[intent],\n intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent],\n state.media.className,\n );\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(\n toastTitleClassNames.action,\n actionBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","display","gridColumnEnd","color","colorNeutralForeground1","wordBreak","useMediaBaseClassName","paddingTop","paddingRight","fontSize","useActionBaseClassName","alignItems","paddingLeft","colorBrandForeground1","useInvertedStyles","colorNeutralForegroundInverted2","colorBrandForegroundInverted","colorNeutralForegroundInverted","useIntentIconStyles","success","colorStatusSuccessForeground1","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground1","info","colorNeutralForeground2","useIntentIconStylesInverted","colorStatusSuccessForegroundInverted","colorStatusDangerForegroundInverted","colorStatusWarningForegroundInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,SAAS;IACTC,eAAe;IACfC,OAAOR,OAAOS,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,wBAAwBb,gBAAgB;IAC5CQ,SAAS;IACTM,YAAY;IACZL,eAAe;IACfM,cAAc;IACdC,UAAU;IACVN,OAAOR,OAAOS,uBAAuB;AACvC;AAEA,MAAMM,yBAAyBjB,gBAAgB;IAC7CQ,SAAS;IACTU,YAAY;IACZC,aAAa;IACbV,eAAe,CAAC;IAChBC,OAAOR,OAAOkB,qBAAqB;AACrC;AAEA,MAAMC,oBAAoBtB,WAAW;IACnCK,MAAM;QACJM,OAAOR,OAAOoB,+BAA+B;IAC/C;IAEAhB,QAAQ;QACNI,OAAOR,OAAOqB,4BAA4B;IAC5C;IAEAlB,OAAO;QACLK,OAAOR,OAAOsB,8BAA8B;IAC9C;AACF;AAEA,MAAMC,sBAAsB1B,WAAW;IACrC2B,SAAS;QACPhB,OAAOR,OAAOyB,6BAA6B;IAC7C;IACAC,OAAO;QACLlB,OAAOR,OAAO2B,4BAA4B;IAC5C;IACAC,SAAS;QACPpB,OAAOR,OAAO6B,6BAA6B;IAC7C;IACAC,MAAM;QACJtB,OAAOR,OAAO+B,uBAAuB;IACvC;AACF;AAEA,MAAMC,8BAA8BnC,WAAW;IAC7C2B,SAAS;QACPhB,OAAOR,OAAOiC,oCAAoC;IACpD;IACAP,OAAO;QACLlB,OAAOR,OAAOkC,mCAAmC;IACnD;IACAN,SAAS;QACPpB,OAAOR,OAAOmC,oCAAoC;IACpD;IACAL,MAAM;QACJtB,OAAOR,OAAOoB,+BAA+B;IAC/C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMgB,+BAA+B,CAACC;IAC3C,MAAMC,oBAAoBjC;IAC1B,MAAMkC,sBAAsBxB;IAC5B,MAAMyB,qBAAqB7B;IAC3B,MAAM8B,mBAAmBlB;IACzB,MAAMmB,2BAA2BV;IACjC,MAAM,EAAEW,MAAM,EAAE,GAAGN;IACnB,MAAMO,iBAAiBzB;IACvB,oDAAoD;IACpDkB,MAAMnC,IAAI,CAAC2C,SAAS,GAAG9C,aACrBE,qBAAqBC,IAAI,EACzBoC,mBACAD,MAAMS,oBAAoB,KAAK,cAAcF,eAAe1C,IAAI,EAChEmC,MAAMnC,IAAI,CAAC2C,SAAS;IAGtB,IAAIR,MAAMlC,KAAK,EAAE;QACf,oDAAoD;QACpDkC,MAAMlC,KAAK,CAAC0C,SAAS,GAAG9C,aACtBE,qBAAqBE,KAAK,EAC1BqC,oBACAH,MAAMS,oBAAoB,KAAK,cAAcF,eAAezC,KAAK,EACjEwC,UAAUF,gBAAgB,CAACE,OAAO,EAClCA,UAAUN,MAAMS,oBAAoB,KAAK,cAAcJ,wBAAwB,CAACC,OAAO,EACvFN,MAAMlC,KAAK,CAAC0C,SAAS;IAEzB;IAEA,IAAIR,MAAMjC,MAAM,EAAE;QAChB,oDAAoD;QACpDiC,MAAMjC,MAAM,CAACyC,SAAS,GAAG9C,aACvBE,qBAAqBG,MAAM,EAC3BmC,qBACAF,MAAMS,oBAAoB,KAAK,cAAcF,eAAexC,MAAM,EAClEiC,MAAMjC,MAAM,CAACyC,SAAS;IAE1B;IAEA,OAAOR;AACT,EAAE"}
|
|
@@ -13,7 +13,6 @@ import { useToastAnnounce } from './useToastAnnounce';
|
|
|
13
13
|
*
|
|
14
14
|
* @param props - props from this instance of Toaster
|
|
15
15
|
*/ export const useToaster_unstable = (props)=>{
|
|
16
|
-
'use no memo';
|
|
17
16
|
const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;
|
|
18
17
|
const announceRef = React.useRef(()=>null);
|
|
19
18
|
const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(rest);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toaster/useToaster.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport type { ToastPosition } from '../../state';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport type { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Toaster/useToaster.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport type { ToastPosition } from '../../state';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport type { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;\n const announceRef = React.useRef<Announce>(() => null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } =\n useToaster<HTMLDivElement>(rest);\n const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n const { dir } = useFluent();\n\n const { onKeyDown: onKeyDownProp, ...rootProps } = slot.always(\n getIntrinsicElementProps<ExtractSlotProps<Slot<'div'>>>('div', rest),\n {\n elementType: 'div',\n },\n );\n const focusableGroupAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus',\n ignoreDefaultKeydown: { Escape: true },\n });\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === Escape) {\n e.preventDefault();\n closeAllToasts();\n }\n onKeyDownProp?.(e);\n });\n const usePositionSlot = (toastPosition: ToastPosition) => {\n const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n const { announceToast, toasterRef } = useToastAnnounce(announceProp ?? announce);\n return slot.optional<ExtractSlotProps<Slot<'div'>>>(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: useMergedRefs(focusManagementRef, toasterRef),\n children: toastsToRender.get(toastPosition)?.map(toast => (\n <ToastContainer\n {...toast}\n tryRestoreFocus={tryRestoreFocus}\n intent={toast.intent}\n announce={announceToast}\n key={toast.toastId}\n visible={isToastVisible(toast.toastId)}\n >\n {toast.content as React.ReactNode}\n </ToastContainer>\n )),\n onKeyDown,\n ...focusableGroupAttr,\n 'data-toaster-position': toastPosition,\n role: 'list',\n // Explicitly casting because our slot types can't handle data attributes\n } as ExtractSlotProps<Slot<'div'>>,\n elementType: 'div',\n });\n };\n\n return {\n dir,\n mountNode,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n top: 'div',\n bottom: 'div',\n },\n root: slot.always(rootProps, { elementType: 'div' }),\n bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n top: usePositionSlot(TOAST_POSITIONS.top),\n bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n announceRef,\n offset,\n announce: announceProp ?? announce,\n renderAriaLive: !announceProp,\n inline,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useFluent_unstable","useFluent","useFocusableGroup","Escape","TOAST_POSITIONS","useToaster","ToastContainer","useToasterFocusManagement_unstable","useToastAnnounce","useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useCallback","message","options","current","dir","onKeyDown","onKeyDownProp","rootProps","always","elementType","focusableGroupAttr","tabBehavior","ignoreDefaultKeydown","e","key","preventDefault","usePositionSlot","toastPosition","focusManagementRef","announceToast","toasterRef","optional","has","defaultProps","ref","children","get","map","toast","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","renderAriaLive"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC5G,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,MAAM,QAAQ,0BAA0B;AAGjD,SAASC,eAAe,EAAEC,UAAU,QAAQ,cAAc;AAE1D,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,MAAM,EAAEC,UAAUC,YAAY,EAAEC,SAAS,EAAEC,SAAS,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAC/E,MAAMO,cAActB,MAAMuB,MAAM,CAAW,IAAM;IACjD,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,aAAa,EAAEC,eAAe,EAAEC,cAAc,EAAE,GACtGnB,WAA2BW;IAC7B,MAAMJ,WAAWjB,MAAM8B,WAAW,CAAW,CAACC,SAASC,UAAYV,YAAYW,OAAO,CAACF,SAASC,UAAU,EAAE;IAC5G,MAAM,EAAEE,GAAG,EAAE,GAAG5B;IAEhB,MAAM,EAAE6B,WAAWC,aAAa,EAAE,GAAGC,WAAW,GAAGjC,KAAKkC,MAAM,CAC5DrC,yBAAwD,OAAOoB,OAC/D;QACEkB,aAAa;IACf;IAEF,MAAMC,qBAAqBjC,kBAAkB;QAC3CkC,aAAa;QACbC,sBAAsB;YAAElC,QAAQ;QAAK;IACvC;IACA,MAAM2B,YAAYjC,iBAAiB,CAACyC;QAClC,IAAIA,EAAEC,GAAG,KAAKpC,QAAQ;YACpBmC,EAAEE,cAAc;YAChBhB;QACF;QACAO,0BAAAA,oCAAAA,cAAgBO;IAClB;IACA,MAAMG,kBAAkB,CAACC;YAMTvB;QALd,MAAMwB,qBAAqBpC,mCAAmCc,gBAAgBC;QAC9E,MAAM,EAAEsB,aAAa,EAAEC,UAAU,EAAE,GAAGrC,iBAAiBK,yBAAAA,0BAAAA,eAAgBD;QACvE,OAAOb,KAAK+C,QAAQ,CAAgC3B,eAAe4B,GAAG,CAACL,iBAAiBV,YAAY,MAAM;YACxGgB,cAAc;gBACZC,KAAKnD,cAAc6C,oBAAoBE;gBACvCK,QAAQ,GAAE/B,sBAAAA,eAAegC,GAAG,CAACT,4BAAnBvB,0CAAAA,oBAAmCiC,GAAG,CAACC,CAAAA,sBAC/C,oBAAC/C;wBACE,GAAG+C,KAAK;wBACT9B,iBAAiBA;wBACjB+B,QAAQD,MAAMC,MAAM;wBACpB1C,UAAUgC;wBACVL,KAAKc,MAAME,OAAO;wBAClBC,SAASpC,eAAeiC,MAAME,OAAO;uBAEpCF,MAAMI,OAAO;gBAGlB3B;gBACA,GAAGK,kBAAkB;gBACrB,yBAAyBO;gBACzBgB,MAAM;YAER;YACAxB,aAAa;QACf;IACF;IAEA,OAAO;QACLL;QACAf;QACA6C,YAAY;YACVC,MAAM;YACNC,aAAa;YACbC,WAAW;YACXC,UAAU;YACVC,QAAQ;YACRC,KAAK;YACLC,QAAQ;QACV;QACAN,MAAM7D,KAAKkC,MAAM,CAACD,WAAW;YAAEE,aAAa;QAAM;QAClD2B,aAAapB,gBAAgBrC,gBAAgByD,WAAW;QACxDC,WAAWrB,gBAAgBrC,gBAAgB0D,SAAS;QACpDC,UAAUtB,gBAAgBrC,gBAAgB2D,QAAQ;QAClDC,QAAQvB,gBAAgBrC,gBAAgB4D,MAAM;QAC9CC,KAAKxB,gBAAgBrC,gBAAgB6D,GAAG;QACxCC,QAAQzB,gBAAgBrC,gBAAgB8D,MAAM;QAC9CjD;QACAN;QACAC,UAAUC,yBAAAA,0BAAAA,eAAgBD;QAC1BuD,gBAAgB,CAACtD;QACjBE;IACF;AACF,EAAE"}
|
|
@@ -20,8 +20,6 @@ const useToasterStyles = /*#__PURE__*/__styles({
|
|
|
20
20
|
* Apply styling to the Toaster slots based on the state
|
|
21
21
|
*/
|
|
22
22
|
export const useToasterStyles_unstable = state => {
|
|
23
|
-
'use no memo';
|
|
24
|
-
|
|
25
23
|
const rootBaseClassName = useRootBaseClassName();
|
|
26
24
|
const styles = useToasterStyles();
|
|
27
25
|
const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","useToasterStyles","inline","qhf8xq","d","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","_state_bottomStart","_style","style","Object","assign","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"sources":["useToasterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none'\n});\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */ export const useToasterStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","useToasterStyles","inline","qhf8xq","d","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","_state_bottomStart","_style","style","Object","assign","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"sources":["useToasterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none'\n});\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */ export const useToasterStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const styles = useToasterStyles();\n const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);\n if (state.bottomStart) {\n var _state_bottomStart;\n // eslint-disable-next-line react-hooks/immutability\n state.bottomStart.className = className;\n var _style;\n (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n if (state.bottomEnd) {\n var _state_bottomEnd;\n // eslint-disable-next-line react-hooks/immutability\n state.bottomEnd.className = className;\n var _style1;\n (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n if (state.topStart) {\n var _state_topStart;\n // eslint-disable-next-line react-hooks/immutability\n state.topStart.className = className;\n var _style2;\n (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n if (state.topEnd) {\n var _state_topEnd;\n // eslint-disable-next-line react-hooks/immutability\n state.topEnd.className = className;\n var _style3;\n (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n if (state.top) {\n var _state_top;\n // eslint-disable-next-line react-hooks/immutability\n state.top.className = className;\n var _style4;\n (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n if (state.bottom) {\n var _state_bottom;\n // eslint-disable-next-line react-hooks/immutability\n state.bottom.className = className;\n var _style5;\n (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -19,7 +19,6 @@ const useToasterStyles = makeStyles({
|
|
|
19
19
|
/**
|
|
20
20
|
* Apply styling to the Toaster slots based on the state
|
|
21
21
|
*/ export const useToasterStyles_unstable = (state)=>{
|
|
22
|
-
'use no memo';
|
|
23
22
|
const rootBaseClassName = useRootBaseClassName();
|
|
24
23
|
const styles = useToasterStyles();
|
|
25
24
|
const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute',\n },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute',\n },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n const rootBaseClassName = useRootBaseClassName();\n const styles = useToasterStyles();\n const className = mergeClasses(\n toasterClassNames.root,\n rootBaseClassName,\n state.inline && styles.inline,\n state.root.className,\n );\n if (state.bottomStart) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottomStart.className = className;\n state.bottomStart.style ??= {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n\n if (state.bottomEnd) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottomEnd.className = className;\n state.bottomEnd.style ??= {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n\n if (state.topStart) {\n // eslint-disable-next-line react-hooks/immutability\n state.topStart.className = className;\n state.topStart.style ??= {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n\n if (state.topEnd) {\n // eslint-disable-next-line react-hooks/immutability\n state.topEnd.className = className;\n state.topEnd.style ??= {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n\n if (state.top) {\n // eslint-disable-next-line react-hooks/immutability\n state.top.className = className;\n state.top.style ??= {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n\n if (state.bottom) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottom.className = className;\n state.bottom.style ??= {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","position","width","pointerEvents","useToasterStyles","inline","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","style","Object","assign","dir","offset","bottomEnd","topStart","topEnd","top","bottom"],"mappings":"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"}
|
|
@@ -28,7 +28,6 @@ const ariaLiveClassNames = {
|
|
|
28
28
|
".rrd10u0{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;}"
|
|
29
29
|
]);
|
|
30
30
|
const useAriaLiveStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
31
|
const visuallyHidden = useResetStyles();
|
|
33
32
|
// eslint-disable-next-line react-hooks/immutability
|
|
34
33
|
state.assertive.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n const visuallyHidden = useResetStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n // eslint-disable-next-line react-hooks/immutability\n state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n return state;\n};\n"],"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAiBdI,0BAA0B;;;;uBAlBG,gBAAgB;AACvD,2BAA2B;IAC9BH,SAAS,EAAE,yBAAyB;IACpCC,MAAM,EAAE;AACZ,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAQ1B,CAAC;AAGS,oCAAoCM,KAAK,IAAG;IACnD,MAAMC,cAAc,GAAGH,cAAc,CAAC,CAAC;IACvC,oDAAA;IACAE,KAAK,CAACJ,SAAS,CAACM,SAAS,OAAGT,mBAAY,EAACQ,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;IACjH,oDAAA;IACAF,KAAK,CAACH,MAAM,CAACK,SAAS,OAAGT,mBAAY,EAACQ,cAAc,EAAEN,kBAAkB,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -34,7 +34,6 @@ const ariaLiveClassNames = {
|
|
|
34
34
|
position: 'absolute'
|
|
35
35
|
});
|
|
36
36
|
const useAriaLiveStyles_unstable = (state)=>{
|
|
37
|
-
'use no memo';
|
|
38
37
|
const visuallyHidden = useResetStyles();
|
|
39
38
|
// eslint-disable-next-line react-hooks/immutability
|
|
40
39
|
state.assertive.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n assertive: 'fui-AriaLive__assertive',\n polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n const visuallyHidden = useResetStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n // eslint-disable-next-line react-hooks/immutability\n state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n\n return state;\n};\n"],"names":["mergeClasses","makeResetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","clip","height","margin","overflow","padding","width","position","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;8BAqBAW;eAAAA;;;uBAzBiC,iBAAiB;AAIxD,2BAA0D;IAC/DV,WAAW;IACXC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBJ,0BAAAA,EAAgB;IACrCK,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAKO,mCAAmC,CAACE;IACzC,MAAMC,iBAAiBV;IACvB,oDAAoD;IACpDS,MAAMX,SAAS,CAACa,SAAS,OAAGhB,mBAAAA,EAAae,gBAAgBb,mBAAmBC,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChH,oDAAoD;IACpDF,MAAMV,MAAM,CAACY,SAAS,OAAGhB,mBAAAA,EAAae,gBAAgBb,mBAAmBE,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -36,7 +36,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
36
36
|
]
|
|
37
37
|
});
|
|
38
38
|
const useToastStyles_unstable = (state)=>{
|
|
39
|
-
'use no memo';
|
|
40
39
|
const rootBaseClassName = useRootBaseClassName();
|
|
41
40
|
const styles = useStyles();
|
|
42
41
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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
|
|
1
|
+
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA,YAAY;;;;;;;;;;;;IAGCI,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,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;IAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAM,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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
|
|
1
|
+
{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA;;;;;;;;;;;;IAOaI,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,YAAYxB,qBAAAA,EAAW;IAC3ByB,UAAU;QACRL,OAAOlB,kBAAAA,CAAOwB,+BAA+B;QAC7CJ,iBAAiBpB,kBAAAA,CAAOyB,8BAA8B;IACxD;AACF;AAKO,gCAAgC,CAACE;IACtC,MAAMC,oBAAoBzB;IAC1B,MAAM0B,SAASP;IACf,oDAAoD;IACpDK,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"}
|
|
@@ -41,7 +41,6 @@ const useInvertedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
41
41
|
]
|
|
42
42
|
});
|
|
43
43
|
const useToastBodyStyles_unstable = (state)=>{
|
|
44
|
-
'use no memo';
|
|
45
44
|
const rootBaseClassName = useRootBaseClassName();
|
|
46
45
|
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
47
46
|
const invertedStyles = useInvertedStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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.lineHeightBase300,\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
|
|
1
|
+
{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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.lineHeightBase300,\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 const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.subtitle) {\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA,YAAY;;;;;;;;;;;;IAGCI,mBAAmB;;;+BAiCY;eAA3BQ;;;uBAnCyC,gBAAgB;AAEnE,4BAA4B;IAC/BP,IAAI,EAAE,eAAe;IACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,GAAGP,wBAAA,EAAA,YAAA,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,qCAAqCE,KAAK,IAAG;IACpD,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;IACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;IAC1C,oDAAA;IACAI,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;QAChB,oDAAA;QACAO,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"}
|
|
@@ -51,7 +51,6 @@ const useInvertedStyles = (0, _react.makeStyles)({
|
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
53
|
const useToastBodyStyles_unstable = (state)=>{
|
|
54
|
-
'use no memo';
|
|
55
54
|
const rootBaseClassName = useRootBaseClassName();
|
|
56
55
|
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
57
56
|
const invertedStyles = useInvertedStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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.lineHeightBase300,\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
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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.lineHeightBase300,\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 const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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","lineHeightBase300","fontWeight","fontWeightRegular","color","colorNeutralForeground1","wordBreak","useSubtitleBaseClassName","fontSizeBase200","colorNeutralForeground2","useInvertedStyles","colorNeutralForegroundInverted2","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,mBAAAA;;;IAsCAqB,2BAAAA;;;;uBA3C6C,iBAAiB;4BACpD,wBAAwB;AAIxC,4BAA4D;IACjEpB,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,2BAAuBP,sBAAAA,EAAgB;IAC3CQ,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZC,UAAUR,kBAAAA,CAAOS,eAAe;IAChCC,YAAYV,kBAAAA,CAAOW,iBAAiB;IACpCC,YAAYZ,kBAAAA,CAAOa,iBAAiB;IACpCC,OAAOd,kBAAAA,CAAOe,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,2BAA2BpB,0BAAAA,EAAgB;IAC/CU,YAAY;IACZF,iBAAiB;IACjBC,eAAe;IACfE,UAAUR,kBAAAA,CAAOkB,eAAe;IAChCR,YAAYV,kBAAAA,CAAOkB,eAAe;IAClCN,YAAYZ,kBAAAA,CAAOa,iBAAiB;IACpCC,OAAOd,kBAAAA,CAAOmB,uBAAuB;AACvC;AAEA,MAAMC,wBAAoBtB,iBAAAA,EAAW;IACnCI,MAAM;QACJY,OAAOd,kBAAAA,CAAOqB,+BAA+B;IAC/C;IACAlB,UAAU;QACRW,OAAOd,kBAAAA,CAAOqB,+BAA+B;IAC/C;AACF;AAKO,oCAAoC,CAACE;IAC1C,MAAMC,oBAAoBpB;IAC1B,MAAMqB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;IACvB,oDAAoD;IACpDG,MAAMrB,IAAI,CAACyB,SAAS,OAAG5B,mBAAAA,EACrBE,oBAAoBC,IAAI,EACxBsB,mBACAD,MAAMK,oBAAoB,KAAK,cAAcF,eAAexB,IAAI,EAChEqB,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,QAAQ,EAAE;QAClB,oDAAoD;QACpDoB,MAAMpB,QAAQ,CAACwB,SAAS,OAAG5B,mBAAAA,EACzBE,oBAAoBE,QAAQ,EAC5BsB,uBACAF,MAAMK,oBAAoB,KAAK,cAAcF,eAAevB,QAAQ,EACpEoB,MAAMpB,QAAQ,CAACwB,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -27,7 +27,6 @@ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r98b696",
|
|
|
27
27
|
".r98b696[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"
|
|
28
28
|
]);
|
|
29
29
|
const useToastContainerStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const rootBaseClassName = useRootBaseClassName();
|
|
32
31
|
// eslint-disable-next-line react-hooks/immutability
|
|
33
32
|
state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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
|
|
1
|
+
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA,YAAY;;;;;;;;;;;;4BAIyB;;;oCAeY;;;;uBAlBH,gBAAgB;AAGvD,MAAMI,2BAA2B;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,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;IAChD,oDAAA;IACAE,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"}
|
|
@@ -34,7 +34,6 @@ const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
|
34
34
|
})
|
|
35
35
|
});
|
|
36
36
|
const useToastContainerStyles_unstable = (state)=>{
|
|
37
|
-
'use no memo';
|
|
38
37
|
const rootBaseClassName = useRootBaseClassName();
|
|
39
38
|
// eslint-disable-next-line react-hooks/immutability
|
|
40
39
|
state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA;;;;;;;;;;;;IAQaI,wBAAAA;;;oCAkBAY;eAAAA;;;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,MAAMC,oBAAoBX;IAC1B,oDAAoD;IACpDU,MAAMZ,IAAI,CAACc,SAAS,OAAGlB,mBAAAA,EAAaG,yBAAyBC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACc,SAAS;IAE1G,OAAOF;AACT,EAAE"}
|
|
@@ -27,7 +27,6 @@ const toastFooterClassNames = {
|
|
|
27
27
|
".r56x6h2{padding-top:16px;grid-column-start:2;grid-column-end:3;display:flex;align-items:center;gap:14px;}"
|
|
28
28
|
]);
|
|
29
29
|
const useToastFooterStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const rootBaseClassName = useRootBaseClassName();
|
|
32
31
|
// eslint-disable-next-line react-hooks/immutability
|
|
33
32
|
state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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
|
|
1
|
+
{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA,YAAY;;;;;;;;;;;;yBAEsB;;;iCAeY;;;;uBAhBA,gBAAgB;AACvD,MAAME,wBAAwB;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,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;IAChD,oDAAA;IACAE,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"}
|
|
@@ -32,7 +32,6 @@ const toastFooterClassNames = {
|
|
|
32
32
|
gap: '14px'
|
|
33
33
|
});
|
|
34
34
|
const useToastFooterStyles_unstable = (state)=>{
|
|
35
|
-
'use no memo';
|
|
36
35
|
const rootBaseClassName = useRootBaseClassName();
|
|
37
36
|
// eslint-disable-next-line react-hooks/immutability
|
|
38
37
|
state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 const rootBaseClassName = useRootBaseClassName();\n // eslint-disable-next-line react-hooks/immutability\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":"AAAA;;;;;;;;;;;;IAMaE,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,MAAMC,oBAAoBT;IAC1B,oDAAoD;IACpDQ,MAAMT,IAAI,CAACW,SAAS,OAAGb,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -94,7 +94,6 @@ const useIntentIconStylesInverted = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
94
94
|
]
|
|
95
95
|
});
|
|
96
96
|
const useToastTitleStyles_unstable = (state)=>{
|
|
97
|
-
'use no memo';
|
|
98
97
|
const rootBaseClassName = useRootBaseClassName();
|
|
99
98
|
const actionBaseClassName = useActionBaseClassName();
|
|
100
99
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word'\n});\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1\n});\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2\n },\n action: {\n color: tokens.colorBrandForegroundInverted\n },\n media: {\n color: tokens.colorNeutralForegroundInverted\n }\n});\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground1\n },\n info: {\n color: tokens.colorNeutralForeground2\n }\n});\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2\n }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word'\n});\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1\n});\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2\n },\n action: {\n color: tokens.colorBrandForegroundInverted\n },\n media: {\n color: tokens.colorNeutralForegroundInverted\n }\n});\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground1\n },\n info: {\n color: tokens.colorNeutralForeground2\n }\n});\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2\n }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const actionBaseClassName = useActionBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const intentIconStyles = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const { intent } = state;\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);\n }\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"mappings":"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"}
|
|
@@ -85,7 +85,6 @@ const useIntentIconStylesInverted = (0, _react.makeStyles)({
|
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
87
|
const useToastTitleStyles_unstable = (state)=>{
|
|
88
|
-
'use no memo';
|
|
89
88
|
const rootBaseClassName = useRootBaseClassName();
|
|
90
89
|
const actionBaseClassName = useActionBaseClassName();
|
|
91
90
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/useToastTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\n\nexport const toastTitleClassNames: SlotClassNames<ToastTitleSlots> = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word',\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1,\n});\n\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1,\n});\n\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n\n action: {\n color: tokens.colorBrandForegroundInverted,\n },\n\n media: {\n color: tokens.colorNeutralForegroundInverted,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground1,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted,\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted,\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\n/**\n * Apply styling to the ToastTitle slots based on the state\n */\nexport const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/useToastTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\n\nexport const toastTitleClassNames: SlotClassNames<ToastTitleSlots> = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1,\n wordBreak: 'break-word',\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: tokens.colorNeutralForeground1,\n});\n\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: tokens.colorBrandForeground1,\n});\n\nconst useInvertedStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n\n action: {\n color: tokens.colorBrandForegroundInverted,\n },\n\n media: {\n color: tokens.colorNeutralForegroundInverted,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground1,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorStatusSuccessForegroundInverted,\n },\n error: {\n color: tokens.colorStatusDangerForegroundInverted,\n },\n warning: {\n color: tokens.colorStatusWarningForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\n/**\n * Apply styling to the ToastTitle slots based on the state\n */\nexport const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => {\n const rootBaseClassName = useRootBaseClassName();\n const actionBaseClassName = useActionBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const intentIconStyles = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const { intent } = state;\n const invertedStyles = useInvertedStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toastTitleClassNames.root,\n rootBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.root,\n state.root.className,\n );\n\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(\n toastTitleClassNames.media,\n mediaBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.media,\n intent && intentIconStyles[intent],\n intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent],\n state.media.className,\n );\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(\n toastTitleClassNames.action,\n actionBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","display","gridColumnEnd","color","colorNeutralForeground1","wordBreak","useMediaBaseClassName","paddingTop","paddingRight","fontSize","useActionBaseClassName","alignItems","paddingLeft","colorBrandForeground1","useInvertedStyles","colorNeutralForegroundInverted2","colorBrandForegroundInverted","colorNeutralForegroundInverted","useIntentIconStyles","success","colorStatusSuccessForeground1","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground1","info","colorNeutralForeground2","useIntentIconStylesInverted","colorStatusSuccessForegroundInverted","colorStatusDangerForegroundInverted","colorStatusWarningForegroundInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"mappings":"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"}
|
|
@@ -20,7 +20,6 @@ const _ToastContainer = require("../ToastContainer");
|
|
|
20
20
|
const _useToasterFocusManagement = require("./useToasterFocusManagement");
|
|
21
21
|
const _useToastAnnounce = require("./useToastAnnounce");
|
|
22
22
|
const useToaster_unstable = (props)=>{
|
|
23
|
-
'use no memo';
|
|
24
23
|
const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;
|
|
25
24
|
const announceRef = _react.useRef(()=>null);
|
|
26
25
|
const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = (0, _state.useToaster)(rest);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toaster/useToaster.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport type { ToastPosition } from '../../state';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport type { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Toaster/useToaster.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { ToasterProps, ToasterState } from './Toaster.types';\nimport type { ToastPosition } from '../../state';\nimport { TOAST_POSITIONS, useToaster } from '../../state';\nimport type { Announce } from '../AriaLive';\nimport { ToastContainer } from '../ToastContainer';\nimport { useToasterFocusManagement_unstable } from './useToasterFocusManagement';\nimport { useToastAnnounce } from './useToastAnnounce';\n\n/**\n * Create the state required to render Toaster.\n *\n * @param props - props from this instance of Toaster\n */\nexport const useToaster_unstable = (props: ToasterProps): ToasterState => {\n const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;\n const announceRef = React.useRef<Announce>(() => null);\n const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } =\n useToaster<HTMLDivElement>(rest);\n const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);\n const { dir } = useFluent();\n\n const { onKeyDown: onKeyDownProp, ...rootProps } = slot.always(\n getIntrinsicElementProps<ExtractSlotProps<Slot<'div'>>>('div', rest),\n {\n elementType: 'div',\n },\n );\n const focusableGroupAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus',\n ignoreDefaultKeydown: { Escape: true },\n });\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === Escape) {\n e.preventDefault();\n closeAllToasts();\n }\n onKeyDownProp?.(e);\n });\n const usePositionSlot = (toastPosition: ToastPosition) => {\n const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);\n const { announceToast, toasterRef } = useToastAnnounce(announceProp ?? announce);\n return slot.optional<ExtractSlotProps<Slot<'div'>>>(toastsToRender.has(toastPosition) ? rootProps : null, {\n defaultProps: {\n ref: useMergedRefs(focusManagementRef, toasterRef),\n children: toastsToRender.get(toastPosition)?.map(toast => (\n <ToastContainer\n {...toast}\n tryRestoreFocus={tryRestoreFocus}\n intent={toast.intent}\n announce={announceToast}\n key={toast.toastId}\n visible={isToastVisible(toast.toastId)}\n >\n {toast.content as React.ReactNode}\n </ToastContainer>\n )),\n onKeyDown,\n ...focusableGroupAttr,\n 'data-toaster-position': toastPosition,\n role: 'list',\n // Explicitly casting because our slot types can't handle data attributes\n } as ExtractSlotProps<Slot<'div'>>,\n elementType: 'div',\n });\n };\n\n return {\n dir,\n mountNode,\n components: {\n root: 'div',\n bottomStart: 'div',\n bottomEnd: 'div',\n topStart: 'div',\n topEnd: 'div',\n top: 'div',\n bottom: 'div',\n },\n root: slot.always(rootProps, { elementType: 'div' }),\n bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),\n bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),\n topStart: usePositionSlot(TOAST_POSITIONS.topStart),\n topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),\n top: usePositionSlot(TOAST_POSITIONS.top),\n bottom: usePositionSlot(TOAST_POSITIONS.bottom),\n announceRef,\n offset,\n announce: announceProp ?? announce,\n renderAriaLive: !announceProp,\n inline,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useFluent_unstable","useFluent","useFocusableGroup","Escape","TOAST_POSITIONS","useToaster","ToastContainer","useToasterFocusManagement_unstable","useToastAnnounce","useToaster_unstable","props","offset","announce","announceProp","mountNode","inline","rest","announceRef","useRef","toastsToRender","isToastVisible","pauseAllToasts","playAllToasts","tryRestoreFocus","closeAllToasts","useCallback","message","options","current","dir","onKeyDown","onKeyDownProp","rootProps","always","elementType","focusableGroupAttr","tabBehavior","ignoreDefaultKeydown","e","key","preventDefault","usePositionSlot","toastPosition","focusManagementRef","announceToast","toasterRef","optional","has","defaultProps","ref","children","get","map","toast","intent","toastId","visible","content","role","components","root","bottomStart","bottomEnd","topStart","topEnd","top","bottom","renderAriaLive"],"mappings":"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"}
|
|
@@ -37,7 +37,6 @@ const useToasterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
37
37
|
]
|
|
38
38
|
});
|
|
39
39
|
const useToasterStyles_unstable = (state)=>{
|
|
40
|
-
'use no memo';
|
|
41
40
|
const rootBaseClassName = useRootBaseClassName();
|
|
42
41
|
const styles = useToasterStyles();
|
|
43
42
|
const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToasterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none'\n});\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */ export const useToasterStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToasterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\nexport const toasterClassNames = {\n root: 'fui-Toaster'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none'\n});\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the Toaster slots based on the state\n */ export const useToasterStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const styles = useToasterStyles();\n const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);\n if (state.bottomStart) {\n var _state_bottomStart;\n // eslint-disable-next-line react-hooks/immutability\n state.bottomStart.className = className;\n var _style;\n (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n if (state.bottomEnd) {\n var _state_bottomEnd;\n // eslint-disable-next-line react-hooks/immutability\n state.bottomEnd.className = className;\n var _style1;\n (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n if (state.topStart) {\n var _state_topStart;\n // eslint-disable-next-line react-hooks/immutability\n state.topStart.className = className;\n var _style2;\n (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n if (state.topEnd) {\n var _state_topEnd;\n // eslint-disable-next-line react-hooks/immutability\n state.topEnd.className = className;\n var _style3;\n (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n if (state.top) {\n var _state_top;\n // eslint-disable-next-line react-hooks/immutability\n state.top.className = className;\n var _style4;\n (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n if (state.bottom) {\n var _state_bottom;\n // eslint-disable-next-line react-hooks/immutability\n state.bottom.className = className;\n var _style5;\n (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","useToasterStyles","inline","qhf8xq","d","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","_state_bottomStart","_style","style","Object","assign","dir","offset","bottomEnd","_state_bottomEnd","_style1","topStart","_state_topStart","_style2","topEnd","_state_topEnd","_style3","top","_state_top","_style4","bottom","_state_bottom","_style5"],"mappings":"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"}
|
|
@@ -35,7 +35,6 @@ const useToasterStyles = (0, _react.makeStyles)({
|
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
const useToasterStyles_unstable = (state)=>{
|
|
38
|
-
'use no memo';
|
|
39
38
|
const rootBaseClassName = useRootBaseClassName();
|
|
40
39
|
const styles = useToasterStyles();
|
|
41
40
|
const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute',\n },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n position: 'fixed',\n width: '292px',\n pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n inline: {\n position: 'absolute',\n },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n const rootBaseClassName = useRootBaseClassName();\n const styles = useToasterStyles();\n const className = mergeClasses(\n toasterClassNames.root,\n rootBaseClassName,\n state.inline && styles.inline,\n state.root.className,\n );\n if (state.bottomStart) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottomStart.className = className;\n state.bottomStart.style ??= {};\n Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n }\n\n if (state.bottomEnd) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottomEnd.className = className;\n state.bottomEnd.style ??= {};\n Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n }\n\n if (state.topStart) {\n // eslint-disable-next-line react-hooks/immutability\n state.topStart.className = className;\n state.topStart.style ??= {};\n Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n }\n\n if (state.topEnd) {\n // eslint-disable-next-line react-hooks/immutability\n state.topEnd.className = className;\n state.topEnd.style ??= {};\n Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n }\n\n if (state.top) {\n // eslint-disable-next-line react-hooks/immutability\n state.top.className = className;\n state.top.style ??= {};\n Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n }\n\n if (state.bottom) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottom.className = className;\n state.bottom.style ??= {};\n Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","position","width","pointerEvents","useToasterStyles","inline","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","style","Object","assign","dir","offset","bottomEnd","topStart","topEnd","top","bottom"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toast",
|
|
3
|
-
"version": "9.8.
|
|
3
|
+
"version": "9.8.1",
|
|
4
4
|
"description": "Toast component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
16
|
-
"@fluentui/react-aria": "^9.17.
|
|
16
|
+
"@fluentui/react-aria": "^9.17.13",
|
|
17
17
|
"@fluentui/react-icons": "^2.0.245",
|
|
18
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
19
|
-
"@fluentui/react-motion": "^9.16.
|
|
20
|
-
"@fluentui/react-motion-components-preview": "^0.15.
|
|
21
|
-
"@fluentui/react-portal": "^9.8.
|
|
18
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
19
|
+
"@fluentui/react-motion": "^9.16.1",
|
|
20
|
+
"@fluentui/react-motion-components-preview": "^0.15.6",
|
|
21
|
+
"@fluentui/react-portal": "^9.8.14",
|
|
22
22
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
23
|
-
"@fluentui/react-tabster": "^9.26.
|
|
23
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
24
24
|
"@fluentui/react-theme": "^9.2.1",
|
|
25
|
-
"@fluentui/react-utilities": "^9.26.
|
|
25
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
26
26
|
"@griffel/react": "^1.5.32",
|
|
27
27
|
"@swc/helpers": "^0.5.1"
|
|
28
28
|
},
|