
import { SpacingAlias } from "../../../types/dist/index.js";
import "../../../tokens/index.js";
import { VStackProps } from "../../VStack.js";
import * as react from "react";
import { MenuProps } from "@ariakit/react/menu";

//#region src/components/client/Menu/Menu.Content.d.ts
interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
  /**
   * Controls spacing-related properties (border radius, border width, shadow, spacing, gap)
   * @default 'default'
   */
  size?: 'default';
  /**
   * Controls color-related properties (background color, border color)
   * @default 'default'
   */
  variant?: 'default';
  gutter?: SpacingAlias;
  /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
   *  If you need to disable this, set this prop to true.
   *
   *  @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/tailwind/utils/getNestedBorderRadiusUtilities.ts
   **/
  disableAutoBorderRadius?: boolean;
  /**
   * `portalRef` is similar to `ref` but is scoped to the portal node. It's
   * useful when you need to be informed when the portal element is appended to
   * the DOM or removed from the DOM.
   *
   * Live examples:
   * - [Form with Select](https://ariakit.org/examples/form-select)
   * @example
   * ```jsx
   * const [portalElement, setPortalElement] = useState(null);
   *
   * <Portal portalRef={setPortalElement} />
   * ```
   */
  portalRef?: MenuProps['portalRef'];
  /**
   * Determines whether the element should be rendered as a React Portal.
   *
   * Live examples:
   * - [Combobox with integrated
   *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
   * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
   * - [Hovercard with keyboard
   *   support](https://ariakit.org/examples/hovercard-disclosure)
   * - [Menubar](https://ariakit.org/components/menubar)
   * - [Standalone Popover](https://ariakit.org/examples/popover-standalone)
   * - [Animated Select](https://ariakit.org/examples/select-animated)
   * @default true
   */
  portal?: boolean;
  /**
   * An HTML element or a memoized callback function that returns an HTML
   * element to be used as the portal element. By default, the portal element
   * will be a `div` element appended to the `document.body`.
   *
   * Live examples:
   * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
   * @example
   * ```jsx
   * const [portal, setPortal] = useState(null);
   *
   * <Portal portalElement={portal} />
   * <div ref={setPortal} />
   * ```
   * @example
   * ```jsx
   * const getPortalElement = useCallback(() => {
   *   const div = document.createElement("div");
   *   const portalRoot = document.getElementById("portal-root");
   *   portalRoot.appendChild(div);
   *   return div;
   * }, []);
   *
   * <Portal portalElement={getPortalElement} />
   * ```
   */
  portalElement?: MenuProps['portalElement'];
  /**
   * Determines whether the popover should hide when the mouse leaves the
   * popover or the anchor element and there's no _hover intent_, meaning, the
   * mouse isn't moving toward the popover.
   *
   * This can be either a boolean or a callback receiving the mouse move event
   * that initiated the behavior. The callback should return a boolean.
   *
   * **Note**: This behavior won't be triggered when the popover or any of its
   * descendants are in focus.
   * @default true
   */
  hideOnHoverOutside?: MenuProps['hideOnHoverOutside'];
  /**
   * Determines if the dialog will hide when the user presses the Escape key.
   *
   * This prop can be either a boolean or a function that accepts an event as an
   * argument and returns a boolean. The event object represents the keydown
   * event that initiated the hide action, which could be either a native
   * keyboard event or a React synthetic event.
   *
   * **Note**: When placing Ariakit dialogs inside third-party dialogs, using
   * `event.stopPropagation()` within this function will stop the event from
   * reaching the third-party dialog, closing only the Ariakit dialog.
   * @default true
   */
  hideOnEscape?: MenuProps['hideOnEscape'];
  /**
   * Determines if the dialog should hide when the user clicks or focuses on an
   * element outside the dialog.
   *
   * This prop can be either a boolean or a function that takes an event as an
   * argument and returns a boolean. The event object represents the event that
   * triggered the action, which could be a native event or a React synthetic
   * event of various types.
   *
   * Live examples:
   * - [Selection Popover](https://ariakit.org/examples/popover-selection)
   * @default true
   */
  hideOnInteractOutside?: MenuProps['hideOnInteractOutside'];
  /**
   * Determines if the pointer events outside of the popover and its anchor
   * element should be disabled during _hover intent_, that is, when the mouse
   * is moving toward the popover.
   *
   * This is required as these external events may trigger focus on other
   * elements and close the popover while the user is attempting to hover over
   * it.
   *
   * This can be either a boolean or a callback receiving the mouse event
   * happening during hover intent. The callback should return a boolean.
   * @default true
   */
  disablePointerEventsOnApproach?: MenuProps['disablePointerEventsOnApproach'];
  /**
   * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
   * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
   * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
   */
  store?: MenuProps['store'];
  /**
   * Whether the popover should have the same width as the anchor element. This
   * will be exposed to CSS as
   * [`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).
   * @default false
   */
  sameWidth?: MenuProps['sameWidth'];
  /**
   * @see https://ariakit.org/reference/focusable
   * @default true
   */
  focusable?: MenuProps['focusable'];
  /**
   * This is an event handler prop triggered when the dialog's `close` event is
   * dispatched. The `close` event is similar to the native dialog
   * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
   * event. The only difference is that this event can be canceled with
   * `event.preventDefault()`, which will prevent the dialog from hiding.
   *
   * It's important to note that this event only fires when the dialog store's
   * [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set
   * to `false`. If the controlled
   * [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or
   * if the dialog's visibility is altered in any other way (such as unmounting
   * the dialog without adjusting the open state), this event won't be
   * triggered.
   *
   * Live examples:
   * - [Dialog with scrollable
   *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
   * - [Dialog with details &
   *   summary](https://ariakit.org/examples/dialog-details)
   * - [Warning on Dialog
   *   hide](https://ariakit.org/examples/dialog-hide-warning)
   * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
   */
  onClose?: MenuProps['onClose'];
}
/**
 * **📦 A Menu Content component**
 *
 * @componentType Client component
 *
 * @description
 * A content component for the menu, which is used to provide the menu context to the menu items.
 *
 * @see The {@link https://uds.build/docs/components/menu-content Menu.Content Docs} for more info
 *
 * @example
 * ```tsx
 * 'use client'; // Next.js client component
 *
 * import { Menu, Button } from "@yahoo/uds";
 * import { Calendar, Clipboard } from "@yahoo/uds-icons";
 *
 * export function MenuProviderExample() {
 *   return (
 *     <Menu.Provider>
 *       <Menu.Trigger asChild>
 *         <Button>Menu Options</Button>
 *       </Menu.Trigger>
 *       <Menu.Content>
 *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
 *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
 *           Clipboard
 *         </Menu.Item>
 *         <Menu.Item active>Active Item</Menu.Item>
 *       </Menu.Content>
 *     </Menu.Provider>
 *   )
 * }
 * ```
 *
 * @usage
 * Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
//#endregion
export { MenuContent, type MenuContentProps };