import * as react from 'react'; import { ReactNode, SyntheticEvent, ComponentProps } from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { CollectionNode } from '../../collection/src/useCollection.js'; import { InternalProps, StyledComponentProps, OmitInternalProps } from '../../shared/src/types.js'; import { ResponsiveProp } from '../../styling/src/useResponsiveValue.js'; import { ValidationState } from '../../input/src/types.js'; import '../../styling/src/styled-system/props-handler.js'; import 'csstype'; import '../../shared/src/type-fest.js'; import '../../styling/src/styled-system/StylingContext.js'; import '../../styling/src/BreakpointProvider.js'; import '../../group/src/Group.js'; import '../../layout/src/Flex.js'; type MenuSelectionMode = "none" | "single" | "multiple"; declare const ItemKeyProp = "data-o-ui-key"; declare const DefaultElement = "ul"; interface InnerMenuProps extends InternalProps, Omit, "autoFocus"> { /** * Whether or not the menu should autofocus on render. */ autoFocus?: boolean | number; /** * Default focus target when enabling autofocus. */ autoFocusTarget?: string; /** * React children. */ children: ReactNode; /** * The initial value of `selectedKeys` when uncontrolled. */ defaultSelectedKeys?: string[]; /** * Whether or not the menu items are disabled. */ disabled?: boolean; /** * Whether or not the listbox take up the width of its container. */ fluid?: ResponsiveProp; /** * A collection of nodes to render instead of children. It should only be used if you embed a Menu inside another component. */ nodes?: CollectionNode[]; /** * Called when the selected keys change. * @param {SyntheticEvent} event - React's original event. * @param {String[]} keys - The keys of the selected items.. * @returns {void} */ onSelectionChange?: (event: SyntheticEvent, keys: string[]) => void; /** * A controlled set of the selected item keys. */ selectedKeys?: string[] | null; /** * The type of selection that is allowed. */ selectionMode?: MenuSelectionMode; /** * Whether or not the menu should display as "valid" or "invalid". */ validationState?: ValidationState; } declare function InnerMenu({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, as, autoFocus, autoFocusTarget, children, defaultSelectedKeys, fluid, forwardedRef, id, nodes: nodesProp, onSelectionChange, selectedKeys: selectedKeysProp, selectionMode, validationState, ...rest }: InnerMenuProps): react_jsx_runtime.JSX.Element; declare namespace InnerMenu { var defaultElement: string; } /** * A menu offers a list of choices to the user, such as a set of actions or functions. * * [Documentation](https://wl-orbiter-website.netlify.app/?path=/docs/menu--default-story) */ declare const Menu: react.ForwardRefExoticComponent, "ref"> & react.RefAttributes>; type MenuProps = ComponentProps; export { InnerMenu, type InnerMenuProps, ItemKeyProp, Menu, type MenuProps, type MenuSelectionMode };