@fluentui/react-positioning 9.10.1 → 9.10.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +12 -2
- package/lib/middleware/matchTargetSize.js +1 -1
- package/lib/middleware/matchTargetSize.js.map +1 -1
- package/lib/usePositioning.js +10 -4
- package/lib/usePositioning.js.map +1 -1
- package/lib/utils/devtools.js +27 -0
- package/lib/utils/devtools.js.map +1 -0
- package/lib-commonjs/middleware/matchTargetSize.js +1 -1
- package/lib-commonjs/middleware/matchTargetSize.js.map +1 -1
- package/lib-commonjs/usePositioning.js +9 -4
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/utils/devtools.js +37 -0
- package/lib-commonjs/utils/devtools.js.map +1 -0
- package/package.json +3 -2
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 Thu, 30 Nov 2023 13:37:54 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.2)
|
8
|
+
|
9
|
+
Thu, 30 Nov 2023 13:37:54 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.1..@fluentui/react-positioning_v9.10.2)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- feat: adds floating-ui-devtools support ([PR #29905](https://github.com/microsoft/fluentui/pull/29905) by bernardo.sunderhus@gmail.com)
|
15
|
+
- fix: Infinite reset loop in matchTargetSize middleware ([PR #29915](https://github.com/microsoft/fluentui/pull/29915) by lingfan.gao@microsoft.com)
|
16
|
+
|
7
17
|
## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.1)
|
8
18
|
|
9
|
-
Mon, 20 Nov 2023 09:
|
19
|
+
Mon, 20 Nov 2023 09:55:10 GMT
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.0..@fluentui/react-positioning_v9.10.1)
|
11
21
|
|
12
22
|
### Patches
|
@@ -2,7 +2,7 @@ export function matchTargetSize() {
|
|
2
2
|
return {
|
3
3
|
name: 'matchTargetSize',
|
4
4
|
fn: async (middlewareArguments)=>{
|
5
|
-
const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSizeAttempt = false } } = middlewareArguments;
|
5
|
+
const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;
|
6
6
|
if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {
|
7
7
|
return {};
|
8
8
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["matchTargetSize.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\n\nexport function matchTargetSize(): Middleware {\n return {\n name: 'matchTargetSize',\n fn: async middlewareArguments => {\n const {\n rects: { reference: referenceRect, floating: floatingRect },\n elements: { floating: floatingElement },\n middlewareData: { matchTargetSizeAttempt = false },\n } = middlewareArguments;\n\n if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n return {};\n }\n\n const { width } = referenceRect;\n floatingElement.style.width = `${width}px`;\n floatingElement.style.boxSizing = 'border-box';\n\n return {\n data: { matchTargetSizeAttempt: true },\n reset: {\n rects: true,\n },\n };\n },\n };\n}\n"],"names":["matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","boxSizing","data","reset"],"mappings":"AAEA,OAAO,SAASA;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,
|
1
|
+
{"version":3,"sources":["matchTargetSize.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\n\nexport function matchTargetSize(): Middleware {\n return {\n name: 'matchTargetSize',\n fn: async middlewareArguments => {\n const {\n rects: { reference: referenceRect, floating: floatingRect },\n elements: { floating: floatingElement },\n middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} },\n } = middlewareArguments;\n\n if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n return {};\n }\n\n const { width } = referenceRect;\n floatingElement.style.width = `${width}px`;\n floatingElement.style.boxSizing = 'border-box';\n\n return {\n data: { matchTargetSizeAttempt: true },\n reset: {\n rects: true,\n },\n };\n },\n };\n}\n"],"names":["matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","boxSizing","data","reset"],"mappings":"AAEA,OAAO,SAASA;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,EAAEX,iBAAiB,EAAEY,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAC7E,GAAGT;YAEJ,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACxE,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,EAAEA,MAAM,EAAE,CAAC;YAC1CH,gBAAgBI,KAAK,CAACC,SAAS,GAAG;YAElC,OAAO;gBACLC,MAAM;oBAAEJ,wBAAwB;gBAAK;gBACrCK,OAAO;oBACLb,OAAO;gBACT;YACF;QACF;IACF;AACF"}
|
package/lib/usePositioning.js
CHANGED
@@ -5,6 +5,8 @@ import * as React from 'react';
|
|
5
5
|
import { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent, normalizeAutoSize } from './utils';
|
6
6
|
import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, resetMaxSize as resetMaxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware, matchTargetSize as matchTargetSizeMiddleware } from './middleware';
|
7
7
|
import { createPositionManager } from './createPositionManager';
|
8
|
+
import { middleware as devtoolsMiddleware } from 'floating-ui-devtools';
|
9
|
+
import { devtoolsCallback } from './utils/devtools';
|
8
10
|
/**
|
9
11
|
* @internal
|
10
12
|
*/ export function usePositioning(options) {
|
@@ -135,7 +137,7 @@ import { createPositionManager } from './createPositionManager';
|
|
135
137
|
function usePositioningOptions(options) {
|
136
138
|
const { align, arrowPadding, autoSize: rawAutoSize, coverTarget, flipBoundary, offset, overflowBoundary, pinned, position, unstable_disableTether: disableTether, // eslint-disable-next-line deprecation/deprecation
|
137
139
|
positionFixed, strategy, overflowBoundaryPadding, fallbackPositions, useTransform, matchTargetSize } = options;
|
138
|
-
const { dir } = useFluent();
|
140
|
+
const { dir, targetDocument } = useFluent();
|
139
141
|
const isRtl = dir === 'rtl';
|
140
142
|
const positionStrategy = (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute';
|
141
143
|
const autoSize = normalizeAutoSize(rawAutoSize);
|
@@ -175,7 +177,8 @@ function usePositioningOptions(options) {
|
|
175
177
|
}),
|
176
178
|
hideMiddleware({
|
177
179
|
strategy: 'escaped'
|
178
|
-
})
|
180
|
+
}),
|
181
|
+
process.env.NODE_ENV !== 'production' && targetDocument && devtoolsMiddleware(targetDocument, devtoolsCallback(options))
|
179
182
|
].filter(Boolean);
|
180
183
|
const placement = toFloatingUIPlacement(align, position, isRtl);
|
181
184
|
return {
|
@@ -184,7 +187,9 @@ function usePositioningOptions(options) {
|
|
184
187
|
strategy: positionStrategy,
|
185
188
|
useTransform
|
186
189
|
};
|
187
|
-
},
|
190
|
+
}, // Options is missing here, but it's not required
|
191
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
192
|
+
[
|
188
193
|
align,
|
189
194
|
arrowPadding,
|
190
195
|
autoSize,
|
@@ -200,6 +205,7 @@ function usePositioningOptions(options) {
|
|
200
205
|
overflowBoundaryPadding,
|
201
206
|
fallbackPositions,
|
202
207
|
useTransform,
|
203
|
-
matchTargetSize
|
208
|
+
matchTargetSize,
|
209
|
+
targetDocument
|
204
210
|
]);
|
205
211
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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, normalizeAutoSize } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n resetMaxSize as resetMaxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n matchTargetSize as matchTargetSizeMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\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) => {\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 }, []);\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\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize: rawAutoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n // eslint-disable-next-line deprecation/deprecation\n positionFixed,\n strategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n } = options;\n\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const positionStrategy: Strategy = strategy ?? positionFixed ? 'fixed' : 'absolute';\n const autoSize = normalizeAutoSize(rawAutoSize);\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const middleware = [\n autoSize && resetMaxSizeMiddleware(autoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl,\n }),\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 const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy: positionStrategy,\n useTransform,\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 positionStrategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n ],\n );\n}\n"],"names":["hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","useCallbackRef","toFloatingUIPlacement","hasAutofocusFilter","hasScrollParent","normalizeAutoSize","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","resetMaxSize","resetMaxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","matchTargetSize","matchTargetSizeMiddleware","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","rawAutoSize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","dir","isRtl","positionStrategy","hasScrollableElement","middleware","element","padding","filter","Boolean","placement"],"mappings":"AAAA,SAASA,QAAQC,cAAc,EAAEC,SAASC,eAAe,QAAQ,mBAAmB;AAEpF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACnG,YAAYC,WAAW,QAAQ;AAQ/B,SAASC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,eAAe,EAAEC,iBAAiB,QAAQ,UAAU;AACxH,SACEC,SAASC,eAAe,EACxBC,QAAQC,cAAc,EACtBC,eAAeC,qBAAqB,EACpCC,WAAWC,iBAAiB,EAC5BC,gBAAgBC,sBAAsB,EACtCC,UAAUC,gBAAgB,EAC1BC,gBAAgBC,sBAAsB,EACtCC,mBAAmBC,yBAAyB,QACvC,eAAe;AACtB,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE;;CAEC,GACD,OAAO,SAASC,eAAeC,OAA8C;IAC3E,MAAMC,aAAazB,MAAM0B,MAAM,CAAyB;IACxD,MAAMC,YAAY3B,MAAM0B,MAAM,CAAuB;IACrD,MAAME,oBAAoB5B,MAAM0B,MAAM,CAAuB;IAC7D,MAAMG,eAAe7B,MAAM0B,MAAM,CAAqB;IACtD,MAAMI,WAAW9B,MAAM0B,MAAM,CAAqB;IAElD,MAAM,EAAEK,UAAU,IAAI,EAAE,GAAGP;IAC3B,MAAMQ,4BAA4BC,sBAAsBT;IACxD,MAAMU,wBAAwBlC,MAAMmC,WAAW,CAAC;QAC9C,IAAIV,WAAWW,OAAO,EAAE;YACtBX,WAAWW,OAAO,CAACC,OAAO;QAC5B;QACAZ,WAAWW,OAAO,GAAG;YAENR;QAAf,MAAMU,SAASV,CAAAA,6BAAAA,kBAAkBQ,OAAO,cAAzBR,wCAAAA,6BAA6BD,UAAUS,OAAO;QAE7D,IAAIL,WAAWlC,eAAeyC,UAAUT,aAAaO,OAAO,EAAE;YAC5DX,WAAWW,OAAO,GAAGd,sBAAsB;gBACzCiB,WAAWV,aAAaO,OAAO;gBAC/BE;gBACA7C,OAAOqC,SAASM,OAAO;gBACvB,GAAGJ,0BAA0BH,aAAaO,OAAO,EAAEN,SAASM,OAAO,CAAC;YACtE;QACF;IACF,GAAG;QAACL;QAASC;KAA0B;IAEvC,MAAMQ,oBAAoB1C,iBAAiB,CAACwC;QAC1CV,kBAAkBQ,OAAO,GAAGE;QAC5BJ;IACF;IAEAlC,MAAMyC,mBAAmB,CACvBjB,QAAQkB,cAAc,EACtB,IAAO,CAAA;YACLC,gBAAgB;oBAAMlB;wBAAAA,sBAAAA,WAAWW,OAAO,cAAlBX,0CAAAA,oBAAoBkB,cAAc;;YACxDC,WAAW,CAACN;gBACV,IAAId,QAAQc,MAAM,IAAIO,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;oBAC3D,MAAMC,MAAM,IAAIC;oBAChB,sCAAsC;oBACtCC,QAAQC,IAAI,CAAC;oBACb,sCAAsC;oBACtCD,QAAQC,IAAI,CAACH,IAAII,KAAK;gBACxB;gBAEAZ,kBAAkBF;YACpB;QACF,CAAA,GACA;QAACd,QAAQc,MAAM;QAAEE;KAAkB;IAGrCzC,0BAA0B;YACNyB;QAAlBgB,kBAAkBhB,CAAAA,kBAAAA,QAAQc,MAAM,cAAdd,6BAAAA,kBAAkB;IACtC,GAAG;QAACA,QAAQc,MAAM;QAAEE;KAAkB;IAEtCzC,0BAA0B;QACxBmC;IACF,GAAG;QAACA;KAAsB;IAE1B,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,mDAAmD;QACnD,sDAAsD;QACtD/C,MAAMqD,SAAS,CAAC;YACd,IAAIxB,aAAaO,OAAO,EAAE;oBAELkB;gBADnB,MAAMA,cAAczB,aAAaO,OAAO;gBACxC,MAAMmB,cAAaD,6BAAAA,YAAYE,aAAa,cAAzBF,iDAAAA,2BAA2BG,gBAAgB,CAACH,aAAaI,WAAWC,YAAY,EAAE;oBACnGC,YAAYzD;gBACd;gBAEA,MAAOoD,WAAWM,QAAQ,GAAI;oBAC5B,MAAMC,OAAOP,WAAWQ,WAAW;oBACnC,sCAAsC;oBACtCb,QAAQC,IAAI,CAAC,aAAaW;oBAC1B,sCAAsC;oBACtCZ,QAAQC,IAAI,CACV;wBACE;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA,CAAC,0FAA0F,CAAC;wBAC5F;wBACA;wBACA;wBACA;wBACA;qBACD,CAACa,IAAI,CAAC;gBAEX;YACF;QACA,mDAAmD;QACnD,0EAA0E;QAC5E,GAAG,EAAE;IACP;IAEA,MAAMpB,YAAY3C,eAA8B,MAAMqC,CAAAA;QACpD,IAAIX,UAAUS,OAAO,KAAKE,QAAQ;YAChCX,UAAUS,OAAO,GAAGE;YACpBJ;QACF;IACF;IAEA,MAAM+B,eAAehE,eAAmC,MAAMsC,CAAAA;QAC5D,IAAIV,aAAaO,OAAO,KAAKG,WAAW;YACtCV,aAAaO,OAAO,GAAGG;YACvBL;QACF;IACF;IAEA,MAAMgC,WAAWjE,eAAmC,MAAMR,CAAAA;QACxD,IAAIqC,SAASM,OAAO,KAAK3C,OAAO;YAC9BqC,SAASM,OAAO,GAAG3C;YACnByC;QACF;IACF;IAEA,kEAAkE;IAClE,OAAO;QAAEP,WAAWiB;QAAWf,cAAcoC;QAAcnC,UAAUoC;IAAS;AAChF;AAEA,SAASjC,sBAAsBT,OAA2B;IACxD,MAAM,EACJ2C,KAAK,EACLC,YAAY,EACZC,UAAUC,WAAW,EACrB5D,WAAW,EACX6D,YAAY,EACZvD,MAAM,EACNwD,gBAAgB,EAChBC,MAAM,EACNC,QAAQ,EACRC,wBAAwBC,aAAa,EACrC,mDAAmD;IACnDC,aAAa,EACbC,QAAQ,EACRC,uBAAuB,EACvBC,iBAAiB,EACjBC,YAAY,EACZ7D,eAAe,EAChB,GAAGI;IAEJ,MAAM,EAAE0D,GAAG,EAAE,GAAGtF;IAChB,MAAMuF,QAAQD,QAAQ;IACtB,MAAME,mBAA6BN,CAAAA,qBAAAA,sBAAAA,WAAYD,aAAY,IAAI,UAAU;IACzE,MAAMR,WAAWhE,kBAAkBiE;IAEnC,OAAOtE,MAAMmC,WAAW,CACtB,CAACI,WAA+B9C;QAC9B,MAAM4F,uBAAuBjF,gBAAgBmC;QAE7C,MAAM+C,aAAa;YACjBjB,YAAYtD,uBAAuBsD;YACnCjD,mBAAmBC;YACnBL,UAAUC,iBAAiBD;YAC3BN,eAAeC;YACf,CAAC8D,UAAUhE,eAAe;gBAAE8B;gBAAWgC;gBAAcc;gBAAsBF;gBAAOH;YAAkB;YACpGzE,gBAAgB;gBACdgC;gBACA8C;gBACAb;gBACAI;gBACAG;gBACAI;YACF;YACAd,YAAYxD,kBAAkBwD,UAAU;gBAAE9B;gBAAWiC;YAAiB;YACtErD;YACA1B,SAASC,gBAAgB;gBAAE6F,SAAS9F;gBAAO+F,SAASpB;YAAa;YACjE5E,eAAe;gBAAEsF,UAAU;YAAkB;YAC7CtF,eAAe;gBAAEsF,UAAU;YAAU;SACtC,CAACW,MAAM,CAACC;QAET,MAAMC,YAAYzF,sBAAsBiE,OAAOO,UAAUS;QAEzD,OAAO;YACLQ;YACAL;YACAR,UAAUM;YACVH;QACF;IACF,GACA;QACEd;QACAC;QACAC;QACA3D;QACAkE;QACAL;QACAY;QACAnE;QACAwD;QACAC;QACAC;QACAU;QACAL;QACAC;QACAC;QACA7D;KACD;AAEL"}
|
1
|
+
{"version":3,"sources":["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, normalizeAutoSize } from './utils';\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n resetMaxSize as resetMaxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n matchTargetSize as matchTargetSizeMiddleware,\n} from './middleware';\nimport { createPositionManager } from './createPositionManager';\nimport { middleware as devtoolsMiddleware } from 'floating-ui-devtools';\nimport { devtoolsCallback } from './utils/devtools';\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) => {\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 }, []);\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\nfunction usePositioningOptions(options: PositioningOptions) {\n const {\n align,\n arrowPadding,\n autoSize: rawAutoSize,\n coverTarget,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n unstable_disableTether: disableTether,\n // eslint-disable-next-line deprecation/deprecation\n positionFixed,\n strategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n } = options;\n\n const { dir, targetDocument } = useFluent();\n const isRtl = dir === 'rtl';\n const positionStrategy: Strategy = strategy ?? positionFixed ? 'fixed' : 'absolute';\n const autoSize = normalizeAutoSize(rawAutoSize);\n\n return React.useCallback(\n (container: HTMLElement | null, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const middleware = [\n autoSize && resetMaxSizeMiddleware(autoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl,\n }),\n autoSize && maxSizeMiddleware(autoSize, { container, overflowBoundary }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n process.env.NODE_ENV !== 'production' &&\n targetDocument &&\n devtoolsMiddleware(targetDocument, devtoolsCallback(options)),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy: positionStrategy,\n useTransform,\n };\n },\n // Options is missing here, but it's not required\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n positionStrategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n targetDocument,\n ],\n );\n}\n"],"names":["hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","useCallbackRef","toFloatingUIPlacement","hasAutofocusFilter","hasScrollParent","normalizeAutoSize","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","resetMaxSize","resetMaxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","matchTargetSize","matchTargetSizeMiddleware","createPositionManager","middleware","devtoolsMiddleware","devtoolsCallback","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","rawAutoSize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","dir","targetDocument","isRtl","positionStrategy","hasScrollableElement","element","padding","filter","Boolean","placement"],"mappings":"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"}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
2
|
+
import { listScrollParents } from './listScrollParents';
|
3
|
+
import { fromFloatingUIPlacement } from './fromFloatingUIPlacement';
|
4
|
+
export const devtoolsCallback = (options)=>(middlewareState)=>{
|
5
|
+
const { elements: { floating, reference } } = middlewareState;
|
6
|
+
const scrollParentsSet = new Set();
|
7
|
+
if (isHTMLElement(reference)) {
|
8
|
+
listScrollParents(reference).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
|
9
|
+
}
|
10
|
+
listScrollParents(floating).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
|
11
|
+
const flipBoundaries = Array.isArray(options.flipBoundary) ? options.flipBoundary : isHTMLElement(options.flipBoundary) ? [
|
12
|
+
options.flipBoundary
|
13
|
+
] : [];
|
14
|
+
const overflowBoundaries = Array.isArray(options.overflowBoundary) ? options.overflowBoundary : isHTMLElement(options.overflowBoundary) ? [
|
15
|
+
options.overflowBoundary
|
16
|
+
] : [];
|
17
|
+
return {
|
18
|
+
type: 'FluentUIMiddleware',
|
19
|
+
middlewareState,
|
20
|
+
options,
|
21
|
+
initialPlacement: fromFloatingUIPlacement(middlewareState.initialPlacement),
|
22
|
+
placement: fromFloatingUIPlacement(middlewareState.placement),
|
23
|
+
flipBoundaries,
|
24
|
+
overflowBoundaries,
|
25
|
+
scrollParents: Array.from(scrollParentsSet)
|
26
|
+
};
|
27
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["devtools.ts"],"sourcesContent":["import { MiddlewareArguments } from '@floating-ui/dom';\nimport { PositioningOptions } from '../types';\nimport { FluentUI } from 'floating-ui-devtools';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './listScrollParents';\nimport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\n\nexport const devtoolsCallback =\n (options: PositioningOptions) =>\n (middlewareState: MiddlewareArguments): FluentUI.MiddlewareData => {\n const {\n elements: { floating, reference },\n } = middlewareState;\n const scrollParentsSet = new Set<HTMLElement>();\n if (isHTMLElement(reference)) {\n listScrollParents(reference).forEach(scrollParent => scrollParentsSet.add(scrollParent));\n }\n listScrollParents(floating).forEach(scrollParent => scrollParentsSet.add(scrollParent));\n const flipBoundaries: HTMLElement[] = Array.isArray(options.flipBoundary)\n ? options.flipBoundary\n : isHTMLElement(options.flipBoundary)\n ? [options.flipBoundary]\n : [];\n const overflowBoundaries: HTMLElement[] = Array.isArray(options.overflowBoundary)\n ? options.overflowBoundary\n : isHTMLElement(options.overflowBoundary)\n ? [options.overflowBoundary]\n : [];\n return {\n type: 'FluentUIMiddleware',\n middlewareState,\n options,\n initialPlacement: fromFloatingUIPlacement(middlewareState.initialPlacement),\n placement: fromFloatingUIPlacement(middlewareState.placement),\n flipBoundaries,\n overflowBoundaries,\n scrollParents: Array.from(scrollParentsSet),\n };\n };\n"],"names":["isHTMLElement","listScrollParents","fromFloatingUIPlacement","devtoolsCallback","options","middlewareState","elements","floating","reference","scrollParentsSet","Set","forEach","scrollParent","add","flipBoundaries","Array","isArray","flipBoundary","overflowBoundaries","overflowBoundary","type","initialPlacement","placement","scrollParents","from"],"mappings":"AAGA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,OAAO,MAAMC,mBACX,CAACC,UACD,CAACC;QACC,MAAM,EACJC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAE,EAClC,GAAGH;QACJ,MAAMI,mBAAmB,IAAIC;QAC7B,IAAIV,cAAcQ,YAAY;YAC5BP,kBAAkBO,WAAWG,OAAO,CAACC,CAAAA,eAAgBH,iBAAiBI,GAAG,CAACD;QAC5E;QACAX,kBAAkBM,UAAUI,OAAO,CAACC,CAAAA,eAAgBH,iBAAiBI,GAAG,CAACD;QACzE,MAAME,iBAAgCC,MAAMC,OAAO,CAACZ,QAAQa,YAAY,IACpEb,QAAQa,YAAY,GACpBjB,cAAcI,QAAQa,YAAY,IAClC;YAACb,QAAQa,YAAY;SAAC,GACtB,EAAE;QACN,MAAMC,qBAAoCH,MAAMC,OAAO,CAACZ,QAAQe,gBAAgB,IAC5Ef,QAAQe,gBAAgB,GACxBnB,cAAcI,QAAQe,gBAAgB,IACtC;YAACf,QAAQe,gBAAgB;SAAC,GAC1B,EAAE;QACN,OAAO;YACLC,MAAM;YACNf;YACAD;YACAiB,kBAAkBnB,wBAAwBG,gBAAgBgB,gBAAgB;YAC1EC,WAAWpB,wBAAwBG,gBAAgBiB,SAAS;YAC5DR;YACAI;YACAK,eAAeR,MAAMS,IAAI,CAACf;QAC5B;IACF,EAAE"}
|
@@ -12,7 +12,7 @@ function matchTargetSize() {
|
|
12
12
|
return {
|
13
13
|
name: 'matchTargetSize',
|
14
14
|
fn: async (middlewareArguments)=>{
|
15
|
-
const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSizeAttempt = false } } = middlewareArguments;
|
15
|
+
const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;
|
16
16
|
if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {
|
17
17
|
return {};
|
18
18
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["matchTargetSize.js"],"sourcesContent":["export function matchTargetSize() {\n return {\n name: 'matchTargetSize',\n fn: async (middlewareArguments)=>{\n const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSizeAttempt = false } } = middlewareArguments;\n if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n return {};\n }\n const { width } = referenceRect;\n floatingElement.style.width = `${width}px`;\n floatingElement.style.boxSizing = 'border-box';\n return {\n data: {\n matchTargetSizeAttempt: true\n },\n reset: {\n rects: true\n }\n };\n }\n };\n}\n"],"names":["matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","boxSizing","data","reset"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA;IACZ,OAAO;QACHC,MAAM;QACNC,IAAI,OAAOC;YACP,MAAM,EAAEC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAAEC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EAAEC,gBAAgB,
|
1
|
+
{"version":3,"sources":["matchTargetSize.js"],"sourcesContent":["export function matchTargetSize() {\n return {\n name: 'matchTargetSize',\n fn: async (middlewareArguments)=>{\n const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;\n if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n return {};\n }\n const { width } = referenceRect;\n floatingElement.style.width = `${width}px`;\n floatingElement.style.boxSizing = 'border-box';\n return {\n data: {\n matchTargetSizeAttempt: true\n },\n reset: {\n rects: true\n }\n };\n }\n };\n}\n"],"names":["matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","boxSizing","data","reset"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA;IACZ,OAAO;QACHC,MAAM;QACNC,IAAI,OAAOC;YACP,MAAM,EAAEC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAAEC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EAAEC,gBAAgB,EAAEX,iBAAiB,EAAEY,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,GAAGT;YAC/L,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACtE,OAAO,CAAC;YACZ;YACA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,EAAEA,MAAM,EAAE,CAAC;YAC1CH,gBAAgBI,KAAK,CAACC,SAAS,GAAG;YAClC,OAAO;gBACHC,MAAM;oBACFJ,wBAAwB;gBAC5B;gBACAK,OAAO;oBACHb,OAAO;gBACX;YACJ;QACJ;IACJ;AACJ"}
|
@@ -16,6 +16,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
16
16
|
const _utils = require("./utils");
|
17
17
|
const _middleware = require("./middleware");
|
18
18
|
const _createPositionManager = require("./createPositionManager");
|
19
|
+
const _floatinguidevtools = require("floating-ui-devtools");
|
20
|
+
const _devtools = require("./utils/devtools");
|
19
21
|
function usePositioning(options) {
|
20
22
|
const managerRef = _react.useRef(null);
|
21
23
|
const targetRef = _react.useRef(null);
|
@@ -143,7 +145,7 @@ function usePositioning(options) {
|
|
143
145
|
}
|
144
146
|
function usePositioningOptions(options) {
|
145
147
|
const { align, arrowPadding, autoSize: rawAutoSize, coverTarget, flipBoundary, offset, overflowBoundary, pinned, position, unstable_disableTether: disableTether, positionFixed, strategy, overflowBoundaryPadding, fallbackPositions, useTransform, matchTargetSize } = options;
|
146
|
-
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
148
|
+
const { dir, targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
147
149
|
const isRtl = dir === 'rtl';
|
148
150
|
const positionStrategy = (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute';
|
149
151
|
const autoSize = (0, _utils.normalizeAutoSize)(rawAutoSize);
|
@@ -183,7 +185,8 @@ function usePositioningOptions(options) {
|
|
183
185
|
}),
|
184
186
|
(0, _dom.hide)({
|
185
187
|
strategy: 'escaped'
|
186
|
-
})
|
188
|
+
}),
|
189
|
+
process.env.NODE_ENV !== 'production' && targetDocument && (0, _floatinguidevtools.middleware)(targetDocument, (0, _devtools.devtoolsCallback)(options))
|
187
190
|
].filter(Boolean);
|
188
191
|
const placement = (0, _utils.toFloatingUIPlacement)(align, position, isRtl);
|
189
192
|
return {
|
@@ -192,7 +195,8 @@ function usePositioningOptions(options) {
|
|
192
195
|
strategy: positionStrategy,
|
193
196
|
useTransform
|
194
197
|
};
|
195
|
-
},
|
198
|
+
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
199
|
+
[
|
196
200
|
align,
|
197
201
|
arrowPadding,
|
198
202
|
autoSize,
|
@@ -208,6 +212,7 @@ function usePositioningOptions(options) {
|
|
208
212
|
overflowBoundaryPadding,
|
209
213
|
fallbackPositions,
|
210
214
|
useTransform,
|
211
|
-
matchTargetSize
|
215
|
+
matchTargetSize,
|
216
|
+
targetDocument
|
212
217
|
]);
|
213
218
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["usePositioning.js"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } 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 { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent, normalizeAutoSize } from './utils';\nimport { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, resetMaxSize as resetMaxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware, matchTargetSize as matchTargetSizeMiddleware } from './middleware';\nimport { createPositionManager } from './createPositionManager';\n/**\n * @internal\n */ export function usePositioning(options) {\n const managerRef = React.useRef(null);\n const targetRef = React.useRef(null);\n const overrideTargetRef = React.useRef(null);\n const containerRef = React.useRef(null);\n const arrowRef = React.useRef(null);\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 var _overrideTargetRef_current;\n const target = (_overrideTargetRef_current = overrideTargetRef.current) !== null && _overrideTargetRef_current !== void 0 ? _overrideTargetRef_current : targetRef.current;\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 }, [\n enabled,\n resolvePositioningOptions\n ]);\n const setOverrideTarget = useEventCallback((target)=>{\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n React.useImperativeHandle(options.positioningRef, ()=>({\n updatePosition: ()=>{\n var _managerRef_current;\n return (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.updatePosition();\n },\n setTarget: (target)=>{\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 setOverrideTarget(target);\n }\n }), [\n options.target,\n setOverrideTarget\n ]);\n useIsomorphicLayoutEffect(()=>{\n var _options_target;\n setOverrideTarget((_options_target = options.target) !== null && _options_target !== void 0 ? _options_target : null);\n }, [\n options.target,\n setOverrideTarget\n ]);\n useIsomorphicLayoutEffect(()=>{\n updatePositionManager();\n }, [\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 var _contentNode_ownerDocument;\n const contentNode = containerRef.current;\n const treeWalker = (_contentNode_ownerDocument = contentNode.ownerDocument) === null || _contentNode_ownerDocument === void 0 ? void 0 : _contentNode_ownerDocument.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter\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 '<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 // 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 const setTarget = useCallbackRef(null, (target)=>{\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n const setContainer = useCallbackRef(null, (container)=>{\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n const setArrow = useCallbackRef(null, (arrow)=>{\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n // Let users use callback refs so they feel like 'normal' DOM refs\n return {\n targetRef: setTarget,\n containerRef: setContainer,\n arrowRef: setArrow\n };\n}\nfunction usePositioningOptions(options) {\n const { align, arrowPadding, autoSize: rawAutoSize, coverTarget, flipBoundary, offset, overflowBoundary, pinned, position, unstable_disableTether: disableTether, // eslint-disable-next-line deprecation/deprecation\n positionFixed, strategy, overflowBoundaryPadding, fallbackPositions, useTransform, matchTargetSize } = options;\n const { dir } = useFluent();\n const isRtl = dir === 'rtl';\n const positionStrategy = (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute';\n const autoSize = normalizeAutoSize(rawAutoSize);\n return React.useCallback((container, arrow)=>{\n const hasScrollableElement = hasScrollParent(container);\n const middleware = [\n autoSize && resetMaxSizeMiddleware(autoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({\n container,\n flipBoundary,\n hasScrollableElement,\n isRtl,\n fallbackPositions\n }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl\n }),\n autoSize && maxSizeMiddleware(autoSize, {\n container,\n overflowBoundary\n }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({\n element: arrow,\n padding: arrowPadding\n }),\n hideMiddleware({\n strategy: 'referenceHidden'\n }),\n hideMiddleware({\n strategy: 'escaped'\n })\n ].filter(Boolean);\n const placement = toFloatingUIPlacement(align, position, isRtl);\n return {\n placement,\n middleware,\n strategy: positionStrategy,\n useTransform\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 positionStrategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize\n ]);\n}\n"],"names":["usePositioning","options","managerRef","React","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","_overrideTargetRef_current","target","canUseDOM","createPositionManager","container","arrow","setOverrideTarget","useEventCallback","useImperativeHandle","positioningRef","updatePosition","_managerRef_current","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useIsomorphicLayoutEffect","_options_target","useEffect","_contentNode_ownerDocument","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","hasAutofocusFilter","nextNode","node","currentNode","join","useCallbackRef","setContainer","setArrow","align","arrowPadding","autoSize","rawAutoSize","coverTarget","flipBoundary","offset","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","matchTargetSize","dir","useFluent","isRtl","positionStrategy","normalizeAutoSize","hasScrollableElement","hasScrollParent","middleware","resetMaxSizeMiddleware","matchTargetSizeMiddleware","offsetMiddleware","coverTargetMiddleware","flipMiddleware","shiftMiddleware","maxSizeMiddleware","intersectingMiddleware","arrowMiddleware","element","padding","hideMiddleware","filter","Boolean","placement","toFloatingUIPlacement"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["usePositioning.js"],"sourcesContent":["import { hide as hideMiddleware, arrow as arrowMiddleware } 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 { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent, normalizeAutoSize } from './utils';\nimport { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, resetMaxSize as resetMaxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware, matchTargetSize as matchTargetSizeMiddleware } from './middleware';\nimport { createPositionManager } from './createPositionManager';\nimport { middleware as devtoolsMiddleware } from 'floating-ui-devtools';\nimport { devtoolsCallback } from './utils/devtools';\n/**\n * @internal\n */ export function usePositioning(options) {\n const managerRef = React.useRef(null);\n const targetRef = React.useRef(null);\n const overrideTargetRef = React.useRef(null);\n const containerRef = React.useRef(null);\n const arrowRef = React.useRef(null);\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 var _overrideTargetRef_current;\n const target = (_overrideTargetRef_current = overrideTargetRef.current) !== null && _overrideTargetRef_current !== void 0 ? _overrideTargetRef_current : targetRef.current;\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 }, [\n enabled,\n resolvePositioningOptions\n ]);\n const setOverrideTarget = useEventCallback((target)=>{\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n React.useImperativeHandle(options.positioningRef, ()=>({\n updatePosition: ()=>{\n var _managerRef_current;\n return (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.updatePosition();\n },\n setTarget: (target)=>{\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 setOverrideTarget(target);\n }\n }), [\n options.target,\n setOverrideTarget\n ]);\n useIsomorphicLayoutEffect(()=>{\n var _options_target;\n setOverrideTarget((_options_target = options.target) !== null && _options_target !== void 0 ? _options_target : null);\n }, [\n options.target,\n setOverrideTarget\n ]);\n useIsomorphicLayoutEffect(()=>{\n updatePositionManager();\n }, [\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 var _contentNode_ownerDocument;\n const contentNode = containerRef.current;\n const treeWalker = (_contentNode_ownerDocument = contentNode.ownerDocument) === null || _contentNode_ownerDocument === void 0 ? void 0 : _contentNode_ownerDocument.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter\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 '<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 // 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 const setTarget = useCallbackRef(null, (target)=>{\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n const setContainer = useCallbackRef(null, (container)=>{\n if (containerRef.current !== container) {\n containerRef.current = container;\n updatePositionManager();\n }\n });\n const setArrow = useCallbackRef(null, (arrow)=>{\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n // Let users use callback refs so they feel like 'normal' DOM refs\n return {\n targetRef: setTarget,\n containerRef: setContainer,\n arrowRef: setArrow\n };\n}\nfunction usePositioningOptions(options) {\n const { align, arrowPadding, autoSize: rawAutoSize, coverTarget, flipBoundary, offset, overflowBoundary, pinned, position, unstable_disableTether: disableTether, // eslint-disable-next-line deprecation/deprecation\n positionFixed, strategy, overflowBoundaryPadding, fallbackPositions, useTransform, matchTargetSize } = options;\n const { dir, targetDocument } = useFluent();\n const isRtl = dir === 'rtl';\n const positionStrategy = (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute';\n const autoSize = normalizeAutoSize(rawAutoSize);\n return React.useCallback((container, arrow)=>{\n const hasScrollableElement = hasScrollParent(container);\n const middleware = [\n autoSize && resetMaxSizeMiddleware(autoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({\n container,\n flipBoundary,\n hasScrollableElement,\n isRtl,\n fallbackPositions\n }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether,\n overflowBoundaryPadding,\n isRtl\n }),\n autoSize && maxSizeMiddleware(autoSize, {\n container,\n overflowBoundary\n }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({\n element: arrow,\n padding: arrowPadding\n }),\n hideMiddleware({\n strategy: 'referenceHidden'\n }),\n hideMiddleware({\n strategy: 'escaped'\n }),\n process.env.NODE_ENV !== 'production' && targetDocument && devtoolsMiddleware(targetDocument, devtoolsCallback(options))\n ].filter(Boolean);\n const placement = toFloatingUIPlacement(align, position, isRtl);\n return {\n placement,\n middleware,\n strategy: positionStrategy,\n useTransform\n };\n }, // Options is missing here, but it's not required\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableTether,\n flipBoundary,\n isRtl,\n offset,\n overflowBoundary,\n pinned,\n position,\n positionStrategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n targetDocument\n ]);\n}\n"],"names":["usePositioning","options","managerRef","React","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","usePositioningOptions","updatePositionManager","useCallback","current","dispose","_overrideTargetRef_current","target","canUseDOM","createPositionManager","container","arrow","setOverrideTarget","useEventCallback","useImperativeHandle","positioningRef","updatePosition","_managerRef_current","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useIsomorphicLayoutEffect","_options_target","useEffect","_contentNode_ownerDocument","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","hasAutofocusFilter","nextNode","node","currentNode","join","useCallbackRef","setContainer","setArrow","align","arrowPadding","autoSize","rawAutoSize","coverTarget","flipBoundary","offset","overflowBoundary","pinned","position","unstable_disableTether","disableTether","positionFixed","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","matchTargetSize","dir","targetDocument","useFluent","isRtl","positionStrategy","normalizeAutoSize","hasScrollableElement","hasScrollParent","middleware","resetMaxSizeMiddleware","matchTargetSizeMiddleware","offsetMiddleware","coverTargetMiddleware","flipMiddleware","shiftMiddleware","maxSizeMiddleware","intersectingMiddleware","arrowMiddleware","element","padding","hideMiddleware","devtoolsMiddleware","devtoolsCallback","filter","Boolean","placement","toFloatingUIPlacement"],"mappings":"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"}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "devtoolsCallback", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return devtoolsCallback;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
12
|
+
const _listScrollParents = require("./listScrollParents");
|
13
|
+
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
|
14
|
+
const devtoolsCallback = (options)=>(middlewareState)=>{
|
15
|
+
const { elements: { floating, reference } } = middlewareState;
|
16
|
+
const scrollParentsSet = new Set();
|
17
|
+
if ((0, _reactutilities.isHTMLElement)(reference)) {
|
18
|
+
(0, _listScrollParents.listScrollParents)(reference).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
|
19
|
+
}
|
20
|
+
(0, _listScrollParents.listScrollParents)(floating).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
|
21
|
+
const flipBoundaries = Array.isArray(options.flipBoundary) ? options.flipBoundary : (0, _reactutilities.isHTMLElement)(options.flipBoundary) ? [
|
22
|
+
options.flipBoundary
|
23
|
+
] : [];
|
24
|
+
const overflowBoundaries = Array.isArray(options.overflowBoundary) ? options.overflowBoundary : (0, _reactutilities.isHTMLElement)(options.overflowBoundary) ? [
|
25
|
+
options.overflowBoundary
|
26
|
+
] : [];
|
27
|
+
return {
|
28
|
+
type: 'FluentUIMiddleware',
|
29
|
+
middlewareState,
|
30
|
+
options,
|
31
|
+
initialPlacement: (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(middlewareState.initialPlacement),
|
32
|
+
placement: (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(middlewareState.placement),
|
33
|
+
flipBoundaries,
|
34
|
+
overflowBoundaries,
|
35
|
+
scrollParents: Array.from(scrollParentsSet)
|
36
|
+
};
|
37
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["devtools.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './listScrollParents';\nimport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\nexport const devtoolsCallback = (options)=>(middlewareState)=>{\n const { elements: { floating, reference } } = middlewareState;\n const scrollParentsSet = new Set();\n if (isHTMLElement(reference)) {\n listScrollParents(reference).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));\n }\n listScrollParents(floating).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));\n const flipBoundaries = Array.isArray(options.flipBoundary) ? options.flipBoundary : isHTMLElement(options.flipBoundary) ? [\n options.flipBoundary\n ] : [];\n const overflowBoundaries = Array.isArray(options.overflowBoundary) ? options.overflowBoundary : isHTMLElement(options.overflowBoundary) ? [\n options.overflowBoundary\n ] : [];\n return {\n type: 'FluentUIMiddleware',\n middlewareState,\n options,\n initialPlacement: fromFloatingUIPlacement(middlewareState.initialPlacement),\n placement: fromFloatingUIPlacement(middlewareState.placement),\n flipBoundaries,\n overflowBoundaries,\n scrollParents: Array.from(scrollParentsSet)\n };\n };\n"],"names":["devtoolsCallback","options","middlewareState","elements","floating","reference","scrollParentsSet","Set","isHTMLElement","listScrollParents","forEach","scrollParent","add","flipBoundaries","Array","isArray","flipBoundary","overflowBoundaries","overflowBoundary","type","initialPlacement","fromFloatingUIPlacement","placement","scrollParents","from"],"mappings":";;;;+BAGaA;;;eAAAA;;;gCAHiB;mCACI;yCACM;AACjC,MAAMA,mBAAmB,CAACC,UAAU,CAACC;QACpC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAE,EAAE,GAAGH;QAC9C,MAAMI,mBAAmB,IAAIC;QAC7B,IAAIC,IAAAA,6BAAa,EAACH,YAAY;YAC1BI,IAAAA,oCAAiB,EAACJ,WAAWK,OAAO,CAAC,CAACC,eAAeL,iBAAiBM,GAAG,CAACD;QAC9E;QACAF,IAAAA,oCAAiB,EAACL,UAAUM,OAAO,CAAC,CAACC,eAAeL,iBAAiBM,GAAG,CAACD;QACzE,MAAME,iBAAiBC,MAAMC,OAAO,CAACd,QAAQe,YAAY,IAAIf,QAAQe,YAAY,GAAGR,IAAAA,6BAAa,EAACP,QAAQe,YAAY,IAAI;YACtHf,QAAQe,YAAY;SACvB,GAAG,EAAE;QACN,MAAMC,qBAAqBH,MAAMC,OAAO,CAACd,QAAQiB,gBAAgB,IAAIjB,QAAQiB,gBAAgB,GAAGV,IAAAA,6BAAa,EAACP,QAAQiB,gBAAgB,IAAI;YACtIjB,QAAQiB,gBAAgB;SAC3B,GAAG,EAAE;QACN,OAAO;YACHC,MAAM;YACNjB;YACAD;YACAmB,kBAAkBC,IAAAA,gDAAuB,EAACnB,gBAAgBkB,gBAAgB;YAC1EE,WAAWD,IAAAA,gDAAuB,EAACnB,gBAAgBoB,SAAS;YAC5DT;YACAI;YACAM,eAAeT,MAAMU,IAAI,CAAClB;QAC9B;IACJ"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.10.
|
3
|
+
"version": "9.10.2",
|
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",
|
@@ -34,7 +34,8 @@
|
|
34
34
|
"@fluentui/react-theme": "^9.1.16",
|
35
35
|
"@fluentui/react-utilities": "^9.15.2",
|
36
36
|
"@griffel/react": "^1.5.14",
|
37
|
-
"@swc/helpers": "^0.5.1"
|
37
|
+
"@swc/helpers": "^0.5.1",
|
38
|
+
"floating-ui-devtools": "0.1.2"
|
38
39
|
},
|
39
40
|
"peerDependencies": {
|
40
41
|
"@types/react": ">=16.14.0 <19.0.0",
|