"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { TextField } from "../form/TextField.js";
/**
 * **Client Component**
 *
 * This is a wrapper for the `TextField` component that can be used within
 * `Menu`s by updating the `onKeyDown` and `onClick` behavior.
 *
 * Note: This is **not** the `TextFieldWithMessage` since the message part is
 * hard to style nicely within menus. You'd most likely want to use another menu
 * for displaying errors.
 *
 * @see {@link https://react-md.dev/components/menu#menuitemtextfield-example | DropdownMenu Demos}
 * @since 5.0.0
 */ export const MenuItemTextField = /*#__PURE__*/ forwardRef(function MenuItemTextField(props, ref) {
    const { liProps, onKeyDown, ...remaining } = props;
    return /*#__PURE__*/ _jsx("li", {
        role: "none",
        ...liProps,
        onClick: (event)=>{
            liProps?.onClick?.(event);
            event.stopPropagation();
        },
        className: cnb("rmd-list-item rmd-menu-item", liProps?.className),
        children: /*#__PURE__*/ _jsx(TextField, {
            ...remaining,
            ref: ref,
            onKeyDown: (event)=>{
                onKeyDown?.(event);
                switch(event.key){
                    case "Tab":
                    case "Escape":
                    case " ":
                        break;
                    default:
                        if (event.key.length === 1 || event.currentTarget.value) {
                            event.stopPropagation();
                        }
                }
            }
        })
    });
});

//# sourceMappingURL=MenuItemTextField.js.map