From 359d9aeff110241034278ab9bfdcec7fe27c7d89 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 18:09:04 +0200 Subject: [PATCH 01/13] change --- .../react-utilities/src/hooks/useOnClickOutside.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts index 74b414a8b8ed58..ff01345078de2e 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts @@ -93,9 +93,8 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => }; // use capture phase because React can update DOM before the event bubbles to the document - element?.addEventListener('click', conditionalHandler, true); element?.addEventListener('touchstart', conditionalHandler, true); - element?.addEventListener('contextmenu', conditionalHandler, true); + element?.addEventListener('mouseup', conditionalHandler, true); element?.addEventListener('mousedown', handleMouseDown, true); // Garbage collect this event after it's no longer useful to avoid memory leaks @@ -104,9 +103,8 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => }, 1); return () => { - element?.removeEventListener('click', conditionalHandler, true); element?.removeEventListener('touchstart', conditionalHandler, true); - element?.removeEventListener('contextmenu', conditionalHandler, true); + element?.removeEventListener('mouseup', conditionalHandler, true); element?.removeEventListener('mousedown', handleMouseDown, true); clearTimeout(timeoutId.current); From 834679f92194a11db37dada0838f65ec4ebaec81 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 18:11:07 +0200 Subject: [PATCH 02/13] chg --- ...act-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json diff --git a/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json b/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json new file mode 100644 index 00000000000000..1cfa02fa963812 --- /dev/null +++ b/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: `useOnClickOutside` should invoke callback on clicking scrollbar", + "packageName": "@fluentui/react-utilities", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} From e866abf0fbec86ddb1da43ad3c74259af261fc33 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 18:35:27 +0200 Subject: [PATCH 03/13] Revert "change" This reverts commit c637ae55c6f3173df83fe1b31e1be98afe775a95. --- .../react-utilities/src/hooks/useOnClickOutside.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts index ff01345078de2e..74b414a8b8ed58 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts @@ -93,8 +93,9 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => }; // use capture phase because React can update DOM before the event bubbles to the document + element?.addEventListener('click', conditionalHandler, true); element?.addEventListener('touchstart', conditionalHandler, true); - element?.addEventListener('mouseup', conditionalHandler, true); + element?.addEventListener('contextmenu', conditionalHandler, true); element?.addEventListener('mousedown', handleMouseDown, true); // Garbage collect this event after it's no longer useful to avoid memory leaks @@ -103,8 +104,9 @@ export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => }, 1); return () => { + element?.removeEventListener('click', conditionalHandler, true); element?.removeEventListener('touchstart', conditionalHandler, true); - element?.removeEventListener('mouseup', conditionalHandler, true); + element?.removeEventListener('contextmenu', conditionalHandler, true); element?.removeEventListener('mousedown', handleMouseDown, true); clearTimeout(timeoutId.current); From b73b2bd9310a9bb1ef99b39b28306856dda3d72e Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 18:44:21 +0200 Subject: [PATCH 04/13] fix --- ...act-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json | 2 +- .../react-utilities/src/hooks/useOnScrollOutside.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json b/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json index 1cfa02fa963812..ec1c9a97992c9a 100644 --- a/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json +++ b/change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: `useOnClickOutside` should invoke callback on clicking scrollbar", + "comment": "fix: `useOnScrollOutside` should invoke callback on dragging scrollbar", "packageName": "@fluentui/react-utilities", "email": "yuanboxue@microsoft.com", "dependentChangeType": "patch" diff --git a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts index 86043fe1c60320..f6d6ce6246c99b 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts @@ -9,7 +9,7 @@ import type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside'; export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => { const { refs, callback, element, disabled, contains: containsProp } = options; - const listener = useEventCallback((ev: MouseEvent | TouchEvent) => { + const listener = useEventCallback((ev: Event) => { const contains: UseOnClickOrScrollOutsideOptions['contains'] = containsProp || ((parent, child) => !!parent?.contains(child)); @@ -17,7 +17,7 @@ export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => const isOutside = refs.every(ref => !contains(ref.current || null, target)); if (isOutside && !disabled) { - callback(ev); + callback(ev as MouseEvent | TouchEvent); } }); @@ -28,10 +28,13 @@ export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => element?.addEventListener('wheel', listener); element?.addEventListener('touchmove', listener); + // use capture phase because scroll does not bubble + element?.addEventListener('scroll', listener, true); return () => { element?.removeEventListener('wheel', listener); element?.removeEventListener('touchmove', listener); + element?.removeEventListener('scroll', listener, true); }; }, [listener, element, disabled]); }; From 26e8b983a995b82b8ef035b1ab198a822d06bd7f Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 19:05:20 +0200 Subject: [PATCH 05/13] UT --- .../src/hooks/useOnScrollOutside.test.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts index 669c369ba831ba..0fe9d82959ace3 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.test.ts @@ -2,9 +2,9 @@ import { renderHook } from '@testing-library/react-hooks'; import { useOnScrollOutside } from './useOnScrollOutside'; describe('useOnScrollOutside', () => { - const supportedEvents = ['wheel', 'touchmove']; + const supportedEvents = [{ event: 'wheel' }, { event: 'touchmove' }, { event: 'scroll', capture: true }]; - it.each(supportedEvents)('should add %s listener', event => { + it.each(supportedEvents)('should add %s listener', ({ event, capture }) => { // Arrange const element = { addEventListener: jest.fn(), removeEventListener: jest.fn() } as unknown as Document; @@ -12,11 +12,13 @@ describe('useOnScrollOutside', () => { renderHook(() => useOnScrollOutside({ element, callback: jest.fn(), refs: [] })); // Assert - expect(element.addEventListener).toHaveBeenCalledTimes(2); - expect(element.addEventListener).toHaveBeenCalledWith(event, expect.anything()); + expect(element.addEventListener).toHaveBeenCalledTimes(supportedEvents.length); + expect(element.addEventListener).toHaveBeenCalledWith( + ...(capture ? [event, expect.anything(), true] : [event, expect.anything()]), + ); }); - it.each(supportedEvents)('should cleanup %s listener', event => { + it.each(supportedEvents)('should cleanup %s listener', ({ event, capture }) => { // Arrange const element = { addEventListener: jest.fn(), removeEventListener: jest.fn() } as unknown as Document; @@ -25,8 +27,10 @@ describe('useOnScrollOutside', () => { unmount(); // Assert - expect(element.removeEventListener).toHaveBeenCalledTimes(2); - expect(element.removeEventListener).toHaveBeenCalledWith(event, expect.anything()); + expect(element.removeEventListener).toHaveBeenCalledTimes(supportedEvents.length); + expect(element.removeEventListener).toHaveBeenCalledWith( + ...(capture ? [event, expect.anything(), true] : [event, expect.anything()]), + ); }); it('should not add or remove event listeners when disabled', () => { From fad2512e83c50e89b7b64f668052bbac770ffbbe Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 12:06:26 +0200 Subject: [PATCH 06/13] fix type --- .../etc/react-utilities.api.md | 18 +++++++++++++----- .../src/hooks/useOnClickOutside.ts | 16 +++++++++------- .../src/hooks/useOnScrollOutside.ts | 19 +++++++++++++------ .../react-utilities/src/index.ts | 8 +++++++- 4 files changed, 42 insertions(+), 19 deletions(-) diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md index 5ac7b70c5fe23a..5703c3896f0b2c 100644 --- a/packages/react-components/react-utilities/etc/react-utilities.api.md +++ b/packages/react-components/react-utilities/etc/react-utilities.api.md @@ -328,8 +328,14 @@ export function useIsSSR(): boolean; // @public export function useMergedRefs(...refs: (React_2.Ref | undefined)[]): RefObjectFunction; -// @internal (undocumented) -export type UseOnClickOrScrollOutsideOptions = { +// @public @deprecated (undocumented) +export type UseOnClickOrScrollOutsideOptions = UseOnClickOutsideOptions; + +// @internal +export const useOnClickOutside: (options: UseOnClickOutsideOptions) => void; + +// @public (undocumented) +export type UseOnClickOutsideOptions = { element: Document | undefined; refs: React_2.MutableRefObject[]; contains?(parent: HTMLElement | null, child: HTMLElement): boolean; @@ -339,10 +345,12 @@ export type UseOnClickOrScrollOutsideOptions = { }; // @internal -export const useOnClickOutside: (options: UseOnClickOrScrollOutsideOptions) => void; +export const useOnScrollOutside: (options: UseOnScrollOutsideOptions) => void; -// @internal -export const useOnScrollOutside: (options: UseOnClickOrScrollOutsideOptions) => void; +// @public (undocumented) +export type UseOnScrollOutsideOptions = Pick & { + callback: (ev: Event | MouseEvent | TouchEvent) => void; +}; // @internal (undocumented) export const usePrevious: (value: ValueType) => ValueType | null; diff --git a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts index 74b414a8b8ed58..97b2bb9aa08e70 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnClickOutside.ts @@ -1,10 +1,7 @@ import * as React from 'react'; import { useEventCallback } from './useEventCallback'; -/** - * @internal - */ -export type UseOnClickOrScrollOutsideOptions = { +export type UseOnClickOutsideOptions = { /** * The element to listen for the click event */ @@ -38,13 +35,18 @@ export type UseOnClickOrScrollOutsideOptions = { callback: (ev: MouseEvent | TouchEvent) => void; }; -const DEFAULT_CONTAINS: UseOnClickOrScrollOutsideOptions['contains'] = (parent, child) => !!parent?.contains(child); +/** + * @deprecated use UseOnClickOutsideOptions instead + */ +export type UseOnClickOrScrollOutsideOptions = UseOnClickOutsideOptions; + +const DEFAULT_CONTAINS: UseOnClickOutsideOptions['contains'] = (parent, child) => !!parent?.contains(child); /** * @internal * Utility to perform checks where a click/touch event was made outside a component */ -export const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions) => { +export const useOnClickOutside = (options: UseOnClickOutsideOptions) => { const { refs, callback, element, disabled, disabledFocusOnIframe, contains = DEFAULT_CONTAINS } = options; const timeoutId = React.useRef(undefined); @@ -132,7 +134,7 @@ const getWindowEvent = (target: Node | Window): Event | undefined => { const FUI_FRAME_EVENT = 'fuiframefocus'; interface UseIFrameFocusOptions - extends Pick { + extends Pick { /** * Millisecond duration to poll */ diff --git a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts index f6d6ce6246c99b..7406203e511a6b 100644 --- a/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts +++ b/packages/react-components/react-utilities/src/hooks/useOnScrollOutside.ts @@ -1,23 +1,30 @@ import * as React from 'react'; import { useEventCallback } from './useEventCallback'; -import type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside'; +import { UseOnClickOutsideOptions } from './useOnClickOutside'; + +export type UseOnScrollOutsideOptions = Pick & { + /** + * Called if the scroll is outside the element refs + */ + callback: (ev: Event | MouseEvent | TouchEvent) => void; +}; /** * @internal - * Utility to perform checks where a click/touch event was made outside a component + * Utility to perform checks where a scroll/touch event was made outside a component */ -export const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions) => { +export const useOnScrollOutside = (options: UseOnScrollOutsideOptions) => { const { refs, callback, element, disabled, contains: containsProp } = options; - const listener = useEventCallback((ev: Event) => { - const contains: UseOnClickOrScrollOutsideOptions['contains'] = + const listener = useEventCallback((ev: Event | MouseEvent | TouchEvent) => { + const contains: UseOnScrollOutsideOptions['contains'] = containsProp || ((parent, child) => !!parent?.contains(child)); const target = ev.composedPath()[0] as HTMLElement; const isOutside = refs.every(ref => !contains(ref.current || null, target)); if (isOutside && !disabled) { - callback(ev as MouseEvent | TouchEvent); + callback(ev); } }); diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts index 97fc981ebeb745..7049b4f92ac4e8 100644 --- a/packages/react-components/react-utilities/src/index.ts +++ b/packages/react-components/react-utilities/src/index.ts @@ -44,7 +44,13 @@ export { useScrollbarWidth, useTimeout, } from './hooks/index'; -export type { RefObjectFunction, UseControllableStateOptions, UseOnClickOrScrollOutsideOptions } from './hooks/index'; +export type { + RefObjectFunction, + UseControllableStateOptions, + UseOnClickOrScrollOutsideOptions, + UseOnClickOutsideOptions, + UseOnScrollOutsideOptions, +} from './hooks/index'; export { canUseDOM, useIsSSR, SSRProvider } from './ssr/index'; From ee23095284a7075e2f6e4df064f06c73f7bab0ca Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 12:19:10 +0200 Subject: [PATCH 07/13] eslint disable for deprecation --- packages/react-components/react-utilities/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts index 7049b4f92ac4e8..85e4e5209b095a 100644 --- a/packages/react-components/react-utilities/src/index.ts +++ b/packages/react-components/react-utilities/src/index.ts @@ -47,6 +47,7 @@ export { export type { RefObjectFunction, UseControllableStateOptions, + // eslint-disable-next-line deprecation/deprecation UseOnClickOrScrollOutsideOptions, UseOnClickOutsideOptions, UseOnScrollOutsideOptions, From b3276f62e866bc073339fedcd64fc7ba53e0d9f3 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 13:04:34 +0200 Subject: [PATCH 08/13] fix type --- .../react-popover/src/components/Popover/Popover.types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-popover/src/components/Popover/Popover.types.ts b/packages/react-components/react-popover/src/components/Popover/Popover.types.ts index 65b08a76a2dfe0..569d077d244902 100644 --- a/packages/react-components/react-popover/src/components/Popover/Popover.types.ts +++ b/packages/react-components/react-popover/src/components/Popover/Popover.types.ts @@ -209,6 +209,7 @@ export type OnOpenChangeData = { open: boolean }; * The supported events that will trigger open/close of the menu */ export type OpenPopoverEvents = + | Event | MouseEvent | TouchEvent | React.FocusEvent From cdf6402d9943d56c0d77d02f05fbcf93de6c1549 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 13:06:54 +0200 Subject: [PATCH 09/13] type for popover --- ...react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json | 7 +++++++ .../react-popover/etc/react-popover.api.md | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json diff --git a/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json b/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json new file mode 100644 index 00000000000000..f80e01fcc14dac --- /dev/null +++ b/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: update type `OpenPopoverEvents` to include `Event` with the added scroll event listener in `useOnScrollOutside`", + "packageName": "@fluentui/react-popover", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-popover/etc/react-popover.api.md b/packages/react-components/react-popover/etc/react-popover.api.md index e6cca50af5bddc..7f03ab71b90b11 100644 --- a/packages/react-components/react-popover/etc/react-popover.api.md +++ b/packages/react-components/react-popover/etc/react-popover.api.md @@ -33,7 +33,7 @@ export type OnOpenChangeData = { }; // @public -export type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.FocusEvent | React_2.KeyboardEvent | React_2.MouseEvent; +export type OpenPopoverEvents = Event | MouseEvent | TouchEvent | React_2.FocusEvent | React_2.KeyboardEvent | React_2.MouseEvent; // @public export const Popover: React_2.FC; From 9e6e907be0208106e7f5b4976f9732a2d29e4de5 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 13:10:11 +0200 Subject: [PATCH 10/13] menu type --- ...ui-react-menu-ca40103c-dab8-48fa-bb6e-6672d9fb6db6.json | 7 +++++++ ...react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json | 2 +- packages/react-components/react-menu/etc/react-menu.api.md | 2 +- .../react-menu/src/components/Menu/Menu.types.ts | 2 +- 4 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 change/@fluentui-react-menu-ca40103c-dab8-48fa-bb6e-6672d9fb6db6.json diff --git a/change/@fluentui-react-menu-ca40103c-dab8-48fa-bb6e-6672d9fb6db6.json b/change/@fluentui-react-menu-ca40103c-dab8-48fa-bb6e-6672d9fb6db6.json new file mode 100644 index 00000000000000..775ea11986e116 --- /dev/null +++ b/change/@fluentui-react-menu-ca40103c-dab8-48fa-bb6e-6672d9fb6db6.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: update Menu open change event type to include `Event` (as `useOnScrollOutside` adds scroll event listener)", + "packageName": "@fluentui/react-menu", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json b/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json index f80e01fcc14dac..755615b39cb358 100644 --- a/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json +++ b/change/@fluentui-react-popover-62309005-c7b0-4c3b-8273-7ecfad0889f9.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "fix: update type `OpenPopoverEvents` to include `Event` with the added scroll event listener in `useOnScrollOutside`", + "comment": "fix: update type `OpenPopoverEvents` to include `Event` (as `useOnScrollOutside` adds scroll event listener)", "packageName": "@fluentui/react-popover", "email": "yuanboxue@microsoft.com", "dependentChangeType": "patch" diff --git a/packages/react-components/react-menu/etc/react-menu.api.md b/packages/react-components/react-menu/etc/react-menu.api.md index 842259d4efc19a..4990891d08ba14 100644 --- a/packages/react-components/react-menu/etc/react-menu.api.md +++ b/packages/react-components/react-menu/etc/react-menu.api.md @@ -281,7 +281,7 @@ export type MenuOpenChangeData = { event: MouseEvent | TouchEvent; } | { type: 'scrollOutside'; - event: MouseEvent | TouchEvent; + event: MouseEvent | TouchEvent | Event; } | { type: 'menuMouseEnter'; event: MouseEvent | TouchEvent; diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.types.ts b/packages/react-components/react-menu/src/components/Menu/Menu.types.ts index dcadc40dd74f80..34f1281d8cc3bb 100644 --- a/packages/react-components/react-menu/src/components/Menu/Menu.types.ts +++ b/packages/react-components/react-menu/src/components/Menu/Menu.types.ts @@ -239,7 +239,7 @@ export type MenuOpenChangeData = { } | { type: 'scrollOutside'; - event: MouseEvent | TouchEvent; + event: MouseEvent | TouchEvent | Event; } | { type: 'menuMouseEnter'; From fdb5fa1ffe2ae5686dd17bca51a960d27d774337 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 14:03:55 +0200 Subject: [PATCH 11/13] ut --- .../react-popover/src/components/Popover/Popover.test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx b/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx index 680621a2dac2bf..50559f25591dcc 100644 --- a/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx +++ b/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx @@ -17,6 +17,8 @@ describe('Popover', () => { 'component-has-static-classnames-object', // Popover does not have own styles 'make-styles-overrides-win', + // Popover onOpenChange uses Event type due to scroll event in useOnScrollOutside + 'consistent-callback-args', ], }); From 6738cbec1a4523fe7c4397f39e721f997f8371b0 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 14:39:14 +0200 Subject: [PATCH 12/13] eslint --- .../react-components/react-menu/src/utils/useOnMenuEnter.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-menu/src/utils/useOnMenuEnter.ts b/packages/react-components/react-menu/src/utils/useOnMenuEnter.ts index 2caa166e23a4a1..a091d3ccae0608 100644 --- a/packages/react-components/react-menu/src/utils/useOnMenuEnter.ts +++ b/packages/react-components/react-menu/src/utils/useOnMenuEnter.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { useEventCallback } from '@fluentui/react-utilities'; import { elementContains } from '@fluentui/react-portal'; +// eslint-disable-next-line deprecation/deprecation import type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities'; /** @@ -19,6 +20,7 @@ export const MENU_ENTER_EVENT = 'fuimenuenter'; * Instead, dispatch custom DOM event from the menu so that it can bubble * Each nested menu can use the listener to check if the event is from a child or parent menu */ +// eslint-disable-next-line deprecation/deprecation export const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => { const { refs, callback, element, disabled } = options; From 33b7db70facb99a483d8327f2cd27ac5c9bbe8e1 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 29 Aug 2023 15:09:02 +0200 Subject: [PATCH 13/13] UT --- .../AvatarGroupPopover/AvatarGroupPopover.test.tsx | 4 ++++ .../react-popover/src/components/Popover/Popover.test.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx index ddec3ad5a3ca72..05a3ef50b518bf 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx @@ -47,6 +47,10 @@ describe('AvatarGroupPopover', () => { getPortalElement: getPopoverSurfaceElement, }, ], + 'consistent-callback-args': { + // Popover onOpenChange uses Event type due to scroll event in useOnScrollOutside + ignoreProps: ['onOpenChange'], + }, }, requiredProps: { children: ( diff --git a/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx b/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx index 50559f25591dcc..23d374521ecb4a 100644 --- a/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx +++ b/packages/react-components/react-popover/src/components/Popover/Popover.test.tsx @@ -17,9 +17,13 @@ describe('Popover', () => { 'component-has-static-classnames-object', // Popover does not have own styles 'make-styles-overrides-win', - // Popover onOpenChange uses Event type due to scroll event in useOnScrollOutside - 'consistent-callback-args', ], + testOptions: { + 'consistent-callback-args': { + // Popover onOpenChange uses Event type due to scroll event in useOnScrollOutside + ignoreProps: ['onOpenChange'], + }, + }, }); /**