@leafygreen-ui/polymorphic - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

 # @leafygreen-ui/polymorphic
 
+## 1.3.0
+
+### Minor Changes
+
+- 3ef365fd3: Expose two internal hooks `usePolymorphicComponent` and `useInferredPolymorphicComponent` to support React Server Components
+
 ## 1.2.0
@@ -4,0 +10,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-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};
+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){return r||"div"}function l(r){return{Component:o(r),ref:t()}}function i(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)}function u(r,n,e){return l(r=i(r,n,e))}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 f(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 c=["as","children"],p=function(n,e){var t=n.as,o=n.children,i=f(n,c),u=l(t).Component;return r.createElement(u,a({},i,{ref:e}),o)},v=r.forwardRef(p);v.displayName="Polymorph";var y=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,v as Polymorph,y as Polymorphic,u as useInferredPolymorphic,i as useInferredPolymorphicComponent,l as usePolymorphic,o as usePolymorphicComponent,t as usePolymorphicRef};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -1,4 +0,4 @@
-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 { InferredPolymorphic, type InferredPolymorphicComponentType, type InferredPolymorphicProps, type InferredPolymorphicPropsWithRef, useInferredPolymorphic, useInferredPolymorphicComponent, } from './InferredPolymorphic';
+export { Polymorph, Polymorphic, type PolymorphicAs, type PolymorphicComponentType, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, usePolymorphic, usePolymorphicComponent, usePolymorphicRef, } from './Polymorphic';
 export { type LoosePolymorphicProps, type PropsOf, } from './utils/Polymorphic.utils';
 //# sourceMappingURL=index.d.ts.map

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

dist/InferredPolymorphic/index.d.ts

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

dist/InferredPolymorphic/useInferredPolymorphic.d.ts

 import { PolymorphicAs } from '../Polymorphic/Polymorphic.types';
 /**
+ * A hook that computes & returns the inferred polymorphic component based on the `as` prop, and any other props passed in.
+ *
+ * For client-side components, prefer using `useInferredPolymorphic`, which returns a typed `ref` as well as the polymorphic component
+ */
+export declare function useInferredPolymorphicComponent(as?: PolymorphicAs, rest?: {
+    [key: string]: any;
+}, defaultAs?: PolymorphicAs): PolymorphicAs | undefined;
+/**
  * A hook that returns a Component and `ref` based on the `as` prop passed in,
@@ -4,0 +12,0 @@ * and any other props provided.

dist/Polymorphic/index.d.ts

 export { Polymorph } from './Polymorph';
 export { Polymorphic } from './Polymorphic';
-export { usePolymorphic, usePolymorphicRef } from './Polymorphic.hooks';
+export { usePolymorphic, usePolymorphicComponent, usePolymorphicRef, } from './Polymorphic.hooks';
 export type { PolymorphicAs, PolymorphicComponentType, PolymorphicProps, PolymorphicPropsWithRef, PolymorphicRef, } from './Polymorphic.types';
 //# sourceMappingURL=index.d.ts.map

dist/Polymorphic/Polymorphic.hooks.d.ts

@@ -9,2 +9,8 @@ import React from 'react';
 /**
+ * A hook that computes & returns the polymorphic ReactElement based on the `as` prop
+ *
+ * For client-side components, prefer using `usePolymorphic`, which returns a typed `ref` as well as the polymorphic component
+ */
+export declare function usePolymorphicComponent<T extends PolymorphicAs>(as?: T): React.ElementType;
+/**
  * A hook that returns an accurately typed polymorphic `Component` and `ref`,
@@ -11,0 +17,0 @@ * given an `as` prop

package.json

 {
   "name": "@leafygreen-ui/polymorphic",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "LeafyGreen UI Kit Polymorphic",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -65,2 +65,18 @@ # Polymorphic
 
+### React Server Components
+
+React Server Components do not support React Client Component APIs, such as `React.useRef`. To avoid React Client APIs, use the `usePolymorphicComponent` and `useInferredPolymorphicComponent` hooks instead.
+
+Note that `forwardedRef` is still allowed.
+
+```tsx
+interface MyProps {
+  someProp: string;
+}
+const MyComponent = Polymorphic<MyProps>(({ as, ...rest }, forwardedRef) => {
+  const Component = usePolymorphicComponent(as);
+  return <Component ref={forwardedRef} {...rest} />;
+});
+```
+
 ### Inferred `as` prop
@@ -96,3 +112,3 @@
 ```tsx
-export const MyInferredComponentWitDefault = InferredPolymorphic<
+export const MyInferredComponentWithDefault = InferredPolymorphic<
   ExampleProps,
@@ -99,0 +115,0 @@ 'button'

src/index.ts

@@ -7,2 +7,3 @@ export {
   useInferredPolymorphic,
+  useInferredPolymorphicComponent,
 } from './InferredPolymorphic';
@@ -18,2 +19,3 @@ export {
   usePolymorphic,
+  usePolymorphicComponent,
   usePolymorphicRef,
@@ -20,0 +22,0 @@ } from './Polymorphic';

src/InferredPolymorphic/index.ts

@@ -7,2 +7,5 @@ export { InferredPolymorphic } from './InferredPolymorphic';
 } from './InferredPolymorphic.types';
-export { useInferredPolymorphic } from './useInferredPolymorphic';
+export {
+  useInferredPolymorphic,
+  useInferredPolymorphicComponent,
+} from './useInferredPolymorphic';

src/InferredPolymorphic/useInferredPolymorphic.ts

@@ -5,6 +5,7 @@ import { usePolymorphic } from '../Polymorphic/Polymorphic.hooks';
 /**
- * Internal function to compute the inferred polymorphic component based on the `as` prop, and any other props passed in
- * @internal
+ * A hook that computes & returns the inferred polymorphic component based on the `as` prop, and any other props passed in.
+ *
+ * For client-side components, prefer using `useInferredPolymorphic`, which returns a typed `ref` as well as the polymorphic component
  */
-function getInferredPolymorphComponent(
+export function useInferredPolymorphicComponent(
   as?: PolymorphicAs,
@@ -31,4 +32,4 @@ rest?: { [key: string]: any },
 ) {
-  as = getInferredPolymorphComponent(as, rest, defaultAs);
+  as = useInferredPolymorphicComponent(as, rest, defaultAs);
   return usePolymorphic(as);
 }

src/Polymorphic/index.ts

 export { Polymorph } from './Polymorph';
 export { Polymorphic } from './Polymorphic';
-export { usePolymorphic, usePolymorphicRef } from './Polymorphic.hooks';
+export {
+  usePolymorphic,
+  usePolymorphicComponent,
+  usePolymorphicRef,
+} from './Polymorphic.hooks';
 export type {
@@ -5,0 +9,0 @@ PolymorphicAs,

tsconfig.json

@@ -7,10 +7,8 @@ {
     "rootDir": "src",
-    "noErrorTruncation": false,
+    "noErrorTruncation": false
   },
-  "include": ["src/**/*"],
-  "references": [
-    {
-      "path": "../lib"
-    }
-  ]
+  "include": [
+    "src/**/*"
+  ],
+  "references": []
 }

tsdoc.json

@@ -1194,2 +1194,11 @@ [
     "tags": {},
+    "description": "A hook that computes & returns the polymorphic ReactElement based on the `as` prop\n\nFor client-side components, prefer using `usePolymorphic`, which returns a typed `ref` as well as the polymorphic component",
+    "methods": [],
+    "displayName": "usePolymorphicComponent",
+    "props": {
+      "String": ""
+    }
+  },
+  {
+    "tags": {},
     "description": "A wrapper around `React.useRef`\nthat provides an accurately typed Ref object",
@@ -1196,0 +1205,0 @@ "methods": [],

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

Improved metrics

Total package byte prevSize

196006

increased by1.71%

Lines of code

3409

increased by0.95%

Number of lines in readme file

204

increased by8.51%

No dependency changes