chore(Submenu): remove UNSTABLE_ prefix from submenu hooks (#6283)

Author: reidbarber

packages/@react-aria/menu/src/index.ts

@@ -14,7 +14,7 @@ export {useMenuTrigger} from './useMenuTrigger';
 export {useMenu} from './useMenu';
 export {useMenuItem} from './useMenuItem';
 export {useMenuSection} from './useMenuSection';
-export {UNSTABLE_useSubmenuTrigger} from './useSubmenuTrigger';
+export {useSubmenuTrigger} from './useSubmenuTrigger';
 
 export type {AriaMenuProps} from '@react-types/menu';
 export type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';

packages/@react-aria/menu/src/useSubmenuTrigger.ts

@@ -63,7 +63,7 @@ export interface SubmenuTriggerAria<T> {
  * @param state - State for the submenu trigger.
  * @param ref - Ref to the submenu trigger element.
  */
-export function UNSTABLE_useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T> {
+export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T> {
   let {parentMenuRef, submenuRef, type = 'menu', isDisabled, node, delay = 200} = props;
   let submenuTriggerId = useId();
   let overlayId = useId();

packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx

@@ -21,8 +21,8 @@ import ReactDOM from 'react-dom';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {SubmenuTriggerContext, useMenuStateContext} from './context';
 import {TrayHeaderWrapper} from './Menu';
-import {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';
-import {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';
+import {useSubmenuTrigger} from '@react-aria/menu';
+import {useSubmenuTriggerState} from '@react-stately/menu';
 
 interface MenuDialogTriggerProps {
   /** Whether the menu item is currently unavailable. */
@@ -44,9 +44,9 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let popoverRef = useRef(null);
   let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
   let triggerNode = state.collection.getItem(targetKey);
-  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
   let submenuRef = unwrapDOMRef(popoverRef);
-  let {submenuTriggerProps, popoverProps} = UNSTABLE_useSubmenuTrigger({
+  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({
     node: triggerNode,
     parentMenuRef,
     submenuRef,

packages/@react-spectrum/menu/src/Menu.tsx

@@ -59,7 +59,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
   }, [leftOffset, popoverContainer]);
 
   let menuLevel = contextProps.submenuLevel ?? -1;
-  let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack[menuLevel + 1]) != null;
+  let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.expandedKeysStack[menuLevel + 1]) != null;
   useInteractOutside({
     ref: domRef,
     onInteractOutside: (e) => {
@@ -128,7 +128,7 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
 export function TrayHeaderWrapper(props) {
   let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
-  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.UNSTABLE_expandedKeysStack.slice(-1)[0])?.textValue;
+  let backButtonText = parentMenuTreeState?.collection.getItem(rootMenuTriggerState?.expandedKeysStack.slice(-1)[0])?.textValue;
   let backButtonLabel = stringFormatter.format('backButton', {
     prevMenuButton: backButtonText
   });

packages/@react-spectrum/menu/src/SubmenuTrigger.tsx

@@ -18,9 +18,9 @@ import {Popover} from '@react-spectrum/overlays';
 import React, {ReactElement, useRef} from 'react';
 import ReactDOM from 'react-dom';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';
-import {UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';
 import {useLocale} from '@react-aria/i18n';
+import {useSubmenuTrigger} from '@react-aria/menu';
+import {useSubmenuTriggerState} from '@react-stately/menu';
 
 interface SubmenuTriggerProps {
   /**
@@ -42,8 +42,8 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
   let [menuTrigger, menu] = React.Children.toArray(children);
   let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();
   let triggerNode = state.collection.getItem(targetKey);
-  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
-  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
+  let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     node: triggerNode,
     parentMenuRef,
     submenuRef: menuRef

packages/@react-stately/menu/src/index.ts

@@ -11,7 +11,7 @@
  */
 
 export {useMenuTriggerState} from './useMenuTriggerState';
-export {UNSTABLE_useSubmenuTriggerState} from './useSubmenuTriggerState';
+export {useSubmenuTriggerState} from './useSubmenuTriggerState';
 
 export type {MenuTriggerProps} from '@react-types/menu';
 export type {MenuTriggerState, RootMenuTriggerState} from './useMenuTriggerState';

packages/@react-stately/menu/src/useMenuTriggerState.ts

@@ -28,15 +28,15 @@ export interface MenuTriggerState extends OverlayTriggerState {
 
 export interface RootMenuTriggerState extends MenuTriggerState {
   /** Opens a specific submenu tied to a specific menu item at a specific level. */
-  UNSTABLE_openSubmenu: (triggerKey: Key, level: number) => void,
+  openSubmenu: (triggerKey: Key, level: number) => void,
 
   /** Closes a specific submenu tied to a specific menu item at a specific level. */
-  UNSTABLE_closeSubmenu: (triggerKey: Key, level: number) => void,
+  closeSubmenu: (triggerKey: Key, level: number) => void,
 
   /** An array of open submenu trigger keys within the menu tree.
    * The index of key within array matches the submenu level in the tree.
    */
-  UNSTABLE_expandedKeysStack: Key[],
+  expandedKeysStack: Key[],
 
   /** Closes the menu and all submenus in the menu tree. */
   close: () => void
@@ -92,8 +92,8 @@ export function useMenuTriggerState(props: MenuTriggerProps): RootMenuTriggerSta
     close() {
       closeAll();
     },
-    UNSTABLE_expandedKeysStack: expandedKeysStack,
-    UNSTABLE_openSubmenu: openSubmenu,
-    UNSTABLE_closeSubmenu: closeSubmenu
+    expandedKeysStack,
+    openSubmenu,
+    closeSubmenu
   };
 }

packages/@react-stately/menu/src/useSubmenuTriggerState.ts

@@ -43,22 +43,22 @@ export interface SubmenuTriggerState extends OverlayTriggerState {
  * Manages state for a submenu trigger. Tracks whether the submenu is currently open, the level of the submenu, and
  * controls which item will receive focus when it opens.
  */
-export function UNSTABLE_useSubmenuTriggerState(props: SubmenuTriggerProps, state: RootMenuTriggerState): SubmenuTriggerState  {
+export function useSubmenuTriggerState(props: SubmenuTriggerProps, state: RootMenuTriggerState): SubmenuTriggerState  {
   let {triggerKey} = props;
-  let {UNSTABLE_expandedKeysStack, UNSTABLE_openSubmenu, UNSTABLE_closeSubmenu, close: closeAll} = state;
-  let [submenuLevel] = useState(UNSTABLE_expandedKeysStack?.length);
-  let isOpen = useMemo(() => UNSTABLE_expandedKeysStack[submenuLevel] === triggerKey, [UNSTABLE_expandedKeysStack, triggerKey, submenuLevel]);
+  let {expandedKeysStack, openSubmenu, closeSubmenu, close: closeAll} = state;
+  let [submenuLevel] = useState(expandedKeysStack?.length);
+  let isOpen = useMemo(() => expandedKeysStack[submenuLevel] === triggerKey, [expandedKeysStack, triggerKey, submenuLevel]);
   let [focusStrategy, setFocusStrategy] = useState<FocusStrategy>(null);
 
   let open = useCallback((focusStrategy: FocusStrategy = null) => {
     setFocusStrategy(focusStrategy);
-    UNSTABLE_openSubmenu(triggerKey, submenuLevel);
-  }, [UNSTABLE_openSubmenu, submenuLevel, triggerKey]);
+    openSubmenu(triggerKey, submenuLevel);
+  }, [openSubmenu, submenuLevel, triggerKey]);
 
   let close = useCallback(() => {
     setFocusStrategy(null);
-    UNSTABLE_closeSubmenu(triggerKey, submenuLevel);
-  }, [UNSTABLE_closeSubmenu, submenuLevel, triggerKey]);
+    closeSubmenu(triggerKey, submenuLevel);
+  }, [closeSubmenu, submenuLevel, triggerKey]);
 
   let toggle = useCallback((focusStrategy: FocusStrategy = null) => {
     setFocusStrategy(focusStrategy);

packages/react-aria-components/src/Menu.tsx

@@ -23,10 +23,10 @@ import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext, PopoverProps} from './Popover';
 import {PressResponder, useHover, useInteractOutside} from '@react-aria/interactions';
 import React, {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {RootMenuTriggerState, UNSTABLE_useSubmenuTriggerState} from '@react-stately/menu';
+import {RootMenuTriggerState, useSubmenuTriggerState} from '@react-stately/menu';
 import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
-import {UNSTABLE_useSubmenuTrigger} from '@react-aria/menu';
+import {useSubmenuTrigger} from '@react-aria/menu';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 export const MenuStateContext = createContext<TreeState<unknown> | null>(null);
@@ -176,7 +176,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
         rootMenuTriggerState.close();
       }
     },
-    isDisabled: isSubmenu || rootMenuTriggerState?.UNSTABLE_expandedKeysStack.length === 0
+    isDisabled: isSubmenu || rootMenuTriggerState?.expandedKeysStack.length === 0
   });
 
   let prevPopoverContainer = useRef<HTMLDivElement | null>(null) ;
@@ -384,9 +384,9 @@ function MenuItemTriggerInner<T>({item, popover, parentMenuRef, delay}: MenuItem
   let popoverContext = useSlottedContext(PopoverContext)!;
   let ref = useObjectRef<any>(item.props.ref);
   let rootMenuTriggerState = useContext(RootMenuTriggerStateContext)!;
-  let submenuTriggerState = UNSTABLE_useSubmenuTriggerState({triggerKey: item.key}, rootMenuTriggerState);
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: item.key}, rootMenuTriggerState);
   let submenuRef = useRef<HTMLDivElement>(null);
-  let {submenuTriggerProps, submenuProps, popoverProps} = UNSTABLE_useSubmenuTrigger({
+  let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     node: item,
     parentMenuRef,
     submenuRef,