feat: add automatic transform for jsx runtime (#5973)

Author: joshblack

.changeset/wise-gifts-see.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update components to use jsx from react/jsx-runtime instead of createElement

packages/react/babel.config.js

@@ -14,7 +14,16 @@ const sharedPlugins = [
 ]
 
 function makePresets(moduleValue) {
-  return ['@babel/preset-typescript', ['@babel/preset-react', {modules: moduleValue}]]
+  return [
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-react',
+      {
+        modules: moduleValue,
+        runtime: 'automatic',
+      },
+    ],
+  ]
 }
 
 module.exports = {

packages/react/rollup.config.mjs

@@ -78,6 +78,7 @@ const baseConfig = {
           '@babel/preset-react',
           {
             modules: false,
+            runtime: 'automatic',
           },
         ],
       ],

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -364,10 +364,13 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
                   text,
                   leadingVisual: LeadingVisual,
                   trailingVisual: TrailingVisual,
+                  // @ts-expect-error this is defined in the items above but is
+                  // missing in TS
+                  key,
                   ...itemProps
                 } = item
                 return (
-                  <ActionList.Item key={id} onSelect={() => onAction(item)} {...itemProps} id={id} data-id={id}>
+                  <ActionList.Item key={key ?? id} onSelect={() => onAction(item)} {...itemProps} id={id} data-id={id}>
                     {LeadingVisual && (
                       <ActionList.LeadingVisual>
                         {isElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -181,15 +181,15 @@ export function FilteredActionList({
                   <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
                     {group.header?.title ? group.header.title : `Group ${group.groupId}`}
                   </ActionList.GroupHeading>
-                  {getItemListForEachGroup(group.groupId).map((item, index) => {
-                    const key = item.key ?? item.id?.toString() ?? index.toString()
+                  {getItemListForEachGroup(group.groupId).map(({key: itemKey, ...item}, index) => {
+                    const key = itemKey ?? item.id?.toString() ?? index.toString()
                     return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
                   })}
                 </ActionList.Group>
               )
             })
-          : items.map((item, index) => {
-              const key = item.key ?? item.id?.toString() ?? index.toString()
+          : items.map(({key: itemKey, ...item}, index) => {
+              const key = itemKey ?? item.id?.toString() ?? index.toString()
               return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
             })}
       </ActionList>

packages/react/src/__tests__/Pagination/Pagination.test.tsx

@@ -31,7 +31,7 @@ describe('Pagination', () => {
       <Pagination
         pageCount={10}
         currentPage={1}
-        renderPage={({number, ...props}) => <ReactRouterLikeLink to={`#${number}`} {...props} />}
+        renderPage={({key, number, ...props}) => <ReactRouterLikeLink key={key} to={`#${number}`} {...props} />}
       />,
     )