@fluentui/react-menu 9.6.0 → 9.6.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +69 -7
- package/CHANGELOG.md +30 -8
- package/dist/index.d.ts +2 -4
- package/lib/components/Menu/useMenu.js +9 -28
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +0 -1
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.js +2 -22
- package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +0 -1
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-amd/components/Menu/useMenu.js +10 -27
- package/lib-amd/components/Menu/useMenu.js.map +1 -1
- package/lib-amd/components/MenuItem/MenuItem.types.js.map +1 -1
- package/lib-amd/components/MenuItem/useMenuItem.js +0 -1
- package/lib-amd/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-amd/components/MenuItem/useMenuItemStyles.js +1 -2
- package/lib-amd/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib-amd/components/MenuPopover/useMenuPopover.js +0 -1
- package/lib-amd/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +9 -28
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +0 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +2 -22
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +0 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/package.json +8 -6
|
@@ -50,26 +50,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
50
50
|
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
51
51
|
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
52
52
|
},
|
|
53
|
-
resetButton: {
|
|
54
|
-
B7ck84d: "f1e4lqlz",
|
|
55
|
-
De3pzq: "f1u2r49w",
|
|
56
|
-
sj55zd: "f1ym3bx4",
|
|
57
|
-
Bahqtrf: "f1mo0ibp",
|
|
58
|
-
Be2twd7: "fjoy568",
|
|
59
|
-
Bg96gwp: "fytdu2e",
|
|
60
|
-
g2u3we: "f1p3nwhy",
|
|
61
|
-
h3c5rm: ["f11589ue", "f1pdflbu"],
|
|
62
|
-
B9xav0g: "f1q5o8ev",
|
|
63
|
-
zhjwy3: ["f1pdflbu", "f11589ue"],
|
|
64
|
-
B68tc82: "f1mtd64y",
|
|
65
|
-
Bmxbyg5: "f1y7q3j9",
|
|
66
|
-
z8tnut: "f1g0x7ka",
|
|
67
|
-
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
68
|
-
Byoj8tv: "f1qch9an",
|
|
69
|
-
uwmqm3: ["f1cnd47f", "fhxju0i"],
|
|
70
|
-
Bv0vk6g: "f37px4s",
|
|
71
|
-
fsow6f: "fgusgyc"
|
|
72
|
-
},
|
|
73
53
|
root: {
|
|
74
54
|
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
75
55
|
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
@@ -133,13 +113,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
133
113
|
}, {
|
|
134
114
|
f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
|
|
135
115
|
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
136
|
-
d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".
|
|
116
|
+
d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
|
|
137
117
|
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"]
|
|
138
118
|
});
|
|
139
119
|
/** Applies style classnames to slots */
|
|
140
120
|
const useMenuItemStyles_unstable = state => {
|
|
141
121
|
const styles = useStyles();
|
|
142
|
-
state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root,
|
|
122
|
+
state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
|
|
143
123
|
if (state.content) {
|
|
144
124
|
state.content.className = react_1.mergeClasses(exports.menuItemClassNames.content, styles.content, state.content.className);
|
|
145
125
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAKaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAKaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,IAAI,EAAE,oBAAoB;EAC1BC,SAAS,EAAE,yBAAyB;EACpCC,gBAAgB,EAAE,gCAAgC;EAClDC,OAAO,EAAE,uBAAuB;EAChCC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EA+E1B;AAEF;AACO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAI;EACjE,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGJ,oBAAY,CACjCR,0BAAkB,CAACC,IAAI,EACvBU,MAAM,CAACV,IAAI,EACXU,MAAM,CAACE,cAAc,EACrBH,KAAK,CAACI,QAAQ,IAAIH,MAAM,CAACG,QAAQ,EACjCJ,KAAK,CAACT,IAAI,CAACW,SAAS,CACrB;EAED,IAAIF,KAAK,CAACL,OAAO,EAAE;IACjBK,KAAK,CAACL,OAAO,CAACO,SAAS,GAAGJ,oBAAY,CAACR,0BAAkB,CAACK,OAAO,EAAEM,MAAM,CAACN,OAAO,EAAEK,KAAK,CAACL,OAAO,CAACO,SAAS,CAAC;;EAG7G,IAAIF,KAAK,CAACP,SAAS,EAAE;IACnBO,KAAK,CAACP,SAAS,CAACS,SAAS,GAAGJ,oBAAY,CAACR,0BAAkB,CAACG,SAAS,EAAEO,KAAK,CAACP,SAAS,CAACS,SAAS,CAAC;;EAGnG,IAAIF,KAAK,CAACJ,gBAAgB,EAAE;IAC1BI,KAAK,CAACJ,gBAAgB,CAACM,SAAS,GAAGJ,oBAAY,CAC7CR,0BAAkB,CAACM,gBAAgB,EACnC,CAACI,KAAK,CAACI,QAAQ,IAAIH,MAAM,CAACL,gBAAgB,EAC1CI,KAAK,CAACJ,gBAAgB,CAACM,SAAS,CACjC;;EAGH,IAAIF,KAAK,CAACR,IAAI,EAAE;IACdQ,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGJ,oBAAY,CAACR,0BAAkB,CAACE,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;;EAGjG,IAAIF,KAAK,CAACN,gBAAgB,EAAE;IAC1BM,KAAK,CAACN,gBAAgB,CAACQ,SAAS,GAAGJ,oBAAY,CAC7CR,0BAAkB,CAACI,gBAAgB,EACnCO,MAAM,CAACP,gBAAgB,EACvBM,KAAK,CAACN,gBAAgB,CAACQ,SAAS,CACjC;;EAEHG,mCAA2B,CAACL,KAA8B,CAAC;AAC7D,CAAC;AAtCYV,kCAA0B","names":["exports","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","react_1","useMenuItemStyles_unstable","state","styles","className","focusIndicator","disabled","index_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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
|
|
1
|
+
{"version":3,"mappings":"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","names":["useMenuPopover_unstable","props","ref","popoverRef","menuContext_1","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","useIsSubmenu_1","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","dir","react_shared_contexts_1","CloseArrowKey","keyboard_keys_1","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","index_1","setTimeout","useEffect","clearTimeout","inline","rootProps","react_utilities_1","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n const open = useMenuContext_unstable(context => context.open);\n const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const throttleDispatchTimerRef = React.useRef(0);\n\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n // use DOM listener since react events propagate up the react tree\n // no need to do `contains` logic as menus are all positioned in different portals\n const mouseOverListenerCallbackRef = React.useCallback(\n (node: HTMLElement) => {\n if (node) {\n // Dispatches the custom menu mouse enter event with throttling\n // Needs to trigger on mouseover to support keyboard + mouse together\n // i.e. keyboard opens submenus while cursor is still on the parent\n node.addEventListener('mouseover', e => {\n if (canDispatchCustomEventRef.current) {\n canDispatchCustomEventRef.current = false;\n dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore #16889 Node setTimeout type leaking\n throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n }\n });\n }\n },\n [popoverRef, throttleDispatchTimerRef],\n );\n\n React.useEffect(() => {\n () => clearTimeout(throttleDispatchTimerRef.current);\n }, []);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const rootProps = getNativeElementProps('div', {\n role: 'presentation',\n ...props,\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n });\n\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n\n onMouseEnterOriginal?.(event);\n });\n\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n const key = event.key;\n\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover and Tooltip\n event.stopPropagation();\n }\n }\n\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n }\n\n onKeyDownOriginal?.(event);\n });\n\n return {\n inline,\n components: {\n root: 'div',\n },\n root: rootProps,\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-menu",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.2",
|
|
4
4
|
"description": "Fluent UI menu component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -30,17 +30,19 @@
|
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
32
|
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
33
|
-
"@fluentui/scripts": "*"
|
|
33
|
+
"@fluentui/scripts-api-extractor": "*",
|
|
34
|
+
"@fluentui/scripts-cypress": "*",
|
|
35
|
+
"@fluentui/scripts-tasks": "*"
|
|
34
36
|
},
|
|
35
37
|
"dependencies": {
|
|
36
38
|
"@fluentui/react-aria": "^9.3.5",
|
|
37
39
|
"@fluentui/keyboard-keys": "^9.0.1",
|
|
38
40
|
"@fluentui/react-context-selector": "^9.1.5",
|
|
39
41
|
"@fluentui/react-icons": "^2.0.175",
|
|
40
|
-
"@fluentui/react-portal": "^9.1.
|
|
41
|
-
"@fluentui/react-positioning": "^9.3.
|
|
42
|
-
"@fluentui/react-shared-contexts": "^9.1.
|
|
43
|
-
"@fluentui/react-tabster": "^9.3.
|
|
42
|
+
"@fluentui/react-portal": "^9.1.1",
|
|
43
|
+
"@fluentui/react-positioning": "^9.3.8",
|
|
44
|
+
"@fluentui/react-shared-contexts": "^9.1.5",
|
|
45
|
+
"@fluentui/react-tabster": "^9.3.7",
|
|
44
46
|
"@fluentui/react-theme": "^9.1.5",
|
|
45
47
|
"@fluentui/react-utilities": "^9.4.0",
|
|
46
48
|
"@griffel/react": "^1.5.2",
|