-
-
Notifications
You must be signed in to change notification settings - Fork 301
/
MenuItemTextField.tsx
71 lines (68 loc) · 1.94 KB
/
MenuItemTextField.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import cn from "classnames";
import type { PropsWithRef } from "@react-md/utils";
import { useKeyboardFocusableElement } from "@react-md/utils";
import type { TextFieldProps } from "../text-field/TextField";
import { TextField } from "../text-field/TextField";
/**
* @remarks \@since 5.0.0
*/
export interface MenuItemTextFieldProps extends TextFieldProps {
/**
* Any additional props or a `ref` to apply to the surrounding `<li>` element.
*/
liProps?: Readonly<
PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>
>;
}
/**
* 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.
*
* @remarks \@since 5.0.0
*/
export const MenuItemTextField = forwardRef<
HTMLInputElement,
MenuItemTextFieldProps
>(function MenuItemTextField(
{ liProps, onKeyDown, stretch = true, ...props },
nodeRef
) {
const refCallback = useKeyboardFocusableElement(nodeRef);
return (
<li
role="none"
{...liProps}
onClick={(event) => {
liProps?.onClick?.(event);
event.stopPropagation();
}}
className={cn("rmd-list-item rmd-menu-item", liProps?.className)}
>
<TextField
{...props}
ref={refCallback}
stretch={stretch}
onKeyDown={(event) => {
onKeyDown?.(event);
switch (event.key) {
case "Tab":
case "Escape":
case " ":
// do default behavior
break;
default:
if (event.key.length === 1 || event.currentTarget.value) {
event.stopPropagation();
}
}
}}
/>
</li>
);
});