"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { List } from "../list/List.js";
import { KeyboardMovementProvider, useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
import { MenuBarProvider, useMenuBarProvider } from "./useMenuBarProvider.js";
/**
 * **Client Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { DropdownMenu, MenuBar, MenuItem } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * export function SimpleExample(): ReactElement {
 *   return (
 *     <MenuBar>
 *       <DropdownMenu buttonChildren="Item 1">
 *         <MenuItem>Menu Item 1</MenuItem>
 *         <MenuItem>Menu Item 2</MenuItem>
 *         <MenuItem>Menu Item 3</MenuItem>
 *       </DropdownMenu>
 *       <DropdownMenu buttonChildren="Item 2">
 *         <MenuItem>Menu Item 1</MenuItem>
 *         <MenuItem>Menu Item 2</MenuItem>
 *         <MenuItem>Menu Item 3</MenuItem>
 *       </DropdownMenu>
 *       <DropdownMenu buttonChildren="Item 3">
 *         <MenuItem>Menu Item 1</MenuItem>
 *         <MenuItem>Menu Item 2</MenuItem>
 *         <MenuItem>Menu Item 4</MenuItem>
 *       </DropdownMenu>
 *     </MenuBar>
 *   );
 * }
 * ```
 *
 * @remarks \@since 5.0.0
 * @remarks \@since 6.0.0 Combined with the previous `MenuBarWidget`
 */ export const MenuBar = /*#__PURE__*/ forwardRef(function MenuBar(props, ref) {
    const { onClick, onFocus, onKeyDown, horizontal = true, hoverTimeout, children, ...remaining } = props;
    const menuBarContext = useMenuBarProvider({
        root: true,
        menubar: true,
        hoverTimeout
    });
    const { activeId, enableHoverMode } = menuBarContext;
    const { movementProps, movementContext } = useKeyboardMovementProvider({
        onClick,
        onFocus,
        onKeyDown,
        loopable: true,
        searchable: true,
        horizontal,
        includeDisabled: true,
        tabIndexBehavior: "roving",
        onFocusChange (event) {
            if (activeId) {
                enableHoverMode(event.element.id);
            }
        }
    });
    return /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
        value: movementContext,
        children: /*#__PURE__*/ _jsx(MenuBarProvider, {
            value: menuBarContext,
            children: /*#__PURE__*/ _jsx(List, {
                ...remaining,
                ...movementProps,
                ref: ref,
                role: "menubar",
                horizontal: horizontal,
                children: children
            })
        })
    });
});

//# sourceMappingURL=MenuBar.js.map