1
- import React from 'react' ;
2
1
import propTypes from 'prop-types' ;
3
-
2
+ import React , { forwardRef } from 'react' ;
4
3
import styled , { css } from 'styled-components' ;
5
4
import { createDisabledTextStyles } from '../common' ;
5
+ import { CommonStyledProps } from '../types' ;
6
+
7
+ type FieldsetProps = {
8
+ label ?: React . ReactNode ;
9
+ children ?: React . ReactNode ;
10
+ disabled ?: boolean ;
11
+ variant ?: 'default' | 'flat' ;
12
+ } & React . FieldsetHTMLAttributes < HTMLFieldSetElement > &
13
+ CommonStyledProps ;
6
14
7
- const StyledFieldset = styled . fieldset `
15
+ const StyledFieldset = styled . fieldset <
16
+ Pick < FieldsetProps , 'variant' > & { $disabled : boolean }
17
+ > `
8
18
position: relative;
9
19
border: 2px solid
10
20
${ ( { theme, variant } ) =>
@@ -19,9 +29,10 @@ const StyledFieldset = styled.fieldset`
19
29
box-shadow : -1px -1px 0 1px ${ ( { theme } ) => theme . borderDark } ,
20
30
inset -1px -1px 0 1px ${ ( { theme } ) => theme . borderDark } ;
21
31
` }
22
- ${ props => props . isDisabled && createDisabledTextStyles ( ) }
32
+ ${ props => props . $disabled && createDisabledTextStyles ( ) }
23
33
` ;
24
- const StyledLegend = styled . legend `
34
+
35
+ const StyledLegend = styled . legend < Pick < FieldsetProps , 'variant' > > `
25
36
display: flex;
26
37
position: absolute;
27
38
top: 0;
@@ -34,21 +45,25 @@ const StyledLegend = styled.legend`
34
45
variant === 'flat' ? theme . canvas : theme . material } ;
35
46
` ;
36
47
37
- const Fieldset = React . forwardRef ( function Fieldset ( props , ref ) {
38
- const { label, disabled, variant, children, ...otherProps } = props ;
39
- return (
40
- < StyledFieldset
41
- aria-disabled = { disabled }
42
- isDisabled = { disabled }
43
- variant = { variant }
44
- ref = { ref }
45
- { ...otherProps }
46
- >
47
- { label && < StyledLegend variant = { variant } > { label } </ StyledLegend > }
48
- { children }
49
- </ StyledFieldset >
50
- ) ;
51
- } ) ;
48
+ const Fieldset = forwardRef < HTMLFieldSetElement , FieldsetProps > (
49
+ function Fieldset (
50
+ { label, disabled = false , variant = 'default' , children, ...otherProps } ,
51
+ ref
52
+ ) {
53
+ return (
54
+ < StyledFieldset
55
+ aria-disabled = { disabled }
56
+ $disabled = { disabled }
57
+ variant = { variant }
58
+ ref = { ref }
59
+ { ...otherProps }
60
+ >
61
+ { label && < StyledLegend variant = { variant } > { label } </ StyledLegend > }
62
+ { children }
63
+ </ StyledFieldset >
64
+ ) ;
65
+ }
66
+ ) ;
52
67
53
68
Fieldset . defaultProps = {
54
69
disabled : false ,
@@ -64,4 +79,4 @@ Fieldset.propTypes = {
64
79
variant : propTypes . oneOf ( [ 'default' , 'flat' ] )
65
80
} ;
66
81
67
- export default Fieldset ;
82
+ export { Fieldset , FieldsetProps } ;
0 commit comments