@twilio-paste/grid - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.4.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/grid@0.3.0...@twilio-paste/grid@0.4.0) (2020-12-02)
+
+
+### Features
+
+* **grid:** wrapping with forwardRefs ([724697b](https://github.com/twilio-labs/paste/commit/724697bddc6d3ce6b456aca640a9eef808b77d66))
+
+
+
+
+
 # [0.3.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/grid@0.2.71...@twilio-paste/grid@0.3.0) (2020-11-25)
@@ -8,0 +19,0 @@

dist/Grid.d.ts

 import * as React from 'react';
 import { GridProps } from './types';
-declare const Grid: React.FC<GridProps>;
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export { Grid };
 //# sourceMappingURL=Grid.d.ts.map

dist/index.es.js

@@ -1,1 +0,1 @@
-import{useMemo as t,Children as r,isValidElement as e,cloneElement as n,createElement as o}from"react";import{string as a,node as i,bool as p,number as u}from"prop-types";import{ResponsiveProp as c}from"@twilio-paste/style-props";import{Box as s,safelySpreadBoxProps as l}from"@twilio-paste/box";import{styled as f,compose as m,space as g,flexbox as y,layout as v}from"@twilio-paste/styling-library";var d=function(){return(d=Object.assign||function(t){for(var r,e=1,n=arguments.length;e<n;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o]);return t}).apply(this,arguments)};var h=function(t){return Array.isArray(t)?t.map((function(t){return"space0"!==t?t.replace("space","spaceNegative"):"space0"===t?"space0":null})):"space0"===t?"space0":t&&"string"==typeof t?t.replace("space","spaceNegative"):"auto"},b=function(a){var i=a.as,p=a.children,u=a.equalColumnHeights,c=a.gutter,f=a.marginTop,m=a.marginBottom,g=a.vertical,y=function(t,r){var e={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(e[n[o]]=t[n[o]])}return e}(a,["as","children","equalColumnHeights","gutter","marginTop","marginBottom","vertical"]),v=t((function(){return r.map(p,(function(t){return e(t)?n(t,{count:r.count(p),gutter:c,vertical:g,stretchColumnContent:u}):t}))}),[p]),b=t((function(){return function(t){return{marginRight:h(t),marginLeft:h(t)}}(c)}),[c]),O=t((function(){return function(t){return Array.isArray(t)?t.map((function(t){return"boolean"==typeof t?!0===t?"column":"row":t})):t?"column":"row"}(g)}),[g]);return o(s,d({},l(y),{as:i,alignItems:u?"stretch":null,flexDirection:O,flexWrap:"wrap",display:"flex",marginTop:f,marginBottom:m},b,{minWidth:"size0"}),v)};b.displayName="Grid",b.defaultProps={vertical:!1},"development"===process.env.NODE_ENV&&(b.propTypes={as:a,children:i.isRequired,vertical:c(p),equalColumnHeights:p});var O=function(t){var r,e,n,o,a,i={width:(r=t,e=r.count,n=r.span,Array.isArray(n)&&e?n.map((function(t){return t/12*100+"%"})):"number"==typeof n&&e&&e<=12?n/12*100+"%":void 0!==e?1/e*100+"%":1/12*100+"%")};return t.gutter&&(i.paddingLeft=t.gutter,i.paddingRight=t.gutter),t.offset&&(i.marginLeft=(o=t.offset,Array.isArray(o)?o.map((function(t){return t/12*100+"%"})):o/12*100+"%")),t.vertical&&!t.offset&&(i.minWidth=(a=t.vertical,Array.isArray(a)?a.map((function(t){return"boolean"==typeof t?!0===t?"100%":"0":null})):a?"100%":"0"),i.marginLeft="space0"),t.stretchColumnContent&&(i.alignContent="stretch",i.display="flex"),i},C=f.div(m(g,y,v)),w=function(r){var e=r.as,n=r.children,a=r.count,i=r.gutter,p=r.offset,u=r.span,c=r.stretchColumnContent,s=r.vertical,l=t((function(){return O({count:a,gutter:i,offset:p,span:u,stretchColumnContent:c,vertical:s})}),[a,i,p,u,c,s]);return o(C,d({},l,{as:e}),n)};w.displayName="Column","development"===process.env.NODE_ENV&&(w.propTypes={as:a,offset:c(u),span:c(u)});export{w as Column,b as Grid};
+import{forwardRef as t,useMemo as r,Children as e,isValidElement as n,cloneElement as o,createElement as a}from"react";import{string as i,node as p,bool as u,number as c}from"prop-types";import{ResponsiveProp as s}from"@twilio-paste/style-props";import{Box as l,safelySpreadBoxProps as f}from"@twilio-paste/box";import{styled as m,compose as g,space as y,flexbox as v,layout as d}from"@twilio-paste/styling-library";var h=function(){return(h=Object.assign||function(t){for(var r,e=1,n=arguments.length;e<n;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o]);return t}).apply(this,arguments)};var b=function(t){return Array.isArray(t)?t.map((function(t){return"space0"!==t?t.replace("space","spaceNegative"):"space0"===t?"space0":null})):"space0"===t?"space0":t&&"string"==typeof t?t.replace("space","spaceNegative"):"auto"},O=t((function(t,i){var p=t.as,u=t.children,c=t.equalColumnHeights,s=t.gutter,m=t.marginTop,g=t.marginBottom,y=t.vertical,v=function(t,r){var e={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(e[n[o]]=t[n[o]])}return e}(t,["as","children","equalColumnHeights","gutter","marginTop","marginBottom","vertical"]),d=r((function(){return e.map(u,(function(t){return n(t)?o(t,{count:e.count(u),gutter:s,vertical:y,stretchColumnContent:c}):t}))}),[u]),O=r((function(){return function(t){return{marginRight:b(t),marginLeft:b(t)}}(s)}),[s]),C=r((function(){return function(t){return Array.isArray(t)?t.map((function(t){return"boolean"==typeof t?!0===t?"column":"row":t})):t?"column":"row"}(y)}),[y]);return a(l,h({},f(v),{ref:i,as:p,alignItems:c?"stretch":null,flexDirection:C,flexWrap:"wrap",display:"flex",marginTop:m,marginBottom:g},O,{minWidth:"size0"}),d)}));O.displayName="Grid",O.defaultProps={vertical:!1},"development"===process.env.NODE_ENV&&(O.propTypes={as:i,children:p.isRequired,vertical:s(u),equalColumnHeights:u});var C=function(t){var r,e,n,o,a,i={width:(r=t,e=r.count,n=r.span,Array.isArray(n)&&e?n.map((function(t){return t/12*100+"%"})):"number"==typeof n&&e&&e<=12?n/12*100+"%":void 0!==e?1/e*100+"%":1/12*100+"%")};return t.gutter&&(i.paddingLeft=t.gutter,i.paddingRight=t.gutter),t.offset&&(i.marginLeft=(o=t.offset,Array.isArray(o)?o.map((function(t){return t/12*100+"%"})):o/12*100+"%")),t.vertical&&!t.offset&&(i.minWidth=(a=t.vertical,Array.isArray(a)?a.map((function(t){return"boolean"==typeof t?!0===t?"100%":"0":null})):a?"100%":"0"),i.marginLeft="space0"),t.stretchColumnContent&&(i.alignContent="stretch",i.display="flex"),i},w=m.div(g(y,v,d)),A=function(t){var e=t.as,n=t.children,o=t.count,i=t.gutter,p=t.offset,u=t.span,c=t.stretchColumnContent,s=t.vertical,l=r((function(){return C({count:o,gutter:i,offset:p,span:u,stretchColumnContent:c,vertical:s})}),[o,i,p,u,c,s]);return a(w,h({},l,{as:e}),n)};A.displayName="Column","development"===process.env.NODE_ENV&&(A.propTypes={as:i,offset:s(c),span:s(c)});export{A as Column,O as Grid};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types"),r=require("@twilio-paste/style-props"),n=require("@twilio-paste/box"),o=require("@twilio-paste/styling-library"),a=function(){return(a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};var i=function(e){return Array.isArray(e)?e.map((function(e){return"space0"!==e?e.replace("space","spaceNegative"):"space0"===e?"space0":null})):"space0"===e?"space0":e&&"string"==typeof e?e.replace("space","spaceNegative"):"auto"},s=function(t){var r=t.as,o=t.children,s=t.equalColumnHeights,u=t.gutter,l=t.marginTop,p=t.marginBottom,c=t.vertical,f=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(t,["as","children","equalColumnHeights","gutter","marginTop","marginBottom","vertical"]),m=e.useMemo((function(){return e.Children.map(o,(function(t){return e.isValidElement(t)?e.cloneElement(t,{count:e.Children.count(o),gutter:u,vertical:c,stretchColumnContent:s}):t}))}),[o]),y=e.useMemo((function(){return function(e){return{marginRight:i(e),marginLeft:i(e)}}(u)}),[u]),g=e.useMemo((function(){return function(e){return Array.isArray(e)?e.map((function(e){return"boolean"==typeof e?!0===e?"column":"row":e})):e?"column":"row"}(c)}),[c]);return e.createElement(n.Box,a({},n.safelySpreadBoxProps(f),{as:r,alignItems:s?"stretch":null,flexDirection:g,flexWrap:"wrap",display:"flex",marginTop:l,marginBottom:p},y,{minWidth:"size0"}),m)};s.displayName="Grid",s.defaultProps={vertical:!1},"development"===process.env.NODE_ENV&&(s.propTypes={as:t.string,children:t.node.isRequired,vertical:r.ResponsiveProp(t.bool),equalColumnHeights:t.bool});var u=function(e){var t,r,n,o,a,i={width:(t=e,r=t.count,n=t.span,Array.isArray(n)&&r?n.map((function(e){return e/12*100+"%"})):"number"==typeof n&&r&&r<=12?n/12*100+"%":void 0!==r?1/r*100+"%":1/12*100+"%")};return e.gutter&&(i.paddingLeft=e.gutter,i.paddingRight=e.gutter),e.offset&&(i.marginLeft=(o=e.offset,Array.isArray(o)?o.map((function(e){return e/12*100+"%"})):o/12*100+"%")),e.vertical&&!e.offset&&(i.minWidth=(a=e.vertical,Array.isArray(a)?a.map((function(e){return"boolean"==typeof e?!0===e?"100%":"0":null})):a?"100%":"0"),i.marginLeft="space0"),e.stretchColumnContent&&(i.alignContent="stretch",i.display="flex"),i},l=o.styled.div(o.compose(o.space,o.flexbox,o.layout)),p=function(t){var r=t.as,n=t.children,o=t.count,i=t.gutter,s=t.offset,p=t.span,c=t.stretchColumnContent,f=t.vertical,m=e.useMemo((function(){return u({count:o,gutter:i,offset:s,span:p,stretchColumnContent:c,vertical:f})}),[o,i,s,p,c,f]);return e.createElement(l,a({},m,{as:r}),n)};p.displayName="Column","development"===process.env.NODE_ENV&&(p.propTypes={as:t.string,offset:r.ResponsiveProp(t.number),span:r.ResponsiveProp(t.number)}),exports.Column=p,exports.Grid=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("prop-types"),t=require("@twilio-paste/style-props"),n=require("@twilio-paste/box"),o=require("@twilio-paste/styling-library"),a=function(){return(a=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};var i=function(e){return Array.isArray(e)?e.map((function(e){return"space0"!==e?e.replace("space","spaceNegative"):"space0"===e?"space0":null})):"space0"===e?"space0":e&&"string"==typeof e?e.replace("space","spaceNegative"):"auto"},s=e.forwardRef((function(r,t){var o=r.as,s=r.children,u=r.equalColumnHeights,l=r.gutter,p=r.marginTop,c=r.marginBottom,f=r.vertical,m=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}(r,["as","children","equalColumnHeights","gutter","marginTop","marginBottom","vertical"]),y=e.useMemo((function(){return e.Children.map(s,(function(r){return e.isValidElement(r)?e.cloneElement(r,{count:e.Children.count(s),gutter:l,vertical:f,stretchColumnContent:u}):r}))}),[s]),g=e.useMemo((function(){return function(e){return{marginRight:i(e),marginLeft:i(e)}}(l)}),[l]),d=e.useMemo((function(){return function(e){return Array.isArray(e)?e.map((function(e){return"boolean"==typeof e?!0===e?"column":"row":e})):e?"column":"row"}(f)}),[f]);return e.createElement(n.Box,a({},n.safelySpreadBoxProps(m),{ref:t,as:o,alignItems:u?"stretch":null,flexDirection:d,flexWrap:"wrap",display:"flex",marginTop:p,marginBottom:c},g,{minWidth:"size0"}),y)}));s.displayName="Grid",s.defaultProps={vertical:!1},"development"===process.env.NODE_ENV&&(s.propTypes={as:r.string,children:r.node.isRequired,vertical:t.ResponsiveProp(r.bool),equalColumnHeights:r.bool});var u=function(e){var r,t,n,o,a,i={width:(r=e,t=r.count,n=r.span,Array.isArray(n)&&t?n.map((function(e){return e/12*100+"%"})):"number"==typeof n&&t&&t<=12?n/12*100+"%":void 0!==t?1/t*100+"%":1/12*100+"%")};return e.gutter&&(i.paddingLeft=e.gutter,i.paddingRight=e.gutter),e.offset&&(i.marginLeft=(o=e.offset,Array.isArray(o)?o.map((function(e){return e/12*100+"%"})):o/12*100+"%")),e.vertical&&!e.offset&&(i.minWidth=(a=e.vertical,Array.isArray(a)?a.map((function(e){return"boolean"==typeof e?!0===e?"100%":"0":null})):a?"100%":"0"),i.marginLeft="space0"),e.stretchColumnContent&&(i.alignContent="stretch",i.display="flex"),i},l=o.styled.div(o.compose(o.space,o.flexbox,o.layout)),p=function(r){var t=r.as,n=r.children,o=r.count,i=r.gutter,s=r.offset,p=r.span,c=r.stretchColumnContent,f=r.vertical,m=e.useMemo((function(){return u({count:o,gutter:i,offset:s,span:p,stretchColumnContent:c,vertical:f})}),[o,i,s,p,c,f]);return e.createElement(l,a({},m,{as:t}),n)};p.displayName="Column","development"===process.env.NODE_ENV&&(p.propTypes={as:r.string,offset:t.ResponsiveProp(r.number),span:t.ResponsiveProp(r.number)}),exports.Column=p,exports.Grid=s;

package.json

 {
   "name": "@twilio-paste/grid",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "category": "layout",
@@ -40,5 +40,5 @@ "status": "beta",
   "devDependencies": {
-    "@twilio-paste/box": "^2.11.9",
+    "@twilio-paste/box": "^2.11.10",
     "@twilio-paste/design-tokens": "^6.3.6",
-    "@twilio-paste/style-props": "^1.8.9",
+    "@twilio-paste/style-props": "^1.8.10",
     "@twilio-paste/styling-library": "^0.1.4",
@@ -48,3 +48,3 @@ "@twilio-paste/theme": "^3.3.2",
   },
-  "gitHead": "3bf5885241b046c7e73a2590f99e99ee0270e5e5"
+  "gitHead": "02112cbf9a879518c802e2861574b96232277da6"
 }

No alert changes

Improved metrics

Total package byte prevSize

35253

increased by1.04%

Lines of code

87

increased by1.16%

No dependency changes