Add TypeScript types to @carbon/ibm-products components

[matthewgallo]

This issue will serve to document and track our work as we provide types to the components we export. We'll start off by tracking this work into categories of effort required to add types to a particular component. Each component will receive it's own issue so we can chunk this work into bite size pieces.

Getting started
When converting the js file to tsx use git mv [file].js [file].tsx

High effort

Beta Give feedback

1. Add Typescript types to Datagrid #5175
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
2. Add Typescript types to useDatagrid #5176
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
3. Add Typescript types to useInfiniteScroll #5177
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
4. Add Typescript types to useNestedRows #5178
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
5. Add Typescript types to useSelectRows #5179
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
6. Add Typescript types to useExpandedRow #5180
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
7. Add Typescript types to useOnRowClick #5181
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
8. Add Typescript types to useSortableColumns #5182
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
9. Add Typescript types to useRowIsMouseOver #5183
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
10. Add Typescript types to useColumnCenterAlign #5184
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
11. Add Typescript types to useColumnRightAlign #5185
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
12. Add Typescript types to useDisableSelectRows #5186
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
13. Add Typescript types to useStickyColumn #5187
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
14. Add Typescript types to useActionsColumn #5188
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
15. Add Typescript types to useCustomizeColumns #5189
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
16. Add Typescript types to useSelectAllWithToggle #5190
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
17. Add Typescript types to useColumnOrder #5191
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
18. Add Typescript types to useInlineEdit #5192
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
19. Add Typescript types to useFiltering #5193
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
20. Add Typescript types to getAutoSizedColumnWidth #5194
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
21. Add Typescript types to useFilterContext #5195
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
22. Add Typescript types to MultiAddSelect #5122
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    
23. Add Typescript types to PageHeader #5121
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    
24. Add Typescript types to SidePanel #4468
    area: typescript component: SidePanel +2
    
25. Add Typescript types to SingleAddSelect #5117
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    
26. Add Typescript types to Tearsheet #4687
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
27. Add Typescript types to Coachmark #5095
    +0
    
28. Add Typescript types to Dataspreadsheet #5118
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    
29. Add Typescript types to DataspreadsheetBody #5119
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    
30. Add Typescript types to DataspreadsheetHeader #5120
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    
31. Add Typescript types to AddSelect #5123
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ +7
    

Medium effort

Beta Give feedback

1. Update generate component script to use TypeScript #4627
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript type: infrastructure 🤖 +6
2. Add Typescript types to CreateFullPage #4513
   6 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
3. Add Typescript types to CreateFullPageStep #4512
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
4. Add Typescript types to CreateTearsheet #4511
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
5. Add Typescript types to CreateTearsheetStep #4510
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
6. Add Typescript types to ExportModal #4509
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
7. Add Typescript types to ExpressiveCard #4508
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
8. Add Typescript types to ImportModal #4507
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
9. Add Typescript types to NotificationsPanel #4506
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
   
10. Add Typescript types to ProductiveCard #4505
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
11. Add Typescript types to StatusIcon #4504
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
12. Add Typescript types to TagSet #4503
    2 of 8
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
13. Add Typescript types to TearsheetNarrow #4502
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
14. Add Typescript types to UserProfileImage #4501
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
15. Add Typescript types to WebTerminal #4500
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
16. Add Typescript types to useWebTerminal #4499
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
17. Add Typescript types to EditInPlace #4498
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
18. Add Typescript types to Checklist #4497
    6 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
19. Add Typescript types to CoachmarkBeacon #4496
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
20. Add Typescript types to CoachmarkButton #4495
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
21. Add Typescript types to CoachmarkFixed #4494
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
22. Add Typescript types to CoachmarkOverlayElement #4493
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
23. Add Typescript types to CoachmarkOverlayElements #4492
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
24. Add Typescript types to CoachmarkStack #4491
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
25. Add Typescript types to Guidebanner #4490
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
26. Add Typescript types to GuidebannerElement #4489
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
27. Add Typescript types to GuidebannerElementButton #4488
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
28. Add Typescript types to GuidebannerElementLink #4487
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
29. Add Typescript types to InterstitialScreen #4486
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
30. Add Typescript types to InterstitialScreenView #4485
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
31. Add Typescript types to InterstitialScreenViewModule #4484
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
32. Add Typescript types to SearchBar #4483
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    

Low effort

Beta Give feedback

1. Add Typescript types to AboutModal #4254
   area: typescript +1
   
2. Add Typescript types to APIKeyModal #4255
   area: typescript +1
   
3. Add Typescript types to Cascade #4251
   area: typescript +1
   
4. Add Typescript types to ComboButton #4256
   area: typescript +1
   
5. Add Typescript types to ComboButtonItem #4257
   area: typescript +1
   
6. Add Typescript types to CreateModal #4258
   area: typescript +1
   
7. Add Typescript types to CreateSidePanel #4259
   area: typescript +1
   
8. Add Typescript types to CreateTearsheetDivider #4260
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
9. Add Typescript types to CreateTearsheetNarrow #4261
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
   
10. Add Typescript types to EmptyState #4262
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
11. Add Typescript types to ErrorEmptyState #4263
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
12. Add Typescript types to NoDataEmptyState #4264
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
13. Add Typescript types to NoTagsEmptyState #4265
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
14. Add Typescript types to NotFoundEmptyState #4266
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
15. Add Typescript types to NotificationsEmptyState #4267
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
16. Add Typescript types to UnauthorizedEmptyState #4268
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
17. Add Typescript types to RemoveModal #4272
    0 of 6
    area: typescript +1
    
18. Add Typescript types to Saving #4273
    area: typescript +1
19. Add Typescript types to Toolbar #4274
    6 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
20. Add Typescript types to ToolbarButton #4276
    area: typescript +1
    
21. Add Typescript types to ToolbarGroup #4277
    6 of 6
    area: typescript +1
    
22. Add Typescript types to WebTerminalContentWrapper #4278
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
23. Add Typescript types to WebTerminalProvider #4279
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
24. Add Typescript types to EditSidePanel #4280
    6 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
25. Add Typescript types to OptionsTile #4281
    0 of 6
    area: typescript +1
    
26. Add Typescript types to EditTearsheet #4282
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
27. Add Typescript types to EditTearsheetForm #4283
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
28. Add Typescript types to EditTearsheetNarrow #4284
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
29. Add Typescript types to EditFullPage #4285
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
30. Add Typescript types to EditUpdateCards #4286
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
31. Add Typescript types to InlineTip #4287
    0 of 6
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
32. Add Typescript types to InlineTipButton #4288
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
33. Add Typescript types to InlineTipLink #4289
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
34. Add Typescript types to NonLinearReading #4290
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
35. Add Typescript types to TruncatedList #4291
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
36. Add Typescript types to DelimitedList #4292
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
37. Add Typescript types to CreateInfluencer #4517
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +8
    
38. Add Typescript types to HTTPError403 #4269
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
39. Add Typescript types to HTTPError404 #4270
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
40. Add Typescript types to HTTPErrorOther #4271
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7
    
41. Add Typescript types to TagOverflowModal #5196
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: migration ➡️ area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +9
    
42. Add Typescript types to Card, CardFooter, CardHeader #5197
    adopter: automation adopter: data & ai adopter: security adopter: sustainability area: migration ➡️ area: typescript role: dev type: enhancement ✨ type: infrastructure 🤖 +9

Internal

Beta Give feedback

1. Add Typescript types to ActionSet #4609
   0 of 6
   adopter: automation adopter: data & ai adopter: security adopter: sustainability area: typescript role: dev type: infrastructure 🤖 +7