@fluentui/react-positioning 9.10.5 → 9.11.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +25 -2
- package/lib/createPositionManager.js +11 -3
- package/lib/createPositionManager.js.map +1 -1
- package/lib/utils/createResizeObserver.js +18 -0
- package/lib/utils/createResizeObserver.js.map +1 -0
- package/lib-commonjs/createPositionManager.js +11 -3
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/utils/createResizeObserver.js +28 -0
- package/lib-commonjs/utils/createResizeObserver.js.map +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on Mon,
|
|
3
|
+
This log was last generated on Mon, 08 Jan 2024 16:20:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.11.0)
|
|
8
|
+
|
|
9
|
+
Mon, 08 Jan 2024 16:20:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.6..@fluentui/react-positioning_v9.11.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: Update position when target or container dimensions change ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by lingfangao@hotmail.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.15.6 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
|
|
16
|
+
|
|
17
|
+
### Patches
|
|
18
|
+
|
|
19
|
+
- chore: update react-positioning to use latest floating ui dev tools to take latest fix ([PR #30235](https://github.com/microsoft/fluentui/pull/30235) by mgodbolt@microsoft.com)
|
|
20
|
+
|
|
21
|
+
## [9.10.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.6)
|
|
22
|
+
|
|
23
|
+
Wed, 03 Jan 2024 09:26:44 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.5..@fluentui/react-positioning_v9.10.6)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.15.5 ([PR #30163](https://github.com/microsoft/fluentui/pull/30163) by beachball)
|
|
29
|
+
|
|
7
30
|
## [9.10.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.5)
|
|
8
31
|
|
|
9
|
-
Mon, 18 Dec 2023 17:
|
|
32
|
+
Mon, 18 Dec 2023 17:48:16 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.4..@fluentui/react-positioning_v9.10.5)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
@@ -2,21 +2,24 @@ import { computePosition } from '@floating-ui/dom';
|
|
|
2
2
|
import { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';
|
|
3
3
|
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
4
4
|
import { listScrollParents } from './utils/listScrollParents';
|
|
5
|
+
import { createResizeObserver } from './utils/createResizeObserver';
|
|
5
6
|
/**
|
|
6
7
|
* @internal
|
|
7
8
|
* @returns manager that handles positioning out of the react lifecycle
|
|
8
9
|
*/ export function createPositionManager(options) {
|
|
9
|
-
const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;
|
|
10
10
|
let isDestroyed = false;
|
|
11
|
-
|
|
11
|
+
const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;
|
|
12
|
+
const targetWindow = container.ownerDocument.defaultView;
|
|
13
|
+
if (!target || !container || !targetWindow) {
|
|
12
14
|
return {
|
|
13
15
|
updatePosition: ()=>undefined,
|
|
14
16
|
dispose: ()=>undefined
|
|
15
17
|
};
|
|
16
18
|
}
|
|
19
|
+
// When the dimensions of the target or the container change - trigger a position update
|
|
20
|
+
const resizeObserver = createResizeObserver(targetWindow, ()=>updatePosition());
|
|
17
21
|
let isFirstUpdate = true;
|
|
18
22
|
const scrollParents = new Set();
|
|
19
|
-
const targetWindow = container.ownerDocument.defaultView;
|
|
20
23
|
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
|
|
21
24
|
// Without this scroll jumps can occur when the element is rendered initially and receives focus
|
|
22
25
|
Object.assign(container.style, {
|
|
@@ -41,6 +44,10 @@ import { listScrollParents } from './utils/listScrollParents';
|
|
|
41
44
|
passive: true
|
|
42
45
|
});
|
|
43
46
|
});
|
|
47
|
+
resizeObserver.observe(container);
|
|
48
|
+
if (isHTMLElement(target)) {
|
|
49
|
+
resizeObserver.observe(target);
|
|
50
|
+
}
|
|
44
51
|
isFirstUpdate = false;
|
|
45
52
|
}
|
|
46
53
|
Object.assign(container.style, {
|
|
@@ -97,6 +104,7 @@ import { listScrollParents } from './utils/listScrollParents';
|
|
|
97
104
|
scrollParent.removeEventListener('scroll', updatePosition);
|
|
98
105
|
});
|
|
99
106
|
scrollParents.clear();
|
|
107
|
+
resizeObserver.disconnect();
|
|
100
108
|
};
|
|
101
109
|
if (targetWindow) {
|
|
102
110
|
targetWindow.addEventListener('scroll', updatePosition, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './utils/listScrollParents';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n /**\n * Modifies whether popover is positioned using transform.\n * @default true\n */\n useTransform?: boolean;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;\n
|
|
1
|
+
{"version":3,"sources":["createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './utils/listScrollParents';\nimport { createResizeObserver } from './utils/createResizeObserver';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n /**\n * Modifies whether popover is positioned using transform.\n * @default true\n */\n useTransform?: boolean;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n let isDestroyed = false;\n const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;\n const targetWindow = container.ownerDocument.defaultView;\n if (!target || !container || !targetWindow) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n // When the dimensions of the target or the container change - trigger a position update\n const resizeObserver = createResizeObserver(targetWindow, () => updatePosition());\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n const forceUpdate = () => {\n // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n\n if (isFirstUpdate) {\n listScrollParents(container).forEach(scrollParent => scrollParents.add(scrollParent));\n if (isHTMLElement(target)) {\n listScrollParents(target).forEach(scrollParent => scrollParents.add(scrollParent));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition, { passive: true });\n });\n\n resizeObserver.observe(container);\n if (isHTMLElement(target)) {\n resizeObserver.observe(target);\n }\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n useTransform,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n isDestroyed = true;\n\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n scrollParents.clear();\n\n resizeObserver.disconnect();\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition, { passive: true });\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"],"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","isHTMLElement","listScrollParents","createResizeObserver","createPositionManager","options","isDestroyed","container","target","arrow","strategy","middleware","placement","useTransform","targetWindow","ownerDocument","defaultView","updatePosition","undefined","dispose","resizeObserver","isFirstUpdate","scrollParents","Set","Object","assign","style","position","left","top","margin","forceUpdate","forEach","scrollParent","add","addEventListener","passive","observe","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener","clear","disconnect"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export function createResizeObserver(targetWindow, callback) {
|
|
2
|
+
// https://github.com/jsdom/jsdom/issues/3368
|
|
3
|
+
// Add the polyfill here so it is not needed for all unit tests that leverage positioning
|
|
4
|
+
if (process.env.NODE_ENV === 'test') {
|
|
5
|
+
targetWindow.ResizeObserver = class ResizeObserver {
|
|
6
|
+
observe() {
|
|
7
|
+
// do nothing
|
|
8
|
+
}
|
|
9
|
+
unobserve() {
|
|
10
|
+
// do nothing
|
|
11
|
+
}
|
|
12
|
+
disconnect() {
|
|
13
|
+
// do nothing
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return new targetWindow.ResizeObserver(callback);
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["createResizeObserver.ts"],"sourcesContent":["export function createResizeObserver(targetWindow: Window & typeof globalThis, callback: ResizeObserverCallback) {\n // https://github.com/jsdom/jsdom/issues/3368\n // Add the polyfill here so it is not needed for all unit tests that leverage positioning\n if (process.env.NODE_ENV === 'test') {\n targetWindow.ResizeObserver = class ResizeObserver {\n public observe() {\n // do nothing\n }\n public unobserve() {\n // do nothing\n }\n public disconnect() {\n // do nothing\n }\n };\n }\n\n return new targetWindow.ResizeObserver(callback);\n}\n"],"names":["createResizeObserver","targetWindow","callback","process","env","NODE_ENV","ResizeObserver","observe","unobserve","disconnect"],"mappings":"AAAA,OAAO,SAASA,qBAAqBC,YAAwC,EAAEC,QAAgC;IAC7G,6CAA6C;IAC7C,yFAAyF;IACzF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnCJ,aAAaK,cAAc,GAAG,MAAMA;YAC3BC,UAAU;YACf,aAAa;YACf;YACOC,YAAY;YACjB,aAAa;YACf;YACOC,aAAa;YAClB,aAAa;YACf;QACF;IACF;IAEA,OAAO,IAAIR,aAAaK,cAAc,CAACJ;AACzC"}
|
|
@@ -12,18 +12,21 @@ const _dom = require("@floating-ui/dom");
|
|
|
12
12
|
const _utils = require("./utils");
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _listScrollParents = require("./utils/listScrollParents");
|
|
15
|
+
const _createResizeObserver = require("./utils/createResizeObserver");
|
|
15
16
|
function createPositionManager(options) {
|
|
16
|
-
const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;
|
|
17
17
|
let isDestroyed = false;
|
|
18
|
-
|
|
18
|
+
const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;
|
|
19
|
+
const targetWindow = container.ownerDocument.defaultView;
|
|
20
|
+
if (!target || !container || !targetWindow) {
|
|
19
21
|
return {
|
|
20
22
|
updatePosition: ()=>undefined,
|
|
21
23
|
dispose: ()=>undefined
|
|
22
24
|
};
|
|
23
25
|
}
|
|
26
|
+
// When the dimensions of the target or the container change - trigger a position update
|
|
27
|
+
const resizeObserver = (0, _createResizeObserver.createResizeObserver)(targetWindow, ()=>updatePosition());
|
|
24
28
|
let isFirstUpdate = true;
|
|
25
29
|
const scrollParents = new Set();
|
|
26
|
-
const targetWindow = container.ownerDocument.defaultView;
|
|
27
30
|
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
|
|
28
31
|
// Without this scroll jumps can occur when the element is rendered initially and receives focus
|
|
29
32
|
Object.assign(container.style, {
|
|
@@ -48,6 +51,10 @@ function createPositionManager(options) {
|
|
|
48
51
|
passive: true
|
|
49
52
|
});
|
|
50
53
|
});
|
|
54
|
+
resizeObserver.observe(container);
|
|
55
|
+
if ((0, _reactutilities.isHTMLElement)(target)) {
|
|
56
|
+
resizeObserver.observe(target);
|
|
57
|
+
}
|
|
51
58
|
isFirstUpdate = false;
|
|
52
59
|
}
|
|
53
60
|
Object.assign(container.style, {
|
|
@@ -104,6 +111,7 @@ function createPositionManager(options) {
|
|
|
104
111
|
scrollParent.removeEventListener('scroll', updatePosition);
|
|
105
112
|
});
|
|
106
113
|
scrollParents.clear();
|
|
114
|
+
resizeObserver.disconnect();
|
|
107
115
|
};
|
|
108
116
|
if (targetWindow) {
|
|
109
117
|
targetWindow.addEventListener('scroll', updatePosition, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createPositionManager.js"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './utils/listScrollParents';\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */ export function createPositionManager(options) {\n const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;\n
|
|
1
|
+
{"version":3,"sources":["createPositionManager.js"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './utils/listScrollParents';\nimport { createResizeObserver } from './utils/createResizeObserver';\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */ export function createPositionManager(options) {\n let isDestroyed = false;\n const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;\n const targetWindow = container.ownerDocument.defaultView;\n if (!target || !container || !targetWindow) {\n return {\n updatePosition: ()=>undefined,\n dispose: ()=>undefined\n };\n }\n // When the dimensions of the target or the container change - trigger a position update\n const resizeObserver = createResizeObserver(targetWindow, ()=>updatePosition());\n let isFirstUpdate = true;\n const scrollParents = new Set();\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, {\n position: 'fixed',\n left: 0,\n top: 0,\n margin: 0\n });\n const forceUpdate = ()=>{\n // debounced update can still occur afterwards\n // early return to avoid memory leaks\n if (isDestroyed) {\n return;\n }\n if (isFirstUpdate) {\n listScrollParents(container).forEach((scrollParent)=>scrollParents.add(scrollParent));\n if (isHTMLElement(target)) {\n listScrollParents(target).forEach((scrollParent)=>scrollParents.add(scrollParent));\n }\n scrollParents.forEach((scrollParent)=>{\n scrollParent.addEventListener('scroll', updatePosition, {\n passive: true\n });\n });\n resizeObserver.observe(container);\n if (isHTMLElement(target)) {\n resizeObserver.observe(target);\n }\n isFirstUpdate = false;\n }\n Object.assign(container.style, {\n position: strategy\n });\n computePosition(target, container, {\n placement,\n middleware,\n strategy\n }).then(({ x, y, middlewareData, placement: computedPlacement })=>{\n // Promise can still resolve after destruction\n // early return to avoid applying outdated position\n if (isDestroyed) {\n return;\n }\n writeArrowUpdates({\n arrow,\n middlewareData\n });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: {\n x,\n y\n },\n lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,\n strategy,\n useTransform\n });\n }).catch((err)=>{\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n const updatePosition = debounce(()=>forceUpdate());\n const dispose = ()=>{\n isDestroyed = true;\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n scrollParents.forEach((scrollParent)=>{\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n scrollParents.clear();\n resizeObserver.disconnect();\n };\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition, {\n passive: true\n });\n targetWindow.addEventListener('resize', updatePosition);\n }\n // Update the position on initialization\n updatePosition();\n return {\n updatePosition,\n dispose\n };\n}\n"],"names":["createPositionManager","options","isDestroyed","container","target","arrow","strategy","middleware","placement","useTransform","targetWindow","ownerDocument","defaultView","updatePosition","undefined","dispose","resizeObserver","createResizeObserver","isFirstUpdate","scrollParents","Set","Object","assign","style","position","left","top","margin","forceUpdate","listScrollParents","forEach","scrollParent","add","isHTMLElement","addEventListener","passive","observe","computePosition","then","x","y","middlewareData","computedPlacement","writeArrowUpdates","writeContainerUpdates","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","debounce","removeEventListener","clear","disconnect"],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "createResizeObserver", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return createResizeObserver;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
function createResizeObserver(targetWindow, callback) {
|
|
12
|
+
// https://github.com/jsdom/jsdom/issues/3368
|
|
13
|
+
// Add the polyfill here so it is not needed for all unit tests that leverage positioning
|
|
14
|
+
if (process.env.NODE_ENV === 'test') {
|
|
15
|
+
targetWindow.ResizeObserver = class ResizeObserver {
|
|
16
|
+
observe() {
|
|
17
|
+
// do nothing
|
|
18
|
+
}
|
|
19
|
+
unobserve() {
|
|
20
|
+
// do nothing
|
|
21
|
+
}
|
|
22
|
+
disconnect() {
|
|
23
|
+
// do nothing
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return new targetWindow.ResizeObserver(callback);
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["createResizeObserver.js"],"sourcesContent":["export function createResizeObserver(targetWindow, callback) {\n // https://github.com/jsdom/jsdom/issues/3368\n // Add the polyfill here so it is not needed for all unit tests that leverage positioning\n if (process.env.NODE_ENV === 'test') {\n targetWindow.ResizeObserver = class ResizeObserver {\n observe() {\n // do nothing\n }\n unobserve() {\n // do nothing\n }\n disconnect() {\n // do nothing\n }\n };\n }\n return new targetWindow.ResizeObserver(callback);\n}\n"],"names":["createResizeObserver","targetWindow","callback","process","env","NODE_ENV","ResizeObserver","observe","unobserve","disconnect"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,qBAAqBC,YAAY,EAAEC,QAAQ;IACvD,6CAA6C;IAC7C,yFAAyF;IACzF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACjCJ,aAAaK,cAAc,GAAG,MAAMA;YAChCC,UAAU;YACV,aAAa;YACb;YACAC,YAAY;YACZ,aAAa;YACb;YACAC,aAAa;YACb,aAAa;YACb;QACJ;IACJ;IACA,OAAO,IAAIR,aAAaK,cAAc,CAACJ;AAC3C"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.11.0",
|
|
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",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@floating-ui/dom": "^1.2.0",
|
|
33
|
-
"@floating-ui/devtools": "0.0.
|
|
33
|
+
"@floating-ui/devtools": "0.0.4",
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
35
35
|
"@fluentui/react-theme": "^9.1.16",
|
|
36
|
-
"@fluentui/react-utilities": "^9.15.
|
|
36
|
+
"@fluentui/react-utilities": "^9.15.6",
|
|
37
37
|
"@griffel/react": "^1.5.14",
|
|
38
38
|
"@swc/helpers": "^0.5.1"
|
|
39
39
|
},
|