@fluentui/react-toast 9.7.17 → 9.8.0
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 +33 -9
- package/dist/index.d.ts +155 -50
- package/lib/Toast.js +1 -1
- package/lib/Toast.js.map +1 -1
- package/lib/ToastBody.js +1 -1
- package/lib/ToastBody.js.map +1 -1
- package/lib/ToastTitle.js +1 -1
- package/lib/ToastTitle.js.map +1 -1
- package/lib/Toaster.js +1 -1
- package/lib/Toaster.js.map +1 -1
- package/lib/components/AriaLive/useAriaLiveStyles.styles.js +2 -0
- package/lib/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js +2 -0
- package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js.map +1 -1
- package/lib/components/Toast/Toast.types.js +1 -1
- package/lib/components/Toast/Toast.types.js.map +1 -1
- package/lib/components/Toast/index.js +1 -1
- package/lib/components/Toast/index.js.map +1 -1
- package/lib/components/Toast/useToast.js +18 -7
- package/lib/components/Toast/useToast.js.map +1 -1
- package/lib/components/Toast/useToastStyles.styles.js +1 -0
- package/lib/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib/components/Toast/useToastStyles.styles.raw.js +1 -0
- package/lib/components/Toast/useToastStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastBody/ToastBody.types.js +1 -1
- package/lib/components/ToastBody/ToastBody.types.js.map +1 -1
- package/lib/components/ToastBody/index.js +1 -1
- package/lib/components/ToastBody/index.js.map +1 -1
- package/lib/components/ToastBody/useToastBody.js +17 -7
- package/lib/components/ToastBody/useToastBody.js.map +1 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.js +2 -0
- package/lib/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.raw.js +2 -0
- package/lib/components/ToastBody/useToastBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js +1 -0
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js +1 -0
- package/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.js +1 -0
- package/lib/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/lib/components/ToastFooter/useToastFooterStyles.styles.raw.js +1 -0
- package/lib/components/ToastFooter/useToastFooterStyles.styles.raw.js.map +1 -1
- package/lib/components/ToastTitle/ToastTitle.types.js +1 -1
- package/lib/components/ToastTitle/ToastTitle.types.js.map +1 -1
- package/lib/components/ToastTitle/index.js +1 -1
- package/lib/components/ToastTitle/index.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitle.js +39 -23
- package/lib/components/ToastTitle/useToastTitle.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.js +3 -0
- package/lib/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.raw.js +3 -0
- package/lib/components/ToastTitle/useToastTitleStyles.styles.raw.js.map +1 -1
- package/lib/components/Toaster/index.js +1 -0
- package/lib/components/Toaster/index.js.map +1 -1
- package/lib/components/Toaster/useToastAnnounce.js +1 -1
- package/lib/components/Toaster/useToastAnnounce.js.map +1 -1
- package/lib/components/Toaster/useToasterStyles.styles.js +6 -0
- package/lib/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib/components/Toaster/useToasterStyles.styles.raw.js +6 -0
- package/lib/components/Toaster/useToasterStyles.styles.raw.js.map +1 -1
- package/lib/index.js +7 -5
- package/lib/index.js.map +1 -1
- package/lib/state/types.js.map +1 -1
- package/lib-commonjs/Toast.js +3 -0
- package/lib-commonjs/Toast.js.map +1 -1
- package/lib-commonjs/ToastBody.js +3 -0
- package/lib-commonjs/ToastBody.js.map +1 -1
- package/lib-commonjs/ToastTitle.js +3 -0
- package/lib-commonjs/ToastTitle.js.map +1 -1
- package/lib-commonjs/Toaster.js +3 -0
- package/lib-commonjs/Toaster.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js +2 -0
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Toast/Toast.types.js +1 -1
- package/lib-commonjs/components/Toast/Toast.types.js.map +1 -1
- package/lib-commonjs/components/Toast/index.js +3 -0
- package/lib-commonjs/components/Toast/index.js.map +1 -1
- package/lib-commonjs/components/Toast/useToast.js +19 -5
- package/lib-commonjs/components/Toast/useToast.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.js +1 -0
- package/lib-commonjs/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastBody/ToastBody.types.js +1 -1
- package/lib-commonjs/components/ToastBody/ToastBody.types.js.map +1 -1
- package/lib-commonjs/components/ToastBody/index.js +3 -0
- package/lib-commonjs/components/ToastBody/index.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBody.js +19 -6
- package/lib-commonjs/components/ToastBody/useToastBody.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js +2 -0
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js +1 -0
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js +1 -0
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/ToastTitle.types.js +1 -1
- package/lib-commonjs/components/ToastTitle/ToastTitle.types.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/index.js +3 -0
- package/lib-commonjs/components/ToastTitle/index.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitle.js +43 -24
- package/lib-commonjs/components/ToastTitle/useToastTitle.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js +3 -0
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js +3 -0
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Toaster/index.js +4 -0
- package/lib-commonjs/components/Toaster/index.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToastAnnounce.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js +6 -0
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js +6 -0
- package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js +31 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/state/types.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastBody/useToastBody.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render ToastBody
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastBody/useToastBody.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyBaseProps, ToastBodyBaseState, ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the base state required to render ToastBody, without design-only props.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBodyBase_unstable = (\n props: ToastBodyBaseProps,\n ref: React.Ref<HTMLElement>,\n): ToastBodyBaseState => {\n const { bodyId } = useToastContainerContext();\n return {\n components: {\n root: 'div',\n subtitle: 'div',\n },\n subtitle: slot.optional(props.subtitle, { elementType: 'div' }),\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n id: bodyId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\n const backgroundAppearance = useBackgroundAppearance();\n return {\n ...useToastBodyBase_unstable(props, ref),\n backgroundAppearance,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useToastContainerContext","useBackgroundAppearance","useToastBodyBase_unstable","props","ref","bodyId","components","root","subtitle","optional","elementType","always","id","useToastBody_unstable","backgroundAppearance"],"mappings":"AAAA;;;;;;;;;;;;IAcaI,yBAAAA;;;yBAkCAW;;;;gCA7CkC,4BAA4B;uCAElC,uCAAuC;qCACxC,kCAAkC;AAQnE,kCAAkC,CACvCV,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,OAAGL,+CAAAA;IACnB,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUT,oBAAAA,CAAKU,QAAQ,CAACN,MAAMK,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMR,oBAAAA,CAAKY,MAAM,KACfb,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLQ,IAAIP;YACJ,GAAGF,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE;AAWK,MAAMG,wBAAwB,CAACV,OAAuBC;IAC3D,MAAMU,2BAAuBb,4CAAAA;IAC7B,OAAO;QACL,GAAGC,0BAA0BC,OAAOC,IAAI;QACxCU;IACF;AACF,EAAE"}
|
|
@@ -45,8 +45,10 @@ const useToastBodyStyles_unstable = (state)=>{
|
|
|
45
45
|
const rootBaseClassName = useRootBaseClassName();
|
|
46
46
|
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
47
47
|
const invertedStyles = useInvertedStyles();
|
|
48
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
48
49
|
state.root.className = (0, _react.mergeClasses)(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
|
|
49
50
|
if (state.subtitle) {
|
|
51
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
50
52
|
state.subtitle.className = (0, _react.mergeClasses)(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
|
|
51
53
|
}
|
|
52
54
|
return state;
|
|
@@ -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 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.subtitle) {\n state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":"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,aAAa;IACb,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;IACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;
|
|
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 'use no memo';\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,aAAa;IACb,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"}
|
|
@@ -55,8 +55,10 @@ const useToastBodyStyles_unstable = (state)=>{
|
|
|
55
55
|
const rootBaseClassName = useRootBaseClassName();
|
|
56
56
|
const subtitleBaseClassName = useSubtitleBaseClassName();
|
|
57
57
|
const invertedStyles = useInvertedStyles();
|
|
58
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
58
59
|
state.root.className = (0, _react.mergeClasses)(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
|
|
59
60
|
if (state.subtitle) {
|
|
61
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
60
62
|
state.subtitle.className = (0, _react.mergeClasses)(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
|
|
61
63
|
}
|
|
62
64
|
return state;
|
|
@@ -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 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const subtitleBaseClassName = useSubtitleBaseClassName();\n const invertedStyles = useInvertedStyles();\n state.root.className = mergeClasses(\n toastBodyClassNames.root,\n rootBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.root,\n state.root.className,\n );\n\n if (state.subtitle) {\n state.subtitle.className = mergeClasses(\n toastBodyClassNames.subtitle,\n subtitleBaseClassName,\n state.backgroundAppearance === 'inverted' && invertedStyles.subtitle,\n state.subtitle.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","gridColumnStart","gridColumnEnd","paddingTop","fontSize","fontSizeBase300","lineHeight","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;IAEA,MAAMC,oBAAoBpB;IAC1B,MAAMqB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;
|
|
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 'use no memo';\n\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;IAEA,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"}
|
|
@@ -29,6 +29,7 @@ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r98b696",
|
|
|
29
29
|
const useToastContainerStyles_unstable = (state)=>{
|
|
30
30
|
'use no memo';
|
|
31
31
|
const rootBaseClassName = useRootBaseClassName();
|
|
32
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
32
33
|
state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
33
34
|
return state;
|
|
34
35
|
};
|
|
@@ -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 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"mappings":"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,aAAa;IACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;
|
|
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 'use no memo';\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,aAAa;IACb,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"}
|
|
@@ -36,6 +36,7 @@ const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
|
36
36
|
const useToastContainerStyles_unstable = (state)=>{
|
|
37
37
|
'use no memo';
|
|
38
38
|
const rootBaseClassName = useRootBaseClassName();
|
|
39
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
39
40
|
state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
|
|
40
41
|
return state;
|
|
41
42
|
};
|
|
@@ -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 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","boxSizing","marginTop","pointerEvents","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"mappings":"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;IAEA,MAAMC,oBAAoBX;
|
|
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 'use no memo';\n\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;IAEA,MAAMC,oBAAoBX;IAC1B,oDAAoD;IACpDU,MAAMZ,IAAI,CAACc,SAAS,OAAGlB,mBAAAA,EAAaG,yBAAyBC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACc,SAAS;IAE1G,OAAOF;AACT,EAAE"}
|
|
@@ -29,6 +29,7 @@ const toastFooterClassNames = {
|
|
|
29
29
|
const useToastFooterStyles_unstable = (state)=>{
|
|
30
30
|
'use no memo';
|
|
31
31
|
const rootBaseClassName = useRootBaseClassName();
|
|
32
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
32
33
|
state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
33
34
|
return state;
|
|
34
35
|
};
|
|
@@ -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 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"mappings":"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,aAAa;IACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;
|
|
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 'use no memo';\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,aAAa;IACb,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"}
|
|
@@ -34,6 +34,7 @@ const toastFooterClassNames = {
|
|
|
34
34
|
const useToastFooterStyles_unstable = (state)=>{
|
|
35
35
|
'use no memo';
|
|
36
36
|
const rootBaseClassName = useRootBaseClassName();
|
|
37
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
37
38
|
state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
|
|
38
39
|
return state;
|
|
39
40
|
};
|
|
@@ -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 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","paddingTop","gridColumnStart","gridColumnEnd","display","alignItems","gap","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA;;;;;;;;;;;;
|
|
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 'use no memo';\n\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;IAEA,MAAMC,oBAAoBT;IAC1B,oDAAoD;IACpDQ,MAAMT,IAAI,CAACW,SAAS,OAAGb,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport type { ToastContainerContextValue } from '../../contexts/toastContainerContext';\n\nexport type ToastTitleSlots = {\n root: NonNullable<Slot<'div'>>;\n media?: Slot<'div'>;\n action?: Slot<'div'>;\n};\n\n/**\n * ToastTitle Props\n */\nexport type ToastTitleProps = ComponentProps<ToastTitleSlots> & {};\n\n/**\n * State used in rendering ToastTitle\n */\nexport type ToastTitleState = ComponentState<ToastTitleSlots> &\n Pick<ToastContainerContextValue, 'intent'> & {\n backgroundAppearance: BackgroundAppearanceContextValue;\n };\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport type { ToastContainerContextValue } from '../../contexts/toastContainerContext';\n\nexport type ToastTitleSlots = {\n root: NonNullable<Slot<'div'>>;\n media?: Slot<'div'>;\n action?: Slot<'div'>;\n};\n\n/**\n * ToastTitle Props\n */\nexport type ToastTitleProps = ComponentProps<ToastTitleSlots> & {};\n\n/**\n * ToastTitle Props without design-only props.\n */\nexport type ToastTitleBaseProps = ToastTitleProps;\n\n/**\n * State used in rendering ToastTitle\n */\nexport type ToastTitleState = ComponentState<ToastTitleSlots> &\n Pick<ToastContainerContextValue, 'intent'> & {\n backgroundAppearance: BackgroundAppearanceContextValue;\n };\n\n/**\n * State used in rendering ToastTitle, without design-only state.\n */\nexport type ToastTitleBaseState = Omit<ToastTitleState, 'backgroundAppearance'>;\n"],"names":[],"mappings":"AA4BA;;CAEC,GACD,WAAgF"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
toastTitleClassNames: function() {
|
|
19
19
|
return _useToastTitleStylesstyles.toastTitleClassNames;
|
|
20
20
|
},
|
|
21
|
+
useToastTitleBase_unstable: function() {
|
|
22
|
+
return _useToastTitle.useToastTitleBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useToastTitleStyles_unstable: function() {
|
|
22
25
|
return _useToastTitleStylesstyles.useToastTitleStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/index.ts"],"sourcesContent":["export { ToastTitle } from './ToastTitle';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/index.ts"],"sourcesContent":["export { ToastTitle } from './ToastTitle';\nexport type {\n ToastTitleBaseProps,\n ToastTitleBaseState,\n ToastTitleProps,\n ToastTitleSlots,\n ToastTitleState,\n} from './ToastTitle.types';\nexport { renderToastTitle_unstable } from './renderToastTitle';\nexport { useToastTitleBase_unstable, useToastTitle_unstable } from './useToastTitle';\nexport { toastTitleClassNames, useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\n"],"names":["ToastTitle","renderToastTitle_unstable","useToastTitleBase_unstable","useToastTitle_unstable","toastTitleClassNames","useToastTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAQVC,2CAAyB;;;eAEzBG,+CAAoB;;;eADpBF,yCAA0B;;;eACJG,uDAA4B;;;eADtBF,qCAAsB;;;4BAThC,eAAe;kCAQA,qBAAqB;+BACI,kBAAkB;2CAClB,+BAA+B"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useToastTitleBase_unstable: function() {
|
|
14
|
+
return useToastTitleBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useToastTitle_unstable: function() {
|
|
9
17
|
return useToastTitle_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -15,24 +23,8 @@ const _reacticons = require("@fluentui/react-icons");
|
|
|
15
23
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
24
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
17
25
|
const _toastContainerContext = require("../../contexts/toastContainerContext");
|
|
18
|
-
const
|
|
26
|
+
const useToastTitleBase_unstable = (props, ref)=>{
|
|
19
27
|
const { intent, titleId } = (0, _toastContainerContext.useToastContainerContext)();
|
|
20
|
-
const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
|
|
21
|
-
/** Determine the role and media to render based on the intent */ let defaultIcon;
|
|
22
|
-
switch(intent){
|
|
23
|
-
case 'success':
|
|
24
|
-
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircleFilled, null);
|
|
25
|
-
break;
|
|
26
|
-
case 'error':
|
|
27
|
-
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismissFilled, null);
|
|
28
|
-
break;
|
|
29
|
-
case 'warning':
|
|
30
|
-
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.WarningFilled, null);
|
|
31
|
-
break;
|
|
32
|
-
case 'info':
|
|
33
|
-
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, null);
|
|
34
|
-
break;
|
|
35
|
-
}
|
|
36
28
|
return {
|
|
37
29
|
action: _reactutilities.slot.optional(props.action, {
|
|
38
30
|
elementType: 'div'
|
|
@@ -44,9 +36,6 @@ const useToastTitle_unstable = (props, ref)=>{
|
|
|
44
36
|
},
|
|
45
37
|
media: _reactutilities.slot.optional(props.media, {
|
|
46
38
|
renderByDefault: !!intent,
|
|
47
|
-
defaultProps: {
|
|
48
|
-
children: defaultIcon
|
|
49
|
-
},
|
|
50
39
|
elementType: 'div'
|
|
51
40
|
}),
|
|
52
41
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
@@ -60,7 +49,37 @@ const useToastTitle_unstable = (props, ref)=>{
|
|
|
60
49
|
}), {
|
|
61
50
|
elementType: 'div'
|
|
62
51
|
}),
|
|
63
|
-
intent
|
|
52
|
+
intent
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
const useToastTitle_unstable = (props, ref)=>{
|
|
56
|
+
'use no memo';
|
|
57
|
+
const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
|
|
58
|
+
const baseState = useToastTitleBase_unstable(props, ref);
|
|
59
|
+
/** Determine the role and media to render based on the intent */ let defaultIcon;
|
|
60
|
+
switch(baseState.intent){
|
|
61
|
+
case 'success':
|
|
62
|
+
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircleFilled, null);
|
|
63
|
+
break;
|
|
64
|
+
case 'error':
|
|
65
|
+
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismissFilled, null);
|
|
66
|
+
break;
|
|
67
|
+
case 'warning':
|
|
68
|
+
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.WarningFilled, null);
|
|
69
|
+
break;
|
|
70
|
+
case 'info':
|
|
71
|
+
defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, null);
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
return {
|
|
75
|
+
...baseState,
|
|
76
|
+
media: _reactutilities.slot.optional(props.media, {
|
|
77
|
+
defaultProps: {
|
|
78
|
+
children: defaultIcon
|
|
79
|
+
},
|
|
80
|
+
renderByDefault: !!baseState.intent,
|
|
81
|
+
elementType: 'div'
|
|
82
|
+
}),
|
|
64
83
|
backgroundAppearance
|
|
65
84
|
};
|
|
66
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToastTitle/useToastTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircleFilled, DiamondDismissFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\nimport type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the state required to render ToastTitle
|
|
1
|
+
{"version":3,"sources":["../src/components/ToastTitle/useToastTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircleFilled, DiamondDismissFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\nimport type { ToastTitleBaseProps, ToastTitleBaseState, ToastTitleProps, ToastTitleState } from './ToastTitle.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the base state required to render ToastTitle, without design-only props.\n *\n * @param props - props from this instance of ToastTitle\n * @param ref - reference to root HTMLElement of ToastTitle\n */\nexport const useToastTitleBase_unstable = (\n props: ToastTitleBaseProps,\n ref: React.Ref<HTMLElement>,\n): ToastTitleBaseState => {\n const { intent, titleId } = useToastContainerContext();\n\n return {\n action: slot.optional(props.action, { elementType: 'div' }),\n components: { root: 'div', media: 'div', action: 'div' },\n media: slot.optional(props.media, {\n renderByDefault: !!intent,\n elementType: 'div',\n }),\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n children: props.children,\n id: titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n intent,\n };\n};\n\n/**\n * Create the state required to render ToastTitle.\n *\n * The returned state can be modified with hooks such as useToastTitleStyles_unstable,\n * before being passed to renderToastTitle_unstable.\n *\n * @param props - props from this instance of ToastTitle\n * @param ref - reference to root HTMLElement of ToastTitle\n */\nexport const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref<HTMLElement>): ToastTitleState => {\n 'use no memo';\n\n const backgroundAppearance = useBackgroundAppearance();\n const baseState = useToastTitleBase_unstable(props, ref);\n\n /** Determine the role and media to render based on the intent */\n let defaultIcon;\n switch (baseState.intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DiamondDismissFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n return {\n ...baseState,\n media: slot.optional(props.media, {\n defaultProps: { children: defaultIcon },\n renderByDefault: !!baseState.intent,\n elementType: 'div',\n }),\n backgroundAppearance,\n };\n};\n"],"names":["React","CheckmarkCircleFilled","DiamondDismissFilled","InfoFilled","WarningFilled","getIntrinsicElementProps","slot","useBackgroundAppearance","useToastContainerContext","useToastTitleBase_unstable","props","ref","intent","titleId","action","optional","elementType","components","root","media","renderByDefault","always","children","id","useToastTitle_unstable","backgroundAppearance","baseState","defaultIcon","defaultProps"],"mappings":"AAAA;;;;;;;;;;;;IAiBaS,0BAAAA;;;0BAsCAe;eAAAA;;;;iEArDU,QAAQ;4BAEwD,wBAAwB;gCAChE,4BAA4B;qCACnC,kCAAkC;uCAGjC,uCAAuC;AAQzE,mCAAmC,CACxCd,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,OAAGL,+CAAAA;IAE5B,OAAO;QACLM,QAAQR,oBAAAA,CAAKS,QAAQ,CAACL,MAAMI,MAAM,EAAE;YAAEE,aAAa;QAAM;QACzDC,YAAY;YAAEC,MAAM;YAAOC,OAAO;YAAOL,QAAQ;QAAM;QACvDK,OAAOb,oBAAAA,CAAKS,QAAQ,CAACL,MAAMS,KAAK,EAAE;YAChCC,iBAAiB,CAAC,CAACR;YACnBI,aAAa;QACf;QACAE,MAAMZ,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLW,UAAUZ,MAAMY,QAAQ;YACxBC,IAAIV;YACJ,GAAGH,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBJ;IACF;AACF,EAAE;AAWK,+BAA+B,CAACF,OAAwBC;IAC7D;IAEA,MAAMc,2BAAuBlB,4CAAAA;IAC7B,MAAMmB,YAAYjB,2BAA2BC,OAAOC;IAEpD,+DAA+D,GAC/D,IAAIgB;IACJ,OAAQD,UAAUd,MAAM;QACtB,KAAK;YACHe,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAAC1B,iCAAAA,EAAAA;YACf;QACF,KAAK;YACH0B,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACzB,gCAAAA,EAAAA;YACf;QACF,KAAK;YACHyB,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACvB,yBAAAA,EAAAA;YACf;QACF,KAAK;YACHuB,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACxB,sBAAAA,EAAAA;YACf;IACJ;IAEA,OAAO;QACL,GAAGuB,SAAS;QACZP,OAAOb,oBAAAA,CAAKS,QAAQ,CAACL,MAAMS,KAAK,EAAE;YAChCS,cAAc;gBAAEN,UAAUK;YAAY;YACtCP,iBAAiB,CAAC,CAACM,UAAUd,MAAM;YACnCI,aAAa;QACf;QACAS;IACF;AACF,EAAE"}
|
|
@@ -102,11 +102,14 @@ const useToastTitleStyles_unstable = (state)=>{
|
|
|
102
102
|
const intentIconStylesInverted = useIntentIconStylesInverted();
|
|
103
103
|
const { intent } = state;
|
|
104
104
|
const invertedStyles = useInvertedStyles();
|
|
105
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
105
106
|
state.root.className = (0, _react.mergeClasses)(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
|
|
106
107
|
if (state.media) {
|
|
108
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
107
109
|
state.media.className = (0, _react.mergeClasses)(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);
|
|
108
110
|
}
|
|
109
111
|
if (state.action) {
|
|
112
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
110
113
|
state.action.className = (0, _react.mergeClasses)(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);
|
|
111
114
|
}
|
|
112
115
|
return state;
|
|
@@ -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 'use no memo';\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 state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.media) {\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 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":"AAAA,YAAY;;;;;;;;;;;;IAGCI,oBAAoB;;;gCAmEY;eAA5BgB;;;uBArEyC,gBAAgB;AAEnE,6BAA6B;IAChCf,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,uBAAuB;IAC9BC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;CAK5B,CAAC;AACF,MAAMQ,qBAAqB,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAO7B,CAAC;AACF,MAAMS,sBAAsB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAM9B,CAAC;AACF,MAAMU,iBAAiB,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAO,MAAA,EAAA;IAAA;IAAAL,MAAA,EAAA;QAAAK,MAAA,EAAA;IAAA;IAAAN,KAAA,EAAA;QAAAM,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUzB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAe,OAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,KAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,OAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,IAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAa3B,CAAC;AACF,MAAMM,2BAA2B,GAAA,WAAA,OAAGnB,eAAA,EAAA;IAAAe,OAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,KAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,OAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,IAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAanC,CAAC;AAGS,sCAAsCQ,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;IAChD,MAAMe,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;IACpD,MAAMc,kBAAkB,GAAGf,qBAAqB,CAAC,CAAC;IAClD,MAAMgB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;IAC9C,MAAMY,wBAAwB,GAAGP,2BAA2B,CAAC,CAAC;IAC9D,MAAM,EAAEQ,MAAAA,EAAQ,GAAGN,KAAK;IACxB,MAAMO,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;
|
|
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 'use no memo';\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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"}
|
|
@@ -93,11 +93,14 @@ const useToastTitleStyles_unstable = (state)=>{
|
|
|
93
93
|
const intentIconStylesInverted = useIntentIconStylesInverted();
|
|
94
94
|
const { intent } = state;
|
|
95
95
|
const invertedStyles = useInvertedStyles();
|
|
96
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
96
97
|
state.root.className = (0, _react.mergeClasses)(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
|
|
97
98
|
if (state.media) {
|
|
99
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
98
100
|
state.media.className = (0, _react.mergeClasses)(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);
|
|
99
101
|
}
|
|
100
102
|
if (state.action) {
|
|
103
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
101
104
|
state.action.className = (0, _react.mergeClasses)(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);
|
|
102
105
|
}
|
|
103
106
|
return state;
|
|
@@ -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 'use no memo';\n\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 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 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 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;;;;;;;;;;;;IAOaI,oBAAAA;;;
|
|
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 'use no memo';\n\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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"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
toasterClassNames: function() {
|
|
19
19
|
return _useToasterStylesstyles.toasterClassNames;
|
|
20
20
|
},
|
|
21
|
+
useToastAnnounce: function() {
|
|
22
|
+
return _useToastAnnounce.useToastAnnounce;
|
|
23
|
+
},
|
|
21
24
|
useToasterStyles_unstable: function() {
|
|
22
25
|
return _useToasterStylesstyles.useToasterStyles_unstable;
|
|
23
26
|
},
|
|
@@ -29,3 +32,4 @@ const _Toaster = require("./Toaster");
|
|
|
29
32
|
const _renderToaster = require("./renderToaster");
|
|
30
33
|
const _useToaster = require("./useToaster");
|
|
31
34
|
const _useToasterStylesstyles = require("./useToasterStyles.styles");
|
|
35
|
+
const _useToastAnnounce = require("./useToastAnnounce");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toaster/index.ts"],"sourcesContent":["export { Toaster } from './Toaster';\nexport type { ToasterProps, ToasterSlots, ToasterSlotsInternal, ToasterState } from './Toaster.types';\nexport { renderToaster_unstable } from './renderToaster';\nexport { useToaster_unstable } from './useToaster';\nexport { toasterClassNames, useToasterStyles_unstable } from './useToasterStyles.styles';\n"],"names":["Toaster","renderToaster_unstable","useToaster_unstable","toasterClassNames","useToasterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBE,yCAAiB;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/Toaster/index.ts"],"sourcesContent":["export { Toaster } from './Toaster';\nexport type { ToasterProps, ToasterSlots, ToasterSlotsInternal, ToasterState } from './Toaster.types';\nexport { renderToaster_unstable } from './renderToaster';\nexport { useToaster_unstable } from './useToaster';\nexport { toasterClassNames, useToasterStyles_unstable } from './useToasterStyles.styles';\nexport { useToastAnnounce } from './useToastAnnounce';\n"],"names":["Toaster","renderToaster_unstable","useToaster_unstable","toasterClassNames","useToasterStyles_unstable","useToastAnnounce"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBE,yCAAiB;;;eACjBE,kCAAgB;;;eADGD,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B;kCACxD,qBAAqB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toaster/useToastAnnounce.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Announce } from '../AriaLive';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\n/**\n * Wraps an aria live announcement function.\n * Aria live announcements can be detrimental once the user is already navigating\n * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.\n * @param announce\n * @returns A function to announce a toast and a ref to attach to the toaster element\n */\nexport function useToastAnnounce(announce: Announce): {\n announceToast: Announce;\n toasterRef: React.RefCallback<HTMLDivElement>;\n} {\n const activeRef = React.useRef(true);\n const cleanupRef = React.useRef<() => void>(() => undefined);\n const announceToast = React.useCallback<Announce>(\n (message, options) => {\n if (activeRef.current) {\n announce(message, options);\n }\n },\n [announce],\n );\n\n const toasterRef = React.useCallback((el: HTMLDivElement | null) => {\n if (!el) {\n cleanupRef.current();\n return;\n }\n\n const onFocusIn = (e: FocusEvent) => {\n if (\n isHTMLElement(e.currentTarget) &&\n e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n ) {\n return;\n }\n\n activeRef.current = false;\n };\n\n const onFocusOut = (e: FocusEvent) => {\n if (\n isHTMLElement(e.currentTarget) &&\n e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n ) {\n return;\n }\n\n activeRef.current = true;\n };\n\n el.addEventListener('focusin', onFocusIn);\n el.addEventListener('focusout', onFocusOut);\n\n cleanupRef.current = () => {\n el.removeEventListener('focusin', onFocusIn);\n el.removeEventListener('focusout', onFocusOut);\n };\n }, []);\n\n return {\n announceToast,\n toasterRef,\n };\n}\n"],"names":["React","isHTMLElement","useToastAnnounce","announce","activeRef","useRef","cleanupRef","undefined","announceToast","useCallback","message","options","current","toasterRef","el","onFocusIn","e","currentTarget","contains","relatedTarget","onFocusOut","addEventListener","removeEventListener"],"mappings":"AAAA;;;;;+BAagBE;;;;;;;iEAXO,QAAQ;gCAED,4BAA4B;AASnD,0BAA0BC,QAAkB;IAIjD,MAAMC,YAAYJ,OAAMK,MAAM,CAAC;IAC/B,MAAMC,aAAaN,OAAMK,MAAM,CAAa,IAAME;IAClD,MAAMC,gBAAgBR,OAAMS,WAAW,CACrC,CAACC,SAASC;QACR,IAAIP,UAAUQ,OAAO,EAAE;YACrBT,SAASO,SAASC;QACpB;IACF,GACA;QAACR;KAAS;IAGZ,MAAMU,aAAab,OAAMS,WAAW,CAAC,CAACK;QACpC,IAAI,CAACA,IAAI;YACPR,WAAWM,OAAO;YAClB;QACF;QAEA,MAAMG,YAAY,CAACC;YACjB,QACEf,6BAAAA,EAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,KAACjB,6BAAAA,EAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEA,MAAMQ,aAAa,CAACJ;YAClB,QACEf,6BAAAA,EAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,iCAAAA,EAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEAE,GAAGO,gBAAgB,CAAC,WAAWN;QAC/BD,GAAGO,gBAAgB,CAAC,YAAYD;QAEhCd,WAAWM,OAAO,GAAG;YACnBE,GAAGQ,mBAAmB,CAAC,WAAWP;YAClCD,GAAGQ,mBAAmB,CAAC,YAAYF;QACrC;IACF,GAAG,EAAE;IAEL,OAAO;QACLZ;QACAK;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Toaster/useToastAnnounce.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Announce } from '../AriaLive';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\n/**\n * Wraps an aria live announcement function.\n * Aria live announcements can be detrimental once the user is already navigating\n * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.\n * @param announce - The aria live announcement function to wrap\n * @returns A function to announce a toast and a ref to attach to the toaster element\n */\nexport function useToastAnnounce(announce: Announce): {\n announceToast: Announce;\n toasterRef: React.RefCallback<HTMLDivElement>;\n} {\n const activeRef = React.useRef(true);\n const cleanupRef = React.useRef<() => void>(() => undefined);\n const announceToast = React.useCallback<Announce>(\n (message, options) => {\n if (activeRef.current) {\n announce(message, options);\n }\n },\n [announce],\n );\n\n const toasterRef = React.useCallback((el: HTMLDivElement | null) => {\n if (!el) {\n cleanupRef.current();\n return;\n }\n\n const onFocusIn = (e: FocusEvent) => {\n if (\n isHTMLElement(e.currentTarget) &&\n e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n ) {\n return;\n }\n\n activeRef.current = false;\n };\n\n const onFocusOut = (e: FocusEvent) => {\n if (\n isHTMLElement(e.currentTarget) &&\n e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n ) {\n return;\n }\n\n activeRef.current = true;\n };\n\n el.addEventListener('focusin', onFocusIn);\n el.addEventListener('focusout', onFocusOut);\n\n cleanupRef.current = () => {\n el.removeEventListener('focusin', onFocusIn);\n el.removeEventListener('focusout', onFocusOut);\n };\n }, []);\n\n return {\n announceToast,\n toasterRef,\n };\n}\n"],"names":["React","isHTMLElement","useToastAnnounce","announce","activeRef","useRef","cleanupRef","undefined","announceToast","useCallback","message","options","current","toasterRef","el","onFocusIn","e","currentTarget","contains","relatedTarget","onFocusOut","addEventListener","removeEventListener"],"mappings":"AAAA;;;;;+BAagBE;;;;;;;iEAXO,QAAQ;gCAED,4BAA4B;AASnD,0BAA0BC,QAAkB;IAIjD,MAAMC,YAAYJ,OAAMK,MAAM,CAAC;IAC/B,MAAMC,aAAaN,OAAMK,MAAM,CAAa,IAAME;IAClD,MAAMC,gBAAgBR,OAAMS,WAAW,CACrC,CAACC,SAASC;QACR,IAAIP,UAAUQ,OAAO,EAAE;YACrBT,SAASO,SAASC;QACpB;IACF,GACA;QAACR;KAAS;IAGZ,MAAMU,aAAab,OAAMS,WAAW,CAAC,CAACK;QACpC,IAAI,CAACA,IAAI;YACPR,WAAWM,OAAO;YAClB;QACF;QAEA,MAAMG,YAAY,CAACC;YACjB,QACEf,6BAAAA,EAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,KAACjB,6BAAAA,EAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEA,MAAMQ,aAAa,CAACJ;YAClB,QACEf,6BAAAA,EAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,iCAAAA,EAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEAE,GAAGO,gBAAgB,CAAC,WAAWN;QAC/BD,GAAGO,gBAAgB,CAAC,YAAYD;QAEhCd,WAAWM,OAAO,GAAG;YACnBE,GAAGQ,mBAAmB,CAAC,WAAWP;YAClCD,GAAGQ,mBAAmB,CAAC,YAAYF;QACrC;IACF,GAAG,EAAE;IAEL,OAAO;QACLZ;QACAK;IACF;AACF"}
|
|
@@ -43,6 +43,7 @@ const useToasterStyles_unstable = (state)=>{
|
|
|
43
43
|
const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
|
|
44
44
|
if (state.bottomStart) {
|
|
45
45
|
var _state_bottomStart;
|
|
46
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
46
47
|
state.bottomStart.className = className;
|
|
47
48
|
var _style;
|
|
48
49
|
(_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};
|
|
@@ -50,6 +51,7 @@ const useToasterStyles_unstable = (state)=>{
|
|
|
50
51
|
}
|
|
51
52
|
if (state.bottomEnd) {
|
|
52
53
|
var _state_bottomEnd;
|
|
54
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
53
55
|
state.bottomEnd.className = className;
|
|
54
56
|
var _style1;
|
|
55
57
|
(_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};
|
|
@@ -57,6 +59,7 @@ const useToasterStyles_unstable = (state)=>{
|
|
|
57
59
|
}
|
|
58
60
|
if (state.topStart) {
|
|
59
61
|
var _state_topStart;
|
|
62
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
60
63
|
state.topStart.className = className;
|
|
61
64
|
var _style2;
|
|
62
65
|
(_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};
|
|
@@ -64,6 +67,7 @@ const useToasterStyles_unstable = (state)=>{
|
|
|
64
67
|
}
|
|
65
68
|
if (state.topEnd) {
|
|
66
69
|
var _state_topEnd;
|
|
70
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
67
71
|
state.topEnd.className = className;
|
|
68
72
|
var _style3;
|
|
69
73
|
(_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};
|
|
@@ -71,6 +75,7 @@ const useToasterStyles_unstable = (state)=>{
|
|
|
71
75
|
}
|
|
72
76
|
if (state.top) {
|
|
73
77
|
var _state_top;
|
|
78
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
74
79
|
state.top.className = className;
|
|
75
80
|
var _style4;
|
|
76
81
|
(_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};
|
|
@@ -78,6 +83,7 @@ const useToasterStyles_unstable = (state)=>{
|
|
|
78
83
|
}
|
|
79
84
|
if (state.bottom) {
|
|
80
85
|
var _state_bottom;
|
|
86
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
81
87
|
state.bottom.className = className;
|
|
82
88
|
var _style5;
|
|
83
89
|
(_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};
|
|
@@ -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 'use no memo';\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 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 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 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 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 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 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":"AAAA,YAAY;;;;;;;;;;;;IAGCK,iBAAiB;;;6BAiBY;eAAzBO;;;uBAnByC,gBAAgB;uBACvB,mBAAmB;AAC/D,0BAA0B;IAC7BN,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIhC,CAAC;AACF,MAAMQ,gBAAgB,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAQ,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIxB,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,MAAM,GAAGP,gBAAgB,CAAC,CAAC;IACjC,MAAMQ,SAAS,OAAGd,mBAAY,EAACG,iBAAiB,CAACC,IAAI,EAAEQ,iBAAiB,EAAED,KAAK,CAACJ,MAAM,IAAIM,MAAM,CAACN,MAAM,EAAEI,KAAK,CAACP,IAAI,CAACU,SAAS,CAAC;IAC9H,IAAIH,KAAK,CAACI,WAAW,EAAE;QACnB,IAAIC,kBAAkB;
|
|
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 'use no memo';\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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"}
|