RAC: Submenu support

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -14,8 +14,8 @@ import {Arrow} from './components';
 import {Button} from 'tailwind-starter/Button';
 import {Cell, Column, Row, TableHeader} from 'tailwind-starter/Table';
 import {Checkbox} from 'tailwind-starter/Checkbox';
-import {CloudSun, Dessert, Droplet, Droplets, FilterIcon, MoreHorizontal, PencilIcon, PlusIcon, RefreshCw, SlidersIcon, StarIcon, Sun, SunDim, TrashIcon} from 'lucide-react';
-import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, MenuTrigger, ModalOverlay, ModalOverlayProps, Modal as RACModal, ResizableTableContainer, Selection, SortDescriptor, Table, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
+import {CloudSun, Dessert, Droplet, Droplets, FilterIcon, Mail, MoreHorizontal, PencilIcon, PlusIcon, RefreshCw, ShareIcon, SlidersIcon, StarIcon, Sun, SunDim, TrashIcon, Twitter} from 'lucide-react';
+import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, MenuTrigger, ModalOverlay, ModalOverlayProps, Modal as RACModal, ResizableTableContainer, Selection, SortDescriptor, SubmenuTrigger, Table, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
 import {DatePicker} from 'tailwind-starter/DatePicker';
 import {focusRing} from 'tailwind-starter/utils';
@@ -245,6 +245,18 @@ export function ExampleApp() {
                     <MenuItem id="favorite"><StarIcon aria-hidden className="w-4 h-4" /> {item.isFavorite ? 'Unfavorite' : 'Favorite'}</MenuItem>
                     <MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
                     <MenuItem id="delete"><TrashIcon aria-hidden className="w-4 h-4" /> Delete…</MenuItem>
+                    <SubmenuTrigger>
+                      <MenuItem aria-label="Share">
+                        <ShareIcon aria-hidden className="w-4 h-4" />
+                        Share
+                      </MenuItem>
+                      <Popover>
+                        <Menu>
+                          <MenuItem href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(item.common_name)}`} target="blank" rel="noopener noreferrer" aria-label="Twitter"><Twitter aria-hidden className="w-4 h-4" /> Twitter…</MenuItem>
+                          <MenuItem href={`mailto:[email protected]?subject=${encodeURIComponent(item.common_name)}`} target="blank" rel="noopener noreferrer" aria-label="Email"><Mail aria-hidden className="w-4 h-4" /> Email…</MenuItem>
+                        </Menu>
+                      </Popover>
+                    </SubmenuTrigger>
                   </Menu>
                 </MenuTrigger>
               </div>
@@ -295,6 +307,18 @@ export function ExampleApp() {
                               <MenuItem id="favorite"><StarIcon aria-hidden className="w-4 h-4" /> {item.isFavorite ? 'Unfavorite' : 'Favorite'}</MenuItem>
                               <MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
                               <MenuItem id="delete"><TrashIcon aria-hidden className="w-4 h-4" /> Delete…</MenuItem>
+                              <SubmenuTrigger>
+                                <MenuItem aria-label="Share">
+                                  <ShareIcon aria-hidden className="w-4 h-4" />
+                                  Share
+                                </MenuItem>
+                                <Popover>
+                                  <Menu>
+                                    <MenuItem href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(item.common_name)}`} target="blank" rel="noopener noreferrer" aria-label="Twitter"><Twitter aria-hidden className="w-4 h-4" /> Twitter…</MenuItem>
+                                    <MenuItem href={`mailto:[email protected]?subject=${encodeURIComponent(item.common_name)}`} target="blank" rel="noopener noreferrer" aria-label="Email"><Mail aria-hidden className="w-4 h-4" /> Email…</MenuItem>
+                                  </Menu>
+                                </Popover>
+                              </SubmenuTrigger>
                             </Menu>
                           </MenuTrigger>
                         </Cell>

packages/react-aria-components/docs/Menu.mdx

@@ -38,7 +38,7 @@ type: component
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['MenuTrigger', 'Menu']}
+  componentNames={['MenuTrigger', 'Menu', 'SubmenuTrigger']}
   sourceData={[
     {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/menu/'}
   ]} />
@@ -226,7 +226,18 @@ function MyMenuButton<T extends object>({label, children, ...props}: MyMenuButto
 }
 
 function MyItem(props: MenuItemProps) {
-  return <MenuItem {...props} className={({isFocused, isSelected}) => `my-item ${isFocused ? 'focused' : ''}`} />
+  return (
+    <MenuItem {...props} className={({isFocused, isSelected, isSubmenuOpen}) => `my-item ${isFocused ? 'focused' : ''} ${isSubmenuOpen ? 'submenu-open' : ''}`}>
+      {({hasSubmenu}) => (
+        <>
+          {props.children}
+          {hasSubmenu && (
+            <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24" style={{position: 'absolute', right: 0, top : 0, height: '100%'}}><path d="m9 18 6-6-6-6" /></svg>
+          )}
+        </>
+      )}
+    </MenuItem>
+  );
 }
 
 <MyMenuButton label="Edit">
@@ -254,6 +265,10 @@ function MyItem(props: MenuItemProps) {
     background: #e70073;
     color: white;
   }
+  &.submenu-open:not(.focused) {
+    background: #dedede;
+    color: var(--text-color);
+  }
 }
 
 @media (forced-colors: active) {
@@ -658,12 +673,63 @@ function Example() {
 }
 ```
 
+## Submenus
+
+Submenus can be implemented by using a `SubmenuTrigger`, where the first child inside is the submenu's trigger `MenuItem`, and the second child is the submenu itself.
+
+```tsx example
+import {Menu, Popover, SubmenuTrigger} from 'react-aria-components';
+
+<MyMenuButton label="Actions">
+  <MyItem>Cut</MyItem>
+  <MyItem>Copy</MyItem>
+  <MyItem>Delete</MyItem>
+  <SubmenuTrigger>
+    <MyItem aria-label="Share">Share</MyItem>
+    <Popover>
+      <Menu>
+        <MyItem>SMS</MyItem>
+        <MyItem>Twitter</MyItem>
+        <SubmenuTrigger>
+          <MyItem aria-label="Email">Email</MyItem>
+          <Popover>
+            <Menu>
+              <MyItem>Work</MyItem>
+              <MyItem>Personal</MyItem>
+            </Menu>
+          </Popover>
+        </SubmenuTrigger>
+      </Menu>
+    </Popover>
+  </SubmenuTrigger>
+</MyMenuButton>
+```
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
+
+```css
+.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="right"] {
+  margin-left: -5px;
+}
+
+.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="left"] {
+  margin-right: -5px;
+}
+```
+
+</details>
+
 ## Props
 
 ### MenuTrigger
 
 <PropTable component={docs.exports.MenuTrigger} links={docs.links} />
 
+### SubmenuTrigger
+
+<PropTable component={docs.exports.SubmenuTrigger} links={docs.links} />
+
 ### Button
 
 A `<Button>` accepts its contents as `children`. Other props such as `onPress` and `isDisabled` will be set by the `MenuTrigger`.
@@ -812,6 +878,18 @@ Within a MenuTrigger, the popover will have the `data-trigger="MenuTrigger"` att
 }
 ```
 
+Within a SubmenuTrigger, the popover will have the `data-trigger="SubmenuTrigger"` attribute, which can be used to define submenu-specific styles.
+
+```css render=false
+.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="right"] {
+  transform: translateX(-5px);
+}
+
+.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="left"] {
+  transform: translateX(5px);
+}
+```
+
 ### Menu
 
 A `Menu` can be targeted with the `.react-aria-Menu` CSS selector, or by overriding with a custom `className`.

packages/react-aria-components/example/index.css

@@ -15,6 +15,8 @@ html {
 .menu, .group {
   padding: 0;
   list-style: none;
+  overflow-y: auto;
+  max-height: inherit;
 }
 
 .item {
@@ -48,6 +50,11 @@ html {
   color: white;
 }
 
+.item.submenu-open:not(.focused) {
+  background: lightslategray;
+  color: white;
+}
+
 .item.item.hovered {
   background: lightsalmon;
   color: white;
@@ -58,6 +65,20 @@ html {
   color: white;
 }
 
+.item[data-has-submenu]::after {
+  content: '›';
+  content: '›' / '';
+  justify-self: end;
+}
+
+.popover[data-trigger=SubmenuTrigger][data-placement="right"] {
+  margin-left: -8px;
+}
+
+.popover[data-trigger=SubmenuTrigger][data-placement="left"] {
+  margin-right: -8px;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;

packages/react-aria-components/package.json

@@ -41,8 +41,10 @@
     "@internationalized/string": "^3.2.0",
     "@react-aria/focus": "^3.16.0",
     "@react-aria/interactions": "^3.20.1",
+    "@react-aria/menu": "^3.12.0",
     "@react-aria/toolbar": "3.0.0-beta.1",
     "@react-aria/utils": "^3.23.0",
+    "@react-stately/menu": "^3.6.0",
     "@react-stately/table": "^3.11.4",
     "@react-stately/utils": "^3.9.0",
     "@react-types/form": "^3.7.1",