Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useMenuPopover_unstable } from './useMenuPopover';
import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';
import { renderMenuPopover_unstable } from './renderMenuPopover';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
*/ export const MenuPopover = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useMenuPopover_unstable(props, ref);
useMenuPopoverStyles_unstable(state);
useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state);
return renderMenuPopover_unstable(state);
});
MenuPopover.displayName = 'MenuPopover';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CN,8BAA8BO;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
@@ -0,0 +1,3 @@
/**
* State used in rendering MenuPopover
*/ export { };
@@ -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';\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"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WAOI"}
@@ -0,0 +1,4 @@
export { MenuPopover } from './MenuPopover';
export { renderMenuPopover_unstable } from './renderMenuPopover';
export { useMenuPopover_unstable } from './useMenuPopover';
export { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';
@@ -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"],"rangeMappings":";;;","mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
@@ -0,0 +1,15 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { Portal } from '@fluentui/react-portal';
/**
* Render the final JSX of MenuPopover
*/ export const renderMenuPopover_unstable = (state)=>{
assertSlots(state);
if (state.inline) {
return /*#__PURE__*/ _jsx(state.root, {});
}
return /*#__PURE__*/ _jsx(Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ _jsx(state.root, {})
});
};
@@ -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 { 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) => {\n assertSlots<MenuPopoverSlots>(state);\n\n if (state.inline) {\n return <state.root />;\n }\n\n return (\n <Portal mountNode={state.mountNode}>\n <state.root />\n </Portal>\n );\n};\n"],"names":["assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","mountNode"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,IAAIA,MAAMC,MAAM,EAAE;QAChB,qBAAO,KAACD,MAAME,IAAI;IACpB;IAEA,qBACE,KAACJ;QAAOK,WAAWH,MAAMG,SAAS;kBAChC,cAAA,KAACH,MAAME,IAAI;;AAGjB,EAAE"}
@@ -0,0 +1,118 @@
import * as React from 'react';
import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';
import { useMenuContext_unstable } from '../../contexts/menuContext';
import { dispatchMenuEnterEvent } from '../../utils/index';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useIsSubmenu } from '../../utils/useIsSubmenu';
import { useRestoreFocusSource } from '@fluentui/react-tabster';
/**
* Create the state required to render MenuPopover.
*
* The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
* before being passed to renderMenuPopover_unstable.
*
* @param props - props from this instance of MenuPopover
* @param ref - reference to root HTMLElement of MenuPopover
*/ export const useMenuPopover_unstable = (props, ref)=>{
'use no memo';
const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);
const setOpen = useMenuContext_unstable((context)=>context.setOpen);
const open = useMenuContext_unstable((context)=>context.open);
const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);
const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
const isSubmenu = useIsSubmenu();
const canDispatchCustomEventRef = React.useRef(true);
const restoreFocusSourceAttributes = useRestoreFocusSource();
const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();
const { dir } = useFluent();
const CloseArrowKey = dir === 'ltr' ? ArrowLeft : 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;
dispatchMenuEnterEvent(popoverRef.current, e);
setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);
}
});
}
}, [
popoverRef,
setThrottleTimeout
]);
React.useEffect(()=>{
()=>clearThrottleTimeout();
}, [
clearThrottleTimeout
]);
var _useMenuContext_unstable;
const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
const mountNode = useMenuContext_unstable((context)=>context.mountNode);
const rootProps = slot.always(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: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
}), {
elementType: 'div'
});
const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;
rootProps.onMouseEnter = 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 = useEventCallback((event)=>{
const key = event.key;
if (key === Escape || isSubmenu && 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 === 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,
components: {
root: 'div'
},
root: rootProps
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,93 @@
import { mergeClasses, __styles } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { createSlideStyles } from '@fluentui/react-positioning';
export const menuPopoverClassNames = {
root: 'fui-MenuPopover'
};
const useStyles = /*#__PURE__*/__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",
B93otf3: "f1hdglry",
vin17d: "fo1kyvf",
Ezkn3b: "fetxo7e",
nyiy2g: "f8x1vz1",
swvrvq: "f8g0anz",
Bkovbt3: "fezwn9i",
hgjdhn: "fz5efge",
fsy9dk: "f1ydixl4",
B3ogreh: "f8dgqj5",
jv49x5: "fnyfnr8",
Bk7o48c: "fgw77r4",
Bv12yb3: "ftje0s4",
vcguit: "fxes1gr",
z0t1cu: "fi19xcv",
Bks05zx: "f1mzajhk",
yckwsp: "fgez7cy",
Bvtglag: "fjp4h9y"
}
}, {
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);}", ".f1hdglry{animation-composition:replace,accumulate;}", ".fo1kyvf{animation-duration:var(--durationSlower);}", ".fetxo7e{animation-timing-function:var(--curveDecelerateMid);}", ".f8x1vz1{--fui-positioning-slide-distance-x:0px;}", ".f8g0anz{--fui-positioning-slide-distance-y:10px;}", ".fezwn9i[data-popper-placement^=right]{--fui-positioning-slide-distance-x:-10px;}", ".fz5efge[data-popper-placement^=right]{--fui-positioning-slide-distance-y:0px;}", ".f1ydixl4[data-popper-placement^=bottom]{--fui-positioning-slide-distance-x:0px;}", ".f8dgqj5[data-popper-placement^=bottom]{--fui-positioning-slide-distance-y:-10px;}", ".fnyfnr8[data-popper-placement^=left]{--fui-positioning-slide-distance-x:10px;}", ".fgw77r4[data-popper-placement^=left]{--fui-positioning-slide-distance-y:0px;}", ".ftje0s4{animation-name:f5j8bii,f79suad;}"],
k: ["@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f79suad{from{transform:translate(var(--fui-positioning-slide-distance-x), var(--fui-positioning-slide-distance-y));}}"],
m: [["@media (prefers-reduced-motion){.fxes1gr[data-popper-placement]{animation-composition:replace;}}", {
m: "(prefers-reduced-motion)"
}], ["@media (prefers-reduced-motion){.fi19xcv[data-popper-placement]{animation-duration:1ms;}}", {
m: "(prefers-reduced-motion)"
}], ["@media (prefers-reduced-motion){.f1mzajhk[data-popper-placement]{animation-name:f5j8bii;}}", {
m: "(prefers-reduced-motion)"
}]],
t: ["@supports not (animation-composition: accumulate){.fgez7cy[data-popper-placement]{animation-composition:replace;}}", "@supports not (animation-composition: accumulate){.fjp4h9y[data-popper-placement]{animation-name:f5j8bii;}}"]
});
/**
* Apply styling to the Menu slots based on the state
*/
export const useMenuPopoverStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","__styles","tokens","typographyStyles","createSlideStyles","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","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","vcguit","z0t1cu","Bks05zx","yckwsp","Bvtglag","d","p","k","m","t","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["useMenuPopoverStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createSlideStyles } from '@fluentui/react-positioning';\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 ...createSlideStyles(10)\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"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGhE,SAAS,CAAC,CAAC;EAC1B+D,KAAK,CAAChE,IAAI,CAACkE,SAAS,GAAGxE,YAAY,CAACK,qBAAqB,CAACC,IAAI,EAAEiE,MAAM,CAACjE,IAAI,EAAEgE,KAAK,CAAChE,IAAI,CAACkE,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}