@fluentui/react-menu 9.14.6 → 9.14.7
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +153 -137
- package/lib/components/MenuPopover/useMenuPopover.js +8 -8
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +7 -7
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/package.json +12 -12
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
|
|
3
|
-
import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
|
+
import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';
|
|
4
4
|
import { useMenuContext_unstable } from '../../contexts/menuContext';
|
|
5
5
|
import { dispatchMenuEnterEvent } from '../../utils/index';
|
|
6
6
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
@@ -22,8 +22,8 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
|
|
|
22
22
|
const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
|
|
23
23
|
const isSubmenu = useIsSubmenu();
|
|
24
24
|
const canDispatchCustomEventRef = React.useRef(true);
|
|
25
|
-
const throttleDispatchTimerRef = React.useRef(0);
|
|
26
25
|
const restoreFocusSourceAttributes = useRestoreFocusSource();
|
|
26
|
+
const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();
|
|
27
27
|
const { dir } = useFluent();
|
|
28
28
|
const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
|
|
29
29
|
// use DOM listener since react events propagate up the react tree
|
|
@@ -37,19 +37,19 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
|
|
|
37
37
|
if (canDispatchCustomEventRef.current) {
|
|
38
38
|
canDispatchCustomEventRef.current = false;
|
|
39
39
|
dispatchMenuEnterEvent(popoverRef.current, e);
|
|
40
|
-
|
|
41
|
-
// @ts-ignore #16889 Node setTimeout type leaking
|
|
42
|
-
throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);
|
|
40
|
+
setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);
|
|
43
41
|
}
|
|
44
42
|
});
|
|
45
43
|
}
|
|
46
44
|
}, [
|
|
47
45
|
popoverRef,
|
|
48
|
-
|
|
46
|
+
setThrottleTimeout
|
|
49
47
|
]);
|
|
50
48
|
React.useEffect(()=>{
|
|
51
|
-
()=>
|
|
52
|
-
}, [
|
|
49
|
+
()=>clearThrottleTimeout();
|
|
50
|
+
}, [
|
|
51
|
+
clearThrottleTimeout
|
|
52
|
+
]);
|
|
53
53
|
var _useMenuContext_unstable;
|
|
54
54
|
const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
|
|
55
55
|
const mountNode = useMenuContext_unstable((context)=>context.mountNode);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } 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';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\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 triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const
|
|
1
|
+
{"version":3,"sources":["useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } 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';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\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 triggerRef = useMenuContext_unstable(context => context.triggerRef);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\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 setThrottleTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n }\n });\n }\n },\n [popoverRef, setThrottleTimeout],\n );\n\n React.useEffect(() => {\n () => clearThrottleTimeout();\n }, [clearThrottleTimeout]);\n\n const inline = useMenuContext_unstable(context => context.inline) ?? false;\n const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n const rootProps = slot.always(\n getIntrinsicElementProps('div', {\n role: 'presentation',\n ...restoreFocusSourceAttributes,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n );\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover || isSubmenu) {\n setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n }\n onMouseEnterOriginal?.(event);\n });\n rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n const key = event.key;\n if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n if (open && popoverRef.current?.contains(event.target as HTMLElement) && !event.isDefaultPrevented()) {\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, Menu and Tooltip\n event.preventDefault();\n }\n }\n if (key === Tab) {\n setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n if (!isSubmenu) {\n triggerRef.current?.focus();\n }\n }\n onKeyDownOriginal?.(event);\n });\n return { inline, mountNode, components: { root: 'div' }, root: rootProps };\n};\n"],"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useTimeout","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useRestoreFocusSource","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","restoreFocusSourceAttributes","setThrottleTimeout","clearThrottleTimeout","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","useEffect","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","isDefaultPrevented","preventDefault","focus","components","root"],"mappings":"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"}
|
|
@@ -25,8 +25,8 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
|
25
25
|
const triggerRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerRef);
|
|
26
26
|
const isSubmenu = (0, _useIsSubmenu.useIsSubmenu)();
|
|
27
27
|
const canDispatchCustomEventRef = _react.useRef(true);
|
|
28
|
-
const throttleDispatchTimerRef = _react.useRef(0);
|
|
29
28
|
const restoreFocusSourceAttributes = (0, _reacttabster.useRestoreFocusSource)();
|
|
29
|
+
const [setThrottleTimeout, clearThrottleTimeout] = (0, _reactutilities.useTimeout)();
|
|
30
30
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
31
31
|
const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
|
|
32
32
|
// use DOM listener since react events propagate up the react tree
|
|
@@ -40,19 +40,19 @@ const useMenuPopover_unstable = (props, ref)=>{
|
|
|
40
40
|
if (canDispatchCustomEventRef.current) {
|
|
41
41
|
canDispatchCustomEventRef.current = false;
|
|
42
42
|
(0, _index.dispatchMenuEnterEvent)(popoverRef.current, e);
|
|
43
|
-
|
|
44
|
-
// @ts-ignore #16889 Node setTimeout type leaking
|
|
45
|
-
throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);
|
|
43
|
+
setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);
|
|
46
44
|
}
|
|
47
45
|
});
|
|
48
46
|
}
|
|
49
47
|
}, [
|
|
50
48
|
popoverRef,
|
|
51
|
-
|
|
49
|
+
setThrottleTimeout
|
|
52
50
|
]);
|
|
53
51
|
_react.useEffect(()=>{
|
|
54
|
-
()=>
|
|
55
|
-
}, [
|
|
52
|
+
()=>clearThrottleTimeout();
|
|
53
|
+
}, [
|
|
54
|
+
clearThrottleTimeout
|
|
55
|
+
]);
|
|
56
56
|
var _useMenuContext_unstable;
|
|
57
57
|
const inline = (_useMenuContext_unstable = (0, _menuContext.useMenuContext_unstable)((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
|
|
58
58
|
const mountNode = (0, _menuContext.useMenuContext_unstable)((context)=>context.mountNode);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\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';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\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 */ export const useMenuPopover_unstable = (props, ref)=>{\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 triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const
|
|
1
|
+
{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot, useTimeout } from '@fluentui/react-utilities';\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';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\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 */ export const useMenuPopover_unstable = (props, ref)=>{\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 triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n const isSubmenu = useIsSubmenu();\n const canDispatchCustomEventRef = React.useRef(true);\n const restoreFocusSourceAttributes = useRestoreFocusSource();\n const [setThrottleTimeout, clearThrottleTimeout] = useTimeout();\n const { dir } = useFluent();\n const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\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((node)=>{\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, e);\n setThrottleTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n }\n });\n }\n }, [\n popoverRef,\n setThrottleTimeout\n ]);\n React.useEffect(()=>{\n ()=>clearThrottleTimeout();\n }, [\n clearThrottleTimeout\n ]);\n var _useMenuContext_unstable;\n const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n const rootProps = slot.always(getIntrinsicElementProps('div', {\n role: 'presentation',\n ...restoreFocusSourceAttributes,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n }), {\n elementType: 'div'\n });\n const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n rootProps.onMouseEnter = useEventCallback((event)=>{\n if (openOnHover || isSubmenu) {\n setOpen(event, {\n open: true,\n keyboard: false,\n type: 'menuPopoverMouseEnter',\n event\n });\n }\n onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n });\n rootProps.onKeyDown = useEventCallback((event)=>{\n const key = event.key;\n if (key === Escape || isSubmenu && key === CloseArrowKey) {\n var _popoverRef_current;\n if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target)) && !event.isDefaultPrevented()) {\n setOpen(event, {\n open: false,\n keyboard: true,\n type: 'menuPopoverKeyDown',\n event\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n event.preventDefault();\n }\n }\n if (key === Tab) {\n setOpen(event, {\n open: false,\n keyboard: true,\n type: 'menuPopoverKeyDown',\n event\n });\n if (!isSubmenu) {\n var _triggerRef_current;\n (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n }\n }\n onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n });\n return {\n inline,\n mountNode,\n components: {\n root: 'div'\n },\n root: rootProps\n };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","restoreFocusSourceAttributes","useRestoreFocusSource","setThrottleTimeout","clearThrottleTimeout","useTimeout","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","useEffect","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","isDefaultPrevented","preventDefault","Tab","_triggerRef_current","focus","components","root"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-menu",
|
|
3
|
-
"version": "9.14.
|
|
3
|
+
"version": "9.14.7",
|
|
4
4
|
"description": "Fluent UI menu component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"just": "just-scripts",
|
|
22
22
|
"lint": "just-scripts lint",
|
|
23
23
|
"start": "yarn storybook",
|
|
24
|
-
"storybook": "
|
|
24
|
+
"storybook": "yarn --cwd ../stories storybook",
|
|
25
25
|
"test": "jest --passWithNoTests",
|
|
26
|
-
"type-check": "
|
|
27
|
-
"generate-api": "just-scripts generate-api"
|
|
28
|
-
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
|
26
|
+
"type-check": "just-scripts type-check",
|
|
27
|
+
"generate-api": "just-scripts generate-api"
|
|
29
28
|
},
|
|
30
29
|
"devDependencies": {
|
|
30
|
+
"@fluentui/react-provider": "*",
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
32
|
"@fluentui/react-conformance": "*",
|
|
33
33
|
"@fluentui/react-conformance-griffel": "*",
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
40
|
-
"@fluentui/react-aria": "^9.
|
|
41
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
40
|
+
"@fluentui/react-aria": "^9.12.0",
|
|
41
|
+
"@fluentui/react-context-selector": "^9.1.61",
|
|
42
42
|
"@fluentui/react-icons": "^2.0.239",
|
|
43
|
-
"@fluentui/react-portal": "^9.4.
|
|
44
|
-
"@fluentui/react-positioning": "^9.15.
|
|
43
|
+
"@fluentui/react-portal": "^9.4.27",
|
|
44
|
+
"@fluentui/react-positioning": "^9.15.3",
|
|
45
45
|
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
46
|
-
"@fluentui/react-tabster": "^9.21.
|
|
46
|
+
"@fluentui/react-tabster": "^9.21.5",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.19",
|
|
48
|
-
"@fluentui/react-utilities": "^9.18.
|
|
49
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
48
|
+
"@fluentui/react-utilities": "^9.18.10",
|
|
49
|
+
"@fluentui/react-jsx-runtime": "^9.0.39",
|
|
50
50
|
"@griffel/react": "^1.5.22",
|
|
51
51
|
"@swc/helpers": "^0.5.1"
|
|
52
52
|
},
|