Submenu support #4976
Merged
Submenu support #4976
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using existing ContextualHelpTrigger and ListBox to see what is needed for the sub menu
…tion SubMenuTrigger hasnt been tested, just grabs stuff from MenuTrigger and ContextualHelpTrigger that I deemed suitable
add support for opening submenu via Enter/Space/ArrowRight and closing submenu via ArrowLeft. Also adds the proper autoFocus behavior based on the interaction that opened the submenu
misc cleanup as well
…ailable=false user provided onClose wasnt firing because we were always sourcing it from the MenuTriggers context onClose. ContextualHelpTrigger also needed additional logic to not render a sub menu if isUnavailable is false
… whole trigger state to useMenu this makes the api a bit nicer
current approach has the SubMenuTrigger adding a prop to the Item let selectionManager know that it should be non-selectable. Other approaches would involve additional changes to useSelectableItem to disable press props but keep keyboard navigation
…us a private prop dont really feel like users will need to pass in something for onCloseAllMenus so made it a hidden prop. Also moved it into useMenu so it doesnt matter if the user is focused on the menu or a menu item when hitting Esc
also made onSubMenuClose a private prop
…o submenu_alt_api
|
Build successful! 🎉 |
updates propName to type as per review, fixes VO dismiss button with contextual help and reintroduces the transitions back to submenu since there were some weird transforms that cause visible jerks in position when closing the submenus without the visibility transition.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
instead of informing selection manager directly that the submenu item is a non selectable item, opt for change in useMenuItem instead since it feels a bit too specific to include in selection manager. Still need onFocus though so we still update the tracked key when user clicks on a submenu trigger in a Tray
|
Build successful! 🎉 |
removed the transform for submenus and replaced it with a offset calculated for Popover instead so that we dont get the weird jerk animation when the submenu unmounts
…/closing the menu with keyboard if the user presses left/right rapidly enough, the submenu doesnt actually unmount due to being in the middle of a transition animation, meaning focus wasnt being handled by useSelectableCollection focus useEffect which only run on mount. This fixes that by running focus and openSubmenu in those cases
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
approved these changes
Nov 28, 2023
|
Build successful! 🎉 |
devongovett
approved these changes
Nov 30, 2023
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } @react-aria/menuAriaMenuItemProps AriaMenuItemProps {
+ aria-controls?: string
+ aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: 'menu' | 'dialog'
aria-label?: string
closeOnSelect?: boolean = true
isVirtualized?: boolean
}
it changed:
UNSTABLE_useSubmenuTriggerchanged by:
-
+UNSTABLE_useSubmenuTrigger<T> {
+ props: AriaSubmenuTriggerProps
+ state: SubmenuTriggerState
+ ref: RefObject<FocusableElement>
+ returnVal: undefined
+}AriaSubmenuTriggerProps-
+AriaSubmenuTriggerProps {
+ isDisabled?: boolean
+ node: RSNode<unknown>
+ parentMenuRef: RefObject<HTMLElement>
+ submenuRef: RefObject<HTMLElement>
+ type?: 'dialog' | 'menu'
+}it changed:
SubmenuTriggerAriachanged by:
-
+SubmenuTriggerAria<T> {
+ popoverProps: (Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>)
+ submenuProps: SubmenuProps<T>
+ submenuTriggerProps: SubmenuTriggerProps
+}it changed:
@react-aria/overlaysAriaPopoverProps AriaPopoverProps {
isKeyboardDismissDisabled?: boolean = false
isNonModal?: boolean
popoverRef: RefObject<Element>
+ shouldCloseOnInteractOutside?: (Element) => boolean
triggerRef: RefObject<Element>
}it changed:
@react-spectrum/menuSpectrumMenuProps-
+SubmenuTrigger {
+ children: Array<ReactElement>
+ targetKey: Key
+}SpectrumMenuTriggerProps-
+SpectrumSubmenuTriggerProps {
+ children: Array<ReactElement>
+}@react-spectrum/overlaysOverlay Popover {
children: ReactNode
container?: HTMLElement
disableFocusManagement?: boolean
enableBothDismissButtons?: boolean
hideArrow?: boolean
+ onDismissButtonPress?: () => void
onEnter?: () => void
onEntered?: () => void
onEntering?: () => void
onExit?: () => void
onExiting?: () => void
shouldContainFocus?: boolean
state: OverlayTriggerState
}
@react-stately/menuMenuTriggerState MenuTriggerState {
+ UNSTABLE_closeSubmenu: (Key, number) => void
+ UNSTABLE_expandedKeysStack: Array<Key>
+ UNSTABLE_openSubmenu: (Key, number) => void
+ close: () => void
focusStrategy: FocusStrategy
open: (FocusStrategy | null) => void
toggle: (FocusStrategy | null) => void
}it changed:
UNSTABLE_useSubmenuTriggerStatechanged by:
-
+UNSTABLE_useSubmenuTriggerState {
+ props: SubmenuTriggerProps
+ state: MenuTriggerState
+ returnVal: undefined
+}SubmenuTriggerProps-
+SubmenuTriggerProps {
+ triggerKey: Key
+}it changed:
SubmenuTriggerState-
+SubmenuTriggerState {
+ close: () => void
+ closeAll: () => void
+ focusStrategy: FocusStrategy | null
+ isOpen: boolean
+ open: (FocusStrategy | null) => void
+ submenuLevel: number
+ toggle: (FocusStrategy | null) => void
+}it changed:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #1356, https://github.com/orgs/adobe/projects/19/views/20?pane=issue&itemId=35511606, https://github.com/orgs/adobe/projects/19/views/20?pane=issue&itemId=35511675, https://github.com/orgs/adobe/projects/19/views/20?pane=issue&itemId=43823551, https://github.com/orgs/adobe/projects/19/views/20?pane=issue&itemId=43393200, https://github.com/orgs/adobe/projects/19/views/20?pane=issue&itemId=45328738
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project:
RSP