Unable to pass data-* attributes to Text component in 3.9.0 Canary 18

[egucciar]

Tried emailing you back on hello@reshaped.com, but it got kicked back to me due to The response from the remote server was: 554 5.7.1 : Relay access denied , i wanted to share this issue blocking me from upgrading to the latest:

Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
  Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
    Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.ts(2322)
Text.types.d.ts(28, 5): The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Props<As>'

[blvdmitry]

Hm, can't reproduce it locally for some reason, can you try if this still happens on the latest canary?

Sorry for the typo, cy works fine too :)

[egucciar]

@blvdmitry still having this issue after upgrading :(

15:49:26  �[96mui/v2/text/Text.tsx�[0m:�[93m97�[0m:�[93m21�[0m - �[91merror�[0m�[90m TS2322: �[0mType '((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & object & { ...; }) | ((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<...>) & ... 1 more ... & { ...; }) | { ...; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26    Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26      Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
15:49:26        Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.
15:49:26  
15:49:26  �[7m97�[0m                     attributes={{
15:49:26  �[7m  �[0m �[91m                    ~~~~~~~~~~�[0m
15:49:26  
15:49:26    �[96mnode_modules/.pnpm/reshaped@3.9.0-canary.27_postcss@8.4.38_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/reshaped/dist/components/Text/Text.types.d.ts�[0m:�[93m28�[0m:�[93m5�[0m
15:49:26      �[7m28�[0m     attributes?: G.Attributes<TagName>;
15:49:26      �[7m  �[0m �[96m    ~~~~~~~~~~�[0m
15:49:26      The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Props<As>'
15:49:26  
15:49:26  �[96mui/v2/text/Text.tsx�[0m:�[93m114�[0m:�[93m13�[0m - �[91merror�[0m�[90m TS2322: �[0mType '((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & object & { ...; }) | ((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<...>) & ... 1 more ... & { ...; }) | { ...; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26    Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26      Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
15:49:26        Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.
15:49:26  
15:49:26  �[7m114�[0m             attributes={{
15:49:26  �[7m   �[0m �[91m            ~~~~~~~~~~�[0m
15:49:26  
15:49:26    �[96mnode_modules/.pnpm/reshaped@3.9.0-canary.27_postcss@8.4.38_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/reshaped/dist/components/Text/Text.types.d.ts�[0m:�[93m28�[0m:�[93m5�[0m
15:49:26      �[7m28�[0m     attributes?: G.Attributes<TagName>;
15:49:26      �[7m  �[0m �[96m    ~~~~~~~~~~�[0m
15:49:26      The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Props<As>'
15:49:26  
15:49:26  �[96mui/v2/text/Text.tsx�[0m:�[93m162�[0m:�[93m25�[0m - �[91merror�[0m�[90m TS2322: �[0mType '((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & object & { ...; }) | ((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<...>) & ... 1 more ... & { ...; }) | { ...; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26    Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26      Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
15:49:26        Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.
15:49:26  
15:49:26  �[7m162�[0m                         attributes={{
15:49:26  �[7m   �[0m �[91m                        ~~~~~~~~~~�[0m
15:49:26  
15:49:26    �[96mnode_modules/.pnpm/reshaped@3.9.0-canary.27_postcss@8.4.38_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/reshaped/dist/components/Text/Text.types.d.ts�[0m:�[93m28�[0m:�[93m5�[0m
15:49:26      �[7m28�[0m     attributes?: G.Attributes<TagName>;
15:49:26      �[7m  �[0m �[96m    ~~~~~~~~~~�[0m
15:49:26      The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Omit<Props<As>, "variant" | "weight"> & { variant?: "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | ... 7 more ... | undefined; weight?: "bold" | ... 1 more ... | undefined; "data-cy"?: string | undefined; truncatedTooltipText?: string | undefined; tooltipIfTruncated?: boolean | und...'
15:49:26  
15:49:26  
15:49:26  Found 3 errors in the same file, starting at: ui/v2/text/Text.tsx�[90m:97�[0m
15:49:26  
15:49:26  �[96mui/v2/text/Text.tsx�[0m:�[93m97�[0m:�[93m21�[0m - �[91merror�[0m�[90m TS2322: �[0mType '((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & object & { ...; }) | ((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<...>) & ... 1 more ... & { ...; }) | { ...; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26    Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26      Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
15:49:26        Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.
15:49:26  
15:49:26  �[7m97�[0m                     attributes={{
15:49:26  �[7m  �[0m �[91m                    ~~~~~~~~~~�[0m
15:49:26  
15:49:26    �[96mnode_modules/.pnpm/reshaped@3.9.0-canary.27_postcss@8.4.38_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/reshaped/dist/components/Text/Text.types.d.ts�[0m:�[93m28�[0m:�[93m5�[0m
15:49:26      �[7m28�[0m     attributes?: G.Attributes<TagName>;
15:49:26      �[7m  �[0m �[96m    ~~~~~~~~~~�[0m
15:49:26      The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Props<As>'
15:49:26  
15:49:26  �[96mui/v2/text/Text.tsx�[0m:�[93m114�[0m:�[93m13�[0m - �[91merror�[0m�[90m TS2322: �[0mType '((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & object & { ...; }) | ((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<...>) & ... 1 more ... & { ...; }) | { ...; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26    Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26      Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
15:49:26        Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.
15:49:26  
15:49:26  �[7m114�[0m             attributes={{
15:49:26  �[7m   �[0m �[91m            ~~~~~~~~~~�[0m
15:49:26  
15:49:26    �[96mnode_modules/.pnpm/reshaped@3.9.0-canary.27_postcss@8.4.38_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/reshaped/dist/components/Text/Text.types.d.ts�[0m:�[93m28�[0m:�[93m5�[0m
15:49:26      �[7m28�[0m     attributes?: G.Attributes<TagName>;
15:49:26      �[7m  �[0m �[96m    ~~~~~~~~~~�[0m
15:49:26      The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Props<As>'
15:49:26  
15:49:26  �[96mui/v2/text/Text.tsx�[0m:�[93m162�[0m:�[93m25�[0m - �[91merror�[0m�[90m TS2322: �[0mType '((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & object & { ...; }) | ((As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<...>) & ... 1 more ... & { ...; }) | { ...; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26    Type '{ "data-cy": string | undefined; }' is not assignable to type 'Attributes<As> | undefined'.
15:49:26      Type '{ "data-cy": string | undefined; }' is not assignable to type '(As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>) & Record<...> & { ...; }'.
15:49:26        Type '{ "data-cy": string | undefined; }' is not assignable to type 'As extends keyof IntrinsicElements ? IntrinsicElements[As] : HTMLAttributes<HTMLElement>'.
15:49:26  
15:49:26  �[7m162�[0m                         attributes={{
15:49:26  �[7m   �[0m �[91m                        ~~~~~~~~~~�[0m
15:49:26  
15:49:26    �[96mnode_modules/.pnpm/reshaped@3.9.0-canary.27_postcss@8.4.38_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/reshaped/dist/components/Text/Text.types.d.ts�[0m:�[93m28�[0m:�[93m5�[0m
15:49:26      �[7m28�[0m     attributes?: G.Attributes<TagName>;
15:49:26      �[7m  �[0m �[96m    ~~~~~~~~~~�[0m
15:49:26      The expected type comes from property 'attributes' which is declared here on type 'IntrinsicAttributes & Omit<Props<As>, "weight" | "variant"> & { variant?: "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | ... 7 more ... | undefined; weight?: "bold" | ... 1 more ... | undefined; "data-cy"?: string | undefined; truncatedTooltipText?: string | undefined; tooltipIfTruncated?: boolean | und...'
15:49:26  
15:49:26  
15:49:26  Found 3 errors in the same file, starting at: ui/v2/text/Text.tsx�[90m:97�[0m

[blvdmitry]

Can you try reproducing this on codesandbox? Maybe there are some changes to the component or there is a wrapper component modifying the original types?

[egucciar]

@blvdmitry still blocked from upgrading reshaped. Now View wont accept my refs. I cant repro in codesandbox bc its showing view atributes as any

[blvdmitry]

Looking at this example, the type of the state should actually be a RefObject in the state (makes me think it should just be a ref and not a state?). Otherwise the types won't match as expected:

[egucciar]

@blvdmitry can you provide a sandbox environment with the latest reshaped that actually does check types? its hard to prove anything...

[blvdmitry]

https://codesandbox.io/p/sandbox/xgxqps - I think codesanbox struggles with resolving all the types correctly but it doesn't product a typescript error and the same code in vscode/cursor shows correct attributes type on hover