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

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"}