@fluentui/react-message-bar 9.0.18 → 9.0.20

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +26 -5
  2. package/dist/index.d.ts +9 -0
  3. package/lib/components/MessageBar/MessageBar.types.js.map +1 -1
  4. package/lib/components/MessageBar/renderMessageBar.js +2 -1
  5. package/lib/components/MessageBar/renderMessageBar.js.map +1 -1
  6. package/lib/components/MessageBar/useMessageBar.js +6 -1
  7. package/lib/components/MessageBar/useMessageBar.js.map +1 -1
  8. package/lib/components/MessageBar/useMessageBarStyles.styles.js +7 -1
  9. package/lib/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
  10. package/lib-commonjs/components/MessageBar/renderMessageBar.js +2 -1
  11. package/lib-commonjs/components/MessageBar/renderMessageBar.js.map +1 -1
  12. package/lib-commonjs/components/MessageBar/useMessageBar.js +6 -1
  13. package/lib-commonjs/components/MessageBar/useMessageBar.js.map +1 -1
  14. package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js +9 -1
  15. package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
  16. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,19 +1,40 @@
1
1
  # Change Log - @fluentui/react-message-bar
2
2
 
3
- This log was last generated on Tue, 30 Jan 2024 23:12:35 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Feb 2024 14:15:33 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.0.20)
8
+
9
+ Tue, 20 Feb 2024 14:15:33 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.0.19..@fluentui/react-message-bar_v9.0.20)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-button to v9.3.69 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v9.0.30 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
17
+
18
+ ## [9.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.0.19)
19
+
20
+ Tue, 06 Feb 2024 17:55:18 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.0.18..@fluentui/react-message-bar_v9.0.19)
22
+
23
+ ### Patches
24
+
25
+ - fix: MessageBar with no actions should have correct spacing ([PR #30481](https://github.com/microsoft/fluentui/pull/30481) by lingfangao@hotmail.com)
26
+ - Bump @fluentui/react-button to v9.3.68 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
27
+
7
28
  ## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.0.18)
8
29
 
9
- Tue, 30 Jan 2024 23:12:35 GMT
30
+ Tue, 30 Jan 2024 23:16:54 GMT
10
31
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.0.17..@fluentui/react-message-bar_v9.0.18)
11
32
 
12
33
  ### Patches
13
34
 
14
- - Bump @fluentui/react-button to v9.3.67 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
15
- - Bump @fluentui/react-jsx-runtime to v9.0.29 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
16
- - Bump @fluentui/react-utilities to v9.18.0 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
35
+ - Bump @fluentui/react-button to v9.3.67 ([PR #29983](https://github.com/microsoft/fluentui/pull/29983) by beachball)
36
+ - Bump @fluentui/react-jsx-runtime to v9.0.29 ([PR #29983](https://github.com/microsoft/fluentui/pull/29983) by beachball)
37
+ - Bump @fluentui/react-utilities to v9.18.0 ([PR #29983](https://github.com/microsoft/fluentui/pull/29983) by beachball)
17
38
 
18
39
  ## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.0.17)
19
40
 
package/dist/index.d.ts CHANGED
@@ -131,6 +131,15 @@ export declare type MessageBarProps = ComponentProps<MessageBarSlots> & Pick<Par
131
131
  export declare type MessageBarSlots = {
132
132
  root: Slot<'div'>;
133
133
  icon?: Slot<'div'>;
134
+ /**
135
+ * Rendered when the component is in multiline layout to guarantee correct spacing even
136
+ * if no actions are rendered. When actions are rendered, the default actions grid area will render
137
+ * over this element
138
+ *
139
+ * NOTE: If you are using this slot, this probably means that you are using the MessageBar without
140
+ * actions, this is not recommended from an accesibility point of view
141
+ */
142
+ bottomReflowSpacer?: Slot<'div'>;
134
143
  };
135
144
 
136
145
  /**
package/lib/components/MessageBar/MessageBar.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n root: Slot<'div'>;\n icon?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n Pick<Partial<MessageBarContextValue>, 'layout'> & {\n /**\n * Default designs announcement presets\n * @default info\n */\n intent?: MessageBarIntent;\n /**\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n */\n politeness?: 'assertive' | 'polite';\n /**\n * Use squal for page level messages and rounded for component level messages\n * @default rounded\n */\n shape?: 'square' | 'rounded';\n };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n transitionClassName: string;\n };\n"],"names":[],"mappings":"AAAA,WA0CI"}
1
+ {"version":3,"sources":["MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n root: Slot<'div'>;\n icon?: Slot<'div'>;\n /**\n * Rendered when the component is in multiline layout to guarantee correct spacing even\n * if no actions are rendered. When actions are rendered, the default actions grid area will render\n * over this element\n *\n * NOTE: If you are using this slot, this probably means that you are using the MessageBar without\n * actions, this is not recommended from an accesibility point of view\n */\n bottomReflowSpacer?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n Pick<Partial<MessageBarContextValue>, 'layout'> & {\n /**\n * Default designs announcement presets\n * @default info\n */\n intent?: MessageBarIntent;\n /**\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n */\n politeness?: 'assertive' | 'polite';\n /**\n * Use squal for page level messages and rounded for component level messages\n * @default rounded\n */\n shape?: 'square' | 'rounded';\n };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n transitionClassName: string;\n };\n"],"names":[],"mappings":"AAAA,WAmDI"}
package/lib/components/MessageBar/renderMessageBar.js CHANGED
@@ -10,7 +10,8 @@ import { MessageBarContextProvider } from '../../contexts/messageBarContext';
10
10
  children: /*#__PURE__*/ _jsxs(state.root, {
11
11
  children: [
12
12
  state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
13
- state.root.children
13
+ state.root.children,
14
+ state.bottomReflowSpacer && /*#__PURE__*/ _jsx(state.bottomReflowSpacer, {})
14
15
  ]
15
16
  })
16
17
  });
package/lib/components/MessageBar/renderMessageBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues) => {\n assertSlots<MessageBarSlots>(state);\n\n return (\n <MessageBarContextProvider value={contexts.messageBar}>\n <state.root>\n {state.icon && <state.icon />}\n {state.root.children}\n </state.root>\n </MessageBarContextProvider>\n );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,yBAAyB,QAAQ,mCAAmC;AAE7E;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC;IAChEJ,YAA6BG;IAE7B,qBACE,KAACF;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;;;;AAI5B,EAAE"}
1
+ {"version":3,"sources":["renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues) => {\n assertSlots<MessageBarSlots>(state);\n\n return (\n <MessageBarContextProvider value={contexts.messageBar}>\n <state.root>\n {state.icon && <state.icon />}\n {state.root.children}\n {state.bottomReflowSpacer && <state.bottomReflowSpacer />}\n </state.root>\n </MessageBarContextProvider>\n );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children","bottomReflowSpacer"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,yBAAyB,QAAQ,mCAAmC;AAE7E;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC;IAChEJ,YAA6BG;IAE7B,qBACE,KAACF;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,kBAAI,KAACP,MAAMO,kBAAkB;;;;AAI9D,EAAE"}
package/lib/components/MessageBar/useMessageBar.js CHANGED
@@ -44,7 +44,8 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
44
44
  return {
45
45
  components: {
46
46
  root: 'div',
47
- icon: 'div'
47
+ icon: 'div',
48
+ bottomReflowSpacer: 'div'
48
49
  },
49
50
  root: slot.always(getIntrinsicElementProps('div', {
50
51
  ref: useMergedRefs(ref, reflowRef, nodeRef),
@@ -61,6 +62,10 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
61
62
  children: getIntentIcon(intent)
62
63
  }
63
64
  }),
65
+ bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {
66
+ renderByDefault: computedLayout === 'multiline',
67
+ elementType: 'div'
68
+ }),
64
69
  layout: computedLayout,
65
70
  intent,
66
71
  transitionClassName,
package/lib/components/MessageBar/useMessageBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce_unstable } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef<HTMLDivElement | null>(null);\n const bodyRef = React.useRef<HTMLDivElement | null>(null);\n const { announce } = useAnnounce_unstable();\n const titleId = useId();\n\n React.useEffect(() => {\n const bodyMessage = bodyRef.current?.textContent;\n const actionsMessage = actionsRef.current?.textContent;\n\n const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n return {\n components: {\n root: 'div',\n icon: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: { children: getIntentIcon(intent) },\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce_unstable","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","always","role","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,4BAA4B;AACjG,SAASC,oBAAoB,QAAQ,kCAAkC;AAEvE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,aAAaxB,MAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,MAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAUzB;IAEhBH,MAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,eAAcJ,mBAAAA,QAAQK,OAAO,cAAfL,uCAAAA,iBAAiBM,WAAW;QAChD,MAAMC,kBAAiBT,sBAAAA,WAAWO,OAAO,cAAlBP,0CAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMvC,KAAKyC,MAAM,CACf1C,yBAAyB,OAAO;YAC9BU,KAAKP,cAAcO,KAAKO,WAAWK;YACnCqB,MAAM;YACN,mBAAmBhB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEmC,aAAa;QAAM;QAGvBH,MAAMxC,KAAK4C,QAAQ,CAACpC,MAAMgC,IAAI,EAAE;YAC9BK,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU3C,cAAcO;YAAQ;QAClD;QACAD,QAAQQ;QACRP;QACAS;QACAE;QACAE;QACAE;QACAb;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce_unstable } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef<HTMLDivElement | null>(null);\n const bodyRef = React.useRef<HTMLDivElement | null>(null);\n const { announce } = useAnnounce_unstable();\n const titleId = useId();\n\n React.useEffect(() => {\n const bodyMessage = bodyRef.current?.textContent;\n const actionsMessage = actionsRef.current?.textContent;\n\n const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n return {\n components: {\n root: 'div',\n icon: 'div',\n bottomReflowSpacer: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: { children: getIntentIcon(intent) },\n }),\n bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n renderByDefault: computedLayout === 'multiline',\n elementType: 'div',\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce_unstable","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,4BAA4B;AACjG,SAASC,oBAAoB,QAAQ,kCAAkC;AAEvE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,aAAaxB,MAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,MAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAUzB;IAEhBH,MAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,eAAcJ,mBAAAA,QAAQK,OAAO,cAAfL,uCAAAA,iBAAiBM,WAAW;QAChD,MAAMC,kBAAiBT,sBAAAA,WAAWO,OAAO,cAAlBP,0CAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMvC,KAAK0C,MAAM,CACf3C,yBAAyB,OAAO;YAC9BU,KAAKP,cAAcO,KAAKO,WAAWK;YACnCsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAGvBJ,MAAMxC,KAAK6C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU5C,cAAcO;YAAQ;QAClD;QACA8B,oBAAoBzC,KAAK6C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB5B,mBAAmB;YACpC0B,aAAa;QACf;QACAlC,QAAQQ;QACRP;QACAS;QACAE;QACAE;QACAE;QACAb;IACF;AACF,EAAE"}
package/lib/components/MessageBar/useMessageBarStyles.styles.js CHANGED
@@ -2,10 +2,12 @@ import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/reac
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  export const messageBarClassNames = {
4
4
  root: 'fui-MessageBar',
5
- icon: 'fui-MessageBar__icon'
5
+ icon: 'fui-MessageBar__icon',
6
+ bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
6
7
  };
7
8
  const useRootBaseStyles = /*#__PURE__*/__resetStyles("rashqx", "ri1c0vc", [".rashqx{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-left:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}", ".ri1c0vc{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-right:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}"]);
8
9
  const useIconBaseStyles = /*#__PURE__*/__resetStyles("r1bxgyar", "rv8i6h8", [".r1bxgyar{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}", ".rv8i6h8{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}"]);
10
+ const useReflowSpacerBaseStyles = /*#__PURE__*/__resetStyles("r1vx593n", null, [".r1vx593n{margin-bottom:var(--spacingVerticalS);grid-area:secondaryActions;}"]);
9
11
  const useStyles = /*#__PURE__*/__styles({
10
12
  rootMultiline: {
11
13
  Huce71: "f6juhto",
@@ -77,11 +79,15 @@ export const useMessageBarStyles_unstable = state => {
77
79
  const iconBaseStyles = useIconBaseStyles();
78
80
  const iconIntentStyles = useIconIntentStyles();
79
81
  const rootIntentStyles = useRootIntentStyles();
82
+ const reflowSpacerStyles = useReflowSpacerBaseStyles();
80
83
  const styles = useStyles();
81
84
  state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);
82
85
  if (state.icon) {
83
86
  state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
84
87
  }
88
+ if (state.bottomReflowSpacer) {
89
+ state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
90
+ }
85
91
  return state;
86
92
  };
87
93
  //# sourceMappingURL=useMessageBarStyles.styles.js.map
package/lib/components/MessageBar/useMessageBarStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","useRootBaseStyles","useIconBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","styles","className","layout","shape","intent","transitionClassName"],"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n ...shorthands.gridArea('icon'),\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: tokens.spacingVerticalMNudge,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `\n },\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px'\n },\n square: {\n ...shorthands.borderRadius(0)\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground3\n },\n success: {\n color: tokens.colorStatusSuccessForeground1\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: tokens.colorStatusDangerBackground1,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: tokens.colorStatusWarningBackground1,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: tokens.colorStatusSuccessBackground1,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGR,aAAA,45DAazB,CAAC;AACF,MAAMS,iBAAiB,gBAAGT,aAAA,kfAOzB,CAAC;AACF,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,aAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,yBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG3B,QAAA;EAAA4B,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMO,mBAAmB,gBAAGjC,QAAA;EAAA4B,IAAA;EAAAC,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAP,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,OAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,cAAc,GAAGlC,iBAAiB,CAAC,CAAC;EAC1C,MAAMmC,cAAc,GAAGlC,iBAAiB,CAAC,CAAC;EAC1C,MAAMmC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,MAAM,GAAGpC,SAAS,CAAC,CAAC;EAC1B+B,KAAK,CAACnC,IAAI,CAACyC,SAAS,GAAG7C,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEoC,cAAc,EAAED,KAAK,CAACO,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACnC,aAAa,EAAE8B,KAAK,CAACQ,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAACxB,MAAM,EAAEuB,gBAAgB,CAACJ,KAAK,CAACS,MAAM,CAAC,EAAET,KAAK,CAACU,mBAAmB,EAAEV,KAAK,CAACnC,IAAI,CAACyC,SAAS,CAAC;EAChQ,IAAIN,KAAK,CAAClC,IAAI,EAAE;IACZkC,KAAK,CAAClC,IAAI,CAACwC,SAAS,GAAG7C,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEoC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACS,MAAM,CAAC,EAAET,KAAK,CAAClC,IAAI,CAACwC,SAAS,CAAC;EACxI;EACA,OAAON,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent","transitionClassName"],"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n ...shorthands.gridArea('icon'),\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: tokens.spacingVerticalMNudge,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `\n },\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px'\n },\n square: {\n ...shorthands.borderRadius(0)\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground3\n },\n success: {\n color: tokens.colorStatusSuccessForeground1\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: tokens.colorStatusDangerBackground1,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: tokens.colorStatusWarningBackground1,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: tokens.colorStatusSuccessBackground1,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE,sBAAsB;EAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,gBAAGT,aAAA,45DAazB,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,kfAOzB,CAAC;AACF,MAAMW,yBAAyB,gBAAGX,aAAA,mGAGjC,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,aAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,yBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG7B,QAAA;EAAA8B,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMO,mBAAmB,gBAAGnC,QAAA;EAAA8B,IAAA;EAAAC,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAP,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,OAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,cAAc,GAAGnC,iBAAiB,CAAC,CAAC;EAC1C,MAAMoC,cAAc,GAAGnC,iBAAiB,CAAC,CAAC;EAC1C,MAAMoC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,kBAAkB,GAAGrC,yBAAyB,CAAC,CAAC;EACtD,MAAMsC,MAAM,GAAGrC,SAAS,CAAC,CAAC;EAC1B+B,KAAK,CAACrC,IAAI,CAAC4C,SAAS,GAAGhD,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEsC,cAAc,EAAED,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACpC,aAAa,EAAE8B,KAAK,CAACS,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAACzB,MAAM,EAAEuB,gBAAgB,CAACJ,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACW,mBAAmB,EAAEX,KAAK,CAACrC,IAAI,CAAC4C,SAAS,CAAC;EAChQ,IAAIP,KAAK,CAACpC,IAAI,EAAE;IACZoC,KAAK,CAACpC,IAAI,CAAC2C,SAAS,GAAGhD,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEsC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACpC,IAAI,CAAC2C,SAAS,CAAC;EACxI;EACA,IAAIP,KAAK,CAACnC,kBAAkB,EAAE;IAC1BmC,KAAK,CAACnC,kBAAkB,CAAC0C,SAAS,GAAGhD,YAAY,CAACG,oBAAoB,CAACG,kBAAkB,EAAEwC,kBAAkB,CAAC;EAClH;EACA,OAAOL,KAAK;AAChB,CAAC"}
package/lib-commonjs/components/MessageBar/renderMessageBar.js CHANGED
@@ -18,7 +18,8 @@ const renderMessageBar_unstable = (state, contexts)=>{
18
18
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
19
19
  children: [
20
20
  state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
21
- state.root.children
21
+ state.root.children,
22
+ state.bottomReflowSpacer && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomReflowSpacer, {})
22
23
  ]
23
24
  })
24
25
  });
package/lib-commonjs/components/MessageBar/renderMessageBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["renderMessageBar.js"],"sourcesContent":[" import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n/**\n * Render the final JSX of MessageBar\n */ export const renderMessageBar_unstable = (state, contexts)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(MessageBarContextProvider, {\n value: contexts.messageBar,\n children: /*#__PURE__*/ _jsxs(state.root, {\n children: [\n state.icon && /*#__PURE__*/ _jsx(state.icon, {}),\n state.root.children\n ]\n })\n });\n};\n"],"names":["renderMessageBar_unstable","state","contexts","assertSlots","_jsx","MessageBarContextProvider","value","messageBar","children","_jsxs","root","icon"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BAL4B;gCACjB;mCACc;AAG/B,MAAMA,4BAA4B,CAACC,OAAOC;IACjDC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,4CAAyB,EAAE;QACjDC,OAAOJ,SAASK,UAAU;QAC1BC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACR,MAAMS,IAAI,EAAE;YACtCF,UAAU;gBACNP,MAAMU,IAAI,IAAI,WAAW,GAAGP,IAAAA,eAAI,EAACH,MAAMU,IAAI,EAAE,CAAC;gBAC9CV,MAAMS,IAAI,CAACF,QAAQ;aACtB;QACL;IACJ;AACJ"}
1
+ {"version":3,"sources":["renderMessageBar.js"],"sourcesContent":[" import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n/**\n * Render the final JSX of MessageBar\n */ export const renderMessageBar_unstable = (state, contexts)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(MessageBarContextProvider, {\n value: contexts.messageBar,\n children: /*#__PURE__*/ _jsxs(state.root, {\n children: [\n state.icon && /*#__PURE__*/ _jsx(state.icon, {}),\n state.root.children,\n state.bottomReflowSpacer && /*#__PURE__*/ _jsx(state.bottomReflowSpacer, {})\n ]\n })\n });\n};\n"],"names":["renderMessageBar_unstable","state","contexts","assertSlots","_jsx","MessageBarContextProvider","value","messageBar","children","_jsxs","root","icon","bottomReflowSpacer"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BAL4B;gCACjB;mCACc;AAG/B,MAAMA,4BAA4B,CAACC,OAAOC;IACjDC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,4CAAyB,EAAE;QACjDC,OAAOJ,SAASK,UAAU;QAC1BC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACR,MAAMS,IAAI,EAAE;YACtCF,UAAU;gBACNP,MAAMU,IAAI,IAAI,WAAW,GAAGP,IAAAA,eAAI,EAACH,MAAMU,IAAI,EAAE,CAAC;gBAC9CV,MAAMS,IAAI,CAACF,QAAQ;gBACnBP,MAAMW,kBAAkB,IAAI,WAAW,GAAGR,IAAAA,eAAI,EAACH,MAAMW,kBAAkB,EAAE,CAAC;aAC7E;QACL;IACJ;AACJ"}
package/lib-commonjs/components/MessageBar/useMessageBar.js CHANGED
@@ -47,7 +47,8 @@ const useMessageBar_unstable = (props, ref)=>{
47
47
  return {
48
48
  components: {
49
49
  root: 'div',
50
- icon: 'div'
50
+ icon: 'div',
51
+ bottomReflowSpacer: 'div'
51
52
  },
52
53
  root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
53
54
  ref: (0, _reactutilities.useMergedRefs)(ref, reflowRef, nodeRef),
@@ -64,6 +65,10 @@ const useMessageBar_unstable = (props, ref)=>{
64
65
  children: (0, _getIntentIcon.getIntentIcon)(intent)
65
66
  }
66
67
  }),
68
+ bottomReflowSpacer: _reactutilities.slot.optional(props.bottomReflowSpacer, {
69
+ renderByDefault: computedLayout === 'multiline',
70
+ elementType: 'div'
71
+ }),
67
72
  layout: computedLayout,
68
73
  intent,
69
74
  transitionClassName,
package/lib-commonjs/components/MessageBar/useMessageBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMessageBar.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce_unstable } from '@fluentui/react-shared-contexts';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */ export const useMessageBar_unstable = (props, ref)=>{\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = (politeness !== null && politeness !== void 0 ? politeness : intent === 'info') ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef(null);\n const bodyRef = React.useRef(null);\n const { announce } = useAnnounce_unstable();\n const titleId = useId();\n React.useEffect(()=>{\n var _bodyRef_current, _actionsRef_current;\n const bodyMessage = (_bodyRef_current = bodyRef.current) === null || _bodyRef_current === void 0 ? void 0 : _bodyRef_current.textContent;\n const actionsMessage = (_actionsRef_current = actionsRef.current) === null || _actionsRef_current === void 0 ? void 0 : _actionsRef_current.textContent;\n const message = [\n bodyMessage,\n actionsMessage\n ].filter(Boolean).join(',');\n announce(message, {\n polite: computedPoliteness === 'polite',\n alert: computedPoliteness === 'assertive'\n });\n }, [\n bodyRef,\n actionsRef,\n announce,\n computedPoliteness\n ]);\n return {\n components: {\n root: 'div',\n icon: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props\n }), {\n elementType: 'div'\n }),\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: {\n children: getIntentIcon(intent)\n }\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape\n };\n};\n"],"names":["useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","useMessageBarReflow","computedLayout","className","transitionClassName","nodeRef","useMessageBarTransitionContext","actionsRef","React","useRef","bodyRef","announce","useAnnounce_unstable","titleId","useId","useEffect","_bodyRef_current","_actionsRef_current","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType","optional","renderByDefault","defaultProps","children","getIntentIcon"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCAC8C;qCAChC;+BACP;qCACM;6CACW;AASpC,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqB,AAACF,CAAAA,eAAe,QAAQA,eAAe,KAAK,IAAIA,aAAaD,WAAW,MAAK,IAAK,WAAW;IACxH,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGC,IAAAA,wCAAmB,EAACH;IAC1D,MAAMI,iBAAiBJ,aAAaE,YAAY,cAAc,eAAeP;IAC7E,MAAM,EAAEU,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGC,IAAAA,2DAA8B;IAClF,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChC,MAAMC,UAAUF,OAAMC,MAAM,CAAC;IAC7B,MAAM,EAAEE,QAAQ,EAAE,GAAGC,IAAAA,yCAAoB;IACzC,MAAMC,UAAUC,IAAAA,qBAAK;IACrBN,OAAMO,SAAS,CAAC;QACZ,IAAIC,kBAAkBC;QACtB,MAAMC,cAAc,AAACF,CAAAA,mBAAmBN,QAAQS,OAAO,AAAD,MAAO,QAAQH,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBI,WAAW;QACxI,MAAMC,iBAAiB,AAACJ,CAAAA,sBAAsBV,WAAWY,OAAO,AAAD,MAAO,QAAQF,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,WAAW;QACvJ,MAAME,UAAU;YACZJ;YACAG;SACH,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACvBd,SAASW,SAAS;YACdI,QAAQ7B,uBAAuB;YAC/B8B,OAAO9B,uBAAuB;QAClC;IACJ,GAAG;QACCa;QACAH;QACAI;QACAd;KACH;IACD,OAAO;QACH+B,YAAY;YACRC,MAAM;YACNC,MAAM;QACV;QACAD,MAAME,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CzC,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAKO,WAAWM;YACnC8B,MAAM;YACN,mBAAmBtB;YACnB,GAAGtB,KAAK;QACZ,IAAI;YACA6C,aAAa;QACjB;QACAN,MAAMC,oBAAI,CAACM,QAAQ,CAAC9C,MAAMuC,IAAI,EAAE;YAC5BQ,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBACVC,UAAUC,IAAAA,4BAAa,EAAC/C;YAC5B;QACJ;QACAD,QAAQS;QACRR;QACAU;QACAG;QACAG;QACAG;QACAjB;IACJ;AACJ"}
1
+ {"version":3,"sources":["useMessageBar.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce_unstable } from '@fluentui/react-shared-contexts';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */ export const useMessageBar_unstable = (props, ref)=>{\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = (politeness !== null && politeness !== void 0 ? politeness : intent === 'info') ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef(null);\n const bodyRef = React.useRef(null);\n const { announce } = useAnnounce_unstable();\n const titleId = useId();\n React.useEffect(()=>{\n var _bodyRef_current, _actionsRef_current;\n const bodyMessage = (_bodyRef_current = bodyRef.current) === null || _bodyRef_current === void 0 ? void 0 : _bodyRef_current.textContent;\n const actionsMessage = (_actionsRef_current = actionsRef.current) === null || _actionsRef_current === void 0 ? void 0 : _actionsRef_current.textContent;\n const message = [\n bodyMessage,\n actionsMessage\n ].filter(Boolean).join(',');\n announce(message, {\n polite: computedPoliteness === 'polite',\n alert: computedPoliteness === 'assertive'\n });\n }, [\n bodyRef,\n actionsRef,\n announce,\n computedPoliteness\n ]);\n return {\n components: {\n root: 'div',\n icon: 'div',\n bottomReflowSpacer: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props\n }), {\n elementType: 'div'\n }),\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: {\n children: getIntentIcon(intent)\n }\n }),\n bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n renderByDefault: computedLayout === 'multiline',\n elementType: 'div'\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape\n };\n};\n"],"names":["useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","useMessageBarReflow","computedLayout","className","transitionClassName","nodeRef","useMessageBarTransitionContext","actionsRef","React","useRef","bodyRef","announce","useAnnounce_unstable","titleId","useId","useEffect","_bodyRef_current","_actionsRef_current","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType","optional","renderByDefault","defaultProps","children","getIntentIcon"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCAC8C;qCAChC;+BACP;qCACM;6CACW;AASpC,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqB,AAACF,CAAAA,eAAe,QAAQA,eAAe,KAAK,IAAIA,aAAaD,WAAW,MAAK,IAAK,WAAW;IACxH,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGC,IAAAA,wCAAmB,EAACH;IAC1D,MAAMI,iBAAiBJ,aAAaE,YAAY,cAAc,eAAeP;IAC7E,MAAM,EAAEU,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGC,IAAAA,2DAA8B;IAClF,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChC,MAAMC,UAAUF,OAAMC,MAAM,CAAC;IAC7B,MAAM,EAAEE,QAAQ,EAAE,GAAGC,IAAAA,yCAAoB;IACzC,MAAMC,UAAUC,IAAAA,qBAAK;IACrBN,OAAMO,SAAS,CAAC;QACZ,IAAIC,kBAAkBC;QACtB,MAAMC,cAAc,AAACF,CAAAA,mBAAmBN,QAAQS,OAAO,AAAD,MAAO,QAAQH,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBI,WAAW;QACxI,MAAMC,iBAAiB,AAACJ,CAAAA,sBAAsBV,WAAWY,OAAO,AAAD,MAAO,QAAQF,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,WAAW;QACvJ,MAAME,UAAU;YACZJ;YACAG;SACH,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACvBd,SAASW,SAAS;YACdI,QAAQ7B,uBAAuB;YAC/B8B,OAAO9B,uBAAuB;QAClC;IACJ,GAAG;QACCa;QACAH;QACAI;QACAd;KACH;IACD,OAAO;QACH+B,YAAY;YACRC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACxB;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C1C,KAAK2C,IAAAA,6BAAa,EAAC3C,KAAKO,WAAWM;YACnC+B,MAAM;YACN,mBAAmBvB;YACnB,GAAGtB,KAAK;QACZ,IAAI;YACA8C,aAAa;QACjB;QACAP,MAAME,oBAAI,CAACM,QAAQ,CAAC/C,MAAMuC,IAAI,EAAE;YAC5BS,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBACVC,UAAUC,IAAAA,4BAAa,EAAChD;YAC5B;QACJ;QACAqC,oBAAoBC,oBAAI,CAACM,QAAQ,CAAC/C,MAAMwC,kBAAkB,EAAE;YACxDQ,iBAAiBrC,mBAAmB;YACpCmC,aAAa;QACjB;QACA5C,QAAQS;QACRR;QACAU;QACAG;QACAG;QACAG;QACAjB;IACJ;AACJ"}
package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js CHANGED
@@ -19,7 +19,8 @@ _export(exports, {
19
19
  const _react = require("@griffel/react");
20
20
  const messageBarClassNames = {
21
21
  root: 'fui-MessageBar',
22
- icon: 'fui-MessageBar__icon'
22
+ icon: 'fui-MessageBar__icon',
23
+ bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
23
24
  };
24
25
  const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rashqx", "ri1c0vc", [
25
26
  ".rashqx{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-left:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}",
@@ -29,6 +30,9 @@ const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1bxgyar", "r
29
30
  ".r1bxgyar{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}",
30
31
  ".rv8i6h8{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}"
31
32
  ]);
33
+ const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1vx593n", null, [
34
+ ".r1vx593n{margin-bottom:var(--spacingVerticalS);grid-area:secondaryActions;}"
35
+ ]);
32
36
  const useStyles = /*#__PURE__*/ (0, _react.__styles)({
33
37
  rootMultiline: {
34
38
  Huce71: "f6juhto",
@@ -165,10 +169,14 @@ const useMessageBarStyles_unstable = (state)=>{
165
169
  const iconBaseStyles = useIconBaseStyles();
166
170
  const iconIntentStyles = useIconIntentStyles();
167
171
  const rootIntentStyles = useRootIntentStyles();
172
+ const reflowSpacerStyles = useReflowSpacerBaseStyles();
168
173
  const styles = useStyles();
169
174
  state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);
170
175
  if (state.icon) {
171
176
  state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
172
177
  }
178
+ if (state.bottomReflowSpacer) {
179
+ state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
180
+ }
173
181
  return state;
174
182
  }; //# sourceMappingURL=useMessageBarStyles.styles.js.map
package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon'\n};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"rashqx\", \"ri1c0vc\", [\".rashqx{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\\\"icon body secondaryActions actions\\\";padding-left:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}\", \".ri1c0vc{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\\\"icon body secondaryActions actions\\\";padding-right:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}\"]);\nconst useIconBaseStyles = /*#__PURE__*/__resetStyles(\"r1bxgyar\", \"rv8i6h8\", [\".r1bxgyar{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}\", \".rv8i6h8{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n rootMultiline: {\n Huce71: \"f6juhto\",\n Bt984gj: \"f1s2louj\",\n z8tnut: \"f1ngh7ph\",\n Budl1dq: \"f17g0uqy\",\n zoa1oz: \"f1w7oly7\"\n },\n secondaryActionsMultiline: {\n Brf1p80: \"f1e8xxv9\",\n B6of3ja: \"f1gaxbfw\",\n jrapky: \"fqcjy3b\",\n t21cq0: [\"fibjyge\", \"f9yszdx\"]\n },\n square: {\n Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n Btl43ni: [\"f1ozlkrg\", \"f10ostut\"]\n }\n}, {\n d: [\".f6juhto{white-space:normal;}\", \".f1s2louj{align-items:start;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f17g0uqy{grid-template-columns:auto 1fr auto;}\", \".f1w7oly7{grid-template-areas:\\\"icon body actions\\\" \\\"secondaryActions secondaryActions secondaryActions\\\";}\", \".f1e8xxv9{justify-content:end;}\", \".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}\", \".fqcjy3b{margin-bottom:var(--spacingVerticalS);}\", \".fibjyge{margin-right:0px;}\", \".f9yszdx{margin-left:0px;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\"]\n});\nconst useIconIntentStyles = /*#__PURE__*/__styles({\n info: {},\n error: {\n sj55zd: \"f1ca9wz\"\n },\n warning: {\n sj55zd: \"f14a4cve\"\n },\n success: {\n sj55zd: \"f36rra6\"\n }\n}, {\n d: [\".f1ca9wz{color:var(--colorStatusDangerForeground1);}\", \".f14a4cve{color:var(--colorStatusWarningForeground3);}\", \".f36rra6{color:var(--colorStatusSuccessForeground1);}\"]\n});\nconst useRootIntentStyles = /*#__PURE__*/__styles({\n info: {},\n error: {\n De3pzq: \"f1eon7jj\",\n g2u3we: \"f1f8dvr7\",\n h3c5rm: [\"f1g1ijmo\", \"f1nxacbt\"],\n B9xav0g: \"fo25q1j\",\n zhjwy3: [\"f1nxacbt\", \"f1g1ijmo\"]\n },\n warning: {\n De3pzq: \"f13ftzij\",\n g2u3we: \"frd1ypx\",\n h3c5rm: [\"f1gyjrma\", \"f18qd5xz\"],\n B9xav0g: \"fqyqtrt\",\n zhjwy3: [\"f18qd5xz\", \"f1gyjrma\"]\n },\n success: {\n De3pzq: \"f64thcm\",\n g2u3we: \"f1b4u7v\",\n h3c5rm: [\"f1nyd2b1\", \"f70v3om\"],\n B9xav0g: \"fk173vo\",\n zhjwy3: [\"f70v3om\", \"f1nyd2b1\"]\n }\n}, {\n d: [\".f1eon7jj{background-color:var(--colorStatusDangerBackground1);}\", \".f1f8dvr7{border-top-color:var(--colorStatusDangerBorder1);}\", \".f1g1ijmo{border-right-color:var(--colorStatusDangerBorder1);}\", \".f1nxacbt{border-left-color:var(--colorStatusDangerBorder1);}\", \".fo25q1j{border-bottom-color:var(--colorStatusDangerBorder1);}\", \".f13ftzij{background-color:var(--colorStatusWarningBackground1);}\", \".frd1ypx{border-top-color:var(--colorStatusWarningBorder1);}\", \".f1gyjrma{border-right-color:var(--colorStatusWarningBorder1);}\", \".f18qd5xz{border-left-color:var(--colorStatusWarningBorder1);}\", \".fqyqtrt{border-bottom-color:var(--colorStatusWarningBorder1);}\", \".f64thcm{background-color:var(--colorStatusSuccessBackground1);}\", \".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}\", \".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}\", \".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}\", \".fk173vo{border-bottom-color:var(--colorStatusSuccessBorder1);}\"]\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = state => {\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n return state;\n};\n//# sourceMappingURL=useMessageBarStyles.styles.js.map"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","useRootBaseStyles","__resetStyles","useIconBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAwEAC,4BAA4B;eAA5BA;;;uBA1EqD;AAE3D,MAAMD,uBAAuB;IAClCE,MAAM;IACNC,MAAM;AACR;AACA,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,UAAU,WAAW;IAAC;IAAk8B;CAAm8B;AACh9D,MAAMC,oBAAoB,WAAW,GAAED,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAA8O;CAA2O;AACtiB,MAAME,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,eAAe;QACbC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,2BAA2B;QACzBC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAC,QAAQ;QACNC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;IACnC;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;QAAiC;QAAwD;QAAmD;QAAgH;QAAmC;QAAuD;QAAoD;QAA+B;QAA8B;QAA4C;QAA2C;QAAyC;KAAuC;AACrpB;AACA,MAAMC,sBAAsB,WAAW,GAAElB,IAAAA,eAAQ,EAAC;IAChDmB,MAAM,CAAC;IACPC,OAAO;QACLC,QAAQ;IACV;IACAC,SAAS;QACPD,QAAQ;IACV;IACAE,SAAS;QACPF,QAAQ;IACV;AACF,GAAG;IACDJ,GAAG;QAAC;QAAwD;QAA0D;KAAwD;AAChL;AACA,MAAMO,sBAAsB,WAAW,GAAExB,IAAAA,eAAQ,EAAC;IAChDmB,MAAM,CAAC;IACPC,OAAO;QACLK,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAP,SAAS;QACPG,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAN,SAAS;QACPE,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;IACjC;AACF,GAAG;IACDZ,GAAG;QAAC;QAAoE;QAAgE;QAAkE;QAAiE;QAAkE;QAAqE;QAAgE;QAAmE;QAAkE;QAAmE;QAAoE;QAAgE;QAAmE;QAAiE;KAAkE;AACt+B;AAIO,MAAMxB,+BAA+BqC,CAAAA;IAC1C,MAAMC,iBAAiBnC;IACvB,MAAMoC,iBAAiBlC;IACvB,MAAMmC,mBAAmBf;IACzB,MAAMgB,mBAAmBV;IACzB,MAAMW,SAASpC;IACf+B,MAAMpC,IAAI,CAAC0C,SAAS,GAAGC,IAAAA,mBAAY,EAAC7C,qBAAqBE,IAAI,EAAEqC,gBAAgBD,MAAMQ,MAAM,KAAK,eAAeH,OAAOlC,aAAa,EAAE6B,MAAMS,KAAK,KAAK,YAAYJ,OAAOvB,MAAM,EAAEsB,gBAAgB,CAACJ,MAAMU,MAAM,CAAC,EAAEV,MAAMW,mBAAmB,EAAEX,MAAMpC,IAAI,CAAC0C,SAAS;IAC/P,IAAIN,MAAMnC,IAAI,EAAE;QACdmC,MAAMnC,IAAI,CAACyC,SAAS,GAAGC,IAAAA,mBAAY,EAAC7C,qBAAqBG,IAAI,EAAEqC,gBAAgBC,gBAAgB,CAACH,MAAMU,MAAM,CAAC,EAAEV,MAAMnC,IAAI,CAACyC,SAAS;IACrI;IACA,OAAON;AACT,GACA,sDAAsD"}
1
+ {"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"rashqx\", \"ri1c0vc\", [\".rashqx{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\\\"icon body secondaryActions actions\\\";padding-left:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}\", \".ri1c0vc{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\\\"icon body secondaryActions actions\\\";padding-right:var(--spacingHorizontalM);border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}\"]);\nconst useIconBaseStyles = /*#__PURE__*/__resetStyles(\"r1bxgyar\", \"rv8i6h8\", [\".r1bxgyar{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}\", \".rv8i6h8{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}\"]);\nconst useReflowSpacerBaseStyles = /*#__PURE__*/__resetStyles(\"r1vx593n\", null, [\".r1vx593n{margin-bottom:var(--spacingVerticalS);grid-area:secondaryActions;}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n rootMultiline: {\n Huce71: \"f6juhto\",\n Bt984gj: \"f1s2louj\",\n z8tnut: \"f1ngh7ph\",\n Budl1dq: \"f17g0uqy\",\n zoa1oz: \"f1w7oly7\"\n },\n secondaryActionsMultiline: {\n Brf1p80: \"f1e8xxv9\",\n B6of3ja: \"f1gaxbfw\",\n jrapky: \"fqcjy3b\",\n t21cq0: [\"fibjyge\", \"f9yszdx\"]\n },\n square: {\n Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n Btl43ni: [\"f1ozlkrg\", \"f10ostut\"]\n }\n}, {\n d: [\".f6juhto{white-space:normal;}\", \".f1s2louj{align-items:start;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f17g0uqy{grid-template-columns:auto 1fr auto;}\", \".f1w7oly7{grid-template-areas:\\\"icon body actions\\\" \\\"secondaryActions secondaryActions secondaryActions\\\";}\", \".f1e8xxv9{justify-content:end;}\", \".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}\", \".fqcjy3b{margin-bottom:var(--spacingVerticalS);}\", \".fibjyge{margin-right:0px;}\", \".f9yszdx{margin-left:0px;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\"]\n});\nconst useIconIntentStyles = /*#__PURE__*/__styles({\n info: {},\n error: {\n sj55zd: \"f1ca9wz\"\n },\n warning: {\n sj55zd: \"f14a4cve\"\n },\n success: {\n sj55zd: \"f36rra6\"\n }\n}, {\n d: [\".f1ca9wz{color:var(--colorStatusDangerForeground1);}\", \".f14a4cve{color:var(--colorStatusWarningForeground3);}\", \".f36rra6{color:var(--colorStatusSuccessForeground1);}\"]\n});\nconst useRootIntentStyles = /*#__PURE__*/__styles({\n info: {},\n error: {\n De3pzq: \"f1eon7jj\",\n g2u3we: \"f1f8dvr7\",\n h3c5rm: [\"f1g1ijmo\", \"f1nxacbt\"],\n B9xav0g: \"fo25q1j\",\n zhjwy3: [\"f1nxacbt\", \"f1g1ijmo\"]\n },\n warning: {\n De3pzq: \"f13ftzij\",\n g2u3we: \"frd1ypx\",\n h3c5rm: [\"f1gyjrma\", \"f18qd5xz\"],\n B9xav0g: \"fqyqtrt\",\n zhjwy3: [\"f18qd5xz\", \"f1gyjrma\"]\n },\n success: {\n De3pzq: \"f64thcm\",\n g2u3we: \"f1b4u7v\",\n h3c5rm: [\"f1nyd2b1\", \"f70v3om\"],\n B9xav0g: \"fk173vo\",\n zhjwy3: [\"f70v3om\", \"f1nyd2b1\"]\n }\n}, {\n d: [\".f1eon7jj{background-color:var(--colorStatusDangerBackground1);}\", \".f1f8dvr7{border-top-color:var(--colorStatusDangerBorder1);}\", \".f1g1ijmo{border-right-color:var(--colorStatusDangerBorder1);}\", \".f1nxacbt{border-left-color:var(--colorStatusDangerBorder1);}\", \".fo25q1j{border-bottom-color:var(--colorStatusDangerBorder1);}\", \".f13ftzij{background-color:var(--colorStatusWarningBackground1);}\", \".frd1ypx{border-top-color:var(--colorStatusWarningBorder1);}\", \".f1gyjrma{border-right-color:var(--colorStatusWarningBorder1);}\", \".f18qd5xz{border-left-color:var(--colorStatusWarningBorder1);}\", \".fqyqtrt{border-bottom-color:var(--colorStatusWarningBorder1);}\", \".f64thcm{background-color:var(--colorStatusSuccessBackground1);}\", \".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}\", \".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}\", \".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}\", \".fk173vo{border-bottom-color:var(--colorStatusSuccessBorder1);}\"]\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = state => {\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n//# sourceMappingURL=useMessageBarStyles.styles.js.map"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","__resetStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IA0EAC,4BAA4B;eAA5BA;;;uBA5EqD;AAE3D,MAAMD,uBAAuB;IAClCE,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACtB;AACA,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,UAAU,WAAW;IAAC;IAAk8B;CAAm8B;AACh9D,MAAMC,oBAAoB,WAAW,GAAED,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAA8O;CAA2O;AACtiB,MAAME,4BAA4B,WAAW,GAAEF,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA+E;AAC/J,MAAMG,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,eAAe;QACbC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,2BAA2B;QACzBC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAC,QAAQ;QACNC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;IACnC;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;QAAiC;QAAwD;QAAmD;QAAgH;QAAmC;QAAuD;QAAoD;QAA+B;QAA8B;QAA4C;QAA2C;QAAyC;KAAuC;AACrpB;AACA,MAAMC,sBAAsB,WAAW,GAAElB,IAAAA,eAAQ,EAAC;IAChDmB,MAAM,CAAC;IACPC,OAAO;QACLC,QAAQ;IACV;IACAC,SAAS;QACPD,QAAQ;IACV;IACAE,SAAS;QACPF,QAAQ;IACV;AACF,GAAG;IACDJ,GAAG;QAAC;QAAwD;QAA0D;KAAwD;AAChL;AACA,MAAMO,sBAAsB,WAAW,GAAExB,IAAAA,eAAQ,EAAC;IAChDmB,MAAM,CAAC;IACPC,OAAO;QACLK,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAP,SAAS;QACPG,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAN,SAAS;QACPE,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;IACjC;AACF,GAAG;IACDZ,GAAG;QAAC;QAAoE;QAAgE;QAAkE;QAAiE;QAAkE;QAAqE;QAAgE;QAAmE;QAAkE;QAAmE;QAAoE;QAAgE;QAAmE;QAAiE;KAAkE;AACt+B;AAIO,MAAM1B,+BAA+BuC,CAAAA;IAC1C,MAAMC,iBAAiBpC;IACvB,MAAMqC,iBAAiBnC;IACvB,MAAMoC,mBAAmBf;IACzB,MAAMgB,mBAAmBV;IACzB,MAAMW,qBAAqBrC;IAC3B,MAAMsC,SAASrC;IACf+B,MAAMtC,IAAI,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,qBAAqBE,IAAI,EAAEuC,gBAAgBD,MAAMS,MAAM,KAAK,eAAeH,OAAOnC,aAAa,EAAE6B,MAAMU,KAAK,KAAK,YAAYJ,OAAOxB,MAAM,EAAEsB,gBAAgB,CAACJ,MAAMW,MAAM,CAAC,EAAEX,MAAMY,mBAAmB,EAAEZ,MAAMtC,IAAI,CAAC6C,SAAS;IAC/P,IAAIP,MAAMrC,IAAI,EAAE;QACdqC,MAAMrC,IAAI,CAAC4C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,qBAAqBG,IAAI,EAAEuC,gBAAgBC,gBAAgB,CAACH,MAAMW,MAAM,CAAC,EAAEX,MAAMrC,IAAI,CAAC4C,SAAS;IACrI;IACA,IAAIP,MAAMpC,kBAAkB,EAAE;QAC5BoC,MAAMpC,kBAAkB,CAAC2C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,qBAAqBI,kBAAkB,EAAEyC;IAC7F;IACA,OAAOL;AACT,GACA,sDAAsD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-message-bar",
3
- "version": "9.0.18",
3
+ "version": "9.0.20",
4
4
  "description": "Fluent UI MessageBar component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,12 +31,12 @@
31
31
  "@fluentui/scripts-tasks": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-button": "^9.3.67",
34
+ "@fluentui/react-button": "^9.3.69",
35
35
  "@fluentui/react-icons": "^2.0.224",
36
- "@fluentui/react-jsx-runtime": "^9.0.29",
36
+ "@fluentui/react-jsx-runtime": "^9.0.30",
37
37
  "@fluentui/react-shared-contexts": "^9.14.0",
38
38
  "@fluentui/react-theme": "^9.1.16",
39
- "@fluentui/react-utilities": "^9.18.0",
39
+ "@fluentui/react-utilities": "^9.18.1",
40
40
  "@griffel/react": "^1.5.14",
41
41
  "@swc/helpers": "^0.5.1",
42
42
  "react-transition-group": "^4.4.1"