From cf207869f73c937c19d956c2f38988b844da1f3a Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:13:33 -0500 Subject: [PATCH 1/9] add onMouseDown passthrough in ActionMenu and AnchoredOverlay --- src/ActionMenu.tsx | 32 ++++++++++++++++++++++++- src/AnchoredOverlay/AnchoredOverlay.tsx | 13 +++++----- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 1b06bbeded5..0c5cd2ad268 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -6,12 +6,35 @@ import React, {useCallback, useEffect, useRef} from 'react' import {AnchoredOverlay} from './AnchoredOverlay' import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate' export interface ActionMenuProps extends Partial>, ListPropsBase { + /** + * A custom function component used to render the anchor element. + * Will receive the `anchoredContent` prop as `children` prop when an item is activated. + * Uses a `Button` by default. + */ // eslint-disable-next-line @typescript-eslint/no-explicit-any renderAnchor?: (props: any) => JSX.Element + /** + * Content that is passed into the renderAnchor component, which is a button by default. + */ anchorContent?: React.ReactNode + /** + * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks. + */ onAction?: (props: ItemProps, event?: React.MouseEvent | React.KeyboardEvent) => void + /** + * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`. + */ open?: boolean + + /** + * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`. + */ setOpen?: (s: boolean) => void + + /** + * An onMouseDown callback that will be passed into the internal AnchoredOverlay component + */ + onOverlayMouseDown?: (e: React.MouseEvent) => unknown } const ActionMenuItem = (props: ItemProps) => @@ -25,6 +48,7 @@ const ActionMenuBase = ({ onAction, open, setOpen, + onOverlayMouseDown, ...listProps }: ActionMenuProps): JSX.Element => { const pendingActionRef = useRef<() => unknown>() @@ -69,7 +93,13 @@ const ActionMenuBase = ({ }, [open]) return ( - + ) diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 799df51230c..22535c669bd 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -5,10 +5,6 @@ import {useFocusZone} from '../hooks/useFocusZone' import {useAnchoredPosition, useRenderForcingRef} from '../hooks' import {uniqueId} from '../utils/uniqueId' -function preventDefault(event: React.UIEvent) { - event.preventDefault() -} - export interface AnchoredOverlayProps extends Pick { /** * A custom function component used to render the anchor element. @@ -30,6 +26,11 @@ export interface AnchoredOverlayProps extends Pick unknown + + /** + * A callback that occurs when a user presses a mouse button over an element. + */ + onMouseDown?: (event: React.MouseEvent) => unknown } /** @@ -43,6 +44,7 @@ export const AnchoredOverlay: React.FC = ({ onOpen, onClose, height, + onMouseDown, width }) => { const anchorRef = useRef(null) @@ -129,8 +131,7 @@ export const AnchoredOverlay: React.FC = ({ ref={updateOverlayRef} role="listbox" visibility={position ? 'visible' : 'hidden'} - onMouseDown={preventDefault} - onClick={preventDefault} + onMouseDown={onMouseDown} height={height} width={width} {...overlayPosition} From 6bab49bdcdd449293d66ad3b500b5b119e012130 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:19:26 -0500 Subject: [PATCH 2/9] Create wet-plums-fetch.md --- .changeset/wet-plums-fetch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-plums-fetch.md diff --git a/.changeset/wet-plums-fetch.md b/.changeset/wet-plums-fetch.md new file mode 100644 index 00000000000..60b8c2cabe0 --- /dev/null +++ b/.changeset/wet-plums-fetch.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +onMouseDown passthrough from ActionMenu to AnchoredOverlay. From 9d0731451ae58da139c983923d315e0e7557f528 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:21:14 -0500 Subject: [PATCH 3/9] slight tweaks to ActionMenu doc comments --- src/ActionMenu.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 0c5cd2ad268..16011329816 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -8,19 +8,22 @@ import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate' export interface ActionMenuProps extends Partial>, ListPropsBase { /** * A custom function component used to render the anchor element. - * Will receive the `anchoredContent` prop as `children` prop when an item is activated. + * Will receive the `anchoredContent` prop as `children` prop. * Uses a `Button` by default. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any renderAnchor?: (props: any) => JSX.Element + /** * Content that is passed into the renderAnchor component, which is a button by default. */ anchorContent?: React.ReactNode + /** * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks. */ onAction?: (props: ItemProps, event?: React.MouseEvent | React.KeyboardEvent) => void + /** * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`. */ From e94326b881027f0a71a016e90b4310745ef0f48f Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:36:52 -0500 Subject: [PATCH 4/9] replace onMouseDown with overlayProps in ActionMenu and DropdownMenu --- src/ActionMenu.tsx | 8 ++++---- src/AnchoredOverlay/AnchoredOverlay.tsx | 9 +++++++-- src/DropdownMenu/DropdownMenu.tsx | 14 +++++++++++++- src/stories/ActionMenu.stories.tsx | 5 +++++ 4 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 16011329816..819b7b6d10f 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -35,9 +35,9 @@ export interface ActionMenuProps extends Partial void /** - * An onMouseDown callback that will be passed into the internal AnchoredOverlay component + * Props to be spread on the internal `Overlay` component. */ - onOverlayMouseDown?: (e: React.MouseEvent) => unknown + overlayProps?: Record } const ActionMenuItem = (props: ItemProps) => @@ -51,7 +51,7 @@ const ActionMenuBase = ({ onAction, open, setOpen, - onOverlayMouseDown, + overlayProps, ...listProps }: ActionMenuProps): JSX.Element => { const pendingActionRef = useRef<() => unknown>() @@ -101,7 +101,7 @@ const ActionMenuBase = ({ open={combinedOpenState} onOpen={onOpen} onClose={onClose} - onMouseDown={onOverlayMouseDown} + overlayProps={overlayProps} > diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 22535c669bd..0e22d0da500 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -31,6 +31,11 @@ export interface AnchoredOverlayProps extends Pick unknown + + /** + * Props to be spread on the internal `Overlay` component. + */ + overlayProps?: Record } /** @@ -44,7 +49,7 @@ export const AnchoredOverlay: React.FC = ({ onOpen, onClose, height, - onMouseDown, + overlayProps, width }) => { const anchorRef = useRef(null) @@ -131,10 +136,10 @@ export const AnchoredOverlay: React.FC = ({ ref={updateOverlayRef} role="listbox" visibility={position ? 'visible' : 'hidden'} - onMouseDown={onMouseDown} height={height} width={width} {...overlayPosition} + {...overlayProps} > {children} diff --git a/src/DropdownMenu/DropdownMenu.tsx b/src/DropdownMenu/DropdownMenu.tsx index 99e316e515b..04a44d7d104 100644 --- a/src/DropdownMenu/DropdownMenu.tsx +++ b/src/DropdownMenu/DropdownMenu.tsx @@ -27,6 +27,11 @@ export interface DropdownMenuProps extends Partial unknown + + /** + * Props to be spread on the internal `Overlay` component. + */ + overlayProps?: Record } /** @@ -40,6 +45,7 @@ export function DropdownMenu({ placeholder, selectedItem, onChange, + overlayProps, ...listProps }: DropdownMenuProps): JSX.Element { const [open, setOpen] = useState(false) @@ -79,7 +85,13 @@ export function DropdownMenu({ ) return ( - + ) diff --git a/src/stories/ActionMenu.stories.tsx b/src/stories/ActionMenu.stories.tsx index 31b50b251ab..e9164ac6a26 100644 --- a/src/stories/ActionMenu.stories.tsx +++ b/src/stories/ActionMenu.stories.tsx @@ -96,6 +96,11 @@ export function SimpleListStory(): JSX.Element { + // eslint-disable-next-line no-console + console.log('onMouseDown in the interal Overlay can be useful for controlling event interactions', e) + }} items={[ {text: 'New file', trailingText: '⌘O', disabled: true, leadingVisual: ProjectIcon}, ActionList.Divider, From 61ea535b2c52c003199b8f9ba1b15c053b51bc9b Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:37:46 -0500 Subject: [PATCH 5/9] Update wet-plums-fetch.md --- .changeset/wet-plums-fetch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/wet-plums-fetch.md b/.changeset/wet-plums-fetch.md index 60b8c2cabe0..d475216e5b2 100644 --- a/.changeset/wet-plums-fetch.md +++ b/.changeset/wet-plums-fetch.md @@ -2,4 +2,4 @@ "@primer/components": patch --- -onMouseDown passthrough from ActionMenu to AnchoredOverlay. +overlayProps passthrough from ActionMenu and DropdownMenu to AnchoredOverlay. From fc19bd3463e84cc722d2c6f09970353645451062 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:38:20 -0500 Subject: [PATCH 6/9] remove onMouseDown from AnchoredOverlay --- src/AnchoredOverlay/AnchoredOverlay.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 0e22d0da500..5f93f48258c 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -27,11 +27,6 @@ export interface AnchoredOverlayProps extends Pick unknown - /** - * A callback that occurs when a user presses a mouse button over an element. - */ - onMouseDown?: (event: React.MouseEvent) => unknown - /** * Props to be spread on the internal `Overlay` component. */ From 0721a83f8b9e568f1abb7907ee16ebac6077e15a Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:45:10 -0500 Subject: [PATCH 7/9] Better typing on overlayProps --- src/ActionMenu.tsx | 3 ++- src/AnchoredOverlay/AnchoredOverlay.tsx | 2 +- src/DropdownMenu/DropdownMenu.tsx | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 819b7b6d10f..71dca586010 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -5,6 +5,7 @@ import Button, {ButtonProps} from './Button' import React, {useCallback, useEffect, useRef} from 'react' import {AnchoredOverlay} from './AnchoredOverlay' import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate' +import {OverlayProps} from './Overlay' export interface ActionMenuProps extends Partial>, ListPropsBase { /** * A custom function component used to render the anchor element. @@ -37,7 +38,7 @@ export interface ActionMenuProps extends Partial + overlayProps?: Partial } const ActionMenuItem = (props: ItemProps) => diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 5f93f48258c..48cfaa85aea 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -30,7 +30,7 @@ export interface AnchoredOverlayProps extends Pick + overlayProps?: Partial } /** diff --git a/src/DropdownMenu/DropdownMenu.tsx b/src/DropdownMenu/DropdownMenu.tsx index 04a44d7d104..112c55bc579 100644 --- a/src/DropdownMenu/DropdownMenu.tsx +++ b/src/DropdownMenu/DropdownMenu.tsx @@ -3,6 +3,7 @@ import {List, GroupedListProps, ListPropsBase, ItemInput} from '../ActionList/Li import {DropdownButton, DropdownButtonProps} from './DropdownButton' import {Item} from '../ActionList/Item' import {AnchoredOverlay} from '../AnchoredOverlay' +import {OverlayProps} from './Overlay' export interface DropdownMenuProps extends Partial>, ListPropsBase { /** @@ -31,7 +32,7 @@ export interface DropdownMenuProps extends Partial + overlayProps?: Partial } /** From ebdc72b2ce74f832f3c758ff237e1d7113de85fc Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:49:57 -0500 Subject: [PATCH 8/9] import OverlayProps from correct location in DropdownMenu --- src/DropdownMenu/DropdownMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DropdownMenu/DropdownMenu.tsx b/src/DropdownMenu/DropdownMenu.tsx index 112c55bc579..6d333fed080 100644 --- a/src/DropdownMenu/DropdownMenu.tsx +++ b/src/DropdownMenu/DropdownMenu.tsx @@ -3,7 +3,7 @@ import {List, GroupedListProps, ListPropsBase, ItemInput} from '../ActionList/Li import {DropdownButton, DropdownButtonProps} from './DropdownButton' import {Item} from '../ActionList/Item' import {AnchoredOverlay} from '../AnchoredOverlay' -import {OverlayProps} from './Overlay' +import {OverlayProps} from '../Overlay' export interface DropdownMenuProps extends Partial>, ListPropsBase { /** From 608a87420d07723d407e23a4a59c83a4b7c76fda Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 10 May 2021 14:51:05 -0500 Subject: [PATCH 9/9] fix typo in ActionMenu story --- src/stories/ActionMenu.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/ActionMenu.stories.tsx b/src/stories/ActionMenu.stories.tsx index e9164ac6a26..d682603afb9 100644 --- a/src/stories/ActionMenu.stories.tsx +++ b/src/stories/ActionMenu.stories.tsx @@ -99,7 +99,7 @@ export function SimpleListStory(): JSX.Element { overlayProps={{ onMouseDown: (e: React.MouseEvent) => // eslint-disable-next-line no-console - console.log('onMouseDown in the interal Overlay can be useful for controlling event interactions', e) + console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e) }} items={[ {text: 'New file', trailingText: '⌘O', disabled: true, leadingVisual: ProjectIcon},