blob: eb429612b7675eb1feb40c84f433b068950fe5ff (
plain)
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
|
import {
forwardRef,
type FieldsetHTMLAttributes,
ForwardRefRenderFunction,
ReactElement,
} from 'react';
import styles from './fieldset.module.scss';
import { LegendProps } from '../legend';
export type FieldsetProps = Omit<
FieldsetHTMLAttributes<HTMLFieldSetElement>,
'disabled' | 'hidden'
> & {
/**
* Should the fieldset be disabled?
*
* @default false
*/
isDisabled?: boolean;
/**
* Should the fieldset contents be inlined?
*
* @default false
*/
isInline?: boolean;
/**
* The fieldset legend.
*/
legend?: ReactElement<LegendProps>;
};
/**
* Fieldset component.
*/
const FieldsetWithRef: ForwardRefRenderFunction<
HTMLFieldSetElement,
FieldsetProps
> = (
{
children,
className = '',
isDisabled = false,
isInline = false,
legend,
...props
},
ref
) => {
const layoutModifier = isInline
? styles['fieldset--inline']
: styles['fieldset--stack'];
const legendModifier = legend ? styles['fieldset--has-legend'] : '';
const fieldsetClass = `${styles.fieldset} ${legendModifier} ${layoutModifier} ${className}`;
return (
<fieldset
{...props}
className={fieldsetClass}
disabled={isDisabled}
ref={ref}
>
{legend}
{children}
</fieldset>
);
};
export const Fieldset = forwardRef(FieldsetWithRef);
|
