005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import * as React from 'react';
|
|
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
|
|
import { styled } from '@mui/joy/styles';
|
|
import Textarea from '@mui/joy/Textarea';
|
|
|
|
const StyledTextarea = styled(TextareaAutosize)({
|
|
resize: 'none',
|
|
border: 'none', // remove the native textarea border
|
|
minWidth: 0, // remove the native textarea width
|
|
outline: 0, // remove the native textarea outline
|
|
padding: 0, // remove the native textarea padding
|
|
paddingBlockStart: '1em',
|
|
paddingInlineEnd: `var(--Textarea-paddingInline)`,
|
|
flex: 'auto',
|
|
alignSelf: 'stretch',
|
|
color: 'inherit',
|
|
backgroundColor: 'transparent',
|
|
fontFamily: 'inherit',
|
|
fontSize: 'inherit',
|
|
fontStyle: 'inherit',
|
|
fontWeight: 'inherit',
|
|
lineHeight: 'inherit',
|
|
'&::placeholder': {
|
|
opacity: 0,
|
|
transition: '0.1s ease-out',
|
|
},
|
|
'&:focus::placeholder': {
|
|
opacity: 1,
|
|
},
|
|
// specific to TextareaAutosize, cannot use '&:focus ~ label'
|
|
'&:focus + textarea + label, &:not(:placeholder-shown) + textarea + label': {
|
|
top: '0.5rem',
|
|
fontSize: '0.75rem',
|
|
},
|
|
'&:focus + textarea + label': {
|
|
color: 'var(--Textarea-focusedHighlight)',
|
|
},
|
|
});
|
|
|
|
const StyledLabel = styled('label')(({ theme }) => ({
|
|
position: 'absolute',
|
|
lineHeight: 1,
|
|
top: 'calc((var(--Textarea-minHeight) - 1em) / 2)',
|
|
color: theme.vars.palette.text.tertiary,
|
|
fontWeight: theme.vars.fontWeight.md,
|
|
transition: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
}));
|
|
|
|
const InnerTextarea = React.forwardRef(function InnerTextarea(props, ref) {
|
|
const id = React.useId();
|
|
return (
|
|
<React.Fragment>
|
|
<StyledTextarea minRows={2} {...props} ref={ref} id={id} />
|
|
<StyledLabel htmlFor={id}>Label</StyledLabel>
|
|
</React.Fragment>
|
|
);
|
|
});
|
|
|
|
export default function FloatingLabelTextarea() {
|
|
return (
|
|
<Textarea
|
|
slots={{ textarea: InnerTextarea }}
|
|
slotProps={{ textarea: { placeholder: 'A placeholder' } }}
|
|
sx={{ borderRadius: '6px' }}
|
|
/>
|
|
);
|
|
}
|