Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 40x 40x 40x 40x 2900x 40x 2900x 40x 2469x | import {
styled,
TextField as MuiTextField,
TextFieldProps,
} from "@mui/material";
import { BaseTextFieldProps } from "@mui/material/TextField";
import React, { forwardRef } from "react";
import { useIsNativeEmbed } from "utils/nativeLink";
const StyledMuiTextField = styled(MuiTextField)<TextFieldProps>(
({ theme, multiline }) => ({
"& .MuiOutlinedInput-root": {
borderRadius: theme.shape.borderRadius * 3,
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--mui-palette-grey-300)",
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--mui-palette-primary-main)",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--mui-palette-primary-main)",
},
},
display: "block",
...(multiline && {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--mui-palette-grey-500)",
},
"& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "var(--mui-palette-grey-900)",
},
}),
}),
);
type AccessibleTextFieldProps = Omit<TextFieldProps, "variant"> & {
// id is required for accessibility, but optional when used inside Autocomplete
// (Autocomplete provides the id via inputProps)
id?: BaseTextFieldProps["id"];
onChange?: TextFieldProps["onChange"];
variant?: "filled" | "outlined" | "standard";
};
const TextField = forwardRef<
HTMLInputElement | HTMLDivElement,
AccessibleTextFieldProps
>(
(
{
className,
variant = "outlined",
helperText,
name,
slotProps,
...otherProps
},
ref,
) => {
// In WebViews, MUI's floating label positioning can break due to CSS transform issues.
// Force labels to always be in "shrunk" position to avoid overlap with input border.
const isNativeEmbed = useIsNativeEmbed();
return (
<StyledMuiTextField
{...otherProps}
inputRef={ref}
name={name}
variant={variant}
helperText={
<span data-testid={`${name}-helper-text`}>{helperText}</span>
}
multiline={otherProps.multiline !== undefined}
className={className}
slotProps={{
...slotProps,
inputLabel: {
...(typeof slotProps?.inputLabel === "object"
? slotProps.inputLabel
: {}),
...(isNativeEmbed && { shrink: true }),
},
}}
/>
);
},
);
TextField.displayName = "TextField";
export default TextField;
|