"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef } from "react";
import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
import { getLastFocusableIndex } from "../movement/utils.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { useEnsuredState } from "../useEnsuredState.js";
import { Menu } from "./Menu.js";
import { MenuButton } from "./MenuButton.js";
import { MenuConfigurationProvider } from "./MenuConfigurationProvider.js";
import { MenuItemButton } from "./MenuItemButton.js";
import { MenuVisibilityProvider } from "./MenuVisibilityProvider.js";
import { useMenuBarContext } from "./useMenuBarProvider.js";
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import type { ReactElement } from "react";
 * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
 * import { MenuItem } from "@react-md/core/menu/MenuItem";
 *
 * function Example() {
 *   return (
 *     <DropdownMenu buttonChildren="Dropdown">
 *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
 *         Item 1
 *       </MenuItem>
 *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
 *         Item 2
 *       </MenuItem>
 *     </DropdownMenu>
 *   );
 * }
 * ```
 *
 * @example Nested Dropdown Menus
 * ```tsx
 * import type { ReactElement } from "react";
 * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
 * import { MenuItem } from "@react-md/core/menu/MenuItem";
 *
 * function Example() {
 *   return (
 *     <DropdownMenu buttonChildren="Dropdown">
 *       <MenuItem onClick={() => console.log('Clicked Item 1')}>
 *         Item 1
 *       </MenuItem>
 *       <MenuItem onClick={() => console.log('Clicked Item 2')}>
 *         Item 2
 *       </MenuItem>
 *       <DropdownMenu buttonChildren="Nested Dropdown">
 *         <MenuItem onClick={() => console.log('Clicked Item 1')}>
 *           Nested Item 1
 *         </MenuItem>
 *         <MenuItem onClick={() => console.log('Clicked Item 2')}>
 *           Nested Item 2
 *         </MenuItem>
 *       </DropdownMenu>
 *     </DropdownMenu>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/menu | Menu Demos}
 * @since 5.0.0
 * @since 6.0.0 Updated to use the latest menu API.
 */ export function DropdownMenu(props) {
    const { id: propId, horizontal, sheetHeader, sheetFooter, renderAsSheet, sheetPosition, sheetVerticalSize, buttonChildren, iconRotatorProps: propIconRotatorProps, disableTransition: propDisableTransition, floating, anchor, vwMargin, vhMargin, xMargin, yMargin, initialX, initialY, width, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, preventScroll, closeOnResize, closeOnScroll, getFixedPositionOptions, children, temporary, disablePortal, disableElevation, menuProps, menuStyle, menuClassName, sheetProps, sheetStyle, sheetClassName, visible: propVisible, setVisible: propSetVisible, ...remaining } = props;
    const fixedTo = useRef(null);
    const defaultFocusIndex = useRef(0);
    const [visible, setVisible] = useEnsuredState({
        name: "visible",
        value: propVisible,
        setValue: propSetVisible,
        defaultValue: false
    });
    const { menubar, menuitem, activeIdRef, animatedOnceRef } = useMenuBarContext();
    const id = useEnsuredId(propId, `menu${menuitem ? "item" : "button"}`);
    const mode = useUserInteractionMode();
    const mouse = mode === "mouse";
    const keyboard = mode === "keyboard";
    const disableTransition = propDisableTransition ?? (animatedOnceRef.current && menubar && !!activeIdRef.current && (mouse || keyboard));
    const onRequestClose = useCallback(()=>{
        setVisible(false);
    }, [
        setVisible
    ]);
    let iconRotatorProps = propIconRotatorProps;
    if (disableTransition) {
        iconRotatorProps = {
            disableTransition,
            ...propIconRotatorProps
        };
    }
    let toggle;
    if (menuitem) {
        toggle = /*#__PURE__*/ _jsx(MenuItemButton, {
            ...remaining,
            id: id,
            ref: fixedTo,
            iconRotatorProps: iconRotatorProps,
            children: buttonChildren
        });
    } else {
        toggle = /*#__PURE__*/ _jsx(MenuButton, {
            ...remaining,
            id: id,
            ref: fixedTo,
            floating: floating,
            iconRotatorProps: iconRotatorProps,
            children: buttonChildren
        });
    }
    return /*#__PURE__*/ _jsxs(MenuVisibilityProvider, {
        visible: visible,
        setVisible: setVisible,
        defaultFocusIndex: defaultFocusIndex,
        children: [
            /*#__PURE__*/ _jsx(MenuConfigurationProvider, {
                horizontal: horizontal,
                renderAsSheet: renderAsSheet,
                sheetFooter: sheetFooter,
                sheetHeader: sheetHeader,
                sheetPosition: sheetPosition,
                sheetVerticalSize: sheetVerticalSize,
                children: toggle
            }),
            /*#__PURE__*/ _jsx(Menu, {
                "aria-labelledby": menuProps?.["aria-label"] ? undefined : id,
                style: menuStyle,
                className: menuClassName,
                sheetProps: sheetProps,
                sheetStyle: sheetStyle,
                sheetClassName: sheetClassName,
                temporary: temporary,
                disablePortal: disablePortal,
                disableElevation: disableElevation,
                disableTransition: disableTransition,
                floating: floating,
                anchor: anchor,
                vwMargin: vwMargin,
                vhMargin: vhMargin,
                xMargin: xMargin,
                yMargin: yMargin,
                initialX: initialX,
                initialY: initialY,
                width: width,
                transformOrigin: transformOrigin,
                preventOverlap: preventOverlap,
                disableSwapping: disableSwapping,
                disableVHBounds: disableVHBounds,
                preventScroll: preventScroll,
                closeOnResize: closeOnResize,
                closeOnScroll: closeOnScroll,
                getFixedPositionOptions: getFixedPositionOptions,
                horizontal: horizontal,
                sheetHeader: sheetHeader,
                sheetFooter: sheetFooter,
                renderAsSheet: renderAsSheet,
                sheetPosition: sheetPosition,
                sheetVerticalSize: sheetVerticalSize,
                ...menuProps,
                fixedTo: fixedTo,
                visible: visible,
                getDefaultFocusedIndex: (options)=>{
                    const defaultIndex = defaultFocusIndex.current;
                    if (defaultIndex < 0) {
                        return getLastFocusableIndex(options);
                    }
                    return defaultIndex;
                },
                onRequestClose: onRequestClose,
                onEntered: (appearing)=>{
                    menuProps?.onEntered?.(appearing);
                    // this will be called before `getDefaultFocusedIndex`
                    if (disableTransition) {
                        return;
                    }
                    defaultFocusIndex.current = 0;
                },
                children: children
            })
        ]
    });
}

//# sourceMappingURL=DropdownMenu.js.map