Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve typings [v3] #4432

Closed
layershifter opened this issue Jul 9, 2023 · 2 comments · Fixed by #4447
Closed

Improve typings [v3] #4432

layershifter opened this issue Jul 9, 2023 · 2 comments · Fixed by #4447

Comments

@layershifter
Copy link
Member

Bug Report

Steps

While v3 supports native ref forwarding, typings should be updated to reflect this.

Expected Result

Typings work as expected.

Actual Result

TS2769: No overload matches this call.   Overload 1 of 2, '(props: ButtonProps | Readonly<ButtonProps>): Button', gave the following error.     Type 'MutableRefObject<HTMLButtonElement | undefined>' is not assignable to type 'LegacyRef<Button> | undefined'.       Type 'MutableRefObject<HTMLButtonElement | undefined>' is not assignable to type 'RefObject<Button>'.
Parameter 'el' implicitly has an 'any' type, but a better type may be inferred from usage.ts(7044)

Version

3.0.0-beta.0

Testcase

https://codesandbox.io/s/semantic-ui-example-forked-9spw8n?file=/example.tsx

@layershifter
Copy link
Member Author

Actions

  • Add new type ForwardRefComponent

    // src/generic.d.ts
    
    + type ForwardRefComponent<P, T> = React.ForwardRefExoticComponent<P & React.RefAttributes<T>>
  • Migrate every component to use this type (Portal is exception) (examples below)

    // src/elements/Button/Button.d.ts
    
    import {
    + ForwardRefComponent,
      SemanticCOLORS,
      SemanticFLOATS,
      SemanticShorthandContent,
      SemanticShorthandItem,
      SemanticSIZES,
    } from '../../generic'
    
    // ---
    
    -declare class Button extends React.Component<ButtonProps> {
    -  static Content: typeof ButtonContent
    -  static Group: typeof ButtonGroup
    -  static Or: typeof ButtonOr
    -
    -  focus: (options?: FocusOptions) => void
    -}
    +declare const Button: ForwardRefComponent<ButtonProps, HTMLButtonElement> & {
    +  Content: typeof ButtonContent
    +  Group: typeof ButtonGroup
    +  Or: typeof ButtonOr
    +}
    // src/elements/Container/Container.d.ts
    -import { SemanticShorthandContent, SemanticTEXTALIGNMENTS } from '../../generic'
    +import { SemanticShorthandContent, SemanticTEXTALIGNMENTS, ForwardRefComponent } from '../../generic'
    
    // ---
    
    -declare const Container: React.FC<ContainerProps>
    +declare const Container: ForwardRefComponent<ContainerProps, HTMLDivElement>
  • update conformance tests [description TBD]

@layershifter
Copy link
Member Author

Released in 3.0.0-beta.2 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant