@leafygreen-ui/polymorphic - npm Package Compare versions

Comparing version 0.1.0-next.1 to 1.0.0

CHANGELOG.md

 # @leafygreen-ui/polymorphic
 
-## 0.1.0-next.1
+## 1.0.0
 
-### Minor Changes
+### Major Changes
 
-- Updates package export names
-
-## 0.1.0-next.0
-
-### Minor Changes
-
-- 6ad6eb58a: Releases the Polymorphic component
+- 45dd84e9b: Releases the Polymorphic component

dist/esm/index.js

@@ -1,2 +0,2 @@
-import r from"react";function n(){return n=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},n.apply(this,arguments)}function e(r,n){if(null==r)return{};var e,t,o=function(r,n){if(null==r)return{};var e,t,o={},a=Object.keys(r);for(t=0;t<a.length;t++)e=a[t],n.indexOf(e)>=0||(o[e]=r[e]);return o}(r,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)e=a[t],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}var t=function(n){return r.useRef(null)};function o(r){return r||"div"}function a(r){return{Component:o(r),ref:t()}}var l=["as","children"],u=function(t,a){var u=t.as,f=t.children,i=e(t,l),c=o(u);return r.createElement(c,n({},i,{ref:a}),f)},f=r.forwardRef(u);f.displayName="Polymorph";var i=function(n,e){if(1===n.length){var t=n;return t.displayName=null!=e?e:n.displayName,t}var o=r.forwardRef(n);return o.displayName=null!=e?e:n.displayName,o};function c(r,n){return r=function(r,n){return r||"string"==typeof(null==n?void 0:n.href)&&(r="a"),r}(r,n),a(r)}export{u as BasePolymorph,f as Polymorph,i as Polymorphic,c as useInferredPolymorphic,a as usePolymorphic,o as usePolymorphicComponent,t as usePolymorphicRef};
+import e,{forwardRef as t}from"react";import{render as r}from"@testing-library/react";var n=function(t){return e.useRef(null)};function a(e){var t=function(e){return e||"div"}(e);return{Component:t,ref:n()}}function o(e,t){return e=function(e,t){return e||(e="string"==typeof(null==t?void 0:t.href)?"a":"div"),e}(e,t),a(e)}function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i.apply(this,arguments)}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=["children"];var l=["as","children"],c=function(t,r){var n=t.as,o=t.children,p=s(t,l),c=a(n).Component;return e.createElement(c,i({},p,{ref:r}),o)},u=e.forwardRef(c);u.displayName="Polymorph";var f=function(e,r){var n,a=1===e.length?e:t(e);return a.displayName=null!==(n=null!=r?r:e.displayName)&&void 0!==n?n:"PolymorphicComponent",a};expect.extend({toBePolymorphic:function(t){var n,a=function(){var t=jest.fn(),r=e.forwardRef((function(r,n){var a=r.children,o=s(r,p);return t(),e.createElement("span",i({"data-testid":"wrapper"},o,{ref:n}),a)}));return r.displayName="Wrapper",{Wrapper:r,wrapperDidRender:t}}(),o=a.Wrapper,l=r(e.createElement(e.Fragment,null,e.createElement(t,{as:"div","data-testid":"test-1"}),";",e.createElement(t,{as:"span","data-testid":"test-2"}),";",e.createElement(t,{as:"a",href:"mongodb.design","data-testid":"test-3"}),";",e.createElement(t,{as:o,"data-testid":"test-4"}),";")),c=l.getByTestId,u=l.unmount,f=c("test-1"),m=c("test-2"),d=c("test-3"),y=c("test-4"),v="string"==typeof t?t:null!==(n=t.displayName)&&void 0!==n?n:"The component";return"div"===f.tagName.toLowerCase()&&"span"===m.tagName.toLowerCase()&&"a"===d.tagName.toLowerCase()&&"span"===y.tagName.toLowerCase()?(u(),{pass:!0,message:function(){return"Component `".concat(v,"` is polymorphic")}}):(u(),{pass:!1,message:function(){return"Component `".concat(v,"` is not polymorphic")}})}});export{u as Polymorph,f as Polymorphic,o as useInferredPolymorphic,a as usePolymorphic,n as usePolymorphicRef};
 //# sourceMappingURL=index.js.map

dist/Example/index.d.ts

@@ -1,2 +0,2 @@
-export { ExamplePolymorphic, ExamplePolymorphicWithRef, AdvancedPolymorphic, AdvancedPolymorphicWithRef, ExampleInferred, RestrictedExample, } from './Example';
+export { AdvancedPolymorphic, AdvancedPolymorphicWithRef, ExampleInferred, ExamplePolymorphic, ExamplePolymorphicWithRef, RestrictedExample, } from './Polymorphic.example';
 //# sourceMappingURL=index.d.ts.map

dist/index.d.ts

@@ -1,7 +0,3 @@
-export { Polymorph, BasePolymorph } from './Polymorph';
-export { Polymorphic } from './Polymorphic';
-export { usePolymorphicRef, usePolymorphicComponent, usePolymorphic, } from './Polymorphic.hooks';
-export type { PolymorphicAs, PolymorphicProps, PolymorphicPropsWithRef, PolymorphicRef, PolymorphicComponentType, } from './Polymorphic.types';
-export { useInferredPolymorphic } from './InferredPolymorphic';
-export type { InferredPolymorphicProps } from './InferredPolymorphic';
+export { type InferredPolymorphicComponentType, type InferredPolymorphicProps, useInferredPolymorphic, } from './InferredPolymorphic';
+export { Polymorph, Polymorphic, type PolymorphicAs, type PolymorphicComponentType, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, usePolymorphic, usePolymorphicRef, } from './Polymorphic';
 //# 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);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 l(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 u=function(e){return t.default.useRef(null)};function f(e){return e||"div"}function i(e){return{Component:f(e),ref:u()}}var a=["as","children"],c=function(e,r){var n=e.as,u=e.children,i=l(e,a),c=f(n);return t.default.createElement(c,o({},i,{ref:r}),u)},p=t.default.forwardRef(c);p.displayName="Polymorph";e.BasePolymorph=c,e.Polymorph=p,e.Polymorphic=function(e,r){if(1===e.length){var n=e;return n.displayName=null!=r?r:e.displayName,n}var o=t.default.forwardRef(e);return o.displayName=null!=r?r:e.displayName,o},e.useInferredPolymorphic=function(e,r){return e=function(e,r){return e||"string"==typeof(null==r?void 0:r.href)&&(e="a"),e}(e,r),i(e)},e.usePolymorphic=i,e.usePolymorphicComponent=f,e.usePolymorphicRef=u,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@testing-library/react")):"function"==typeof define&&define.amd?define(["exports","react","@testing-library/react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/polymorphic"]={},e.React,e.react)}(this,(function(e,t,r){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t),o=function(e){return a.default.useRef(null)};function i(e){var t=function(e){return e||"div"}(e);return{Component:t,ref:o()}}function l(){return l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}function u(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var f=["children"];var s=["as","children"],c=function(e,t){var r=e.as,n=e.children,o=u(e,s),f=i(r).Component;return a.default.createElement(f,l({},o,{ref:t}),n)},p=a.default.forwardRef(c);p.displayName="Polymorph";expect.extend({toBePolymorphic:function(e){var t,n=function(){var e=jest.fn(),t=a.default.forwardRef((function(t,r){var n=t.children,o=u(t,f);return e(),a.default.createElement("span",l({"data-testid":"wrapper"},o,{ref:r}),n)}));return t.displayName="Wrapper",{Wrapper:t,wrapperDidRender:e}}(),o=n.Wrapper,i=r.render(a.default.createElement(a.default.Fragment,null,a.default.createElement(e,{as:"div","data-testid":"test-1"}),";",a.default.createElement(e,{as:"span","data-testid":"test-2"}),";",a.default.createElement(e,{as:"a",href:"mongodb.design","data-testid":"test-3"}),";",a.default.createElement(e,{as:o,"data-testid":"test-4"}),";")),s=i.getByTestId,c=i.unmount,p=s("test-1"),d=s("test-2"),m=s("test-3"),y=s("test-4"),h="string"==typeof e?e:null!==(t=e.displayName)&&void 0!==t?t:"The component";return"div"===p.tagName.toLowerCase()&&"span"===d.tagName.toLowerCase()&&"a"===m.tagName.toLowerCase()&&"span"===y.tagName.toLowerCase()?(c(),{pass:!0,message:function(){return"Component `".concat(h,"` is polymorphic")}}):(c(),{pass:!1,message:function(){return"Component `".concat(h,"` is not polymorphic")}})}}),e.Polymorph=p,e.Polymorphic=function(e,r){var n,a=1===e.length?e:t.forwardRef(e);return a.displayName=null!==(n=null!=r?r:e.displayName)&&void 0!==n?n:"PolymorphicComponent",a},e.useInferredPolymorphic=function(e,t){return e=function(e,t){return e||(e="string"==typeof(null==t?void 0:t.href)?"a":"div"),e}(e,t),i(e)},e.usePolymorphic=i,e.usePolymorphicRef=o,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/polymorphic",
-  "version": "0.1.0-next.1",
+  "version": "1.0.0",
   "description": "LeafyGreen UI Kit Polymorphic",
@@ -30,6 +30,5 @@ "main": "./dist/index.js",
   },
-  "dependencies": {},
   "devDependencies": {
-    "@emotion/styled": "11.10.5"
+    "@emotion/styled": "^11.10.5"
   }
 }

README.md

@@ -37,3 +37,3 @@ # Polymorphic
 
-Note that any inherited props will be indeterminate in the factory function, since the value `as` is not known. (i.e. the attributes of `rest` in the following example are not definitely known).
+Note that any inherited props will be indeterminate in the factory function, since the value `as` is not known. (i.e. the attributes of `rest` in the following example are unknown).
 
@@ -58,8 +58,6 @@ ```tsx
 }
-const MyComponent = PolymorphicComponent<MyProps>(
-  ({ as, ...rest }, forwardedRef) => {
-    const { Component } = usePolymorphic(as);
-    return <Component ref={forwardedRef} {...rest} />;
-  },
-);
+const MyComponent = Polymorphic<MyProps>(({ as, ...rest }, forwardedRef) => {
+  const { Component } = usePolymorphic(as);
+  return <Component ref={forwardedRef} {...rest} />;
+});
 ```
@@ -92,3 +90,3 @@
 
-`Polymorphic` also supports usage with Emotions `styled` API. To get TypeScript to accepts the Polymorphic props, explicitly type your styled component as `PolymorphicComponentType`.
+`Polymorphic` also supports usage with Emotions `styled` API. To get TypeScript to accept the Polymorphic props you'll need to explicitly type your styled component as `PolymorphicComponentType`.
 
@@ -107,2 +105,10 @@ ```tsx
 
+This also works with InferredPolymorphic components
+
+```tsx
+const StyledInferred = styled(MyInferredComponent)`
+  color: hotpink;
+` as InferredPolymorphicComponentType;
+```
+
 Note: TSDocs will not compile for styled polymorphs. This can be remedied by creating a wrapper around the styled function that explicitly returns a PolymorphicComponentType
@@ -109,0 +115,0 @@

src/Example/index.ts

 export {
-  ExamplePolymorphic,
-  ExamplePolymorphicWithRef,
   AdvancedPolymorphic,
   AdvancedPolymorphicWithRef,
   ExampleInferred,
+  ExamplePolymorphic,
+  ExamplePolymorphicWithRef,
   RestrictedExample,
 } from './Polymorphic.example';

src/index.ts

@@ -1,20 +0,16 @@
-export { Polymorph, BasePolymorph } from './Polymorph';
-export { Polymorphic } from './Polymorphic';
-
 export {
+  type InferredPolymorphicComponentType,
+  type InferredPolymorphicProps,
+  useInferredPolymorphic,
+} from './InferredPolymorphic';
+export {
+  Polymorph,
+  Polymorphic,
+  type PolymorphicAs,
+  type PolymorphicComponentType,
+  type PolymorphicProps,
+  type PolymorphicPropsWithRef,
+  type PolymorphicRef,
+  usePolymorphic,
   usePolymorphicRef,
-  usePolymorphicComponent,
-  usePolymorphic,
-} from './Polymorphic.hooks';
-
-export type {
-  PolymorphicAs,
-  PolymorphicProps,
-  PolymorphicPropsWithRef,
-  PolymorphicRef,
-  PolymorphicComponentType,
-} from './Polymorphic.types';
-
-export { useInferredPolymorphic } from './InferredPolymorphic';
-
-export type { InferredPolymorphicProps } from './InferredPolymorphic';
+} from './Polymorphic';

tsconfig.json

@@ -8,3 +8,3 @@
     "rootDir": "src",
-    "noErrorTruncation": true,
+    "noErrorTruncation": false,
   },
@@ -11,0 +11,0 @@ "include": ["src/**/*"],

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

654543

increased by22.07%

Number of package files

49

increased by40%

Lines of code

6580

increased by155.83%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

149

increased by4.2%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes