Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

1178
node_modules/@fluentui/react-message-bar/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-message-bar/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-message-bar-preview
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

27
node_modules/@fluentui/react-message-bar/README.md generated vendored Normal file
View File

@@ -0,0 +1,27 @@
# @fluentui/react-message-bar
The MessageBar component communicates important information about the state of the entire application or surface.
For example, the status of a page, panel, dialog or card. The information shouldn't require someone
to take immediate action, but should persist until the user performs one of the required actions.
```tsx
import { MessageBar, MessageBarTitle, MessageBarBody, Button } from '@fluentui/react-components';
import { DismissRegular } from '@fluentui/react-icons';
function Example() {
return (
<MessageBar>
<MessageBarBody>
<MessageBarTitle>Descriptive title</MessageBarTite>
This is a message bar
<MessageBarActions containerAction={<Button arial-label="dismiss" icon={<DismissReguladr />} />}>
<Button>Action</Button>
<Button>Action</Button>
</MessageBarActions>
</MessageBarBody>
</MessageBar>
)
}
```

View File

@@ -0,0 +1,325 @@
import type { ButtonContextValue } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* MessageBar component
*/
export declare const MessageBar: ForwardRefComponent<MessageBarProps>;
/**
* MessageBarActions component
*/
export declare const MessageBarActions: ForwardRefComponent<MessageBarActionsProps>;
export declare const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots>;
export declare type MessageBarActionsContextValues = {
button: ButtonContextValue;
};
/**
* MessageBarActions Props
*/
export declare type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots>;
export declare type MessageBarActionsSlots = {
root: Slot<'div'>;
/**
* Generally the 'Dismiss' button for the MessageBar
*/
containerAction?: Slot<'div'>;
};
/**
* State used in rendering MessageBarActions
*/
export declare type MessageBarActionsState = ComponentState<MessageBarActionsSlots> & Pick<Required<MessageBarContextValue>, 'layout'> & {
/**
* Whether there are actions as children of this component
*/
hasActions: boolean;
};
/**
* MessageBarBody component
*/
export declare const MessageBarBody: ForwardRefComponent<MessageBarBodyProps>;
export declare const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots>;
declare type MessageBarBodyContextValues = {
link: {
inline?: boolean;
};
};
/**
* MessageBarBody Props
*/
export declare type MessageBarBodyProps = ComponentProps<MessageBarBodySlots>;
export declare type MessageBarBodySlots = {
root: Slot<'div'>;
};
/**
* State used in rendering MessageBarBody
*/
export declare type MessageBarBodyState = ComponentState<MessageBarBodySlots>;
export declare const messageBarClassNames: SlotClassNames<MessageBarSlots>;
export declare const messageBarContextDefaultValue: MessageBarContextValue;
export declare const MessageBarContextProvider: React_2.Provider<MessageBarContextValue | undefined>;
export declare type MessageBarContextValue = {
layout: 'multiline' | 'singleline' | 'auto';
actionsRef: React_2.MutableRefObject<HTMLDivElement | null>;
bodyRef: React_2.MutableRefObject<HTMLDivElement | null>;
titleId: string;
};
export declare type MessageBarContextValues = {
messageBar: MessageBarContextValue;
};
/**
* MessageBarGroup component
*/
export declare const MessageBarGroup: ForwardRefComponent<MessageBarGroupProps>;
export declare const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots>;
/**
* MessageBarGroup Props
*/
export declare type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {
children: React_2.ReactElement[] | React_2.ReactElement;
animate?: 'exit-only' | 'both';
};
export declare type MessageBarGroupSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering MessageBarGroup
*/
export declare type MessageBarGroupState = ComponentState<MessageBarGroupSlots> & Pick<MessageBarGroupProps, 'animate'> & {
/** @deprecated property is unused; these CSS animations were replaced by motion components */
enterStyles: string;
/** @deprecated property is unused; these CSS animations were replaced by motion components */
exitStyles: string;
children: React_2.ReactElement[];
};
export declare type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';
/**
* MessageBar Props
*/
export declare type MessageBarProps = ComponentProps<MessageBarSlots> & Pick<Partial<MessageBarContextValue>, 'layout'> & {
/**
* Default designs announcement presets
* @default info
*/
intent?: MessageBarIntent;
/**
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
*/
politeness?: 'assertive' | 'polite';
/**
* Use squal for page level messages and rounded for component level messages
* @default rounded
*/
shape?: 'square' | 'rounded';
};
export declare type MessageBarSlots = {
root: Slot<'div'>;
icon?: Slot<'div'>;
/**
* Rendered when the component is in multiline layout to guarantee correct spacing even
* if no actions are rendered. When actions are rendered, the default actions grid area will render
* over this element
*
* NOTE: If you are using this slot, this probably means that you are using the MessageBar without
* actions, this is not recommended from an accesibility point of view
*/
bottomReflowSpacer?: Slot<'div'>;
};
/**
* State used in rendering MessageBar
*/
export declare type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> & Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
/**
* @deprecated Code is unused, replaced by motion components
*/
transitionClassName: string;
};
/**
* MessageBarTitle component
*/
export declare const MessageBarTitle: ForwardRefComponent<MessageBarTitleProps>;
export declare const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots>;
/**
* MessageBarTitle Props
*/
export declare type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots>;
export declare type MessageBarTitleSlots = {
root: Slot<'span'>;
};
/**
* State used in rendering MessageBarTitle
*/
export declare type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;
/**
* @internal
*/
export declare const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue;
/**
* Context to pass nodeRef for animation to MessageBar components
* @internal
*/
export declare const MessageBarTransitionContextProvider: React_2.Provider<MessageBarTransitionContextValue | undefined>;
export declare type MessageBarTransitionContextValue = {
/**
* @deprecated CSS className is no longer used for this transition, replaced by motion components
*/
className: string;
nodeRef: React_2.Ref<HTMLDivElement | null>;
};
/**
* Render the final JSX of MessageBar
*/
export declare const renderMessageBar_unstable: (state: MessageBarState, contexts: MessageBarContextValues) => JSXElement;
/**
* Render the final JSX of MessageBarActions
*/
export declare const renderMessageBarActions_unstable: (state: MessageBarActionsState, contexts: MessageBarActionsContextValues) => JSXElement;
/**
* Render the final JSX of MessageBarBody
*/
export declare const renderMessageBarBody_unstable: (state: MessageBarBodyState, contextValues: MessageBarBodyContextValues) => JSXElement;
/**
* Render the final JSX of MessageBarGroup
*/
export declare const renderMessageBarGroup_unstable: (state: MessageBarGroupState) => JSXElement;
/**
* Render the final JSX of MessageBarTitle
*/
export declare const renderMessageBarTitle_unstable: (state: MessageBarTitleState) => JSXElement;
/**
* Create the state required to render MessageBar.
*
* The returned state can be modified with hooks such as useMessageBarStyles_unstable,
* before being passed to renderMessageBar_unstable.
*
* @param props - props from this instance of MessageBar
* @param ref - reference to root HTMLElement of MessageBar
*/
export declare const useMessageBar_unstable: (props: MessageBarProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarState;
/**
* Create the state required to render MessageBarActions.
*
* The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,
* before being passed to renderMessageBarActions_unstable.
*
* @param props - props from this instance of MessageBarActions
* @param ref - reference to root HTMLElement of MessageBarActions
*/
export declare const useMessageBarActions_unstable: (props: MessageBarActionsProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarActionsState;
export declare function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues;
/**
* Apply styling to the MessageBarActions slots based on the state
*/
export declare const useMessageBarActionsStyles_unstable: (state: MessageBarActionsState) => MessageBarActionsState;
/**
* Create the state required to render MessageBarBody.
*
* The returned state can be modified with hooks such as useMessageBarBodyStyles_unstable,
* before being passed to renderMessageBarBody_unstable.
*
* @param props - props from this instance of MessageBarBody
* @param ref - reference to root HTMLElement of MessageBarBody
*/
export declare const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBodyState;
/**
* Apply styling to the MessageBarBody slots based on the state
*/
export declare const useMessageBarBodyStyles_unstable: (state: MessageBarBodyState) => MessageBarBodyState;
export declare const useMessageBarContext: () => MessageBarContextValue;
export declare function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues;
/**
* Create the state required to render MessageBarGroup.
*
* The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,
* before being passed to renderMessageBarGroup_unstable.
*
* @param props - props from this instance of MessageBarGroup
* @param ref - reference to root HTMLElement of MessageBarGroup
*/
export declare const useMessageBarGroup_unstable: (props: MessageBarGroupProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarGroupState;
/**
* Apply styling to the MessageBarGroup slots based on the state
*/
export declare const useMessageBarGroupStyles_unstable: (state: MessageBarGroupState) => MessageBarGroupState;
/**
* Apply styling to the MessageBar slots based on the state
*/
export declare const useMessageBarStyles_unstable: (state: MessageBarState) => MessageBarState;
/**
* Create the state required to render MessageBarTitle.
*
* The returned state can be modified with hooks such as useMessageBarTitleStyles_unstable,
* before being passed to renderMessageBarTitle_unstable.
*
* @param props - props from this instance of MessageBarTitle
* @param ref - reference to root HTMLElement of MessageBarTitle
*/
export declare const useMessageBarTitle_unstable: (props: MessageBarTitleProps, ref: React_2.Ref<HTMLElement>) => MessageBarTitleState;
/**
* Apply styling to the MessageBarTitle slots based on the state
*/
export declare const useMessageBarTitleStyles_unstable: (state: MessageBarTitleState) => MessageBarTitleState;
/**
* @internal
*/
export declare const useMessageBarTransitionContext: () => MessageBarTransitionContextValue;
export { }

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBar: function() {
return _index.MessageBar;
},
messageBarClassNames: function() {
return _index.messageBarClassNames;
},
renderMessageBar_unstable: function() {
return _index.renderMessageBar_unstable;
},
useMessageBarContextValue_unstable: function() {
return _index.useMessageBarContextValue_unstable;
},
useMessageBarStyles_unstable: function() {
return _index.useMessageBarStyles_unstable;
},
useMessageBar_unstable: function() {
return _index.useMessageBar_unstable;
}
});
const _index = require("./components/MessageBar/index");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarActions: function() {
return _index.MessageBarActions;
},
messageBarActionsClassNames: function() {
return _index.messageBarActionsClassNames;
},
renderMessageBarActions_unstable: function() {
return _index.renderMessageBarActions_unstable;
},
useMessageBarActionsContextValue_unstable: function() {
return _index.useMessageBarActionsContextValue_unstable;
},
useMessageBarActionsStyles_unstable: function() {
return _index.useMessageBarActionsStyles_unstable;
},
useMessageBarActions_unstable: function() {
return _index.useMessageBarActions_unstable;
}
});
const _index = require("./components/MessageBarActions/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MessageBarActions.ts"],"sourcesContent":["export type {\n MessageBarActionsContextValues,\n MessageBarActionsProps,\n MessageBarActionsSlots,\n MessageBarActionsState,\n} from './components/MessageBarActions/index';\nexport {\n MessageBarActions,\n messageBarActionsClassNames,\n renderMessageBarActions_unstable,\n useMessageBarActionsContextValue_unstable,\n useMessageBarActionsStyles_unstable,\n useMessageBarActions_unstable,\n} from './components/MessageBarActions/index';\n"],"names":["MessageBarActions","messageBarActionsClassNames","renderMessageBarActions_unstable","useMessageBarActionsContextValue_unstable","useMessageBarActionsStyles_unstable","useMessageBarActions_unstable"],"mappings":";;;;;;;;;;;;eAOEA,wBAAiB;;;eACjBC,kCAA2B;;;eAC3BC,uCAAgC;;;eAChCC,gDAAyC;;;eACzCC,0CAAmC;;;eACnCC,oCAA6B;;;uBACxB,uCAAuC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarBody: function() {
return _index.MessageBarBody;
},
messageBarBodyClassNames: function() {
return _index.messageBarBodyClassNames;
},
renderMessageBarBody_unstable: function() {
return _index.renderMessageBarBody_unstable;
},
useMessageBarBodyStyles_unstable: function() {
return _index.useMessageBarBodyStyles_unstable;
},
useMessageBarBody_unstable: function() {
return _index.useMessageBarBody_unstable;
}
});
const _index = require("./components/MessageBarBody/index");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarGroup: function() {
return _index.MessageBarGroup;
},
messageBarGroupClassNames: function() {
return _index.messageBarGroupClassNames;
},
renderMessageBarGroup_unstable: function() {
return _index.renderMessageBarGroup_unstable;
},
useMessageBarGroupStyles_unstable: function() {
return _index.useMessageBarGroupStyles_unstable;
},
useMessageBarGroup_unstable: function() {
return _index.useMessageBarGroup_unstable;
}
});
const _index = require("./components/MessageBarGroup/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MessageBarGroup.ts"],"sourcesContent":["export type {\n MessageBarGroupProps,\n MessageBarGroupSlots,\n MessageBarGroupState,\n} from './components/MessageBarGroup/index';\nexport {\n MessageBarGroup,\n messageBarGroupClassNames,\n renderMessageBarGroup_unstable,\n useMessageBarGroupStyles_unstable,\n useMessageBarGroup_unstable,\n} from './components/MessageBarGroup/index';\n"],"names":["MessageBarGroup","messageBarGroupClassNames","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","useMessageBarGroup_unstable"],"mappings":";;;;;;;;;;;;eAMEA,sBAAe;;;eACfC,gCAAyB;;;eACzBC,qCAA8B;;;eAC9BC,wCAAiC;;;eACjCC,kCAA2B;;;uBACtB,qCAAqC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarTitle: function() {
return _index.MessageBarTitle;
},
messageBarTitleClassNames: function() {
return _index.messageBarTitleClassNames;
},
renderMessageBarTitle_unstable: function() {
return _index.renderMessageBarTitle_unstable;
},
useMessageBarTitleStyles_unstable: function() {
return _index.useMessageBarTitleStyles_unstable;
},
useMessageBarTitle_unstable: function() {
return _index.useMessageBarTitle_unstable;
}
});
const _index = require("./components/MessageBarTitle/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/MessageBarTitle.ts"],"sourcesContent":["export type {\n MessageBarTitleProps,\n MessageBarTitleSlots,\n MessageBarTitleState,\n} from './components/MessageBarTitle/index';\nexport {\n MessageBarTitle,\n messageBarTitleClassNames,\n renderMessageBarTitle_unstable,\n useMessageBarTitleStyles_unstable,\n useMessageBarTitle_unstable,\n} from './components/MessageBarTitle/index';\n"],"names":["MessageBarTitle","messageBarTitleClassNames","renderMessageBarTitle_unstable","useMessageBarTitleStyles_unstable","useMessageBarTitle_unstable"],"mappings":";;;;;;;;;;;;eAMEA,sBAAe;;;eACfC,gCAAyB;;;eACzBC,qCAA8B;;;eAC9BC,wCAAiC;;;eACjCC,kCAA2B;;;uBACtB,qCAAqC"}

View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MessageBar", {
enumerable: true,
get: function() {
return MessageBar;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useMessageBar = require("./useMessageBar");
const _renderMessageBar = require("./renderMessageBar");
const _useMessageBarStylesstyles = require("./useMessageBarStyles.styles");
const _useMessageBarContextValues = require("./useMessageBarContextValues");
const MessageBar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMessageBar.useMessageBar_unstable)(props, ref);
(0, _useMessageBarStylesstyles.useMessageBarStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarStyles_unstable')(state);
return (0, _renderMessageBar.renderMessageBar_unstable)(state, (0, _useMessageBarContextValues.useMessageBarContextValue_unstable)(state));
});
MessageBar.displayName = 'MessageBar';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBar/MessageBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBar_unstable } from './useMessageBar';\nimport { renderMessageBar_unstable } from './renderMessageBar';\nimport { useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nimport type { MessageBarProps } from './MessageBar.types';\nimport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n\n/**\n * MessageBar component\n */\nexport const MessageBar: ForwardRefComponent<MessageBarProps> = React.forwardRef((props, ref) => {\n const state = useMessageBar_unstable(props, ref);\n\n useMessageBarStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarStyles_unstable')(state);\n return renderMessageBar_unstable(state, useMessageBarContextValue_unstable(state));\n});\n\nMessageBar.displayName = 'MessageBar';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBar_unstable","renderMessageBar_unstable","useMessageBarStyles_unstable","useMessageBarContextValue_unstable","MessageBar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;+BACvC,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;4CAEzB,+BAA+B;AAK3E,MAAMM,aAAAA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAC7BT,gDAAAA,EAA4B,gCAAgCS;IAC5D,WAAOP,2CAAAA,EAA0BO,WAAOL,8DAAAA,EAAmCK;AAC7E,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getIntentIcon", {
enumerable: true,
get: function() {
return getIntentIcon;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
function getIntentIcon(intent) {
switch(intent){
case 'info':
return /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, null);
case 'warning':
return /*#__PURE__*/ _react.createElement(_reacticons.WarningFilled, null);
case 'error':
return /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismissFilled, null);
case 'success':
return /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircleFilled, null);
default:
return null;
}
}

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBar: function() {
return _MessageBar.MessageBar;
},
messageBarClassNames: function() {
return _useMessageBarStylesstyles.messageBarClassNames;
},
renderMessageBar_unstable: function() {
return _renderMessageBar.renderMessageBar_unstable;
},
useMessageBarContextValue_unstable: function() {
return _useMessageBarContextValues.useMessageBarContextValue_unstable;
},
useMessageBarStyles_unstable: function() {
return _useMessageBarStylesstyles.useMessageBarStyles_unstable;
},
useMessageBar_unstable: function() {
return _useMessageBar.useMessageBar_unstable;
}
});
const _MessageBar = require("./MessageBar");
const _renderMessageBar = require("./renderMessageBar");
const _useMessageBar = require("./useMessageBar");
const _useMessageBarStylesstyles = require("./useMessageBarStyles.styles");
const _useMessageBarContextValues = require("./useMessageBarContextValues");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMessageBar_unstable", {
enumerable: true,
get: function() {
return renderMessageBar_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _messageBarContext = require("../../contexts/messageBarContext");
const renderMessageBar_unstable = (state, contexts)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_messageBarContext.MessageBarContextProvider, {
value: contexts.messageBar,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.root.children,
state.bottomReflowSpacer && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomReflowSpacer, {})
]
})
});
};

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,84 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBar_unstable", {
enumerable: true,
get: function() {
return useMessageBar_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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
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 computedPoliteness = (politeness !== null && politeness !== void 0 ? politeness : intent === 'info') ? 'polite' : 'assertive';
const autoReflow = layout === 'auto';
const { ref: reflowRef, reflowing } = (0, _useMessageBarReflow.useMessageBarReflow)(autoReflow);
const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { className: transitionClassName, nodeRef } = (0, _messageBarTransitionContext.useMessageBarTransitionContext)();
const motionRef = (0, _reactmotion.useMotionForwardedRef)();
const actionsRef = _react.useRef(null);
const bodyRef = _react.useRef(null);
const { announce } = (0, _reactsharedcontexts.useAnnounce)();
const titleId = (0, _reactutilities.useId)();
_react.useEffect(()=>{
var _bodyRef_current, _actionsRef_current;
const bodyMessage = (_bodyRef_current = bodyRef.current) === null || _bodyRef_current === void 0 ? void 0 : _bodyRef_current.textContent;
const actionsMessage = (_actionsRef_current = actionsRef.current) === null || _actionsRef_current === void 0 ? void 0 : _actionsRef_current.textContent;
const message = [
bodyMessage,
actionsMessage
].filter(Boolean).join(',');
announce(message, {
polite: computedPoliteness === 'polite',
alert: computedPoliteness === 'assertive'
});
}, [
bodyRef,
actionsRef,
announce,
computedPoliteness
]);
return {
components: {
root: 'div',
icon: 'div',
bottomReflowSpacer: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: (0, _reactutilities.useMergedRefs)(ref, reflowRef, nodeRef, motionRef),
role: 'group',
'aria-labelledby': titleId,
...props
}), {
elementType: 'div'
}),
icon: _reactutilities.slot.optional(props.icon, {
renderByDefault: true,
elementType: 'div',
defaultProps: {
children: (0, _getIntentIcon.getIntentIcon)(intent)
}
}),
bottomReflowSpacer: _reactutilities.slot.optional(props.bottomReflowSpacer, {
renderByDefault: computedLayout === 'multiline',
elementType: 'div'
}),
layout: computedLayout,
intent,
transitionClassName,
actionsRef,
bodyRef,
titleId,
shape
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,30 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarContextValue_unstable", {
enumerable: true,
get: function() {
return useMessageBarContextValue_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useMessageBarContextValue_unstable(state) {
const { layout, actionsRef, bodyRef, titleId } = state;
const messageBarContext = _react.useMemo(()=>({
layout,
actionsRef,
bodyRef,
titleId
}), [
layout,
actionsRef,
bodyRef,
titleId
]);
return {
messageBar: messageBarContext
};
}

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,95 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarReflow", {
enumerable: true,
get: function() {
return useMessageBarReflow;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
function useMessageBarReflow(enabled = false) {
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const forceUpdate = _react.useReducer(()=>({}), {})[1];
const reflowingRef = _react.useRef(false);
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
const resizeObserverRef = _react.useRef(null);
const prevInlineSizeRef = _react.useRef(-1);
const handleResize = _react.useCallback((entries)=>{
var _entry_borderBoxSize_, _entry_borderBoxSize;
// Resize observer is only owned by this component - one resize observer entry expected
// No need to support multiple fragments - one border box entry expected
if (process.env.NODE_ENV !== 'production' && entries.length > 1) {
// eslint-disable-next-line no-console
console.error([
'useMessageBarReflow: Resize observer should only have one entry. ',
'If multiple entries are observed, the first entry will be used.',
'This is a bug, please report it to the Fluent UI team.'
].join(' '));
}
const entry = entries[0];
var _entry_borderBoxSize__inlineSize;
// `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
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;
if (inlineSize === undefined || !entry) {
return;
}
const { target } = entry;
if (!(0, _reactutilities.isHTMLElement)(target)) {
return;
}
let nextReflowing;
// No easy way to really determine when the single line layout will fit
// Just keep try to set single line layout as long as the size is growing
// Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
if (reflowingRef.current) {
if (prevInlineSizeRef.current < inlineSize) {
nextReflowing = false;
}
} else {
const scrollWidth = target.scrollWidth;
if (inlineSize < scrollWidth) {
nextReflowing = true;
}
}
prevInlineSizeRef.current = inlineSize;
if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
reflowingRef.current = nextReflowing;
forceUpdate();
}
}, [
forceUpdate
]);
const ref = _react.useCallback((el)=>{
var _resizeObserverRef_current;
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
return;
}
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
const win = targetDocument.defaultView;
const resizeObserver = new win.ResizeObserver(handleResize);
resizeObserverRef.current = resizeObserver;
resizeObserver.observe(el, {
box: 'border-box'
});
}, [
targetDocument,
handleResize,
enabled
]);
_react.useEffect(()=>{
return ()=>{
var _resizeObserverRef_current;
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
};
}, []);
return {
ref,
reflowing: reflowingRef.current
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,175 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarClassNames: function() {
return messageBarClassNames;
},
useMessageBarStyles_unstable: function() {
return useMessageBarStyles_unstable;
}
});
const _react = require("@griffel/react");
const messageBarClassNames = {
root: 'fui-MessageBar',
icon: 'fui-MessageBar__icon',
bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r2oyxsj", "r1wuyrhw", [
".r2oyxsj{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-left:var(--spacingHorizontalM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}",
".r1wuyrhw{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-right:var(--spacingHorizontalM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}"
]);
const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1df1z33", "rivnfjc", [
".r1df1z33{grid-area:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}",
".rivnfjc{grid-area:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}"
]);
const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1vx593n", null, [
".r1vx593n{margin-bottom:var(--spacingVerticalS);grid-area:secondaryActions;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
rootMultiline: {
Huce71: "f6juhto",
Bt984gj: "f1s2louj",
z8tnut: "f1ngh7ph",
Budl1dq: "f17g0uqy",
zoa1oz: "f1w7oly7"
},
secondaryActionsMultiline: {
Brf1p80: "f1e8xxv9",
B6of3ja: "f1gaxbfw",
jrapky: "fqcjy3b",
t21cq0: [
"fibjyge",
"f9yszdx"
]
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779"
}
}, {
d: [
".f6juhto{white-space:normal;}",
".f1s2louj{align-items:start;}",
".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
".f17g0uqy{grid-template-columns:auto 1fr auto;}",
".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}",
".f1e8xxv9{justify-content:end;}",
".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}",
".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
".fibjyge{margin-right:0px;}",
".f9yszdx{margin-left:0px;}",
[
".fokr779{border-radius:0;}",
{
p: -1
}
]
]
});
const useIconIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
info: {},
error: {
sj55zd: "f1ca9wz"
},
warning: {
sj55zd: "f14a4cve"
},
success: {
sj55zd: "f36rra6"
}
}, {
d: [
".f1ca9wz{color:var(--colorStatusDangerForeground1);}",
".f14a4cve{color:var(--colorStatusWarningForeground3);}",
".f36rra6{color:var(--colorStatusSuccessForeground1);}"
]
});
const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
info: {},
error: {
De3pzq: "f1eon7jj",
g2u3we: "f1f8dvr7",
h3c5rm: [
"f1g1ijmo",
"f1nxacbt"
],
B9xav0g: "fo25q1j",
zhjwy3: [
"f1nxacbt",
"f1g1ijmo"
]
},
warning: {
De3pzq: "f13ftzij",
g2u3we: "frd1ypx",
h3c5rm: [
"f1gyjrma",
"f18qd5xz"
],
B9xav0g: "fqyqtrt",
zhjwy3: [
"f18qd5xz",
"f1gyjrma"
]
},
success: {
De3pzq: "f64thcm",
g2u3we: "f1b4u7v",
h3c5rm: [
"f1nyd2b1",
"f70v3om"
],
B9xav0g: "fk173vo",
zhjwy3: [
"f70v3om",
"f1nyd2b1"
]
}
}, {
d: [
".f1eon7jj{background-color:var(--colorStatusDangerBackground1);}",
".f1f8dvr7{border-top-color:var(--colorStatusDangerBorder1);}",
".f1g1ijmo{border-right-color:var(--colorStatusDangerBorder1);}",
".f1nxacbt{border-left-color:var(--colorStatusDangerBorder1);}",
".fo25q1j{border-bottom-color:var(--colorStatusDangerBorder1);}",
".f13ftzij{background-color:var(--colorStatusWarningBackground1);}",
".frd1ypx{border-top-color:var(--colorStatusWarningBorder1);}",
".f1gyjrma{border-right-color:var(--colorStatusWarningBorder1);}",
".f18qd5xz{border-left-color:var(--colorStatusWarningBorder1);}",
".fqyqtrt{border-bottom-color:var(--colorStatusWarningBorder1);}",
".f64thcm{background-color:var(--colorStatusSuccessBackground1);}",
".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}",
".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}",
".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}",
".fk173vo{border-bottom-color:var(--colorStatusSuccessBorder1);}"
]
});
const useMessageBarStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const iconBaseStyles = useIconBaseStyles();
const iconIntentStyles = useIconIntentStyles();
const rootIntentStyles = useRootIntentStyles();
const reflowSpacerStyles = useReflowSpacerBaseStyles();
const styles = useStyles();
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) {
state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
}
if (state.bottomReflowSpacer) {
state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,117 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarClassNames: function() {
return messageBarClassNames;
},
useMessageBarStyles_unstable: function() {
return useMessageBarStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const messageBarClassNames = {
root: 'fui-MessageBar',
icon: 'fui-MessageBar__icon',
bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
whiteSpace: 'nowrap',
display: 'grid',
gridTemplateColumns: 'auto 1fr auto auto',
gridTemplateRows: '1fr',
gridTemplateAreas: '"icon body secondaryActions actions"',
paddingLeft: _reacttheme.tokens.spacingHorizontalM,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
alignItems: 'center',
minHeight: '36px',
boxSizing: 'border-box',
backgroundColor: _reacttheme.tokens.colorNeutralBackground3
});
const useIconBaseStyles = (0, _react.makeResetStyles)({
gridArea: 'icon',
fontSize: _reacttheme.tokens.fontSizeBase500,
marginRight: _reacttheme.tokens.spacingHorizontalS,
color: _reacttheme.tokens.colorNeutralForeground3,
display: 'flex',
alignItems: 'center'
});
const useReflowSpacerBaseStyles = (0, _react.makeResetStyles)({
marginBottom: _reacttheme.tokens.spacingVerticalS,
gridArea: 'secondaryActions'
});
const useStyles = (0, _react.makeStyles)({
rootMultiline: {
whiteSpace: 'normal',
alignItems: 'start',
paddingTop: _reacttheme.tokens.spacingVerticalMNudge,
gridTemplateColumns: 'auto 1fr auto',
gridTemplateAreas: `
"icon body actions"
"secondaryActions secondaryActions secondaryActions"
`
},
secondaryActionsMultiline: {
justifyContent: 'end',
marginTop: _reacttheme.tokens.spacingVerticalMNudge,
marginBottom: _reacttheme.tokens.spacingVerticalS,
marginRight: '0px'
},
square: {
borderRadius: '0'
}
});
const useIconIntentStyles = (0, _react.makeStyles)({
info: {},
error: {
color: _reacttheme.tokens.colorStatusDangerForeground1
},
warning: {
color: _reacttheme.tokens.colorStatusWarningForeground3
},
success: {
color: _reacttheme.tokens.colorStatusSuccessForeground1
}
});
const useRootIntentStyles = (0, _react.makeStyles)({
info: {},
error: {
backgroundColor: _reacttheme.tokens.colorStatusDangerBackground1,
..._react.shorthands.borderColor(_reacttheme.tokens.colorStatusDangerBorder1)
},
warning: {
backgroundColor: _reacttheme.tokens.colorStatusWarningBackground1,
..._react.shorthands.borderColor(_reacttheme.tokens.colorStatusWarningBorder1)
},
success: {
backgroundColor: _reacttheme.tokens.colorStatusSuccessBackground1,
..._react.shorthands.borderColor(_reacttheme.tokens.colorStatusSuccessBorder1)
}
});
const useMessageBarStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const iconBaseStyles = useIconBaseStyles();
const iconIntentStyles = useIconIntentStyles();
const rootIntentStyles = useRootIntentStyles();
const reflowSpacerStyles = useReflowSpacerBaseStyles();
const styles = useStyles();
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) {
state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
}
if (state.bottomReflowSpacer) {
state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MessageBarActions", {
enumerable: true,
get: function() {
return MessageBarActions;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useMessageBarActions = require("./useMessageBarActions");
const _renderMessageBarActions = require("./renderMessageBarActions");
const _useMessageBarActionsStylesstyles = require("./useMessageBarActionsStyles.styles");
const _useMessageBarActionsContextValues = require("./useMessageBarActionsContextValues");
const MessageBarActions = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMessageBarActions.useMessageBarActions_unstable)(props, ref);
(0, _useMessageBarActionsStylesstyles.useMessageBarActionsStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarActionsStyles_unstable')(state);
return (0, _renderMessageBarActions.renderMessageBarActions_unstable)(state, (0, _useMessageBarActionsContextValues.useMessageBarActionsContextValue_unstable)());
});
MessageBarActions.displayName = 'MessageBarActions';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarActions_unstable(props, ref);\n\n useMessageBarActionsStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;sCAChC,yBAAyB;yCACtB,4BAA4B;kDACzB,sCAAsC;mDAEhC,sCAAsC;AAKzF,MAAMM,oBAAAA,WAAAA,GAAiEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQR,mDAAAA,EAA8BM,OAAOC;QAEnDL,qEAAAA,EAAoCM;QACpCT,gDAAAA,EAA4B,uCAAuCS;IACnE,WAAOP,yDAAAA,EAAiCO,WAAOL,4EAAAA;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarActionsSlots = {\n root: Slot<'div'>;\n /**\n * Generally the 'Dismiss' button for the MessageBar\n */\n containerAction?: Slot<'div'>;\n};\n\nexport type MessageBarActionsContextValues = {\n button: ButtonContextValue;\n};\n\n/**\n * MessageBarActions Props\n */\nexport type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots>;\n\n/**\n * State used in rendering MessageBarActions\n */\nexport type MessageBarActionsState = ComponentState<MessageBarActionsSlots> &\n Pick<Required<MessageBarContextValue>, 'layout'> & {\n /**\n * Whether there are actions as children of this component\n */\n hasActions: boolean;\n };\n"],"names":[],"mappings":"AAqBA;;CAEC,GACD,WAMI"}

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarActions: function() {
return _MessageBarActions.MessageBarActions;
},
messageBarActionsClassNames: function() {
return _useMessageBarActionsStylesstyles.messageBarActionsClassNames;
},
renderMessageBarActions_unstable: function() {
return _renderMessageBarActions.renderMessageBarActions_unstable;
},
useMessageBarActionsContextValue_unstable: function() {
return _useMessageBarActionsContextValues.useMessageBarActionsContextValue_unstable;
},
useMessageBarActionsStyles_unstable: function() {
return _useMessageBarActionsStylesstyles.useMessageBarActionsStyles_unstable;
},
useMessageBarActions_unstable: function() {
return _useMessageBarActions.useMessageBarActions_unstable;
}
});
const _MessageBarActions = require("./MessageBarActions");
const _renderMessageBarActions = require("./renderMessageBarActions");
const _useMessageBarActions = require("./useMessageBarActions");
const _useMessageBarActionsStylesstyles = require("./useMessageBarActionsStyles.styles");
const _useMessageBarActionsContextValues = require("./useMessageBarActionsContextValues");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/index.ts"],"sourcesContent":["export { MessageBarActions } from './MessageBarActions';\nexport type {\n MessageBarActionsContextValues,\n MessageBarActionsProps,\n MessageBarActionsSlots,\n MessageBarActionsState,\n} from './MessageBarActions.types';\nexport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nexport { useMessageBarActions_unstable } from './useMessageBarActions';\nexport { messageBarActionsClassNames, useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nexport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n"],"names":["MessageBarActions","renderMessageBarActions_unstable","useMessageBarActions_unstable","messageBarActionsClassNames","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable"],"mappings":";;;;;;;;;;;;eAASA,oCAAiB;;;eASjBG,6DAA2B;;;eAF3BF,yDAAgC;;;eAGhCI,4EAAyC;;;eADZD,qEAAmC;;;eADhEF,mDAA6B;;;mCARJ,sBAAsB;yCAOP,4BAA4B;sCAC/B,yBAAyB;kDACU,sCAAsC;mDAC7D,sCAAsC"}

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMessageBarActions_unstable", {
enumerable: true,
get: function() {
return renderMessageBarActions_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactbutton = require("@fluentui/react-button");
const renderMessageBarActions_unstable = (state, contexts)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
value: contexts.button,
children: [
state.layout === 'multiline' && state.containerAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.containerAction, {}, "containerAction"),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}),
state.layout !== 'multiline' && state.containerAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.containerAction, {}, "containerAction")
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/renderMessageBarActions.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 {\n MessageBarActionsState,\n MessageBarActionsSlots,\n MessageBarActionsContextValues,\n} from './MessageBarActions.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of MessageBarActions\n */\nexport const renderMessageBarActions_unstable = (\n state: MessageBarActionsState,\n contexts: MessageBarActionsContextValues,\n): JSXElement => {\n assertSlots<MessageBarActionsSlots>(state);\n\n return (\n <ButtonContextProvider value={contexts.button}>\n {state.layout === 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n <state.root />\n {state.layout !== 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n </ButtonContextProvider>\n );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderMessageBarActions_unstable","state","contexts","value","button","layout","containerAction","root"],"mappings":";;;;+BAeaE;;;;;;4BAdb,iCAAiD;gCAErB,4BAA4B;6BAOlB,yBAAyB;AAKxD,yCAAyC,CAC9CC,OACAC;QAEAJ,2BAAAA,EAAoCG;IAEpC,OAAA,WAAA,OACE,gBAAA,EAACF,kCAAAA,EAAAA;QAAsBI,OAAOD,SAASE,MAAM;;YAC1CH,MAAMI,MAAM,KAAK,eAAeJ,MAAMK,eAAe,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,eAAe,EAAA,CAAA,GAAK;8BACrF,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACVN,MAAMI,MAAM,KAAK,eAAeJ,MAAMK,eAAe,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,eAAe,EAAA,CAAA,GAAK;;;AAG3F,EAAE"}

View File

@@ -0,0 +1,36 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarActions_unstable", {
enumerable: true,
get: function() {
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)=>{
const { layout = 'singleline', actionsRef } = (0, _messageBarContext.useMessageBarContext)();
return {
components: {
root: 'div',
containerAction: 'div'
},
containerAction: _reactutilities.slot.optional(props.containerAction, {
renderByDefault: false,
elementType: 'div'
}),
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: (0, _reactutilities.useMergedRefs)(ref, actionsRef),
...props
}), {
elementType: 'div'
}),
layout,
hasActions: !!props.children
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActions.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarActions.\n *\n * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,\n * before being passed to renderMessageBarActions_unstable.\n *\n * @param props - props from this instance of MessageBarActions\n * @param ref - reference to root HTMLElement of MessageBarActions\n */\nexport const useMessageBarActions_unstable = (\n props: MessageBarActionsProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarActionsState => {\n const { layout = 'singleline', actionsRef } = useMessageBarContext();\n return {\n components: {\n root: 'div',\n containerAction: 'div',\n },\n containerAction: slot.optional(props.containerAction, { renderByDefault: false, elementType: 'div' }),\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, actionsRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n layout,\n hasActions: !!props.children,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarActions_unstable","props","ref","layout","actionsRef","components","root","containerAction","optional","renderByDefault","elementType","always","hasActions","children"],"mappings":"AAAA;;;;;+BAgBaK;;;;;;;iEAdU,QAAQ;gCAC+B,4BAA4B;mCAErD,mCAAmC;AAWjE,sCAAsC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,SAAS,YAAY,EAAEC,UAAU,EAAE,OAAGL,uCAAAA;IAC9C,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,iBAAiB;QACnB;QACAA,iBAAiBV,oBAAAA,CAAKW,QAAQ,CAACP,MAAMM,eAAe,EAAE;YAAEE,iBAAiB;YAAOC,aAAa;QAAM;QACnGJ,MAAMT,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BM,KAAKJ,iCAAAA,EAAcI,KAAKE;YACxB,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP;QACAS,YAAY,CAAC,CAACX,MAAMY,QAAQ;IAC9B;AACF,EAAE"}

View File

@@ -0,0 +1,21 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarActionsContextValue_unstable", {
enumerable: true,
get: function() {
return useMessageBarActionsContextValue_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useMessageBarActionsContextValue_unstable() {
const buttonContext = _react.useMemo(()=>({
size: 'small'
}), []);
return {
button: buttonContext
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MessageBarActionsContextValues } from './MessageBarActions.types';\n\nexport function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues {\n const buttonContext = React.useMemo(\n () => ({\n size: 'small' as const,\n }),\n [],\n );\n\n return {\n button: buttonContext,\n };\n}\n"],"names":["React","useMessageBarActionsContextValue_unstable","buttonContext","useMemo","size","button"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC;IACd,MAAMC,gBAAgBF,OAAMG,OAAO,CACjC,IAAO,CAAA;YACLC,MAAM;SACR,CAAA,EACA,EAAE;IAGJ,OAAO;QACLC,QAAQH;IACV;AACF"}

View File

@@ -0,0 +1,74 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarActionsClassNames: function() {
return messageBarActionsClassNames;
},
useMessageBarActionsStyles_unstable: function() {
return useMessageBarActionsStyles_unstable;
}
});
const _react = require("@griffel/react");
const messageBarActionsClassNames = {
root: 'fui-MessageBarActions',
containerAction: 'fui-MessageBarActions__containerAction'
};
/**
* Styles for the root slot
*/ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1t4x98y", "r15utzv5", [
".r1t4x98y{grid-area:secondaryActions;display:flex;column-gap:var(--spacingHorizontalM);padding-right:var(--spacingHorizontalM);}",
".r15utzv5{grid-area:secondaryActions;display:flex;column-gap:var(--spacingHorizontalM);padding-left:var(--spacingHorizontalM);}"
]);
const useContainerActionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rgzw8nq", "r13ur29z", [
".rgzw8nq{grid-area:actions;padding-right:var(--spacingHorizontalM);}",
".r13ur29z{grid-area:actions;padding-left:var(--spacingHorizontalM);}"
]);
const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Brf1p80: "f1e8xxv9",
B6of3ja: "f1gaxbfw",
jrapky: "fqcjy3b",
t21cq0: [
"fibjyge",
"f9yszdx"
],
z189sj: [
"f1p3vkop",
"f8cewkv"
]
},
noActions: {
mc9l5x: "fjseox"
}
}, {
d: [
".f1e8xxv9{justify-content:end;}",
".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}",
".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
".fibjyge{margin-right:0px;}",
".f9yszdx{margin-left:0px;}",
".f1p3vkop{padding-right:var(--spacingVerticalM);}",
".f8cewkv{padding-left:var(--spacingVerticalM);}",
".fjseox{display:none;}"
]
});
const useMessageBarActionsStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const containerActionBaseStyles = useContainerActionBaseStyles();
const multilineStyles = useMultilineStyles();
state.root.className = (0, _react.mergeClasses)(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);
if (state.containerAction) {
state.containerAction.className = (0, _react.mergeClasses)(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: tokens.spacingHorizontalM\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n paddingRight: tokens.spacingVerticalM\n },\n noActions: {\n display: 'none'\n }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,2BAA2B;;;uCA8BY;eAAnCc;;;uBAhCyC,gBAAgB;AAEnE,oCAAoC;IACvCb,IAAI,EAAE,uBAAuB;IAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;;CAEA,GAAI,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,YAAA;IAAA;IAAA;CAK7B,CAAC;AACF,MAAMQ,4BAA4B,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAGpC,CAAC;AACF,MAAMS,kBAAkB,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAW1B,CAAC;AAGS,6CAA6CE,KAAK,IAAG;IAC5D,aAAa;IACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;IAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;IAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;IAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,OAAGrB,mBAAY,EAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;IACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;QACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,OAAGrB,mBAAY,EAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;IAC3J;IACA,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,60 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarActionsClassNames: function() {
return messageBarActionsClassNames;
},
useMessageBarActionsStyles_unstable: function() {
return useMessageBarActionsStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const messageBarActionsClassNames = {
root: 'fui-MessageBarActions',
containerAction: 'fui-MessageBarActions__containerAction'
};
/**
* Styles for the root slot
*/ const useRootBaseStyles = (0, _react.makeResetStyles)({
gridArea: 'secondaryActions',
display: 'flex',
columnGap: _reacttheme.tokens.spacingHorizontalM,
paddingRight: _reacttheme.tokens.spacingHorizontalM
});
const useContainerActionBaseStyles = (0, _react.makeResetStyles)({
gridArea: 'actions',
paddingRight: _reacttheme.tokens.spacingHorizontalM
});
const useMultilineStyles = (0, _react.makeStyles)({
root: {
justifyContent: 'end',
marginTop: _reacttheme.tokens.spacingVerticalMNudge,
marginBottom: _reacttheme.tokens.spacingVerticalS,
marginRight: '0px',
paddingRight: _reacttheme.tokens.spacingVerticalM
},
noActions: {
display: 'none'
}
});
const useMessageBarActionsStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const containerActionBaseStyles = useContainerActionBaseStyles();
const multilineStyles = useMultilineStyles();
state.root.className = (0, _react.mergeClasses)(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);
if (state.containerAction) {
state.containerAction.className = (0, _react.mergeClasses)(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MessageBarActionsSlots, MessageBarActionsState } from './MessageBarActions.types';\n\nexport const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots> = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n paddingRight: tokens.spacingVerticalM,\n },\n\n noActions: {\n display: 'none',\n },\n});\n\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */\nexport const useMessageBarActionsStyles_unstable = (state: MessageBarActionsState): MessageBarActionsState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(\n messageBarActionsClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && multilineStyles.root,\n !state.hasActions && multilineStyles.noActions,\n state.root.className,\n );\n\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(\n messageBarActionsClassNames.containerAction,\n containerActionBaseStyles,\n state.containerAction.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","gridArea","display","columnGap","spacingHorizontalM","paddingRight","useContainerActionBaseStyles","useMultilineStyles","justifyContent","marginTop","spacingVerticalMNudge","marginBottom","spacingVerticalS","marginRight","spacingVerticalM","noActions","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,2BAAAA;;;IAqCAmB,mCAAAA;;;;uBA1C6C,iBAAiB;4BAEpD,wBAAwB;AAGxC,oCAA4E;IACjFlB,MAAM;IACNC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,UAAU;IACVC,SAAS;IACTC,WAAWP,kBAAAA,CAAOQ,kBAAkB;IACpCC,cAAcT,kBAAAA,CAAOQ,kBAAkB;AACzC;AAEA,MAAME,mCAA+Bb,sBAAAA,EAAgB;IACnDQ,UAAU;IACVI,cAAcT,kBAAAA,CAAOQ,kBAAkB;AACzC;AAEA,MAAMG,yBAAqBb,iBAAAA,EAAW;IACpCI,MAAM;QACJU,gBAAgB;QAChBC,WAAWb,kBAAAA,CAAOc,qBAAqB;QACvCC,cAAcf,kBAAAA,CAAOgB,gBAAgB;QACrCC,aAAa;QACbR,cAAcT,kBAAAA,CAAOkB,gBAAgB;IACvC;IAEAC,WAAW;QACTb,SAAS;IACX;AACF;AAKO,4CAA4C,CAACe;IAClD;IAEA,MAAMC,iBAAiBlB;IACvB,MAAMmB,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMnB,IAAI,CAACuB,SAAS,OAAG1B,mBAAAA,EACrBE,4BAA4BC,IAAI,EAChCoB,gBACAD,MAAMK,MAAM,KAAK,eAAeF,gBAAgBtB,IAAI,EACpD,CAACmB,MAAMM,UAAU,IAAIH,gBAAgBL,SAAS,EAC9CE,MAAMnB,IAAI,CAACuB,SAAS;IAGtB,IAAIJ,MAAMlB,eAAe,EAAE;QACzBkB,MAAMlB,eAAe,CAACsB,SAAS,OAAG1B,mBAAAA,EAChCE,4BAA4BE,eAAe,EAC3CoB,2BACAF,MAAMlB,eAAe,CAACsB,SAAS;IAEnC;IAEA,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MessageBarBody", {
enumerable: true,
get: function() {
return MessageBarBody;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useMessageBarBody = require("./useMessageBarBody");
const _renderMessageBarBody = require("./renderMessageBarBody");
const _useMessageBarBodyStylesstyles = require("./useMessageBarBodyStyles.styles");
const _useMessageBarBodyContextValues = require("./useMessageBarBodyContextValues");
const MessageBarBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMessageBarBody.useMessageBarBody_unstable)(props, ref);
const ctx = (0, _useMessageBarBodyContextValues.useMessageBarBodyContextValues_unstable)(state);
(0, _useMessageBarBodyStylesstyles.useMessageBarBodyStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarBodyStyles_unstable')(state);
return (0, _renderMessageBarBody.renderMessageBarBody_unstable)(state, ctx);
});
MessageBarBody.displayName = 'MessageBarBody';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarBody/MessageBarBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarBody_unstable } from './useMessageBarBody';\nimport { renderMessageBarBody_unstable } from './renderMessageBarBody';\nimport { useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';\nimport { useMessageBarBodyContextValues_unstable } from './useMessageBarBodyContextValues';\nimport type { MessageBarBodyProps } from './MessageBarBody.types';\n\n/**\n * MessageBarBody component\n */\nexport const MessageBarBody: ForwardRefComponent<MessageBarBodyProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarBody_unstable(props, ref);\n const ctx = useMessageBarBodyContextValues_unstable(state);\n\n useMessageBarBodyStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarBodyStyles_unstable')(state);\n return renderMessageBarBody_unstable(state, ctx);\n});\n\nMessageBarBody.displayName = 'MessageBarBody';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarBody_unstable","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBodyContextValues_unstable","MessageBarBody","forwardRef","props","ref","state","ctx","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;mCACnC,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;gDAC5B,mCAAmC;AAMpF,MAAMM,iBAAAA,WAAAA,GAA2DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;IAChD,MAAME,UAAMN,uEAAAA,EAAwCK;QAEpDN,+DAAAA,EAAiCM;QACjCT,gDAAAA,EAA4B,oCAAoCS;IAChE,WAAOP,mDAAAA,EAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarBody/MessageBarBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MessageBarBodyContextValues = {\n link: {\n inline?: boolean;\n };\n};\n\nexport type MessageBarBodySlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MessageBarBody Props\n */\nexport type MessageBarBodyProps = ComponentProps<MessageBarBodySlots>;\n\n/**\n * State used in rendering MessageBarBody\n */\nexport type MessageBarBodyState = ComponentState<MessageBarBodySlots>;\n"],"names":[],"mappings":"AAiBA;;CAEC,GACD,WAAsE"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarBody: function() {
return _MessageBarBody.MessageBarBody;
},
messageBarBodyClassNames: function() {
return _useMessageBarBodyStylesstyles.messageBarBodyClassNames;
},
renderMessageBarBody_unstable: function() {
return _renderMessageBarBody.renderMessageBarBody_unstable;
},
useMessageBarBodyStyles_unstable: function() {
return _useMessageBarBodyStylesstyles.useMessageBarBodyStyles_unstable;
},
useMessageBarBody_unstable: function() {
return _useMessageBarBody.useMessageBarBody_unstable;
}
});
const _MessageBarBody = require("./MessageBarBody");
const _renderMessageBarBody = require("./renderMessageBarBody");
const _useMessageBarBody = require("./useMessageBarBody");
const _useMessageBarBodyStylesstyles = require("./useMessageBarBodyStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarBody/index.ts"],"sourcesContent":["export { MessageBarBody } from './MessageBarBody';\nexport type {\n MessageBarBodyContextValues,\n MessageBarBodyProps,\n MessageBarBodySlots,\n MessageBarBodyState,\n} from './MessageBarBody.types';\nexport { renderMessageBarBody_unstable } from './renderMessageBarBody';\nexport { useMessageBarBody_unstable } from './useMessageBarBody';\nexport { messageBarBodyClassNames, useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';\n"],"names":["MessageBarBody","renderMessageBarBody_unstable","useMessageBarBody_unstable","messageBarBodyClassNames","useMessageBarBodyStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eASdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCARJ,mBAAmB;sCAOJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMessageBarBody_unstable", {
enumerable: true,
get: function() {
return renderMessageBarBody_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactlink = require("@fluentui/react-link");
const renderMessageBarBody_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactlink.LinkContextProvider, {
value: contextValues.link,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarBody/renderMessageBarBody.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 { MessageBarBodyState, MessageBarBodySlots, MessageBarBodyContextValues } from './MessageBarBody.types';\nimport { LinkContextProvider } from '@fluentui/react-link';\n\n/**\n * Render the final JSX of MessageBarBody\n */\nexport const renderMessageBarBody_unstable = (\n state: MessageBarBodyState,\n contextValues: MessageBarBodyContextValues,\n): JSXElement => {\n assertSlots<MessageBarBodySlots>(state);\n\n return (\n <LinkContextProvider value={contextValues.link}>\n <state.root />\n </LinkContextProvider>\n );\n};\n"],"names":["assertSlots","LinkContextProvider","renderMessageBarBody_unstable","state","contextValues","value","link","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;2BAGpB,uBAAuB;AAKpD,sCAAsC,CAC3CC,OACAC;QAEAJ,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,EAAAA;QAAoBI,OAAOD,cAAcE,IAAI;kBAC5C,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,29 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarBody_unstable", {
enumerable: true,
get: function() {
return useMessageBarBody_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 useMessageBarBody_unstable = (props, ref)=>{
const { bodyRef } = (0, _messageBarContext.useMessageBarContext)();
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: (0, _reactutilities.useMergedRefs)(ref, bodyRef),
...props
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +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;;;;;;;;;;;;iEAEuB,QAAQ;gCAC+B,4BAA4B;mCAErD,mCAAmC;AAWjE,MAAMK,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,OAAGJ,uCAAAA;IACpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,oBAAAA,CAAKS,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9BM,SAAKJ,6BAAAA,EAAcI,KAAKC;YACxB,GAAGF,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,21 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarBodyContextValues_unstable", {
enumerable: true,
get: function() {
return useMessageBarBodyContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useMessageBarBodyContextValues_unstable(state) {
const link = _react.useMemo(()=>({
inline: true
}), []);
return {
link
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MessageBarBodyState, MessageBarBodyContextValues } from './MessageBarBody.types';\n\nexport function useMessageBarBodyContextValues_unstable(state: MessageBarBodyState): MessageBarBodyContextValues {\n const link = React.useMemo(\n () => ({\n inline: true,\n }),\n [],\n );\n\n return {\n link,\n };\n}\n"],"names":["React","useMessageBarBodyContextValues_unstable","state","link","useMemo","inline"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,wCAAwCC,KAA0B;IAChF,MAAMC,OAAOH,OAAMI,OAAO,CACxB,IAAO,CAAA;YACLC,QAAQ;SACV,CAAA,EACA,EAAE;IAGJ,OAAO;QACLF;IACF;AACF"}

View File

@@ -0,0 +1,33 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarBodyClassNames: function() {
return messageBarBodyClassNames;
},
useMessageBarBodyStyles_unstable: function() {
return useMessageBarBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const messageBarBodyClassNames = {
root: 'fui-MessageBarBody'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rtatq2b", "re2rary", [
".rtatq2b{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--spacingHorizontalM);}",
".re2rary{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--spacingHorizontalM);}"
]);
const useMessageBarBodyStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;4BAGyB;;;IAUpBO,gCAAgC;;;;uBAZH,gBAAgB;AAEvD,MAAMH,2BAA2B;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGN,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAIzB,CAAC;AAGS,0CAA0CQ,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;IAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGT,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarBodyClassNames: function() {
return messageBarBodyClassNames;
},
useMessageBarBodyStyles_unstable: function() {
return useMessageBarBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const messageBarBodyClassNames = {
root: 'fui-MessageBarBody'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
..._reacttheme.typographyStyles.body1,
gridArea: 'body',
paddingRight: _reacttheme.tokens.spacingHorizontalM
});
const useMessageBarBodyStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);
return state;
};

View File

@@ -0,0 +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;;;;;;;;;;;;4BAOaI;;;oCAaAO;;;;uBAlBiC,iBAAiB;4BAGtB,wBAAwB;AAE1D,MAAMP,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBN,sBAAAA,EAAgB;IACxC,GAAGG,4BAAAA,CAAiBI,KAAK;IACzBC,UAAU;IACVC,cAAcP,kBAAAA,CAAOQ,kBAAkB;AACzC;AAKO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,iBAAiBP;IACvBM,MAAMP,IAAI,CAACS,SAAS,OAAGb,mBAAAA,EAAaG,yBAAyBC,IAAI,EAAEQ,gBAAgBD,MAAMP,IAAI,CAACS,SAAS;IAEvG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MessageBarGroup", {
enumerable: true,
get: function() {
return MessageBarGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useMessageBarGroup = require("./useMessageBarGroup");
const _renderMessageBarGroup = require("./renderMessageBarGroup");
const _useMessageBarGroupStylesstyles = require("./useMessageBarGroupStyles.styles");
const MessageBarGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMessageBarGroup.useMessageBarGroup_unstable)(props, ref);
(0, _useMessageBarGroupStylesstyles.useMessageBarGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarGroupStyles_unstable')(state);
return (0, _renderMessageBarGroup.renderMessageBarGroup_unstable)(state);
});
MessageBarGroup.displayName = 'MessageBarGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nimport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nimport { useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\nimport type { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/**\n * MessageBarGroup component\n */\nexport const MessageBarGroup: ForwardRefComponent<MessageBarGroupProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarGroup_unstable(props, ref);\n\n useMessageBarGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarGroupStyles_unstable')(state);\n return renderMessageBarGroup_unstable(state);\n});\n\nMessageBarGroup.displayName = 'MessageBarGroup';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarGroup_unstable","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","MessageBarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;oCAClC,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCR,gDAAAA,EAA4B,qCAAqCQ;IACjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MessageBarMotion", {
enumerable: true,
get: function() {
return MessageBarMotion;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
const MessageBarMotion = (0, _reactmotion.createPresenceComponent)(({ animate })=>{
const duration = _reactmotion.motionTokens.durationGentle;
return {
enter: animate === 'both' ? [
(0, _reactmotioncomponentspreview.fadeAtom)({
direction: 'enter',
duration
}),
(0, _reactmotioncomponentspreview.slideAtom)({
direction: 'enter',
outY: '-100%',
duration
})
] : [],
// Always exit with a fade
exit: (0, _reactmotioncomponentspreview.fadeAtom)({
direction: 'exit',
duration
})
};
});

View File

@@ -0,0 +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":";;;;+BAUaI;;;;;;6BAVyC,yBAAyB;8CAC3C,4CAA4C;AASzE,6BAAyBH,oCAAAA,EAC9B,CAAC,EAAEI,OAAO,EAAE;IACV,MAAMC,WAAWN,yBAAAA,CAAaO,cAAc;IAE5C,OAAO;QACLC,OACEH,YAAY,SAER;gBAACH,sCAAAA,EAAS;gBAAEO,WAAW;gBAASH;YAAS;gBAAIH,uCAAAA,EAAU;gBAAEM,WAAW;gBAASC,MAAM;gBAASJ;YAAS;SAAG,GACxG,EAAE;QAER,0BAA0B;QAC1BK,UAAMT,sCAAAA,EAAS;YAAEO,WAAW;YAAQH;QAAS;IAC/C;AACF,GACA"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +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":";;;;;iEACuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarGroup: function() {
return _MessageBarGroup.MessageBarGroup;
},
messageBarGroupClassNames: function() {
return _useMessageBarGroupStylesstyles.messageBarGroupClassNames;
},
renderMessageBarGroup_unstable: function() {
return _renderMessageBarGroup.renderMessageBarGroup_unstable;
},
useMessageBarGroupStyles_unstable: function() {
return _useMessageBarGroupStylesstyles.useMessageBarGroupStyles_unstable;
},
useMessageBarGroup_unstable: function() {
return _useMessageBarGroup.useMessageBarGroup_unstable;
}
});
const _MessageBarGroup = require("./MessageBarGroup");
const _renderMessageBarGroup = require("./renderMessageBarGroup");
const _useMessageBarGroup = require("./useMessageBarGroup");
const _useMessageBarGroupStylesstyles = require("./useMessageBarGroupStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/index.ts"],"sourcesContent":["export { MessageBarGroup } from './MessageBarGroup';\nexport type { MessageBarGroupProps, MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\nexport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nexport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nexport { messageBarGroupClassNames, useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\n"],"names":["MessageBarGroup","renderMessageBarGroup_unstable","useMessageBarGroup_unstable","messageBarGroupClassNames","useMessageBarGroupStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAIfG,yDAAyB;;;eAFzBF,qDAA8B;;;eAEHG,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMessageBarGroup_unstable", {
enumerable: true,
get: function() {
return renderMessageBarGroup_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactmotion = require("@fluentui/react-motion");
const _MessageBarGroupmotions = require("./MessageBarGroup.motions");
const renderMessageBarGroup_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.PresenceGroup, {
children: state.children.map((child)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MessageBarGroupmotions.MessageBarMotion, {
animate: state.animate,
unmountOnExit: true,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarder, {
children: child
})
}, child.key))
})
});
};

View File

@@ -0,0 +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 { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { PresenceGroup } from '@fluentui/react-motion';\nimport { MessageBarMotion } from './MessageBarGroup.motions';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState): JSXElement => {\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} unmountOnExit>\n <MotionRefForwarder>{child}</MotionRefForwarder>\n </MessageBarMotion>\n ))}\n </PresenceGroup>\n </state.root>\n );\n};\n"],"names":["assertSlots","PresenceGroup","MessageBarMotion","MotionRefForwarder","renderMessageBarGroup_unstable","state","root","children","map","child","animate","unmountOnExit","key"],"mappings":";;;;+BAaaI;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;6BAG1B,yBAAyB;wCACtB,4BAA4B;AAMtD,uCAAuC,CAACC;QAC7CL,2BAAAA,EAAkCK;IAElC,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACL,0BAAAA,EAAAA;sBACEI,MAAME,QAAQ,CAACC,GAAG,CAACC,CAAAA,QAAAA,WAAAA,OAClB,eAAA,EAACP,wCAAAA,EAAAA;oBAAiCQ,SAASL,MAAMK,OAAO;oBAAEC,aAAa,EAAA;8BACrE,WAAA,OAAA,eAAA,EAACR,+BAAAA,EAAAA;kCAAoBM;;mBADAA,MAAMG,GAAG;;;AAO1C,EAAE"}

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarGroup_unstable", {
enumerable: true,
get: function() {
return useMessageBarGroup_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 useMessageBarGroup_unstable = (props, ref)=>{
if (process.env.NODE_ENV !== 'production') {
_react.Children.forEach(props.children, (c)=>{
if (!/*#__PURE__*/ _react.isValidElement(c) || c.type === _react.Fragment) {
throw new Error("MessageBarGroup: children must be valid MessageBar components. Please ensure you're not using fragments. ");
}
});
}
var _props_children;
const children = _react.Children.map((_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : [], (c)=>/*#__PURE__*/ _react.isValidElement(c) && c.type !== _react.Fragment ? c : null).filter(Boolean);
var _props_animate;
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}), {
elementType: 'div'
}),
children,
animate: (_props_animate = props.animate) !== null && _props_animate !== void 0 ? _props_animate : 'exit-only',
enterStyles: '',
exitStyles: ''
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MessageBarGroupProps, MessageBarGroupState } from './MessageBarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render MessageBarGroup.\n *\n * The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,\n * before being passed to renderMessageBarGroup_unstable.\n *\n * @param props - props from this instance of MessageBarGroup\n * @param ref - reference to root HTMLElement of MessageBarGroup\n */\nexport const useMessageBarGroup_unstable = (\n props: MessageBarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarGroupState => {\n if (process.env.NODE_ENV !== 'production') {\n React.Children.forEach(props.children, c => {\n if (!React.isValidElement(c) || c.type === React.Fragment) {\n throw new Error(\n \"MessageBarGroup: children must be valid MessageBar components. Please ensure you're not using fragments. \",\n );\n }\n });\n }\n\n const children = React.Children.map(props.children ?? [], c =>\n React.isValidElement(c) && c.type !== React.Fragment ? c : null,\n ).filter(Boolean);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n children,\n animate: props.animate ?? 'exit-only',\n enterStyles: '',\n exitStyles: '',\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMessageBarGroup_unstable","props","ref","process","env","NODE_ENV","Children","forEach","children","c","isValidElement","type","Fragment","Error","map","filter","Boolean","components","root","always","elementType","animate","enterStyles","exitStyles"],"mappings":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCAEgB,4BAA4B;AAWpE,oCAAoC,CACzCC,OACAC;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCR,OAAMS,QAAQ,CAACC,OAAO,CAACN,MAAMO,QAAQ,EAAEC,CAAAA;YACrC,IAAI,eAACZ,OAAMa,cAAc,CAACD,MAAMA,EAAEE,IAAI,KAAKd,OAAMe,QAAQ,EAAE;gBACzD,MAAM,IAAIC,MACR;YAEJ;QACF;IACF;QAEoCZ;IAApC,MAAMO,WAAWX,OAAMS,QAAQ,CAACQ,GAAG,CAACb,CAAAA,kBAAAA,MAAMO,QAAAA,AAAQ,MAAA,QAAdP,oBAAAA,KAAAA,IAAAA,kBAAkB,EAAE,EAAEQ,CAAAA,kBACxDZ,OAAMa,cAAc,CAACD,MAAMA,EAAEE,IAAI,KAAKd,OAAMe,QAAQ,GAAGH,IAAI,MAC3DM,MAAM,CAACC;QAeEf;IAbX,OAAO;QACLgB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMnB,oBAAAA,CAAKoB,MAAM,KACfrB,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBZ;QACAa,SAASpB,CAAAA,iBAAAA,MAAMoB,OAAAA,AAAO,MAAA,QAAbpB,mBAAAA,KAAAA,IAAAA,iBAAiB;QAC1BqB,aAAa;QACbC,YAAY;IACd;AACF,EAAE"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarGroupClassNames: function() {
return messageBarGroupClassNames;
},
useMessageBarGroupStyles_unstable: function() {
return useMessageBarGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const messageBarGroupClassNames = {
root: 'fui-MessageBarGroup'
};
const useMessageBarGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(messageBarGroupClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,yBAAyB;;;qCAKY;;;;uBANrB,gBAAgB;AACtC,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AAGU,MAAMC,oCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACzF,OAAOD,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarGroupClassNames: function() {
return messageBarGroupClassNames;
},
useMessageBarGroupStyles_unstable: function() {
return useMessageBarGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const messageBarGroupClassNames = {
root: 'fui-MessageBarGroup'
};
const useMessageBarGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(messageBarGroupClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\n\nexport const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {\n root: 'fui-MessageBarGroup',\n};\n\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */\nexport const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => {\n 'use no memo';\n\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,yBAAAA;;;qCAOAE;;;;uBAXgB,iBAAiB;AAIvC,kCAAwE;IAC7ED,MAAM;AACR,EAAE;AAKK,MAAMC,oCAAoC,CAACC;IAChD;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACxF,OAAOD;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MessageBarTitle", {
enumerable: true,
get: function() {
return MessageBarTitle;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useMessageBarTitle = require("./useMessageBarTitle");
const _renderMessageBarTitle = require("./renderMessageBarTitle");
const _useMessageBarTitleStylesstyles = require("./useMessageBarTitleStyles.styles");
const MessageBarTitle = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMessageBarTitle.useMessageBarTitle_unstable)(props, ref);
(0, _useMessageBarTitleStylesstyles.useMessageBarTitleStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarTitleStyles_unstable')(state);
return (0, _renderMessageBarTitle.renderMessageBarTitle_unstable)(state);
});
MessageBarTitle.displayName = 'MessageBarTitle';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarTitle/MessageBarTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarTitle_unstable } from './useMessageBarTitle';\nimport { renderMessageBarTitle_unstable } from './renderMessageBarTitle';\nimport { useMessageBarTitleStyles_unstable } from './useMessageBarTitleStyles.styles';\nimport type { MessageBarTitleProps } from './MessageBarTitle.types';\n\n/**\n * MessageBarTitle component\n */\nexport const MessageBarTitle: ForwardRefComponent<MessageBarTitleProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarTitle_unstable(props, ref);\n\n useMessageBarTitleStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarTitleStyles_unstable')(state);\n return renderMessageBarTitle_unstable(state);\n});\n\nMessageBarTitle.displayName = 'MessageBarTitle';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarTitle_unstable","renderMessageBarTitle_unstable","useMessageBarTitleStyles_unstable","MessageBarTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;oCAClC,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCR,gDAAAA,EAA4B,qCAAqCQ;IACjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarTitle/MessageBarTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MessageBarTitleSlots = {\n root: Slot<'span'>;\n};\n\n/**\n * MessageBarTitle Props\n */\nexport type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots>;\n\n/**\n * State used in rendering MessageBarTitle\n */\nexport type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAwE"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarTitle: function() {
return _MessageBarTitle.MessageBarTitle;
},
messageBarTitleClassNames: function() {
return _useMessageBarTitleStylesstyles.messageBarTitleClassNames;
},
renderMessageBarTitle_unstable: function() {
return _renderMessageBarTitle.renderMessageBarTitle_unstable;
},
useMessageBarTitleStyles_unstable: function() {
return _useMessageBarTitleStylesstyles.useMessageBarTitleStyles_unstable;
},
useMessageBarTitle_unstable: function() {
return _useMessageBarTitle.useMessageBarTitle_unstable;
}
});
const _MessageBarTitle = require("./MessageBarTitle");
const _renderMessageBarTitle = require("./renderMessageBarTitle");
const _useMessageBarTitle = require("./useMessageBarTitle");
const _useMessageBarTitleStylesstyles = require("./useMessageBarTitleStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarTitle/index.ts"],"sourcesContent":["export { MessageBarTitle } from './MessageBarTitle';\nexport type { MessageBarTitleProps, MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\nexport { renderMessageBarTitle_unstable } from './renderMessageBarTitle';\nexport { useMessageBarTitle_unstable } from './useMessageBarTitle';\nexport { messageBarTitleClassNames, useMessageBarTitleStyles_unstable } from './useMessageBarTitleStyles.styles';\n"],"names":["MessageBarTitle","renderMessageBarTitle_unstable","useMessageBarTitle_unstable","messageBarTitleClassNames","useMessageBarTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAIfG,yDAAyB;;;eAFzBF,qDAA8B;;;eAEHG,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMessageBarTitle_unstable", {
enumerable: true,
get: function() {
return renderMessageBarTitle_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMessageBarTitle_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarTitle/renderMessageBarTitle.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 { MessageBarTitleState, MessageBarTitleSlots } from './MessageBarTitle.types';\n\n/**\n * Render the final JSX of MessageBarTitle\n */\nexport const renderMessageBarTitle_unstable = (state: MessageBarTitleState): JSXElement => {\n assertSlots<MessageBarTitleSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderMessageBarTitle_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,30 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMessageBarTitle_unstable", {
enumerable: true,
get: function() {
return useMessageBarTitle_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 useMessageBarTitle_unstable = (props, ref)=>{
const { titleId } = (0, _messageBarContext.useMessageBarContext)();
return {
components: {
root: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('span', {
ref,
id: titleId,
...props
}), {
elementType: 'span'
})
};
};

View File

@@ -0,0 +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;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;mCAEtC,mCAAmC;AAWjE,MAAMI,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,OAAGJ,uCAAAA;IAEpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,QAAQ;YAC/BK;YACAK,IAAIJ;YACJ,GAAGF,KAAK;QACV,IACA;YAAEO,aAAa;QAAO;IAE1B;AACF,EAAE"}

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarTitleClassNames: function() {
return messageBarTitleClassNames;
},
useMessageBarTitleStyles_unstable: function() {
return useMessageBarTitleStyles_unstable;
}
});
const _react = require("@griffel/react");
const messageBarTitleClassNames = {
root: 'fui-MessageBarTitle'
};
/**
* Styles for the root slot
*/ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r168xkm9", null, [
".r168xkm9{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);}",
".r168xkm9::after{content:\" \";}"
]);
const useMessageBarTitleStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["__resetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;6BAG0B;;;qCAaY;;;;uBAfJ,gBAAgB;AAEvD,MAAMG,4BAA4B;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,iBAAiB,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;CAK7B,CAAC;AAGS,MAAMM,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;IAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACzG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,38 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
messageBarTitleClassNames: function() {
return messageBarTitleClassNames;
},
useMessageBarTitleStyles_unstable: function() {
return useMessageBarTitleStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const messageBarTitleClassNames = {
root: 'fui-MessageBarTitle'
};
/**
* Styles for the root slot
*/ const useRootBaseStyles = (0, _react.makeResetStyles)({
..._reacttheme.typographyStyles.body1Strong,
'::after': {
content: '" "'
}
});
const useMessageBarTitleStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
return state;
};

View File

@@ -0,0 +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;;;;;;;;;;;;6BAOaG;;;qCAiBAK;;;;uBAtBiC,iBAAiB;4BAC9B,wBAAwB;AAIlD,MAAML,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,wBAAoBL,sBAAAA,EAAgB;IACxC,GAAGE,4BAAAA,CAAiBI,WAAW;IAC/B,WAAW;QACTC,SAAS;IACX;AACF;AAKO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,iBAAiBL;IACvBI,MAAML,IAAI,CAACO,SAAS,OAAGV,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEM,gBAAgBD,MAAML,IAAI,CAACO,SAAS;IAExG,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarContextProvider: function() {
return _messageBarContext.MessageBarContextProvider;
},
MessageBarTransitionContextProvider: function() {
return _messageBarTransitionContext.MessageBarTransitionContextProvider;
},
messageBarContextDefaultValue: function() {
return _messageBarContext.messageBarContextDefaultValue;
},
messageBarTransitionContextDefaultValue: function() {
return _messageBarTransitionContext.messageBarTransitionContextDefaultValue;
},
useMessageBarContext: function() {
return _messageBarContext.useMessageBarContext;
},
useMessageBarTransitionContext: function() {
return _messageBarTransitionContext.useMessageBarTransitionContext;
}
});
const _messageBarContext = require("./messageBarContext");
const _messageBarTransitionContext = require("./messageBarTransitionContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { MessageBarContextValue } from './messageBarContext';\nexport { MessageBarContextProvider, messageBarContextDefaultValue, useMessageBarContext } from './messageBarContext';\nexport type { MessageBarTransitionContextValue } from './messageBarTransitionContext';\nexport {\n MessageBarTransitionContextProvider,\n messageBarTransitionContextDefaultValue,\n useMessageBarTransitionContext,\n} from './messageBarTransitionContext';\n"],"names":["MessageBarContextProvider","messageBarContextDefaultValue","useMessageBarContext","MessageBarTransitionContextProvider","messageBarTransitionContextDefaultValue","useMessageBarTransitionContext"],"mappings":";;;;;;;;;;;;eACSA,4CAAyB;;;eAGhCG,gEAAmC;;;eAHDF,gDAA6B;;;eAI/DG,oEAAuC;;;eAJ0BF,uCAAoB;;;eAKrFG,2DAA8B;;;mCAL+D,sBAAsB;6CAM9G,gCAAgC"}

View File

@@ -0,0 +1,36 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MessageBarContextProvider: function() {
return MessageBarContextProvider;
},
messageBarContextDefaultValue: function() {
return messageBarContextDefaultValue;
},
useMessageBarContext: function() {
return useMessageBarContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const messageBarContext = /*#__PURE__*/ _react.createContext(undefined);
const messageBarContextDefaultValue = {
titleId: '',
layout: 'singleline',
actionsRef: /*#__PURE__*/ _react.createRef(),
bodyRef: /*#__PURE__*/ _react.createRef()
};
const MessageBarContextProvider = messageBarContext.Provider;
const useMessageBarContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(messageBarContext)) !== null && _React_useContext !== void 0 ? _React_useContext : messageBarContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/messageBarContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type MessageBarContextValue = {\n layout: 'multiline' | 'singleline' | 'auto';\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n actionsRef: React.MutableRefObject<HTMLDivElement | null>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n bodyRef: React.MutableRefObject<HTMLDivElement | null>;\n titleId: string;\n};\nconst messageBarContext = React.createContext<MessageBarContextValue | undefined>(undefined);\n\nexport const messageBarContextDefaultValue: MessageBarContextValue = {\n titleId: '',\n layout: 'singleline',\n actionsRef: React.createRef(),\n bodyRef: React.createRef(),\n};\n\nexport const MessageBarContextProvider = messageBarContext.Provider;\nexport const useMessageBarContext = (): MessageBarContextValue =>\n React.useContext(messageBarContext) ?? messageBarContextDefaultValue;\n"],"names":["React","messageBarContext","createContext","undefined","messageBarContextDefaultValue","titleId","layout","actionsRef","createRef","bodyRef","MessageBarContextProvider","Provider","useMessageBarContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;6BAqBaU;;;iCAPAN;;;IAQAQ,oBAAAA;;;;;iEApBU,QAAQ;AAU/B,MAAMX,kCAAoBD,OAAME,aAAa,CAAqCC;AAE3E,MAAMC,gCAAwD;IACnEC,SAAS;IACTC,QAAQ;IACRC,0BAAYP,OAAMQ,SAAS;IAC3BC,uBAAST,OAAMQ,SAAS;AAC1B,EAAE;AAEK,MAAME,4BAA4BT,kBAAkBU,QAAQ,CAAC;AAC7D,6BAA6B;QAClCX;WAAAA,CAAAA,oBAAAA,OAAMa,UAAU,CAACZ,kBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAuCI;EAA8B"}

Some files were not shown because too many files have changed in this diff Show More