@fluentui/react-positioning 9.3.6 → 9.3.8
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +45 -1
- package/CHANGELOG.md +21 -2
- package/lib/usePositioning.js +3 -3
- package/lib/usePositioning.js.map +1 -1
- package/lib-amd/usePositioning.js +2 -2
- package/lib-amd/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioning.js +2 -2
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/package.json +5 -4
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,51 @@
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Mon, 16 Jan 2023 08:35:43 GMT",
|
6
|
+
"tag": "@fluentui/react-positioning_v9.3.8",
|
7
|
+
"version": "9.3.8",
|
8
|
+
"comments": {
|
9
|
+
"none": [
|
10
|
+
{
|
11
|
+
"author": "martinhochel@microsoft.com",
|
12
|
+
"package": "@fluentui/react-positioning",
|
13
|
+
"commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
|
14
|
+
"comment": "chore: migrate to packaged scripts"
|
15
|
+
}
|
16
|
+
],
|
17
|
+
"patch": [
|
18
|
+
{
|
19
|
+
"author": "beachball",
|
20
|
+
"package": "@fluentui/react-positioning",
|
21
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.1.5",
|
22
|
+
"commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
|
23
|
+
}
|
24
|
+
]
|
25
|
+
}
|
26
|
+
},
|
27
|
+
{
|
28
|
+
"date": "Mon, 09 Jan 2023 14:34:59 GMT",
|
29
|
+
"tag": "@fluentui/react-positioning_v9.3.7",
|
30
|
+
"version": "9.3.7",
|
31
|
+
"comments": {
|
32
|
+
"patch": [
|
33
|
+
{
|
34
|
+
"author": "lingfangao@hotmail.com",
|
35
|
+
"package": "@fluentui/react-positioning",
|
36
|
+
"commit": "42acf190805edde3e32fbbf4adf37046c51f625e",
|
37
|
+
"comment": "fix: setOverrideTarget should be an event callback"
|
38
|
+
},
|
39
|
+
{
|
40
|
+
"author": "beachball",
|
41
|
+
"package": "@fluentui/react-positioning",
|
42
|
+
"comment": "Bump @fluentui/react-utilities to v9.4.0",
|
43
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
44
|
+
}
|
45
|
+
]
|
46
|
+
}
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"date": "Wed, 04 Jan 2023 01:40:20 GMT",
|
6
50
|
"tag": "@fluentui/react-positioning_v9.3.6",
|
7
51
|
"version": "9.3.6",
|
8
52
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,31 @@
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 16 Jan 2023 08:35:43 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.8)
|
8
|
+
|
9
|
+
Mon, 16 Jan 2023 08:35:43 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.7..@fluentui/react-positioning_v9.3.8)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-shared-contexts to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
|
15
|
+
|
16
|
+
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.7)
|
17
|
+
|
18
|
+
Mon, 09 Jan 2023 14:34:59 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.6..@fluentui/react-positioning_v9.3.7)
|
20
|
+
|
21
|
+
### Patches
|
22
|
+
|
23
|
+
- fix: setOverrideTarget should be an event callback ([PR #26157](https://github.com/microsoft/fluentui/pull/26157) by lingfangao@hotmail.com)
|
24
|
+
- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
25
|
+
|
7
26
|
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.6)
|
8
27
|
|
9
|
-
Wed, 04 Jan 2023 01:
|
28
|
+
Wed, 04 Jan 2023 01:40:20 GMT
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.5..@fluentui/react-positioning_v9.3.6)
|
11
30
|
|
12
31
|
### Patches
|
package/lib/usePositioning.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
3
|
-
import { canUseDOM, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
3
|
+
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
4
4
|
import * as React from 'react';
|
5
5
|
import { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';
|
6
6
|
import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware } from './middleware';
|
@@ -34,10 +34,10 @@ export function usePositioning(options) {
|
|
34
34
|
});
|
35
35
|
}
|
36
36
|
}, [enabled, resolvePositioningOptions]);
|
37
|
-
const setOverrideTarget =
|
37
|
+
const setOverrideTarget = useEventCallback(target => {
|
38
38
|
overrideTargetRef.current = target;
|
39
39
|
updatePositionManager();
|
40
|
-
}
|
40
|
+
});
|
41
41
|
React.useImperativeHandle(options.positioningRef, () => ({
|
42
42
|
updatePosition: () => {
|
43
43
|
var _a;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":"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","names":["hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","canUseDOM","useIsomorphicLayoutEffect","React","useCallbackRef","toFloatingUIPlacement","hasAutofocusFilter","hasScrollParent","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","createPositionManager","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","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","setContainer","setArrow","align","arrowPadding","autoSize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","dir","isRtl","strategy","hasScrollableElement","placement","middleware","element","padding","filter","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): 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 = React.useCallback(\n (target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n },\n [updatePositionManager],\n );\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\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('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\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\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
|
1
|
+
{"version":3,"mappings":"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","names":["hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","useCallbackRef","toFloatingUIPlacement","hasAutofocusFilter","hasScrollParent","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","createPositionManager","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","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","setContainer","setArrow","align","arrowPadding","autoSize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","dir","isRtl","strategy","hasScrollableElement","placement","middleware","element","padding","filter","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): 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) => {\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('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\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\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
|
@@ -24,10 +24,10 @@ define(["require", "exports", "tslib", "@floating-ui/dom", "@fluentui/react-shar
|
|
24
24
|
managerRef.current = createPositionManager_1.createPositionManager(tslib_1.__assign({ container: containerRef.current, target: target, arrow: arrowRef.current }, resolvePositioningOptions(containerRef.current, arrowRef.current)));
|
25
25
|
}
|
26
26
|
}, [enabled, resolvePositioningOptions]);
|
27
|
-
var setOverrideTarget =
|
27
|
+
var setOverrideTarget = react_utilities_1.useEventCallback(function (target) {
|
28
28
|
overrideTargetRef.current = target;
|
29
29
|
updatePositionManager();
|
30
|
-
}
|
30
|
+
});
|
31
31
|
React.useImperativeHandle(options.positioningRef, function () { return ({
|
32
32
|
updatePosition: function () { var _a; return (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition(); },
|
33
33
|
setTarget: function (target) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePositioning.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/usePositioning.ts"],"names":[],"mappings":"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","sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): 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 = React.useCallback(\n (target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n },\n [updatePositionManager],\n );\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\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('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\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\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
|
1
|
+
{"version":3,"file":"usePositioning.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/usePositioning.ts"],"names":[],"mappings":";;;;IAuBA;;OAEG;IACH,SAAgB,cAAc,CAAC,OAA8B;QAC3D,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAyB,IAAI,CAAC,CAAC;QAC9D,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAuB,IAAI,CAAC,CAAC;QAC3D,IAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAuB,IAAI,CAAC,CAAC;QACnE,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC,CAAC;QAC5D,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC,CAAC;QAEhD,IAAA,KAAmB,OAAO,QAAZ,EAAd,OAAO,mBAAG,IAAI,KAAA,CAAa;QACnC,IAAM,yBAAyB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;QACjE,IAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC;;YAC9C,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;aAC9B;YACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAE1B,IAAM,MAAM,GAAG,MAAA,iBAAiB,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC;YAE9D,IAAI,OAAO,IAAI,2BAAS,EAAE,IAAI,MAAM,IAAI,YAAY,CAAC,OAAO,EAAE;gBAC5D,UAAU,CAAC,OAAO,GAAG,6CAAqB,oBACxC,SAAS,EAAE,YAAY,CAAC,OAAO,EAC/B,MAAM,QAAA,EACN,KAAK,EAAE,QAAQ,CAAC,OAAO,IACpB,yBAAyB,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,EACpE,CAAC;aACJ;QACH,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC;QAEzC,IAAM,iBAAiB,GAAG,kCAAgB,CAAC,UAAC,MAA4B;YACtE,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;YACnC,qBAAqB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,mBAAmB,CACvB,OAAO,CAAC,cAAc,EACtB,cAAM,OAAA,CAAC;YACL,cAAc,EAAE,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAA,EAAA;YAC1D,SAAS,EAAE,UAAC,MAAqB;gBAC/B,IAAI,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;oBAC3D,IAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;oBACxB,sCAAsC;oBACtC,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;oBAC1F,sCAAsC;oBACtC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;iBACzB;gBAED,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC5B,CAAC;SACF,CAAC,EAbI,CAaJ,EACF,CAAC,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CACpC,CAAC;QAEF,2CAAyB,CAAC;;YACxB,iBAAiB,CAAC,MAAA,OAAO,CAAC,MAAM,mCAAI,IAAI,CAAC,CAAC;QAC5C,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;QAExC,2CAAyB,CAAC;YACxB,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;QAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YACzC,mDAAmD;YACnD,sDAAsD;YACtD,KAAK,CAAC,SAAS,CAAC;;gBACd,IAAI,YAAY,CAAC,OAAO,EAAE;oBACxB,IAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC;oBACzC,IAAM,UAAU,GAAG,MAAA,WAAW,CAAC,aAAa,0CAAE,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,YAAY,EAAE;wBACnG,UAAU,EAAE,0BAAkB;qBAC/B,CAAC,CAAC;oBAEH,OAAO,UAAU,CAAC,QAAQ,EAAE,EAAE;wBAC5B,IAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC;wBACpC,sCAAsC;wBACtC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;wBAChC,sCAAsC;wBACtC,OAAO,CAAC,IAAI,CACV;4BACE,gGAAgG;4BAChG,qGAAqG;4BACrG,2EAA2E;4BAC3E,uEAAuE;4BACvE,IAAI;4BACJ,yFAAyF;4BACzF,oGAAoG;4BACpG,kGAAkG;4BAClG,WAAW;4BACX,8FAA4F;4BAC5F,6FAA6F;4BAC7F,IAAI;4BACJ,2FAA2F;4BAC3F,2CAA2C;4BAC3C,8EAA8E;yBAC/E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;qBACH;iBACF;gBACD,mDAAmD;gBACnD,0EAA0E;gBAC1E,uDAAuD;YACzD,CAAC,EAAE,EAAE,CAAC,CAAC;SACR;QAED,IAAM,SAAS,GAAG,sBAAc,CAAgB,IAAI,EAAE,UAAA,MAAM;YAC1D,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM,EAAE;gBAChC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC3B,qBAAqB,EAAE,CAAC;aACzB;QACH,CAAC,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,sBAAc,CAAqB,IAAI,EAAE,UAAA,SAAS;YACrE,IAAI,YAAY,CAAC,OAAO,KAAK,SAAS,EAAE;gBACtC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;gBACjC,qBAAqB,EAAE,CAAC;aACzB;QACH,CAAC,CAAC,CAAC;QAEH,IAAM,QAAQ,GAAG,sBAAc,CAAqB,IAAI,EAAE,UAAA,KAAK;YAC7D,IAAI,QAAQ,CAAC,OAAO,KAAK,KAAK,EAAE;gBAC9B,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;gBACzB,qBAAqB,EAAE,CAAC;aACzB;QACH,CAAC,CAAC,CAAC;QAEH,kEAAkE;QAClE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAClF,CAAC;IA5HD,wCA4HC;IASD,SAAS,qBAAqB,CAAC,OAA2B;QAEtD,IAAA,KAAK,GAWH,OAAO,MAXJ,EACL,YAAY,GAUV,OAAO,aAVG,EACZ,QAAQ,GASN,OAAO,SATD,EACR,WAAW,GAQT,OAAO,YARE,EACX,YAAY,GAOV,OAAO,aAPG,EACZ,MAAM,GAMJ,OAAO,OANH,EACN,gBAAgB,GAKd,OAAO,iBALO,EAChB,MAAM,GAIJ,OAAO,OAJH,EACN,QAAQ,GAGN,OAAO,SAHD,EACgB,aAAa,GAEnC,OAAO,uBAF4B,EACrC,aAAa,GACX,OAAO,cADI,CACH;QAEJ,IAAA,GAAG,GAAK,0CAAS,EAAE,IAAhB,CAAiB;QAC5B,IAAM,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC;QAC5B,IAAM,QAAQ,GAAa,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QAEhE,OAAO,KAAK,CAAC,WAAW,CACtB,UAAC,SAA6B,EAAE,KAAyB;YACvD,IAAM,oBAAoB,GAAG,uBAAe,CAAC,SAAS,CAAC,CAAC;YAExD,IAAM,SAAS,GAAG,6BAAqB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;YAChE,IAAM,UAAU,GAAG;gBACjB,MAAM,IAAI,mBAAgB,CAAC,MAAM,CAAC;gBAClC,WAAW,IAAI,wBAAqB,EAAE;gBACtC,CAAC,MAAM,IAAI,iBAAc,CAAC,EAAE,SAAS,WAAA,EAAE,YAAY,cAAA,EAAE,oBAAoB,sBAAA,EAAE,CAAC;gBAC5E,kBAAe,CAAC,EAAE,SAAS,WAAA,EAAE,oBAAoB,sBAAA,EAAE,gBAAgB,kBAAA,EAAE,aAAa,eAAA,EAAE,CAAC;gBACrF,QAAQ,IAAI,oBAAiB,CAAC,QAAQ,EAAE,EAAE,SAAS,WAAA,EAAE,gBAAgB,kBAAA,EAAE,CAAC;gBACxE,yBAAsB,EAAE;gBACxB,KAAK,IAAI,WAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;gBACnE,UAAc,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;gBAC/C,UAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;aACxC,CAAC,MAAM,CAAC,OAAO,CAAiB,CAAC;YAElC,OAAO;gBACL,SAAS,WAAA;gBACT,UAAU,YAAA;gBACV,QAAQ,UAAA;aACT,CAAC;QACJ,CAAC,EACD;YACE,KAAK;YACL,YAAY;YACZ,QAAQ;YACR,WAAW;YACX,aAAa;YACb,YAAY;YACZ,KAAK;YACL,MAAM;YACN,gBAAgB;YAChB,MAAM;YACN,QAAQ;YACR,QAAQ;SACT,CACF,CAAC;IACJ,CAAC","sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): 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) => {\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('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\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\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
|
@@ -40,10 +40,10 @@ function usePositioning(options) {
|
|
40
40
|
});
|
41
41
|
}
|
42
42
|
}, [enabled, resolvePositioningOptions]);
|
43
|
-
const setOverrideTarget =
|
43
|
+
const setOverrideTarget = react_utilities_1.useEventCallback(target => {
|
44
44
|
overrideTargetRef.current = target;
|
45
45
|
updatePositionManager();
|
46
|
-
}
|
46
|
+
});
|
47
47
|
React.useImperativeHandle(options.positioningRef, () => ({
|
48
48
|
updatePosition: () => {
|
49
49
|
var _a;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":"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","names":["usePositioning","options","managerRef","React","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","react_utilities_1","createPositionManager_1","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","utils_1","nextNode","node","currentNode","join","setContainer","setArrow","exports","align","arrowPadding","autoSize","coverTarget","flipBoundary","offset","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","dir","react_shared_contexts_1","isRtl","strategy","hasScrollableElement","placement","middleware","middleware_1","dom_1","element","padding","filter","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): 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 = React.useCallback(\n (target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n },\n [updatePositionManager],\n );\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement) => {\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('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\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\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAQA;AACA;AAQA;AAEA;;;AAGA,SAAgBA,cAAc,CAACC,OAA8B;EAC3D,MAAMC,UAAU,GAAGC,KAAK,CAACC,MAAM,CAAyB,IAAI,CAAC;EAC7D,MAAMC,SAAS,GAAGF,KAAK,CAACC,MAAM,CAAuB,IAAI,CAAC;EAC1D,MAAME,iBAAiB,GAAGH,KAAK,CAACC,MAAM,CAAuB,IAAI,CAAC;EAClE,MAAMG,YAAY,GAAGJ,KAAK,CAACC,MAAM,CAAqB,IAAI,CAAC;EAC3D,MAAMI,QAAQ,GAAGL,KAAK,CAACC,MAAM,CAAqB,IAAI,CAAC;EAEvD,MAAM;IAAEK,OAAO,GAAG;EAAI,CAAE,GAAGR,OAAO;EAClC,MAAMS,yBAAyB,GAAGC,qBAAqB,CAACV,OAAO,CAAC;EAChE,MAAMW,qBAAqB,GAAGT,KAAK,CAACU,WAAW,CAAC,MAAK;;IACnD,IAAIX,UAAU,CAACY,OAAO,EAAE;MACtBZ,UAAU,CAACY,OAAO,CAACC,OAAO,EAAE;;IAE9Bb,UAAU,CAACY,OAAO,GAAG,IAAI;IAEzB,MAAME,MAAM,GAAG,uBAAiB,CAACF,OAAO,mCAAIT,SAAS,CAACS,OAAO;IAE7D,IAAIL,OAAO,IAAIQ,2BAAS,EAAE,IAAID,MAAM,IAAIT,YAAY,CAACO,OAAO,EAAE;MAC5DZ,UAAU,CAACY,OAAO,GAAGI,6CAAqB,CAAC;QACzCC,SAAS,EAAEZ,YAAY,CAACO,OAAO;QAC/BE,MAAM;QACNI,KAAK,EAAEZ,QAAQ,CAACM,OAAO;QACvB,GAAGJ,yBAAyB,CAACH,YAAY,CAACO,OAAO,EAAEN,QAAQ,CAACM,OAAO;OACpE,CAAC;;EAEN,CAAC,EAAE,CAACL,OAAO,EAAEC,yBAAyB,CAAC,CAAC;EAExC,MAAMW,iBAAiB,GAAGJ,kCAAgB,CAAED,MAA4B,IAAI;IAC1EV,iBAAiB,CAACQ,OAAO,GAAGE,MAAM;IAClCJ,qBAAqB,EAAE;EACzB,CAAC,CAAC;EAEFT,KAAK,CAACmB,mBAAmB,CACvBrB,OAAO,CAACsB,cAAc,EACtB,OAAO;IACLC,cAAc,EAAE,MAAK;MAAA;MAAC,uBAAU,CAACV,OAAO,0CAAEU,cAAc,EAAE;IAAA;IAC1DC,SAAS,EAAGT,MAAqB,IAAI;MACnC,IAAIf,OAAO,CAACe,MAAM,IAAIU,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QAC3D,MAAMC,GAAG,GAAG,IAAIC,KAAK,EAAE;QACvB;QACAC,OAAO,CAACC,IAAI,CAAC,2EAA2E,CAAC;QACzF;QACAD,OAAO,CAACC,IAAI,CAACH,GAAG,CAACI,KAAK,CAAC;;MAGzBZ,iBAAiB,CAACL,MAAM,CAAC;IAC3B;GACD,CAAC,EACF,CAACf,OAAO,CAACe,MAAM,EAAEK,iBAAiB,CAAC,CACpC;EAEDJ,2CAAyB,CAAC,MAAK;;IAC7BI,iBAAiB,CAAC,aAAO,CAACL,MAAM,mCAAI,IAAI,CAAC;EAC3C,CAAC,EAAE,CAACf,OAAO,CAACe,MAAM,EAAEK,iBAAiB,CAAC,CAAC;EAEvCJ,2CAAyB,CAAC,MAAK;IAC7BL,qBAAqB,EAAE;EACzB,CAAC,EAAE,CAACA,qBAAqB,CAAC,CAAC;EAE3B,IAAIc,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC;IACA;IACAzB,KAAK,CAAC+B,SAAS,CAAC,MAAK;;MACnB,IAAI3B,YAAY,CAACO,OAAO,EAAE;QACxB,MAAMqB,WAAW,GAAG5B,YAAY,CAACO,OAAO;QACxC,MAAMsB,UAAU,GAAG,iBAAW,CAACC,aAAa,0CAAEC,gBAAgB,CAACH,WAAW,EAAEI,UAAU,CAACC,YAAY,EAAE;UACnGC,UAAU,EAAEC;SACb,CAAC;QAEF,OAAON,UAAU,CAACO,QAAQ,EAAE,EAAE;UAC5B,MAAMC,IAAI,GAAGR,UAAU,CAACS,WAAW;UACnC;UACAd,OAAO,CAACC,IAAI,CAAC,WAAW,EAAEY,IAAI,CAAC;UAC/B;UACAb,OAAO,CAACC,IAAI,CACV,CACE,gGAAgG,EAChG,qGAAqG,EACrG,2EAA2E,EAC3E,uEAAuE,EACvE,IAAI,EACJ,yFAAyF,EACzF,oGAAoG,EACpG,kGAAkG,EAClG,WAAW,EACX,4FAA4F,EAC5F,6FAA6F,EAC7F,IAAI,EACJ,2FAA2F,EAC3F,2CAA2C,EAC3C,8EAA8E,CAC/E,CAACc,IAAI,CAAC,GAAG,CAAC,CACZ;;;MAGL;MACA;MACA;IACF,CAAC,EAAE,EAAE,CAAC;;EAGR,MAAMrB,SAAS,GAAGiB,sBAAc,CAAgB,IAAI,EAAE1B,MAAM,IAAG;IAC7D,IAAIX,SAAS,CAACS,OAAO,KAAKE,MAAM,EAAE;MAChCX,SAAS,CAACS,OAAO,GAAGE,MAAM;MAC1BJ,qBAAqB,EAAE;;EAE3B,CAAC,CAAC;EAEF,MAAMmC,YAAY,GAAGL,sBAAc,CAAqB,IAAI,EAAEvB,SAAS,IAAG;IACxE,IAAIZ,YAAY,CAACO,OAAO,KAAKK,SAAS,EAAE;MACtCZ,YAAY,CAACO,OAAO,GAAGK,SAAS;MAChCP,qBAAqB,EAAE;;EAE3B,CAAC,CAAC;EAEF,MAAMoC,QAAQ,GAAGN,sBAAc,CAAqB,IAAI,EAAEtB,KAAK,IAAG;IAChE,IAAIZ,QAAQ,CAACM,OAAO,KAAKM,KAAK,EAAE;MAC9BZ,QAAQ,CAACM,OAAO,GAAGM,KAAK;MACxBR,qBAAqB,EAAE;;EAE3B,CAAC,CAAC;EAEF;EACA,OAAO;IAAEP,SAAS,EAAEoB,SAAS;IAAElB,YAAY,EAAEwC,YAAY;IAAEvC,QAAQ,EAAEwC;EAAQ,CAAE;AACjF;AA5HAC;AAqIA,SAAStC,qBAAqB,CAACV,OAA2B;EACxD,MAAM;IACJiD,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,MAAM;IACNC,gBAAgB;IAChBC,MAAM;IACNC,QAAQ;IACRC,sBAAsB,EAAEC,aAAa;IACrCC;EAAa,CACd,GAAG5D,OAAO;EAEX,MAAM;IAAE6D;EAAG,CAAE,GAAGC,0CAAS,EAAE;EAC3B,MAAMC,KAAK,GAAGF,GAAG,KAAK,KAAK;EAC3B,MAAMG,QAAQ,GAAaJ,aAAa,GAAG,OAAO,GAAG,UAAU;EAE/D,OAAO1D,KAAK,CAACU,WAAW,CACtB,CAACM,SAA6B,EAAEC,KAAyB,KAAI;IAC3D,MAAM8C,oBAAoB,GAAGxB,uBAAe,CAACvB,SAAS,CAAC;IAEvD,MAAMgD,SAAS,GAAGzB,6BAAqB,CAACQ,KAAK,EAAEQ,QAAQ,EAAEM,KAAK,CAAC;IAC/D,MAAMI,UAAU,GAAG,CACjBb,MAAM,IAAIc,mBAAgB,CAACd,MAAM,CAAC,EAClCF,WAAW,IAAIgB,wBAAqB,EAAE,EACtC,CAACZ,MAAM,IAAIY,iBAAc,CAAC;MAAElD,SAAS;MAAEmC,YAAY;MAAEY;IAAoB,CAAE,CAAC,EAC5EG,kBAAe,CAAC;MAAElD,SAAS;MAAE+C,oBAAoB;MAAEV,gBAAgB;MAAEI;IAAa,CAAE,CAAC,EACrFR,QAAQ,IAAIiB,oBAAiB,CAACjB,QAAQ,EAAE;MAAEjC,SAAS;MAAEqC;IAAgB,CAAE,CAAC,EACxEa,yBAAsB,EAAE,EACxBjD,KAAK,IAAIkD,WAAe,CAAC;MAAEC,OAAO,EAAEnD,KAAK;MAAEoD,OAAO,EAAErB;IAAY,CAAE,CAAC,EACnEmB,UAAc,CAAC;MAAEL,QAAQ,EAAE;IAAiB,CAAE,CAAC,EAC/CK,UAAc,CAAC;MAAEL,QAAQ,EAAE;IAAS,CAAE,CAAC,CACxC,CAACQ,MAAM,CAACC,OAAO,CAAiB;IAEjC,OAAO;MACLP,SAAS;MACTC,UAAU;MACVH;KACD;EACH,CAAC,EACD,CACEf,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXO,aAAa,EACbN,YAAY,EACZU,KAAK,EACLT,MAAM,EACNC,gBAAgB,EAChBC,MAAM,EACNC,QAAQ,EACRO,QAAQ,CACT,CACF;AACH","names":["usePositioning","options","managerRef","React","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","target","react_utilities_1","createPositionManager_1","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","utils_1","nextNode","node","currentNode","join","setContainer","setArrow","exports","align","arrowPadding","autoSize","coverTarget","flipBoundary","offset","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","dir","react_shared_contexts_1","isRtl","strategy","hasScrollableElement","placement","middleware","middleware_1","dom_1","element","padding","filter","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-positioning/src/usePositioning.ts"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\n\n/**\n * @internal\n */\nexport function usePositioning(options: UsePositioningOptions): 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) => {\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('<Popper>:', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n '<Popper>: ^ 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\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\ninterface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n positionFixed,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const strategy: Strategy = positionFixed ? 'fixed' : 'absolute';\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n const middleware = [\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement }),\n shiftMiddleware({ container, hasScrollableElement, overflowBoundary, disableTether }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n ].filter(Boolean) as Middleware[];\n\n return {\n placement,\n middleware,\n strategy,\n };\n },\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n strategy,\n ],\n );\n}\n"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.3.
|
3
|
+
"version": "9.3.8",
|
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",
|
@@ -24,13 +24,14 @@
|
|
24
24
|
},
|
25
25
|
"devDependencies": {
|
26
26
|
"@fluentui/eslint-plugin": "*",
|
27
|
-
"@fluentui/scripts": "*"
|
27
|
+
"@fluentui/scripts-api-extractor": "*",
|
28
|
+
"@fluentui/scripts-tasks": "*"
|
28
29
|
},
|
29
30
|
"dependencies": {
|
30
31
|
"@floating-ui/dom": "^1.0.0",
|
31
|
-
"@fluentui/react-shared-contexts": "^9.1.
|
32
|
+
"@fluentui/react-shared-contexts": "^9.1.5",
|
32
33
|
"@fluentui/react-theme": "^9.1.5",
|
33
|
-
"@fluentui/react-utilities": "^9.
|
34
|
+
"@fluentui/react-utilities": "^9.4.0",
|
34
35
|
"@griffel/react": "^1.5.2",
|
35
36
|
"tslib": "^2.1.0"
|
36
37
|
},
|