Skip to content

Support controlling open/closed state for Dropdown and DropdownMenu #54257

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

Merged
ciampo merged 10 commits into from
Sep 11, 2023
Merged

Support controlling open/closed state for Dropdown and DropdownMenu #54257

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2fc6530
Allow dropdown open state to be controlled
ciampo Sep 7, 2023
d8379d9
Update Dropdown stories to use controlled mode
ciampo Sep 7, 2023
bf72b26
Allow DropdownMenu open state to be controlled
ciampo Sep 7, 2023
2d35f36
Update DropdownMenu stories to use controlled mode
ciampo Sep 7, 2023
c78a46f
Add temporary storybook example to show how to keep only dropdownmenu…
ciampo Sep 7, 2023
17ad46e
Remove ad-hoc storybook example and restore close callback
ciampo Sep 8, 2023
a5a400c
Restore uncontrolled storybook examples
ciampo Sep 8, 2023
ab6e115
CHANGELOG
ciampo Sep 8, 2023
1beb750
Add docs for the new dropdown props
ciampo Sep 8, 2023
982f0fa
Add docs for the new DropdownMenu props
ciampo Sep 8, 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
Prev Previous commit
Next Next commit
Remove ad-hoc storybook example and restore close callback
  • Loading branch information
@ciampo
ciampo committed Sep 8, 2023
commit 17ad46e201ae91887b2870270e904f993e2e6f46
74 changes: 1 addition & 73 deletions packages/components/src/dropdown-menu/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react';
/**
* WordPress dependencies
*/
import { useState, useId, createContext, useContext } from '@wordpress/element';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -136,75 +136,3 @@ WithChildren.args = {
</>
),
};

const OnlyOneDropdownOpenContext = createContext< {
openDropdownId?: string;
setOpenDropdownId: ( id: string | undefined ) => void;
} >( {
openDropdownId: undefined,
setOpenDropdownId: ( _instanceId ) => {},
} );

const ItemWithDropdown = () => {
const { openDropdownId, setOpenDropdownId } = useContext(
OnlyOneDropdownOpenContext
);

const instanceId = useId();

return (
<div>
Some text
<DropdownMenu
label="Open dropdown"
icon={ menu }
controls={ [
{
title: 'First Menu Item Label',
icon: arrowUp,
// eslint-disable-next-line no-console
onClick: () => console.log( 'up!' ),
},
{
title: 'Second Menu Item Label',
icon: arrowDown,
// eslint-disable-next-line no-console
onClick: () => console.log( 'down!' ),
},
] }
open={ openDropdownId === instanceId }
onToggle={ ( willOpen ) => {
if ( willOpen ) {
setOpenDropdownId( instanceId );
} else {
setOpenDropdownId( undefined );
}
} }
/>
</div>
);
};

export const OnlyOneOpened: StoryFn< typeof DropdownMenu > = () => {
const [ openDropdownId, setOpenDropdownId ] = useState<
string | undefined
>( undefined );

return (
<OnlyOneDropdownOpenContext.Provider
value={ { openDropdownId, setOpenDropdownId } }
>
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
<ItemWithDropdown />
</OnlyOneDropdownOpenContext.Provider>
);
};
4 changes: 1 addition & 3 deletions packages/components/src/dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,7 @@ const UnconnectedDropdown = (
! containerRef.current.contains( ownerDocument.activeElement ) &&
( ! dialog || dialog.contains( containerRef.current ) )
) {
// Temporarily disable this functionality to make sure that the storybook
// example works
// close();
close();
}
}

Expand Down