npm - @fluentui/react-message-bar - Versions diffs - 9.6.23 → 9.7.1 - Mend

@fluentui/react-message-bar 9.6.23 → 9.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/lib/components/MessageBarBody/useMessageBarBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarBodyProps, MessageBarBodyState } from './MessageBarBody.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/*\n Create the state required to render MessageBarBody.\n \n The returned state can be modified with hooks such as useMessageBarBodyStyles_unstable,\n * before being passed to renderMessageBarBody_unstable.\n \n @param props - props from this instance of MessageBarBody\n * @param ref - reference to root HTMLElement of MessageBarBody\n */\nexport const useMessageBarBody_unstable = (\n props: MessageBarBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarBodyState => {\n const { bodyRef } = useMessageBarContext();\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, bodyRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["~~React","~~getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarBody_unstable","props","ref","bodyRef","components","root","always","elementType"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IACpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BM,KAAKJ,cAAcI,KAAKC;YACxB,GAAGF,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBody.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarBodyProps, MessageBarBodyState } from './MessageBarBody.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/*\n Create the state required to render MessageBarBody.\n \n The returned state can be modified with hooks such as useMessageBarBodyStyles_unstable,\n * before being passed to renderMessageBarBody_unstable.\n \n @param props - props from this instance of MessageBarBody\n * @param ref - reference to root HTMLElement of MessageBarBody\n */\nexport const useMessageBarBody_unstable = (\n props: MessageBarBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarBodyState => {\n const { bodyRef } = useMessageBarContext();\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, bodyRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarBody_unstable","props","ref","bodyRef","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IACpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BM,KAAKJ,cAAcI,KAAKC;YACxB,GAAGF,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js CHANGED Viewed

@@ -13,6 +13,7 @@ export const useMessageBarBodyStyles_unstable = state => {
   'use no memo';
   const rootBaseStyles = useRootBaseStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);
   return state;
 };

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM\n});\n/*\n Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGN,aAAA,0bAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;~~EAC1CE~~,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM\n});\n/*\n Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGN,aAAA,0bAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;EAC1C;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js CHANGED Viewed

@@ -14,6 +14,7 @@ const useRootBaseStyles = makeResetStyles({
  */ export const useMessageBarBodyStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseStyles = useRootBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);
     return state;
 };

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots> = {\n root: 'fui-MessageBarBody',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM,\n});\n\n/*\n Apply styling to the MessageBarBody slots based on the state\n */\nexport const useMessageBarBodyStyles_unstable = (state: MessageBarBodyState): MessageBarBodyState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","body1","gridArea","paddingRight","spacingHorizontalM","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBN,gBAAgB;IACxC,GAAGG,iBAAiBI,KAAK;IACzBC,UAAU;IACVC,cAAcP,OAAOQ,kBAAkB;AACzC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,iBAAiBP;~~IACvBM~~,MAAMP,IAAI,CAACS,SAAS,GAAGb,aAAaG,yBAAyBC,IAAI,EAAEQ,gBAAgBD,MAAMP,IAAI,CAACS,SAAS;IAEvG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots> = {\n root: 'fui-MessageBarBody',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM,\n});\n\n/*\n Apply styling to the MessageBarBody slots based on the state\n */\nexport const useMessageBarBodyStyles_unstable = (state: MessageBarBodyState): MessageBarBodyState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","body1","gridArea","paddingRight","spacingHorizontalM","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBN,gBAAgB;IACxC,GAAGG,iBAAiBI,KAAK;IACzBC,UAAU;IACVC,cAAcP,OAAOQ,kBAAkB;AACzC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,iBAAiBP;IACvB,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,GAAGb,aAAaG,yBAAyBC,IAAI,EAAEQ,gBAAgBD,MAAMP,IAAI,CAACS,SAAS;IAEvG,OAAOF;AACT,EAAE"}

package/lib/components/MessageBarGroup/MessageBarGroup.motions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/*\n A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n ({ animate }) => {\n const duration = motionTokens.durationGentle;\n\n return {\n enter:\n animate === 'both'\n ? // enter with slide and fade\n [fadeAtom({ direction: 'enter', duration }), slideAtom({ direction: 'enter', outY: '-100%', duration })]\n : [], // no enter motion\n\n // Always exit with a fade\n exit: fadeAtom({ direction: 'exit', duration }),\n };\n },\n);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","slideAtom","MessageBarMotion","animate","duration","durationGentle","enter","direction","outY","exit"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAC/E,SAASC,QAAQ,EAAEC,SAAS,QAAQ,4CAA4C;AAGhF;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmBH,wBAC9B,CAAC,EAAEI,OAAO,EAAE;IACV,MAAMC,WAAWN,aAAaO,cAAc;IAE5C,OAAO;QACLC,OACEH,YAAY,SAER;YAACH,SAAS;gBAAEO,WAAW;gBAASH;YAAS;YAAIH,UAAU;gBAAEM,WAAW;gBAASC,MAAM;gBAASJ;YAAS;SAAG,GACxG,EAAE;QAER,0BAA0B;QAC1BK,MAAMT,SAAS;YAAEO,WAAW;YAAQH;QAAS;IAC/C;AACF,GACA"}
1	+ {"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport type { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/*\n A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n ({ animate }) => {\n const duration = motionTokens.durationGentle;\n\n return {\n enter:\n animate === 'both'\n ? // enter with slide and fade\n [fadeAtom({ direction: 'enter', duration }), slideAtom({ direction: 'enter', outY: '-100%', duration })]\n : [], // no enter motion\n\n // Always exit with a fade\n exit: fadeAtom({ direction: 'exit', duration }),\n };\n },\n);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","slideAtom","MessageBarMotion","animate","duration","durationGentle","enter","direction","outY","exit"],"mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAC/E,SAASC,QAAQ,EAAEC,SAAS,QAAQ,4CAA4C;AAGhF;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmBH,wBAC9B,CAAC,EAAEI,OAAO,EAAE;IACV,MAAMC,WAAWN,aAAaO,cAAc;IAE5C,OAAO;QACLC,OACEH,YAAY,SAER;YAACH,SAAS;gBAAEO,WAAW;gBAASH;YAAS;YAAIH,UAAU;gBAAEM,WAAW;gBAASC,MAAM;gBAASJ;YAAS;SAAG,GACxG,EAAE;QAER,0BAA0B;QAC1BK,MAAMT,SAAS;YAAEO,WAAW;YAAQH;QAAS;IAC/C;AACF,GACA"}

package/lib/components/MessageBarGroup/MessageBarGroup.types.js CHANGED Viewed

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * State used in rendering MessageBarGroup
+ */ export { };

package/lib/components/MessageBarGroup/MessageBarGroup.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n root: Slot<'div'>;\n};\n\n/*\n MessageBarGroup Props\n /\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n children: React.ReactElement[] \| React.ReactElement;\n animate?: 'exit-only' \| 'both';\n};\n\n/\n State used in rendering MessageBarGroup\n /\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n Pick<MessageBarGroupProps, 'animate'> & {\n /* @deprecated property is unused; these CSS animations were replaced by motion components /\n enterStyles: string;\n /* @deprecated property is unused; these CSS animations were replaced by motion components */\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":[~~"React"~~],"mappings":"~~AACA~~,~~YAAYA~~,~~WAAW,QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n root: Slot<'div'>;\n};\n\n/*\n MessageBarGroup Props\n /\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n children: React.ReactElement[] \| React.ReactElement;\n animate?: 'exit-only' \| 'both';\n};\n\n/\n State used in rendering MessageBarGroup\n /\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n Pick<MessageBarGroupProps, 'animate'> & {\n /* @deprecated property is unused; these CSS animations were replaced by motion components /\n enterStyles: string;\n /* @deprecated property is unused; these CSS animations were replaced by motion components */\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAOI"}

package/lib/components/MessageBarTitle/useMessageBarTitle.js CHANGED Viewed

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useMessageBarContext } from '../../contexts/messageBarContext';
 /**

package/lib/components/MessageBarTitle/useMessageBarTitle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitle.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MessageBarTitleProps, MessageBarTitleState } from './MessageBarTitle.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/*\n Create the state required to render MessageBarTitle.\n \n The returned state can be modified with hooks such as useMessageBarTitleStyles_unstable,\n * before being passed to renderMessageBarTitle_unstable.\n \n @param props - props from this instance of MessageBarTitle\n * @param ref - reference to root HTMLElement of MessageBarTitle\n */\nexport const useMessageBarTitle_unstable = (\n props: MessageBarTitleProps,\n ref: React.Ref<HTMLElement>,\n): MessageBarTitleState => {\n const { titleId } = useMessageBarContext();\n\n return {\n components: {\n root: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('span', {\n ref,\n id: titleId,\n ...props,\n }),\n { elementType: 'span' },\n ),\n };\n};\n"],"names":["~~React","~~getIntrinsicElementProps","slot","useMessageBarContext","useMessageBarTitle_unstable","props","ref","titleId","components","root","always","id","elementType"],"mappings":"AAAA;~~AAEA~~,~~YAAYA~~,~~WAAW,QAAQ;AAC/B,SAASC,~~wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IAEpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,QAAQ;YAC/BK;YACAK,IAAIJ;YACJ,GAAGF,KAAK;QACV,IACA;YAAEO,aAAa;QAAO;IAE1B;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitle.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MessageBarTitleProps, MessageBarTitleState } from './MessageBarTitle.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/*\n Create the state required to render MessageBarTitle.\n \n The returned state can be modified with hooks such as useMessageBarTitleStyles_unstable,\n * before being passed to renderMessageBarTitle_unstable.\n \n @param props - props from this instance of MessageBarTitle\n * @param ref - reference to root HTMLElement of MessageBarTitle\n */\nexport const useMessageBarTitle_unstable = (\n props: MessageBarTitleProps,\n ref: React.Ref<HTMLElement>,\n): MessageBarTitleState => {\n const { titleId } = useMessageBarContext();\n\n return {\n components: {\n root: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('span', {\n ref,\n id: titleId,\n ...props,\n }),\n { elementType: 'span' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useMessageBarContext","useMessageBarTitle_unstable","props","ref","titleId","components","root","always","id","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IAEpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,QAAQ;YAC/BK;YACAK,IAAIJ;YACJ,GAAGF,KAAK;QACV,IACA;YAAEO,aAAa;QAAO;IAE1B;AACF,EAAE"}

package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.js CHANGED Viewed

@@ -16,6 +16,7 @@ export const useMessageBarTitleStyles_unstable = state => {
   'use no memo';
   const rootBaseStyles = useRootBaseStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
   return state;
 };

package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const messageBarTitleClassNames = {\n root: 'fui-MessageBarTitle'\n};\n/*\n Styles for the root slot\n / const useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1Strong,\n '::after': {\n content: '\" \"'\n }\n});\n/\n Apply styling to the MessageBarTitle slots based on the state\n */ export const useMessageBarTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGL,aAAA,oNAK7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;~~EAC1CE~~,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACzG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const messageBarTitleClassNames = {\n root: 'fui-MessageBarTitle'\n};\n/*\n Styles for the root slot\n / const useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1Strong,\n '::after': {\n content: '\" \"'\n }\n});\n/\n Apply styling to the MessageBarTitle slots based on the state\n */ export const useMessageBarTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGL,aAAA,oNAK7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;EAC1C;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACzG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js CHANGED Viewed

@@ -17,6 +17,7 @@ export const messageBarTitleClassNames = {
  */ export const useMessageBarTitleStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseStyles = useRootBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
     return state;
 };

package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\n\nexport const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots> = {\n root: 'fui-MessageBarTitle',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1Strong,\n '::after': {\n content: '\" \"',\n },\n});\n\n/\n Apply styling to the MessageBarTitle slots based on the state\n */\nexport const useMessageBarTitleStyles_unstable = (state: MessageBarTitleState): MessageBarTitleState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","body1Strong","content","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,gBAAgB,QAAQ,wBAAwB;AAIzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAoBL,gBAAgB;IACxC,GAAGE,iBAAiBI,WAAW;IAC/B,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,iBAAiBL;~~IACvBI~~,MAAML,IAAI,CAACO,SAAS,GAAGV,aAAaE,0BAA0BC,IAAI,EAAEM,gBAAgBD,MAAML,IAAI,CAACO,SAAS;IAExG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\n\nexport const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots> = {\n root: 'fui-MessageBarTitle',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1Strong,\n '::after': {\n content: '\" \"',\n },\n});\n\n/\n Apply styling to the MessageBarTitle slots based on the state\n */\nexport const useMessageBarTitleStyles_unstable = (state: MessageBarTitleState): MessageBarTitleState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","body1Strong","content","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,gBAAgB,QAAQ,wBAAwB;AAIzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAoBL,gBAAgB;IACxC,GAAGE,iBAAiBI,WAAW;IAC/B,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,iBAAiBL;IACvB,oDAAoD;IACpDI,MAAML,IAAI,CAACO,SAAS,GAAGV,aAAaE,0BAA0BC,IAAI,EAAEM,gBAAgBD,MAAML,IAAI,CAACO,SAAS;IAExG,OAAOF;AACT,EAAE"}

package/lib/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
-export { MessageBar, useMessageBarStyles_unstable, useMessageBar_unstable, useMessageBarContextValue_unstable, renderMessageBar_unstable, messageBarClassNames } from './MessageBar';
+export { MessageBar, useMessageBarStyles_unstable, useMessageBarBase_unstable, useMessageBar_unstable, useMessageBarContextValue_unstable, renderMessageBar_unstable, messageBarClassNames } from './MessageBar';
 export { MessageBarTitle, useMessageBarTitleStyles_unstable, useMessageBarTitle_unstable, renderMessageBarTitle_unstable, messageBarTitleClassNames } from './MessageBarTitle';
 export { MessageBarActions, useMessageBarActionsStyles_unstable, useMessageBarActions_unstable, renderMessageBarActions_unstable, useMessageBarActionsContextValue_unstable, messageBarActionsClassNames } from './MessageBarActions';
-export { MessageBarBody, useMessageBarBodyStyles_unstable, useMessageBarBody_unstable, renderMessageBarBody_unstable, messageBarBodyClassNames } from './MessageBarBody';
+export { MessageBarBody, useMessageBarBodyStyles_unstable, useMessageBarBody_unstable, useMessageBarBodyContextValues_unstable, renderMessageBarBody_unstable, messageBarBodyClassNames } from './MessageBarBody';
 export { MessageBarContextProvider, messageBarContextDefaultValue, messageBarTransitionContextDefaultValue, useMessageBarContext, MessageBarTransitionContextProvider, useMessageBarTransitionContext } from './contexts';
 export { MessageBarGroup, useMessageBarGroupStyles_unstable, useMessageBarGroup_unstable, renderMessageBarGroup_unstable, messageBarGroupClassNames } from './MessageBarGroup';

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n MessageBar,\n useMessageBarStyles_unstable,\n useMessageBar_unstable,\n useMessageBarContextValue_unstable,\n renderMessageBar_unstable,\n messageBarClassNames,\n} from './MessageBar';\n\nexport type {\n MessageBarProps,\n MessageBarSlots,\n MessageBarState,\n MessageBarIntent,\n MessageBarContextValues,\n} from './MessageBar';\n\nexport {\n MessageBarTitle,\n useMessageBarTitleStyles_unstable,\n useMessageBarTitle_unstable,\n renderMessageBarTitle_unstable,\n messageBarTitleClassNames,\n} from './MessageBarTitle';\n\nexport type { MessageBarTitleProps, MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle';\n\nexport {\n MessageBarActions,\n useMessageBarActionsStyles_unstable,\n useMessageBarActions_unstable,\n renderMessageBarActions_unstable,\n useMessageBarActionsContextValue_unstable,\n messageBarActionsClassNames,\n} from './MessageBarActions';\n\nexport type {\n MessageBarActionsProps,\n MessageBarActionsSlots,\n MessageBarActionsState,\n MessageBarActionsContextValues,\n} from './MessageBarActions';\n\nexport {\n MessageBarBody,\n useMessageBarBodyStyles_unstable,\n useMessageBarBody_unstable,\n renderMessageBarBody_unstable,\n messageBarBodyClassNames,\n} from './MessageBarBody';\n\nexport type { MessageBarBodyProps, MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody';\n\nexport {\n MessageBarContextProvider,\n messageBarContextDefaultValue,\n messageBarTransitionContextDefaultValue,\n useMessageBarContext,\n MessageBarTransitionContextProvider,\n useMessageBarTransitionContext,\n} from './contexts';\nexport type { MessageBarContextValue, MessageBarTransitionContextValue } from './contexts';\nexport {\n MessageBarGroup,\n useMessageBarGroupStyles_unstable,\n useMessageBarGroup_unstable,\n renderMessageBarGroup_unstable,\n messageBarGroupClassNames,\n} from './MessageBarGroup';\n\nexport type { MessageBarGroupProps, MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup';\n"],"names":["MessageBar","useMessageBarStyles_unstable","useMessageBar_unstable","useMessageBarContextValue_unstable","renderMessageBar_unstable","messageBarClassNames","MessageBarTitle","useMessageBarTitleStyles_unstable","useMessageBarTitle_unstable","renderMessageBarTitle_unstable","messageBarTitleClassNames","MessageBarActions","useMessageBarActionsStyles_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsContextValue_unstable","messageBarActionsClassNames","MessageBarBody","useMessageBarBodyStyles_unstable","useMessageBarBody_unstable","renderMessageBarBody_unstable","messageBarBodyClassNames","MessageBarContextProvider","messageBarContextDefaultValue","messageBarTransitionContextDefaultValue","useMessageBarContext","MessageBarTransitionContextProvider","useMessageBarTransitionContext","MessageBarGroup","useMessageBarGroupStyles_unstable","useMessageBarGroup_unstable","renderMessageBarGroup_unstable","messageBarGroupClassNames"],"mappings":"AAAA,SACEA,UAAU,EACVC,4BAA4B,EAC5BC,sBAAsB,EACtBC,kCAAkC,EAClCC,yBAAyB,EACzBC,oBAAoB,QACf,eAAe;~~AAUtB~~,SACEC,eAAe,EACfC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,yBAAyB,QACpB,oBAAoB;AAI3B,SACEC,iBAAiB,EACjBC,mCAAmC,EACnCC,6BAA6B,EAC7BC,gCAAgC,EAChCC,yCAAyC,EACzCC,2BAA2B,QACtB,sBAAsB;AAS7B,SACEC,cAAc,EACdC,gCAAgC,EAChCC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,wBAAwB,QACnB,mBAAmB;~~AAI1B~~,SACEC,yBAAyB,EACzBC,6BAA6B,EAC7BC,uCAAuC,EACvCC,oBAAoB,EACpBC,mCAAmC,EACnCC,8BAA8B,QACzB,aAAa;AAEpB,SACEC,eAAe,EACfC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,yBAAyB,QACpB,oBAAoB"}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n MessageBar,\n useMessageBarStyles_unstable,\n useMessageBarBase_unstable,\n useMessageBar_unstable,\n useMessageBarContextValue_unstable,\n renderMessageBar_unstable,\n messageBarClassNames,\n} from './MessageBar';\n\nexport type {\n MessageBarBaseProps,\n MessageBarBaseState,\n MessageBarProps,\n MessageBarSlots,\n MessageBarState,\n MessageBarIntent,\n MessageBarContextValues,\n} from './MessageBar';\n\nexport {\n MessageBarTitle,\n useMessageBarTitleStyles_unstable,\n useMessageBarTitle_unstable,\n renderMessageBarTitle_unstable,\n messageBarTitleClassNames,\n} from './MessageBarTitle';\n\nexport type { MessageBarTitleProps, MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle';\n\nexport {\n MessageBarActions,\n useMessageBarActionsStyles_unstable,\n useMessageBarActions_unstable,\n renderMessageBarActions_unstable,\n useMessageBarActionsContextValue_unstable,\n messageBarActionsClassNames,\n} from './MessageBarActions';\n\nexport type {\n MessageBarActionsProps,\n MessageBarActionsSlots,\n MessageBarActionsState,\n MessageBarActionsContextValues,\n} from './MessageBarActions';\n\nexport {\n MessageBarBody,\n useMessageBarBodyStyles_unstable,\n useMessageBarBody_unstable,\n useMessageBarBodyContextValues_unstable,\n renderMessageBarBody_unstable,\n messageBarBodyClassNames,\n} from './MessageBarBody';\n\nexport type {\n MessageBarBodyProps,\n MessageBarBodySlots,\n MessageBarBodyState,\n MessageBarBodyContextValues,\n} from './MessageBarBody';\n\nexport {\n MessageBarContextProvider,\n messageBarContextDefaultValue,\n messageBarTransitionContextDefaultValue,\n useMessageBarContext,\n MessageBarTransitionContextProvider,\n useMessageBarTransitionContext,\n} from './contexts';\nexport type { MessageBarContextValue, MessageBarTransitionContextValue } from './contexts';\nexport {\n MessageBarGroup,\n useMessageBarGroupStyles_unstable,\n useMessageBarGroup_unstable,\n renderMessageBarGroup_unstable,\n messageBarGroupClassNames,\n} from './MessageBarGroup';\n\nexport type { MessageBarGroupProps, MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup';\n"],"names":["MessageBar","useMessageBarStyles_unstable","useMessageBarBase_unstable","useMessageBar_unstable","useMessageBarContextValue_unstable","renderMessageBar_unstable","messageBarClassNames","MessageBarTitle","useMessageBarTitleStyles_unstable","useMessageBarTitle_unstable","renderMessageBarTitle_unstable","messageBarTitleClassNames","MessageBarActions","useMessageBarActionsStyles_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsContextValue_unstable","messageBarActionsClassNames","MessageBarBody","useMessageBarBodyStyles_unstable","useMessageBarBody_unstable","useMessageBarBodyContextValues_unstable","renderMessageBarBody_unstable","messageBarBodyClassNames","MessageBarContextProvider","messageBarContextDefaultValue","messageBarTransitionContextDefaultValue","useMessageBarContext","MessageBarTransitionContextProvider","useMessageBarTransitionContext","MessageBarGroup","useMessageBarGroupStyles_unstable","useMessageBarGroup_unstable","renderMessageBarGroup_unstable","messageBarGroupClassNames"],"mappings":"AAAA,SACEA,UAAU,EACVC,4BAA4B,EAC5BC,0BAA0B,EAC1BC,sBAAsB,EACtBC,kCAAkC,EAClCC,yBAAyB,EACzBC,oBAAoB,QACf,eAAe;AAYtB,SACEC,eAAe,EACfC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,yBAAyB,QACpB,oBAAoB;AAI3B,SACEC,iBAAiB,EACjBC,mCAAmC,EACnCC,6BAA6B,EAC7BC,gCAAgC,EAChCC,yCAAyC,EACzCC,2BAA2B,QACtB,sBAAsB;AAS7B,SACEC,cAAc,EACdC,gCAAgC,EAChCC,0BAA0B,EAC1BC,uCAAuC,EACvCC,6BAA6B,EAC7BC,wBAAwB,QACnB,mBAAmB;AAS1B,SACEC,yBAAyB,EACzBC,6BAA6B,EAC7BC,uCAAuC,EACvCC,oBAAoB,EACpBC,mCAAmC,EACnCC,8BAA8B,QACzB,aAAa;AAEpB,SACEC,eAAe,EACfC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,yBAAyB,QACpB,oBAAoB"}

package/lib-commonjs/MessageBar.js CHANGED Viewed

@@ -18,6 +18,9 @@ _export(exports, {
     renderMessageBar_unstable: function() {
         return _index.renderMessageBar_unstable;
     },
+    useMessageBarBase_unstable: function() {
+        return _index.useMessageBarBase_unstable;
+    },
     useMessageBarContextValue_unstable: function() {
         return _index.useMessageBarContextValue_unstable;
     },

package/lib-commonjs/MessageBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/MessageBar.ts"],"sourcesContent":["export type {\n MessageBarContextValues,\n MessageBarIntent,\n MessageBarProps,\n MessageBarSlots,\n MessageBarState,\n} from './components/MessageBar/index';\nexport {\n MessageBar,\n messageBarClassNames,\n renderMessageBar_unstable,\n useMessageBarContextValue_unstable,\n useMessageBarStyles_unstable,\n useMessageBar_unstable,\n} from './components/MessageBar/index';\n"],"names":["MessageBar","messageBarClassNames","renderMessageBar_unstable","useMessageBarContextValue_unstable","useMessageBarStyles_unstable","useMessageBar_unstable"],"mappings":";;;;;;;;;;;;~~eAQEA~~,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;~~eACzBC~~,yCAAkC;;;eAClCC,mCAA4B;;;~~eAC5BC~~,6BAAsB;;;uBACjB,gCAAgC"}
1	+ {"version":3,"sources":["../src/MessageBar.ts"],"sourcesContent":["export type {\n MessageBarBaseProps,\n MessageBarBaseState,\n MessageBarContextValues,\n MessageBarIntent,\n MessageBarProps,\n MessageBarSlots,\n MessageBarState,\n} from './components/MessageBar/index';\nexport {\n MessageBar,\n messageBarClassNames,\n renderMessageBar_unstable,\n useMessageBarContextValue_unstable,\n useMessageBarStyles_unstable,\n useMessageBarBase_unstable,\n useMessageBar_unstable,\n} from './components/MessageBar/index';\n"],"names":["MessageBar","messageBarClassNames","renderMessageBar_unstable","useMessageBarContextValue_unstable","useMessageBarStyles_unstable","useMessageBarBase_unstable","useMessageBar_unstable"],"mappings":";;;;;;;;;;;;eAUEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,yCAAkC;;;eAClCC,mCAA4B;;;eAE5BE,6BAAsB;;;uBACjB,gCAAgC"}

package/lib-commonjs/MessageBarBody.js CHANGED Viewed

@@ -18,6 +18,9 @@ _export(exports, {
     renderMessageBarBody_unstable: function() {
         return _index.renderMessageBarBody_unstable;
     },
+    useMessageBarBodyContextValues_unstable: function() {
+        return _index.useMessageBarBodyContextValues_unstable;
+    },
     useMessageBarBodyStyles_unstable: function() {
         return _index.useMessageBarBodyStyles_unstable;
     },

package/lib-commonjs/MessageBarBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/MessageBarBody.ts"],"sourcesContent":["export type {\n MessageBarBodyContextValues,\n MessageBarBodyProps,\n MessageBarBodySlots,\n MessageBarBodyState,\n} from './components/MessageBarBody/index';\nexport {\n MessageBarBody,\n messageBarBodyClassNames,\n renderMessageBarBody_unstable,\n useMessageBarBodyStyles_unstable,\n useMessageBarBody_unstable,\n} from './components/MessageBarBody/index';\n"],"names":["MessageBarBody","messageBarBodyClassNames","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBody_unstable"],"mappings":";;;;;;;;;;;;eAOEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;~~eAC7BC~~,uCAAgC;;;eAChCC,iCAA0B;;;~~uBACrB~~,oCAAoC"}
1	+ {"version":3,"sources":["../src/MessageBarBody.ts"],"sourcesContent":["export type {\n MessageBarBodyContextValues,\n MessageBarBodyProps,\n MessageBarBodySlots,\n MessageBarBodyState,\n} from './components/MessageBarBody/index';\nexport {\n MessageBarBody,\n messageBarBodyClassNames,\n renderMessageBarBody_unstable,\n useMessageBarBodyStyles_unstable,\n useMessageBarBody_unstable,\n useMessageBarBodyContextValues_unstable,\n} from './components/MessageBarBody/index';\n"],"names":["MessageBarBody","messageBarBodyClassNames","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBody_unstable","useMessageBarBodyContextValues_unstable"],"mappings":";;;;;;;;;;;;eAOEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAG7BG,8CAAuC;;;eAFvCF,uCAAgC;;;eAChCC,iCAA0B;;;uBAErB,oCAAoC"}

package/lib-commonjs/components/MessageBar/MessageBar.types.js CHANGED Viewed

@@ -1,6 +1,4 @@
-/**
- * State used in rendering MessageBar
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/MessageBar/MessageBar.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/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 /\n @deprecated Code is unused, replaced by motion components\n */\n transitionClassName: string;\n };\n"],"names":[],"mappings":"~~AA4CA;;CAEC,GACD,WAOI~~"}
1	+ {"version":3,"sources":["../src/components/MessageBar/MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, 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 /\n @deprecated Code is unused, replaced by motion components\n */\n transitionClassName: string;\n };\n\nexport type MessageBarBaseProps = DistributiveOmit<MessageBarProps, 'shape'>;\nexport type MessageBarBaseState = DistributiveOmit<MessageBarState, 'shape'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/MessageBar/getIntentIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/getIntentIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarProps } from './MessageBar.types';\nimport { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport function getIntentIcon(intent: MessageBarProps['intent']): JSXElement \| null {\n switch (intent) {\n case 'info':\n return <InfoFilled />;\n case 'warning':\n return <WarningFilled />;\n case 'error':\n return <DiamondDismissFilled />;\n case 'success':\n return <CheckmarkCircleFilled />;\n\n default:\n return null;\n }\n}\n"],"names":["React","CheckmarkCircleFilled","InfoFilled","WarningFilled","DiamondDismissFilled","getIntentIcon","intent"],"mappings":";;;;+BAKgBK;;;;;;;iEALO,QAAQ;4BAEwD,wBAAwB;AAGxG,uBAAuBC,MAAiC;IAC7D,OAAQA;QACN,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACJ,sBAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,yBAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,gCAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACH,iCAAAA,EAAAA;QAEV;YACE,OAAO;IACX;AACF"}
1	+ {"version":3,"sources":["../src/components/MessageBar/getIntentIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { MessageBarProps } from './MessageBar.types';\nimport { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport function getIntentIcon(intent: MessageBarProps['intent']): JSXElement \| null {\n switch (intent) {\n case 'info':\n return <InfoFilled />;\n case 'warning':\n return <WarningFilled />;\n case 'error':\n return <DiamondDismissFilled />;\n case 'success':\n return <CheckmarkCircleFilled />;\n\n default:\n return null;\n }\n}\n"],"names":["React","CheckmarkCircleFilled","InfoFilled","WarningFilled","DiamondDismissFilled","getIntentIcon","intent"],"mappings":";;;;+BAKgBK;;;;;;;iEALO,QAAQ;4BAEwD,wBAAwB;AAGxG,uBAAuBC,MAAiC;IAC7D,OAAQA;QACN,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACJ,sBAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,yBAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,gCAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACH,iCAAAA,EAAAA;QAEV;YACE,OAAO;IACX;AACF"}

package/lib-commonjs/components/MessageBar/index.js CHANGED Viewed

@@ -18,6 +18,9 @@ _export(exports, {
     renderMessageBar_unstable: function() {
         return _renderMessageBar.renderMessageBar_unstable;
     },
+    useMessageBarBase_unstable: function() {
+        return _useMessageBar.useMessageBarBase_unstable;
+    },
     useMessageBarContextValue_unstable: function() {
         return _useMessageBarContextValues.useMessageBarContextValue_unstable;
     },

package/lib-commonjs/components/MessageBar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n MessageBarContextValues,\n MessageBarIntent,\n MessageBarProps,\n MessageBarSlots,\n MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":"~~;;;;;;;;;;;;eAASA,sBAAU~~;;;~~eAUVG,+CAAoB;;;eAFpBF~~,2CAAyB;;;~~eAGzBI~~,8DAAkC;;;eADZD,uDAA4B;;;~~eADlDF~~,qCAAsB;;;~~4BATJ~~,eAAe;~~kCAQA~~,qBAAqB;+~~BACxB~~,kBAAkB;~~2CACU~~,+BAA+B;4CAC/C,+BAA+B"}
1	+ {"version":3,"sources":["../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n MessageBarBaseProps,\n MessageBarBaseState,\n MessageBarContextValues,\n MessageBarIntent,\n MessageBarProps,\n MessageBarSlots,\n MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBarBase_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":";;;;;;;;;;;IAASA;qCAAU;;IAYVI;8DAAoB;;;eAFpBH,2CAAyB;;;eACzBC,yCAA0B;;;eAE1BI,8DAAkC;;;eADZD,uDAA4B;;;eADtBF,qCAAsB;;;4BAXhC,eAAe;kCAUA,qBAAqB;+BACI,kBAAkB;2CAClB,+BAA+B;4CAC/C,+BAA+B"}

package/lib-commonjs/components/MessageBar/renderMessageBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;mCAGd,mCAAmC;AAKtE,kCAAkC,~~CAACC~~,~~OAAwBC~~;~~QAChEJ~~,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,4CAAAA,EAAAA;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,WAAA,OAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;gBACRJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,kBAAkB,EAAA,CAAA;;;;AAI9D,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBar/renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/\n Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (\n state: MessageBarBaseState,\n contexts: MessageBarContextValues,\n): JSXElement => {\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":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;mCAGd,mCAAmC;AAKtE,kCAAkC,CACvCC,OACAC;QAEAJ,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,4CAAAA,EAAAA;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,WAAA,OAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;gBACRJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,kBAAkB,EAAA,CAAA;;;;AAI9D,EAAE"}

package/lib-commonjs/components/MessageBar/useMessageBar.js CHANGED Viewed

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useMessageBar_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useMessageBarBase_unstable: function() {
+        return useMessageBarBase_unstable;
+    },
+    useMessageBar_unstable: function() {
         return useMessageBar_unstable;
     }
 });
@@ -17,8 +25,8 @@ const _getIntentIcon = require("./getIntentIcon");
 const _useMessageBarReflow = require("./useMessageBarReflow");
 const _messageBarTransitionContext = require("../../contexts/messageBarTransitionContext");
 const _reactmotion = require("@fluentui/react-motion");
-const useMessageBar_unstable = (props, ref)=>{
-    const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;
+const useMessageBarBase_unstable = (props, ref)=>{
+    const { layout = 'auto', intent = 'info', politeness } = props;
     const computedPoliteness = (politeness !== null && politeness !== void 0 ? politeness : intent === 'info') ? 'polite' : 'assertive';
     const autoReflow = layout === 'auto';
     const { ref: reflowRef, reflowing } = (0, _useMessageBarReflow.useMessageBarReflow)(autoReflow);
@@ -64,10 +72,7 @@ const useMessageBar_unstable = (props, ref)=>{
         }),
         icon: _reactutilities.slot.optional(props.icon, {
             renderByDefault: true,
-            elementType: 'div',
-            defaultProps: {
-                children: (0, _getIntentIcon.getIntentIcon)(intent)
-            }
+            elementType: 'div'
         }),
         bottomReflowSpacer: _reactutilities.slot.optional(props.bottomReflowSpacer, {
             renderByDefault: computedLayout === 'multiline',
@@ -78,7 +83,21 @@ const useMessageBar_unstable = (props, ref)=>{
         transitionClassName,
         actionsRef,
         bodyRef,
-        titleId,
-        shape
+        titleId
+    };
+};
+const useMessageBar_unstable = (props, ref)=>{
+    const { shape = 'rounded', ...baseProps } = props;
+    const state = useMessageBarBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        shape,
+        icon: _reactutilities.slot.optional(props.icon, {
+            defaultProps: {
+                children: (0, _getIntentIcon.getIntentIcon)(state.intent)
+            },
+            renderByDefault: true,
+            elementType: 'div'
+        })
     };
 };

package/lib-commonjs/components/MessageBar/useMessageBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } 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';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\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\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const motionRef = useMotionForwardedRef();\n\n const actionsRef = React.useRef<HTMLDivElement \| null>(null);\n const bodyRef = React.useRef<HTMLDivElement \| null>(null);\n const { announce } = useAnnounce();\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, motionRef),\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","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMotionForwardedRef","~~useMessageBar_unstable~~","props","ref","layout","intent","politeness","~~shape","~~computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","motionRef","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~~;;;;;+BAoBaU;;;;;;;iEAlBU~~,QAAQ;gCACsC,4BAA4B;qCACrE,kCAAkC;+BAEhC,kBAAkB;qCACZ,wBAAwB;6CACb,6CAA6C;6BACtD,yBAAyB;~~AAWxD,+BAA+B~~,~~CAACC~~,~~OAAwBC~~;~~IAC7D~~,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,~~EAAEC,QAAQ,SAAS,~~EAAE,~~GAAGL~~;~~IAC5E~~,~~MAAMM~~,~~qBAAqBF~~,CAAAA,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcD,WAAW,MAAA,CAAK,GAAI,WAAW;IACxE,~~MAAMI~~,~~aAAaL~~,WAAW;IAC9B,MAAM,EAAED,~~KAAKO~~,SAAS,EAAEC,SAAS,EAAE,~~OAAGb~~,wCAAAA,~~EAAoBW~~;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,~~eAAgBP~~;IAE/E,4DAA4D;IAC5D,MAAM,~~EAAES~~,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,~~OAAGhB~~,2DAAAA;IACpD,~~MAAMiB~~,~~YAAYhB~~,~~sCAAAA~~;IAElB,~~MAAMiB~~,~~aAAa1B~~,~~OAAM2B~~,MAAM,CAAwB;IACvD,MAAMC,~~UAAU5B~~,~~OAAM2B~~,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,~~OAAGxB~~,gCAAAA;IACrB,~~MAAMyB~~,~~cAAU3B~~,qBAAAA;IAEhBH,~~OAAM+B~~,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,cAAAA,CAAcJ,mBAAAA,QAAQK,OAAAA,AAAO,MAAA,QAAfL,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBM,WAAW;QAChD,MAAMC,iBAAAA,~~CAAiBT~~,~~sBAAAA~~,WAAWO,OAAAA,AAAO,MAAA,QAAlBP,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQvB,uBAAuB;YAAUwB,OAAOxB,uBAAuB;QAAY;IACzG,GAAG;QAACW;QAASF;QAAYG;QAAUZ;KAAmB;IAEtD,OAAO;QACLyB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,~~MAAMzC~~,oBAAAA,~~CAAK4C~~,MAAM,~~KACf7C~~,wCAAAA,EAAyB,OAAO;YAC9BW,SAAKR,6BAAAA,EAAcQ,~~KAAKO~~,WAAWK,SAASC;YAC5CsB,MAAM;YACN,mBAAmBjB;YACnB,~~GAAGnB~~,KAAK;QACV,IACA;~~YAAEqC~~,aAAa;QAAM;~~QAGvBJ~~,~~MAAM1C~~,oBAAAA,~~CAAK+C~~,QAAQ,~~CAACtC~~,~~MAAMiC~~,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;~~YACbG,cAAc~~;~~gBAAEC~~,~~cAAU9C~~,~~4BAAAA,EAAcQ;YAAQ;QAClD;QACA+B,oBAAoB3C,~~oBAAAA,~~CAAK+C~~,QAAQ,~~CAACtC~~,~~MAAMkC~~,kBAAkB,EAAE;YAC1DK,iBAAiB7B,mBAAmB;YACpC2B,aAAa;QACf;~~QACAnC~~,~~QAAQQ~~;~~QACRP~~;~~QACAS~~;QACAG;QACAE;QACAE;~~QACAd~~;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/*\n Create the base state required to render MessageBar without design-specific props.\n \n @param props - props from this instance of MessageBar (without shape)\n * @param ref - reference to root HTMLElement of MessageBar\n /\nexport const useMessageBarBase_unstable = (\n props: MessageBarBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarBaseState => {\n const { layout = 'auto', intent = 'info', politeness } = 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\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const motionRef = useMotionForwardedRef();\n\n const actionsRef = React.useRef<HTMLDivElement \| null>(null);\n const bodyRef = React.useRef<HTMLDivElement \| null>(null);\n const { announce } = useAnnounce();\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, motionRef),\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 }),\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 };\n};\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 { shape = 'rounded', ...baseProps } = props;\n\n const state = useMessageBarBase_unstable(baseProps, ref);\n\n return {\n ...state,\n shape,\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: getIntentIcon(state.intent),\n },\n renderByDefault: true,\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMotionForwardedRef","useMessageBarBase_unstable","props","ref","layout","intent","politeness","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","motionRef","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","useMessageBar_unstable","shape","baseProps","state","defaultProps","children"],"mappings":"AAAA;;;;;;;;;;;;IAiBaU,0BAAAA;;;0BAoEAwC;eAAAA;;;;iEAnFU,QAAQ;gCACsC,4BAA4B;qCACrE,kCAAkC;+BAEhC,kBAAkB;qCACZ,wBAAwB;6CACb,6CAA6C;6BACtD,yBAAyB;AAQxD,mCAAmC,CACxCvC,OACAC;IAEA,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAE,GAAGJ;IACzD,MAAMK,qBAAqBD,CAAAA,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcD,WAAW,MAAA,CAAK,GAAI,WAAW;IACxE,MAAMG,aAAaJ,WAAW;IAC9B,MAAM,EAAED,KAAKM,SAAS,EAAEC,SAAS,EAAE,OAAGZ,wCAAAA,EAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBN;IAE/E,4DAA4D;IAC5D,MAAM,EAAEQ,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,OAAGf,2DAAAA;IACpD,MAAMgB,gBAAYf,kCAAAA;IAElB,MAAMgB,aAAazB,OAAM0B,MAAM,CAAwB;IACvD,MAAMC,UAAU3B,OAAM0B,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,OAAGvB,gCAAAA;IACrB,MAAMwB,cAAU1B,qBAAAA;IAEhBH,OAAM8B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,cAAAA,CAAcJ,mBAAAA,QAAQK,OAAAA,AAAO,MAAA,QAAfL,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBM,WAAW;QAChD,MAAMC,iBAAAA,AAAiBT,uBAAAA,WAAWO,OAAAA,AAAO,MAAA,QAAlBP,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQvB,uBAAuB;YAAUwB,OAAOxB,uBAAuB;QAAY;IACzG,GAAG;QAACW;QAASF;QAAYG;QAAUZ;KAAmB;IAEtD,OAAO;QACLyB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMxC,oBAAAA,CAAK2C,MAAM,KACf5C,wCAAAA,EAAyB,OAAO;YAC9BW,SAAKR,6BAAAA,EAAcQ,KAAKM,WAAWK,SAASC;YAC5CsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAEvBJ,MAAMzC,oBAAAA,CAAK8C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;QACf;QACAH,oBAAoB1C,oBAAAA,CAAK8C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB7B,mBAAmB;YACpC2B,aAAa;QACf;QACAlC,QAAQO;QACRN;QACAQ;QACAG;QACAE;QACAE;IACF;AACF,EAAE;AAWK,+BAA+B,CAAClB,OAAwBC;IAC7D,MAAM,EAAEuC,QAAQ,SAAS,EAAE,GAAGC,WAAW,GAAGzC;IAE5C,MAAM0C,QAAQ3C,2BAA2B0C,WAAWxC;IAEpD,OAAO;QACL,GAAGyC,KAAK;QACRF;QACAR,MAAMzC,oBAAAA,CAAK8C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BW,cAAc;gBACZC,cAAUjD,4BAAAA,EAAc+C,MAAMvC,MAAM;YACtC;YACAmC,iBAAiB;YACjBF,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/MessageBar/useMessageBarContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/useMessageBarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MessageBarContextValues, MessageBarState } from './MessageBar.types';\n\nexport function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {\n const { layout, actionsRef, bodyRef, titleId } = state;\n\n const messageBarContext = React.useMemo(\n () => ({\n layout,\n actionsRef,\n bodyRef,\n titleId,\n }),\n [layout, actionsRef, bodyRef, titleId],\n );\n\n return {\n messageBar: messageBarContext,\n };\n}\n"],"names":["React","useMessageBarContextValue_unstable","state","layout","actionsRef","bodyRef","titleId","messageBarContext","useMemo","messageBar"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,mCAAmCC,KAAsB;IACvE,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAEjD,MAAMK,oBAAoBP,OAAMQ,OAAO,CACrC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACH;QAAQC;QAAYC;QAASC;KAAQ;IAGxC,OAAO;QACLG,YAAYF;IACd;AACF"}
1	+ {"version":3,"sources":["../src/components/MessageBar/useMessageBarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MessageBarContextValues, MessageBarState } from './MessageBar.types';\n\nexport function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {\n const { layout, actionsRef, bodyRef, titleId } = state;\n\n const messageBarContext = React.useMemo(\n () => ({\n layout,\n actionsRef,\n bodyRef,\n titleId,\n }),\n [layout, actionsRef, bodyRef, titleId],\n );\n\n return {\n messageBar: messageBarContext,\n };\n}\n"],"names":["React","useMessageBarContextValue_unstable","state","layout","actionsRef","bodyRef","titleId","messageBarContext","useMemo","messageBar"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,mCAAmCC,KAAsB;IACvE,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAEjD,MAAMK,oBAAoBP,OAAMQ,OAAO,CACrC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACH;QAAQC;QAAYC;QAASC;KAAQ;IAGxC,OAAO;QACLG,YAAYF;IACd;AACF"}

package/lib-commonjs/components/MessageBar/useMessageBarReflow.js CHANGED Viewed

@@ -88,6 +88,7 @@ function useMessageBarReflow(enabled = false) {
             (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
         };
     }, []);
+    // eslint-disable-next-line react-hooks/refs
     return {
         ref,
         reflowing: reflowingRef.current

package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false): {\n ref: React.RefCallback<HTMLElement>;\n reflowing: boolean;\n} {\n const { targetDocument } = useFluent();\n const forceUpdate = React.useReducer(() => ({}), {})[1];\n const reflowingRef = React.useRef(false);\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n const resizeObserverRef = React.useRef<ResizeObserver \| null>(null);\n const prevInlineSizeRef = React.useRef(-1);\n\n const handleResize: ResizeObserverCallback = React.useCallback(\n entries => {\n // Resize observer is only owned by this component - one resize observer entry expected\n // No need to support multiple fragments - one border box entry expected\n if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n 'useMessageBarReflow: Resize observer should only have one entry. ',\n 'If multiple entries are observed, the first entry will be used.',\n 'This is a bug, please report it to the Fluent UI team.',\n ].join(' '),\n );\n }\n\n const entry = entries[0];\n // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;\n\n if (inlineSize === undefined \|\| !entry) {\n return;\n }\n\n const { target } = entry;\n\n if (!isHTMLElement(target)) {\n return;\n }\n\n let nextReflowing: boolean \| undefined;\n\n // No easy way to really determine when the single line layout will fit\n // Just keep try to set single line layout as long as the size is growing\n // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n if (reflowingRef.current) {\n if (prevInlineSizeRef.current < inlineSize) {\n nextReflowing = false;\n }\n } else {\n const scrollWidth = target.scrollWidth;\n if (inlineSize < scrollWidth) {\n nextReflowing = true;\n }\n }\n\n prevInlineSizeRef.current = inlineSize;\n if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n reflowingRef.current = nextReflowing;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n const ref = React.useCallback(\n (el: HTMLElement \| null) => {\n if (!enabled \|\| !el \|\| !targetDocument?.defaultView) {\n return;\n }\n\n resizeObserverRef.current?.disconnect();\n\n const win = targetDocument.defaultView;\n const resizeObserver = new win.ResizeObserver(handleResize);\n resizeObserverRef.current = resizeObserver;\n resizeObserver.observe(el, { box: 'border-box' });\n },\n [targetDocument, handleResize, enabled],\n );\n\n React.useEffect(() => {\n return () => {\n resizeObserverRef.current?.disconnect();\n };\n }, []);\n\n return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","entry","process","env","NODE_ENV","length","console","error","join","inlineSize","borderBoxSize","target","getBoundingClientRect","width","undefined","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false): {\n ref: React.RefCallback<HTMLElement>;\n reflowing: boolean;\n} {\n const { targetDocument } = useFluent();\n const forceUpdate = React.useReducer(() => ({}), {})[1];\n const reflowingRef = React.useRef(false);\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n const resizeObserverRef = React.useRef<ResizeObserver \| null>(null);\n const prevInlineSizeRef = React.useRef(-1);\n\n const handleResize: ResizeObserverCallback = React.useCallback(\n entries => {\n // Resize observer is only owned by this component - one resize observer entry expected\n // No need to support multiple fragments - one border box entry expected\n if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n 'useMessageBarReflow: Resize observer should only have one entry. ',\n 'If multiple entries are observed, the first entry will be used.',\n 'This is a bug, please report it to the Fluent UI team.',\n ].join(' '),\n );\n }\n\n const entry = entries[0];\n // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;\n\n if (inlineSize === undefined \|\| !entry) {\n return;\n }\n\n const { target } = entry;\n\n if (!isHTMLElement(target)) {\n return;\n }\n\n let nextReflowing: boolean \| undefined;\n\n // No easy way to really determine when the single line layout will fit\n // Just keep try to set single line layout as long as the size is growing\n // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n if (reflowingRef.current) {\n if (prevInlineSizeRef.current < inlineSize) {\n nextReflowing = false;\n }\n } else {\n const scrollWidth = target.scrollWidth;\n if (inlineSize < scrollWidth) {\n nextReflowing = true;\n }\n }\n\n prevInlineSizeRef.current = inlineSize;\n if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n reflowingRef.current = nextReflowing;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n const ref = React.useCallback(\n (el: HTMLElement \| null) => {\n if (!enabled \|\| !el \|\| !targetDocument?.defaultView) {\n return;\n }\n\n resizeObserverRef.current?.disconnect();\n\n const win = targetDocument.defaultView;\n const resizeObserver = new win.ResizeObserver(handleResize);\n resizeObserverRef.current = resizeObserver;\n resizeObserver.observe(el, { box: 'border-box' });\n },\n [targetDocument, handleResize, enabled],\n );\n\n React.useEffect(() => {\n return () => {\n resizeObserverRef.current?.disconnect();\n };\n }, []);\n\n // eslint-disable-next-line react-hooks/refs\n return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","entry","process","env","NODE_ENV","length","console","error","join","inlineSize","borderBoxSize","target","getBoundingClientRect","width","undefined","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"mappings":"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"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js CHANGED Viewed

@@ -164,11 +164,14 @@ const useMessageBarStyles_unstable = (state)=>{
     const rootIntentStyles = useRootIntentStyles();
     const reflowSpacerStyles = useReflowSpacerBaseStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
     }
     if (state.bottomReflowSpacer) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
     }
     return state;

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n 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 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 'use no memo';\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.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"],"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","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,oBAAoB;;;~~gCAmFY;eAA5BuC;;;uBArFqD~~,gBAAgB;AAE/E,6BAA6B;IAChCtC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,EAAE,sBAAsB;IAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAazB,CAAC;AACF,MAAMU,iBAAiB,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAOzB,CAAC;AACF,MAAMW,yBAAyB,GAAA,WAAA,OAAGX,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGjC,CAAC;AACF,MAAMY,SAAS,GAAA,WAAA,~~GAAGX~~,~~mBAAA~~,EAAA;IAAAY,aAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,yBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAG/B,eAAA,EAAA;IAAAgC,IAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,OAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY3B,CAAC;AACF,MAAMQ,mBAAmB,GAAA,WAAA,OAAGrC,eAAA,EAAA;IAAAgC,IAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,OAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAN,OAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAb,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAe3B,CAAC;AAGS,sCAAsCe,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;IAC1C,MAAMsC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;IAC1C,MAAMsC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;IAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;IAC9C,MAAMY,kBAAkB,GAAGvC,yBAAyB,CAAC,CAAC;IACtD,MAAMwC,MAAM,GAAGvC,SAAS,CAAC,CAAC;~~IAC1BiC~~,KAAK,CAACvC,IAAI,CAAC8C,SAAS,OAAGlD,mBAAY,EAACG,oBAAoB,CAACC,IAAI,EAAEwC,cAAc,EAAED,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACtC,aAAa,EAAEgC,KAAK,CAACS,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAAC3B,MAAM,EAAEyB,gBAAgB,CAACJ,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACvC,IAAI,CAAC8C,SAAS,CAAC;IACrO,IAAIP,KAAK,CAACtC,IAAI,EAAE;~~QACZsC~~,KAAK,CAACtC,IAAI,CAAC6C,SAAS,OAAGlD,mBAAY,EAACG,oBAAoB,CAACE,IAAI,EAAEwC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;IACxI;IACA,IAAIP,KAAK,CAACrC,kBAAkB,EAAE;~~QAC1BqC~~,KAAK,CAACrC,kBAAkB,CAAC4C,SAAS,OAAGlD,mBAAY,EAACG,oBAAoB,CAACG,kBAAkB,EAAE0C,kBAAkB,CAAC;IAClH;IACA,OAAOL,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n 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 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 'use no memo';\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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n if (state.bottomReflowSpacer) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"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","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,oBAAoB;;;IAmFhBuC,4BAA4B;;;;uBArFyB,gBAAgB;AAE/E,6BAA6B;IAChCtC,IAAI,EAAE,gBAAgB;IACtBC,IAAI,EAAE,sBAAsB;IAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAazB,CAAC;AACF,MAAMU,iBAAiB,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAOzB,CAAC;AACF,MAAMW,yBAAyB,GAAA,WAAA,OAAGX,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGjC,CAAC;AACF,MAAMY,SAAS,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAY,aAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,yBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAG/B,eAAA,EAAA;IAAAgC,IAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,OAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY3B,CAAC;AACF,MAAMQ,mBAAmB,GAAA,WAAA,OAAGrC,eAAA,EAAA;IAAAgC,IAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,OAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAN,OAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAb,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAe3B,CAAC;AAGS,sCAAsCe,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;IAC1C,MAAMsC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;IAC1C,MAAMsC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;IAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;IAC9C,MAAMY,kBAAkB,GAAGvC,yBAAyB,CAAC,CAAC;IACtD,MAAMwC,MAAM,GAAGvC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiC,KAAK,CAACvC,IAAI,CAAC8C,SAAS,OAAGlD,mBAAY,EAACG,oBAAoB,CAACC,IAAI,EAAEwC,cAAc,EAAED,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACtC,aAAa,EAAEgC,KAAK,CAACS,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAAC3B,MAAM,EAAEyB,gBAAgB,CAACJ,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACvC,IAAI,CAAC8C,SAAS,CAAC;IACrO,IAAIP,KAAK,CAACtC,IAAI,EAAE;QACZ,oDAAA;QACAsC,KAAK,CAACtC,IAAI,CAAC6C,SAAS,OAAGlD,mBAAY,EAACG,oBAAoB,CAACE,IAAI,EAAEwC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;IACxI;IACA,IAAIP,KAAK,CAACrC,kBAAkB,EAAE;QAC1B,oDAAA;QACAqC,KAAK,CAACrC,kBAAkB,CAAC4C,SAAS,OAAGlD,mBAAY,EAACG,oBAAoB,CAACG,kBAAkB,EAAE0C,kBAAkB,CAAC;IAClH;IACA,OAAOL,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.js CHANGED Viewed

@@ -106,11 +106,14 @@ const useMessageBarStyles_unstable = (state)=>{
     const rootIntentStyles = useRootIntentStyles();
     const reflowSpacerStyles = useReflowSpacerBaseStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
     }
     if (state.bottomReflowSpacer) {
+        // eslint-disable-next-line react-hooks/immutability
         state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
     }
     return state;

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3,\n});\n\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions',\n});\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\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n },\n\n square: {\n borderRadius: '0',\n },\n});\n\nconst useIconIntentStyles = makeStyles({\n info: {\n /** already in base reset styles /\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground3,\n },\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n});\n\nconst useRootIntentStyles = makeStyles({\n info: {\n /* already in base reset styles /\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/\n Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n 'use no memo';\n\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\n state.root.className = mergeClasses(\n messageBarClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && styles.rootMultiline,\n state.shape === 'square' && styles.square,\n rootIntentStyles[state.intent],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n messageBarClassNames.icon,\n iconBaseStyles,\n iconIntentStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,oBAAAA;;;IA+FAyD,4BAAAA;;;;uBApGyD,iBAAiB;4BAChE,wBAAwB;AAIxC,6BAA8D;IACnExD,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,wBAAoBT,sBAAAA,EAAgB;IACxCU,YAAY;IACZC,SAAS;IACTC,qBAAqB;IACrBC,kBAAkB;IAClBC,mBAAmB;IACnBC,aAAaX,kBAAAA,CAAOY,kBAAkB;IACtCC,QAAQ,GAAGb,kBAAAA,CAAOc,eAAe,CAAC,OAAO,EAAEd,kBAAAA,CAAOe,mBAAmB,EAAE;IACvEC,cAAchB,kBAAAA,CAAOiB,kBAAkB;IACvCC,YAAY;IACZC,WAAW;IACXC,WAAW;IACXC,iBAAiBrB,kBAAAA,CAAOsB,uBAAuB;AACjD;AAEA,MAAMC,wBAAoB3B,sBAAAA,EAAgB;IACxC4B,UAAU;IACVC,UAAUzB,kBAAAA,CAAO0B,eAAe;IAChCC,aAAa3B,kBAAAA,CAAO4B,kBAAkB;IACtCC,OAAO7B,kBAAAA,CAAO8B,uBAAuB;IACrCvB,SAAS;IACTW,YAAY;AACd;AAEA,MAAMa,gCAA4BnC,sBAAAA,EAAgB;IAChDoC,cAAchC,kBAAAA,CAAOiC,gBAAgB;IACrCT,UAAU;AACZ;AAEA,MAAMU,gBAAYrC,iBAAAA,EAAW;IAC3BsC,eAAe;QACb7B,YAAY;QACZY,YAAY;QACZkB,YAAYpC,kBAAAA,CAAOqC,qBAAqB;QACxC7B,qBAAqB;QACrBE,mBAAmB,CAAC;;;IAGpB,CAAC;IACH;IAEA4B,2BAA2B;QACzBC,gBAAgB;QAChBC,WAAWxC,kBAAAA,CAAOqC,qBAAqB;QACvCL,cAAchC,kBAAAA,CAAOiC,gBAAgB;QACrCN,aAAa;IACf;IAEAc,QAAQ;QACNzB,cAAc;IAChB;AACF;AAEA,MAAM0B,0BAAsB7C,iBAAAA,EAAW;IACrC8C,MAAM,CAEN;IACAC,OAAO;QACLf,OAAO7B,kBAAAA,CAAO6C,4BAA4B;IAC5C;IACAC,SAAS;QACPjB,OAAO7B,kBAAAA,CAAO+C,6BAA6B;IAC7C;IACAC,SAAS;QACPnB,OAAO7B,kBAAAA,CAAOiD,6BAA6B;IAC7C;AACF;AAEA,MAAMC,0BAAsBrD,iBAAAA,EAAW;IACrC8C,MAAM,CAEN;IACAC,OAAO;QACLvB,iBAAiBrB,kBAAAA,CAAOmD,4BAA4B;QACpD,GAAGpD,iBAAAA,CAAWqD,WAAW,CAACpD,kBAAAA,CAAOqD,wBAAwB,CAAC;IAC5D;IACAP,SAAS;QACPzB,iBAAiBrB,kBAAAA,CAAOsD,6BAA6B;QACrD,GAAGvD,iBAAAA,CAAWqD,WAAW,CAACpD,kBAAAA,CAAOuD,yBAAyB,CAAC;IAC7D;IACAP,SAAS;QACP3B,iBAAiBrB,kBAAAA,CAAOwD,6BAA6B;QACrD,GAAGzD,iBAAAA,CAAWqD,WAAW,CAACpD,kBAAAA,CAAOyD,yBAAyB,CAAC;IAC7D;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,iBAAiBvD;IACvB,MAAMwD,iBAAiBtC;IACvB,MAAMuC,mBAAmBpB;IACzB,MAAMqB,mBAAmBb;IACzB,MAAMc,qBAAqBjC;IAC3B,MAAMkC,SAAS/B;~~IAEfyB~~,MAAMzD,IAAI,CAACgE,SAAS,OAAGpE,mBAAAA,EACrBG,qBAAqBC,IAAI,EACzB0D,gBACAD,MAAMQ,MAAM,KAAK,eAAeF,OAAO9B,aAAa,EACpDwB,MAAMS,KAAK,KAAK,YAAYH,OAAOxB,MAAM,EACzCsB,gBAAgB,CAACJ,MAAMU,MAAM,CAAC,EAC9BV,MAAMzD,IAAI,CAACgE,SAAS;IAGtB,IAAIP,MAAMxD,IAAI,EAAE;~~QACdwD~~,MAAMxD,IAAI,CAAC+D,SAAS,OAAGpE,mBAAAA,EACrBG,qBAAqBE,IAAI,EACzB0D,gBACAC,gBAAgB,CAACH,MAAMU,MAAM,CAAC,EAC9BV,MAAMxD,IAAI,CAAC+D,SAAS;IAExB;IAEA,IAAIP,MAAMvD,kBAAkB,EAAE;~~QAC5BuD~~,MAAMvD,kBAAkB,CAAC8D,SAAS,OAAGpE,mBAAAA,EAAaG,qBAAqBG,kBAAkB,EAAE4D;IAC7F;IAEA,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3,\n});\n\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions',\n});\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\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n },\n\n square: {\n borderRadius: '0',\n },\n});\n\nconst useIconIntentStyles = makeStyles({\n info: {\n /** already in base reset styles /\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground3,\n },\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n});\n\nconst useRootIntentStyles = makeStyles({\n info: {\n /* already in base reset styles /\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/\n Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n 'use no memo';\n\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\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n messageBarClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && styles.rootMultiline,\n state.shape === 'square' && styles.square,\n rootIntentStyles[state.intent],\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n messageBarClassNames.icon,\n iconBaseStyles,\n iconIntentStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.bottomReflowSpacer) {\n // eslint-disable-next-line react-hooks/immutability\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent"],"mappings":"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"}

package/lib-commonjs/components/MessageBarActions/useMessageBarActions.js CHANGED Viewed

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useMessageBarActions_unstable", {
         return useMessageBarActions_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _messageBarContext = require("../../contexts/messageBarContext");
 const useMessageBarActions_unstable = (props, ref)=>{