From efe168e3900b6f1698bcf58f9d562fe069bf2a3e Mon Sep 17 00:00:00 2001
From: Jake Ginnivan <jake.ginnivan@wanews.com.au>
Date: Mon, 18 Nov 2019 20:34:44 +0800
Subject: [PATCH] Relaxed types for shouldForwardProp

This function needs to be able to filter a props for a generic argument of the resulting function.
---
 .changeset/cool-candles-lie.md          |  5 +++++
 .changeset/dull-carrots-enjoy.md        |  7 +++++++
 packages/is-prop-valid/types/index.d.ts |  2 +-
 packages/is-prop-valid/types/tests.ts   |  2 --
 packages/styled/types/base.d.ts         |  4 ++--
 packages/styled/types/tests-base.tsx    | 14 ++++++++++++++
 6 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/cool-candles-lie.md
 create mode 100644 .changeset/dull-carrots-enjoy.md

diff --git a/.changeset/cool-candles-lie.md b/.changeset/cool-candles-lie.md
new file mode 100644
index 0000000000..239d89e9fc
--- /dev/null
+++ b/.changeset/cool-candles-lie.md
@@ -0,0 +1,5 @@
+---
+'@emotion/is-prop-valid': minor
+---
+
+[TypeScript] Allow isPropValid to take any PropertyKey as an argument (instead of just string)
diff --git a/.changeset/dull-carrots-enjoy.md b/.changeset/dull-carrots-enjoy.md
new file mode 100644
index 0000000000..cf6ab5afb2
--- /dev/null
+++ b/.changeset/dull-carrots-enjoy.md
@@ -0,0 +1,7 @@
+---
+'@emotion/styled': patch
+---
+
+Relaxed types for shouldForwardProp
+
+This function needs to be able to filter a props for a generic argument of the resulting function.
diff --git a/packages/is-prop-valid/types/index.d.ts b/packages/is-prop-valid/types/index.d.ts
index 91affa143f..2ca137567c 100644
--- a/packages/is-prop-valid/types/index.d.ts
+++ b/packages/is-prop-valid/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.1
 
-declare function isPropValid(string: string): boolean
+declare function isPropValid(string: PropertyKey): boolean
 export default isPropValid
diff --git a/packages/is-prop-valid/types/tests.ts b/packages/is-prop-valid/types/tests.ts
index 3ae651e8de..538c299b96 100644
--- a/packages/is-prop-valid/types/tests.ts
+++ b/packages/is-prop-valid/types/tests.ts
@@ -5,8 +5,6 @@ isPropValid('ref')
 // $ExpectError
 isPropValid()
 // $ExpectError
-isPropValid(5)
-// $ExpectError
 isPropValid({})
 // $ExpectError
 isPropValid('ref', 'def')
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index 04415a3b40..542f525221 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -31,13 +31,13 @@ export interface FilteringStyledOptions<
   ForwardedProps extends keyof Props = keyof Props
 > {
   label?: string
-  shouldForwardProp?(propName: keyof Props): propName is ForwardedProps
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
   target?: string
 }
 
 export interface StyledOptions<Props> {
   label?: string
-  shouldForwardProp?(propName: keyof Props): boolean
+  shouldForwardProp?(propName: PropertyKey): boolean
   target?: string
 }
 
diff --git a/packages/styled/types/tests-base.tsx b/packages/styled/types/tests-base.tsx
index edfebb2739..63ce0f173c 100644
--- a/packages/styled/types/tests-base.tsx
+++ b/packages/styled/types/tests-base.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import styled from '@emotion/styled/base'
+import isPropValid from '@emotion/is-prop-valid'
 
 // tslint:disable-next-line: interface-over-type-literal
 type ReactClassProps0 = {
@@ -98,6 +99,19 @@ const Canvas1 = styled('canvas', {
 ;<Canvas0 id="id-should-be-filtered" />
 ;<Canvas1 />
 
+const styledWithForwardedExtraProp = styled('div', {
+  // this used to work, but now complains because 'priority' is not a prop of 'div'
+  shouldForwardProp: prop => prop !== 'priority' && isPropValid(prop)
+})
+
+type Priority = 'info' | 'warning' | 'error'
+
+const Alert = styledWithForwardedExtraProp<{
+  priority?: Priority
+}>(({ priority, theme }) => ({
+  backgroundColor: theme.colors[priority || 'info']
+}))
+
 interface PrimaryProps {
   readonly primary: string
 }