Skip to content

Commit

Permalink
fix: Input forwardRef type
Browse files Browse the repository at this point in the history
  • Loading branch information
LimeWub committed Aug 7, 2024
1 parent 0d65f59 commit 3d398ff
Showing 1 changed file with 12 additions and 18 deletions.
30 changes: 12 additions & 18 deletions lib/src/components/input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,9 @@ const StyledInputText = styled.withConfig({
})

export type InputTextProps = Omit<
React.ComponentProps<typeof StyledInputText>, 'size' | 'type' | 'as'> &
{
React.ComponentProps<typeof StyledInputText>,
'size' | 'type' | 'as'
> & {
size: React.ComponentProps<typeof Text>['size']
// override default 'type' property to prevent Input from being used to render
// checkboxes, radios etc — we have dedicated components for them
Expand All @@ -81,11 +82,8 @@ const toTextSize = {
xl: 'lg'
}

export const InputText = React.forwardRef(
(
{ type = 'text', css, size, ...rest }: InputTextProps,
ref: React.ForwardedRef<HTMLInputElement>
) => {
export const InputText: React.ForwardRefExoticComponent<InputTextProps> =
React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {
const textSize = React.useMemo(
() => overrideStitchesVariantValue(size, (s) => toTextSize[s]),
[size]
Expand All @@ -102,30 +100,26 @@ export const InputText = React.forwardRef(
{...rest}
/>
)
}
)
})

InputText.displayName = 'InputText'

type InputBackgroundProps = React.ComponentProps<typeof InputBackground>
export type InputProps = Omit<
React.ComponentProps<typeof InputText>, 'size' | 'state'> &
{
React.ComponentProps<typeof InputText>,
'size' | 'state'
> & {
size?: InputBackgroundProps['size']
state?: InputBackgroundProps['state']
}

export const Input = React.forwardRef(
(
{ size = 'md', state, disabled, css, ...rest }: InputProps,
ref: React.ForwardedRef<HTMLInputElement>
) => {
export const Input: React.ForwardRefExoticComponent<InputProps> =
React.forwardRef(({ size = 'md', state, disabled, css, ...rest }, ref) => {
return (
<InputBackground size={size} disabled={disabled} state={state} css={css}>
<InputText size={size} ref={ref} disabled={disabled} {...rest} />
</InputBackground>
)
}
)
})

Input.displayName = 'Input'

0 comments on commit 3d398ff

Please sign in to comment.