From 2424c47289bca624e3a8fcf91484240309b2a79c Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 31 Jul 2023 21:32:48 +0200 Subject: [PATCH 1/5] fix --- .../react-positioning/src/middleware/maxSize.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts index 760668c41700fe..0af9a944b97943 100644 --- a/packages/react-components/react-positioning/src/middleware/maxSize.ts +++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts @@ -13,8 +13,8 @@ export interface MaxSizeMiddlewareOptions extends Pick ({ name: 'resetMaxSize', - fn({ middlewareData: { maxSizeAlreadyReset }, elements }) { - if (maxSizeAlreadyReset) { + fn({ middlewareData, elements }) { + if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) { return {}; } From 192a0fae6cb82f580375fc17ffb7638f9fb5964b Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 31 Jul 2023 21:40:33 +0200 Subject: [PATCH 2/5] f --- ...t-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json diff --git a/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json new file mode 100644 index 00000000000000..d838c265b96631 --- /dev/null +++ b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: autoSize causing maximum positioning update", + "packageName": "@fluentui/react-positioning", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} From b9c553553057b04b55f65c71c8ab49e699b57316 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 31 Jul 2023 22:14:21 +0200 Subject: [PATCH 3/5] test --- .../src/middleware/maxSize.test.ts | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 packages/react-components/react-positioning/src/middleware/maxSize.test.ts diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts new file mode 100644 index 00000000000000..d6e01e8d160075 --- /dev/null +++ b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts @@ -0,0 +1,30 @@ +import { Platform, computePosition } from '@floating-ui/dom'; +import { resetMaxSize } from './maxSize'; + +const referenceRect = { x: 0, y: 0, width: 100, height: 100 }; +const floatingRect = { x: 0, y: 0, width: 50, height: 50 }; +const mockGetElementRects = jest.fn(() => + Promise.resolve({ + reference: referenceRect, + floating: floatingRect, + }), +); +const platform = { + getElementRects: mockGetElementRects, + getDimensions: () => Promise.resolve({ width: 10, height: 10 }), +} as unknown as Platform; + +describe('maxSize', () => { + it('resetMaxSize reset once per life cycle', async () => { + const button = document.createElement('div'); + const tooltip = document.createElement('div'); + const autoSize = { applyMaxHeight: true, applyMaxWidth: true }; + + await computePosition(button, tooltip, { + placement: 'right', + middleware: [resetMaxSize(autoSize)], + platform, + }); + expect(mockGetElementRects).toHaveBeenCalledTimes(2); + }); +}); From 00e67c1c95710e2bded9de7ac930a553a06ced9d Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 31 Jul 2023 22:15:40 +0200 Subject: [PATCH 4/5] clean test --- .../react-positioning/src/middleware/maxSize.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts index d6e01e8d160075..4846d146993b9a 100644 --- a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts +++ b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts @@ -11,7 +11,6 @@ const mockGetElementRects = jest.fn(() => ); const platform = { getElementRects: mockGetElementRects, - getDimensions: () => Promise.resolve({ width: 10, height: 10 }), } as unknown as Platform; describe('maxSize', () => { From 889af91146beaa27609a504931a1fa47d283395c Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 1 Aug 2023 10:55:46 +0200 Subject: [PATCH 5/5] type test --- .../react-positioning/src/middleware/maxSize.test.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts index 4846d146993b9a..f58d086bcc49b9 100644 --- a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts +++ b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts @@ -1,8 +1,8 @@ import { Platform, computePosition } from '@floating-ui/dom'; import { resetMaxSize } from './maxSize'; -const referenceRect = { x: 0, y: 0, width: 100, height: 100 }; -const floatingRect = { x: 0, y: 0, width: 50, height: 50 }; +const referenceRect: Partial = { x: 0, y: 0, width: 100, height: 100 }; +const floatingRect: Partial = { x: 0, y: 0, width: 50, height: 50 }; const mockGetElementRects = jest.fn(() => Promise.resolve({ reference: referenceRect, @@ -11,10 +11,11 @@ const mockGetElementRects = jest.fn(() => ); const platform = { getElementRects: mockGetElementRects, -} as unknown as Platform; +} as Partial as Platform; describe('maxSize', () => { it('resetMaxSize reset once per life cycle', async () => { + expect.hasAssertions(); const button = document.createElement('div'); const tooltip = document.createElement('div'); const autoSize = { applyMaxHeight: true, applyMaxWidth: true };