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.

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

Menu Bar, Menu Button, Menu, and Menu Items #42

Open
wants to merge 291 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
291 commits
Select commit Hold shift + click to select a range
9701cda
instead of storing just metadata, maybe make a full copy of items?
charlie-yao Dec 29, 2021
10cd7fe
rename "items" to "children", pass down a dummy keydown event handler
charlie-yao Dec 29, 2021
d65d049
the first item of the menubar is focusable
charlie-yao Dec 29, 2021
f90be27
get rid of linter ignore comment
charlie-yao Dec 29, 2021
9acddd4
"skeleton" for capturing key events
charlie-yao Dec 29, 2021
0c4021c
rudimentary menubar navigation with arrow keys
charlie-yao Dec 29, 2021
f0d1eea
use more destructuring
charlie-yao Dec 29, 2021
f4b5270
prevent default for all conditions
charlie-yao Dec 29, 2021
dddede9
this should allow each node to know their position in the entire tree
charlie-yao Dec 30, 2021
a8b8959
hide menus that are not expanded
charlie-yao Dec 30, 2021
000190d
get rid of id and index in favor of position
charlie-yao Dec 30, 2021
ece4589
begin using position to derive the index
charlie-yao Dec 30, 2021
4a90abf
specify basic nav for the root level
charlie-yao Dec 30, 2021
0382dbc
begin work on arrowdown handler and consolidate some code
charlie-yao Dec 30, 2021
5ebb66d
first pass at up arrow handling
charlie-yao Dec 30, 2021
23fee83
first pass at handling enter
charlie-yao Dec 30, 2021
447cfb4
first pass at handling spacebar
charlie-yao Dec 30, 2021
45ac80a
implement more of the right arrow handler
charlie-yao Dec 30, 2021
18ab732
write an isParentMenuitem utility function
charlie-yao Dec 31, 2021
c02ddf9
rudimentary styling to help visualize behavior
charlie-yao Dec 31, 2021
cbb1d11
accidentally did it in the prev commit, but (mostly) finish implement…
charlie-yao Dec 31, 2021
1639a7d
implement more of the left arrow handler
charlie-yao Dec 31, 2021
b9c1055
this should (mostly) finish implementing the left arrow
charlie-yao Dec 31, 2021
a0dbc48
implement the esc key
charlie-yao Dec 31, 2021
9b96d4b
first attempt at tab handling
charlie-yao Dec 31, 2021
8ff92b4
rename "isFocusable" to "isTabbable"
charlie-yao Jan 2, 2022
9b2a157
only root-level menu items should be tabbable
charlie-yao Jan 3, 2022
3f168e4
comment out tab handling for now
charlie-yao Jan 3, 2022
f7b7937
bring back collapse-on-tab
charlie-yao Jan 3, 2022
d0ae1b3
nobody uses this proptype anymore
charlie-yao Jan 3, 2022
815abad
resolve linter complaints
charlie-yao Jan 3, 2022
aa2f26f
make ParentMenuItem a class component
charlie-yao Jan 4, 2022
7b1e3c9
for now have ParentMenuItem be directly responsible for rendering its…
charlie-yao Jan 4, 2022
7b1dafb
have MenuBar handle its own rendering for now
charlie-yao Jan 4, 2022
a0c77b4
move tabbability into the state
charlie-yao Jan 4, 2022
892d07f
try using only an index rather than the full position
charlie-yao Jan 4, 2022
5b7a8ea
get rid of some commented code for now
charlie-yao Jan 4, 2022
5c311a1
skeleton for conditions
charlie-yao Jan 4, 2022
efb1f64
trying out an "expandedIndex" to see which menus are expanded
charlie-yao Jan 4, 2022
968bfd0
ParentMenuItem no longer forwards its ref
charlie-yao Jan 4, 2022
d448be7
ParentMenuItem has a ref for itself, begin reimplementing keydown fun…
charlie-yao Jan 4, 2022
07fa73b
bring back most of the functionality for menubar
charlie-yao Jan 4, 2022
ddb4d04
bring back some more functionality for submenus
charlie-yao Jan 4, 2022
4a0794e
start having the menu items be responsible for themselves?
charlie-yao Jan 5, 2022
f7df132
start having menuitem be responsible for its own events
charlie-yao Jan 5, 2022
e2d1ac5
if the menu items are responsible for their own event handling, then …
charlie-yao Jan 5, 2022
25768a7
whole bunch of cleanup
charlie-yao Jan 5, 2022
8060973
resolve some linter complaints
charlie-yao Jan 5, 2022
58f7d4c
menubar up handling
charlie-yao Jan 5, 2022
b8d8e59
menubar down handling
charlie-yao Jan 5, 2022
bd1db87
left/right handling at the menubar level
charlie-yao Jan 5, 2022
0fd8bfa
enter and spacebar for the menubar level
charlie-yao Jan 5, 2022
bd4f143
home and end implementation at the menubar level
charlie-yao Jan 5, 2022
1598b5e
up and down handling for parentmenuitem
charlie-yao Jan 5, 2022
90b762e
implement enter and some of spacebar for parentmenuitem
charlie-yao Jan 5, 2022
e01d1c3
arrow left handling for parent menu item
charlie-yao Jan 5, 2022
c2e05a8
partial implementation of the arrow right for parentmenuitem
charlie-yao Jan 5, 2022
964f9af
bad implementation of arrow right for parentmenuitem, implement home …
charlie-yao Jan 5, 2022
7976491
esc implementation
charlie-yao Jan 5, 2022
1d4cc29
first attempt at tab implementation
charlie-yao Jan 5, 2022
c34e423
cleanup some proptypes
charlie-yao Jan 5, 2022
d7b8812
give menus a label and labelId prop
charlie-yao Jan 5, 2022
3320668
default props
charlie-yao Jan 5, 2022
406134e
default props for label and labelId
charlie-yao Jan 5, 2022
abde896
get rid of some TODO comments
charlie-yao Jan 5, 2022
49cd0dc
get rid of some commented-out code
charlie-yao Jan 5, 2022
e86e333
irrelevant comment
charlie-yao Jan 5, 2022
5cd161b
not using utils.jsx anymore
charlie-yao Jan 5, 2022
e3a6b63
get rid of more todos
charlie-yao Jan 5, 2022
ad56ae7
get rid of commented code
charlie-yao Jan 5, 2022
755f323
get rid of initializeItems()
charlie-yao Jan 5, 2022
65a89a0
menubar maintains isExpanded state in its event
charlie-yao Jan 6, 2022
34274e0
minor naming change
charlie-yao Jan 6, 2022
7aab80c
add a fixme comment
charlie-yao Jan 6, 2022
11e2b47
add a menuitemcheckbox component
charlie-yao Jan 6, 2022
63890c7
render some menuitem checkboxes
charlie-yao Jan 6, 2022
a5b2e03
menuitemradio implementation
charlie-yao Jan 6, 2022
c347fc2
radio group implementation
charlie-yao Jan 6, 2022
765384b
rename file
charlie-yao Jan 6, 2022
9e2e34f
implement a separator component
charlie-yao Jan 6, 2022
f0e4057
add an orientation for MenuItemSeparator
charlie-yao Jan 6, 2022
1b26092
wrap menuitemradiogroup in an <li>
charlie-yao Jan 6, 2022
d73471d
add a comment for menuitemradiogroup
charlie-yao Jan 6, 2022
dcd85a8
give each menuitem type their own proptype
charlie-yao Jan 8, 2022
5102e93
fix some linter complaints
charlie-yao Jan 8, 2022
7f355ef
give the radio options their own proptype
charlie-yao Jan 8, 2022
8dd1340
begin rendering menuitemradios
charlie-yao Jan 8, 2022
bd2329c
begin passing down index, level, and onKeyDown to radio options
charlie-yao Jan 8, 2022
2891f97
first attempt at passing down index, level, and ref to separators and…
charlie-yao Jan 10, 2022
75cc7ea
try a slightly different way of rendering items
charlie-yao Jan 10, 2022
8196487
begin storing two separate indices for items - one for the items prop…
charlie-yao Jan 11, 2022
3dbd501
begin skipping separators in parentmenuitem
charlie-yao Jan 12, 2022
f922aef
use a much more complicated menubar for testing
charlie-yao Jan 12, 2022
52467cb
new next/prev focus functions for MenuBar
charlie-yao Jan 12, 2022
d2bc681
use refIndex for menubar"s up and down arrow
charlie-yao Jan 12, 2022
c744439
parentmenuitem"s focus first and last methods now account for separators
charlie-yao Jan 12, 2022
a17d6c2
menubar space and enter now use refIndex
charlie-yao Jan 12, 2022
b6a510a
menubar home and end now account for separators and radios
charlie-yao Jan 12, 2022
eedafa9
parentmenuitem arrow right takes into account separators and radios
charlie-yao Jan 12, 2022
48295ae
parentmenuitem enter and space take into account separators and radios
charlie-yao Jan 12, 2022
36ef050
nobody uses this anymore
charlie-yao Jan 12, 2022
04b2933
fix parentmenuitem arrow left
charlie-yao Jan 13, 2022
d1593d6
try giving menu items their full position
charlie-yao Jan 13, 2022
8fa3627
put the position on the elems as data attributes
charlie-yao Jan 13, 2022
17cae9c
get rid of index/refIndex/level and start storing a full flattened po…
charlie-yao Jan 13, 2022
a572f93
this should fix arrow right for parentmenuitem
charlie-yao Jan 13, 2022
5fa24b5
give menubar an expandMenu() method
charlie-yao Jan 14, 2022
abbf376
add a new menubar with flipped orientations
charlie-yao Jan 14, 2022
84a5029
account for orientation in menubar
charlie-yao Jan 14, 2022
4bc03d2
account for orientation in parentmenuitem
charlie-yao Jan 14, 2022
b8a0f51
skeleton for having items use their own events
charlie-yao Jan 14, 2022
6b064d2
more skeletoning
charlie-yao Jan 14, 2022
0b9326c
lets try reworking the current api first
charlie-yao Jan 14, 2022
5163f6a
nobody is using this right now
charlie-yao Jan 14, 2022
cc47995
this should hopefully make naming a bit more consistent
charlie-yao Jan 14, 2022
f52977e
get rid of this (for now?)
charlie-yao Jan 14, 2022
29a9777
satisfy proptype complaint
charlie-yao Jan 14, 2022
9e27826
rearrange method
charlie-yao Jan 14, 2022
e9b5f03
give parentmenuitem an expandmenu method
charlie-yao Jan 14, 2022
e908631
get rid of some console logs
charlie-yao Jan 14, 2022
a59d055
rename itemRefs to childItemRefs in menubar
charlie-yao Jan 14, 2022
446c053
rename expand/collapse in menubar
charlie-yao Jan 14, 2022
6dca299
get rid of an unused prop, move a method in parentmenuitem
charlie-yao Jan 21, 2022
c0135bd
rename expand/collapse methods in parentmenuitem to hopefully clarify…
charlie-yao Jan 21, 2022
f0d3bf0
rearrange prop for consistency
charlie-yao Jan 21, 2022
4097035
rename collapseParent to collapse
charlie-yao Jan 21, 2022
b18f687
seems like parentmenuitem only wants to navigate to the previous root…
charlie-yao Jan 21, 2022
d2475fc
this should simplify some conditional logic
charlie-yao Jan 21, 2022
3813d67
no need to repeat logic
charlie-yao Jan 21, 2022
48c6e7b
separators in menus aren"t focusable, so get rid of their refs and such
charlie-yao Jan 21, 2022
e67fb79
change some linter rules, run the linter and resolve complaints
charlie-yao Jan 24, 2022
5f98da1
convert <Menu> into a class component
charlie-yao Jan 24, 2022
ffb9551
menubutton is the one that should be converted to a class component :x
charlie-yao Jan 24, 2022
4551b8a
give <Menu> an id prop
charlie-yao Jan 25, 2022
179f8cb
give <Menu> an items proptype
charlie-yao Jan 25, 2022
6b65f56
give <Menu> an orientation prop defaulting to vertical
charlie-yao Jan 25, 2022
fba219b
have <MenuButton> begin rendering a dummy <Menu>
charlie-yao Jan 25, 2022
92d6380
supply label/labelId props to Menu and aria-controls to MenuButton
charlie-yao Jan 25, 2022
bfbf47e
give <Menu> a classname prop, copy and paste item denring code into M…
charlie-yao Jan 25, 2022
d4a20cb
expand menubutton"s menu when pressing space or enter
charlie-yao Jan 25, 2022
c11ca8f
arrow up and arrow down for menubutton
charlie-yao Jan 25, 2022
d33c80f
copy and paste code from menubar into menubutton
charlie-yao Jan 25, 2022
5e74bf3
more focus/nav api consolidation
charlie-yao Jan 25, 2022
ea7de54
use already-existing methods
charlie-yao Jan 25, 2022
d180cb3
give expand/collapsing the button their own methods
charlie-yao Jan 25, 2022
e1e6f75
let"s not worry about orientation for now
charlie-yao Jan 25, 2022
c6e6e32
I don"t think there"s actually anything to do here if the orientation…
charlie-yao Jan 25, 2022
22fbca8
collapse the button on escape and tab
charlie-yao Jan 25, 2022
c434ca1
feels like a somewhat cheap hack to get parentmenuitem to know that i…
charlie-yao Jan 26, 2022
7afc910
menubutton accounts for orientation
charlie-yao Jan 26, 2022
25973dd
fix linter complaints, menubutton doesn"t actually care about autoexpand
charlie-yao Jan 26, 2022
b837657
comment to hopefully clarify some menubutton props
charlie-yao Jan 26, 2022
8cd06ff
dummy HOC to manage menu state
charlie-yao Jan 26, 2022
0d4ac46
actually scratch that, not sure what im "genericizing" at the moment
charlie-yao Jan 26, 2022
9f8849c
dummy menubar wrapper to test state management
charlie-yao Jan 26, 2022
6a9e773
move the items to a method instead
charlie-yao Jan 26, 2022
fdc93ed
get rid of some unnecessary separators
charlie-yao Jan 26, 2022
b7264be
... make items come in as props again
charlie-yao Jan 26, 2022
a5cc927
create a copy of items so as not to directly modify any props
charlie-yao Jan 26, 2022
4a33fae
assign each item a uuid and create copies for radio options too
charlie-yao Jan 26, 2022
eeae648
some pretty rudimentary state management for checkboxes
charlie-yao Jan 26, 2022
141167d
actually, I dont think I need to provide generic state management
charlie-yao Jan 27, 2022
e282c1e
simplify the menu a bit
charlie-yao Jan 27, 2022
30710d9
start proof-of-concept stateful checkboxes and radios
charlie-yao Jan 28, 2022
5a645af
test giving the radiogroup onActivate
charlie-yao Jan 28, 2022
a48c0d4
test menubar radio and checkboxes
charlie-yao Jan 28, 2022
1f61c7c
activation handling for regular menuitems
charlie-yao Jan 28, 2022
51f6262
dummy states and handlers for mixed checkbox test
charlie-yao Jan 28, 2022
7f44553
state handling for mixed checkboxes
charlie-yao Jan 28, 2022
f05a307
refocus on the menubar item upon collapsing
charlie-yao Jan 28, 2022
cbd384c
won't do (for now)
charlie-yao Jan 28, 2022
57fb7fa
menubar doesnt need to collapse, begin stateful menubutton demo
charlie-yao Jan 28, 2022
d307075
rename focusMenubarItem to focusRootItem, menubutton provides a focus…
charlie-yao Jan 28, 2022
cf4481f
resolve some linter complaints
charlie-yao Jan 28, 2022
2737c1b
an attempt at reusing render code
charlie-yao Jan 28, 2022
4511d01
I think for now, I"ll hold off on this
charlie-yao Jan 28, 2022
3efd71d
first attempt at offloading focus duties to a HOC
charlie-yao Jan 28, 2022
23ba5d7
remove a bunch of functionality
charlie-yao Jan 28, 2022
507566a
get rid of subIndex and per-radio option onActivate
charlie-yao Jan 28, 2022
772c03d
bring back previous menubar functionality
charlie-yao Jan 28, 2022
a0c1fcb
give menubar a dummy keydown
charlie-yao Jan 31, 2022
b82a959
give parentmenuitem a dummy keydown
charlie-yao Jan 31, 2022
cb8ed32
remove keydown events from individual menu items
charlie-yao Jan 31, 2022
5b26668
convert menu to a class component
charlie-yao Jan 31, 2022
ad0dc4f
the dummy event should probably go on Menu
charlie-yao Jan 31, 2022
986ce05
give ParentMenuItem a keydown event too
charlie-yao Jan 31, 2022
0d78150
actually, scratch that for now
charlie-yao Jan 31, 2022
13f47e7
try giving ParentMenuItem control over its own expand/collapse state
charlie-yao Jan 31, 2022
67a46b4
wrap ParentMenuItem in a MenuFocusManager
charlie-yao Jan 31, 2022
afecc37
have ParentMenuItem start using methods from MenuFocusManager
charlie-yao Jan 31, 2022
d2a84dc
print orientation too
charlie-yao Jan 31, 2022
5aa0ff8
scope/naming issue
charlie-yao Jan 31, 2022
1a0a97b
MenuFocusManager forwards refs now
charlie-yao Jan 31, 2022
8ea054e
change forwardedRef proptype declaration
charlie-yao Jan 31, 2022
5e03e55
let ParentMenuItems know about their parent menu"s orientation
charlie-yao Jan 31, 2022
220eb41
nvm
charlie-yao Jan 31, 2022
981b967
bring back (most of) old functionality
charlie-yao Jan 31, 2022
77d233a
start reusing hoc focus methods in menubar again
charlie-yao Jan 31, 2022
669c501
give some more methods to MenuFocusManager
charlie-yao Jan 31, 2022
d3537f0
parentmenuitem uses refs from menufocusmanager again
charlie-yao Feb 1, 2022
1901b98
this should bring back everything from menubar"s event handler
charlie-yao Feb 1, 2022
21d8cf9
parentmenuitem uses methods from menufocusmanager
charlie-yao Feb 1, 2022
ca01f21
menubutton starts using refs from menufocusmanager
charlie-yao Feb 1, 2022
452d8c3
menubutton uses methods from menufocusmanager
charlie-yao Feb 1, 2022
eac6279
something feels better about treating menubuttons as a single root
charlie-yao Feb 1, 2022
5d4684e
test out menubars and menubuttons with varying orientations
charlie-yao Feb 1, 2022
8a5721f
make the MenuFocusManager be responsible for tabbableIndex
charlie-yao Feb 1, 2022
9f0a20f
(mostly) adopt expand/collapse methods from menufocusmanager
charlie-yao Feb 1, 2022
c6e3386
menubutton no longer uses classes to hide its menu
charlie-yao Feb 1, 2022
22131e9
bring back autoexpand capability
charlie-yao Feb 1, 2022
72e415d
get rid of older menu management code in MenuButton
charlie-yao Feb 1, 2022
00e2555
get rid of old focus/expand/etc. code in menubar
charlie-yao Feb 2, 2022
f11e9ab
ignore items in Menu (for now?)
charlie-yao Feb 2, 2022
11aae9c
get rid of old focus/etc. cold in parentmenuitem
charlie-yao Feb 2, 2022
d0facc9
resolve linter complaints on MenuFocusManager
charlie-yao Feb 2, 2022
f9f0780
resolve more linter complaints
charlie-yao Feb 2, 2022
7cfab0d
make Menu a function component again
charlie-yao Feb 2, 2022
9295c3d
get rid of a bunch of commented code
charlie-yao Feb 2, 2022
8c53ccf
spread destructuring across multiple lines
charlie-yao Feb 2, 2022
a7493b2
rename MenuFocusManager to MenuManager
charlie-yao Feb 2, 2022
8d8a15f
fix issue with collapseAll and callbacks
charlie-yao Feb 2, 2022
cd287f6
lint
charlie-yao Feb 2, 2022
077e69b
add styling and controls for isDisabled
charlie-yao Feb 2, 2022
cba7f22
actually prevent activation if an item is disabled
charlie-yao Feb 2, 2022
f539744
some browsers dont support element.ariaDisabled
charlie-yao Feb 2, 2022
ab04993
create a HOC to handle MenuButton-specific state
charlie-yao Feb 2, 2022
6231850
have MenuButton use the MenuButtonManager HOC
charlie-yao Feb 2, 2022
a2d9434
fix some linter complaints
charlie-yao Feb 2, 2022
c050741
try offloading rendering items to an external function in menubar
charlie-yao Feb 3, 2022
98c27c1
have menubutton adopt the external renderItems function
charlie-yao Feb 3, 2022
818234d
have parentmenuitem adopt the external renderItems function
charlie-yao Feb 3, 2022
1882e8c
remove old renderItems methods
charlie-yao Feb 3, 2022
da29fc9
use destructuring and finish jsdoc types for renderItems
charlie-yao Feb 3, 2022
b931956
resolve some linter complaints
charlie-yao Feb 3, 2022
1af263c
remove some repeated code
charlie-yao Feb 3, 2022
f306aa8
naive expand parentmenuitems on root menubar level
charlie-yao Feb 8, 2022
54123ca
clicking the same menu closes it
charlie-yao Feb 8, 2022
fd0e3f3
expand/collapse menu button on clicking
charlie-yao Feb 8, 2022
b1cc788
click to expand/collapse on first level of a menubutton
charlie-yao Feb 8, 2022
0f2e0b9
expand/collapse when clicking submenus
charlie-yao Feb 8, 2022
e807ec8
activate items when you click on them
charlie-yao Feb 8, 2022
bce648b
scaffolding for mouse enter/leave events
charlie-yao Feb 8, 2022
ffc2432
retain "wasExpanded" state even for non-menus
charlie-yao Feb 8, 2022
7efda13
replace mouseenter with mouse over, try automatically focusing and ex…
charlie-yao Feb 8, 2022
9bb919f
submenus can be opened automatically on hover without checking
charlie-yao Feb 8, 2022
779b8d3
only focus on hover if the menubar was already expanded
charlie-yao Feb 8, 2022
aae6b78
Merge branch 'develop' into feature/menu
charlie-yao Feb 17, 2022
eb135d3
fix merge conflicts
charlie-yao Feb 22, 2022
212c330
merge in develop and fix conflicts
charlie-yao Apr 7, 2022
e7940b8
Merge branch 'develop' into feature/menu
charlie-yao Sep 13, 2022
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
9 changes: 9 additions & 0 deletions packages/react-aria-widgets-demo/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,22 @@ import '@charlie-yao/react-aria-widgets/styles.css';

//Components and Styles
import DemoAccordion from 'src/DemoAccordion';
import MenuBarOne from 'src/MenuBarOne';
import MenuBarTwo from 'src/MenuBarTwo';
import MenuButtonOne from 'src/MenuButtonOne';
import MenuButtonTwo from 'src/MenuButtonTwo';
import 'src/styles.css';

function App() {
return (
<main className="test">
<h1>Accordion</h1>
<DemoAccordion />
<h1>Menu, Menubar, Menu Button</h1>
<MenuBarOne />
<MenuBarTwo />
<MenuButtonOne />
<MenuButtonTwo />
</main>
);
}
Expand Down
Loading