@fluentui/react-menu 0.0.0-nightly-20250528-0406.1 → 0.0.0-nightly-20250529-1800.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -17
- package/lib/components/MenuItem/useMenuItem.js +2 -2
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItemLink/useMenuItemLink.js +1 -0
- package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +1 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +1 -0
- package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +2 -2
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js +1 -0
- package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js +1 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +1 -0
- package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 29 May 2025 18:16:00 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250529-1800.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v0.0.0-nightly-20250529-1800.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.16.7..@fluentui/react-menu_v0.0.0-nightly-
|
|
9
|
+
Thu, 29 May 2025 18:16:00 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.16.7..@fluentui/react-menu_v0.0.0-nightly-20250529-1800.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-positioning to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
27
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
19
|
+
- Bump @fluentui/react-positioning to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
22
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
24
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
25
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
26
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250529-1800.1 ([commit](https://github.com/microsoft/fluentui/commit/652a8b2f97c4ae9df95e33b2d453d2db1982c69e) by beachball)
|
|
28
28
|
|
|
29
29
|
## [9.16.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.16.7)
|
|
30
30
|
|
|
@@ -16,7 +16,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
|
|
|
16
16
|
*/ export const useMenuItem_unstable = (props, ref)=>{
|
|
17
17
|
const isSubmenuTrigger = useMenuTriggerContext_unstable();
|
|
18
18
|
const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
|
|
19
|
-
const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
|
|
19
|
+
const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _, ...rest } = props;
|
|
20
20
|
const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
|
|
21
21
|
hasSubmenu
|
|
22
22
|
});
|
|
@@ -43,7 +43,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
|
|
|
43
43
|
},
|
|
44
44
|
root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
|
|
45
45
|
role: 'menuitem',
|
|
46
|
-
...
|
|
46
|
+
...rest,
|
|
47
47
|
disabled: false,
|
|
48
48
|
disabledFocusable: disabled,
|
|
49
49
|
ref: useMergedRefs(ref, innerRef),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...props,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgB,EAChBC,aAAa,EACbC,wBAAwB,EACxBC,IAAI,EACJC,yBAAyB,QACpB,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,UAAU,QACL,wBAAwB;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,SAIEC,kBAAkB,QACb,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SAASC,qBAAqB,EAAEC,iCAAiC,QAAQ,uCAAuC;AAEhH,MAAMC,mBAAmBR,WAAWJ,oBAAoBC;AACxD,MAAMY,kBAAkBT,WAAWF,mBAAmBC;AAEtD;;CAEC,GACD,OAAO,MAAMW,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,mBAAmBlB;IACzB,MAAMmB,wBAAwBZ,wBAAwBa,CAAAA,UAAWA,QAAQC,kBAAkB;IAC3F,MAAM,EAAEC,KAAK,KAAK,EAAEC,WAAW,KAAK,EAAEC,aAAaN,gBAAgB,EAAEO,iBAAiBN,qBAAqB,EAAE,GAAGH;IAChH,MAAM,EAAEU,QAAQ,EAAEC,aAAa,EAAE,GAAGC,6BAA6B;QAAEJ;IAAW;IAC9E,MAAMK,UAAUtB,wBAAwBa,CAAAA,UAAWA,QAAQS,OAAO;IAClEC,4BAA4B;QAAEC,WAAW,CAAC,CAACf,MAAMgB,OAAO;QAAER;IAAW;IAErE,MAAM,EAAES,GAAG,EAAE,GAAGnC;IAChB,MAAMoC,WAAW3C,MAAM4C,MAAM,CAAuC;IACpE,MAAMC,2BAA2B7C,MAAM4C,MAAM,CAAC;IAE9C,MAAME,QAAuB;QAC3Bb;QACAD;QACAE;QACAa,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,WAAW;YACXC,kBAAkB;YAClBC,SAAS;YACTC,kBAAkB;YAClBZ,SAAS;QACX;QACAO,MAAM5C,KAAKkD,MAAM,CACfnD,yBACE4B,IACAd,mBAAkDc,IAAI;YACpDwB,MAAM;YACN,GAAG9B,KAAK;YACRO,UAAU;YACVwB,mBAAmBxB;YACnBN,KAAKxB,cAAcwB,KAAKiB;YACxBc,WAAWxD,iBAAiByD,CAAAA;oBAC1BjC;iBAAAA,mBAAAA,MAAMgC,SAAS,cAAfhC,uCAAAA,sBAAAA,OAAkBiC;gBAClB,IAAI,CAACA,MAAMC,kBAAkB,MAAOD,CAAAA,MAAME,GAAG,KAAKzC,SAASuC,MAAME,GAAG,KAAK1C,KAAI,GAAI;oBAC/E2B,yBAAyBgB,OAAO,GAAG;gBACrC;YACF;YACAC,aAAa7D,iBAAiByD,CAAAA;oBAK5BjC;gBAJA,IAAIiC,MAAMK,aAAa,CAACC,aAAa,CAACC,aAAa,KAAKP,MAAMK,aAAa,EAAE;wBAC3EpB;qBAAAA,oBAAAA,SAASkB,OAAO,cAAhBlB,wCAAAA,kBAAkBuB,KAAK;gBACzB;iBAEAzC,qBAAAA,MAAMqC,WAAW,cAAjBrC,yCAAAA,wBAAAA,OAAoBiC;YACtB;YACAS,SAASlE,iBAAiByD,CAAAA;oBAYxBjC;gBAXA,IAAI,CAACQ,cAAc,CAACC,gBAAgB;oBAClCI,QAAQoB,OAAO;wBACbU,MAAM;wBACNC,UAAUxB,yBAAyBgB,OAAO;wBAC1CS,QAAQ;wBACRC,MAAM;wBACNb;oBACF;oBACAb,yBAAyBgB,OAAO,GAAG;gBACrC;iBAEApC,iBAAAA,MAAM0C,OAAO,cAAb1C,qCAAAA,oBAAAA,OAAgBiC;YAClB;QACF,KAEF;YAAEc,aAAa;QAAM;QAEvBvB,MAAM7C,KAAKqE,QAAQ,CAAChD,MAAMwB,IAAI,EAAE;YAAEyB,iBAAiBvC;YAAUqC,aAAa;QAAO;QACjFtB,WAAW9C,KAAKqE,QAAQ,CAAChD,MAAMyB,SAAS,EAAE;YACxCwB,iBAAiBtC;YACjBoC,aAAa;QACf;QACArB,kBAAkB/C,KAAKqE,QAAQ,CAAChD,MAAM0B,gBAAgB,EAAE;YACtDuB,iBAAiBzC;YACjB0C,cAAc;gBACZC,UAAUlC,QAAQ,sBAAQ,oBAACpB,wCAAsB,oBAACC;YACpD;YACAiD,aAAa;QACf;QACApB,SAAShD,KAAKqE,QAAQ,CAAChD,MAAM2B,OAAO,EAAE;YACpCsB,iBAAiB,CAAC,CAACjD,MAAMmD,QAAQ;YACjCD,cAAc;gBAAEC,UAAUnD,MAAMmD,QAAQ;YAAC;YACzCJ,aAAa;QACf;QACAnB,kBAAkBjD,KAAKqE,QAAQ,CAAChD,MAAM4B,gBAAgB,EAAE;YAAEmB,aAAa;QAAO;QAC9E/B,SAASrC,KAAKqE,QAAQ,CAAChD,MAAMgB,OAAO,EAAE;YAAE+B,aAAa;QAAO;IAC9D;IACAhE,mBAAmBsC,OAAOH;IAC1B,OAAOG;AACT,EAAE;AAEF;;;CAGC,GACD,MAAMP,8BAA8B,CAACsC;IACnC,MAAM,EAAE5C,UAAU,EAAEO,SAAS,EAAE,GAAGqC;IAClC,MAAMC,qBAAqB1D,2BAA2Ba;IAEtD,MAAM,EAAE8C,YAAY,EAAE,GAAG1D;IAEzBhB,0BAA0B;QACxB,IAAI,CAACyE,oBAAoB;YACvBC,aAAavC;QACf;IACF,GAAG;QAACuC;QAAcvC;QAAWsC;KAAmB;AAClD;AAEA,MAAMzC,+BAA+B,CAACwC;IACpC,MAAM,EAAE5C,UAAU,EAAE,GAAG4C;IACvB,MAAM1C,WAAWpB,4BAA4Bc,CAAAA,UAAWA,QAAQM,QAAQ;IACxE,MAAMC,gBAAgBrB,4BAA4Bc,CAAAA,UAAWA,QAAQO,aAAa;IAClF,MAAM0C,qBAAqB1D,2BAA2Ba;IAEtD,OAAO;QACLE,UAAUA,YAAY,CAAC2C;QACvB1C,eAAeA,iBAAiB,CAAC0C;IACnC;AACF"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content: _, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ...rest\n } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckbox_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n defaultProps: {\n children: <CircleFilled className={circleFilledClassName} />,\n },\n }),\n components: {\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["React","slot","useMenuItemCheckbox_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","baseState","switchIndicator","optional","renderByDefault","elementType","defaultProps","children","className","components"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckbox_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n defaultProps: {\n children: <CircleFilled className={circleFilledClassName} />,\n },\n }),\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["React","slot","useMenuItemCheckbox_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","baseState","switchIndicator","optional","renderByDefault","elementType","defaultProps","children","className","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYN,6BAA6BI,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZC,iBAAiBR,KAAKS,QAAQ,CAACJ,MAAMG,eAAe,EAAE;YACpDE,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,wBAAU,oBAACX;oBAAaY,WAAWX;;YACrC;QACF;QACAY,YAAY;YACV,4DAA4D;YAC5D,GAAGR,UAAUQ,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,7 +25,7 @@ const ChevronLeftIcon = (0, _reacticons.bundleIcon)(_reacticons.ChevronLeftFille
|
|
|
25
25
|
const useMenuItem_unstable = (props, ref)=>{
|
|
26
26
|
const isSubmenuTrigger = (0, _menuTriggerContext.useMenuTriggerContext_unstable)();
|
|
27
27
|
const persistOnClickContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.persistOnItemClick);
|
|
28
|
-
const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
|
|
28
|
+
const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _, ...rest } = props;
|
|
29
29
|
const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
|
|
30
30
|
hasSubmenu
|
|
31
31
|
});
|
|
@@ -52,7 +52,7 @@ const useMenuItem_unstable = (props, ref)=>{
|
|
|
52
52
|
},
|
|
53
53
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
|
|
54
54
|
role: 'menuitem',
|
|
55
|
-
...
|
|
55
|
+
...rest,
|
|
56
56
|
disabled: false,
|
|
57
57
|
disabledFocusable: disabled,
|
|
58
58
|
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...props,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n"],"names":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch","options","isSplitItemTrigger","useIsInMenuSplitGroup","setMultiline","useMenuSplitGroupContext_unstable","useIsomorphicLayoutEffect","useMenuListContext_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n useEventCallback,\n useMergedRefs,\n getIntrinsicElementProps,\n slot,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport {\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonProps,\n useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled = false,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n content: _, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ...rest\n } = props;\n const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n subText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps(\n as,\n useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n role: 'menuitem',\n ...rest,\n disabled: false,\n disabledFocusable: disabled,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseMove: useEventCallback(event => {\n if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n innerRef.current?.focus();\n }\n\n props.onMouseMove?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n }),\n ),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n checkmark: slot.optional(props.checkmark, {\n renderByDefault: hasCheckmarks,\n elementType: 'span',\n }),\n submenuIndicator: slot.optional(props.submenuIndicator, {\n renderByDefault: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n elementType: 'span',\n }),\n content: slot.optional(props.content, {\n renderByDefault: !!props.children,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n subText: slot.optional(props.subText, { elementType: 'span' }),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n const { hasSubmenu, multiline } = options;\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n useIsomorphicLayoutEffect(() => {\n if (!isSplitItemTrigger) {\n setMultiline(multiline);\n }\n }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n const { hasSubmenu } = options;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n return {\n hasIcons: hasIcons && !isSplitItemTrigger,\n hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n };\n};\n"],"names":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","isDefaultPrevented","key","Space","Enter","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch","options","isSplitItemTrigger","useIsInMenuSplitGroup","setMultiline","useMenuSplitGroupContext_unstable","useIsomorphicLayoutEffect","useMenuListContext_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n props: MenuItemLinkProps,\n ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n // casting because the root slot changes from div to a\n const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n // FIXME: casting because the root slot changes from div to a,\n // ideal solution would be to extract common logic from useMenuItem_unstable root\n // and use it in both without assuming element type\n const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n return {\n ...baseState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n role: 'menuitem',\n ..._props,\n }),\n { elementType: 'a' },\n ),\n };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","_props","root","tabIndex","components","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACgD;6BAElC;AAY9B,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAAA,EAAqBH,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMI,SAAS;QAAE,GAAGJ,KAAK;QAAE,GAAIE,UAAUG,IAAI;QAAkCJ;QAAKK,UAAUN,MAAMM,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGJ,SAAS;QACZK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,UAAUK,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,KAAK;YAC5BC,MAAM;YACN,GAAGP,MAAM;QACX,IACA;YAAEQ,aAAa;QAAI;IAEvB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckbox_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n defaultProps: {\n children: <CircleFilled className={circleFilledClassName} />,\n },\n }),\n components: {\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["useMenuItemSwitch_unstable","props","ref","baseState","useMenuItemCheckbox_unstable","switchIndicator","slot","optional","renderByDefault","elementType","defaultProps","children","React","createElement","CircleFilled","className","circleFilledClassName","components"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckbox_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckbox_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n defaultProps: {\n children: <CircleFilled className={circleFilledClassName} />,\n },\n }),\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["useMenuItemSwitch_unstable","props","ref","baseState","useMenuItemCheckbox_unstable","switchIndicator","slot","optional","renderByDefault","elementType","defaultProps","children","React","createElement","CircleFilled","className","circleFilledClassName","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACF;qCAEwB;4BAChB;+CACS;AAW/B,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,YAAYC,IAAAA,iDAAAA,EAA6BH,OAAOC;IACtD,OAAO;QACL,GAAGC,SAAS;QACZE,iBAAiBC,oBAAAA,CAAKC,QAAQ,CAACN,MAAMI,eAAe,EAAE;YACpDG,iBAAiB;YACjBC,aAAa;YACbC,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,wBAAAA,EAAAA;oBAAaC,WAAWC,oDAAAA;;YACrC;QACF;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGd,UAAUc,UAAU;YACvBZ,iBAAiB;QACnB;IACF;AACF"}
|
|
@@ -157,6 +157,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
|
|
|
157
157
|
(0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
|
|
158
158
|
...state,
|
|
159
159
|
components: {
|
|
160
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
160
161
|
...state.components,
|
|
161
162
|
checkmark: 'span',
|
|
162
163
|
submenuIndicator: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","subText","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","__resetStyles","r","s","useSwitchIndicatorStyles","__styles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","mergeClasses","switch","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"names":["circleFilledClassName","menuItemSwitchClassNames","useMenuItemSwitchStyles_unstable","root","icon","content","secondaryContent","switchIndicator","subText","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","__resetStyles","r","s","useSwitchIndicatorStyles","__styles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","mergeClasses","switch","useMenuItemStyles_unstable","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-menu",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250529-1800.1",
|
|
4
4
|
"description": "Fluent UI menu component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,25 +12,25 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@fluentui/react-provider": "0.0.0-nightly-
|
|
15
|
+
"@fluentui/react-provider": "0.0.0-nightly-20250529-1800.1",
|
|
16
16
|
"@fluentui/eslint-plugin": "*",
|
|
17
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
18
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
17
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20250529-1800.1",
|
|
18
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250529-1800.1",
|
|
19
19
|
"@fluentui/scripts-api-extractor": "*",
|
|
20
20
|
"@fluentui/scripts-cypress": "*"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
|
24
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
|
25
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
23
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20250529-1800.1",
|
|
24
|
+
"@fluentui/react-aria": "0.0.0-nightly-20250529-1800.1",
|
|
25
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20250529-1800.1",
|
|
26
26
|
"@fluentui/react-icons": "^2.0.245",
|
|
27
|
-
"@fluentui/react-portal": "0.0.0-nightly-
|
|
28
|
-
"@fluentui/react-positioning": "0.0.0-nightly-
|
|
29
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
30
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
31
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
32
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
27
|
+
"@fluentui/react-portal": "0.0.0-nightly-20250529-1800.1",
|
|
28
|
+
"@fluentui/react-positioning": "0.0.0-nightly-20250529-1800.1",
|
|
29
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20250529-1800.1",
|
|
30
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20250529-1800.1",
|
|
31
|
+
"@fluentui/react-theme": "0.0.0-nightly-20250529-1800.1",
|
|
32
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20250529-1800.1",
|
|
33
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20250529-1800.1",
|
|
34
34
|
"@griffel/react": "^1.5.22",
|
|
35
35
|
"@swc/helpers": "^0.5.1"
|
|
36
36
|
},
|