@twilio-paste/flex - npm Package Compare versions

Comparing version 2.0.4 to 2.1.0

CHANGELOG.md

 # Change Log
 
+## 2.1.0
+
+### Minor Changes
+
+- [`9f1f99ca`](https://github.com/twilio-labs/paste/commit/9f1f99cae442bc9fd1c658cc85ad64695d61870a) [#1723](https://github.com/twilio-labs/paste/pull/1723) Thanks [@nkrantz](https://github.com/nkrantz)! - [Flex] Enable Flex to respect element customizations set on the customization provider. Flex now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
+
 ## 2.0.4
@@ -4,0 +10,0 @@

dist/index.es.js

@@ -1,1 +0,1 @@
-var L=Object.prototype.hasOwnProperty;var G=Object.getOwnPropertySymbols,C=Object.prototype.propertyIsEnumerable;var t=Object.assign;var S=(e,r)=>{var n={};for(var o in e)L.call(e,o)&&r.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&G)for(var o of G(e))r.indexOf(o)<0&&C.call(e,o)&&(n[o]=e[o]);return n};import{createElement as ee,forwardRef as re,useMemo as oe}from"react";import{bool as fe,number as ue,oneOf as ye,oneOfType as xe,string as ce}from"prop-types";import{Box as te,safelySpreadBoxProps as ne}from"@twilio-paste/box";import"@twilio-paste/style-props";var B=({grow:e})=>Array.isArray(e)?e.map(r=>Number(r)):typeof e=="number"?e:e?1:0,v=({shrink:e,basis:r})=>Array.isArray(e)?e.map(n=>Number(n)):typeof e=="number"?e:typeof e=="boolean"?e?1:0:r&&r!=="auto"?0:1,N=e=>{let r=typeof e=="number"||String(Number.parseInt(e,10))===e?"px":"";return e+r},z=({basis:e})=>Array.isArray(e)?e.map(r=>N(r)):e?N(e):"auto",D=({vertical:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"column":"row":r):e?"column":"row",E=({wrap:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"wrap":"nowrap":r):e?"wrap":"nowrap",I={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},h=({vAlignContent:e})=>Array.isArray(e)?e.map(r=>I[r]):e?I[e]:"flex-start",j={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},b=({hAlignContent:e})=>Array.isArray(e)?e.map(r=>j[r]):e?j[e]:"flex-start";var ie=e=>{let r={justifyContent:e.vertical?h(e):b(e),alignItems:e.vertical?b(e):h(e)};return(e.grow||e.shrink||e.basis)&&(r.flexGrow=B(e),r.flexShrink=v(e),r.flexBasis=z(e)),e.vertical&&(r.flexDirection=D(e)),e.wrap&&(r.flexWrap=E(e)),r},k=re((H,U)=>{var{as:e,basis:r,children:n,display:o,hAlignContent:O,grow:w,marginTop:i,marginRight:s,marginBottom:p,marginLeft:a,margin:l,marginX:P,marginY:f,paddingTop:u,paddingRight:y,paddingBottom:x,paddingLeft:c,padding:m,paddingX:T,paddingY:g,maxWidth:_,minWidth:q="size0",width:A,height:F,minHeight:J,maxHeight:K,size:d,shrink:R,vertical:W,vAlignContent:M,wrap:V}=H,Q=S(H,["as","basis","children","display","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let X=oe(()=>ie({basis:r,hAlignContent:O,grow:w,shrink:R,vertical:W,vAlignContent:M,wrap:V}),[r,O,w,R,W,M,V]);d&&(A||F)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(P&&(l||p||a||s||i)||f&&(l||p||a||s||i))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(T&&(m||x||c||y||u)||g&&(m||x||c||y||u))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let Y=P||f?{marginX:P,marginY:f}:{margin:l,marginBottom:p,marginLeft:a,marginRight:s,marginTop:i},Z=T||g?{paddingX:T,paddingY:g}:{padding:m,paddingBottom:x,paddingLeft:c,paddingRight:y,paddingTop:u},$=d?{size:d}:{height:F,width:A};return ee(te,t(t(t(t(t(t(t({},X),ne(Q)),{ref:U,as:e,display:o}),Y),Z),{minHeight:J,maxHeight:K,maxWidth:_,minWidth:q}),$),n)});k.displayName="Flex";k.defaultProps={display:"flex"};export{k as Flex};
+var ae=Object.prototype.hasOwnProperty;var j=Object.getOwnPropertySymbols,le=Object.prototype.propertyIsEnumerable;var o=Object.assign;var X=(e,r)=>{var s={};for(var t in e)ae.call(e,t)&&r.indexOf(t)<0&&(s[t]=e[t]);if(e!=null&&j)for(var t of j(e))r.indexOf(t)<0&&le.call(e,t)&&(s[t]=e[t]);return s};import{createElement as fe,forwardRef as ue,useMemo as ye}from"react";import{bool as a,number as W,oneOf as R,oneOfType as G,string as H}from"prop-types";import{Box as xe,safelySpreadBoxProps as ce}from"@twilio-paste/box";import{ResponsiveProp as n,isWidthTokenProp as _,isMinWidthTokenProp as me,isMaxWidthTokenProp as Pe,isHeightTokenProp as ge,isMinHeightTokenProp as Te,isMaxHeightTokenProp as be,isPaddingTokenProp as i,isMarginTokenProp as p}from"@twilio-paste/style-props";var q=({grow:e})=>Array.isArray(e)?e.map(r=>Number(r)):typeof e=="number"?e:e?1:0,J=({shrink:e,basis:r})=>Array.isArray(e)?e.map(s=>Number(s)):typeof e=="number"?e:typeof e=="boolean"?e?1:0:r&&r!=="auto"?0:1,K=e=>{let r=typeof e=="number"||String(Number.parseInt(e,10))===e?"px":"";return e+r},L=({basis:e})=>Array.isArray(e)?e.map(r=>K(r)):e?K(e):"auto",Q=({vertical:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"column":"row":r):e?"column":"row",U=({wrap:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"wrap":"nowrap":r):e?"wrap":"nowrap",Y={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},d=({vAlignContent:e})=>Array.isArray(e)?e.map(r=>Y[r]):e?Y[e]:"flex-start",Z={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},V=({hAlignContent:e})=>Array.isArray(e)?e.map(r=>Z[r]):e?Z[e]:"flex-start";var he=e=>{let r={justifyContent:e.vertical?d(e):V(e),alignItems:e.vertical?V(e):d(e)};return(e.grow||e.shrink||e.basis)&&(r.flexGrow=q(e),r.flexShrink=J(e),r.flexBasis=L(e)),e.vertical&&(r.flexDirection=Q(e)),e.wrap&&(r.flexWrap=U(e)),r},l=ue((I,oe)=>{var{as:e,basis:r,children:s,display:t,element:$="FLEX",hAlignContent:S,grow:k,marginTop:f,marginRight:u,marginBottom:y,marginLeft:x,margin:c,marginX:m,marginY:P,paddingTop:g,paddingRight:T,paddingBottom:b,paddingLeft:h,padding:O,paddingX:w,paddingY:A,maxWidth:v,minWidth:C="size0",width:B,height:M,minHeight:ee,maxHeight:re,size:F,shrink:z,vertical:N,vAlignContent:D,wrap:E}=I,te=X(I,["as","basis","children","display","element","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let ne=ye(()=>he({basis:r,hAlignContent:S,grow:k,shrink:z,vertical:N,vAlignContent:D,wrap:E}),[r,S,k,z,N,D,E]);F&&(B||M)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(m&&(c||y||x||u||f)||P&&(c||y||x||u||f))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(w&&(O||b||h||T||g)||A&&(O||b||h||T||g))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let se=m||P?{marginX:m,marginY:P}:{margin:c,marginBottom:y,marginLeft:x,marginRight:u,marginTop:f},ie=w||A?{paddingX:w,paddingY:A}:{padding:O,paddingBottom:b,paddingLeft:h,paddingRight:T,paddingTop:g},pe=F?{size:F}:{height:M,width:B};return fe(xe,o(o(o(o(o(o(o({},ne),ce(te)),{ref:oe,as:e,display:t,element:$}),se),ie),{minHeight:ee,maxHeight:re,maxWidth:v,minWidth:C}),pe),s)});l.displayName="Flex";l.defaultProps={display:"flex"};l.propTypes={as:H,display:n(R(["flex","inline-flex"])),element:H,vertical:n(a),vAlignContent:n(R(["top","center","bottom","stretch"])),hAlignContent:n(R(["left","center","right","around","between"])),grow:n(G([a,W])),shrink:n(G([a,W])),basis:n(G([H,W])),wrap:n(a),width:_,minWidth:me,maxWidth:Pe,height:ge,minHeight:Te,maxHeight:be,size:_,margin:p,marginTop:p,marginRight:p,marginBottom:p,marginLeft:p,marginX:p,marginY:p,padding:i,paddingTop:i,paddingRight:i,paddingBottom:i,paddingLeft:i,paddingX:i,paddingY:i};export{l as Flex};

dist/index.js

@@ -1,1 +0,1 @@
-var ie=Object.create,p=Object.defineProperty,se=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty,pe=Object.getOwnPropertyNames,ae=Object.getOwnPropertyDescriptor,D=Object.getOwnPropertySymbols,le=Object.prototype.propertyIsEnumerable;var n=Object.assign,E=e=>p(e,"__esModule",{value:!0});var I=(e,r)=>{var t={};for(var o in e)z.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&D)for(var o of D(e))r.indexOf(o)<0&&le.call(e,o)&&(t[o]=e[o]);return t};var Pe=(e,r)=>{E(e);for(var t in r)p(e,t,{get:r[t],enumerable:!0})},fe=(e,r,t)=>{if(E(e),r&&typeof r=="object"||typeof r=="function")for(let o of pe(r))!z.call(e,o)&&o!=="default"&&p(e,o,{get:()=>r[o],enumerable:!(t=ae(r,o))||t.enumerable});return e},a=e=>e&&e.__esModule?e:fe(p(e!=null?ie(se(e)):{},"default",{value:e,enumerable:!0}),e);Pe(exports,{Flex:()=>R});var i=a(require("react")),s=a(require("prop-types")),l=a(require("@twilio-paste/box")),ce=a(require("@twilio-paste/style-props"));var j=({grow:e})=>Array.isArray(e)?e.map(r=>Number(r)):typeof e=="number"?e:e?1:0,_=({shrink:e,basis:r})=>Array.isArray(e)?e.map(t=>Number(t)):typeof e=="number"?e:typeof e=="boolean"?e?1:0:r&&r!=="auto"?0:1,q=e=>{let r=typeof e=="number"||String(Number.parseInt(e,10))===e?"px":"";return e+r},J=({basis:e})=>Array.isArray(e)?e.map(r=>q(r)):e?q(e):"auto",K=({vertical:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"column":"row":r):e?"column":"row",Q=({wrap:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"wrap":"nowrap":r):e?"wrap":"nowrap",U={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},A=({vAlignContent:e})=>Array.isArray(e)?e.map(r=>U[r]):e?U[e]:"flex-start",X={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},F=({hAlignContent:e})=>Array.isArray(e)?e.map(r=>X[r]):e?X[e]:"flex-start";var ue=e=>{let r={justifyContent:e.vertical?A(e):F(e),alignItems:e.vertical?F(e):A(e)};return(e.grow||e.shrink||e.basis)&&(r.flexGrow=j(e),r.flexShrink=_(e),r.flexBasis=J(e)),e.vertical&&(r.flexDirection=K(e)),e.wrap&&(r.flexWrap=Q(e)),r},R=i.forwardRef((N,ee)=>{var{as:e,basis:r,children:t,display:o,hAlignContent:W,grow:M,marginTop:P,marginRight:f,marginBottom:u,marginLeft:y,margin:x,marginX:c,marginY:m,paddingTop:T,paddingRight:g,paddingBottom:d,paddingLeft:h,padding:b,paddingX:k,paddingY:O,maxWidth:Y,minWidth:Z="size0",width:V,height:H,minHeight:$,maxHeight:L,size:w,shrink:G,vertical:S,vAlignContent:B,wrap:v}=N,C=I(N,["as","basis","children","display","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let re=i.useMemo(()=>ue({basis:r,hAlignContent:W,grow:M,shrink:G,vertical:S,vAlignContent:B,wrap:v}),[r,W,M,G,S,B,v]);w&&(V||H)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(c&&(x||u||y||f||P)||m&&(x||u||y||f||P))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(k&&(b||d||h||g||T)||O&&(b||d||h||g||T))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let oe=c||m?{marginX:c,marginY:m}:{margin:x,marginBottom:u,marginLeft:y,marginRight:f,marginTop:P},te=k||O?{paddingX:k,paddingY:O}:{padding:b,paddingBottom:d,paddingLeft:h,paddingRight:g,paddingTop:T},ne=w?{size:w}:{height:H,width:V};return i.createElement(l.Box,n(n(n(n(n(n(n({},re),l.safelySpreadBoxProps(C)),{ref:ee,as:e,display:o}),oe),te),{minHeight:$,maxHeight:L,maxWidth:Y,minWidth:Z}),ne),t)});R.displayName="Flex";R.defaultProps={display:"flex"};
+var pe=Object.create,a=Object.defineProperty,ae=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty,le=Object.getOwnPropertyNames,fe=Object.getOwnPropertyDescriptor,I=Object.getOwnPropertySymbols,ue=Object.prototype.propertyIsEnumerable;var i=Object.assign,j=e=>a(e,"__esModule",{value:!0});var X=(e,r)=>{var s={};for(var n in e)E.call(e,n)&&r.indexOf(n)<0&&(s[n]=e[n]);if(e!=null&&I)for(var n of I(e))r.indexOf(n)<0&&ue.call(e,n)&&(s[n]=e[n]);return s};var ye=(e,r)=>{j(e);for(var s in r)a(e,s,{get:r[s],enumerable:!0})},xe=(e,r,s)=>{if(j(e),r&&typeof r=="object"||typeof r=="function")for(let n of le(r))!E.call(e,n)&&n!=="default"&&a(e,n,{get:()=>r[n],enumerable:!(s=fe(r,n))||s.enumerable});return e},l=e=>e&&e.__esModule?e:xe(a(e!=null?pe(ae(e)):{},"default",{value:e,enumerable:!0}),e);ye(exports,{Flex:()=>u});var p=l(require("react")),o=l(require("prop-types")),f=l(require("@twilio-paste/box")),t=l(require("@twilio-paste/style-props"));var q=({grow:e})=>Array.isArray(e)?e.map(r=>Number(r)):typeof e=="number"?e:e?1:0,J=({shrink:e,basis:r})=>Array.isArray(e)?e.map(s=>Number(s)):typeof e=="number"?e:typeof e=="boolean"?e?1:0:r&&r!=="auto"?0:1,K=e=>{let r=typeof e=="number"||String(Number.parseInt(e,10))===e?"px":"";return e+r},L=({basis:e})=>Array.isArray(e)?e.map(r=>K(r)):e?K(e):"auto",Q=({vertical:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"column":"row":r):e?"column":"row",U=({wrap:e})=>Array.isArray(e)?e.map(r=>typeof r=="boolean"?r===!0?"wrap":"nowrap":r):e?"wrap":"nowrap",Y={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},W=({vAlignContent:e})=>Array.isArray(e)?e.map(r=>Y[r]):e?Y[e]:"flex-start",Z={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},R=({hAlignContent:e})=>Array.isArray(e)?e.map(r=>Z[r]):e?Z[e]:"flex-start";var ce=e=>{let r={justifyContent:e.vertical?W(e):R(e),alignItems:e.vertical?R(e):W(e)};return(e.grow||e.shrink||e.basis)&&(r.flexGrow=q(e),r.flexShrink=J(e),r.flexBasis=L(e)),e.vertical&&(r.flexDirection=Q(e)),e.wrap&&(r.flexWrap=U(e)),r},u=p.forwardRef((D,te)=>{var{as:e,basis:r,children:s,display:n,element:_="FLEX",hAlignContent:G,grow:H,marginTop:y,marginRight:x,marginBottom:c,marginLeft:m,margin:P,marginX:g,marginY:T,paddingTop:b,paddingRight:h,paddingBottom:O,paddingLeft:w,padding:A,paddingX:F,paddingY:d,maxWidth:$,minWidth:v="size0",width:S,height:k,minHeight:C,maxHeight:ee,size:V,shrink:B,vertical:M,vAlignContent:z,wrap:N}=D,re=X(D,["as","basis","children","display","element","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let oe=p.useMemo(()=>ce({basis:r,hAlignContent:G,grow:H,shrink:B,vertical:M,vAlignContent:z,wrap:N}),[r,G,H,B,M,z,N]);V&&(S||k)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(g&&(P||c||m||x||y)||T&&(P||c||m||x||y))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(F&&(A||O||w||h||b)||d&&(A||O||w||h||b))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let ne=g||T?{marginX:g,marginY:T}:{margin:P,marginBottom:c,marginLeft:m,marginRight:x,marginTop:y},se=F||d?{paddingX:F,paddingY:d}:{padding:A,paddingBottom:O,paddingLeft:w,paddingRight:h,paddingTop:b},ie=V?{size:V}:{height:k,width:S};return p.createElement(f.Box,i(i(i(i(i(i(i({},oe),f.safelySpreadBoxProps(re)),{ref:te,as:e,display:n,element:_}),ne),se),{minHeight:C,maxHeight:ee,maxWidth:$,minWidth:v}),ie),s)});u.displayName="Flex";u.defaultProps={display:"flex"};u.propTypes={as:o.string,display:t.ResponsiveProp(o.oneOf(["flex","inline-flex"])),element:o.string,vertical:t.ResponsiveProp(o.bool),vAlignContent:t.ResponsiveProp(o.oneOf(["top","center","bottom","stretch"])),hAlignContent:t.ResponsiveProp(o.oneOf(["left","center","right","around","between"])),grow:t.ResponsiveProp(o.oneOfType([o.bool,o.number])),shrink:t.ResponsiveProp(o.oneOfType([o.bool,o.number])),basis:t.ResponsiveProp(o.oneOfType([o.string,o.number])),wrap:t.ResponsiveProp(o.bool),width:t.isWidthTokenProp,minWidth:t.isMinWidthTokenProp,maxWidth:t.isMaxWidthTokenProp,height:t.isHeightTokenProp,minHeight:t.isMinHeightTokenProp,maxHeight:t.isMaxHeightTokenProp,size:t.isWidthTokenProp,margin:t.isMarginTokenProp,marginTop:t.isMarginTokenProp,marginRight:t.isMarginTokenProp,marginBottom:t.isMarginTokenProp,marginLeft:t.isMarginTokenProp,marginX:t.isMarginTokenProp,marginY:t.isMarginTokenProp,padding:t.isPaddingTokenProp,paddingTop:t.isPaddingTokenProp,paddingRight:t.isPaddingTokenProp,paddingBottom:t.isPaddingTokenProp,paddingLeft:t.isPaddingTokenProp,paddingX:t.isPaddingTokenProp,paddingY:t.isPaddingTokenProp};

dist/types.d.ts

 /// <reference types="react" />
 import type { ResponsiveValue } from '@twilio-paste/styling-library';
 import type { LayoutProps, MarginProps, PaddingProps } from '@twilio-paste/style-props';
+import type { BoxProps } from '@twilio-paste/box';
 export declare type DisplayOptions = 'flex' | 'inline-flex';
@@ -20,3 +21,3 @@ export declare type Display = ResponsiveValue<DisplayOptions>;
 export declare type Wrap = ResponsiveValue<WrapOptions>;
-export interface FlexProps extends Omit<LayoutProps, 'verticalAlign'>, MarginProps, PaddingProps {
+export interface FlexProps extends Omit<LayoutProps, 'verticalAlign'>, MarginProps, PaddingProps, Pick<BoxProps, 'element'> {
     as?: keyof JSX.IntrinsicElements;
@@ -23,0 +24,0 @@ children?: React.ReactNode;

package.json

 {
   "name": "@twilio-paste/flex",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "category": "layout",
@@ -5,0 +5,0 @@ "status": "production",

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

400536

increased by6.84%

Lines of code

92

increased by10.84%

No dependency changes