@fluentui/react-toast 9.3.36 → 9.3.38
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 +35 -8
- package/lib/components/AriaLive/useAriaLiveStyles.styles.js +2 -2
- package/lib/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib/components/Toast/useToastStyles.styles.js +2 -2
- package/lib/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js +2 -2
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.js +2 -2
- package/lib/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js +2 -3
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.js +2 -3
- package/lib-commonjs/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js +3 -5
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js +2 -2
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,49 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toast
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 23 Apr 2024 08:12:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.38)
|
|
8
|
+
|
|
9
|
+
Tue, 23 Apr 2024 08:12:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.37..@fluentui/react-toast_v9.3.38)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.10.5 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
16
|
+
- Bump @fluentui/react-portal to v9.4.21 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.3.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.37)
|
|
22
|
+
|
|
23
|
+
Wed, 17 Apr 2024 21:54:05 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.36..@fluentui/react-toast_v9.3.37)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- chore: refactor styles defined in makeResetStyles() to avoid shorthands.*() ([PR #30996](https://github.com/microsoft/fluentui/pull/30996) by olfedias@microsoft.com)
|
|
29
|
+
- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
|
|
30
|
+
- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
31
|
+
- Bump @fluentui/react-portal to v9.4.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
32
|
+
- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.3.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.36)
|
|
8
35
|
|
|
9
|
-
Tue, 02 Apr 2024 09:
|
|
36
|
+
Tue, 02 Apr 2024 09:48:01 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.35..@fluentui/react-toast_v9.3.36)
|
|
11
38
|
|
|
12
39
|
### Patches
|
|
13
40
|
|
|
14
|
-
- Bump @fluentui/react-aria to v9.10.3 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #
|
|
16
|
-
- Bump @fluentui/react-portal to v9.4.19 ([PR #
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #
|
|
18
|
-
- Bump @fluentui/react-tabster to v9.19.6 ([PR #
|
|
19
|
-
- Bump @fluentui/react-utilities to v9.18.6 ([PR #
|
|
41
|
+
- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
42
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
43
|
+
- Bump @fluentui/react-portal to v9.4.19 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
44
|
+
- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
45
|
+
- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
46
|
+
- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
|
|
20
47
|
|
|
21
48
|
## [9.3.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.35)
|
|
22
49
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { mergeClasses,
|
|
1
|
+
import { mergeClasses, __resetStyles } from '@griffel/react';
|
|
2
2
|
export const ariaLiveClassNames = {
|
|
3
3
|
assertive: 'fui-AriaLive__assertive',
|
|
4
4
|
polite: 'fui-AriaLive__polite'
|
|
@@ -6,7 +6,7 @@ export const ariaLiveClassNames = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
|
-
const useResetStyles = /*#__PURE__*/__resetStyles("
|
|
9
|
+
const useResetStyles = /*#__PURE__*/__resetStyles("rrd10u0", null, [".rrd10u0{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;}"]);
|
|
10
10
|
/**
|
|
11
11
|
* Apply styling to the AriaLive slots based on the state
|
|
12
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","
|
|
1
|
+
{"version":3,"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["import { 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 state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n return state;\n};\n"],"mappings":"AAAA,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;EACvCE,KAAK,CAACJ,SAAS,CAACM,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;EACjHF,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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const toastClassNames = {
|
|
4
4
|
root: 'fui-Toast'
|
|
5
5
|
};
|
|
6
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
6
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1yngb2j", null, [".r1yngb2j{display:grid;grid-template-columns:auto 1fr auto;padding:12px 12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"]);
|
|
7
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
8
8
|
inverted: {
|
|
9
9
|
sj55zd: "f1w7i9ko",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","
|
|
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":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n padding: '12px 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 state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,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,mYAY5B,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;EAC1BM,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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
4
|
export const toastContainerClassNames = {
|
|
5
5
|
root: 'fui-ToastContainer',
|
|
6
6
|
timer: 'fui-ToastContainer__timer'
|
|
7
7
|
};
|
|
8
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
8
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r14b3ftk", null, [".r14b3ftk{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}", ".r14b3ftk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
|
|
9
9
|
/**
|
|
10
10
|
* Styles for the root slot
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useStyles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","useToastContainerStyles_unstable","state","rootBaseClassName","styles","className","visible"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n minHeight: '44px',\n pointerEvents: 'all',\n borderRadius: tokens.borderRadiusMedium,\n '--fui-toast-height': '44px',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n enter: {\n animationDuration: '200ms, 400ms',\n animationDelay: '0ms, 200ms',\n animationName: [\n {\n from: {\n maxHeight: 0,\n opacity: 0,\n marginTop: 0\n },\n to: {\n marginTop: '16px',\n opacity: 0,\n maxHeight: 'var(--fui-toast-height)'\n }\n },\n {\n from: {\n opacity: 0\n },\n to: {\n opacity: 1\n }\n }\n ]\n },\n exit: {\n animationDuration: '400ms, 200ms',\n animationDelay: '0ms, 400ms',\n animationName: [\n {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n },\n {\n from: {\n opacity: 0\n },\n to: {\n opacity: 0,\n marginTop: 0,\n maxHeight: 0\n }\n }\n ]\n }\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,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,gBAAGR,aAAA,iRAU5B,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CAmDrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGX,oBAAoB,CAAC,CAAC;EAChD,MAAMY,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEa,iBAAiB,EAAED,KAAK,CAACI,OAAO,GAAGF,MAAM,CAACV,KAAK,GAAGU,MAAM,CAACN,IAAI,EAAEI,KAAK,CAACZ,IAAI,CAACe,SAAS,CAAC;EACvJ,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@griffel/react';
|
|
2
2
|
export const toastFooterClassNames = {
|
|
3
3
|
root: 'fui-ToastFooter'
|
|
4
4
|
};
|
|
5
5
|
/**
|
|
6
6
|
* Styles for the root slot
|
|
7
7
|
*/
|
|
8
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
8
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r56x6h2", null, [".r56x6h2{padding-top:16px;grid-column-start:2;grid-column-end:3;display:flex;align-items:center;gap:14px;}"]);
|
|
9
9
|
/**
|
|
10
10
|
* Apply styling to the ToastFooter slots based on the state
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const toastFooterClassNames = {\n root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n paddingTop: '16px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n display: 'flex',\n alignItems: 'center',\n gap: '14px'\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,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;EAChDE,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"}
|
|
@@ -23,9 +23,8 @@ const ariaLiveClassNames = {
|
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* Styles for the root slot
|
|
26
|
-
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
27
|
-
".
|
|
28
|
-
".r1m1grr4{clip:rect(0px, 0px, 0px, 0px);height:1px;margin-top:-1px;margin-left:-1px;margin-bottom:-1px;margin-right:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0px;padding-left:0px;padding-bottom:0px;padding-right:0px;width:1px;position:absolute;}"
|
|
26
|
+
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rrd10u0", null, [
|
|
27
|
+
".rrd10u0{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;}"
|
|
29
28
|
]);
|
|
30
29
|
const useAriaLiveStyles_unstable = (state)=>{
|
|
31
30
|
const visuallyHidden = useResetStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["import { mergeClasses,
|
|
1
|
+
{"version":3,"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["import { mergeClasses, __resetStyles } 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 */\nconst useResetStyles = /*#__PURE__*/__resetStyles(\"rrd10u0\", null, [\".rrd10u0{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;}\"]);\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = state => {\n const visuallyHidden = useResetStyles();\n state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n return state;\n};\n//# sourceMappingURL=useAriaLiveStyles.styles.js.map"],"names":["ariaLiveClassNames","useAriaLiveStyles_unstable","assertive","polite","useResetStyles","__resetStyles","state","visuallyHidden","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,kBAAkB;eAAlBA;;IAWAC,0BAA0B;eAA1BA;;;uBAZ+B;AACrC,MAAMD,qBAAqB;IAChCE,WAAW;IACXC,QAAQ;AACV;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0H;AAIvL,MAAMJ,6BAA6BK,CAAAA;IACxC,MAAMC,iBAAiBH;IACvBE,MAAMJ,SAAS,CAACM,SAAS,GAAGC,IAAAA,mBAAY,EAACF,gBAAgBP,mBAAmBE,SAAS,EAAEI,MAAMJ,SAAS,CAACM,SAAS;IAChHF,MAAMH,MAAM,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACF,gBAAgBP,mBAAmBG,MAAM,EAAEG,MAAMH,MAAM,CAACK,SAAS;IACvG,OAAOF;AACT,GACA,oDAAoD"}
|
|
@@ -20,9 +20,8 @@ const _react = require("@griffel/react");
|
|
|
20
20
|
const toastClassNames = {
|
|
21
21
|
root: 'fui-Toast'
|
|
22
22
|
};
|
|
23
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
24
|
-
".
|
|
25
|
-
".r1lipnsg{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"
|
|
23
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1yngb2j", null, [
|
|
24
|
+
".r1yngb2j{display:grid;grid-template-columns:auto 1fr auto;padding:12px 12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"
|
|
26
25
|
]);
|
|
27
26
|
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
28
27
|
inverted: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n root: 'fui-Toast'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1yngb2j\", null, [\".r1yngb2j{display:grid;grid-template-columns:auto 1fr auto;padding:12px 12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n inverted: {\n sj55zd: \"f1w7i9ko\",\n De3pzq: \"f5pduvr\"\n }\n}, {\n d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\", \".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}\"]\n});\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n return state;\n};\n//# sourceMappingURL=useToastStyles.styles.js.map"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","inverted","sj55zd","De3pzq","d","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAeAC,uBAAuB;eAAvBA;;;uBAjByC;AAE/C,MAAMD,kBAAkB;IAC7BE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA+W;AAC1b,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,UAAU;QACRC,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4D;KAAoE;AACtI;AAIO,MAAMT,0BAA0BU,CAAAA;IACrC,MAAMC,oBAAoBT;IAC1B,MAAMU,SAASR;IACfM,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,gBAAgBE,IAAI,EAAEU,mBAAmBD,MAAMK,oBAAoB,KAAK,cAAcH,OAAON,QAAQ,EAAEI,MAAMT,IAAI,CAACY,SAAS;IAC/J,OAAOH;AACT,GACA,iDAAiD"}
|
|
@@ -21,11 +21,9 @@ const toastContainerClassNames = {
|
|
|
21
21
|
root: 'fui-ToastContainer',
|
|
22
22
|
timer: 'fui-ToastContainer__timer'
|
|
23
23
|
};
|
|
24
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
25
|
-
".
|
|
26
|
-
".
|
|
27
|
-
".r1e6dlul{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}",
|
|
28
|
-
".r1e6dlul[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"
|
|
24
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r14b3ftk", null, [
|
|
25
|
+
".r14b3ftk{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}",
|
|
26
|
+
".r14b3ftk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"
|
|
29
27
|
]);
|
|
30
28
|
/**
|
|
31
29
|
* Styles for the root slot
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 = /*#__PURE__*/__resetStyles(\"r14b3ftk\", null, [\".r14b3ftk{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}\", \".r14b3ftk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}\"]);\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n enter: {\n vin17d: \"fayl5bc\",\n m1gqa9: \"f17oyct0\",\n Bv12yb3: \"fvv8lvk\"\n },\n exit: {\n vin17d: \"f1tk3cza\",\n m1gqa9: \"f1nx6yy9\",\n Bv12yb3: \"f9wuypy\"\n }\n}, {\n d: [\".fayl5bc{animation-duration:200ms,400ms;}\", \".f17oyct0{animation-delay:0ms,200ms;}\", \".fvv8lvk{animation-name:f1rp83na,f5j8bii;}\", \".f1tk3cza{animation-duration:400ms,200ms;}\", \".f1nx6yy9{animation-delay:0ms,400ms;}\", \".f9wuypy{animation-name:fk0lfw7,f1n32sdh;}\"],\n k: [\"@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}\", \"@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}\", \"@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}\", \"@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}\"]\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */\nexport const useToastContainerStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n const styles = useStyles();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n return state;\n};\n//# sourceMappingURL=useToastContainerStyles.styles.js.map"],"names":["toastContainerClassNames","useToastContainerStyles_unstable","root","timer","useRootBaseClassName","__resetStyles","useStyles","__styles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","state","rootBaseClassName","styles","className","mergeClasses","visible"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IA0BAC,gCAAgC;eAAhCA;;;uBA7ByC;AAG/C,MAAMD,2BAA2B;IACtCE,MAAM;IACNC,OAAO;AACT;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAAwJ;CAAqG;AACxU;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,OAAO;QACLC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJH,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAA6C;QAAyC;QAA8C;QAA8C;QAAyC;KAA6C;IAC5QC,GAAG;QAAC;QAAoI;QAAsD;QAAsD;KAAgF;AACtU;AAIO,MAAMb,mCAAmCc,CAAAA;IAC9C,MAAMC,oBAAoBZ;IAC1B,MAAMa,SAASX;IACfS,MAAMb,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACnB,yBAAyBE,IAAI,EAAEc,mBAAmBD,MAAMK,OAAO,GAAGH,OAAOT,KAAK,GAAGS,OAAOL,IAAI,EAAEG,MAAMb,IAAI,CAACgB,SAAS;IACtJ,OAAOH;AACT,GACA,0DAA0D"}
|
|
@@ -22,8 +22,8 @@ const toastFooterClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
25
|
+
*/ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r56x6h2", null, [
|
|
26
|
+
".r56x6h2{padding-top:16px;grid-column-start:2;grid-column-end:3;display:flex;align-items:center;gap:14px;}"
|
|
27
27
|
]);
|
|
28
28
|
const useToastFooterStyles_unstable = (state)=>{
|
|
29
29
|
const rootBaseClassName = useRootBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nexport const toastFooterClassNames = {\n root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r56x6h2\", null, [\".r56x6h2{padding-top:16px;grid-column-start:2;grid-column-end:3;display:flex;align-items:center;gap:14px;}\"]);\n/**\n * Apply styling to the ToastFooter slots based on the state\n */\nexport const useToastFooterStyles_unstable = state => {\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n//# sourceMappingURL=useToastFooterStyles.styles.js.map"],"names":["toastFooterClassNames","useToastFooterStyles_unstable","root","useRootBaseClassName","__resetStyles","state","rootBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,qBAAqB;eAArBA;;IAUAC,6BAA6B;eAA7BA;;;uBAX+B;AACrC,MAAMD,wBAAwB;IACnCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA6G;AAIhL,MAAMH,gCAAgCI,CAAAA;IAC3C,MAAMC,oBAAoBH;IAC1BE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,sBAAsBE,IAAI,EAAEI,mBAAmBD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACT,GACA,uDAAuD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toast",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.38",
|
|
4
4
|
"description": "Toast component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-transition-group": "^4.4.1",
|
|
39
39
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
40
|
-
"@fluentui/react-aria": "^9.10.
|
|
41
|
-
"@fluentui/react-icons": "^2.0.
|
|
42
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
43
|
-
"@fluentui/react-portal": "^9.4.
|
|
44
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
45
|
-
"@fluentui/react-tabster": "^9.
|
|
40
|
+
"@fluentui/react-aria": "^9.10.5",
|
|
41
|
+
"@fluentui/react-icons": "^2.0.235",
|
|
42
|
+
"@fluentui/react-jsx-runtime": "^9.0.36",
|
|
43
|
+
"@fluentui/react-portal": "^9.4.21",
|
|
44
|
+
"@fluentui/react-shared-contexts": "^9.17.0",
|
|
45
|
+
"@fluentui/react-tabster": "^9.20.1",
|
|
46
46
|
"@fluentui/react-theme": "^9.1.19",
|
|
47
|
-
"@fluentui/react-utilities": "^9.18.
|
|
47
|
+
"@fluentui/react-utilities": "^9.18.7",
|
|
48
48
|
"@griffel/react": "^1.5.14",
|
|
49
49
|
"@swc/helpers": "^0.5.1"
|
|
50
50
|
},
|