adobe
diff --git a/‎packages/@adobe/spectrum-css-temp/components/contextualhelp/index.css
+3 b/‎packages/@adobe/spectrum-css-temp/components/contextualhelp/index.css
+3
diff --git a/‎packages/@adobe/spectrum-css-temp/components/menu/index.css
+57-5 b/‎packages/@adobe/spectrum-css-temp/components/menu/index.css
+57-5
diff --git a/‎packages/@adobe/spectrum-css-temp/components/menu/skin.css
+17 b/‎packages/@adobe/spectrum-css-temp/components/menu/skin.css
+17
diff --git a/‎packages/@adobe/spectrum-css-temp/components/overlay/index.css
+1-1 b/‎packages/@adobe/spectrum-css-temp/components/overlay/index.css
+1-1
diff --git a/‎packages/@react-aria/menu/src/index.ts
+2 b/‎packages/@react-aria/menu/src/index.ts
+2
diff --git a/‎packages/@react-aria/menu/src/useMenu.ts
+5-5 b/‎packages/@react-aria/menu/src/useMenu.ts
+5-5
@@ -34,6 +34,9 @@
   --spectrum-dialog-padding-x: var(--spectrum-contextualhelp-dialog-padding);
   --spectrum-dialog-padding-y: var(--spectrum-contextualhelp-dialog-padding);
 
+  &.react-spectrum-ContextualHelp-dialog--isMobile {
+    width: 100%;
+  }
   .react-spectrum-ContextualHelp-content {
     margin-top: var(--spectrum-global-dimension-static-size-100);
   }
 
@@ -40,6 +40,7 @@ governing permissions and limitations under the License.
   overflow: hidden;
   max-height: 100%;
   display: inline-flex;
+  flex-direction: column;
   border-radius: var(--spectrum-alias-border-radius-regular);
   border-style: solid;
   border-width: var(--spectrum-popover-border-size);
@@ -50,6 +51,11 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Menu {
+  /*
+    Menu border radius + 1 to match XD designs for submenu offset. No calc use so
+    getComputedStyle + getPropertyValue actually returns a pixel value rather than the calc string.
+  */
+  --spectrum-submenu-offset-distance: var(--spectrum-global-dimension-size-65);
   text-align: start;
   display: block;
 
@@ -186,17 +192,17 @@ governing permissions and limitations under the License.
 
 .spectrum-Menu-itemGrid {
   display: grid;
-  grid-template-columns: calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-selectlist-border-size-key-focus)) auto 1fr auto auto auto var(--spectrum-selectlist-option-padding);
+  grid-template-columns: calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-selectlist-border-size-key-focus)) auto 1fr auto auto auto auto var(--spectrum-selectlist-option-padding);
   /*
     Renamed from padding-y to padding-height to fix docs issue where fallback var replaced this value
     (due to old spectrum-css postcss-custom-properties-custom-mapping plugin).
   */
   grid-template-rows: var(--spectrum-selectlist-option-padding-height) 1fr auto var(--spectrum-selectlist-option-padding-height);
   grid-template-areas:
-    ". .    .            .         .     .            ."
-    ". icon text         checkmark end   keyboard     ."
-    ". icon description  checkmark end   keyboard     ."
-    ". .    .            .         .     .            .";
+    ". .    .            .         .     .         .        ."
+    ". icon text         checkmark end   keyboard  chevron  ."
+    ". icon description  checkmark end   keyboard  chevron  ."
+    ". .    .            .         .     .         .        .";
 }
 
 .spectrum-Menu-item.is-selectable {
@@ -238,3 +244,49 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-font-family-base);
   unicode-bidi: plaintext;
 }
+
+.spectrum-Menu-chevron {
+  margin-inline-end: calc(var(--spectrum-global-dimension-size-50) * -1);
+  grid-area: chevron;
+  justify-self: end;
+  align-self: flex-start;
+  padding-inline-start: var(--spectrum-global-dimension-size-300);
+}
+
+.spectrum-Menu-wrapper {
+  overflow: auto;
+
+  .spectrum-Submenu-wrapper {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  &.spectrum-Menu-wrapper--isMobile {
+    width: 100%;
+    border: none;
+    background-color: unset;
+
+    &.is-expanded {
+      position: absolute;
+      left: 100%;
+      height: 0;
+      border: 0;
+    }
+
+    .spectrum-Submenu-headingWrapper {
+      display: flex;
+      margin: 4px 4px 0px 4px;
+
+      .spectrum-Submenu-heading {
+        display: flex;
+        margin-top: 7px;
+        margin-bottom: 0px;
+        margin-inline-start: 4px;
+        font-weight: var(--spectrum-selectlist-heading-text-font-weight);
+        font-size: var(--spectrum-dialog-title-text-size);
+        line-height: var(--spectrum-dialog-title-text-line-height);
+      }
+    }
+  }
+}
@@ -31,6 +31,10 @@ governing permissions and limitations under the License.
   background-color: var(--spectrum-selectlist-background-color);
 }
 
+.spectrum-Submenu-headingWrapper {
+  --spectrum-heading-subtitle3-text-color: var(--spectrum-global-color-gray-900);
+}
+
 .spectrum-Menu-item {
   background-color: var(--spectrum-selectlist-option-background-color);
   color: var(--spectrum-selectlist-option-text-color);
@@ -83,6 +87,19 @@ governing permissions and limitations under the License.
 .spectrum-Menu-description {
   color: var(--spectrum-global-color-gray-700);
 }
+
+.spectrum-Submenu-popover {
+  filter: unset;
+  -webkit-filter: unset;
+  transition: opacity var(--spectrum-global-animation-duration-100) ease-in-out,
+              visibility 0ms linear var(--spectrum-global-animation-duration-100);
+  transform: none;
+}
+
+.spectrum-Submenu-heading {
+  color: var(--spectrum-heading-subtitle3-text-color);
+}
+
 @media (forced-colors: active) {
   .spectrum-Menu-divider {
     background-color: CanvasText;
 
@@ -24,7 +24,7 @@ governing permissions and limitations under the License.
 
 .spectrum-overlay--open {
   visibility: visible;
-  /* In Edge (pre chromium), a stacking context is formed for opacity less then 1, and then its removed for 1. 
+  /* In Edge (pre chromium), a stacking context is formed for opacity less then 1, and then its removed for 1.
      It causes a rendering flicker that is visible when css transition is applied. */
   opacity: 0.9999;
 
 
@@ -14,9 +14,11 @@ export {useMenuTrigger} from './useMenuTrigger';
 export {useMenu} from './useMenu';
 export {useMenuItem} from './useMenuItem';
 export {useMenuSection} from './useMenuSection';
+export {UNSTABLE_useSubmenuTrigger} from './useSubmenuTrigger';
 
 export type {AriaMenuProps} from '@react-types/menu';
 export type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';
 export type {AriaMenuOptions, MenuAria} from './useMenu';
 export type {AriaMenuItemProps, MenuItemAria} from './useMenuItem';
 export type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection';
+export type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger';
@@ -11,7 +11,7 @@
  */
 
 import {AriaMenuProps} from '@react-types/menu';
-import {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';
+import {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {RefObject} from 'react';
 import {TreeState} from '@react-stately/tree';
@@ -22,7 +22,7 @@ export interface MenuAria {
   menuProps: DOMAttributes
 }
 
-export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'> {
+export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {
   /** Whether the menu uses virtual scrolling. */
   isVirtualized?: boolean,
 
@@ -49,6 +49,8 @@ export const menuData = new WeakMap<TreeState<unknown>, MenuData>();
 export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement>): MenuAria {
   let {
     shouldFocusWrap = true,
+    onKeyDown,
+    onKeyUp,
     ...otherProps
   } = props;
 
@@ -73,10 +75,8 @@ export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref:
   });
 
   return {
-    menuProps: mergeProps(domProps, {
+    menuProps: mergeProps(domProps, {onKeyDown, onKeyUp}, {
       role: 'menu',
-      // this forces AT to move their cursors into any open sub dialogs, the sub dialogs contain hidden close buttons in order to come back to this level of the menu
-      'aria-hidden': state.expandedKeys.size > 0 ? true : undefined,
       ...listProps,
       onKeyDown: (e) => {
         // don't clear the menu selected keys if the user is presses escape since escape closes the menu
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,9 @@`
`34`	`34`	`--spectrum-dialog-padding-x: var(--spectrum-contextualhelp-dialog-padding);`
`35`	`35`	`--spectrum-dialog-padding-y: var(--spectrum-contextualhelp-dialog-padding);`
`36`	`36`
	`37`	`+ &.react-spectrum-ContextualHelp-dialog--isMobile {`
	`38`	`+ width: 100%;`
	`39`	`+ }`
`37`	`40`	`.react-spectrum-ContextualHelp-content {`
`38`	`41`	`margin-top: var(--spectrum-global-dimension-static-size-100);`
`39`	`42`	`}`