@leafygreen-ui/polymorphic - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0

CHANGELOG.md

 # @leafygreen-ui/polymorphic
 
-## 2.0.0-alpha.1
+## 2.0.0
 
 ### Major Changes
 
-- d40674fe1: Updates build tooling. No functional changes
+- 7a901b954: - Updates `InferredPolymorphicProps` to avoid errors when providing a generically typed as prop
+  - adds type tests for `Polymorphic` and `InferredPolymorphic`
+  - Adds `useInferredPolymorphicProps` utility for nested inferred polymorphic components
+  - Updates the return type of `useInferredPolymorphic` to match a generic `InferredPolymorphicProps`
+  - Adds `hasAnchorProps` type guard
 
-## 2.0.0-alpha.0
+### Patch Changes
 
-### Major Changes
+- Updated dependencies [7a901b954]
+  - @leafygreen-ui/lib@13.6.0
 
-- d40674fe1: Updates build tooling. No functional changes
+## 1.3.7
 
+### Patch Changes
+
+- 356a53fd: Update TS builds to use `typescript@4.9.5`
+
+## 1.3.6
+
+### Patch Changes
+
+- 4fcf2e94: Updates types with `React.PropsWithChildren`
+
+## 1.3.5
+
+### Patch Changes
+
+- c11bbc29: Fixes problem with ts-docs not being available in bundle.
+
+## 1.3.4
+
+### Patch Changes
+
+- c15ee2ac: Fixes missing documentation file
+
+## 1.3.3
+
+### Patch Changes
+
+- 215268ff: Updates build tooling. No functional changes
+
 ## 1.3.2
@@ -16,0 +49,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n,{forwardRef as r}from"react";var e=function(r,e){var t,o;return(o=1===r.length?r:n.forwardRef(r)).displayName=null!==(t=null!=e?e:r.displayName)&&void 0!==t?t:"PolymorphicComponent",o},t=function(r){return n.useRef(null)};function o(n){return n||"div"}function l(n){return{Component:o(n),ref:t()}}function i(n,r,e){var t;return e=null!==(t=e)&&void 0!==t?t:"div",n||("string"==typeof(null==r?void 0:r.href)?"a":e)}function a(n,r,e){return l(n=i(n,r,e))}function u(){return u=Object.assign?Object.assign.bind():function(n){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t])}return n},u.apply(this,arguments)}function f(n,r){if(null==n)return{};var e,t,o=function(n,r){if(null==n)return{};var e,t,o={},l=Object.keys(n);for(t=0;t<l.length;t++)e=l[t],r.indexOf(e)>=0||(o[e]=n[e]);return o}(n,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(n);for(t=0;t<l.length;t++)e=l[t],r.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(o[e]=n[e])}return o}var c=["as","children"],p=function(r,e){var t=r.as,o=r.children,i=f(r,c),a=l(t).Component;return n.createElement(a,u({},i,{ref:e}),o)},s=n.forwardRef(p);s.displayName="Polymorph";var v=function(n,e){var t,o=1===n.length?n:r(n);return o.displayName=null!==(t=null!=e?e:n.displayName)&&void 0!==t?t:"PolymorphicComponent",o};export{e as InferredPolymorphic,s as Polymorph,v as Polymorphic,a as useInferredPolymorphic,i as useInferredPolymorphicComponent,l as usePolymorphic,o as usePolymorphicComponent,t as usePolymorphicRef};
+import r,{forwardRef as e}from"react";import{consoleOnce as t}from"@leafygreen-ui/lib";import n from"lodash/has";function o(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function i(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?o(Object(t),!0).forEach((function(e){f(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}function a(r){var e=function(r,e){if("object"!=typeof r||!r)return r;var t=r[Symbol.toPrimitive];if(void 0!==t){var n=t.call(r,e);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r,"string");return"symbol"==typeof e?e:e+""}function f(r,e,t){return(e=a(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function u(){return u=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},u.apply(this,arguments)}function l(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}var c="div",p=function(e){return r.useRef(null)};function s(r){return r||"div"}function v(r){return{Component:s(r),ref:p()}}var y=["as","children"],m=function(e,t){var n=e.as,o=e.children,i=l(e,y),a=v(n).Component;return r.createElement(a,u({},i,{ref:t}),o)},b=r.forwardRef(m);b.displayName="Polymorph";var d=function(r,t){var n,o=1===r.length?r:e(r);return o.displayName=null!==(n=null!=t?t:r.displayName)&&void 0!==n?n:"PolymorphicComponent",o};function h(r,e,n){var o=null==e?void 0:e.href;return r&&"a"===r?(o&&"string"==typeof o||t.error("LG Polymorphic error",'Component received `as="a"`, but did not receive an `href` prop'),i({as:"a",href:"string"==typeof o?o:void 0},e)):i(r?{as:r,href:o||void 0}:o&&"string"==typeof o?{as:"a",href:o}:{as:n||c},e)}var O=["as"];function g(r,e,t){var n=h(r,e,t),o=n.as,i=l(n,O);return{Component:o,as:o,ref:p(),rest:i}}function j(r,e,t){return r||("string"==typeof(null==e?void 0:e.href)?"a":null!=t?t:"div")}function P(r,e,n){var o=null==e?void 0:e.href;return r&&"a"===r?(o&&"string"==typeof o||t.error("LG Polymorphic error",'Component received `as="a"`, but did not receive an `href` prop'),i({as:"a",href:"string"==typeof o?o:void 0},e)):i(o?{as:"a",href:o}:r?{as:r,href:void 0}:{as:n||c},e)}var w=function(e,t){var n,o;return(o=1===e.length?e:r.forwardRef(e)).displayName=null!==(n=null!=t?t:e.displayName)&&void 0!==n?n:"PolymorphicComponent",o},C=function(r,e){return"a"===r&&n(e,"href")};export{w as InferredPolymorphic,b as Polymorph,d as Polymorphic,C as hasAnchorProps,g as useInferredPolymorphic,j as useInferredPolymorphicComponent,h as useInferredPolymorphicProps,v as usePolymorphic,s as usePolymorphicComponent,p as usePolymorphicRef,P as useStrictInferredPolymorphicProps};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/polymorphic"]={},e.React)}(this,(function(e,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(n),t=function(e){return o.default.useRef(null)};function l(e){return e||"div"}function i(e){return{Component:l(e),ref:t()}}function u(e,n,r){var o;return r=null!==(o=r)&&void 0!==o?o:"div",e||("string"==typeof(null==n?void 0:n.href)?"a":r)}function f(){return f=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},f.apply(this,arguments)}function a(e,n){if(null==e)return{};var r,o,t=function(e,n){if(null==e)return{};var r,o,t={},l=Object.keys(e);for(o=0;o<l.length;o++)r=l[o],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)r=l[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}var c=["as","children"],p=function(e,n){var r=e.as,t=e.children,l=a(e,c),u=i(r).Component;return o.default.createElement(u,f({},l,{ref:n}),t)},d=o.default.forwardRef(p);d.displayName="Polymorph";e.InferredPolymorphic=function(e,n){var r,t;return(t=1===e.length?e:o.default.forwardRef(e)).displayName=null!==(r=null!=n?n:e.displayName)&&void 0!==r?r:"PolymorphicComponent",t},e.Polymorph=d,e.Polymorphic=function(e,r){var o,t=1===e.length?e:n.forwardRef(e);return t.displayName=null!==(o=null!=r?r:e.displayName)&&void 0!==o?o:"PolymorphicComponent",t},e.useInferredPolymorphic=function(e,n,r){return i(e=u(e,n,r))},e.useInferredPolymorphicComponent=u,e.usePolymorphic=i,e.usePolymorphicComponent=l,e.usePolymorphicRef=t}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("@leafygreen-ui/lib"),require("lodash/has")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/lib","lodash/has"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/polymorphic"]={},e.React,e["@leafygreen-ui/lib"],e["/has"])}(this,(function(e,r,n,t){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(r),f=o(t);function a(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function u(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?a(Object(n),!0).forEach((function(r){c(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function l(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var t=n.call(e,r);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof r?r:r+""}function c(e,r,n){return(r=l(r))in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function p(){return p=Object.assign?Object.assign.bind():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},p.apply(this,arguments)}function s(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var y="div",d=function(e){return i.default.useRef(null)};function h(e){return e||"div"}function m(e){return{Component:h(e),ref:d()}}var v=["as","children"],b=function(e,r){var n=e.as,t=e.children,o=s(e,v),f=m(n).Component;return i.default.createElement(f,p({},o,{ref:r}),t)},O=i.default.forwardRef(b);O.displayName="Polymorph";function P(e,r,t){var o=null==r?void 0:r.href;return e&&"a"===e?(o&&"string"==typeof o||n.consoleOnce.error("LG Polymorphic error",'Component received `as="a"`, but did not receive an `href` prop'),u({as:"a",href:"string"==typeof o?o:void 0},r)):u(e?{as:e,href:o||void 0}:o&&"string"==typeof o?{as:"a",href:o}:{as:t||y},r)}var g=["as"];e.InferredPolymorphic=function(e,r){var n,t;return(t=1===e.length?e:i.default.forwardRef(e)).displayName=null!==(n=null!=r?r:e.displayName)&&void 0!==n?n:"PolymorphicComponent",t},e.Polymorph=O,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.hasAnchorProps=function(e,r){return"a"===e&&f.default(r,"href")},e.useInferredPolymorphic=function(e,r,n){var t=P(e,r,n),o=t.as,i=s(t,g);return{Component:o,as:o,ref:d(),rest:i}},e.useInferredPolymorphicComponent=function(e,r,n){return e||("string"==typeof(null==r?void 0:r.href)?"a":null!=n?n:"div")},e.useInferredPolymorphicProps=P,e.usePolymorphic=m,e.usePolymorphicComponent=h,e.usePolymorphicRef=d,e.useStrictInferredPolymorphicProps=function(e,r,t){var o=null==r?void 0:r.href;return e&&"a"===e?(o&&"string"==typeof o||n.consoleOnce.error("LG Polymorphic error",'Component received `as="a"`, but did not receive an `href` prop'),u({as:"a",href:"string"==typeof o?o:void 0},r)):u(o?{as:"a",href:o}:e?{as:e,href:void 0}:{as:t||y},r)}}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/polymorphic",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0",
   "description": "LeafyGreen UI Kit Polymorphic",
@@ -16,4 +16,5 @@ "main": "./dist/index.js",
   "scripts": {
-    "build": "rollup --config rollup.config.mjs",
-    "tsc": "tsc --build tsconfig.json"
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
   },
@@ -34,6 +35,10 @@ "license": "Apache-2.0",
     "@emotion/styled": "^11.10.5",
-    "@lg-tools/build": "^0.1.0-alpha.1",
-    "next": "^13.1.6",
-    "@leafygreen-ui/lib": "^11.0.0-alpha.1"
+    "@lg-tools/build": "^0.6.0",
+    "@lg-tools/storybook-utils": "^0.1.0",
+    "next": "^13.1.6"
+  },
+  "dependencies": {
+    "@leafygreen-ui/lib": "^13.6.0",
+    "lodash": "^4.17.21"
   }
 }

README.md

@@ -81,3 +81,3 @@ # Polymorphic
 
-### Inferred `as` prop
+## Inferred `as` prop
 
@@ -89,3 +89,3 @@ Components extended using the `Polymorphic` factory function can be made to infer the `as` prop value based on the `href` passed in.
 ```tsx
-export const MyInferredComponent = Polymorphic<
+export const MyInferredComponent = InferredPolymorphic<
   InferredPolymorphicProps<MyProps>
@@ -116,3 +116,3 @@ >(({ as, ...rest }) => {
   'button'
->(({ as = 'button' as PolymorphicAs, title, ...rest }) => {
+>(({ as = 'button', title, ...rest }) => {
   const { Component, ref } = useInferredPolymorphic(as, rest);
@@ -127,2 +127,9 @@ return (
 
+Note: When a component is `InferredPolymorphic`, the `href` will force the component to render as an anchor, and will override any default value.
+
+```tsx
+<MyInferredComponentWithDefault />; // as <button>
+<MyInferredComponentWithDefault href="mongodb.design" />; // as <button>
+```
+
 ## With Emotion `styled` API
@@ -129,0 +136,0 @@

src/index.ts

 export {
+  type AnchorLike,
   InferredPolymorphic,
@@ -8,2 +9,4 @@ type InferredPolymorphicComponentType,
   useInferredPolymorphicComponent,
+  useInferredPolymorphicProps,
+  useStrictInferredPolymorphicProps,
 } from './InferredPolymorphic';
@@ -22,2 +25,3 @@ export {
 } from './Polymorphic';
+export { hasAnchorProps } from './utils/hasAnchorProps/hasAnchorProps';
 export {
@@ -24,0 +28,0 @@ type LoosePolymorphicProps,

src/InferredPolymorphic/index.ts

@@ -0,3 +1,10 @@
+export {
+  useInferredPolymorphic,
+  useInferredPolymorphicComponent,
+  useInferredPolymorphicProps,
+  useStrictInferredPolymorphicProps,
+} from './hooks';
 export { InferredPolymorphic } from './InferredPolymorphic';
 export type {
+  AnchorLike,
   InferredPolymorphicComponentType,
@@ -7,5 +14,1 @@ InferredPolymorphicProps,
 } from './InferredPolymorphic.types';
-export {
-  useInferredPolymorphic,
-  useInferredPolymorphicComponent,
-} from './useInferredPolymorphic';

src/InferredPolymorphic/InferredPolymorphic.ts

@@ -17,9 +17,12 @@ import React from 'react';
 export const InferredPolymorphic = <
-  XP extends object = {},
-  DefaultAs extends PolymorphicAs = PolymorphicAs,
+  TComponentProps extends object = {},
+  TDefaultAs extends PolymorphicAs = PolymorphicAs,
 >(
-  render: InferredPolymorphicRenderFunction<XP, DefaultAs>,
+  render: InferredPolymorphicRenderFunction<TComponentProps, TDefaultAs>,
   displayName?: string,
-): InferredPolymorphicComponentType<XP, DefaultAs> => {
-  let PolyComponent: InferredPolymorphicComponentType<XP, DefaultAs>;
+): InferredPolymorphicComponentType<TComponentProps, TDefaultAs> => {
+  let PolyComponent: InferredPolymorphicComponentType<
+    TComponentProps,
+    TDefaultAs
+  >;
 
@@ -26,0 +29,0 @@ if (render.length === 1) {

src/InferredPolymorphic/InferredPolymorphic.types.ts

 import {
-  PropsWithChildren,
+  ComponentPropsWithoutRef,
+  ComponentType,
   ReactElement,
-  RefAttributes,
   WeakValidationMap,
 } from 'react';
 
-import {
-  AsProp,
-  InheritedProps,
-  PolymorphicAs,
-} from '../Polymorphic/Polymorphic.types';
+import { PartialRequired } from '@leafygreen-ui/lib';
+
+import { PolymorphicAs } from '../Polymorphic/Polymorphic.types';
 import { NodeUrlLike } from '../utils/Polymorphic.utils';
-import { React18ChildlessComponentType } from '../utils/React18ChildlessComponentType';
 import { PolymorphicRef } from '..';
 
+export type HrefLike = string | NodeUrlLike;
+
 /** Either an anchor tag, or a component that accepts an `href` */
 export type AnchorLike =
   | 'a'
-  | React18ChildlessComponentType<{ href: string }>
-  | React18ChildlessComponentType<{ href: NodeUrlLike }>;
+  | ComponentType<{ href: string }>
+  | ComponentType<{ href: NodeUrlLike }>;
 
@@ -27,43 +26,63 @@ /**
  */
-export type AnchorLikeProps<
-  T extends AnchorLike | undefined,
-  P = {},
-> = PropsWithChildren<
-  {
-    href: string | NodeUrlLike;
-    as?: T extends AnchorLike ? T : 'a';
-  } & P
->;
+export interface AnchorLikeProps<TAsProp extends AnchorLike | undefined> {
+  href: string | NodeUrlLike;
+  as?: TAsProp extends undefined ? 'a' : TAsProp;
+}
 
+/** Anchor props where `href` is required */
+export type InferredAnchorProps = {
+  href: string;
+  as?: 'a';
+} & ComponentPropsWithoutRef<'a'>;
+
 /**
- * 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
+ * Union of {@link AnchorLikeProps} and {@link InheritedProps}
  */
-export type InferredProps<T extends PolymorphicAs, XP = {}> = PropsWithChildren<
-  XP &
-    (
-      | ({ href: string; as?: 'a' } & InheritedProps<'a', XP>)
-      | (({ href?: never } & AsProp<T>) & InheritedProps<T, XP>)
-    )
->;
+export type InheritedExplicitAnchorLikeProps<TAsProp extends AnchorLike> = {
+  as?: TAsProp;
+} & Omit<PartialRequired<ComponentPropsWithoutRef<TAsProp>, 'href'>, 'as'>;
 
 /**
- * Inferred extension of {@link PolymorphicProps}
+ * Extends the default component props (or intrinsic attributes)
+ * of the provided `TAsProp` type.
  *
- * If `T` is an anchor, or undefined, then we explicitly add an `href`
+ * We also omit any inherited keys that may be overridden by
+ * explicit component props
  *
- * else if T is something else and href is defined, we force `as` to be 'a',
- * otherwise, href is `never`.
+ * e.g.
+ * - if `as = "label"`, the component should accept the `htmlFor` attribute)
+ * - if `as = { RemixLink }`, the component should accept the `to` prop.
+ * ([see Remix docs](https://remix.run/docs/en/main/components/link))
+ */
+export type InheritedComponentProps<
+  TAsProp extends PolymorphicAs,
+  TComponentProps,
+> = {
+  as?: PolymorphicAs;
+} & Omit<ComponentPropsWithoutRef<TAsProp>, keyof TComponentProps | 'as'>;
+
+/**
  *
- * 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.
+ * Sets the inferred prop types of an inferred Polymorphic component
+ *
+ * First, we extend any provided component props (`TComponentProps`)
+ *
+ * If the provided `as` prop (`TAsProp`) extends the type {@link AnchorLike}
+ * then we extend {@link InheritedExplicitAnchorLikeProps}
+ *
+ * Otherwise, (if `TAsProp` is any other type),
+ * then we create a Discriminated Union of
+ *  - {@link InferredAnchorProps} - which expects `href` to be defined,
+ * and sets the component props to the default `a` element props, and
+ *  - {@link InheritedComponentProps} - which extends the intrinsic attributes
+ * of the provided `as` prop
+ *
  */
 export type InferredPolymorphicProps<
-  T extends PolymorphicAs,
-  XP = {},
-> = T extends AnchorLike | undefined
-  ? AnchorLikeProps<T, XP> & InheritedProps<T, XP>
-  : InferredProps<T, XP>;
+  TAsProp extends PolymorphicAs,
+  TComponentProps = {},
+> = (TAsProp extends AnchorLike
+  ? InheritedExplicitAnchorLikeProps<TAsProp> // if the `as` prop is AnchorLike, return explicit AnchorLike props
+  : InferredAnchorProps | InheritedComponentProps<TAsProp, TComponentProps>) &
+  Omit<TComponentProps, 'as'>;
 
@@ -74,41 +93,37 @@ /**
 export type InferredPolymorphicPropsWithRef<
-  T extends PolymorphicAs,
-  XP = {},
-> = InferredPolymorphicProps<T, XP> & {
+  TAsProp extends PolymorphicAs,
+  TComponentProps = {},
+> = InferredPolymorphicProps<TAsProp, TComponentProps> & {
   /** The ref object returned by `React.useRef` */
-  ref?: PolymorphicRef<T>;
+  ref?: PolymorphicRef<TAsProp>;
 };
 
 /**
- * Inferred props clone of {@link PolymorphicComponentType}
+ * Inferred Props clone of {@link PolymorphicRenderFunction}
  */
-export interface InferredPolymorphicComponentType<
-  XP = {},
-  DefaultAs extends PolymorphicAs = PolymorphicAs,
+export interface InferredPolymorphicRenderFunction<
+  TComponentProps = {},
+  TDefaultAs extends PolymorphicAs = PolymorphicAs,
 > {
-  <T extends PolymorphicAs = DefaultAs>(
-    props: InferredPolymorphicPropsWithRef<T, XP>,
-    ref: PolymorphicRef<T>,
+  <TAsProp extends PolymorphicAs = TDefaultAs>(
+    props: InferredPolymorphicProps<TAsProp, TComponentProps>,
+    ref: PolymorphicRef<TAsProp>,
   ): ReactElement | null;
   displayName?: string;
+  // propTypes?: never;
+}
+
+/**
+ * Inferred props clone of {@link PolymorphicComponentType}
+ */
+export type InferredPolymorphicComponentType<
+  TComponentProps = {},
+  TDefaultAs extends PolymorphicAs = PolymorphicAs,
+> = InferredPolymorphicRenderFunction<TComponentProps, TDefaultAs> & {
+  // FIXME: propTypes will be broken for any inherited props
   propTypes?:
     | WeakValidationMap<
-        InferredPolymorphicProps<PolymorphicAs, XP> & RefAttributes<any>
+        InferredPolymorphicProps<PolymorphicAs, TComponentProps>
       >
     | 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;
-}
+};

src/Polymorphic/index.ts

@@ -0,1 +1,2 @@
+export { FALLBACK } from './constants';
 export { Polymorph } from './Polymorph';
@@ -9,2 +10,3 @@ export { Polymorphic } from './Polymorphic';
 export type {
+  IntrinsicElements,
   PolymorphicAs,
@@ -11,0 +13,0 @@ PolymorphicComponentType,

src/Polymorphic/Polymorphic.ts

@@ -32,2 +32,4 @@ import { forwardRef } from 'react';
   // If no `ref` arg was passed in, we use the plain render function
+  // Using ts-ignore instead of ts-expect-error since expect throws an unused expect TS error in a React 17 environment
+  // @ts-ignore FIXME: https://jira.mongodb.org/browse/LG-3410
   const PolyComponent: PolymorphicComponentType<XP, DefaultAs> =
@@ -34,0 +36,0 @@ render.length === 1 ? render : forwardRef(render);

src/Polymorphic/Polymorphic.types.ts

@@ -15,2 +15,9 @@ /**
 
+export type IntrinsicElements<P = any> =
+  | {
+      [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K]
+        ? K
+        : never;
+    }[keyof JSX.IntrinsicElements];
+
 export type PolymorphicAs = ElementType;
@@ -57,3 +64,4 @@
 /**
- * Omits any props inclided in type `P` from the inherited props
+ * Extends `{@link ComponentPropsWithoutRef<T>}`, but
+ * omits any props also included in type `XP`
  */
@@ -60,0 +68,0 @@ export type InheritedProps<T extends PolymorphicAs, XP = {}> = Omit<

src/utils/Polymorphic.utils.ts

@@ -37,3 +37,3 @@ import { ComponentProps, ComponentType, PropsWithChildren } from 'react';
     | InferredPolymorphicComponentType
-    | ComponentType,
+    | ComponentType<React.PropsWithChildren<unknown>>,
 > = C extends PolymorphicComponentType<infer P, infer T>
@@ -43,3 +43,3 @@ ? PolymorphicPropsWithRef<T, P>
   ? InferredPolymorphicPropsWithRef<T, P>
-  : C extends ComponentType
+  : C extends ComponentType<React.PropsWithChildren<unknown>>
   ? ComponentProps<C>
@@ -46,0 +46,0 @@ : never;

tsconfig.json

@@ -7,9 +7,14 @@ {
     "rootDir": "src",
-    "noErrorTruncation": false
+    "noErrorTruncation": false,
+    "noUnusedLocals": false
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
   ],
-  "exclude": ["**/*.spec.*", "**/*.story.*"],
-  "references": []
+  "exclude": ["src/Example/*", "**/*.stories.*"],
+  "references": [
+    {
+      "path": "../lib"
+    }
+  ]
 }

tsdoc.json

@@ -110,2 +110,5 @@ [
               {
+                "value": "\"center\""
+              },
+              {
                 "value": "\"cite\""
@@ -315,2 +318,5 @@ },
               {
+                "value": "\"search\""
+              },
+              {
                 "value": "\"slot\""
@@ -687,2 +693,5 @@ },
               {
+                "value": "\"center\""
+              },
+              {
                 "value": "\"cite\""
@@ -892,2 +901,5 @@ },
               {
+                "value": "\"search\""
+              },
+              {
                 "value": "\"slot\""
@@ -894,0 +906,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

224466

increased by75.83%

Number of package files

86

increased by177.42%

Lines of code

4731

increased by55.37%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

211

increased by3.43%

Worsened metrics

Dependency count

2

increased byInfinity%

Dependency changes

• + Added@leafygreen-ui/lib@^13.6.0

• + Addedlodash@^4.17.21

• + Added@leafygreen-ui/lib@13.7.0(transitive)

• + Added@storybook/csf@0.1.11(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedtype-fest@2.19.0(transitive)