v27.0.0 breaks TypeScript typings

[hehex9]

Describe the bug

1. some components (Button*/Dialog/TextInput/FilterList/...) have incorrect type definitions, and ts keeps complaining:

Property 'css' is missing in type '{}' but required in type 'Pick<TextInputInternalProps, "form" | "p" | "slot" | "style" | "title" | "pattern" | "children" | "type" | "theme" | "key" | "defaultChecked" | "defaultValue" | ... 317 more ... | "icon">'.ts(2741)

2. callbacks like onChange/onKeyPress in TextInput are not giving us the right types, it will cause an error like:

Parameter 'e' implicitly has an 'any' type.ts(7006)

vscode shows the onChange's type definition is:

onChange?: (((event: React.FormEvent<HTMLSpanElement>) => void) & ((event: React.ChangeEvent<HTMLInputElement>) => void)) | undefined

which is not accurate

To Reproduce
codesanbox

Expected behavior
no error

Screenshots

Additional context
v26 was fine

[colebemis]

Thanks for the bug report and clear reproduction, @hehex9! We'll investigate this week.

[colebemis]

We investigated this a bit last Friday and didn't find any solutions. Open to suggestions from the community :)

It seems strange that we're not seeing these TypeScript errors in any of the internal projects using Primer React 🤔

[hehex9]

we're not seeing these TypeScript errors in any of the internal projects

That's weird, since it's pretty easy to reproduce in codesandbox i think :(

I'll look deeper into it when I have time, would you mind sharing your attempts here? Thanks

[velocity23]

Having issues as well, having to @ts-ignore for TextInput

[yareyaredesuyo]

Maybe related to using ComponentProps?
I think there is no need to use it (Easy way, but this is a bit tricky for getting props), just declare type and export it.

Refactor like this (using Box):

before

const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp>`
 ${COMMON}
 ${FLEX}
 ${LAYOUT}
 ${sx};
`

export type BoxProps = ComponentProps<typeof Box>

after

export type BoxProps = SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp 
(and add some dom related props like `React.InputHTMLAttributes<HTMLSpanElement>`)

const Box = styled.div<BoxProps>`
 ${COMMON}
 ${FLEX}
 ${LAYOUT}
 ${sx};
`

Related: https://stackoverflow.com/questions/64054467/infer-prop-interface-from-styled-component

And I tested TextInput.tsx with storybook, but got no type errors. So it is not the problem of ComponentProps...🤔?

But compared to issues screenshots, there looks attribution size difference (above screenshot tells ...318 more but my screenshots tells ...34 more attribution).

What causes this difference...🤔?

[geistinme]

Having the same error after bootstrapping a cra with template typescript and adding @primer-components

App.tsx looks like:

import React from "react";
import { ThemeProvider, Button } from "@primer/components";

// import styles from "./App.module.css";

export const App: React.FC = () => {
 return (
 <ThemeProvider>
 <p>
 Edit <code>src/App.tsx</code> and save to reload.
 </p>
 <Button>
 <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
 Learn React
 </a>
 </Button>
 </ThemeProvider>
 );
};

export default App;

Error only disappears after adding css prop to <Button css />

[dmarcey]

It seems like the reason that this works in @primer/components is because @emotion/core is getting pulled in via a dependency on @storybook/react. This dependency will update the react.Attributes interface to have:

declare module 'react' {
 interface DOMAttributes<T> {
 css?: InterpolationWithTheme<any>
 }
}

https://github.com/emotion-js/emotion/blob/v10/packages/core/types/index.d.ts#L82-L86

As a workaround, I think that adding something like:

declare module "react" {
 interface Attributes {
 css?: never;
 }
}

should work for most projects - especially ones that don't have the styled-components babel plugin which is needed for the css prop anyways.

Here is a code-sandbox which shows the fix: https://codesandbox.io/s/jolly-meadow-u4o74

Without the extra declare module "react", we get a compiler error, but with it the app builds as expected.

It's possible that something can be done at the library level to address this, but in the meantime, this should at least be a better solution that adding ts-ignores or css="" to work around the issue.

[MichalKowalczyk]

@dmarcey
Your solution looks nice, but when I'm trying implement it, I'm getting TypeScript error on every JSX elements:

JSX element class does not support attributes because it does not have a 'props' property.

[Mikescops]

Hello folks, any progress on this issue? This prevent updating to the latest versions when using typescript. Let us know if we can help :)

[jfuchs]

Hey @Mikescops, it's on our "up next" list, but work hasn't begun and I don't have a time estimate. Were you able to try the workaround described above?