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,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuPopover", {
enumerable: true,
get: function() {
return MenuPopover;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuPopover = require("./useMenuPopover");
const _useMenuPopoverStylesstyles = require("./useMenuPopoverStyles.styles");
const _renderMenuPopover = require("./renderMenuPopover");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuPopover = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuPopover.useMenuPopover_unstable)(props, ref);
(0, _useMenuPopoverStylesstyles.useMenuPopoverStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuPopoverStyles_unstable')(state);
return (0, _renderMenuPopover.renderMenuPopover_unstable)(state);
});
MenuPopover.displayName = 'MenuPopover';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n const state = useMenuPopover_unstable(props, ref);\n\n useMenuPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);\n\n return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHook_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;4CACb,gCAAgC;mCACnC,sBAAsB;qCAGrB,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CN,yDAAAA,EAA8BO;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAON,6CAAAA,EAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MenuPopoverSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n * This option is disregarded for submenus\n */\n inline: boolean;\n\n safeZone?: React.ReactElement | null;\n };\n"],"names":["React"],"mappings":";;;;;iEAEuB,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, {
MenuPopover: function() {
return _MenuPopover.MenuPopover;
},
menuPopoverClassNames: function() {
return _useMenuPopoverStylesstyles.menuPopoverClassNames;
},
renderMenuPopover_unstable: function() {
return _renderMenuPopover.renderMenuPopover_unstable;
},
useMenuPopoverStyles_unstable: function() {
return _useMenuPopoverStylesstyles.useMenuPopoverStyles_unstable;
},
useMenuPopover_unstable: function() {
return _useMenuPopover.useMenuPopover_unstable;
}
});
const _MenuPopover = require("./MenuPopover");
const _renderMenuPopover = require("./renderMenuPopover");
const _useMenuPopover = require("./useMenuPopover");
const _useMenuPopoverStylesstyles = require("./useMenuPopoverStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuPopover_unstable", {
enumerable: true,
get: function() {
return renderMenuPopover_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactportal = require("@fluentui/react-portal");
const renderMenuPopover_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
if (state.inline) {
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}),
state.safeZone
]
});
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactportal.Portal, {
mountNode: state.mountNode,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}),
state.safeZone
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState): JSXElement => {\n assertSlots<MenuPopoverSlots>(state);\n\n if (state.inline) {\n return (\n <>\n <state.root />\n {state.safeZone}\n </>\n );\n }\n\n return (\n <Portal mountNode={state.mountNode}>\n <state.root />\n {state.safeZone}\n </Portal>\n );\n};\n"],"names":["assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","safeZone","mountNode"],"mappings":";;;;+BAUaE;;;;;;4BATb,UAAiD;gCACrB,4BAA4B;6BAGjC,yBAAyB;AAKzC,mCAAmC,CAACC;QACzCH,2BAAAA,EAA8BG;IAE9B,IAAIA,MAAMC,MAAM,EAAE;QAChB,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;kCACE,eAAA,EAACD,MAAME,IAAI,EAAA,CAAA;gBACVF,MAAMG,QAAQ;;;IAGrB;IAEA,OAAA,WAAA,OACE,gBAAA,EAACL,mBAAAA,EAAAA;QAAOM,WAAWJ,MAAMI,SAAS;;8BAChC,eAAA,EAACJ,MAAME,IAAI,EAAA,CAAA;YACVF,MAAMG,QAAQ;;;AAGrB,EAAE"}

View File

@@ -0,0 +1,131 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuPopover_unstable", {
enumerable: true,
get: function() {
return useMenuPopover_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactmotion = require("@fluentui/react-motion");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _menuContext = require("../../contexts/menuContext");
const _menuListContext = require("../../contexts/menuListContext");
const _index = require("../../utils/index");
const useMenuPopover_unstable = (props, ref)=>{
'use no memo';
const safeZone = (0, _menuContext.useMenuContext_unstable)((context)=>context.safeZone);
const popoverRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.menuPopoverRef);
const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
const open = (0, _menuContext.useMenuContext_unstable)((context)=>context.open);
const openOnHover = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnHover);
const triggerRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerRef);
const isSubmenu = (0, _index.useIsSubmenu)();
const shouldCloseOnArrowLeft = (0, _menuListContext.useMenuListContext_unstable)((ctx)=>{
var _ctx_shouldCloseOnArrowLeft;
return (_ctx_shouldCloseOnArrowLeft = ctx.shouldCloseOnArrowLeft) !== null && _ctx_shouldCloseOnArrowLeft !== void 0 ? _ctx_shouldCloseOnArrowLeft : true;
});
const canDispatchCustomEventRef = _react.useRef(true);
const restoreFocusSourceAttributes = (0, _reacttabster.useRestoreFocusSource)();
const [setThrottleTimeout, clearThrottleTimeout] = (0, _reactutilities.useTimeout)();
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
// use DOM listener since react events propagate up the react tree
// no need to do `contains` logic as menus are all positioned in different portals
const mouseOverListenerCallbackRef = _react.useCallback((node)=>{
if (node) {
// Dispatches the custom menu mouse enter event with throttling
// Needs to trigger on mouseover to support keyboard + mouse together
// i.e. keyboard opens submenus while cursor is still on the parent
node.addEventListener('mouseover', (e)=>{
if (canDispatchCustomEventRef.current) {
canDispatchCustomEventRef.current = false;
(0, _index.dispatchMenuEnterEvent)(popoverRef.current, e);
setThrottleTimeout(()=>{
canDispatchCustomEventRef.current = true;
}, 250);
}
});
}
}, [
popoverRef,
setThrottleTimeout
]);
_react.useEffect(()=>{
return ()=>clearThrottleTimeout();
}, [
clearThrottleTimeout
]);
var _useMenuContext_unstable;
const inline = (_useMenuContext_unstable = (0, _menuContext.useMenuContext_unstable)((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
const mountNode = (0, _menuContext.useMenuContext_unstable)((context)=>context.mountNode);
const rootProps = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
role: 'presentation',
...restoreFocusSourceAttributes,
...props,
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, popoverRef, mouseOverListenerCallbackRef, (0, _reactmotion.useMotionForwardedRef)())
}), {
elementType: 'div'
});
const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;
rootProps.onMouseEnter = (0, _reactutilities.useEventCallback)((event)=>{
if (openOnHover || isSubmenu) {
setOpen(event, {
open: true,
keyboard: false,
type: 'menuPopoverMouseEnter',
event
});
}
onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
});
rootProps.onKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
const key = event.key;
if (key === _keyboardkeys.Escape || isSubmenu && shouldCloseOnArrowLeft && key === CloseArrowKey) {
var _popoverRef_current;
if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target)) && !event.isDefaultPrevented()) {
setOpen(event, {
open: false,
keyboard: true,
type: 'menuPopoverKeyDown',
event
});
// stop propagation to avoid conflicting with other elements that listen for `Escape`
// e,g: Dialog, Popover, Menu and Tooltip
event.preventDefault();
}
}
if (key === _keyboardkeys.Tab) {
setOpen(event, {
open: false,
keyboard: true,
type: 'menuPopoverKeyDown',
event
});
if (!isSubmenu) {
var _triggerRef_current;
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
}
}
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
});
return {
inline,
mountNode,
safeZone,
components: {
root: 'div'
},
root: rootProps
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,105 @@
'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, {
menuPopoverClassNames: function() {
return menuPopoverClassNames;
},
useMenuPopoverStyles_unstable: function() {
return useMenuPopoverStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuPopoverClassNames = {
root: 'fui-MenuPopover'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
De3pzq: "fxugw4r",
sj55zd: "f19n0e5",
B7ck84d: "f1ewtqcl",
Bf4jedk: "fl8fusi",
B2u0y6b: "f1kaai3v",
B68tc82: "f1p9o1ba",
a9b677: "f1ahpp82",
E5pizo: "f1hg901r",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fd3pd8h",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f9ggezi",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f1ewtqcl{box-sizing:border-box;}",
".fl8fusi{min-width:138px;}",
".f1kaai3v{max-width:300px;}",
".f1p9o1ba{overflow-x:hidden;}",
".f1ahpp82{width:max-content;}",
".f1hg901r{box-shadow:var(--shadow16);}",
[
".fd3pd8h{padding:4px;}",
{
p: -1
}
],
[
".f9ggezi{border:1px solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}"
]
});
const useMenuPopoverStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuPopoverClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const menuPopoverClassNames = {\n root: 'fui-MenuPopover'\n};\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","De3pzq","sj55zd","B7ck84d","Bf4jedk","B2u0y6b","B68tc82","a9b677","E5pizo","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,qBAAqB;;;IAqBjB4C,6BAA6B;;;;uBAvBL,gBAAgB;AAElD,8BAA8B;IACjC3C,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAejB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAG5C,SAAS,CAAC,CAAC;IAC1B2C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,OAAGnD,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAE6C,MAAM,CAAC7C,IAAI,EAAE4C,KAAK,CAAC5C,IAAI,CAAC8C,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,46 @@
'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, {
menuPopoverClassNames: function() {
return menuPopoverClassNames;
},
useMenuPopoverStyles_unstable: function() {
return useMenuPopoverStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const menuPopoverClassNames = {
root: 'fui-MenuPopover'
};
const useStyles = (0, _react.makeStyles)({
root: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
color: _reacttheme.tokens.colorNeutralForeground1,
boxSizing: 'border-box',
minWidth: '138px',
maxWidth: '300px',
overflowX: 'hidden',
width: 'max-content',
boxShadow: `${_reacttheme.tokens.shadow16}`,
padding: '4px',
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
..._reacttheme.typographyStyles.body1
}
});
const useMenuPopoverStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(menuPopoverClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuPopover/useMenuPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n minWidth: '138px',\n maxWidth: '300px',\n overflowX: 'hidden',\n width: 'max-content',\n boxShadow: `${tokens.shadow16}`,\n padding: '4px',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","borderRadius","borderRadiusMedium","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxSizing","minWidth","maxWidth","overflowX","width","boxShadow","shadow16","padding","border","colorTransparentStroke","body1","useMenuPopoverStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,qBAAAA;;;iCAwBAoB;;;;uBA7B4B,iBAAiB;4BACjB,wBAAwB;AAI1D,8BAAgE;IACrEnB,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,cAAcL,kBAAAA,CAAOM,kBAAkB;QACvCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,WAAW;QACXC,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,OAAO;QACPC,WAAW,GAAGhB,kBAAAA,CAAOiB,QAAQ,EAAE;QAC/BC,SAAS;QACTC,QAAQ,CAAC,UAAU,EAAEnB,kBAAAA,CAAOoB,sBAAsB,EAAE;QACpD,GAAGnB,4BAAAA,CAAiBoB,KAAK;IAC3B;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,OAAG3B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACjG,OAAOF;AACT,EAAE"}