@@ -47,7 +47,8 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
47
47
const [ componentRef , splitterElementRef ] = useSyncRef ( ref ) ;
48
48
const { vertical, reset } = useContext ( SplitterLayoutContext ) ;
49
49
const safariStyles = Device . isSafari ( ) ? { width : 'min-content' , flex : '1 1 auto' } : { } ;
50
- const defaultFlexStyles = size !== 'auto' ? { flex : `0 1 ${ size } ` } : { flex : '1 0 min-content' , ...safariStyles } ;
50
+ const _size = typeof size === 'number' ? `${ size } px` : size ;
51
+ const defaultFlexStyles = _size !== 'auto' ? { flex : `0 1 ${ _size } ` } : { flex : '1 0 min-content' , ...safariStyles } ;
51
52
const [ flexStyles , setFlexStyles ] = useState ( defaultFlexStyles ) ;
52
53
const [ flexBasisApplied , setFlexBasisApplied ] = useState ( false ) ;
53
54
@@ -65,23 +66,23 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
65
66
}
66
67
} ) ;
67
68
68
- if ( size === 'auto' && splitterElementRef . current ) {
69
+ if ( _size === 'auto' && splitterElementRef . current ) {
69
70
elementObserver . observe ( splitterElementRef . current ) ;
70
71
} else {
71
- setFlexStyles ( { flex : `0 1 ${ size } ` } ) ;
72
+ setFlexStyles ( { flex : `0 1 ${ _size } ` } ) ;
72
73
}
73
74
74
75
return ( ) => {
75
76
elementObserver . disconnect ( ) ;
76
77
} ;
77
- } , [ size , flexBasisApplied , vertical ] ) ;
78
+ } , [ _size , flexBasisApplied , vertical ] ) ;
78
79
79
80
useIsomorphicLayoutEffect ( ( ) => {
80
81
if ( reset ) {
81
82
setFlexStyles ( undefined ) ;
82
83
setFlexBasisApplied ( false ) ;
83
84
}
84
- } , [ reset , size ] ) ;
85
+ } , [ reset , _size ] ) ;
85
86
86
87
useIsomorphicLayoutEffect ( ( ) => {
87
88
if ( flexStyles === undefined ) {
0 commit comments