@radix-ui/react-polymorphic
Advanced tools
Comparing version 0.0.2 to 0.0.3
import * as React from "react"; | ||
type NeverKeys<T> = { | ||
[P in keyof T]: T[P] extends never ? P : never; | ||
}[keyof T]; | ||
type MergeProps<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & (NeverKeys<P2> extends never ? P2 : Omit<P2, NeverKeys<P2>>); | ||
type MergeWithDOMProps<E extends React.ElementType, P = {}> = MergeProps<React.ComponentPropsWithRef<E>, P>; | ||
export interface ForwardRefExoticComponentWithAs<DefaultElement extends keyof JSX.IntrinsicElements, OwnProps | ||
type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2; | ||
type MergeProps<E, P = {}> = P & Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, P>; | ||
/** | ||
* Infers the OwnProps if E is a ForwardRefExoticComponentWithAs | ||
*/ | ||
export type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {}; | ||
/** | ||
* Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs | ||
*/ | ||
export type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never; | ||
export interface ForwardRefComponent<IntrinsicElementString, OwnProps = {} | ||
/** | ||
* Extends original type to ensure built in React types play nice | ||
* with polymorphic components still e.g. `React.ElementRef` etc. | ||
*/ | ||
> extends React.ForwardRefExoticComponent<MergeWithDOMProps<DefaultElement, OwnProps & { | ||
as?: DefaultElement; | ||
> extends React.ForwardRefExoticComponent<MergeProps<IntrinsicElementString, OwnProps & { | ||
as?: IntrinsicElementString; | ||
}>> { | ||
@@ -23,5 +28,5 @@ /** | ||
*/ | ||
<As extends keyof JSX.IntrinsicElements>(props: MergeWithDOMProps<As, OwnProps & { | ||
<As extends keyof JSX.IntrinsicElements>(props: MergeProps<As, OwnProps & { | ||
as: As; | ||
}>): JSX.Element; | ||
}>): React.ReactElement | null; | ||
/** | ||
@@ -35,27 +40,7 @@ * When passing an `as` prop as a component, use this overload. | ||
*/ | ||
<As extends React.ElementType<any>>(props: MergeWithDOMProps<As, OwnProps & { | ||
as: As; | ||
}>): JSX.Element; | ||
<As extends React.ElementType<any>, _AsWithProps = As extends React.ElementType<infer P> ? React.ElementType<P> : never>(props: MergeProps<_AsWithProps, OwnProps & { | ||
as: _AsWithProps; | ||
}>): React.ReactElement | null; | ||
} | ||
/** | ||
* Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs | ||
*/ | ||
type IntrinsicElement<E> = E extends ForwardRefExoticComponentWithAs<infer T, any> ? T : E; | ||
/** | ||
* If E is a ForwardRefExoticComponentWithAs then we know we are trying to forward to | ||
* a polymorphic component. When this happens we merge the new polymorphic's OwnProps | ||
* with the original polymorphic's OwnProps, ensuring the new props take precedence. | ||
*/ | ||
type ExtendedProps<E, OwnProps> = E extends ForwardRefExoticComponentWithAs<any, infer P> ? MergeProps<P, OwnProps> : OwnProps; | ||
/** | ||
* @example when creating a new polymorphic component | ||
* const Box = forwardRefWithAs<'div', { variant?: Variant }>() | ||
* | ||
* @example when extending an existing polymorphic component | ||
* const Flex = forwardRefWithAs<typeof Box, { direction?: FlexDirection }>() | ||
*/ | ||
export function forwardRefWithAs<E extends keyof JSX.IntrinsicElements | ForwardRefExoticComponentWithAs<any, any>, OwnProps = {}>(component: React.ForwardRefRenderFunction<React.ElementRef<IntrinsicElement<E>>, MergeProps<React.ComponentPropsWithoutRef<IntrinsicElement<E>>, ExtendedProps<E, OwnProps> & { | ||
as?: IntrinsicElement<E>; | ||
}>>): ForwardRefExoticComponentWithAs<IntrinsicElement<E>, ExtendedProps<E, OwnProps>>; | ||
//# sourceMappingURL=index.d.ts.map |
{ | ||
"name": "@radix-ui/react-polymorphic", | ||
"version": "0.0.2", | ||
"version": "0.0.3", | ||
"license": "MIT", | ||
@@ -15,6 +15,4 @@ "source": "src/index.ts", | ||
"scripts": { | ||
"build": "parcel build src/index.ts --no-cache", | ||
"clean": "rm -rf dist", | ||
"version": "yarn version", | ||
"prepublish": "yarn clean && yarn build" | ||
"prepublish": "yarn clean" | ||
}, | ||
@@ -21,0 +19,0 @@ "devDependencies": { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4464
45