v27.0.0 breaks TypeScript typings

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)

1. 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

[jfuchs]

The fix is now published in 29.1.1. Thank you for your patience.

[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.