Support inference extra props from as props

Author: gtkatakura

package.json

@@ -51,6 +51,7 @@
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
     "reakit": "^1.1.2",
+    "reakit-utils": "^0.13.1",
     "theme-ui": "^0.3.1",
     "ts-loader": "^8.0.1",
     "tsdx": "^0.13.2",

src/Button.stories.tsx

@@ -59,9 +59,9 @@ export function TheAsProp() {
         },
       }}
     >
-      <Checkbox {...checkbox} as={Button}>
+      <Button as={Checkbox} state={checkbox.state} setState={checkbox.setState}>
         {checkbox.state ? '😄 Happy' : '😞 Sad'}
-      </Checkbox>
+      </Button>
     </ThemeProvider>
   )
 }

src/index.tsx

@@ -1,15 +1,29 @@
-import React, { forwardRef, Ref } from 'react'
+import React, { forwardRef, Ref, PropsWithoutRef } from 'react'
 import { Button as A11yButton, ButtonProps as A11yProps } from 'reakit'
+import { PropsWithAs, As } from 'reakit-utils/types'
 import {
   Button as ThemeAwareButton,
   ButtonProps as ThemeAwareProps,
 } from 'theme-ui'
 
-type Props = A11yProps & ThemeAwareProps
+type Component<DefaultAs extends As, DefaultProps> = {
+  <T extends As = DefaultAs>(
+    props: PropsWithAs<PropsWithoutRef<DefaultProps>, T>
+  ): JSX.Element
+}
+
+type ButtonProps = A11yProps & { as?: As }
 
-function Button({ as, ...props }: Props, ref: Ref<HTMLButtonElement>) {
-  return <A11yButton {...props} ref={ref} as={as ?? ThemeAwareButton} />
+const Button = (
+  { as = ThemeAwareButton, ...props }: ButtonProps,
+  ref: Ref<As>
+) => {
+  return <A11yButton ref={ref} as={as} {...props} />
 }
 
-export { A11yProps, ThemeAwareProps }
-export default forwardRef(Button)
+export { ButtonProps, A11yProps, ThemeAwareProps }
+
+export default forwardRef(Button) as Component<
+  typeof ThemeAwareButton,
+  A11yProps
+>