@fluentui/react-positioning 9.22.2 → 9.22.3
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
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.22.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.3)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:41 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.2..@fluentui/react-positioning_v9.22.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.22.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.2)
|
|
8
18
|
|
|
9
|
-
Tue, 26 May 2026 09:
|
|
19
|
+
Tue, 26 May 2026 09:39:32 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.1..@fluentui/react-positioning_v9.22.2)
|
|
11
21
|
|
|
12
22
|
### Patches
|
package/lib/usePositioning.js
CHANGED
|
@@ -8,7 +8,6 @@ import { useCallbackRef, hasAutofocusFilter } from './utils';
|
|
|
8
8
|
/**
|
|
9
9
|
* @internal
|
|
10
10
|
*/ export function usePositioning(options) {
|
|
11
|
-
'use no memo';
|
|
12
11
|
const managerRef = React.useRef(null);
|
|
13
12
|
const targetRef = React.useRef(null);
|
|
14
13
|
const overrideTargetRef = React.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n
|
|
1
|
+
{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
|
|
@@ -17,7 +17,6 @@ const _createPositionManager = require("./createPositionManager");
|
|
|
17
17
|
const _usePositioningOptions = require("./usePositioningOptions");
|
|
18
18
|
const _utils = require("./utils");
|
|
19
19
|
function usePositioning(options) {
|
|
20
|
-
'use no memo';
|
|
21
20
|
const managerRef = _react.useRef(null);
|
|
22
21
|
const targetRef = _react.useRef(null);
|
|
23
22
|
const overrideTargetRef = _react.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n 'use no memo';\n\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
|
3
|
-
"version": "9.22.
|
|
3
|
+
"version": "9.22.3",
|
|
4
4
|
"description": "A react wrapper around Popper.js for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"@floating-ui/devtools": "^0.2.3",
|
|
17
17
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
18
18
|
"@fluentui/react-theme": "^9.2.1",
|
|
19
|
-
"@fluentui/react-utilities": "^9.26.
|
|
19
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
20
20
|
"@griffel/react": "^1.5.32",
|
|
21
21
|
"@swc/helpers": "^0.5.1",
|
|
22
22
|
"use-sync-external-store": "^1.2.0"
|