Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DropdownMenu v2: Render in the default Popover.Slot #51046

Merged
merged 5 commits into from
May 31, 2023
Merged

DropdownMenu v2: Render in the default Popover.Slot #51046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ce769f0
Add new slotName prop
ciampo May 29, 2023
49416a6
Add storybook example
ciampo May 29, 2023
e492792
Use context to use same slot for submenu portal
ciampo May 29, 2023
32346be
Use default popover slot instead of exposing a slotName prop, update …
ciampo May 29, 2023
551f91b
CHANGELOG
ciampo May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
### Experimental

- `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967)).
- `DropdownMenu` v2: Render in the default `Popover.Slot` ([#51046](https://github.com/WordPress/gutenberg/pull/51046)).


## 25.0.0 (2023-05-24)
Expand Down
26 changes: 22 additions & 4 deletions packages/components/src/dropdown-menu-v2/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,17 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import { forwardRef, createContext, useContext } from '@wordpress/element';
import { isRTL } from '@wordpress/i18n';
import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
import { SVG, Circle } from '@wordpress/primitives';

/**
* Internal dependencies
*/
import { useSlot } from '../slot-fill';
import Icon from '../icon';
import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
import * as DropdownMenuStyled from './styles';
import type {
DropdownMenuProps,
Expand All @@ -34,6 +36,12 @@ const SUB_MENU_OFFSET_SIDE = 12;
// Opposite amount of the top padding of the menu item
const SUB_MENU_OFFSET_ALIGN = -8;

const DropdownMenuPrivateContext = createContext< {
portalContainer: HTMLElement | null;
} >( {
portalContainer: null,
} );

/**
* `DropdownMenu` displays a menu to the user (such as a set of actions
* or functions) triggered by a button.
Expand All @@ -53,6 +61,10 @@ export const DropdownMenu = ( {
children,
trigger,
}: DropdownMenuProps ) => {
// Render the portal in the default slot used by the legacy Popover component.
const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME );
const portalContainer = slot.ref?.current;

return (
<DropdownMenuPrimitive.Root
defaultOpen={ defaultOpen }
Expand All @@ -64,15 +76,19 @@ export const DropdownMenu = ( {
<DropdownMenuPrimitive.Trigger asChild>
{ trigger }
</DropdownMenuPrimitive.Trigger>
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Portal container={ portalContainer }>
<DropdownMenuStyled.Content
side={ side }
align={ align }
sideOffset={ sideOffset }
alignOffset={ alignOffset }
loop={ true }
>
{ children }
<DropdownMenuPrivateContext.Provider
value={ { portalContainer } }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason why we memoize the context value in #51097 but not here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really. I worked on #51097 after working on this PR, and realized that memoizing the context's value could have been an improvement in rendering performance.

I'm going to merge this PR as-is, and then decide on whether we should memoize the whole context (or not) after rebasing #51097

>
{ children }
</DropdownMenuPrivateContext.Provider>
</DropdownMenuStyled.Content>
</DropdownMenuPrimitive.Portal>
</DropdownMenuPrimitive.Root>
Expand Down Expand Up @@ -118,6 +134,8 @@ export const DropdownSubMenu = ( {
children,
trigger,
}: DropdownSubMenuProps ) => {
const { portalContainer } = useContext( DropdownMenuPrivateContext );

return (
<DropdownMenuPrimitive.Sub
defaultOpen={ defaultOpen }
Expand All @@ -130,7 +148,7 @@ export const DropdownSubMenu = ( {
>
{ trigger }
</DropdownMenuStyled.SubTrigger>
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Portal container={ portalContainer }>
<DropdownMenuStyled.SubContent
loop
sideOffset={ SUB_MENU_OFFSET_SIDE }
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/dropdown-menu-v2/stories/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
DropdownSubMenuTrigger,
} from '..';
import Button from '../../button';
import Popover from '../../popover';
import { Provider as SlotFillProvider } from '../../slot-fill';

/**
* WordPress dependencies
Expand Down Expand Up @@ -127,7 +129,11 @@ const RadioItemsGroup = () => {
};

const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
<DropdownMenu { ...props } />
<SlotFillProvider>
<DropdownMenu { ...props } />
{ /* @ts-expect-error Slot is not currently typed on Popover */ }
<Popover.Slot />
</SlotFillProvider>
);
export const Default = Template.bind( {} );
Default.args = {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ import { overlayMiddlewares } from './overlay-middlewares';
*
* @type {string}
*/
const SLOT_NAME = 'Popover';
export const SLOT_NAME = 'Popover';

// An SVG displaying a triangle facing down, filled with a solid
// color and bordered in such a way to create an arrow-like effect.
Expand Down