@fluentui/react-menu 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

package/dist/{react-menu.d.ts → index.d.ts}

@@ -1,11 +1,13 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 /**
@@ -13,40 +15,15 @@ import { usePopperMouseTarget } from '@fluentui/react-positioning';
  */
 export declare const Menu: React_2.FC<MenuProps>;
 
-declare type MenuCommons = MenuListCommons & {
-    /**
-     * Whether the popup is open
-     */
-    open: boolean;
-    /**
-     * Call back when the component requests to change value
-     * The `open` value is used as a hint when directly controlling the component
-     */
-    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
-    /**
-     * Whether the popup is open by default
-     */
-    defaultOpen?: boolean;
-    openOnHover: boolean;
-    /**
-     * Opens the menu on right click (context menu), removes all other menu open interactions
-     */
-    openOnContext?: boolean;
-    /**
-     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
-     * This option is disregarded for submenus
-     */
-    inline?: boolean;
-    /**
-     * Do not dismiss the menu when a menu item is clicked
-     */
-    persistOnItemClick?: boolean;
-    /**
-     * Sets the delay for mouse open/close for the popover one mouse enter/leave
-     */
-    hoverDelay?: number;
+export declare type MenuCheckedValueChangeData = {
+    /** The items for this value that are checked */
+    checkedItems: string[];
+    /** The name of the value */
+    name: string;
 };
 
+export declare type MenuCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
+
 export declare const MenuContext: Context<MenuContextValue>;
 
 /**
@@ -64,23 +41,37 @@ export declare type MenuContextValues = {
 };
 
 /**
- * Define a styled MenuDivider, using the `useMenuDivider` hook.
+ * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
  */
 export declare const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
+/**
+ * @deprecated Use `menuDividerClassNames.root` instead.
+ */
+export declare const menuDividerClassName = "fui-MenuDivider";
+
+export declare const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
+
 export declare type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 
 export declare type MenuDividerSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuDividerState = ComponentState<MenuDividerSlots>;
 
 /**
- * Define a styled MenuGroup, using the `useMenuGroup` hook.
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
 export declare const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
+/**
+ * @deprecated Use `menuGroupClassNames.root` instead.
+ */
+export declare const menuGroupClassName = "fui-MenuGroup";
+
+export declare const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
+
 export declare const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;
 
 /**
@@ -99,14 +90,21 @@ export declare type MenuGroupContextValues = {
 };
 
 /**
- * Define a styled MenuGroupHeader, using the `useMenuGroupHeader` hook.
+ * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
 export declare const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
+/**
+ * @deprecated Use `menuGroupHeaderClassNames.root` instead.
+ */
+export declare const menuGroupHeaderClassName = "fui-MenuGroupHeader";
+
+export declare const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
+
 export declare type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
 
 export declare type MenuGroupHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;
@@ -114,7 +112,7 @@ export declare type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;
 export declare type MenuGroupProps = ComponentProps<MenuGroupSlots>;
 
 export declare type MenuGroupSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {
@@ -125,41 +123,66 @@ export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {
 };
 
 /**
- * Define a styled MenuItem, using the `useMenuItem` and `useMenuItemStyles` hook.
+ * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
 export declare const MenuItem: ForwardRefComponent<MenuItemProps>;
 
 /**
- * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
+ * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
 export declare const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
+/**
+ * @deprecated Use `menuItemCheckboxClassNames.root` instead.
+ */
+export declare const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
+
+export declare const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 export declare type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
 
 export declare type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
 
-declare type MenuItemCommons = {
-    /**
-     * If the menu item is a trigger for a submenu
-     */
-    hasSubmenu?: boolean;
+/**
+ * @deprecated Use `menuItemClassNames.root` instead.
+ */
+export declare const menuItemClassName = "fui-MenuItem";
+
+export declare const menuItemClassNames: SlotClassNames<MenuItemSlots>;
+
+export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
     /**
      * Applies disabled styles to menu item but remains focusable
+     *
+     * @default false
      */
     disabled?: boolean;
+    /**
+     * If the menu item is a trigger for a submenu
+     *
+     * @default false
+     */
+    hasSubmenu?: boolean;
     /**
      * Clicking on the menu item will not dismiss an open menu
+     *
+     * @default false
      */
     persistOnClick?: boolean;
 };
 
-export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCommons;
-
 /**
- * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
+ * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
 export declare const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
+/**
+ * @deprecated Use `menuItemRadioClassNames.root` instead.
+ */
+export declare const menuItemRadioClassName = "fui-MenuItemRadio";
+
+export declare const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 export declare type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
 
 export declare type MenuItemRadioState = MenuItemState & MenuItemSelectableState;
@@ -199,73 +222,44 @@ export declare type MenuItemSelectableState = MenuItemSelectableProps & {
 };
 
 export declare type MenuItemSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
     /**
      * Icon slot rendered before children content
      */
-    icon?: IntrinsicShorthandProps<'span'>;
+    icon?: Slot<'span'>;
     /**
      * A helper slot for alignment when a menu item is used with selectable menuitems
      * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
      */
-    checkmark?: IntrinsicShorthandProps<'span'>;
+    checkmark?: Slot<'span'>;
     /**
      * Icon slot that shows the indicator for a submenu
      */
-    submenuIndicator?: IntrinsicShorthandProps<'span'>;
+    submenuIndicator?: Slot<'span'>;
     /**
      * Component children are placed in this slot
      * Avoid using the `children` property in this slot in favour of Component children whenever possible
      */
-    content: IntrinsicShorthandProps<'span'>;
+    content?: Slot<'span'>;
     /**
      * Secondary content rendered opposite the primary content (e.g Shortcut text)
      */
-    secondaryContent?: IntrinsicShorthandProps<'span'>;
+    secondaryContent?: Slot<'span'>;
 };
 
+export declare type MenuItemState = ComponentState<MenuItemSlots> & Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>;
+
 /**
- * Consts listing which props are shorthand props.
+ * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
-export declare const menuItemSlots: Array<keyof MenuItemSlots>;
-
-export declare type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
+export declare const MenuList: ForwardRefComponent<MenuListProps>;
 
 /**
- * Define a styled MenuList, using the `useMenuList` hook.
+ * @deprecated Use `menuListClassNames.root` instead.
  */
-export declare const MenuList: ForwardRefComponent<MenuListProps>;
+export declare const menuListClassName = "fui-MenuList";
 
-export declare type MenuListCommons = {
-    /**
-     * Callback when checked items change for value with a name
-     *
-     * @param event - React's original SyntheticEvent
-     * @param data - A data object with relevant information
-     */
-    onCheckedValueChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: {
-        /** The name of the value */
-        name: string;
-        /** The items for this value that are checked */
-        checkedItems: string[];
-    }) => void;
-    /**
-     * Map of all checked values
-     */
-    checkedValues: Record<string, string[]>;
-    /**
-     * Default values to be checked on mount
-     */
-    defaultCheckedValues?: Record<string, string[]>;
-    /**
-     * States that menu items can contain icons and reserve slots for item alignment
-     */
-    hasIcons?: boolean;
-    /**
-     * States that menu items can contain selectable items and reserve slots for item alignment
-     */
-    hasCheckmarks?: boolean;
-};
+export declare const menuListClassNames: SlotClassNames<MenuListSlots>;
 
 export declare const MenuListContext: Context<MenuListContextValue>;
 
@@ -282,57 +276,89 @@ export declare type MenuListContextValues = {
     menuList: MenuListContextValue;
 };
 
-export declare type MenuListProps = ComponentProps<MenuListSlots> & Partial<MenuListCommons>;
+export declare type MenuListProps = ComponentProps<MenuListSlots> & {
+    /**
+     * Map of all checked values
+     */
+    checkedValues?: Record<string, string[]>;
+    /**
+     * Default values to be checked on mount
+     */
+    defaultCheckedValues?: Record<string, string[]>;
+    /**
+     * States that menu items can contain selectable items and reserve slots for item alignment
+     */
+    hasCheckmarks?: boolean;
+    /**
+     * States that menu items can contain icons and reserve slots for item alignment
+     */
+    hasIcons?: boolean;
+    /**
+     * Callback when checked items change for value with a name
+     *
+     * @param event - React's original SyntheticEvent
+     * @param data - A data object with relevant information
+     */
+    onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
+};
 
 export declare const MenuListProvider: React_2.Provider<MenuListContextValue> & React_2.FC<React_2.ProviderProps<MenuListContextValue>>;
 
 export declare type MenuListSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
-export declare type MenuListState = ComponentState<MenuListSlots> & MenuListCommons & {
+export declare type MenuListState = ComponentState<MenuListSlots> & Pick<MenuListProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & {
+    /**
+     * Selects a radio item, will de-select the currently selected ratio item
+     */
+    selectRadio: SelectableHandler;
     /**
      * Callback to set focus on the next menu item by first character
      */
     setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;
     toggleCheckbox: SelectableHandler;
-    /**
-     * Selects a radio item, will de-select the currently selected ratio item
-     */
-    selectRadio: SelectableHandler;
 };
 
 /**
  * Data attached to open/close events
  */
-export declare type MenuOpenChangeData = Pick<MenuState, 'open'> & {
-    /**
-     * Indicates whether the change of state was a keyboard interaction
-     */
-    keyboard?: boolean;
+export declare type MenuOpenChangeData = {
     /**
      * indicates whether the request for the open state was bubbled from a nested menu
      */
     bubble?: boolean;
+    /**
+     * Indicates whether the change of state was a keyboard interaction
+     */
+    keyboard?: boolean;
+    open: boolean;
 };
 
 /**
  * The supported events that will trigger open/close of the menu
  */
-export declare type MenuOpenEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
+export declare type MenuOpenEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
 export declare const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
 
+/**
+ * @deprecated Use `menuPopoverClassNames.root` instead.
+ */
+export declare const menuPopoverClassName = "fui-MenuPopover";
+
+export declare const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
+
 /**
  * MenuPopover Props
  */
 export declare type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
 
 export declare type MenuPopoverSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 /**
@@ -349,12 +375,58 @@ export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
 /**
  * Extends and drills down Menulist props to simplify API
  */
-export declare type MenuProps = Partial<MenuCommons> & ComponentProps<MenuSlots> & {
+export declare type MenuProps = ComponentProps<MenuSlots> & Pick<MenuListProps, 'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'> & {
     /**
      * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.
      * Alternatively can only contain {@link MenuPopover} if using a custom `target`.
      */
     children: [JSX.Element, JSX.Element] | JSX.Element;
+    /**
+     * Whether the popup is open by default
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Sets the delay for mouse open/close for the popover one mouse enter/leave
+     */
+    hoverDelay?: number;
+    /**
+     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
+     * This option is disregarded for submenus
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Call back when the component requests to change value
+     * The `open` value is used as a hint when directly controlling the component
+     */
+    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    /**
+     * Whether the popup is open
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Opens the menu on right click (context menu), removes all other menu open interactions
+     *
+     * @default false
+     */
+    openOnContext?: boolean;
+    /**
+     * Opens the menu on hover
+     *
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Do not dismiss the menu when a menu item is clicked
+     *
+     * @default false
+     */
+    persistOnItemClick?: boolean;
     /**
      * Configures the positioned menu
      */
@@ -365,56 +437,83 @@ export declare const MenuProvider: React_2.Provider<MenuContextValue> & React_2.
 
 export declare type MenuSlots = {};
 
-export declare type MenuState = MenuCommons & ComponentState<MenuSlots> & {
+/**
+ * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
+ */
+export declare const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
+
+/**
+ * @deprecated Use `menuSplitGroupClassNames.root` instead.
+ */
+export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
+
+export declare const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
+
+/**
+ * MenuSplitGroup Props
+ */
+export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;
+
+export declare type MenuSplitGroupSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering MenuSplitGroup
+ */
+export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;
+
+export declare type MenuState = ComponentState<MenuSlots> & Pick<MenuProps, 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'inline' | 'onOpenChange' | 'openOnContext' | 'persistOnItemClick'> & Required<Pick<MenuProps, 'checkedValues' | 'onCheckedValueChange' | 'open' | 'openOnHover'>> & {
     /**
-     * Callback to open/close the popup
+     * Anchors the popper to the mouse click for context events
      */
-    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
     /**
-     * Internal react node that just simplifies handling children
+     * Whether this menu is a submenu
      */
-    menuPopover: React_2.ReactNode;
+    isSubmenu: boolean;
     /**
      * Internal react node that just simplifies handling children
      */
-    menuTrigger: React_2.ReactNode;
+    menuPopover: React_2.ReactNode;
     /**
      * The ref for the popup
      */
     menuPopoverRef: React_2.MutableRefObject<HTMLElement>;
     /**
-     * The ref for the MenuTrigger, used for popup positioning
+     * Internal react node that just simplifies handling children
      */
-    triggerRef: React_2.MutableRefObject<HTMLElement>;
+    menuTrigger: React_2.ReactNode;
     /**
-     * Id for the MenuTrigger element for aria relationship
+     * A callback to set the target of the popper to the mouse click for context events
      */
-    triggerId: string;
+    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     /**
-     * Whether this menu is a submenu
+     * Callback to open/close the popup
      */
-    isSubmenu: boolean;
+    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
     /**
-     * Anchors the popper to the mouse click for context events
+     * Id for the MenuTrigger element for aria relationship
      */
-    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
+    triggerId: string;
     /**
-     * A callback to set the target of the popper to the mouse click for context events
+     * The ref for the MenuTrigger, used for popup positioning
      */
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    triggerRef: React_2.MutableRefObject<HTMLElement>;
 };
 
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
  */
-export declare const MenuTrigger: React_2.FC<MenuTriggerProps>;
+export declare const MenuTrigger: React_2.FC<MenuTriggerProps> & FluentTriggerComponent;
 
 /**
  * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu
  */
-export declare type MenuTriggerChildProps = Required<Pick<React_2.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'id'>> & {
+export declare type MenuTriggerChildProps = Required<Pick<React_2.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'>> & {
     ref?: React_2.Ref<never>;
+    'aria-expanded': boolean | undefined;
 };
 
 export declare const MenuTriggerContextProvider: React_2.Provider<boolean>;
@@ -425,158 +524,188 @@ export declare type MenuTriggerProps = {
      */
     children: (React_2.ReactElement & {
         ref?: React_2.Ref<unknown>;
-    }) | ((props: MenuTriggerChildProps) => React_2.ReactNode);
+    }) | ((props: MenuTriggerChildProps) => React_2.ReactElement | null);
 };
 
-export declare type MenuTriggerState = MenuTriggerProps;
+export declare type MenuTriggerState = {
+    children: React_2.ReactElement | null;
+    isSubmenu: boolean;
+};
 
 /**
  * Render the final JSX of Menu
  */
-export declare const renderMenu: (state: MenuState, contextValues: MenuContextValues) => JSX.Element;
+export declare const renderMenu_unstable: (state: MenuState, contextValues: MenuContextValues) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menudivider structure but add
  * slots to children.
  */
-export declare const renderMenuDivider: (state: MenuDividerState) => JSX.Element;
+export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menugroup structure but add
  * slots to children.
  */
-export declare const renderMenuGroup: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;
+export declare const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menugroupheader structure but add
  * slots to children.
  */
-export declare const renderMenuGroupHeader: (state: MenuGroupHeaderState) => JSX.Element;
+export declare const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderMenuItem: (state: MenuItemState) => JSX.Element;
+export declare const renderMenuItem_unstable: (state: MenuItemState) => JSX.Element;
 
 /** Function that renders the final JSX of the component  */
-export declare const renderMenuItemCheckbox: (state: MenuItemCheckboxState) => JSX.Element;
+export declare const renderMenuItemCheckbox_unstable: (state: MenuItemCheckboxState) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menuitemradio structure but add
  * slots to children.
  */
-export declare const renderMenuItemRadio: (state: MenuItemRadioState) => JSX.Element;
+export declare const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderMenuList: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element;
+export declare const renderMenuList_unstable: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element;
 
 /**
  * Render the final JSX of MenuPopover
  */
-export declare const renderMenuPopover: (state: MenuPopoverState) => JSX.Element;
+export declare const renderMenuPopover_unstable: (state: MenuPopoverState) => JSX.Element;
+
+/**
+ * Render the final JSX of MenuSplitGroup
+ */
+export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState) => JSX.Element;
 
 /**
  * Render the final JSX of MenuTrigger
  *
  * Only renders children
  */
-export declare const renderMenuTrigger: (state: MenuTriggerState) => JSX.Element;
+export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSX.Element;
 
 export declare type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void;
 
-export declare type UninitializedMenuListState = Omit<MenuListState, 'setFocusByFirstCharacter' | 'toggleCheckbox' | 'selectRadio' | 'checkedValues'> & Partial<Pick<MenuListState, 'checkedValues'>>;
+export declare type UninitializedMenuListState = Omit<MenuListState, 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'> & Partial<Pick<MenuListState, 'checkedValues'>>;
 
 /**
  * Applies styles to a checkmark slot for selectable menu items
  *
  * @param state - should contain a `checkmark` slot
  */
-export declare const useCheckmarkStyles: (state: MenuItemSelectableState & Pick<MenuItemSlots, 'checkmark'>) => void;
+export declare const useCheckmarkStyles_unstable: (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => void;
 
 /**
  * Create the state required to render Menu.
  *
  * The returned state can be modified with hooks such as useMenuStyles,
- * before being passed to renderMenu.
+ * before being passed to renderMenu_unstable.
  *
  * @param props - props from this instance of Menu
  */
-export declare const useMenu: (props: MenuProps) => MenuState;
+export declare const useMenu_unstable: (props: MenuProps) => MenuState;
 
-export declare const useMenuContext: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
+export declare const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
 
-export declare function useMenuContextValues(state: MenuState): MenuContextValues;
+export declare function useMenuContextValues_unstable(state: MenuState): MenuContextValues;
 
 /**
  * Given user props, returns state and render function for a MenuDivider.
  */
-export declare const useMenuDivider: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;
+export declare const useMenuDivider_unstable: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;
 
-export declare const useMenuDividerStyles: (state: MenuDividerState) => ComponentState<MenuDividerSlots>;
+export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;
 
 /**
  * Given user props, returns state and render function for a MenuGroup.
  */
-export declare function useMenuGroup(props: MenuGroupProps, ref: React_2.Ref<HTMLElement>): MenuGroupState;
+export declare function useMenuGroup_unstable(props: MenuGroupProps, ref: React_2.Ref<HTMLElement>): MenuGroupState;
 
-export declare const useMenuGroupContext: () => MenuGroupContextValue;
+export declare const useMenuGroupContext_unstable: () => MenuGroupContextValue;
 
-export declare function useMenuGroupContextValues(state: MenuGroupState): MenuGroupContextValues;
+export declare function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues;
 
 /**
  * Given user props, returns state and render function for a MenuGroupHeader.
  */
-export declare function useMenuGroupHeader(props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>): MenuGroupHeaderState;
+export declare function useMenuGroupHeader_unstable(props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>): MenuGroupHeaderState;
+
+export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;
 
-export declare const useMenuGroupHeaderStyles: (state: MenuGroupHeaderState) => ComponentState<MenuGroupHeaderSlots>;
+export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;
 
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuItem: (props: MenuItemProps, ref: React_2.Ref<HTMLElement>) => MenuItemState;
+export declare const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.Ref<HTMLElement>) => MenuItemState;
 
 /** Returns the props and state required to render the component */
-export declare const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React_2.Ref<HTMLElement>) => MenuItemCheckboxState;
+export declare const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<HTMLElement>) => MenuItemCheckboxState;
+
+export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => void;
 
 /**
  * Given user props, returns state and render function for a MenuItemRadio.
  */
-export declare const useMenuItemRadio: (props: MenuItemRadioProps, ref: React_2.Ref<HTMLElement>) => MenuItemRadioState;
+export declare const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React_2.Ref<HTMLElement>) => MenuItemRadioState;
+
+export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;
 
 /** Applies style classnames to slots */
-export declare const useMenuItemStyles: (state: MenuItemState) => void;
+export declare const useMenuItemStyles_unstable: (state: MenuItemState) => void;
 
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuList: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
+export declare const useMenuList_unstable: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
 
-export declare const useMenuListContext: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
+export declare const useMenuListContext_unstable: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
 
-export declare function useMenuListContextValues(state: MenuListState): MenuListContextValues;
+export declare function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues;
 
 /**
  * Apply styling to the Menu slots based on the state
  */
-export declare const useMenuListStyles: (state: MenuListState) => MenuListState;
+export declare const useMenuListStyles_unstable: (state: MenuListState) => MenuListState;
 
 /**
  * Create the state required to render MenuPopover.
  *
- * The returned state can be modified with hooks such as useMenuPopoverStyles,
- * before being passed to renderMenuPopover.
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
  *
  * @param props - props from this instance of MenuPopover
  * @param ref - reference to root HTMLElement of MenuPopover
  */
-export declare const useMenuPopover: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
+export declare const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
 
 /**
  * Apply styling to the Menu slots based on the state
  */
-export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopoverState;
+export declare const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState;
+
+/**
+ * Create the state required to render MenuSplitGroup.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */
+export declare const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React_2.Ref<HTMLElement>) => MenuSplitGroupState;
+
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */
+export declare const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState;
 
 /**
  * Create the state required to render MenuTrigger.
@@ -584,8 +713,8 @@ export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopo
  *
  * @param props - props from this instance of MenuTrigger
  */
-export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
+export declare const useMenuTrigger_unstable: (props: MenuTriggerProps) => MenuTriggerState;
 
-export declare const useMenuTriggerContext: () => boolean;
+export declare const useMenuTriggerContext_unstable: () => boolean;
 
 export { }