@fluentui/react-message-bar 9.2.18 → 9.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -2
- package/dist/index.d.ts +9 -1
- package/lib/components/MessageBar/MessageBar.types.js.map +1 -1
- package/lib/components/MessageBar/useMessageBar.js +1 -0
- package/lib/components/MessageBar/useMessageBar.js.map +1 -1
- package/lib/components/MessageBar/useMessageBarReflow.js +62 -64
- package/lib/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/lib/components/MessageBar/useMessageBarStyles.styles.js +1 -1
- package/lib/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
- package/lib/components/MessageBarGroup/MessageBarGroup.motions.js +78 -0
- package/lib/components/MessageBarGroup/MessageBarGroup.motions.js.map +1 -0
- package/lib/components/MessageBarGroup/MessageBarGroup.types.js.map +1 -1
- package/lib/components/MessageBarGroup/renderMessageBarGroup.js +4 -7
- package/lib/components/MessageBarGroup/renderMessageBarGroup.js.map +1 -1
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js +1 -23
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map +1 -1
- package/lib/contexts/messageBarTransitionContext.js +1 -1
- package/lib/contexts/messageBarTransitionContext.js.map +1 -1
- package/lib-commonjs/components/MessageBar/MessageBar.types.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBar.js +1 -0
- package/lib-commonjs/components/MessageBar/useMessageBar.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js +61 -63
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.motions.js +83 -0
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.motions.js.map +1 -0
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.types.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js +4 -7
- package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js +0 -28
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/messageBarTransitionContext.js.map +1 -1
- package/package.json +7 -6
- package/lib/components/MessageBarGroup/MessageBarTransition.js +0 -45
- package/lib/components/MessageBarGroup/MessageBarTransition.js.map +0 -1
- package/lib-commonjs/components/MessageBarGroup/MessageBarTransition.js +0 -53
- package/lib-commonjs/components/MessageBarGroup/MessageBarTransition.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-message-bar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 08 Jan 2025 18:29:13 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.3.0)
|
|
8
|
+
|
|
9
|
+
Wed, 08 Jan 2025 18:29:13 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.19..@fluentui/react-message-bar_v9.3.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- refactor(MessageBar): migrate slide & fade to motion components ([PR #33465](https://github.com/microsoft/fluentui/pull/33465) by robertpenner@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-button to v9.3.99 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
17
|
+
- Bump @fluentui/react-motion to v9.6.6 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion-components-preview to v0.4.2 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
19
|
+
- Bump @fluentui/react-link to v9.3.6 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.19)
|
|
22
|
+
|
|
23
|
+
Thu, 19 Dec 2024 14:30:56 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.18..@fluentui/react-message-bar_v9.2.19)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- fix: MessageBar auto reflow should handle document reflow with `min-content` ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by lingfangao@hotmail.com)
|
|
29
|
+
|
|
7
30
|
## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.18)
|
|
8
31
|
|
|
9
|
-
Mon, 16 Dec 2024 16:
|
|
32
|
+
Mon, 16 Dec 2024 16:26:49 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.17..@fluentui/react-message-bar_v9.2.18)
|
|
11
34
|
|
|
12
35
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -114,7 +114,9 @@ export declare type MessageBarGroupSlots = {
|
|
|
114
114
|
* State used in rendering MessageBarGroup
|
|
115
115
|
*/
|
|
116
116
|
export declare type MessageBarGroupState = ComponentState<MessageBarGroupSlots> & Pick<MessageBarGroupProps, 'animate'> & {
|
|
117
|
+
/** @deprecated property is unused; these CSS animations were replaced by motion components */
|
|
117
118
|
enterStyles: string;
|
|
119
|
+
/** @deprecated property is unused; these CSS animations were replaced by motion components */
|
|
118
120
|
exitStyles: string;
|
|
119
121
|
children: React_2.ReactElement[];
|
|
120
122
|
};
|
|
@@ -159,6 +161,9 @@ export declare type MessageBarSlots = {
|
|
|
159
161
|
* State used in rendering MessageBar
|
|
160
162
|
*/
|
|
161
163
|
export declare type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> & Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
|
|
164
|
+
/**
|
|
165
|
+
* @deprecated Code is unused, replaced by motion components
|
|
166
|
+
*/
|
|
162
167
|
transitionClassName: string;
|
|
163
168
|
};
|
|
164
169
|
|
|
@@ -189,12 +194,15 @@ export declare type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;
|
|
|
189
194
|
export declare const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue;
|
|
190
195
|
|
|
191
196
|
/**
|
|
192
|
-
* Context to pass animation
|
|
197
|
+
* Context to pass nodeRef for animation to MessageBar components
|
|
193
198
|
* @internal
|
|
194
199
|
*/
|
|
195
200
|
export declare const MessageBarTransitionContextProvider: React_2.Provider<MessageBarTransitionContextValue | undefined>;
|
|
196
201
|
|
|
197
202
|
export declare type MessageBarTransitionContextValue = {
|
|
203
|
+
/**
|
|
204
|
+
* @deprecated CSS className is no longer used for this transition, replaced by motion components
|
|
205
|
+
*/
|
|
198
206
|
className: string;
|
|
199
207
|
nodeRef: React_2.Ref<HTMLDivElement | null>;
|
|
200
208
|
};
|
|
@@ -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 transitionClassName: string;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,
|
|
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":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,WAOI"}
|
|
@@ -18,6 +18,7 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
|
|
|
18
18
|
const autoReflow = layout === 'auto';
|
|
19
19
|
const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);
|
|
20
20
|
const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
|
|
21
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
21
22
|
const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();
|
|
22
23
|
const actionsRef = React.useRef(null);
|
|
23
24
|
const bodyRef = React.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * 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';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef<HTMLDivElement | null>(null);\n const bodyRef = React.useRef<HTMLDivElement | null>(null);\n const { announce } = useAnnounce();\n const titleId = useId();\n\n React.useEffect(() => {\n const bodyMessage = bodyRef.current?.textContent;\n const actionsMessage = actionsRef.current?.textContent;\n\n const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n return {\n components: {\n root: 'div',\n icon: 'div',\n bottomReflowSpacer: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: { children: getIntentIcon(intent) },\n }),\n bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n renderByDefault: computedLayout === 'multiline',\n elementType: 'div',\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * 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';\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 // eslint-disable-next-line deprecation/deprecation\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef<HTMLDivElement | null>(null);\n const bodyRef = React.useRef<HTMLDivElement | null>(null);\n const { announce } = useAnnounce();\n const titleId = useId();\n\n React.useEffect(() => {\n const bodyMessage = bodyRef.current?.textContent;\n const actionsMessage = actionsRef.current?.textContent;\n\n const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n return {\n components: {\n root: 'div',\n icon: 'div',\n bottomReflowSpacer: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: { children: getIntentIcon(intent) },\n }),\n bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n renderByDefault: computedLayout === 'multiline',\n elementType: 'div',\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,4BAA4B;AACjG,SAASC,WAAW,QAAQ,kCAAkC;AAE9D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,mDAAmD;IACnD,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,aAAaxB,MAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,MAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAUzB;IAEhBH,MAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,eAAcJ,mBAAAA,QAAQK,OAAO,cAAfL,uCAAAA,iBAAiBM,WAAW;QAChD,MAAMC,kBAAiBT,sBAAAA,WAAWO,OAAO,cAAlBP,0CAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMvC,KAAK0C,MAAM,CACf3C,yBAAyB,OAAO;YAC9BU,KAAKP,cAAcO,KAAKO,WAAWK;YACnCsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAGvBJ,MAAMxC,KAAK6C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU5C,cAAcO;YAAQ;QAClD;QACA8B,oBAAoBzC,KAAK6C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB5B,mBAAmB;YACpC0B,aAAa;QACf;QACAlC,QAAQQ;QACRP;QACAS;QACAE;QACAE;QACAE;QACAb;IACF;AACF,EAAE"}
|
|
@@ -1,83 +1,81 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
-
import {
|
|
3
|
+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
4
|
export function useMessageBarReflow(enabled = false) {
|
|
5
5
|
const { targetDocument } = useFluent();
|
|
6
|
-
const forceUpdate = React.useReducer(()=>({}), {})[1];
|
|
7
|
-
const reflowingRef = React.useRef(false);
|
|
8
|
-
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
9
|
-
const resizeObserverRef = React.useRef(null);
|
|
10
6
|
const prevInlineSizeRef = React.useRef(-1);
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
console.error([
|
|
18
|
-
'useMessageBarReflow: Resize observer should only have one entry. ',
|
|
19
|
-
'If multiple entries are observed, the first entry will be used.',
|
|
20
|
-
'This is a bug, please report it to the Fluent UI team.'
|
|
21
|
-
].join(' '));
|
|
22
|
-
}
|
|
23
|
-
const entry = entries[0];
|
|
24
|
-
var _entry_borderBoxSize__inlineSize;
|
|
25
|
-
// `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
|
|
26
|
-
const inlineSize = (_entry_borderBoxSize__inlineSize = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
|
|
27
|
-
if (inlineSize === undefined || !entry) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
const { target } = entry;
|
|
31
|
-
if (!isHTMLElement(target)) {
|
|
7
|
+
const messageBarRef = React.useRef(null);
|
|
8
|
+
const [reflowing, setReflowing] = React.useState(false);
|
|
9
|
+
// This layout effect 'sanity checks' what observers have done
|
|
10
|
+
// since DOM has not been flushed when observers run
|
|
11
|
+
useIsomorphicLayoutEffect(()=>{
|
|
12
|
+
if (!messageBarRef.current) {
|
|
32
13
|
return;
|
|
33
14
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
// Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
|
|
38
|
-
if (reflowingRef.current) {
|
|
39
|
-
if (prevInlineSizeRef.current < inlineSize) {
|
|
40
|
-
nextReflowing = false;
|
|
41
|
-
}
|
|
42
|
-
} else {
|
|
43
|
-
const scrollWidth = target.scrollWidth;
|
|
44
|
-
if (inlineSize < scrollWidth) {
|
|
45
|
-
nextReflowing = true;
|
|
15
|
+
setReflowing((prevReflowing)=>{
|
|
16
|
+
if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
|
|
17
|
+
return true;
|
|
46
18
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
|
|
50
|
-
reflowingRef.current = nextReflowing;
|
|
51
|
-
forceUpdate();
|
|
52
|
-
}
|
|
19
|
+
return prevReflowing;
|
|
20
|
+
});
|
|
53
21
|
}, [
|
|
54
|
-
|
|
22
|
+
reflowing
|
|
55
23
|
]);
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
24
|
+
const handleResize = React.useCallback(()=>{
|
|
25
|
+
if (!messageBarRef.current) {
|
|
59
26
|
return;
|
|
60
27
|
}
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
28
|
+
const inlineSize = messageBarRef.current.getBoundingClientRect().width;
|
|
29
|
+
const scrollWidth = messageBarRef.current.scrollWidth;
|
|
30
|
+
const expanding = prevInlineSizeRef.current < inlineSize;
|
|
31
|
+
const overflowing = inlineSize < scrollWidth;
|
|
32
|
+
setReflowing(!expanding || overflowing);
|
|
33
|
+
}, []);
|
|
34
|
+
const handleIntersection = React.useCallback((entries)=>{
|
|
35
|
+
if (entries[0].intersectionRatio < 1) {
|
|
36
|
+
setReflowing(true);
|
|
37
|
+
}
|
|
38
|
+
}, []);
|
|
39
|
+
const ref = React.useMemo(()=>{
|
|
40
|
+
let resizeObserver = null;
|
|
41
|
+
let intersectionObserer = null;
|
|
42
|
+
return (el)=>{
|
|
43
|
+
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
44
|
+
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
45
|
+
intersectionObserer === null || intersectionObserer === void 0 ? void 0 : intersectionObserer.disconnect();
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
messageBarRef.current = el;
|
|
49
|
+
const win = targetDocument.defaultView;
|
|
50
|
+
resizeObserver = new win.ResizeObserver(handleResize);
|
|
51
|
+
intersectionObserer = new win.IntersectionObserver(handleIntersection, {
|
|
52
|
+
threshold: 1
|
|
53
|
+
});
|
|
54
|
+
intersectionObserer.observe(el);
|
|
55
|
+
resizeObserver.observe(el, {
|
|
56
|
+
box: 'border-box'
|
|
57
|
+
});
|
|
58
|
+
};
|
|
68
59
|
}, [
|
|
69
|
-
targetDocument,
|
|
70
60
|
handleResize,
|
|
71
|
-
|
|
61
|
+
handleIntersection,
|
|
62
|
+
enabled,
|
|
63
|
+
targetDocument
|
|
72
64
|
]);
|
|
73
|
-
React.useEffect(()=>{
|
|
74
|
-
return ()=>{
|
|
75
|
-
var _resizeObserverRef_current;
|
|
76
|
-
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
77
|
-
};
|
|
78
|
-
}, []);
|
|
79
65
|
return {
|
|
80
66
|
ref,
|
|
81
|
-
reflowing
|
|
67
|
+
reflowing
|
|
82
68
|
};
|
|
83
69
|
}
|
|
70
|
+
const isReflowing = (el)=>{
|
|
71
|
+
return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
|
|
72
|
+
};
|
|
73
|
+
const isFullyInViewport = (el)=>{
|
|
74
|
+
const rect = el.getBoundingClientRect();
|
|
75
|
+
const doc = el.ownerDocument;
|
|
76
|
+
const win = doc.defaultView;
|
|
77
|
+
if (!win) {
|
|
78
|
+
return true;
|
|
79
|
+
}
|
|
80
|
+
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && rect.right <= (win.innerWidth || doc.documentElement.clientWidth);
|
|
81
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const prevInlineSizeRef = React.useRef(-1);\n const messageBarRef = React.useRef<HTMLElement | null>(null);\n\n const [reflowing, setReflowing] = React.useState(false);\n\n // This layout effect 'sanity checks' what observers have done\n // since DOM has not been flushed when observers run\n useIsomorphicLayoutEffect(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n setReflowing(prevReflowing => {\n if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {\n return true;\n }\n\n return prevReflowing;\n });\n }, [reflowing]);\n\n const handleResize: ResizeObserverCallback = React.useCallback(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n const inlineSize = messageBarRef.current.getBoundingClientRect().width;\n const scrollWidth = messageBarRef.current.scrollWidth;\n\n const expanding = prevInlineSizeRef.current < inlineSize;\n const overflowing = inlineSize < scrollWidth;\n\n setReflowing(!expanding || overflowing);\n }, []);\n\n const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => {\n if (entries[0].intersectionRatio < 1) {\n setReflowing(true);\n }\n }, []);\n\n const ref = React.useMemo(() => {\n let resizeObserver: ResizeObserver | null = null;\n let intersectionObserer: IntersectionObserver | null = null;\n\n return (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n resizeObserver?.disconnect();\n intersectionObserer?.disconnect();\n return;\n }\n\n messageBarRef.current = el;\n\n const win = targetDocument.defaultView;\n resizeObserver = new win.ResizeObserver(handleResize);\n intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 });\n\n intersectionObserer.observe(el);\n resizeObserver.observe(el, { box: 'border-box' });\n };\n }, [handleResize, handleIntersection, enabled, targetDocument]);\n\n return { ref, reflowing };\n}\n\nconst isReflowing = (el: HTMLElement) => {\n return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);\n};\n\nconst isFullyInViewport = (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const doc = el.ownerDocument;\n const win = doc.defaultView;\n\n if (!win) {\n return true;\n }\n\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&\n rect.right <= (win.innerWidth || doc.documentElement.clientWidth)\n );\n};\n"],"names":["React","useFluent_unstable","useFluent","useIsomorphicLayoutEffect","useMessageBarReflow","enabled","targetDocument","prevInlineSizeRef","useRef","messageBarRef","reflowing","setReflowing","useState","current","prevReflowing","isReflowing","handleResize","useCallback","inlineSize","getBoundingClientRect","width","scrollWidth","expanding","overflowing","handleIntersection","entries","intersectionRatio","ref","useMemo","resizeObserver","intersectionObserer","el","defaultView","disconnect","win","ResizeObserver","IntersectionObserver","threshold","observe","box","offsetWidth","isFullyInViewport","rect","doc","ownerDocument","top","left","bottom","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,oBAAoBP,MAAMQ,MAAM,CAAC,CAAC;IACxC,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAqB;IAEvD,MAAM,CAACE,WAAWC,aAAa,GAAGX,MAAMY,QAAQ,CAAC;IAEjD,8DAA8D;IAC9D,oDAAoD;IACpDT,0BAA0B;QACxB,IAAI,CAACM,cAAcI,OAAO,EAAE;YAC1B;QACF;QAEAF,aAAaG,CAAAA;YACX,IAAI,CAACA,iBAAiBL,cAAcI,OAAO,IAAIE,YAAYN,cAAcI,OAAO,GAAG;gBACjF,OAAO;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACJ;KAAU;IAEd,MAAMM,eAAuChB,MAAMiB,WAAW,CAAC;QAC7D,IAAI,CAACR,cAAcI,OAAO,EAAE;YAC1B;QACF;QAEA,MAAMK,aAAaT,cAAcI,OAAO,CAACM,qBAAqB,GAAGC,KAAK;QACtE,MAAMC,cAAcZ,cAAcI,OAAO,CAACQ,WAAW;QAErD,MAAMC,YAAYf,kBAAkBM,OAAO,GAAGK;QAC9C,MAAMK,cAAcL,aAAaG;QAEjCV,aAAa,CAACW,aAAaC;IAC7B,GAAG,EAAE;IAEL,MAAMC,qBAAmDxB,MAAMiB,WAAW,CAACQ,CAAAA;QACzE,IAAIA,OAAO,CAAC,EAAE,CAACC,iBAAiB,GAAG,GAAG;YACpCf,aAAa;QACf;IACF,GAAG,EAAE;IAEL,MAAMgB,MAAM3B,MAAM4B,OAAO,CAAC;QACxB,IAAIC,iBAAwC;QAC5C,IAAIC,sBAAmD;QAEvD,OAAO,CAACC;YACN,IAAI,CAAC1B,WAAW,CAAC0B,MAAM,EAACzB,2BAAAA,qCAAAA,eAAgB0B,WAAW,GAAE;gBACnDH,2BAAAA,qCAAAA,eAAgBI,UAAU;gBAC1BH,gCAAAA,0CAAAA,oBAAqBG,UAAU;gBAC/B;YACF;YAEAxB,cAAcI,OAAO,GAAGkB;YAExB,MAAMG,MAAM5B,eAAe0B,WAAW;YACtCH,iBAAiB,IAAIK,IAAIC,cAAc,CAACnB;YACxCc,sBAAsB,IAAII,IAAIE,oBAAoB,CAACZ,oBAAoB;gBAAEa,WAAW;YAAE;YAEtFP,oBAAoBQ,OAAO,CAACP;YAC5BF,eAAeS,OAAO,CAACP,IAAI;gBAAEQ,KAAK;YAAa;QACjD;IACF,GAAG;QAACvB;QAAcQ;QAAoBnB;QAASC;KAAe;IAE9D,OAAO;QAAEqB;QAAKjB;IAAU;AAC1B;AAEA,MAAMK,cAAc,CAACgB;IACnB,OAAOA,GAAGV,WAAW,GAAGU,GAAGS,WAAW,IAAI,CAACC,kBAAkBV;AAC/D;AAEA,MAAMU,oBAAoB,CAACV;IACzB,MAAMW,OAAOX,GAAGZ,qBAAqB;IACrC,MAAMwB,MAAMZ,GAAGa,aAAa;IAC5B,MAAMV,MAAMS,IAAIX,WAAW;IAE3B,IAAI,CAACE,KAAK;QACR,OAAO;IACT;IAEA,OACEQ,KAAKG,GAAG,IAAI,KACZH,KAAKI,IAAI,IAAI,KACbJ,KAAKK,MAAM,IAAKb,CAAAA,IAAIc,WAAW,IAAIL,IAAIM,eAAe,CAACC,YAAY,AAAD,KAClER,KAAKS,KAAK,IAAKjB,CAAAA,IAAIkB,UAAU,IAAIT,IAAIM,eAAe,CAACI,WAAW,AAAD;AAEnE"}
|
|
@@ -86,7 +86,7 @@ export const useMessageBarStyles_unstable = state => {
|
|
|
86
86
|
const rootIntentStyles = useRootIntentStyles();
|
|
87
87
|
const reflowSpacerStyles = useReflowSpacerBaseStyles();
|
|
88
88
|
const styles = useStyles();
|
|
89
|
-
state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.
|
|
89
|
+
state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
|
|
90
90
|
if (state.icon) {
|
|
91
91
|
state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
|
|
92
92
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","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"
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","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"],"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n 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"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE,sBAAsB;EAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,gBAAGT,aAAA,01BAazB,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,4WAOzB,CAAC;AACF,MAAMW,yBAAyB,gBAAGX,aAAA,mGAGjC,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,aAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,yBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG/B,QAAA;EAAAgC,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMQ,mBAAmB,gBAAGrC,QAAA;EAAAgC,IAAA;EAAAC,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAP,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,OAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAb,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,kBAAkB,GAAGvC,yBAAyB,CAAC,CAAC;EACtD,MAAMwC,MAAM,GAAGvC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACvC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,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;EACrO,IAAIP,KAAK,CAACtC,IAAI,EAAE;IACZsC,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEwC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACxI;EACA,IAAIP,KAAK,CAACrC,kBAAkB,EAAE;IAC1BqC,KAAK,CAACrC,kBAAkB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACG,kBAAkB,EAAE0C,kBAAkB,CAAC;EAClH;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
2
|
+
/**
|
|
3
|
+
* Generates a motion atom object for a fade in or fade out.
|
|
4
|
+
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
5
|
+
* @param duration - The duration of the motion in milliseconds.
|
|
6
|
+
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
|
|
7
|
+
* @param fromValue - The starting opacity value. Defaults to 0.
|
|
8
|
+
* @returns A motion atom object with opacity keyframes and the supplied duration and easing.
|
|
9
|
+
*/ const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0 })=>{
|
|
10
|
+
const keyframes = [
|
|
11
|
+
{
|
|
12
|
+
opacity: fromValue
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
opacity: 1
|
|
16
|
+
}
|
|
17
|
+
];
|
|
18
|
+
if (direction === 'exit') {
|
|
19
|
+
keyframes.reverse();
|
|
20
|
+
}
|
|
21
|
+
return {
|
|
22
|
+
keyframes,
|
|
23
|
+
duration,
|
|
24
|
+
easing
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Generates a motion atom object for an X or Y translation, from a specified distance to zero.
|
|
29
|
+
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
30
|
+
* @param axis - The axis of the translation: 'X' or 'Y'.
|
|
31
|
+
* @param fromValue - The starting position of the slide; it can be a percentage or pixels.
|
|
32
|
+
* @param duration - The duration of the motion in milliseconds.
|
|
33
|
+
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
|
|
34
|
+
*/ const slideAtom = ({ direction, axis, fromValue, duration, easing = motionTokens.curveDecelerateMid })=>{
|
|
35
|
+
const keyframes = [
|
|
36
|
+
{
|
|
37
|
+
transform: `translate${axis}(${fromValue})`
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
transform: `translate${axis}(0)`
|
|
41
|
+
}
|
|
42
|
+
];
|
|
43
|
+
if (direction === 'exit') {
|
|
44
|
+
keyframes.reverse();
|
|
45
|
+
}
|
|
46
|
+
return {
|
|
47
|
+
keyframes,
|
|
48
|
+
duration,
|
|
49
|
+
easing
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* A presence component for a MessageBar to enter and exit from a MessageBarGroup.
|
|
54
|
+
* It has an optional enter transition of a slide-in and fade-in,
|
|
55
|
+
* when the `animate` prop is set to `'both'`.
|
|
56
|
+
* It always has an exit transition of a fade-out.
|
|
57
|
+
*/ export const MessageBarMotion = createPresenceComponent(({ animate })=>{
|
|
58
|
+
const duration = motionTokens.durationGentle;
|
|
59
|
+
return {
|
|
60
|
+
enter: animate === 'both' ? [
|
|
61
|
+
fadeAtom({
|
|
62
|
+
direction: 'enter',
|
|
63
|
+
duration
|
|
64
|
+
}),
|
|
65
|
+
slideAtom({
|
|
66
|
+
direction: 'enter',
|
|
67
|
+
axis: 'Y',
|
|
68
|
+
fromValue: '-100%',
|
|
69
|
+
duration
|
|
70
|
+
})
|
|
71
|
+
] : [],
|
|
72
|
+
// Always exit with a fade
|
|
73
|
+
exit: fadeAtom({
|
|
74
|
+
direction: 'exit',
|
|
75
|
+
duration
|
|
76
|
+
})
|
|
77
|
+
};
|
|
78
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n// TODO: import these atoms from react-motion-components-preview once they're available there\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nconst fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n\n/**\n * Generates a motion atom object for an X or Y translation, from a specified distance to zero.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param axis - The axis of the translation: 'X' or 'Y'.\n * @param fromValue - The starting position of the slide; it can be a percentage or pixels.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.\n */\nconst slideAtom = ({\n direction,\n axis,\n fromValue,\n duration,\n easing = motionTokens.curveDecelerateMid,\n}: {\n direction: PresenceDirection;\n axis: 'X' | 'Y';\n fromValue: string;\n duration: number;\n easing?: string;\n}): AtomMotion => {\n const keyframes = [{ transform: `translate${axis}(${fromValue})` }, { transform: `translate${axis}(0)` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\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 [\n fadeAtom({ direction: 'enter', duration }),\n slideAtom({ direction: 'enter', axis: 'Y', fromValue: '-100%', duration }),\n ]\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","direction","duration","easing","curveLinear","fromValue","keyframes","opacity","reverse","slideAtom","axis","curveDecelerateMid","transform","MessageBarMotion","animate","durationGentle","enter","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAuC,yBAAyB;AAY9G;;;;;;;CAOC,GACD,MAAMC,WAAW,CAAC,EAChBC,SAAS,EACTC,QAAQ,EACRC,SAASL,aAAaM,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF;AAEA;;;;;;;CAOC,GACD,MAAMM,YAAY,CAAC,EACjBR,SAAS,EACTS,IAAI,EACJL,SAAS,EACTH,QAAQ,EACRC,SAASL,aAAaa,kBAAkB,EAOzC;IACC,MAAML,YAAY;QAAC;YAAEM,WAAW,CAAC,SAAS,EAAEF,KAAK,CAAC,EAAEL,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEO,WAAW,CAAC,SAAS,EAAEF,KAAK,GAAG,CAAC;QAAC;KAAE;IACzG,IAAIT,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF;AAEA;;;;;CAKC,GACD,OAAO,MAAMU,mBAAmBd,wBAC9B,CAAC,EAAEe,OAAO,EAAE;IACV,MAAMZ,WAAWJ,aAAaiB,cAAc;IAE5C,OAAO;QACLC,OACEF,YAAY,SAER;YACEd,SAAS;gBAAEC,WAAW;gBAASC;YAAS;YACxCO,UAAU;gBAAER,WAAW;gBAASS,MAAM;gBAAKL,WAAW;gBAASH;YAAS;SACzE,GACD,EAAE;QAER,0BAA0B;QAC1Be,MAAMjB,SAAS;YAAEC,WAAW;YAAQC;QAAS;IAC/C;AACF,GACA"}
|
|
@@ -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 enterStyles: string;\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":["React"],"rangeMappings":"","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 * 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"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { PresenceGroup } from '@fluentui/react-motion';
|
|
4
|
+
import { MessageBarMotion } from './MessageBarGroup.motions';
|
|
5
5
|
/**
|
|
6
6
|
* Render the final JSX of MessageBarGroup
|
|
7
7
|
*/ export const renderMessageBarGroup_unstable = (state)=>{
|
|
8
8
|
assertSlots(state);
|
|
9
9
|
return /*#__PURE__*/ _jsx(state.root, {
|
|
10
|
-
children: /*#__PURE__*/ _jsx(
|
|
11
|
-
|
|
12
|
-
children: state.children.map((child)=>/*#__PURE__*/ _jsx(MessageBarTransition, {
|
|
10
|
+
children: /*#__PURE__*/ _jsx(PresenceGroup, {
|
|
11
|
+
children: state.children.map((child)=>/*#__PURE__*/ _jsx(MessageBarMotion, {
|
|
13
12
|
animate: state.animate,
|
|
14
|
-
enterClassName: state.enterStyles,
|
|
15
|
-
exitClassName: state.exitStyles,
|
|
16
13
|
children: child
|
|
17
14
|
}, child.key))
|
|
18
15
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { PresenceGroup } from '@fluentui/react-motion';\nimport { MessageBarMotion } from './MessageBarGroup.motions';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState) => {\n assertSlots<MessageBarGroupSlots>(state);\n\n return (\n <state.root>\n <PresenceGroup>\n {state.children.map(child => (\n <MessageBarMotion key={child.key} animate={state.animate}>\n {child}\n </MessageBarMotion>\n ))}\n </PresenceGroup>\n </state.root>\n );\n};\n"],"names":["assertSlots","PresenceGroup","MessageBarMotion","renderMessageBarGroup_unstable","state","root","children","map","child","animate","key"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CJ,YAAkCI;IAElC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;sBACEG,MAAME,QAAQ,CAACC,GAAG,CAACC,CAAAA,sBAClB,KAACN;oBAAiCO,SAASL,MAAMK,OAAO;8BACrDD;mBADoBA,MAAME,GAAG;;;AAO1C,EAAE"}
|
|
@@ -1,35 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
|
1
|
+
import { mergeClasses } from '@griffel/react';
|
|
3
2
|
export const messageBarGroupClassNames = {
|
|
4
3
|
root: 'fui-MessageBarGroup'
|
|
5
4
|
};
|
|
6
|
-
/**
|
|
7
|
-
* Styles for the root slot
|
|
8
|
-
*/
|
|
9
|
-
const useStyles = /*#__PURE__*/__styles({
|
|
10
|
-
base: {
|
|
11
|
-
Bf5fcs: "f4cll0y",
|
|
12
|
-
vin17d: "fy8si0b"
|
|
13
|
-
},
|
|
14
|
-
enter: {
|
|
15
|
-
Bv12yb3: "f1dg9w1v"
|
|
16
|
-
},
|
|
17
|
-
exit: {
|
|
18
|
-
Bv12yb3: "fu80iee"
|
|
19
|
-
}
|
|
20
|
-
}, {
|
|
21
|
-
d: [".f4cll0y{animation-fill-mode:forwards;}", ".fy8si0b{animation-duration:var(--durationNormal);}", ".f1dg9w1v{animation-name:fngeioi;}", ".fu80iee{animation-name:fk0lfw7;}"],
|
|
22
|
-
k: ["@keyframes fngeioi{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}"]
|
|
23
|
-
});
|
|
24
5
|
/**
|
|
25
6
|
* Apply styling to the MessageBarGroup slots based on the state
|
|
26
7
|
*/
|
|
27
8
|
export const useMessageBarGroupStyles_unstable = state => {
|
|
28
9
|
'use no memo';
|
|
29
10
|
|
|
30
|
-
const styles = useStyles();
|
|
31
11
|
state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
|
|
32
|
-
state.enterStyles = mergeClasses(styles.base, styles.enter);
|
|
33
|
-
state.exitStyles = mergeClasses(styles.base, styles.exit);
|
|
34
12
|
return state;
|
|
35
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACzF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -7,7 +7,7 @@ const messageBarTransitionContext = React.createContext(undefined);
|
|
|
7
7
|
nodeRef: React.createRef()
|
|
8
8
|
};
|
|
9
9
|
/**
|
|
10
|
-
* Context to pass animation
|
|
10
|
+
* Context to pass nodeRef for animation to MessageBar components
|
|
11
11
|
* @internal
|
|
12
12
|
*/ export const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider;
|
|
13
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/messageBarTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MessageBarTransitionContextValue = {\n className: string;\n nodeRef: React.Ref<HTMLDivElement | null>;\n};\n\nconst messageBarTransitionContext = React.createContext<MessageBarTransitionContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue = {\n className: '',\n nodeRef: React.createRef<HTMLDivElement | null>(),\n};\n\n/**\n * Context to pass animation
|
|
1
|
+
{"version":3,"sources":["../src/contexts/messageBarTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MessageBarTransitionContextValue = {\n /**\n * @deprecated CSS className is no longer used for this transition, replaced by motion components\n */\n className: string;\n nodeRef: React.Ref<HTMLDivElement | null>;\n};\n\nconst messageBarTransitionContext = React.createContext<MessageBarTransitionContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue = {\n className: '',\n nodeRef: React.createRef<HTMLDivElement | null>(),\n};\n\n/**\n * Context to pass nodeRef for animation to MessageBar components\n * @internal\n */\nexport const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider;\n/**\n * @internal\n */\nexport const useMessageBarTransitionContext = () =>\n React.useContext(messageBarTransitionContext) ?? messageBarTransitionContextDefaultValue;\n"],"names":["React","messageBarTransitionContext","createContext","undefined","messageBarTransitionContextDefaultValue","className","nodeRef","createRef","MessageBarTransitionContextProvider","Provider","useMessageBarTransitionContext","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,8BAA8BD,MAAME,aAAa,CAA+CC;AAEtG;;CAEC,GACD,OAAO,MAAMC,0CAA4E;IACvFC,WAAW;IACXC,SAASN,MAAMO,SAAS;AAC1B,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,sCAAsCP,4BAA4BQ,QAAQ,CAAC;AACxF;;CAEC,GACD,OAAO,MAAMC,iCAAiC;QAC5CV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,0CAAjBD,+BAAAA,oBAAiDI;AAAsC,EAAE"}
|
|
@@ -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 transitionClassName: string;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}
|
|
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":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}
|
|
@@ -21,6 +21,7 @@ const useMessageBar_unstable = (props, ref)=>{
|
|
|
21
21
|
const autoReflow = layout === 'auto';
|
|
22
22
|
const { ref: reflowRef, reflowing } = (0, _useMessageBarReflow.useMessageBarReflow)(autoReflow);
|
|
23
23
|
const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
|
|
24
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
24
25
|
const { className: transitionClassName, nodeRef } = (0, _messageBarTransitionContext.useMessageBarTransitionContext)();
|
|
25
26
|
const actionsRef = _react.useRef(null);
|
|
26
27
|
const bodyRef = _react.useRef(null);
|