@contentful/f36-core - npm Package Compare versions

Comparing version 4.0.1-next-v4-5052.2088 to 4.0.1-next-v4-5106.2090

dist/main.js

@@ -1,2 +0,2 @@
-var n=u(require("@babel/runtime/helpers/extends")),e=require("react"),i=u(e),{createElement:a,forwardRef:t}=e,r=u(require("@emotion/is-prop-valid")),{cx:l,css:o}=require("emotion"),s=u(require("@contentful/f36-tokens"));function d(n,e){return Object.keys(e).forEach((function(i){"default"!==i&&"__esModule"!==i&&Object.defineProperty(n,i,{enumerable:!0,get:function(){return e[i]}})})),n}function g(n,e,i,a){Object.defineProperty(n,e,{get:i,set:a,enumerable:!0,configurable:!0})}function u(n){return n&&n.__esModule?n.default:n}var c={};g(c,"Primitive",(()=>f));const p="div",f=i.forwardRef((function(e,a){const{as:t=p,testId:l,...o}=e,s={};for(const n in o)r(n)?s[n]=o[n]:console.warn("Invalid prop",n);return i.createElement(t,n({ref:a,"data-test-id":l},s,{as:void 0}))}));var m={};g(m,"Flex",(()=>w));var x={};g(x,"Box",(()=>y));const h={none:0,spacing2Xs:s.spacing2Xs,spacingXs:s.spacingXs,spacingS:s.spacingS,spacingM:s.spacingM,spacingL:s.spacingL,spacingXl:s.spacingXl,spacing2Xl:s.spacing2Xl,spacing3Xl:s.spacing3Xl,spacing4Xl:s.spacing4Xl};function v(n){return h[n]}const y=t((({display:e="block",children:i,className:t,...r},s)=>{return a(f,n({className:l(o({display:e,...(d=r,Object.assign({},d.margin?{margin:v(d.margin)}:null,d.marginLeft?{marginLeft:v(d.marginLeft)}:null,d.marginRight?{marginRight:v(d.marginRight)}:null,d.marginTop?{marginTop:v(d.marginTop)}:null,d.marginBottom?{marginBottom:v(d.marginBottom)}:null,d.padding?{padding:v(d.padding)}:null,d.paddingLeft?{paddingLeft:v(d.paddingLeft)}:null,d.paddingRight?{paddingRight:v(d.paddingRight)}:null,d.paddingTop?{paddingTop:v(d.paddingTop)}:null,d.paddingBottom?{paddingBottom:v(d.paddingBottom)}:null))},""),t)},r,{ref:s}),i);var d})),w=t((({isInline:e,alignItems:i,alignSelf:t,alignContent:r,flex:s,flexBasis:d,flexShrink:g,flexDirection:u,flexGrow:c,flexWrap:p,fullHeight:f,fullWidth:m,gap:x,justifyContent:h,justifyItems:v,justifySelf:w,order:j,className:X,children:b,...S},B)=>a(y,n({as:"div",display:e?"inline-flex":"flex",className:l(o({width:m?"100%":void 0,height:f?"100%":void 0,flex:s,flexBasis:d,flexShrink:g,flexDirection:u,gap:x,justifyContent:h,justifyItems:v,justifySelf:w,alignItems:i,alignSelf:t,alignContent:r,order:j,flexWrap:p,flexGrow:c},""),X)},S,{ref:B}),b)));var j={};g(j,"Grid",(()=>X)),g(j,"GridItem",(()=>b));const X=t((({alignContent:e,children:i,columnGap:t="spacingM",columns:r="auto",flow:s,isInline:d,justifyContent:g,rowGap:u="none",rows:c="auto",className:p,...f},m)=>{var x,h;const w=n=>"number"==typeof n?`repeat(${n}, minmax(0, 1fr))`:n;return a(y,n({as:"div",display:d?"inline-grid":"grid",className:l(o({gridTemplateColumns:w(r),gridTemplateRows:w(c),flow:s,justifyContent:g,alignContent:e,columnGap:null!=(x=v(t))?x:0,rowGap:null!=(h=v(u))?h:0},""),p)},f,{ref:m}),i)})),b=t((({children:e,columnStart:i,columnEnd:t,rowStart:r,rowEnd:s,area:d,order:g,className:u,...c},p)=>{const f=d||[r||"auto",i||"auto",s||"auto",t||"auto"].join(" / ");return a(y,n({as:"div",className:l(o({gridArea:f,order:g},""),u)},c,{ref:p}),e)}));d(module.exports,c),d(module.exports,m),d(module.exports,j),d(module.exports,x);
+var n=g(require("@emotion/is-prop-valid")),e=g(require("@babel/runtime/helpers/extends")),{css:i,cx:t}=require("emotion"),{createElement:a,forwardRef:r}=require("react"),o=g(require("@contentful/f36-tokens"));function l(n,e){return Object.keys(e).forEach((function(i){"default"!==i&&"__esModule"!==i&&Object.defineProperty(n,i,{enumerable:!0,get:function(){return e[i]}})})),n}function s(n,e,i,t){Object.defineProperty(n,e,{get:i,set:t,enumerable:!0,configurable:!0})}function g(n){return n&&n.__esModule?n.default:n}var d={};s(d,"usePrimitive",(()=>m));const p="div";function m(e){const{as:i=p,testId:t,...a}=e,r={};for(const e in a)n(e)?r[e]=a[e]:console.warn("Invalid prop",e);return{primitiveProps:{"data-test-id":t,...r,as:void 0},Element:i}}var u={};s(u,"Flex",(()=>b));var c={};s(c,"Box",(()=>y)),s(c,"useBox",(()=>v));const f={none:0,spacing2Xs:o.spacing2Xs,spacingXs:o.spacingXs,spacingS:o.spacingS,spacingM:o.spacingM,spacingL:o.spacingL,spacingXl:o.spacingXl,spacing2Xl:o.spacing2Xl,spacing3Xl:o.spacing3Xl,spacing4Xl:o.spacing4Xl};function x(n){return f[n]}function h(n){return Object.assign({},n.margin?{margin:x(n.margin)}:null,n.marginLeft?{marginLeft:x(n.marginLeft)}:null,n.marginRight?{marginRight:x(n.marginRight)}:null,n.marginTop?{marginTop:x(n.marginTop)}:null,n.marginBottom?{marginBottom:x(n.marginBottom)}:null,n.padding?{padding:x(n.padding)}:null,n.paddingLeft?{paddingLeft:x(n.paddingLeft)}:null,n.paddingRight?{paddingRight:x(n.paddingRight)}:null,n.paddingTop?{paddingTop:x(n.paddingTop)}:null,n.paddingBottom?{paddingBottom:x(n.paddingBottom)}:null)}function v(n){const{display:e,children:a,className:r,margin:o,marginBottom:l,marginLeft:s,marginRight:g,marginTop:d,padding:p,paddingBottom:u,paddingLeft:c,paddingRight:f,paddingTop:x,...v}=n,y={className:t(i({display:e,...h({margin:o,marginBottom:l,marginLeft:s,marginRight:g,marginTop:d,padding:p,paddingBottom:u,paddingLeft:c,paddingRight:f,paddingTop:x})},""),r),...v},{Element:b,primitiveProps:B}=m(y);return{boxProps:B,Element:b}}const y=r(((n,i)=>{const{boxProps:t,Element:r}=v(n);return a(r,e({},t,{ref:i}),n.children)})),b=r((({isInline:n,alignItems:r,alignSelf:o,alignContent:l,flex:s,flexBasis:g,flexShrink:d,flexDirection:p,flexGrow:m,flexWrap:u,fullHeight:c,fullWidth:f,gap:x,justifyContent:h,justifyItems:y,justifySelf:b,order:B,children:j,...w},L)=>{const{boxProps:R,Element:T}=v(w);return a(T,e({as:"div"},R,{className:t(i({display:n?"inline-flex":"flex",width:f?"100%":void 0,height:c?"100%":void 0,flex:s,flexBasis:g,flexShrink:d,flexDirection:p,gap:x,justifyContent:h,justifyItems:y,justifySelf:b,alignItems:r,alignSelf:o,alignContent:l,order:B,flexWrap:u,flexGrow:m},""),R.className),ref:L}),j)}));var B={};s(B,"Grid",(()=>j)),s(B,"GridItem",(()=>w));const j=r((({alignContent:n,children:r,columnGap:o="spacingM",columns:l="auto",flow:s,isInline:g,justifyContent:d,rowGap:p="none",rows:m="auto",...u},c)=>{var f,h;const y=n=>"number"==typeof n?`repeat(${n}, minmax(0, 1fr))`:n,{boxProps:b,Element:B}=v(u);return a(B,e({as:"div"},b,{className:t(i({display:g?"inline-grid":"grid",gridTemplateColumns:y(l),gridTemplateRows:y(m),flow:s,justifyContent:d,alignContent:n,columnGap:null!=(f=x(o))?f:0,rowGap:null!=(h=x(p))?h:0},""),b.className),ref:c}),r)})),w=r((({children:n,columnStart:r,columnEnd:o,rowStart:l,rowEnd:s,area:g,order:d,...p},m)=>{const u=g||[l||"auto",r||"auto",s||"auto",o||"auto"].join(" / "),{boxProps:c,Element:f}=v(p);return a(f,e({as:"div"},c,{className:t(i({gridArea:u,order:d},""),c.className),ref:m}),n)}));l(module.exports,d),l(module.exports,u),l(module.exports,B),l(module.exports,c);
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import n from"@babel/runtime/helpers/esm/extends";import i,{createElement as a,forwardRef as e}from"react";import t from"@emotion/is-prop-valid";import{css as l,cx as r}from"emotion";import o from"@contentful/f36-tokens";function s(n,i,a,e){Object.defineProperty(n,i,{get:a,set:e,enumerable:!0,configurable:!0})}s({},"Primitive",(()=>d));const g="div",d=i.forwardRef((function(a,e){const{as:l=g,testId:r,...o}=a,s={};for(const n in o)t(n)?s[n]=o[n]:console.warn("Invalid prop",n);return i.createElement(l,n({ref:e,"data-test-id":r},s,{as:void 0}))}));s({},"Flex",(()=>f));s({},"Box",(()=>c));const p={none:0,spacing2Xs:o.spacing2Xs,spacingXs:o.spacingXs,spacingS:o.spacingS,spacingM:o.spacingM,spacingL:o.spacingL,spacingXl:o.spacingXl,spacing2Xl:o.spacing2Xl,spacing3Xl:o.spacing3Xl,spacing4Xl:o.spacing4Xl};function m(n){return p[n]}const c=e((({display:i="block",children:e,className:t,...o},s)=>{return a(d,n({className:r(l({display:i,...(g=o,Object.assign({},g.margin?{margin:m(g.margin)}:null,g.marginLeft?{marginLeft:m(g.marginLeft)}:null,g.marginRight?{marginRight:m(g.marginRight)}:null,g.marginTop?{marginTop:m(g.marginTop)}:null,g.marginBottom?{marginBottom:m(g.marginBottom)}:null,g.padding?{padding:m(g.padding)}:null,g.paddingLeft?{paddingLeft:m(g.paddingLeft)}:null,g.paddingRight?{paddingRight:m(g.paddingRight)}:null,g.paddingTop?{paddingTop:m(g.paddingTop)}:null,g.paddingBottom?{paddingBottom:m(g.paddingBottom)}:null))},""),t)},o,{ref:s}),e);var g})),f=e((({isInline:i,alignItems:e,alignSelf:t,alignContent:o,flex:s,flexBasis:g,flexShrink:d,flexDirection:p,flexGrow:m,flexWrap:f,fullHeight:u,fullWidth:x,gap:h,justifyContent:v,justifyItems:w,justifySelf:y,order:X,className:j,children:B,...G},I)=>a(c,n({as:"div",display:i?"inline-flex":"flex",className:r(l({width:x?"100%":void 0,height:u?"100%":void 0,flex:s,flexBasis:g,flexShrink:d,flexDirection:p,gap:h,justifyContent:v,justifyItems:w,justifySelf:y,alignItems:e,alignSelf:t,alignContent:o,order:X,flexWrap:f,flexGrow:m},""),j)},G,{ref:I}),B)));var u={};s(u,"Grid",(()=>x)),s(u,"GridItem",(()=>h));const x=e((({alignContent:i,children:e,columnGap:t="spacingM",columns:o="auto",flow:s,isInline:g,justifyContent:d,rowGap:p="none",rows:f="auto",className:u,...x},h)=>{var v,w;const y=n=>"number"==typeof n?`repeat(${n}, minmax(0, 1fr))`:n;return a(c,n({as:"div",display:g?"inline-grid":"grid",className:r(l({gridTemplateColumns:y(o),gridTemplateRows:y(f),flow:s,justifyContent:d,alignContent:i,columnGap:null!=(v=m(t))?v:0,rowGap:null!=(w=m(p))?w:0},""),u)},x,{ref:h}),e)})),h=e((({children:i,columnStart:e,columnEnd:t,rowStart:o,rowEnd:s,area:g,order:d,className:p,...m},f)=>{const u=g||[o||"auto",e||"auto",s||"auto",t||"auto"].join(" / ");return a(c,n({as:"div",className:r(l({gridArea:u,order:d},""),p)},m,{ref:f}),i)}));export{d as Primitive,f as Flex,x as Grid,h as GridItem,c as Box};
+import n from"@emotion/is-prop-valid";import i from"@babel/runtime/helpers/esm/extends";import{cx as a,css as t}from"emotion";import{createElement as e,forwardRef as o}from"react";import r from"@contentful/f36-tokens";function s(n,i,a,t){Object.defineProperty(n,i,{get:a,set:t,enumerable:!0,configurable:!0})}s({},"usePrimitive",(()=>g));const l="div";function g(i){const{as:a=l,testId:t,...e}=i,o={};for(const i in e)n(i)?o[i]=e[i]:console.warn("Invalid prop",i);return{primitiveProps:{"data-test-id":t,...o,as:void 0},Element:a}}s({},"Flex",(()=>x));var d={};s(d,"Box",(()=>u)),s(d,"useBox",(()=>f));const p={none:0,spacing2Xs:r.spacing2Xs,spacingXs:r.spacingXs,spacingS:r.spacingS,spacingM:r.spacingM,spacingL:r.spacingL,spacingXl:r.spacingXl,spacing2Xl:r.spacing2Xl,spacing3Xl:r.spacing3Xl,spacing4Xl:r.spacing4Xl};function m(n){return p[n]}function c(n){return Object.assign({},n.margin?{margin:m(n.margin)}:null,n.marginLeft?{marginLeft:m(n.marginLeft)}:null,n.marginRight?{marginRight:m(n.marginRight)}:null,n.marginTop?{marginTop:m(n.marginTop)}:null,n.marginBottom?{marginBottom:m(n.marginBottom)}:null,n.padding?{padding:m(n.padding)}:null,n.paddingLeft?{paddingLeft:m(n.paddingLeft)}:null,n.paddingRight?{paddingRight:m(n.paddingRight)}:null,n.paddingTop?{paddingTop:m(n.paddingTop)}:null,n.paddingBottom?{paddingBottom:m(n.paddingBottom)}:null)}function f(n){const{display:i,children:e,className:o,margin:r,marginBottom:s,marginLeft:l,marginRight:d,marginTop:p,padding:m,paddingBottom:f,paddingLeft:u,paddingRight:x,paddingTop:h,...v}=n,B={className:a(t({display:i,...c({margin:r,marginBottom:s,marginLeft:l,marginRight:d,marginTop:p,padding:m,paddingBottom:f,paddingLeft:u,paddingRight:x,paddingTop:h})},""),o),...v},{Element:y,primitiveProps:w}=g(B);return{boxProps:w,Element:y}}const u=o(((n,a)=>{const{boxProps:t,Element:o}=f(n);return e(o,i({},t,{ref:a}),n.children)})),x=o((({isInline:n,alignItems:o,alignSelf:r,alignContent:s,flex:l,flexBasis:g,flexShrink:d,flexDirection:p,flexGrow:m,flexWrap:c,fullHeight:u,fullWidth:x,gap:h,justifyContent:v,justifyItems:B,justifySelf:y,order:w,children:b,...L},R)=>{const{boxProps:T,Element:X}=f(L);return e(X,i({as:"div"},T,{className:a(t({display:n?"inline-flex":"flex",width:x?"100%":void 0,height:u?"100%":void 0,flex:l,flexBasis:g,flexShrink:d,flexDirection:p,gap:h,justifyContent:v,justifyItems:B,justifySelf:y,alignItems:o,alignSelf:r,alignContent:s,order:w,flexWrap:c,flexGrow:m},""),T.className),ref:R}),b)}));var h={};s(h,"Grid",(()=>v)),s(h,"GridItem",(()=>B));const v=o((({alignContent:n,children:o,columnGap:r="spacingM",columns:s="auto",flow:l,isInline:g,justifyContent:d,rowGap:p="none",rows:c="auto",...u},x)=>{var h,v;const B=n=>"number"==typeof n?`repeat(${n}, minmax(0, 1fr))`:n,{boxProps:y,Element:w}=f(u);return e(w,i({as:"div"},y,{className:a(t({display:g?"inline-grid":"grid",gridTemplateColumns:B(s),gridTemplateRows:B(c),flow:l,justifyContent:d,alignContent:n,columnGap:null!=(h=m(r))?h:0,rowGap:null!=(v=m(p))?v:0},""),y.className),ref:x}),o)})),B=o((({children:n,columnStart:o,columnEnd:r,rowStart:s,rowEnd:l,area:g,order:d,...p},m)=>{const c=g||[s||"auto",o||"auto",l||"auto",r||"auto"].join(" / "),{boxProps:u,Element:x}=f(p);return e(x,i({as:"div"},u,{className:a(t({gridArea:c,order:d},""),u.className),ref:m}),n)}));export{g as usePrimitive,x as Flex,v as Grid,B as GridItem,u as Box,f as useBox};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -71,3 +71,3 @@ import { SpacingTokens } from "@contentful/f36-tokens";
 } & CommonProps;
-export type PrimitiveProps<E extends React.ElementType> = PrimitiveOwnProps<E> & Omit<React.ComponentProps<E>, keyof PrimitiveOwnProps>;
+type PrimitiveProps<E extends React.ElementType> = PrimitiveOwnProps<E> & Omit<React.ComponentProps<E>, keyof PrimitiveOwnProps>;
 export type PolymorphicComponentProps<E extends React.ElementType, P> = P & PrimitiveProps<E>;
@@ -78,6 +78,14 @@ export type PolymorphicComponent<P, D extends React.ElementType = 'div'> = (<E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => React.ReactElement | null) & {
 export type PolymorphicComponentWithRef<P, D extends React.ElementType = 'div'> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>, ref: typeof props.ref) => React.ReactElement | null;
-declare const defaultElement = "div";
-export const Primitive: <E extends React.ElementType = typeof defaultElement>(props: PrimitiveProps<E>) => React.ReactElement | null;
+export function usePrimitive(props: PrimitiveOwnProps): {
+    primitiveProps: {
+        as: any;
+        className?: string;
+        testId?: string;
+        style?: React.CSSProperties;
+        "data-test-id": string;
+    };
+    Element: React.ElementType<any>;
+};
 declare const DEFAULT_TAG = "div";
-export interface BoxInternalProps extends MarginProps, PaddingProps {
+export interface BoxInternalProps extends CommonProps, MarginProps, PaddingProps {
     /**
@@ -90,4 +98,14 @@ * Sets the display behavior of the element
 export type BoxProps<E extends React.ElementType> = PolymorphicComponentProps<E, BoxInternalProps>;
+export function useBox(props: BoxInternalProps): {
+    boxProps: {
+        as: any;
+        className?: string;
+        testId?: string;
+        style?: React.CSSProperties;
+        "data-test-id": string;
+    };
+    Element: React.ElementType<any>;
+};
 export const Box: PolymorphicComponent<BoxInternalProps, typeof DEFAULT_TAG>;
-interface FlexInternalProps extends MarginProps, PaddingProps {
+interface FlexInternalProps extends CommonProps, MarginProps, PaddingProps {
     /**
@@ -157,3 +175,3 @@ * Child nodes to be rendered in the component */
 export const Flex: PolymorphicComponent<FlexInternalProps, typeof _DEFAULT_TAG1>;
-interface GridInternalProps extends MarginProps, PaddingProps {
+interface GridInternalProps extends CommonProps, MarginProps, PaddingProps {
     /**
@@ -191,3 +209,3 @@ * Child nodes to be rendered in the component */
 declare const _DEFAULT_TAG3 = "div";
-interface GridItemInternalProps extends MarginProps, PaddingProps {
+interface GridItemInternalProps extends CommonProps, MarginProps, PaddingProps {
     /**
@@ -194,0 +212,0 @@ * Child nodes to be rendered in the component */

package.json

 {
   "name": "@contentful/f36-core",
-  "version": "4.0.1-next-v4-5052.2088+c142b7f9",
+  "version": "4.0.1-next-v4-5106.2090+09109220",
   "description": "Forma 36 core",
@@ -25,3 +25,3 @@ "license": "MIT",
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-tokens": "4.0.1-next-v4-5052.2088+c142b7f9",
+    "@contentful/f36-tokens": "4.0.1-next-v4-5106.2090+09109220",
     "@emotion/is-prop-valid": "^1.1.0",
@@ -36,3 +36,3 @@ "emotion": "^10.0.17"
   },
-  "gitHead": "c142b7f9f2a834cf71cdbb70e07e43598055eeae"
+  "gitHead": "09109220cb1aac9e4a9ec97f8eb6823bae038017"
 }

src/Box/index.ts

@@ -1,2 +0,2 @@
-export { Box } from './Box';
+export { Box, useBox } from './Box';
 export type { BoxProps, BoxInternalProps } from './Box';

src/Primitive/index.ts

@@ -1,4 +0,3 @@
-export { Primitive } from './Primitive';
+export { usePrimitive } from './Primitive';
 export type {
-  PrimitiveProps,
   PolymorphicComponentProps,
@@ -5,0 +4,0 @@ PolymorphicComponent,

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the 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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

165575

increased by4.27%

Lines of code

1044

increased by6.75%

Dependency changes

• Updated@contentful/f36-tokens@4.0.1-next-v4-5106.2090+09109220