Fixing types for props with ref

system-ui · Oct 15, 2020 · 9f58967 · 9f58967
1 parent af57d4c
commit 9f58967
Show file tree

Hide file tree

Showing 3 changed files with 416 additions and 19 deletions.
diff --git a/packages/components/index.d.ts b/packages/components/index.d.ts
@@ -24,7 +24,7 @@ export interface BoxOwnProps extends SpaceProps, ColorProps {
   css?: InterpolationWithTheme<any>
 }
 export interface BoxProps
-  extends Assign<React.ComponentProps<'div'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'div'>, BoxOwnProps> {}
 /**
  * Use the Box component as a layout primitive to add margin, padding, and colors to content.
  * @see https://theme-ui.com/components/box
@@ -101,7 +101,7 @@ export interface HeadingProps
 export const Heading: ForwardRef<HTMLHeadingElement, HeadingProps>
 
 export interface ImageProps
-  extends Assign<React.ComponentProps<'img'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'img'>, BoxOwnProps> {}
 /**
  * Image style variants can be defined in the theme.images object.
  * @see https://theme-ui.com/components/image/
@@ -117,7 +117,7 @@ export type CardProps = BoxProps
 export const Card: ForwardRef<HTMLDivElement, CardProps>
 
 export interface LabelProps
-  extends Assign<React.ComponentProps<'label'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'label'>, BoxOwnProps> {}
 /**
  * Label variants can be defined in `theme.forms`
  * and the component uses the `theme.forms.label` variant by default.
@@ -126,7 +126,7 @@ export interface LabelProps
 export const Label: ForwardRef<HTMLLabelElement, LabelProps>
 
 export interface InputProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Input variants can be defined in `theme.forms`
  * and the component uses the `theme.forms.input` variant by default.
@@ -135,7 +135,7 @@ export interface InputProps
 export const Input: ForwardRef<HTMLInputElement, InputProps>
 
 export interface SelectProps
-  extends Assign<React.ComponentProps<'select'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'select'>, BoxOwnProps> {}
 /**
  * Select variants can be defined in `theme.forms`
  * and the component uses the `theme.forms.select` variant by default.
@@ -144,7 +144,7 @@ export interface SelectProps
 export const Select: ForwardRef<HTMLSelectElement, SelectProps>
 
 export interface TextareaProps
-  extends Assign<React.ComponentProps<'textarea'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'textarea'>, BoxOwnProps> {}
 /**
  * Form textarea component
  *
@@ -155,7 +155,7 @@ export interface TextareaProps
 export const Textarea: ForwardRef<HTMLTextAreaElement, TextareaProps>
 
 export interface RadioProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Form radio input component
  *
@@ -166,7 +166,7 @@ export interface RadioProps
 export const Radio: ForwardRef<HTMLInputElement, RadioProps>
 
 export interface CheckboxProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Form checkbox input component
  *
@@ -177,7 +177,7 @@ export interface CheckboxProps
 export const Checkbox: ForwardRef<HTMLInputElement, CheckboxProps>
 
 export interface SliderProps
-  extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
 /**
  * Range input element
  *
@@ -198,7 +198,7 @@ export interface FieldOwnProps extends MarginProps {
   name: string
 }
 export type FieldProps<T extends React.ElementType> = FieldOwnProps &
-  Omit<React.ComponentProps<T>, 'as' | keyof FieldOwnProps> & {
+  Omit<React.ComponentPropsWithRef<T>, 'as' | keyof FieldOwnProps> & {
     /**
      * form control to render, default Input
      */
@@ -212,18 +212,20 @@ export function Field<
 >(props: FieldProps<T>): JSX.Element
 
 export interface ProgressProps
-  extends Assign<React.ComponentProps<'progress'>, BoxOwnProps> {}
+  extends Assign<React.ComponentPropsWithRef<'progress'>, BoxOwnProps> {}
 /**
  * @see https://theme-ui.com/components/progress/
  */
 export const Progress: ForwardRef<HTMLProgressElement, ProgressProps>
 
 export interface DonutProps
-  extends Omit<
-      React.SVGProps<SVGSVGElement>,
+  extends Assign<
+    Omit<
+      React.ComponentPropsWithRef<'svg'>,
       'opacity' | 'color' | 'css' | 'sx' | 'max' | 'min'
     >,
-    BoxOwnProps {
+    BoxOwnProps
+  > {
   value: number
   min?: number
   max?: number
@@ -237,11 +239,13 @@ export interface DonutProps
 export const Donut: ForwardRef<SVGSVGElement, DonutProps>
 
 export interface SpinnerProps
-  extends Omit<
-      React.SVGProps<SVGSVGElement>,
+  extends Assign<
+    Omit<
+      React.ComponentPropsWithRef<'svg'>,
       'opacity' | 'color' | 'css' | 'sx'
     >,
-    BoxOwnProps {
+    BoxOwnProps
+  > {
   size?: number | string
 }
 export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps>
@@ -281,7 +285,18 @@ export type DividerProps = BoxProps
  */
 export const Divider: ForwardRef<HTMLDivElement, DividerProps>
 
-export interface EmbedProps extends BoxProps {
+/**
+ * EmbedProps are a bit tricky. It is a composite component that uses a <Box />
+ * as the parent element which is what `props` are spread onto. The actual `ref`
+ * however is a nested <Box as="iframe" /> element. To support these props we
+ * need to use an intersection of the intrinsic attributes of HTMLDivElement,
+ * with the ref attributes of HTMLIFrameElement.
+ */
+export interface EmbedProps
+  extends Assign<
+    React.ComponentProps<'div'> & React.RefAttributes<HTMLIFrameElement>,
+    BoxOwnProps
+  > {
   ratio?: number
   src?: React.IframeHTMLAttributes<any>['src']
   frameBorder?: React.IframeHTMLAttributes<any>['frameBorder']