Socket
Socket
Sign inDemoInstall

@leafygreen-ui/polymorphic

Package Overview
Dependencies
Maintainers
6
Versions
27
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/polymorphic - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/utils/Polymorphic.utils.d.ts
dist/utils/Polymorphic.utils.d.ts.map
dist/utils/React18ChildlessComponentType.d.ts
dist/utils/React18ChildlessComponentType.d.ts.map
src/Example/types.spec.tsx
src/utils/Polymorphic.utils.ts
src/utils/React18ChildlessComponentType.tsx

7

CHANGELOG.md
# @leafygreen-ui/polymorphic
## 1.2.0
### Minor Changes
- b9841decc: - Improves support for `InferredPolymorphic` when using anchor-like components (e.g. NextJS Link)
- Exports `PropsOf` utility to get the resolved type of a Polymorphic component
## 1.1.1

@@ -4,0 +11,0 @@

2

dist/esm/index.js

@@ -1,2 +0,2 @@

import r,{forwardRef as n}from"react";function e(){return e=Object.assign||function(r){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t])}return r},e.apply(this,arguments)}function t(r,n){if(null==r)return{};var e,t,o=function(r,n){if(null==r)return{};var e,t,o={},u=Object.keys(r);for(t=0;t<u.length;t++)e=u[t],n.indexOf(e)>=0||(o[e]=r[e]);return o}(r,n);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(r);for(t=0;t<u.length;t++)e=u[t],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}var o=function(n){return r.useRef(null)};function u(r){var n=function(r){return r||"div"}(r);return{Component:n,ref:o()}}var i=["as","children"],l=function(n,o){var l=n.as,a=n.children,f=t(n,i),c=u(l).Component;return r.createElement(c,e({},f,{ref:o}),a)},a=r.forwardRef(l);a.displayName="Polymorph";var f=function(r,e){var t,o=1===r.length?r:n(r);return o.displayName=null!==(t=null!=e?e:r.displayName)&&void 0!==t?t:"PolymorphicComponent",o},c=function(r,n){return f(r,n)};function p(r,n){return r=function(r,n){return r||(r="string"==typeof(null==n?void 0:n.href)?"a":"div"),r}(r,n),u(r)}export{c as InferredPolymorphic,a as Polymorph,f as Polymorphic,p as useInferredPolymorphic,u as usePolymorphic,o as usePolymorphicRef};
import r,{forwardRef as n}from"react";var e=function(n,e){var t,o;return(o=1===n.length?n:r.forwardRef(n)).displayName=null!==(t=null!=e?e:n.displayName)&&void 0!==t?t:"PolymorphicComponent",o},t=function(n){return r.useRef(null)};function o(r){var n=function(r){return r||"div"}(r);return{Component:n,ref:t()}}function l(r,n,e){return r=function(r,n,e){var t;return e=null!==(t=e)&&void 0!==t?t:"div",r||("string"==typeof(null==n?void 0:n.href)?"a":e)}(r,n,e),o(r)}function a(){return a=Object.assign||function(r){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t])}return r},a.apply(this,arguments)}function i(r,n){if(null==r)return{};var e,t,o=function(r,n){if(null==r)return{};var e,t,o={},l=Object.keys(r);for(t=0;t<l.length;t++)e=l[t],n.indexOf(e)>=0||(o[e]=r[e]);return o}(r,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(r);for(t=0;t<l.length;t++)e=l[t],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}var u=["as","children"],f=function(n,e){var t=n.as,l=n.children,f=i(n,u),c=o(t).Component;return r.createElement(c,a({},f,{ref:e}),l)},c=r.forwardRef(f);c.displayName="Polymorph";var p=function(r,e){var t,o=1===r.length?r:n(r);return o.displayName=null!==(t=null!=e?e:r.displayName)&&void 0!==t?t:"PolymorphicComponent",o};export{e as InferredPolymorphic,c as Polymorph,p as Polymorphic,l as useInferredPolymorphic,o as usePolymorphic,t as usePolymorphicRef};
//# sourceMappingURL=index.js.map

3

dist/index.d.ts

@@ -1,3 +0,4 @@

export { InferredPolymorphic, type InferredPolymorphicComponentType, type InferredPolymorphicProps, useInferredPolymorphic, } from './InferredPolymorphic';
export { InferredPolymorphic, type InferredPolymorphicComponentType, type InferredPolymorphicProps, type InferredPolymorphicPropsWithRef, useInferredPolymorphic, } from './InferredPolymorphic';
export { Polymorph, Polymorphic, type PolymorphicAs, type PolymorphicComponentType, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, usePolymorphic, usePolymorphicRef, } from './Polymorphic';
export { type LoosePolymorphicProps, type PropsOf, } from './utils/Polymorphic.utils';
//# sourceMappingURL=index.d.ts.map

2

dist/index.js

@@ -1,2 +0,2 @@

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/polymorphic"]={},e.React)}(this,(function(e,r){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(r);function o(){return o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},o.apply(this,arguments)}function f(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},f=Object.keys(e);for(t=0;t<f.length;t++)n=f[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(e);for(t=0;t<f.length;t++)n=f[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=function(e){return t.default.useRef(null)};function i(e){var r=function(e){return e||"div"}(e);return{Component:r,ref:u()}}var l=["as","children"],a=function(e,r){var n=e.as,u=e.children,a=f(e,l),c=i(n).Component;return t.default.createElement(c,o({},a,{ref:r}),u)},c=t.default.forwardRef(a);c.displayName="Polymorph";var p=function(e,n){var t,o=1===e.length?e:r.forwardRef(e);return o.displayName=null!==(t=null!=n?n:e.displayName)&&void 0!==t?t:"PolymorphicComponent",o};e.InferredPolymorphic=function(e,r){return p(e,r)},e.Polymorph=c,e.Polymorphic=p,e.useInferredPolymorphic=function(e,r){return e=function(e,r){return e||(e="string"==typeof(null==r?void 0:r.href)?"a":"div"),e}(e,r),i(e)},e.usePolymorphic=i,e.usePolymorphicRef=u,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/polymorphic"]={},e.React)}(this,(function(e,r){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(r),o=function(e){return t.default.useRef(null)};function l(e){var r=function(e){return e||"div"}(e);return{Component:r,ref:o()}}function i(){return i=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},i.apply(this,arguments)}function u(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},l=Object.keys(e);for(t=0;t<l.length;t++)n=l[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)n=l[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var f=["as","children"],a=function(e,r){var n=e.as,o=e.children,a=u(e,f),c=l(n).Component;return t.default.createElement(c,i({},a,{ref:r}),o)},c=t.default.forwardRef(a);c.displayName="Polymorph";e.InferredPolymorphic=function(e,r){var n,o;return(o=1===e.length?e:t.default.forwardRef(e)).displayName=null!==(n=null!=r?r:e.displayName)&&void 0!==n?n:"PolymorphicComponent",o},e.Polymorph=c,e.Polymorphic=function(e,n){var t,o=1===e.length?e:r.forwardRef(e);return o.displayName=null!==(t=null!=n?n:e.displayName)&&void 0!==t?t:"PolymorphicComponent",o},e.useInferredPolymorphic=function(e,r,n){return e=function(e,r,n){var t;return n=null!==(t=n)&&void 0!==t?t:"div",e||("string"==typeof(null==r?void 0:r.href)?"a":n)}(e,r,n),l(e)},e.usePolymorphic=l,e.usePolymorphicRef=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.js.map

2

dist/InferredPolymorphic/index.d.ts
export { InferredPolymorphic } from './InferredPolymorphic';
export type { InferredPolymorphicComponentType, InferredPolymorphicProps, } from './InferredPolymorphic.types';
export type { InferredPolymorphicComponentType, InferredPolymorphicProps, InferredPolymorphicPropsWithRef, } from './InferredPolymorphic.types';
export { useInferredPolymorphic } from './useInferredPolymorphic';
//# sourceMappingURL=index.d.ts.map

5

dist/InferredPolymorphic/InferredPolymorphic.d.ts
import { PolymorphicAs } from '../Polymorphic';
import { PolymorphicComponentType, PolymorphicRenderFunction } from '../Polymorphic/Polymorphic.types';
import { InferredPolymorphicProps } from './InferredPolymorphic.types';
import { InferredPolymorphicComponentType, InferredPolymorphicRenderFunction } from './InferredPolymorphic.types';
/**

@@ -10,3 +9,3 @@ * Inferred copy of the {@link Polymorphic} factory function.

*/
export declare const InferredPolymorphic: <XP extends object = {}, DefaultAs extends PolymorphicAs = PolymorphicAs>(render: PolymorphicRenderFunction<XP, DefaultAs>, displayName?: string | undefined) => PolymorphicComponentType<InferredPolymorphicProps<XP>, DefaultAs>;
export declare const InferredPolymorphic: <XP extends object = {}, DefaultAs extends PolymorphicAs = PolymorphicAs>(render: InferredPolymorphicRenderFunction<XP, DefaultAs>, displayName?: string | undefined) => InferredPolymorphicComponentType<XP, DefaultAs>;
//# sourceMappingURL=InferredPolymorphic.d.ts.map

65

dist/InferredPolymorphic/InferredPolymorphic.types.d.ts

@@ -1,14 +0,67 @@

import { AnchorProps, PolymorphicAs, PolymorphicComponentType } from '../Polymorphic/Polymorphic.types';
import { PropsWithChildren, ReactElement, RefAttributes, WeakValidationMap } from 'react';
import { AsProp, InheritedProps, PolymorphicAs } from '../Polymorphic/Polymorphic.types';
import { NodeUrlLike } from '../utils/Polymorphic.utils';
import { React18ChildlessComponentType } from '../utils/React18ChildlessComponentType';
import { PolymorphicRef } from '..';
/** Either an anchor tag, or a component that accepts an `href` */
export declare type AnchorLike = 'a' | React18ChildlessComponentType<{
href: string;
}> | React18ChildlessComponentType<{
href: NodeUrlLike;
}>;
/**
* Wrapping props in this type ensures that if `href` is defined,
* the `as` type is set to `'a'`, and all anchor props are accepted
* the `as` type can only be `AnchorLike`, and all anchor props are accepted
*/
export declare type InferredPolymorphicProps<P = {}> = (P & {
export declare type AnchorLikeProps<T extends AnchorLike | undefined, P = {}> = PropsWithChildren<{
href: string | NodeUrlLike;
as?: T extends AnchorLike ? T : 'a';
} & P>;
/**
* If `href` is provided to the compomnent as a prop, but `as` is not
* then we infer that the `as` prop is `a`, and inherit anchor props.
* Otherwise `href` is invalid, and we treat the `as` prop as usual
*/
export declare type InferredProps<T extends PolymorphicAs, XP = {}> = PropsWithChildren<XP & (({
href: string;
as?: 'a';
} & AnchorProps) | P;
} & InheritedProps<'a', XP>) | (({
href?: never;
} & AsProp<T>) & InheritedProps<T, XP>))>;
/**
* An extension of `PolymorphicComponentType` that wraps additional props in `InferredPolymorphicProps`
* Inferred extension of {@link PolymorphicProps}
*
* If `T` is an anchor, or undefined, then we explicitly add an `href`
*
* else if T is something else and href is defined, we force `as` to be 'a',
* otherwise, href is `never`.
*
* Note: It's a known issue that passing a component with no props (`() => <></>`)
* as the `as` prop will be improperly flagged as `AnchorLike`.
* We have decided not to add additional type complexity to address this minor edge case.
*/
export declare type InferredPolymorphicComponentType<XP = {}, DefaultAs extends PolymorphicAs = PolymorphicAs> = PolymorphicComponentType<InferredPolymorphicProps<XP>, DefaultAs>;
export declare type InferredPolymorphicProps<T extends PolymorphicAs, XP = {}> = T extends AnchorLike | undefined ? AnchorLikeProps<T, XP> & InheritedProps<T, XP> : InferredProps<T, XP>;
/**
* Inferred props clone of {@link PolymorphicPropsWithRef}
*/
export declare type InferredPolymorphicPropsWithRef<T extends PolymorphicAs, XP = {}> = InferredPolymorphicProps<T, XP> & {
/** The ref object returned by `React.useRef` */
ref?: PolymorphicRef<T>;
};
/**
* Inferred props clone of {@link PolymorphicComponentType}
*/
export interface InferredPolymorphicComponentType<XP = {}, DefaultAs extends PolymorphicAs = PolymorphicAs> {
<T extends PolymorphicAs = DefaultAs>(props: InferredPolymorphicPropsWithRef<T, XP>, ref: PolymorphicRef<T>): ReactElement | null;
displayName?: string;
propTypes?: WeakValidationMap<InferredPolymorphicProps<PolymorphicAs, XP> & RefAttributes<any>> | undefined;
}
/**
* Inferred Props clone of {@link PolymorphicRenderFunction}
*/
export interface InferredPolymorphicRenderFunction<XP = {}, DefaultAs extends PolymorphicAs = PolymorphicAs> {
<T extends PolymorphicAs = DefaultAs>(props: InferredPolymorphicPropsWithRef<T, XP>, ref: PolymorphicRef<T>): ReactElement | null;
displayName?: string;
propTypes?: never;
}
//# sourceMappingURL=InferredPolymorphic.types.d.ts.map

2

dist/InferredPolymorphic/useInferredPolymorphic.d.ts

@@ -12,3 +12,3 @@ import { PolymorphicAs } from '../Polymorphic/Polymorphic.types';

[key: string]: any;
}): {
}, defaultAs?: PolymorphicAs): {
Component: PolymorphicAs;

@@ -15,0 +15,0 @@ ref: any;

31

dist/Polymorphic/Polymorphic.types.d.ts

@@ -35,4 +35,8 @@ /**

*/
export declare type InheritedProps<T extends PolymorphicAs> = T extends 'a' ? AnchorProps : ComponentPropsWithoutRef<T>;
export declare type AllInheritedProps<T extends PolymorphicAs> = T extends 'a' ? AnchorProps : ComponentPropsWithoutRef<T>;
/**
* Omits any props inclided in type `P` from the inherited props
*/
export declare type InheritedProps<T extends PolymorphicAs, XP = {}> = Omit<AllInheritedProps<T>, PropsToOmit<T, XP>>;
/**
* The basic props for the Polymorphic component.

@@ -42,3 +46,3 @@ *

*/
export declare type PolymorphicProps<T extends PolymorphicAs, XP = {}> = PropsWithChildren<XP & AsProp<T>> & Omit<InheritedProps<T>, PropsToOmit<T, XP>>;
export declare type PolymorphicProps<T extends PolymorphicAs, XP = {}> = PropsWithChildren<XP & AsProp<T>> & InheritedProps<T, XP>;
/**

@@ -56,12 +60,2 @@ * Add the `ref` prop type to PolymorphicProps

/**
* An explicit definition of the component render function
*
* Differs from `PolymorphicComponentType` only by the `propTypes` attribute
*/
export interface PolymorphicRenderFunction<XP = {}, DefaultAs extends PolymorphicAs = PolymorphicAs> {
<T extends PolymorphicAs = DefaultAs>(props: PolymorphicPropsWithRef<T, XP>, ref: PolymorphicRef<T>): ReactElement | null;
displayName?: string;
propTypes?: never;
}
/**
* An explicit definition of the component type

@@ -78,4 +72,15 @@ *

displayName?: string;
propTypes?: WeakValidationMap<PropsWithoutRef<PolymorphicPropsWithRef<PolymorphicAs, XP>> & RefAttributes<any>>;
propTypes?: WeakValidationMap<PropsWithoutRef<PolymorphicPropsWithRef<PolymorphicAs, XP> & RefAttributes<any>>> | undefined;
}
/**
* An explicit definition of the component render function
*
* Differs from `PolymorphicComponentType` only by the `propTypes` attribute.
*
*/
export interface PolymorphicRenderFunction<XP = {}, DefaultAs extends PolymorphicAs = PolymorphicAs> {
<T extends PolymorphicAs = DefaultAs>(props: PolymorphicPropsWithRef<T, XP>, ref: PolymorphicRef<T>): ReactElement | null;
displayName?: string;
propTypes?: never;
}
//# sourceMappingURL=Polymorphic.types.d.ts.map

5

package.json
{
"name": "@leafygreen-ui/polymorphic",
"version": "1.1.1",
"version": "1.2.0",
"description": "LeafyGreen UI Kit Polymorphic",

@@ -31,4 +31,5 @@ "main": "./dist/index.js",

"devDependencies": {
"@emotion/styled": "^11.10.5"
"@emotion/styled": "^11.10.5",
"next": "^13.1.6"
}
}

12

README.md

@@ -121,3 +121,3 @@ # Polymorphic

color: hotpink;
` as PolymorphicComponentType;
` as typeof MyComponent;
```

@@ -130,3 +130,3 @@

color: hotpink;
` as InferredPolymorphicComponentType;
` as typeof MyInferredComponent;
```

@@ -136,4 +136,3 @@

Since Polymorphic components are strictly typed, to use styled props with Typescript
you will need to define the additional props you expect to use within styled, and pass these into styled as generic type.
Since Polymorphic components are strictly typed, to use styled props with Typescript you will need to define the additional props you expect to use within styled, and pass these into styled as generic type.

@@ -147,3 +146,6 @@ ```tsx

color: ${props => props.color};
` as PolymorphicComponentType;
` as StyledComponent<
StyledProps & PolymorphicProps<PolymorphicAs, ExampleProps>
// or StyledProps & InferredProps<PolymorphicAs, ExampleProps>
>;
```

@@ -150,0 +152,0 @@

5

src/index.ts

@@ -5,2 +5,3 @@ export {

type InferredPolymorphicProps,
type InferredPolymorphicPropsWithRef,
useInferredPolymorphic,

@@ -19,1 +20,5 @@ } from './InferredPolymorphic';

} from './Polymorphic';
export {
type LoosePolymorphicProps,
type PropsOf,
} from './utils/Polymorphic.utils';

1

src/InferredPolymorphic/index.ts

@@ -5,3 +5,4 @@ export { InferredPolymorphic } from './InferredPolymorphic';

InferredPolymorphicProps,
InferredPolymorphicPropsWithRef,
} from './InferredPolymorphic.types';
export { useInferredPolymorphic } from './useInferredPolymorphic';

35

src/InferredPolymorphic/InferredPolymorphic.ts

@@ -1,9 +0,10 @@

import { Polymorphic, PolymorphicAs } from '../Polymorphic';
import React from 'react';
import { PolymorphicAs } from '../Polymorphic';
import {
PolymorphicComponentType,
PolymorphicRenderFunction,
} from '../Polymorphic/Polymorphic.types';
InferredPolymorphicComponentType,
InferredPolymorphicRenderFunction,
} from './InferredPolymorphic.types';
import { InferredPolymorphicProps } from './InferredPolymorphic.types';
/**

@@ -19,9 +20,19 @@ * Inferred copy of the {@link Polymorphic} factory function.

>(
render: PolymorphicRenderFunction<XP, DefaultAs>,
render: InferredPolymorphicRenderFunction<XP, DefaultAs>,
displayName?: string,
): PolymorphicComponentType<InferredPolymorphicProps<XP>, DefaultAs> => {
return Polymorphic<InferredPolymorphicProps<XP>, DefaultAs>(
render,
displayName,
);
): InferredPolymorphicComponentType<XP, DefaultAs> => {
let PolyComponent: InferredPolymorphicComponentType<XP, DefaultAs>;
if (render.length === 1) {
PolyComponent = render;
} else {
type PropTypes = Parameters<typeof render>[0];
type RefType = Parameters<typeof render>[1];
/// @ts-expect-error - types too complex. Return type is still computed correctly
PolyComponent = React.forwardRef<RefType, PropTypes>(render);
}
PolyComponent.displayName =
displayName ?? render.displayName ?? 'PolymorphicComponent';
return PolyComponent;
};

112

src/InferredPolymorphic/InferredPolymorphic.types.ts
import {
AnchorProps,
PropsWithChildren,
ReactElement,
RefAttributes,
WeakValidationMap,
} from 'react';
import {
AsProp,
InheritedProps,
PolymorphicAs,
PolymorphicComponentType,
} from '../Polymorphic/Polymorphic.types';
import { NodeUrlLike } from '../utils/Polymorphic.utils';
import { React18ChildlessComponentType } from '../utils/React18ChildlessComponentType';
import { PolymorphicRef } from '..';
/** Either an anchor tag, or a component that accepts an `href` */
export type AnchorLike =
| 'a'
| React18ChildlessComponentType<{ href: string }>
| React18ChildlessComponentType<{ href: NodeUrlLike }>;
/**
* Wrapping props in this type ensures that if `href` is defined,
* the `as` type is set to `'a'`, and all anchor props are accepted
* the `as` type can only be `AnchorLike`, and all anchor props are accepted
*/
export type InferredPolymorphicProps<P = {}> =
| (P & {
href: string;
as?: 'a';
} & AnchorProps)
| P;
export type AnchorLikeProps<
T extends AnchorLike | undefined,
P = {},
> = PropsWithChildren<
{
href: string | NodeUrlLike;
as?: T extends AnchorLike ? T : 'a';
} & P
>;
/**
* An extension of `PolymorphicComponentType` that wraps additional props in `InferredPolymorphicProps`
* If `href` is provided to the compomnent as a prop, but `as` is not
* then we infer that the `as` prop is `a`, and inherit anchor props.
* Otherwise `href` is invalid, and we treat the `as` prop as usual
*/
export type InferredPolymorphicComponentType<
export type InferredProps<T extends PolymorphicAs, XP = {}> = PropsWithChildren<
XP &
(
| ({ href: string; as?: 'a' } & InheritedProps<'a', XP>)
| (({ href?: never } & AsProp<T>) & InheritedProps<T, XP>)
)
>;
/**
* Inferred extension of {@link PolymorphicProps}
*
* If `T` is an anchor, or undefined, then we explicitly add an `href`
*
* else if T is something else and href is defined, we force `as` to be 'a',
* otherwise, href is `never`.
*
* Note: It's a known issue that passing a component with no props (`() => <></>`)
* as the `as` prop will be improperly flagged as `AnchorLike`.
* We have decided not to add additional type complexity to address this minor edge case.
*/
export type InferredPolymorphicProps<
T extends PolymorphicAs,
XP = {},
> = T extends AnchorLike | undefined
? AnchorLikeProps<T, XP> & InheritedProps<T, XP>
: InferredProps<T, XP>;
/**
* Inferred props clone of {@link PolymorphicPropsWithRef}
*/
export type InferredPolymorphicPropsWithRef<
T extends PolymorphicAs,
XP = {},
> = InferredPolymorphicProps<T, XP> & {
/** The ref object returned by `React.useRef` */
ref?: PolymorphicRef<T>;
};
/**
* Inferred props clone of {@link PolymorphicComponentType}
*/
export interface InferredPolymorphicComponentType<
XP = {},
DefaultAs extends PolymorphicAs = PolymorphicAs,
> = PolymorphicComponentType<InferredPolymorphicProps<XP>, DefaultAs>;
> {
<T extends PolymorphicAs = DefaultAs>(
props: InferredPolymorphicPropsWithRef<T, XP>,
ref: PolymorphicRef<T>,
): ReactElement | null;
displayName?: string;
propTypes?:
| WeakValidationMap<
InferredPolymorphicProps<PolymorphicAs, XP> & RefAttributes<any>
>
| undefined;
}
/**
* Inferred Props clone of {@link PolymorphicRenderFunction}
*/
export interface InferredPolymorphicRenderFunction<
XP = {},
DefaultAs extends PolymorphicAs = PolymorphicAs,
> {
<T extends PolymorphicAs = DefaultAs>(
props: InferredPolymorphicPropsWithRef<T, XP>,
ref: PolymorphicRef<T>,
): ReactElement | null;
displayName?: string;
propTypes?: never;
}

15

src/InferredPolymorphic/useInferredPolymorphic.ts

@@ -11,12 +11,6 @@ import { usePolymorphic } from '../Polymorphic/Polymorphic.hooks';

rest?: { [key: string]: any },
defaultAs?: PolymorphicAs,
): PolymorphicAs | undefined {
if (!as) {
if (typeof rest?.href === 'string') {
as = 'a' as PolymorphicAs;
} else {
as = 'div' as PolymorphicAs;
}
}
return as;
defaultAs = defaultAs ?? ('div' as PolymorphicAs);
return as ? as : typeof rest?.href === 'string' ? 'a' : defaultAs;
}

@@ -35,5 +29,6 @@

rest?: { [key: string]: any },
defaultAs?: PolymorphicAs,
) {
as = getInferredPolymorphComponent(as, rest);
as = getInferredPolymorphComponent(as, rest, defaultAs);
return usePolymorphic(as);
}

54

src/Polymorphic/Polymorphic.types.ts

@@ -51,3 +51,3 @@ /**

*/
export type InheritedProps<T extends PolymorphicAs> = T extends 'a'
export type AllInheritedProps<T extends PolymorphicAs> = T extends 'a'
? AnchorProps

@@ -57,2 +57,10 @@ : ComponentPropsWithoutRef<T>;

/**
* Omits any props inclided in type `P` from the inherited props
*/
export type InheritedProps<T extends PolymorphicAs, XP = {}> = Omit<
AllInheritedProps<T>,
PropsToOmit<T, XP>
>;
/**
* The basic props for the Polymorphic component.

@@ -65,4 +73,3 @@ *

XP = {},
> = PropsWithChildren<XP & AsProp<T>> &
Omit<InheritedProps<T>, PropsToOmit<T, XP>>;
> = PropsWithChildren<XP & AsProp<T>> & InheritedProps<T, XP>;

@@ -85,7 +92,11 @@ /**

/**
* An explicit definition of the component render function
* An explicit definition of the component type
*
* Differs from `PolymorphicComponentType` only by the `propTypes` attribute
* Components returned by the `Polymorphic` factory function
* have this type
*
* PolymorphicComponentType is an interface with a generic function,
* and a displayName.
*/
export interface PolymorphicRenderFunction<
export interface PolymorphicComponentType<
XP = {},

@@ -99,14 +110,18 @@ DefaultAs extends PolymorphicAs = PolymorphicAs,

displayName?: string;
propTypes?: never;
propTypes?:
| WeakValidationMap<
PropsWithoutRef<
PolymorphicPropsWithRef<PolymorphicAs, XP> & RefAttributes<any>
>
>
| undefined;
}
/**
* An explicit definition of the component type
* An explicit definition of the component render function
*
* Components returned by the `Polymorphic` factory function
* have this type
* Differs from `PolymorphicComponentType` only by the `propTypes` attribute.
*
* PolymorphicComponentType is an interface with a generic function,
* and a displayName.
*/
export interface PolymorphicComponentType<
export interface PolymorphicRenderFunction<
XP = {},

@@ -120,6 +135,11 @@ DefaultAs extends PolymorphicAs = PolymorphicAs,

displayName?: string;
propTypes?: WeakValidationMap<
PropsWithoutRef<PolymorphicPropsWithRef<PolymorphicAs, XP>> &
RefAttributes<any>
>;
propTypes?: never;
}
// (I'm not entirely clear why we can't use `Omit`, but that doesn't work - AT)
// export type PolymorphicRenderFunction<
// XP = {},
// DefaultAs extends PolymorphicAs = PolymorphicAs,
// > = Omit<PolymorphicComponentType<XP, DefaultAs>, 'propTypes'> & {
// propTypes: never;
// };

1

tsconfig.json

@@ -1,2 +0,1 @@

{

@@ -3,0 +2,0 @@ "extends": "../../package.tsconfig.json",

608

tsdoc.json
[
{
"tags": {},
"description": "",
"methods": [],
"displayName": "AdvancedPolymorphicWithRef",
"props": {
"ExampleProps": {
"title": {
"name": "title",
"defaultValue": null,
"description": "An arbitrary title",
"required": false,
"type": {
"name": "string"
},
"tags": {}
},
"darkMode": {
"name": "darkMode",
"defaultValue": null,
"description": "Flag for dark mode",
"required": false,
"type": {
"name": "enum",
"raw": "boolean",
"value": [
{
"value": "false"
},
{
"value": "true"
}
]
},
"tags": {}
}
},
"AsProp": {
"as": {
"name": "as",
"defaultValue": null,
"description": "The component or element to render as",
"required": false,
"type": {
"name": "enum",
"raw": "PolymorphicAs",
"value": [
{
"value": "\"symbol\""
},
{
"value": "\"object\""
},
{
"value": "\"a\""
},
{
"value": "\"abbr\""
},
{
"value": "\"address\""
},
{
"value": "\"area\""
},
{
"value": "\"article\""
},
{
"value": "\"aside\""
},
{
"value": "\"audio\""
},
{
"value": "\"b\""
},
{
"value": "\"base\""
},
{
"value": "\"bdi\""
},
{
"value": "\"bdo\""
},
{
"value": "\"big\""
},
{
"value": "\"blockquote\""
},
{
"value": "\"body\""
},
{
"value": "\"br\""
},
{
"value": "\"button\""
},
{
"value": "\"canvas\""
},
{
"value": "\"caption\""
},
{
"value": "\"cite\""
},
{
"value": "\"code\""
},
{
"value": "\"col\""
},
{
"value": "\"colgroup\""
},
{
"value": "\"data\""
},
{
"value": "\"datalist\""
},
{
"value": "\"dd\""
},
{
"value": "\"del\""
},
{
"value": "\"details\""
},
{
"value": "\"dfn\""
},
{
"value": "\"dialog\""
},
{
"value": "\"div\""
},
{
"value": "\"dl\""
},
{
"value": "\"dt\""
},
{
"value": "\"em\""
},
{
"value": "\"embed\""
},
{
"value": "\"fieldset\""
},
{
"value": "\"figcaption\""
},
{
"value": "\"figure\""
},
{
"value": "\"footer\""
},
{
"value": "\"form\""
},
{
"value": "\"h1\""
},
{
"value": "\"h2\""
},
{
"value": "\"h3\""
},
{
"value": "\"h4\""
},
{
"value": "\"h5\""
},
{
"value": "\"h6\""
},
{
"value": "\"head\""
},
{
"value": "\"header\""
},
{
"value": "\"hgroup\""
},
{
"value": "\"hr\""
},
{
"value": "\"html\""
},
{
"value": "\"i\""
},
{
"value": "\"iframe\""
},
{
"value": "\"img\""
},
{
"value": "\"input\""
},
{
"value": "\"ins\""
},
{
"value": "\"kbd\""
},
{
"value": "\"keygen\""
},
{
"value": "\"label\""
},
{
"value": "\"legend\""
},
{
"value": "\"li\""
},
{
"value": "\"link\""
},
{
"value": "\"main\""
},
{
"value": "\"map\""
},
{
"value": "\"mark\""
},
{
"value": "\"menu\""
},
{
"value": "\"menuitem\""
},
{
"value": "\"meta\""
},
{
"value": "\"meter\""
},
{
"value": "\"nav\""
},
{
"value": "\"noindex\""
},
{
"value": "\"noscript\""
},
{
"value": "\"ol\""
},
{
"value": "\"optgroup\""
},
{
"value": "\"option\""
},
{
"value": "\"output\""
},
{
"value": "\"p\""
},
{
"value": "\"param\""
},
{
"value": "\"picture\""
},
{
"value": "\"pre\""
},
{
"value": "\"progress\""
},
{
"value": "\"q\""
},
{
"value": "\"rp\""
},
{
"value": "\"rt\""
},
{
"value": "\"ruby\""
},
{
"value": "\"s\""
},
{
"value": "\"samp\""
},
{
"value": "\"slot\""
},
{
"value": "\"script\""
},
{
"value": "\"section\""
},
{
"value": "\"select\""
},
{
"value": "\"small\""
},
{
"value": "\"source\""
},
{
"value": "\"span\""
},
{
"value": "\"strong\""
},
{
"value": "\"style\""
},
{
"value": "\"sub\""
},
{
"value": "\"summary\""
},
{
"value": "\"sup\""
},
{
"value": "\"table\""
},
{
"value": "\"template\""
},
{
"value": "\"tbody\""
},
{
"value": "\"td\""
},
{
"value": "\"textarea\""
},
{
"value": "\"tfoot\""
},
{
"value": "\"th\""
},
{
"value": "\"thead\""
},
{
"value": "\"time\""
},
{
"value": "\"title\""
},
{
"value": "\"tr\""
},
{
"value": "\"track\""
},
{
"value": "\"u\""
},
{
"value": "\"ul\""
},
{
"value": "\"var\""
},
{
"value": "\"video\""
},
{
"value": "\"wbr\""
},
{
"value": "\"webview\""
},
{
"value": "\"svg\""
},
{
"value": "\"animate\""
},
{
"value": "\"animateMotion\""
},
{
"value": "\"animateTransform\""
},
{
"value": "\"circle\""
},
{
"value": "\"clipPath\""
},
{
"value": "\"defs\""
},
{
"value": "\"desc\""
},
{
"value": "\"ellipse\""
},
{
"value": "\"feBlend\""
},
{
"value": "\"feColorMatrix\""
},
{
"value": "\"feComponentTransfer\""
},
{
"value": "\"feComposite\""
},
{
"value": "\"feConvolveMatrix\""
},
{
"value": "\"feDiffuseLighting\""
},
{
"value": "\"feDisplacementMap\""
},
{
"value": "\"feDistantLight\""
},
{
"value": "\"feDropShadow\""
},
{
"value": "\"feFlood\""
},
{
"value": "\"feFuncA\""
},
{
"value": "\"feFuncB\""
},
{
"value": "\"feFuncG\""
},
{
"value": "\"feFuncR\""
},
{
"value": "\"feGaussianBlur\""
},
{
"value": "\"feImage\""
},
{
"value": "\"feMerge\""
},
{
"value": "\"feMergeNode\""
},
{
"value": "\"feMorphology\""
},
{
"value": "\"feOffset\""
},
{
"value": "\"fePointLight\""
},
{
"value": "\"feSpecularLighting\""
},
{
"value": "\"feSpotLight\""
},
{
"value": "\"feTile\""
},
{
"value": "\"feTurbulence\""
},
{
"value": "\"filter\""
},
{
"value": "\"foreignObject\""
},
{
"value": "\"g\""
},
{
"value": "\"image\""
},
{
"value": "\"line\""
},
{
"value": "\"linearGradient\""
},
{
"value": "\"marker\""
},
{
"value": "\"mask\""
},
{
"value": "\"metadata\""
},
{
"value": "\"mpath\""
},
{
"value": "\"path\""
},
{
"value": "\"pattern\""
},
{
"value": "\"polygon\""
},
{
"value": "\"polyline\""
},
{
"value": "\"radialGradient\""
},
{
"value": "\"rect\""
},
{
"value": "\"stop\""
},
{
"value": "\"switch\""
},
{
"value": "\"text\""
},
{
"value": "\"textPath\""
},
{
"value": "\"tspan\""
},
{
"value": "\"use\""
},
{
"value": "\"view\""
},
{
"value": "ComponentClass<any, any>",
"description": "",
"fullComment": "",
"tags": {}
},
{
"value": "FunctionComponent<any>",
"description": "",
"fullComment": "",
"tags": {}
}
]
},
"tags": {}
}
},
"AdvancedPolymorphicWithRefProps": {
"children": {
"name": "children",
"defaultValue": null,
"description": "",
"required": false,
"type": {
"name": "any"
},
"tags": {}
}
},
"SVGAttributes": "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute",
"AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
"DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes"
}
},
{
"tags": {},
"description": "Polymorphic component that supports forwarded refs\n\nWith the `as` prop, Polymorphic can dynamically render\nas any HTML element or React Component.\n\nIf the logic defining the `as` prop is defined internally within your component,\nuse this standalone `Polymorph` component.\n\nHowever: If you want to expose `as` as a prop of your component,\nprefer the `{@link Polymorphic }` factory function and related hooks.",

@@ -572,3 +1178,3 @@ "methods": [],

},
"HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
"SVGAttributes": "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute",
"AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",

@@ -575,0 +1181,0 @@ "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes"

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/Example/Polymorphic.example.d.ts

Sorry, the diff of this file is too big to display

dist/Example/Polymorphic.example.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/InferredPolymorphic/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/InferredPolymorphic/InferredPolymorphic.d.ts.map

Sorry, the diff of this file is not supported yet

dist/InferredPolymorphic/InferredPolymorphic.types.d.ts.map

Sorry, the diff of this file is not supported yet

dist/InferredPolymorphic/useInferredPolymorphic.d.ts.map

Sorry, the diff of this file is not supported yet

dist/Polymorphic/Polymorphic.types.d.ts.map

Sorry, the diff of this file is not supported yet

src/Example/examples.spec.tsx

Sorry, the diff of this file is not supported yet

src/Example/Polymorphic.example.tsx

Sorry, the diff of this file is not supported yet

src/Polymorphic/Polymorphic.spec.tsx

Sorry, the diff of this file is not supported yet

tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc