feat(ratio-ui): type the Input family props — typed InputProps, deprecated index signature - #105
Conversation
|
Storybook preview: https://preview-105.ratio-ui.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR improves TypeScript ergonomics for the Input component family by making InputProps / InputFieldProps inherit standard DOM input attributes (enabling better inference/autocomplete under strict), while keeping the index-signature escape hatch for 2.x compatibility and updating TextField to React 19 “ref as a prop”.
Changes:
- Update
InputProps/InputFieldPropsto extendInputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>and deprecate the[x: string]: anyindex signature. - Refactor
TextFieldfromforwardRefto a plain function component that acceptsrefas a normal prop (React 19). - Fix Storybook
WithErrorstoryerrorsshape to match the typed contract.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ratio-ui/src/forms/Input/TextField.tsx | Refactors TextField implementation to accept ref as a prop and preserve typing across the index signature. |
| packages/ratio-ui/src/forms/Input/TextField.stories.tsx | Aligns story errors prop shape with the typed InputFieldProps.errors contract. |
| packages/ratio-ui/src/forms/Input/InputProps.ts | Introduces typed DOM attribute inheritance for the input family and deprecates the index signature. |
| .changeset/typed-input-family-props.md | Documents the minor-version release notes for the typing/ref changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } else if (forwardedRef && 'current' in forwardedRef) { | ||
| (forwardedRef as React.RefObject< | ||
| HTMLInputElement | HTMLTextAreaElement | null | ||
| >).current = element; | ||
| } |
There was a problem hiding this comment.
@copilot isnt MutableRefObject deprecated?
There was a problem hiding this comment.
Correct — MutableRefObject is deprecated in React 19. Fixed by casting to a plain writable object type { current: HTMLInputElement | HTMLTextAreaElement | null } instead. This avoids both the deprecated MutableRefObject and the readonly current on React.RefObject. Committed in 4e6cc7e.
46408eb to
a8a119b
Compare
…cated index signature InputProps/InputFieldProps now extend InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, so every DOM prop (incl. onChange) is declared, autocompletes, and infers under strict. The [x: string]: any escape hatch stays for 2.x but is @deprecated for removal in the next major. TextField moves from forwardRef to a React 19 ref prop — forwardRef's PropsWithoutRef collapses named props into the index signature, degrading every prop to any. Public contract unchanged (ref?: Ref<HTMLElement>). Also fixes the WithError story's errors shape, surfaced by the new types.
a8a119b to
64dccf9
Compare
What
InputProps/InputFieldPropsnow extendInputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, so every DOM prop — includingonChange— is declared, autocompletes, and infers understrictwithout hand annotations. Requested by Ignis (onlyTextFieldwas still affected;Input/Checkbox/PhoneInputwere already typed).[x: string]: anyescape hatch stays in 2.x for backwards compatibility, but is@deprecatedfor removal in the next major (that's when prop typos stop compiling).ChangeEvent<HTMLTextAreaElement>) remain assignable — no new errors for existing consumers.TextFieldmoves fromforwardRefto a React 19 ref prop. This is load-bearing, not cosmetic:forwardRef'sPropsWithoutRefcollapses named props into the index signature, degrading every prop toany. Public contract unchanged (ref?: Ref<HTMLElement>).WithErrorstory'serrorsshape — a real bug surfaced by the new types.Verification
tscclean for the package, plus a consumer-style type test: unannotatedonChangeinfers (no TS7006), narrow annotations still compile, undeclared props still compile in 2.x..d.tsverified; changeset included (minor).🤖 Generated with Claude Code