diff --git a/.changeset/cool-candles-lie.md b/.changeset/cool-candles-lie.md new file mode 100644 index 000000000..43d12f33b --- /dev/null +++ b/.changeset/cool-candles-lie.md @@ -0,0 +1,5 @@ +--- +'@emotion/is-prop-valid': minor +--- + +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 000000000..fc3827e25 --- /dev/null +++ b/.changeset/dull-carrots-enjoy.md @@ -0,0 +1,6 @@ +--- +'@emotion/styled': patch +--- + +Relaxed types for `shouldForwardProp` as it needs to be able to filter 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 91affa143..2ca137567 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 // 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 3ae651e8d..538c299b9 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 09e88a7d9..92fe808fb 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 { 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 edfebb273..1f7ec293d 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,18 @@ const Canvas1 = styled('canvas', { ; ; +const styledWithForwardedExtraProp = styled('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 }