chore(project): update TypeScript to v4.8.3

.changeset/silver-walls-compete.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update types to support TypeScript v4.8.3

package.json

@@ -201,7 +201,7 @@
     "storybook-addon-turbo-build": "1.1.0",
     "styled-components": "4.4.1",
     "ts-toolbelt": "9.6.0",
-    "typescript": "4.5.4",
+    "typescript": "4.8.3",
     "webpack": "5.74.0"
   },
   "peerDependencies": {

src/AvatarPair.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import Avatar from './Avatar'
+import Avatar, {AvatarProps} from './Avatar'
 import {get} from './constants'
 import Box, {BoxProps} from './Box'
 
@@ -15,13 +15,17 @@ export type AvatarPairProps = BoxProps
 
 const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
-    if (!React.isValidElement(child)) return child
-    return i === 0 ? (
-      React.cloneElement(child, {size: 40})
-    ) : (
-      <ChildAvatar bg="canvas.default" {...child.props} size={20} />
-    )
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    if (i === 0) {
+      return React.cloneElement(child as React.ReactElement<AvatarProps>, {size: 40})
+    }
+
+    return <ChildAvatar bg="canvas.default" {...child.props} size={20} />
   })
+
   return (
     <Box position="relative" display="inline-flex" {...rest}>
       {avatars}

src/FormControl/FormControl.tsx

@@ -9,7 +9,7 @@ import TextInput from '../TextInput'
 import TextInputWithTokens from '../TextInputWithTokens'
 import {useSSRSafeId} from '../utils/ssr'
 import FormControlCaption from './_FormControlCaption'
-import FormControlLabel from './_FormControlLabel'
+import FormControlLabel, {Props as FormControlLabelProps} from './_FormControlLabel'
 import FormControlValidation from './_FormControlValidation'
 import {Slots} from './slots'
 import ValidationAnimationContainer from '../_ValidationAnimationContainer'
@@ -149,11 +149,18 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             <Box ref={ref} display="flex" alignItems={slots.LeadingVisual ? 'center' : undefined} sx={sx}>
               <Box sx={{'> input': {marginLeft: 0, marginRight: 0}}}>
                 {React.isValidElement(InputComponent) &&
-                  React.cloneElement(InputComponent, {
-                    id,
-                    disabled,
-                    ['aria-describedby']: captionId
-                  })}
+                  React.cloneElement(
+                    InputComponent as React.ReactElement<{
+                      id: string
+                      disabled: boolean
+                      ['aria-describedby']: string
+                    }>,
+                    {
+                      id,
+                      disabled,
+                      ['aria-describedby']: captionId as string
+                    }
+                  )}
                 {React.Children.toArray(children).filter(
                   child =>
                     React.isValidElement(child) &&
@@ -175,7 +182,10 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
                   {slots.LeadingVisual}
                 </Box>
               )}
-              {(React.isValidElement(slots.Label) && !slots.Label.props.visuallyHidden) || slots.Caption ? (
+              {(React.isValidElement(slots.Label) &&
+                slots.Label.type === FormControlLabel &&
+                !(slots.Label.props as FormControlLabelProps).visuallyHidden) ||
+              slots.Caption ? (
                 <Box display="flex" flexDirection="column" ml={2}>
                   {slots.Label}
                   {slots.Caption}
@@ -197,14 +207,19 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             >
               {slots.Label}
               {React.isValidElement(InputComponent) &&
-                React.cloneElement(InputComponent, {
-                  id,
-                  required,
-                  disabled,
-                  validationStatus,
-                  ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
-                  ...InputComponent.props
-                })}
+                React.cloneElement(
+                  InputComponent,
+                  Object.assign(
+                    {
+                      id,
+                      required,
+                      disabled,
+                      validationStatus,
+                      ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' ')
+                    },
+                    InputComponent.props
+                  )
+                )}
               {React.Children.toArray(children).filter(
                 child =>
                   React.isValidElement(child) &&

src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -24,23 +24,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
   margin-right: 0;
 }
 
-.c7 {
-  margin-left: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c2 {
   display: block;
   font-size: 16px;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   font-size: 14px;
   display: block;
@@ -125,17 +114,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
             value="one"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-2"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-2"
-          >
-            Choice one
-          </label>
-        </div>
+          Choice one
+        </label>
       </div>
       <div
         className="c4"
@@ -157,17 +141,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
             value="two"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-3"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-3"
-          >
-            Choice two
-          </label>
-        </div>
+          Choice two
+        </label>
       </div>
       <div
         className="c4"
@@ -189,17 +168,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
             value="three"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-4"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-4"
-          >
-            Choice three
-          </label>
-        </div>
+          Choice three
+        </label>
       </div>
     </div>
   </fieldset>

src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap

@@ -24,23 +24,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   margin-right: 0;
 }
 
-.c7 {
-  margin-left: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c2 {
   display: block;
   font-size: 16px;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   font-size: 14px;
   display: block;
@@ -125,17 +114,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             value="choiceOne"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-2"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-2"
-          >
-            Choice one
-          </label>
-        </div>
+          Choice one
+        </label>
       </div>
       <div
         className="c4"
@@ -157,17 +141,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             value="choiceTwo"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-3"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-3"
-          >
-            Choice two
-          </label>
-        </div>
+          Choice two
+        </label>
       </div>
       <div
         className="c4"
@@ -189,17 +168,12 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             value="choiceThree"
           />
         </div>
-        <div
+        <label
           className="c7"
-          display="flex"
+          htmlFor="react-aria-4"
         >
-          <label
-            className="c8"
-            htmlFor="react-aria-4"
-          >
-            Choice three
-          </label>
-        </div>
+          Choice three
+        </label>
       </div>
     </div>
   </fieldset>